feat: get all the version history for the user and have a hover state with a glimpse at the publish by and publish at (#3801)

Author: asalem1

package.json

@@ -52,7 +52,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=6d62bf9d76c012558a3c7d8848461d408e87f9db && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=2670263b84efd14387ffcaa01102db328cded3e4 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",
     "generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn cloudPriv",

src/flows/components/header/PublishedVersions.tsx

@@ -0,0 +1,21 @@
+import React, {FC, useContext} from 'react'
+import VersionBullet from 'src/flows/components/header/VersionBullet'
+import {VersionPublishContext} from 'src/flows/context/version.publish'
+
+const PublishedVersions: FC = () => {
+  const {versions} = useContext(VersionPublishContext)
+
+  if (versions.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {versions.map(version => (
+        <VersionBullet key={version.id} version={version} />
+      ))}
+    </>
+  )
+}
+
+export default PublishedVersions

src/flows/components/header/VersionBullet.scss

@@ -0,0 +1,41 @@
+.publish-version-bullet--button {
+  margin-right: 40px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.publish-version-bullet--button::before {
+  content: '';
+  height: 25px;
+  width: 4px;
+  transform: translate(-480%, 0%) rotate(-90deg);
+
+  @media screen and (max-width: $cf-grid--breakpoint-md) {
+    transform: translate(-380%, 0%) rotate(-90deg);
+  }
+  background: #333346;
+  background: -moz-linear-gradient(top, #333346 0%, #8e1fc3 100%);
+  background: -webkit-linear-gradient(top, #333346 0%, #8e1fc3 100%);
+  background: linear-gradient(to bottom, #333346 0%, #8e1fc3 100%);
+}
+
+.publish-version--tooltip {
+  padding: 10px;
+}
+
+.publish-version-bullet--button::after {
+  content: '';
+  height: 25px;
+  width: 4px;
+  transform: translate(480%, 0) rotate(90deg);
+
+  @media screen and (max-width: $cf-grid--breakpoint-md) {
+    transform: translate(380%, 0%) rotate(90deg);
+  }
+  background: #333346;
+  background: -moz-linear-gradient(top, #333346 0%, #8e1fc3 100%);
+  background: -webkit-linear-gradient(top, #333346 0%, #8e1fc3 100%);
+  background: linear-gradient(to bottom, #333346 0%, #8e1fc3 100%);
+}

src/flows/components/header/VersionBullet.tsx

@@ -0,0 +1,55 @@
+import React, {createRef, FC, RefObject} from 'react'
+import {
+  Appearance,
+  Bullet,
+  ComponentSize,
+  IconFont,
+  InfluxColors,
+  Popover,
+  PopoverInteraction,
+} from '@influxdata/clockface'
+
+// Types
+import {VersionHistory} from 'src/client/notebooksRoutes'
+
+type Props = {
+  version: VersionHistory
+}
+
+const VersionBullet: FC<Props> = ({version}) => {
+  const triggerRef: RefObject<HTMLElement> = createRef()
+
+  const handleBulletClick = () => {
+    // TODO(ariel): navigate to the version history based on the passed in version
+  }
+
+  return (
+    <>
+      <div onClick={handleBulletClick}>
+        <Bullet
+          className="publish-version-bullet--button"
+          glyph={IconFont.Checkmark_New}
+          size={ComponentSize.Small}
+          color={InfluxColors.White}
+          backgroundColor={InfluxColors.Amethyst}
+          ref={triggerRef}
+        />
+      </div>
+      <Popover
+        appearance={Appearance.Outline}
+        triggerRef={triggerRef}
+        enableDefaultStyles={false}
+        showEvent={PopoverInteraction.Hover}
+        hideEvent={PopoverInteraction.Hover}
+        contents={() => (
+          <h6 className="publish-version--tooltip">
+            Published by {version.publishedBy} at{' '}
+            {new Date(version.publishedAt).toLocaleString()}
+          </h6>
+        )}
+      />
+    </>
+  )
+}
+
+export default VersionBullet

src/flows/components/header/index.tsx

@@ -9,11 +9,15 @@ import React, {
   RefObject,
 } from 'react'
 import {useHistory} from 'react-router-dom'
-import {useDispatch, useSelector} from 'react-redux'
+import {useSelector} from 'react-redux'
 
 // Contexts
 import {FlowContext} from 'src/flows/context/flow.current'
 import {FlowListContext} from 'src/flows/context/flow.list'
+import {
+  VersionPublishContext,
+  VersionPublishProvider,
+} from 'src/flows/context/version.publish'
 import {AppSettingProvider} from 'src/shared/contexts/app'
 import {deletePinnedItemByParam} from 'src/shared/contexts/pinneditems'
 
@@ -31,6 +35,7 @@ import {
   List,
 } from '@influxdata/clockface'
 
+import PublishedVersions from 'src/flows/components/header/PublishedVersions'
 import AutoRefreshButton from 'src/flows/components/header/AutoRefreshButton'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import TimeRangeDropdown from 'src/flows/components/header/TimeRangeDropdown'
@@ -46,18 +51,13 @@ import {
   getNotebooksShare,
   deleteNotebooksShare,
   postNotebooksShare,
-  postNotebooksVersion,
 } from 'src/client/notebooksRoutes'
 import {event} from 'src/cloud/utils/reporting'
 import {downloadImage} from 'src/shared/utils/download'
 import {serialize} from 'src/flows/context/flow.list'
 import {updatePinnedItemByParam} from 'src/shared/contexts/pinneditems'
 import {getOrg} from 'src/organizations/selectors'
-import {notify} from 'src/shared/actions/notifications'
-import {
-  publishNotebookFailed,
-  publishNotebookSuccessful,
-} from 'src/shared/copy/notifications'
+
 // Types
 import {RemoteDataState} from 'src/types'
 
@@ -123,15 +123,12 @@ interface Share {
 }
 
 const FlowHeader: FC = () => {
-  const dispatch = useDispatch()
   const {remove, clone} = useContext(FlowListContext)
   const {flow, updateOther} = useContext(FlowContext)
+  const {handlePublish, publishLoading} = useContext(VersionPublishContext)
   const history = useHistory()
   const {id: orgID} = useSelector(getOrg)
   const [sharing, setSharing] = useState(false)
-  const [publishLoading, setPublishLoading] = useState<RemoteDataState>(
-    RemoteDataState.NotStarted
-  )
   const [share, setShare] = useState<Share>()
   const [linkLoading, setLinkLoading] = useState(RemoteDataState.NotStarted)
   const [linkDeleting, setLinkDeleting] = useState(RemoteDataState.NotStarted)
@@ -147,34 +144,12 @@ const FlowHeader: FC = () => {
       .catch(err => console.error('failed to get notebook share', err))
   }, [flow.id])
 
-  const handlePublish = useCallback(async () => {
-    if (isFlagEnabled('flowPublishLifecycle')) {
-      setPublishLoading(RemoteDataState.Loading)
-      try {
-        const response = await postNotebooksVersion({id: flow.id})
-
-        if (response.status !== 204) {
-          throw new Error(response.data.message)
-        }
-
-        dispatch(notify(publishNotebookSuccessful(flow.name)))
-        setPublishLoading(RemoteDataState.Done)
-      } catch (error) {
-        console.error({error})
-        dispatch(notify(publishNotebookFailed(flow.name)))
-        setPublishLoading(RemoteDataState.Error)
-      }
-    }
-  }, [dispatch, flow.id, flow.name])
-
   const handleSave = useCallback(
     event => {
+      event.preventDefault()
       if (isFlagEnabled('flowPublishLifecycle')) {
         if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-          // Prevent the Save dialog to open
-          event.preventDefault()
           handlePublish()
-          // Place your code here
         }
       }
     },
@@ -453,6 +428,13 @@ const FlowHeader: FC = () => {
           </Page.ControlBarRight>
         </Page.ControlBar>
       )}
+      {isFlagEnabled('flowPublishLifecycle') && (
+        <Page.ControlBar fullWidth>
+          <Page.ControlBarRight>
+            <PublishedVersions />
+          </Page.ControlBarRight>
+        </Page.ControlBar>
+      )}
       {!!sharing && !!share && (
         <Page.ControlBar fullWidth>
           <Page.ControlBarRight>
@@ -496,6 +478,8 @@ const FlowHeader: FC = () => {
 
 export default () => (
   <AppSettingProvider>
-    <FlowHeader />
+    <VersionPublishProvider>
+      <FlowHeader />
+    </VersionPublishProvider>
   </AppSettingProvider>
 )

src/flows/context/version.publish.tsx

@@ -0,0 +1,101 @@
+// Libraries
+import React, {
+  FC,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import {useDispatch} from 'react-redux'
+
+// Context
+import {FlowContext} from 'src/flows/context/flow.current'
+
+// Utils
+import {
+  getNotebooksVersions,
+  postNotebooksVersion,
+  VersionHistories,
+} from 'src/client/notebooksRoutes'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {notify} from 'src/shared/actions/notifications'
+import {
+  publishNotebookFailed,
+  publishNotebookSuccessful,
+} from 'src/shared/copy/notifications'
+
+// Types
+import {RemoteDataState} from 'src/types'
+
+interface ContextType {
+  handlePublish: () => void
+  publishLoading: RemoteDataState
+  versions: VersionHistories
+}
+
+const DEFAULT_CONTEXT: ContextType = {
+  handlePublish: () => {},
+  publishLoading: RemoteDataState.NotStarted,
+  versions: [],
+}
+
+export const VersionPublishContext = createContext<ContextType>(DEFAULT_CONTEXT)
+
+export const VersionPublishProvider: FC = ({children}) => {
+  const {flow} = useContext(FlowContext)
+  const dispatch = useDispatch()
+  const [versions, setVersions] = useState([])
+  const [publishLoading, setPublishLoading] = useState<RemoteDataState>(
+    RemoteDataState.NotStarted
+  )
+
+  const handleGetNotebookVersions = useCallback(async () => {
+    try {
+      const response = await getNotebooksVersions({id: flow.id})
+
+      if (response.status !== 200) {
+        throw new Error(response.data.message)
+      }
+
+      setVersions(response.data)
+    } catch (error) {
+      console.error({error})
+    }
+  }, [flow.id])
+
+  useEffect(() => {
+    if (isFlagEnabled('flowPublishLifecycle')) {
+      handleGetNotebookVersions()
+    }
+  }, [handleGetNotebookVersions])
+
+  const handlePublish = useCallback(async () => {
+    try {
+      const response = await postNotebooksVersion({id: flow.id})
+
+      if (response.status !== 200) {
+        throw new Error(response.data.message)
+      }
+
+      dispatch(notify(publishNotebookSuccessful(flow.name)))
+      setPublishLoading(RemoteDataState.Done)
+      handleGetNotebookVersions()
+    } catch (error) {
+      dispatch(notify(publishNotebookFailed(flow.name)))
+      setPublishLoading(RemoteDataState.Error)
+    }
+  }, [dispatch, handleGetNotebookVersions, flow.id, flow.name])
+
+  return (
+    <VersionPublishContext.Provider
+      value={{
+        handlePublish,
+        publishLoading,
+        versions,
+      }}
+    >
+      {children}
+    </VersionPublishContext.Provider>
+  )
+}

src/style/chronograf.scss

@@ -142,6 +142,7 @@
 @import 'src/buckets/components/createBucketForm/MeasurementSchema.scss';
 @import 'src/writeData/components/AddPluginToConfiguration.scss';
 @import 'src/authorizations/components/customApiTokenOverlay.scss';
+@import 'src/flows/components/header/VersionBullet.scss';
 
 // External
 @import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';