fix: make schemaComposition feature flag responsive (#5613)

* chore: remove useMemo for SchemaBrowserHeading

* chore: move feature flag `schemaComposition` into SchemaBrowserHeading component

Author: appletreeisyellow

src/dataExplorer/components/Schema.tsx

@@ -25,7 +25,6 @@ import {QueryScope} from 'src/shared/contexts/query'
 
 // Utils
 import {getOrg} from 'src/organizations/selectors'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Style
 import './Schema.scss'
@@ -82,9 +81,7 @@ const Schema: FC = () => {
               <div className="scroll--container">
                 <DapperScrollbars>
                   <div className="schema-browser" data-testid="schema-browser">
-                    {isFlagEnabled('schemaComposition') && (
-                      <SchemaBrowserHeading />
-                    )}
+                    <SchemaBrowserHeading />
                     <BucketSelector />
                     <div className="container-side-bar">
                       <MeasurementSelector />

src/dataExplorer/components/SchemaBrowserHeading.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useMemo} from 'react'
+import React, {FC, useContext} from 'react'
 
 // Components
 import {
@@ -14,6 +14,9 @@ import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
 import {FluxQueryBuilderContext} from 'src/dataExplorer/context/fluxQueryBuilder'
 import {PersistanceContext} from 'src/dataExplorer/context/persistance'
 
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 const FLUX_SYNC_DISABLE_TEXT = `Schema Sync is no longer available because the \
 code block has been edited.`
 
@@ -43,38 +46,39 @@ const SchemaBrowserHeading: FC = () => {
     </div>
   )
 
-  return useMemo(
-    () => (
-      <FlexBox
-        className="schema-browser-heading"
-        justifyContent={JustifyContent.SpaceBetween}
-      >
-        <div className="schema-browser-heading--text">Schema Browser</div>
-        <FlexBox className="flux-sync">
-          <SlideToggle
-            className="flux-sync--toggle"
-            active={fluxSync}
-            onChange={handleFluxSyncToggle}
-            testID="flux-sync--toggle"
-            disabled={disableToggle}
-            tooltipText={disableTooltipText}
-          />
-          <InputLabel className="flux-sync--label">
-            <div
-              className={`${disableToggle ? 'disabled' : ''}`}
-              title={disableTooltipText}
-            >
-              <SelectorTitle
-                label="Flux Sync"
-                tooltipContents={tooltipContents}
-                icon={IconFont.Sync}
-              />
-            </div>
-          </InputLabel>
-        </FlexBox>
+  if (!isFlagEnabled('schemaComposition')) {
+    return null
+  }
+
+  return (
+    <FlexBox
+      className="schema-browser-heading"
+      justifyContent={JustifyContent.SpaceBetween}
+    >
+      <div className="schema-browser-heading--text">Schema Browser</div>
+      <FlexBox className="flux-sync">
+        <SlideToggle
+          className="flux-sync--toggle"
+          active={fluxSync}
+          onChange={handleFluxSyncToggle}
+          testID="flux-sync--toggle"
+          disabled={disableToggle}
+          tooltipText={disableTooltipText}
+        />
+        <InputLabel className="flux-sync--label">
+          <div
+            className={`${disableToggle ? 'disabled' : ''}`}
+            title={disableTooltipText}
+          >
+            <SelectorTitle
+              label="Flux Sync"
+              tooltipContents={tooltipContents}
+              icon={IconFont.Sync}
+            />
+          </div>
+        </InputLabel>
       </FlexBox>
-    ),
-    [fluxSync, toggleFluxSync]
+    </FlexBox>
   )
 }