feat: adding query experience toggle (#4425)

drdelambre · web-flow · commit c38c8b4e62ba · 2022-04-19T12:00:47.000-07:00
diff --git a/src/dashboards/selectors/index.test.ts b/src/dashboards/selectors/index.test.ts
@@ -109,6 +109,7 @@ describe('Dashboards.Selector', () => {
         autoRefresh: 0,
         showTemplateControlBar: false,
         navBarState: 'expanded',
+        newDataExplorer: false,
         timeZone: 'Local' as TimeZone,
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
@@ -133,6 +134,7 @@ describe('Dashboards.Selector', () => {
         autoRefresh: 0,
         showTemplateControlBar: false,
         navBarState: 'expanded',
+        newDataExplorer: false,
         timeZone: 'UTC' as TimeZone,
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
@@ -165,6 +167,7 @@ describe('Dashboards.Selector', () => {
         autoRefresh: 0,
         showTemplateControlBar: false,
         navBarState: 'expanded',
+        newDataExplorer: false,
         timeZone: 'UTC' as TimeZone,
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
@@ -197,6 +200,7 @@ describe('Dashboards.Selector', () => {
         autoRefresh: 0,
         showTemplateControlBar: false,
         navBarState: 'expanded',
+        newDataExplorer: false,
         timeZone: 'UTC' as TimeZone,
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
@@ -225,6 +229,7 @@ describe('Dashboards.Selector', () => {
         autoRefresh: 0,
         showTemplateControlBar: false,
         navBarState: 'expanded',
+        newDataExplorer: false,
         timeZone: 'UTC' as TimeZone,
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
diff --git a/src/dataExplorer/components/DataExplorerPage.tsx b/src/dataExplorer/components/DataExplorerPage.tsx
@@ -4,7 +4,15 @@ import {Switch, Route, Link} from 'react-router-dom'
 
 // Components
 import DataExplorer from 'src/dataExplorer/components/DataExplorer'
-import {Page, Icon, IconFont} from '@influxdata/clockface'
+import {
+  Page,
+  Icon,
+  IconFont,
+  FlexBox,
+  ComponentSize,
+  InputLabel,
+  SlideToggle,
+} from '@influxdata/clockface'
 import SaveAsButton from 'src/dataExplorer/components/SaveAsButton'
 import VisOptionsButton from 'src/timeMachine/components/VisOptionsButton'
 import GetResources from 'src/resources/components/GetResources'
@@ -28,7 +36,12 @@ import {AppSettingContext} from 'src/shared/contexts/app'
 import {PROJECT_NAME} from 'src/flows'
 
 const DataExplorerPage: FC = () => {
-  const {flowsCTA, setFlowsCTA} = useContext(AppSettingContext)
+  const {
+    flowsCTA,
+    newDataExplorer,
+    setFlowsCTA,
+    setNewDataExplorer,
+  } = useContext(AppSettingContext)
   useLoadTimeReporting('DataExplorerPage load start')
 
   const hideFlowsCTA = () => {
@@ -58,7 +71,20 @@ const DataExplorerPage: FC = () => {
       <GetResources resources={[ResourceType.Variables]}>
         <Page.Header fullWidth={true} testID="data-explorer--header">
           <Page.Title title="Data Explorer" />
-          <RateLimitAlert location="data explorer" />
+          <FlexBox margin={ComponentSize.Large}>
+            <FeatureFlag name="newQueryBuilder">
+              <FlexBox margin={ComponentSize.Medium}>
+                <InputLabel>&#10024; Try new Data Explorer</InputLabel>
+                <SlideToggle
+                  active={newDataExplorer}
+                  onChange={() => {
+                    setNewDataExplorer(!newDataExplorer)
+                  }}
+                />
+              </FlexBox>
+            </FeatureFlag>
+            <RateLimitAlert location="data explorer" />
+          </FlexBox>
         </Page.Header>
         {flowsCTA.explorer && (
           <FeatureFlag name="flowsCTA">
@@ -80,19 +106,23 @@ const DataExplorerPage: FC = () => {
             </div>
           </FeatureFlag>
         )}
-        <Page.ControlBar fullWidth={true}>
-          <Page.ControlBarLeft>
-            <ViewTypeDropdown />
-            <VisOptionsButton />
-          </Page.ControlBarLeft>
-          <Page.ControlBarRight>
-            <TimeZoneDropdown />
-            <SaveAsButton />
-          </Page.ControlBarRight>
-        </Page.ControlBar>
-        <Page.Contents fullWidth={true} scrollable={false}>
-          <DataExplorer />
-        </Page.Contents>
+        {!newDataExplorer && (
+          <Page.ControlBar fullWidth={true}>
+            <Page.ControlBarLeft>
+              <ViewTypeDropdown />
+              <VisOptionsButton />
+            </Page.ControlBarLeft>
+            <Page.ControlBarRight>
+              <TimeZoneDropdown />
+              <SaveAsButton />
+            </Page.ControlBarRight>
+          </Page.ControlBar>
+        )}
+        {!newDataExplorer && (
+          <Page.Contents fullWidth={true} scrollable={false}>
+            <DataExplorer />
+          </Page.Contents>
+        )}
       </GetResources>
     </Page>
   )
diff --git a/src/mockState.tsx b/src/mockState.tsx
@@ -30,6 +30,7 @@ export const localState: LocalStorage = {
       navBarState: 'expanded',
       timeZone: 'Local' as TimeZone,
       theme: 'dark',
+      newDataExplorer: false,
       versionInfo: {
         version: '',
         commit: '',
diff --git a/src/shared/actions/app.ts b/src/shared/actions/app.ts
@@ -6,6 +6,7 @@ export enum ActionTypes {
   EnableUpdatedTimeRangeInVEO = 'ENABLE_UPDATED_TIMERANGE_IN_VEO',
   DisableUpdatedTimeRangeInVEO = 'DISABLE_UPDATED_TIMERANGE_IN_VEO',
   SetNavBarState = 'SET_NAV_BAR_STATE',
+  SetNewDataExplorer = 'SET_NEW_DATA_EXPLORER',
   SetAutoRefresh = 'SET_AUTOREFRESH',
   SetTimeZone = 'SET_APP_TIME_ZONE',
   SetVersionInfo = 'SET_VERSION_INFO',
@@ -19,6 +20,7 @@ export type Action =
   | ReturnType<typeof disablePresentationMode>
   | ReturnType<typeof enableUpdatedTimeRangeInVEO>
   | ReturnType<typeof disableUpdatedTimeRangeInVEO>
+  | ReturnType<typeof setNewDataExplorer>
   | ReturnType<typeof setNavBarState>
   | ReturnType<typeof setAutoRefresh>
   | ReturnType<typeof setTimeZone>
@@ -52,6 +54,12 @@ export const disableUpdatedTimeRangeInVEO = () =>
 
 export const setTheme = (theme: Theme) => ({type: 'SET_THEME', theme} as const)
 
+export const setNewDataExplorer = (active: boolean) =>
+  ({
+    type: ActionTypes.SetNewDataExplorer,
+    active,
+  } as const)
+
 export const setNavBarState = (navBarState: NavBarState) =>
   ({
     type: ActionTypes.SetNavBarState,
diff --git a/src/shared/contexts/app.tsx b/src/shared/contexts/app.tsx
@@ -5,6 +5,7 @@ import {
   setTimeZone as setTimeZoneAction,
   setTheme as setThemeAction,
   setNavBarState as setNavbarModeAction,
+  setNewDataExplorer as setNewDataExplorerAction,
   enablePresentationMode,
   disablePresentationMode,
   setFlowsCTA as setFlowsCTAAction,
@@ -13,6 +14,7 @@ import {
   timeZone as timeZoneFromState,
   theme as themeFromState,
   getPresentationMode as presentationModeFromState,
+  newDataExplorer as newDataExplorerFromState,
   navbarMode as navbarModeFromState,
   getFlowsCTA,
 } from 'src/shared/selectors/app'
@@ -26,12 +28,14 @@ interface AppSettingContextType {
   timeZone: TimeZone
   theme: Theme
   presentationMode: boolean
+  newDataExplorer: boolean
   navbarMode: NavBarState
   flowsCTA: FlowsCTA
 
   setTimeZone: (zone: TimeZone) => void
   setTheme: (theme: Theme) => void
   setPresentationMode: (active: boolean) => void
+  setNewDataExplorer: (active: boolean) => void
   setNavbarMode: (mode: NavBarState) => void
   setFlowsCTA: (flowsCTA: FlowsCTA) => void
 }
@@ -40,12 +44,14 @@ const DEFAULT_CONTEXT: AppSettingContextType = {
   timeZone: 'Local' as TimeZone,
   theme: 'dark' as Theme,
   presentationMode: false,
+  newDataExplorer: false,
   navbarMode: 'collapsed' as NavBarState,
   flowsCTA: {alerts: true, explorer: true, tasks: true} as FlowsCTA,
 
   setTimeZone: (_zone: TimeZone) => {},
   setTheme: (_theme: Theme) => {},
   setPresentationMode: (_active: boolean) => {},
+  setNewDataExplorer: (_active: boolean) => {},
   setNavbarMode: (_mode: NavBarState) => {},
   setFlowsCTA: (_flowsCTA: FlowsCTA) => {},
 }
@@ -55,15 +61,21 @@ export const AppSettingContext = React.createContext<AppSettingContextType>(
 )
 
 export const AppSettingProvider: FC = ({children}) => {
-  const {timeZone, theme, presentationMode, navbarMode, flowsCTA} = useSelector(
-    (state: AppState) => ({
-      timeZone: timeZoneFromState(state),
-      theme: themeFromState(state),
-      presentationMode: presentationModeFromState(state),
-      navbarMode: navbarModeFromState(state),
-      flowsCTA: getFlowsCTA(state),
-    })
-  )
+  const {
+    timeZone,
+    theme,
+    presentationMode,
+    newDataExplorer,
+    navbarMode,
+    flowsCTA,
+  } = useSelector((state: AppState) => ({
+    timeZone: timeZoneFromState(state),
+    theme: themeFromState(state),
+    presentationMode: presentationModeFromState(state),
+    newDataExplorer: newDataExplorerFromState(state),
+    navbarMode: navbarModeFromState(state),
+    flowsCTA: getFlowsCTA(state),
+  }))
   const dispatch = useDispatch()
 
   const setTimeZone = useCallback(
@@ -91,6 +103,12 @@ export const AppSettingProvider: FC = ({children}) => {
     },
     [dispatch]
   )
+  const setNewDataExplorer = useCallback(
+    (_active: boolean) => {
+      dispatch(setNewDataExplorerAction(_active))
+    },
+    [dispatch]
+  )
   const setNavbarMode = useCallback(
     (_mode: NavBarState) => {
       dispatch(setNavbarModeAction(_mode))
@@ -110,12 +128,14 @@ export const AppSettingProvider: FC = ({children}) => {
         timeZone,
         theme,
         presentationMode,
+        newDataExplorer,
         navbarMode,
         flowsCTA,
 
         setTimeZone,
         setTheme,
         setPresentationMode,
+        setNewDataExplorer,
         setNavbarMode,
         setFlowsCTA,
       }}
diff --git a/src/shared/reducers/app.test.ts b/src/shared/reducers/app.test.ts
@@ -20,6 +20,7 @@ describe('Shared.Reducers.appReducer', () => {
       autoRefresh: 0,
       showTemplateControlBar: false,
       navBarState: 'expanded',
+      newDataExplorer: false,
       timeZone: 'Local' as TimeZone,
       theme: 'dark',
       versionInfo: {version: '', commit: ''},
diff --git a/src/shared/reducers/app.ts b/src/shared/reducers/app.ts
@@ -15,6 +15,7 @@ export interface AppState {
     showTemplateControlBar: boolean
     timeZone: TimeZone
     navBarState: NavBarState
+    newDataExplorer: boolean
     theme: Theme
     versionInfo: VersionInfo
     flowsCTA: FlowsCTA
@@ -32,6 +33,7 @@ const initialState: AppState = {
     showTemplateControlBar: false,
     timeZone: 'Local',
     navBarState: 'collapsed',
+    newDataExplorer: false,
     versionInfo: {version: '', commit: ''},
     flowsCTA: {explorer: true, tasks: true, alerts: true},
   },
@@ -109,7 +111,11 @@ const appPersistedReducer = (
       return {...state, timeZone}
     }
 
-    case 'SET_NAV_BAR_STATE': {
+    case ActionTypes.SetNewDataExplorer: {
+      return {...state, newDataExplorer: action.active}
+    }
+
+    case ActionTypes.SetNavBarState: {
       const navBarState = action.navBarState
       return {
         ...state,
diff --git a/src/shared/selectors/app.ts b/src/shared/selectors/app.ts
@@ -17,6 +17,9 @@ export const theme = (state: AppState): Theme =>
 export const navbarMode = (state: AppState): NavBarState =>
   state.app.persisted.navBarState || ('collapsed' as NavBarState)
 
+export const newDataExplorer = (state: AppState): boolean =>
+  state.app.persisted.newDataExplorer || false
+
 export const getVersionInfo = (state: AppState): VersionInfo =>
   state.app.persisted.versionInfo || ({} as VersionInfo)
 
