fix: dont show header on 404 page (#6003)

Author: wdoconnell

src/App.tsx

@@ -50,6 +50,8 @@ import {UserAccountProvider} from 'src/accounts/context/userAccount'
 const App: FC = () => {
   const {theme, presentationMode} = useContext(AppSettingContext)
   const currentPage = useSelector((state: AppState) => state.currentPage)
+  const shouldShowCloudHeader =
+    CLOUD && isFlagEnabled('multiOrg') && currentPage !== 'not found'
 
   const appWrapperClass = classnames('', {
     'dashboard-light-mode': currentPage === 'dashboard' && theme === 'light',
@@ -123,7 +125,7 @@ const App: FC = () => {
       <TreeSidebar />
       <Suspense fallback={<PageSpinner />}>
         <Page>
-          {CLOUD && isFlagEnabled('multiOrg') && <GlobalHeader />}
+          {shouldShowCloudHeader && <GlobalHeader />}
           <Switch>
             <Route path="/orgs/new" component={CreateOrgOverlay} />
             <Route path="/orgs/:orgID" component={SetOrg} />

src/shared/components/NotFound.tsx

@@ -13,11 +13,14 @@ import {
   Panel,
 } from '@influxdata/clockface'
 import React, {useState, FC, useCallback, useEffect, useRef} from 'react'
-import {useSelector} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 import {useHistory, useLocation} from 'react-router-dom'
 import {getOrg} from 'src/organizations/selectors'
 import {getOrg as fetchOrg} from 'src/organizations/apis'
 
+// Actions
+import {setCurrentPage} from 'src/shared/reducers/currentPage'
+
 // Utils
 import {buildDeepLinkingMap} from 'src/utils/deepLinks'
 import {event} from 'src/cloud/utils/reporting'
@@ -135,6 +138,8 @@ const NotFound: FC = () => {
   const location = useLocation()
   const history = useHistory()
   const reduxOrg = useSelector(getOrg)
+  const dispatch = useDispatch()
+
   const org = useRef<Organization>(reduxOrg)
 
   const handleDeepLink = useCallback(async () => {
@@ -169,6 +174,13 @@ const NotFound: FC = () => {
     }
   }, [handleDeepLink])
 
+  useEffect(() => {
+    dispatch(setCurrentPage('not found'))
+    return () => {
+      dispatch(setCurrentPage('not set'))
+    }
+  }, [dispatch])
+
   if (isFetchingOrg) {
     // don't render anything if this component is actively fetching org id
     // this prevents popping in a 404 page then redirecting

src/shared/reducers/currentPage.ts

@@ -1,4 +1,4 @@
-export type CurrentPage = 'dashboard' | 'not set'
+export type CurrentPage = 'dashboard' | 'not found' | 'not set'
 
 export type Action = ReturnType<typeof setCurrentPage>