fix: deep linking to a notebook pipe (#3843)

Author: asalem1

src/flows/context/flow.current.tsx

@@ -6,7 +6,6 @@ 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 {customAlphabet} from 'nanoid'
@@ -55,16 +54,6 @@ 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/flows/context/pipe.tsx

@@ -1,8 +1,9 @@
-import React, {FC, useContext, useMemo, useCallback} from 'react'
+import React, {FC, useContext, useEffect, useMemo, useCallback} from 'react'
 import {PipeData, FluxResult} from 'src/types/flows'
 import {FlowContext} from 'src/flows/context/flow.current'
 import {ResultsContext} from 'src/flows/context/results'
 import {RemoteDataState, TimeRange} from 'src/types'
+import {useHistory, useLocation} from 'react-router-dom'
 
 export interface PipeContextType {
   id: string
@@ -39,6 +40,24 @@ export const PipeProvider: FC<PipeContextProps> = ({id, children}) => {
   const result = results[id]
   const status = statuses[id]
 
+  const history = useHistory()
+  const {search} = useLocation()
+
+  const panel = new URLSearchParams(search).get('panel')
+  const statusValues = Object.values(statuses).every(
+    stat => stat !== undefined && stat !== RemoteDataState.Loading
+  )
+
+  useEffect(() => {
+    if (panel && statusValues) {
+      document.getElementById(panel)?.scrollIntoView()
+      setTimeout(() => {
+        // then remove the deep linked panel from the URL?
+        history.push(window.location.pathname)
+      }, 1000)
+    }
+  }, [history, panel, statusValues])
+
   const updater = useCallback(
     (data: Partial<PipeData>) => {
       updateData(id, data)