feat(ui): remove notebook's unused buttons

src/flows/components/header/MenuButton.tsx

@@ -1,21 +1,19 @@
-import React, {FC, createRef, RefObject, useContext, useState} from 'react'
+import React, {createRef, FC, RefObject, useContext, useState} from 'react'
 import {
-  IconFont,
   Icon,
+  IconFont,
   List,
   Popover,
   PopoverInteraction,
-  SquareButton,
-  InfluxColors,
   RemoteDataState,
   SpinnerContainer,
+  SquareButton,
   TechnoSpinner,
 } from '@influxdata/clockface'
 import {useSelector} from 'react-redux'
 
 // Contexts
 import {FlowContext} from 'src/flows/context/flow.current'
-import {VersionPublishContext} from 'src/flows/context/version.publish'
 import {useHistory} from 'react-router-dom'
 
 // Utils
@@ -29,13 +27,8 @@ import {CLOUD} from 'src/shared/constants'
 
 const backgroundColor = '#07070E'
 
-type Props = {
-  handleResetShare: () => void
-}
-
-const MenuButton: FC<Props> = ({handleResetShare}) => {
+const MenuButton: FC = () => {
   const {flow, cloneNotebook, deleteNotebook} = useContext(FlowContext)
-  const {versions} = useContext(VersionPublishContext)
   const {id: orgID} = useSelector(getOrg)
   const [loading, setLoading] = useState(RemoteDataState.Done)
 
@@ -49,7 +42,6 @@ const MenuButton: FC<Props> = ({handleResetShare}) => {
         context: 'notebook',
       })
       const clonedId = await cloneNotebook()
-      handleResetShare()
       setLoading(RemoteDataState.Done)
       history.push(
         `/orgs/${orgID}/${PROJECT_NAME_PLURAL.toLowerCase()}/${clonedId}`
@@ -155,38 +147,7 @@ const MenuButton: FC<Props> = ({handleResetShare}) => {
     )
   }
 
-  const handleViewPublish = () => {
-    event('viewing_publish_history')
-    const [first, second] = versions
-    // accounts for the draft state
-    let versionId = first?.id
-    if (first?.id === 'draft' && second?.id) {
-      versionId = second?.id
-    }
-    history.push(
-      `/orgs/${orgID}/${PROJECT_NAME_PLURAL.toLowerCase()}/${
-        flow.id
-      }/versions/${versionId}`
-    )
-  }
-
   const menuItems: any[] = [
-    {
-      type: 'menuitem',
-      title: 'Version history',
-      onClick: handleViewPublish,
-      icon: IconFont.History,
-      disabled: () => {
-        const [first, second] = versions
-        // accounts for the draft state
-        let versionId = first?.id
-        if (first?.id === 'draft' && second?.id) {
-          versionId = second?.id
-        }
-        return !(versionId !== 'draft' && typeof versionId !== undefined)
-      },
-    },
-    {title: 'divider', type: 'divider'},
     {
       type: 'menuitem',
       title: 'Download as PNG',
@@ -241,14 +202,6 @@ const MenuButton: FC<Props> = ({handleResetShare}) => {
           contents={onHide => (
             <List>
               {menuItems.map(item => {
-                if (item.type === 'divider') {
-                  return (
-                    <List.Divider
-                      key={item.title}
-                      style={{backgroundColor: InfluxColors.Grey35}}
-                    />
-                  )
-                }
                 return (
                   <List.Item
                     key={item.title}

src/flows/components/header/index.tsx

@@ -1,22 +1,17 @@
 // Libraries
-import React, {FC, useCallback, useContext, useState, useEffect} from 'react'
-import {useDispatch, useSelector} from 'react-redux'
+import React, {FC, useContext} from 'react'
 
 // Contexts
 import {FlowContext} from 'src/flows/context/flow.current'
-import {
-  VersionPublishContext,
-  VersionPublishProvider,
-} from 'src/flows/context/version.publish'
+import {VersionPublishProvider} from 'src/flows/context/version.publish'
 import {AppSettingProvider} from 'src/shared/contexts/app'
 
 // Components
 import {
+  ComponentColor,
+  IconFont,
   Page,
   SquareButton,
-  IconFont,
-  ComponentColor,
-  ComponentStatus,
 } from '@influxdata/clockface'
 
 import AutoRefreshButton from 'src/flows/components/header/AutoRefreshButton'
@@ -29,106 +24,18 @@ import {FeatureFlag} from 'src/shared/utils/featureFlag'
 import MenuButton from 'src/flows/components/header/MenuButton'
 
 // Utility
-import {getNotebooksShare, postNotebooksShare} from 'src/client/notebooksRoutes'
-import {event} from 'src/cloud/utils/reporting'
 import {serialize} from 'src/flows/context/flow.list'
-import {getOrg} from 'src/organizations/selectors'
-import {showOverlay} from 'src/overlays/actions/overlays'
 
 // Types
-import {RemoteDataState} from 'src/types'
-
 // Constants
-import {DEFAULT_PROJECT_NAME, PROJECT_NAME} from 'src/flows'
-
-interface Share {
-  id: string
-  accessID: string
-}
+import {DEFAULT_PROJECT_NAME} from 'src/flows'
 
 const FlowHeader: FC = () => {
   const {flow, updateOther} = useContext(FlowContext)
-  const {handlePublish} = useContext(VersionPublishContext)
-  const {id: orgID} = useSelector(getOrg)
-  const [share, setShare] = useState<Share>()
-  const [linkLoading, setLinkLoading] = useState(RemoteDataState.NotStarted)
-  const dispatch = useDispatch()
-
-  useEffect(() => {
-    getNotebooksShare({query: {orgID: '', notebookID: flow.id}})
-      .then(res => {
-        if (!!res?.data?.[0]) {
-          // TODO: handle there being multiple links?
-          setShare({id: res.data[0].id, accessID: res.data[0].accessID})
-        }
-      })
-      .catch(err => console.error('failed to get notebook share', err))
-  }, [flow.id])
-
-  const handleSave = useCallback(
-    event => {
-      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-        event.preventDefault()
-        handlePublish()
-      }
-    },
-    [handlePublish]
-  )
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleSave)
-
-    return () => {
-      window.removeEventListener('keydown', handleSave)
-    }
-  }, [handleSave])
 
   const handleRename = (name: string) => {
     updateOther({name})
   }
-
-  const generateLink = async () => {
-    event('Show Share Menu', {share: !!share ? 'sharing' : 'not sharing'})
-
-    setLinkLoading(RemoteDataState.Loading)
-    try {
-      const response = await postNotebooksShare({
-        data: {
-          notebookID: flow.id,
-          orgID,
-          region: window.location.hostname,
-        },
-      })
-      if (response.status !== 200) {
-        throw new Error(response.data.message)
-      }
-      setLinkLoading(RemoteDataState.Done)
-      const shareObj = {
-        id: response.data.id,
-        accessID: response.data.accessID,
-      }
-      setShare(shareObj)
-      openShareLinkOverlay(shareObj)
-    } catch (error) {
-      console.error('failed to create share', error)
-      setLinkLoading(RemoteDataState.Error)
-    }
-    event('Notebook Share Link Created')
-  }
-
-  const openShareLinkOverlay = (shareObj: Share) => {
-    dispatch(
-      showOverlay(
-        'share-overlay',
-        {
-          share: shareObj,
-          onSetShare: setShare,
-        },
-        () => {}
-      )
-    )
-  }
-
   const printJSON = () => {
     /* eslint-disable no-console */
     console.log(JSON.stringify(serialize(flow), null, 2))
@@ -159,32 +66,9 @@ const FlowHeader: FC = () => {
           <PresentationMode />
           <TimeZoneDropdown />
           <TimeRangeDropdown />
-          <SquareButton
-            icon={IconFont.Save}
-            onClick={handlePublish}
-            color={ComponentColor.Default}
-            titleText="Save to version history"
-          />
           {flow?.id && (
             <>
-              <SquareButton
-                icon={IconFont.Share}
-                onClick={
-                  !!share
-                    ? () => openShareLinkOverlay(share)
-                    : () => generateLink()
-                }
-                color={
-                  !!share ? ComponentColor.Primary : ComponentColor.Secondary
-                }
-                status={
-                  linkLoading === RemoteDataState.Loading
-                    ? ComponentStatus.Loading
-                    : ComponentStatus.Default
-                }
-                titleText={`Share ${PROJECT_NAME}`}
-              />
-              <MenuButton handleResetShare={() => setShare(null)} />
+              <MenuButton />
             </>
           )}
           <FeatureFlag name="flow-snapshot">