feat: revert and clone funcitonality for versions (#3921)

Author: asalem1

src/flows/components/header/VersionHeader/CloneButton.tsx

@@ -0,0 +1,59 @@
+// Libraries
+import React, {FC, useContext} from 'react'
+import {useHistory} from 'react-router-dom'
+import {useSelector} from 'react-redux'
+
+// Contexts
+import {FlowContext} from 'src/flows/context/flow.current'
+
+// Components
+import {ComponentColor, SquareButton, IconFont} from '@influxdata/clockface'
+
+// Utility
+import {event} from 'src/cloud/utils/reporting'
+import {getOrg} from 'src/organizations/selectors'
+import {postNotebook} from 'src/client/notebooksRoutes'
+
+// Constants
+import {PROJECT_NAME_PLURAL} from 'src/flows'
+import {serialize} from 'src/flows/context/flow.list'
+
+const CloneVersionButton: FC = () => {
+  const {flow} = useContext(FlowContext)
+  const history = useHistory()
+  const {id: orgID} = useSelector(getOrg)
+
+  const handleClone = async () => {
+    event('clone_notebook_version')
+    try {
+      const _flow = serialize(flow)
+      const response = await postNotebook(_flow)
+
+      if (response.status !== 200) {
+        throw new Error(response.data.message)
+      }
+
+      const clonedId = response.data.id
+      history.push(
+        `/orgs/${orgID}/${PROJECT_NAME_PLURAL.toLowerCase()}/${clonedId}`
+      )
+    } catch (error) {
+      console.error({error})
+    }
+  }
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <SquareButton
+      icon={IconFont.Duplicate_New}
+      onClick={handleClone}
+      color={ComponentColor.Primary}
+      titleText="Clone"
+    />
+  )
+}
+
+export default CloneVersionButton

src/flows/components/header/VersionHeader/RevertButton.tsx

@@ -0,0 +1,58 @@
+// Libraries
+import React, {FC, useContext} from 'react'
+import {useHistory} from 'react-router-dom'
+import {useSelector} from 'react-redux'
+
+// Contexts
+import {FlowContext} from 'src/flows/context/flow.current'
+
+// Components
+import {ComponentColor, SquareButton, IconFont} from '@influxdata/clockface'
+
+// Utility
+import {event} from 'src/cloud/utils/reporting'
+import {getOrg} from 'src/organizations/selectors'
+import {patchNotebook} from 'src/client/notebooksRoutes'
+
+// Constants
+import {PROJECT_NAME_PLURAL} from 'src/flows'
+import {serialize} from 'src/flows/context/flow.list'
+
+const RevertVersionButton: FC = () => {
+  const {flow} = useContext(FlowContext)
+  const history = useHistory()
+  const {id: orgID} = useSelector(getOrg)
+
+  const handleRevert = async () => {
+    event('revert_notebook_version')
+    try {
+      const _flow = serialize(flow)
+      const response = await patchNotebook(_flow)
+
+      if (response.status !== 200) {
+        throw new Error(response.data.message)
+      }
+
+      history.push(
+        `/orgs/${orgID}/${PROJECT_NAME_PLURAL.toLowerCase()}/${flow.id}`
+      )
+    } catch (error) {
+      console.error({error})
+    }
+  }
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <SquareButton
+      icon={IconFont.Undo}
+      onClick={handleRevert}
+      color={ComponentColor.Danger}
+      titleText="Revert"
+    />
+  )
+}
+
+export default RevertVersionButton

src/flows/components/header/VersionHeader.tsx renamed to src/flows/components/header/VersionHeader/index.tsx

@@ -1,30 +1,21 @@
 // Libraries
 import React, {FC, useContext} from 'react'
-// import {useHistory} from 'react-router-dom'
-// import {useSelector} from 'react-redux'
 
 // Contexts
 import {FlowContext} from 'src/flows/context/flow.current'
 import {VersionPublishProvider} from 'src/flows/context/version.publish'
 import PublishedVersions from 'src/flows/components/header/PublishedVersions'
 
 // Components
-import {
-  ComponentColor,
-  Dropdown,
-  Page,
-  SquareButton,
-  IconFont,
-  ComponentStatus,
-} from '@influxdata/clockface'
+import {Dropdown, Page, IconFont, ComponentStatus} from '@influxdata/clockface'
 
 import AutoRefreshButton from 'src/flows/components/header/AutoRefreshButton'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import Submit from 'src/flows/components/header/Submit'
+import CloneVersionButton from 'src/flows/components/header/VersionHeader/CloneButton'
+import RevertVersionButton from 'src/flows/components/header/VersionHeader/RevertButton'
 
 // Utility
-import {event} from 'src/cloud/utils/reporting'
-// import {getOrg} from 'src/organizations/selectors'
 import {getTimeRangeLabel} from 'src/shared/utils/duration'
 
 // Constants
@@ -34,22 +25,6 @@ import {AppSettingContext} from 'src/shared/contexts/app'
 const VersionHeader: FC = () => {
   const {timeZone} = useContext(AppSettingContext)
   const {flow} = useContext(FlowContext)
-  // const history = useHistory()
-  // const {id: orgID} = useSelector(getOrg)
-
-  const handleClone = () => {
-    event('clone_notebook_version')
-    // const clonedId = await clone(flow.id)
-    // TODO(ariel): tweak this so we don't use the flowlist
-    // history.push(
-    //   `/orgs/${orgID}/${PROJECT_NAME_PLURAL.toLowerCase()}/${clonedId}`
-    // )
-  }
-
-  const handleRevert = () => {
-    event('revert_notebook_version')
-    console.warn('reverting') // TODO(ariel): finish this in the next PR
-  }
 
   if (!flow) {
     return null
@@ -78,18 +53,8 @@ const VersionHeader: FC = () => {
           >
             {timeRangeLabel}
           </Dropdown.Button>
-          <SquareButton
-            icon={IconFont.Duplicate_New}
-            onClick={handleClone}
-            color={ComponentColor.Primary}
-            titleText="Clone"
-          />
-          <SquareButton
-            icon={IconFont.Undo}
-            onClick={handleRevert}
-            color={ComponentColor.Danger}
-            titleText="Clone"
-          />
+          <CloneVersionButton />
+          <RevertVersionButton />
         </Page.ControlBarRight>
       </Page.ControlBar>
       <Page.ControlBar fullWidth>