fix: add CLOUD check and cleanup function to DynamicFluxFunctionsToolbar to prevent memory leak (#4376)

Author: TCL735

src/flows/pipes/RawFluxEditor/view.tsx

@@ -39,6 +39,7 @@ import 'src/flows/pipes/RawFluxEditor/style.scss'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
+import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const FluxMonacoEditor = lazy(() =>
@@ -98,7 +99,7 @@ const Query: FC<PipeProp> = ({Context}) => {
     } else {
       event('Flux Panel (Notebooks) - Toggle Functions - On')
       show(id)
-      if (isFlagEnabled('fluxDynamicDocs')) {
+      if (CLOUD && isFlagEnabled('fluxDynamicDocs')) {
         showSub(<DynamicFunctions onSelect={injectIntoEditor} />)
       } else {
         showSub(<Functions onSelect={injectIntoEditor} />)

src/timeMachine/components/FluxToolbar.tsx

@@ -11,6 +11,7 @@ import FluxToolbarTab from 'src/timeMachine/components/FluxToolbarTab'
 import {FluxToolbarFunction} from 'src/types'
 
 // Utils
+import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface Props {
@@ -30,7 +31,7 @@ const FluxToolbar: FC<Props> = ({onInsertFluxFunction, onInsertVariable}) => {
   let activeToolbar
 
   if (activeTab === 'functions') {
-    if (isFlagEnabled('fluxDynamicDocs')) {
+    if (CLOUD && isFlagEnabled('fluxDynamicDocs')) {
       activeToolbar = (
         <DynamicFluxFunctionsToolbar
           onInsertFluxFunction={onInsertFluxFunction}

src/timeMachine/components/TimeMachineFluxEditor.tsx

@@ -21,6 +21,7 @@ import {
   generateImport,
 } from 'src/timeMachine/utils/insertFunction'
 import {event} from 'src/cloud/utils/reporting'
+import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {getFluxExample} from 'src/shared/utils/fluxExample'
 
@@ -133,7 +134,7 @@ const TimeMachineFluxEditor: FC = () => {
       return
     }
     const {text, range} = getFluxTextAndRange(
-      isFlagEnabled('fluxDynamicDocs')
+      CLOUD && isFlagEnabled('fluxDynamicDocs')
         ? getFluxExample(func as FluxFunction)
         : func
     )

src/timeMachine/components/dynamicFluxFunctionsToolbar/FluxFunctionsToolbar.tsx

@@ -48,7 +48,6 @@ const DynamicFluxFunctionsToolbar: FC<Props> = (props: Props) => {
 
         if (fluxFunctions.length === 0) {
           await getFluxPackages()
-          setFluxLoadingState(RemoteDataState.Done)
         }
         setFluxLoadingState(RemoteDataState.Done)
       } catch (err) {
@@ -57,6 +56,9 @@ const DynamicFluxFunctionsToolbar: FC<Props> = (props: Props) => {
       }
     }
     getFluxFuncs()
+    return () => {
+      setFluxLoadingState(RemoteDataState.NotStarted)
+    }
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {