fix: kick out users if new DE flag is off (#5858)

* fix: let users leave the experiment

* fix: kick them out even more

* fix: force flag to be set on every test

Co-authored-by: drdelambre <drdelambre>

Author: drdelambre

cypress/e2e/shared/fluxQueryBuilder.test.ts

@@ -200,6 +200,7 @@ describe('Script Builder', () => {
       cy.setFeatureFlags({
         schemaComposition: true,
         saveAsScript: true,
+        newDataExplorer: true,
       }).then(() => {
         // cy.wait($time) is necessary to consistently ensure sufficient time for the feature flag override.
         // The flag reset happens via redux, (it's not a network request), so we can't cy.wait($intercepted_route).

src/dataExplorer/components/DataExplorerPage.tsx

@@ -61,9 +61,11 @@ const DataExplorerPageHeader: FC = () => {
     })
   }
 
+  const showNewExplorer = fluxQueryBuilder && isFlagEnabled('newDataExplorer')
+
   let pageTitle = <Page.Title title="Data Explorer" />
 
-  if (fluxQueryBuilder && resource?.data?.hasOwnProperty('name')) {
+  if (showNewExplorer && resource?.data?.hasOwnProperty('name')) {
     if (resource?.data?.type === ResourceType.Scripts) {
       pageTitle = <Page.Title title={resource?.data?.name ?? ''} />
     } else {
@@ -82,13 +84,13 @@ const DataExplorerPageHeader: FC = () => {
     <Page.Header
       fullWidth={true}
       className={`${
-        fluxQueryBuilder ? 'flux-query-builder' : 'data-explorer'
+        showNewExplorer ? 'flux-query-builder' : 'data-explorer'
       }--header`}
       testID="data-explorer--header"
     >
       {pageTitle}
       <FlexBox margin={ComponentSize.Large}>
-        <FeatureFlag name="newDataExplorer">
+        {isFlagEnabled('newDataExplorer') && (
           <FlexBox margin={ComponentSize.Medium}>
             <InputLabel>&#10024; Preview New Script Editor</InputLabel>
             <SlideToggle
@@ -97,7 +99,7 @@ const DataExplorerPageHeader: FC = () => {
               testID="flux-query-builder-toggle"
             />
           </FlexBox>
-        </FeatureFlag>
+        )}
         {!isFlagEnabled('multiOrg') && (
           <RateLimitAlert location="data explorer" />
         )}
@@ -110,6 +112,7 @@ const DataExplorerPage: FC = () => {
   const {flowsCTA, fluxQueryBuilder, setFlowsCTA} =
     useContext(AppSettingContext)
   useLoadTimeReporting('DataExplorerPage load start')
+  const showNewExplorer = fluxQueryBuilder && isFlagEnabled('newDataExplorer')
 
   const hideFlowsCTA = () => {
     setFlowsCTA({explorer: false})
@@ -169,7 +172,7 @@ const DataExplorerPage: FC = () => {
             </div>
           </FeatureFlag>
         )}
-        {!fluxQueryBuilder && (
+        {!showNewExplorer && (
           <Page.ControlBar fullWidth={true}>
             <Page.ControlBarLeft>
               <ViewTypeDropdown />
@@ -182,8 +185,8 @@ const DataExplorerPage: FC = () => {
           </Page.ControlBar>
         )}
         <Page.Contents fullWidth={true} scrollable={false}>
-          {!fluxQueryBuilder && <DataExplorer />}
-          {fluxQueryBuilder && <FluxQueryBuilder />}
+          {!showNewExplorer && <DataExplorer />}
+          {showNewExplorer && <FluxQueryBuilder />}
         </Page.Contents>
       </GetResources>
     </Page>