feat: copy clone and delete to the notebook (#3315)

Author: drdelambre

src/flows/components/header/index.tsx

@@ -1,11 +1,13 @@
 // Libraries
 import React, {FC, useContext, useState, useEffect} from 'react'
-import {Link} from 'react-router-dom'
+import {useHistory, Link} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 
 // Contexts
 import {FlowContext} from 'src/flows/context/flow.current'
+import {FlowListContext} from 'src/flows/context/flow.list'
 import {AppSettingProvider} from 'src/shared/contexts/app'
+import {deletePinnedItemByParam} from 'src/shared/contexts/pinneditems'
 
 // Components
 import {
@@ -14,9 +16,12 @@ import {
   IconFont,
   ComponentColor,
   ComponentStatus,
+  ConfirmationButton,
+  ButtonShape,
   Dropdown,
   ErrorTooltip,
 } from '@influxdata/clockface'
+import {PROJECT_NAME, PROJECT_NAME_PLURAL} from 'src/flows'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import TimeRangeDropdown from 'src/flows/components/header/TimeRangeDropdown'
 import Submit from 'src/flows/components/header/Submit'
@@ -49,7 +54,9 @@ interface Share {
 }
 
 const FlowHeader: FC = () => {
+  const {remove, clone} = useContext(FlowListContext)
   const {flow, updateOther} = useContext(FlowContext)
+  const history = useHistory()
   const {id: orgID} = useSelector(getOrg)
   const [sharing, setSharing] = useState(false)
   const [token, setToken] = useState<Token>()
@@ -145,6 +152,21 @@ const FlowHeader: FC = () => {
     /* eslint-enable no-console */
   }
 
+  const handleClone = async () => {
+    event('clone_notebook')
+    const clonedId = await clone(flow.id)
+    history.push(
+      `/orgs/${orgID}/${PROJECT_NAME_PLURAL.toLowerCase()}/${clonedId}`
+    )
+  }
+
+  const handleDelete = () => {
+    event('delete_notebook')
+    deletePinnedItemByParam(flow.id)
+    remove(flow.id)
+    history.push(`/orgs/${orgID}/${PROJECT_NAME_PLURAL.toLowerCase()}`)
+  }
+
   if (!flow) {
     return null
   }
@@ -201,16 +223,33 @@ const FlowHeader: FC = () => {
             <TimeZoneDropdown />
             <TimeRangeDropdown />
             {flow?.id && (
-              <FeatureFlag name="shareNotebook">
+              <>
+                <ConfirmationButton
+                  icon={IconFont.Trash_New}
+                  shape={ButtonShape.Square}
+                  confirmationLabel={`Yes, delete this ${PROJECT_NAME}`}
+                  onConfirm={handleDelete}
+                  confirmationButtonText="Confirm"
+                  testID="context-delete-menu"
+                />
                 <SquareButton
-                  icon={IconFont.Share}
-                  onClick={showShare}
-                  color={
-                    !!share ? ComponentColor.Primary : ComponentColor.Secondary
-                  }
-                  titleText="Share Notebook"
+                  icon={IconFont.Duplicate_New}
+                  onClick={handleClone}
+                  titleText="Clone"
                 />
-              </FeatureFlag>
+                <FeatureFlag name="shareNotebook">
+                  <SquareButton
+                    icon={IconFont.Share}
+                    onClick={showShare}
+                    color={
+                      !!share
+                        ? ComponentColor.Primary
+                        : ComponentColor.Secondary
+                    }
+                    titleText="Share Notebook"
+                  />
+                </FeatureFlag>
+              </>
             )}
             <FeatureFlag name="flow-snapshot">
               <SquareButton