feat: add deep linking to a pipe (#3521)

Author: asalem1

src/flows/components/Sidebar.tsx

@@ -6,6 +6,7 @@ import {
   DapperScrollbars,
   Dropdown,
 } from '@influxdata/clockface'
+import {useDispatch} from 'react-redux'
 import {FlowContext} from 'src/flows/context/flow.current'
 import {FlowQueryContext} from 'src/flows/context/flow.query'
 import {SidebarContext} from 'src/flows/context/sidebar'
@@ -14,6 +15,13 @@ import {ControlSection, ControlAction, Submenu} from 'src/types/flows'
 import ClientList from 'src/flows/components/ClientList'
 import './Sidebar.scss'
 import {event} from 'src/cloud/utils/reporting'
+import {notify} from 'src/shared/actions/notifications'
+
+// Constants
+import {
+  panelCopyLinkSuccess,
+  panelCopyLinkFail,
+} from 'src/shared/copy/notifications'
 
 export const SubSideBar: FC = () => {
   const {flow} = useContext(FlowContext)
@@ -115,6 +123,7 @@ const Sidebar: FC = () => {
   const {flow, updateMeta, add, remove} = useContext(FlowContext)
   const {getPanelQueries} = useContext(FlowQueryContext)
   const {id, hide, menu, showSub} = useContext(SidebarContext)
+  const dispatch = useDispatch()
 
   const sections = ([
     {
@@ -129,6 +138,24 @@ const Sidebar: FC = () => {
             remove(id)
           },
         },
+        {
+          title: 'Share',
+          action: () => {
+            const {type} = flow.data.byID[id]
+            event('notebook_share_panel', {notebooksCellType: type})
+            const url = new URL(
+              `${window.location.origin}${window.location.pathname}?panel=${id}`
+            ).toString()
+            try {
+              navigator.clipboard.writeText(url)
+              event('panel_share_success', {notebooksCellType: type})
+              dispatch(notify(panelCopyLinkSuccess()))
+            } catch {
+              event('panel_share_failure', {notebooksCellType: type})
+              dispatch(notify(panelCopyLinkFail()))
+            }
+          },
+        },
         {
           title: 'Duplicate',
           action: () => {

src/flows/components/panel/FlowPanel.tsx

@@ -159,7 +159,7 @@ const FlowPanel: FC<Props> = ({
 
   return (
     <>
-      <div className={panelClassName}>
+      <div className={panelClassName} id={id}>
         <div className="flow-panel--header">
           <div className="flow-panel--node-wrapper">
             <div className="flow-panel--node" />

src/flows/context/flow.current.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
   useEffect,
 } from 'react'
+import {useLocation} from 'react-router-dom'
 import {Flow, PipeData, PipeMeta} from 'src/types/flows'
 import {FlowListContext, FlowListProvider} from 'src/flows/context/flow.list'
 import {v4 as UUID} from 'uuid'
@@ -53,6 +54,16 @@ export const FlowProvider: FC = ({children}) => {
     }
   }
 
+  const {search} = useLocation()
+
+  const panel = new URLSearchParams(search).get('panel')
+
+  useEffect(() => {
+    if (document && panel && currentFlow) {
+      document.getElementById(panel)?.scrollIntoView()
+    }
+  }, [panel, currentFlow])
+
   // NOTE this is a pretty awful mechanism, as it duplicates the source of
   // truth for the definition of the current flow, but i can't see a good
   // way around it. We need to ensure that we're still updating the values

src/shared/copy/notifications.ts

@@ -1225,6 +1225,16 @@ export const notebookRunFail = (projectName: string): Notification => ({
   message: `${projectName} run failed`,
 })
 
+export const panelCopyLinkSuccess = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Panel link copied successfully!`,
+})
+
+export const panelCopyLinkFail = (): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to copy the panel link`,
+})
+
 export const notebookCreateFail = (): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to create Notebook, please try again.`,