feat: introduction to publish lifecycle (#3769)

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=7227887eaec5dfcab6774209e660eb797dd9efac && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=40fb34a01f631d701c87025b2da98d5a4d62f94b && 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/index.tsx

@@ -1,14 +1,15 @@
 // Libraries
 import React, {
   FC,
+  useCallback,
   useContext,
   useState,
   useEffect,
   createRef,
   RefObject,
 } from 'react'
 import {useHistory} from 'react-router-dom'
-import {useSelector} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 
 // Contexts
 import {FlowContext} from 'src/flows/context/flow.current'
@@ -45,18 +46,27 @@ 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'
 
 // Constants
-import {DEFAULT_PROJECT_NAME, PROJECT_NAME_PLURAL} from 'src/flows'
+import {
+  DEFAULT_PROJECT_NAME,
+  PROJECT_NAME,
+  PROJECT_NAME_PLURAL,
+} from 'src/flows'
 
 const backgroundColor = '#07070E'
 
@@ -113,11 +123,15 @@ interface Share {
 }
 
 const FlowHeader: FC = () => {
+  const dispatch = useDispatch()
   const {remove, clone} = useContext(FlowListContext)
   const {flow, updateOther} = useContext(FlowContext)
   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)
@@ -133,6 +147,52 @@ 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 => {
+      if (isFlagEnabled('flowPublishLifecycle')) {
+        if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+          // Prevent the Save dialog to open
+          event.preventDefault()
+          handlePublish()
+          // Place your code here
+        }
+      }
+    },
+    [handlePublish]
+  )
+
+  useEffect(() => {
+    if (isFlagEnabled('flowPublishLifecycle')) {
+      window.addEventListener('keydown', handleSave)
+    }
+
+    return () => {
+      if (isFlagEnabled('flowPublishLifecycle')) {
+        window.removeEventListener('keydown', handleSave)
+      }
+    }
+  }, [handleSave])
+
   const handleRename = (name: string) => {
     updateOther({name})
     try {
@@ -247,6 +307,10 @@ const FlowHeader: FC = () => {
       return
     }
 
+    if (isFlagEnabled('flowPublishLifecycle')) {
+      handlePublish()
+    }
+
     setLinkLoading(RemoteDataState.Loading)
     postNotebooksShare({
       data: {
@@ -360,8 +424,21 @@ const FlowHeader: FC = () => {
                       ? ComponentStatus.Loading
                       : ComponentStatus.Default
                   }
-                  titleText="Share Notebook"
+                  titleText={`Share ${PROJECT_NAME}`}
                 />
+                {isFlagEnabled('flowPublishLifecycle') && (
+                  <SquareButton
+                    icon={IconFont.Checkmark}
+                    onClick={handlePublish}
+                    color={ComponentColor.Primary}
+                    status={
+                      publishLoading === RemoteDataState.Loading
+                        ? ComponentStatus.Loading
+                        : ComponentStatus.Default
+                    }
+                    titleText={`Publish ${PROJECT_NAME}`}
+                  />
+                )}
                 <MenuButton menuItems={menuItems} />
               </>
             )}

src/shared/copy/notifications.ts

@@ -1472,3 +1472,13 @@ export const getResourcesTokensFailure = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Failed to fetch all resources for creating custom api token',
 })
+
+export const publishNotebookSuccessful = (name: string): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Successfully published ${name}`,
+})
+
+export const publishNotebookFailed = (name: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to publish ${name}`,
+})