move to own component

src/app/views/main-header/BannerNotification.tsx

@@ -0,0 +1,30 @@
+import { MessageBar } from '@fluentui/react';
+import { useState } from 'react';
+
+import { BANNERMESSAGE } from '../../services/variant-constants';
+import variantService from '../../services/variant-service';
+
+const BannerNotification = () => {
+  const [bannerMessage, setBannerMessage] = useState('');
+
+  setTimeout(() => {
+    variantService.getFeatureVariables('default', BANNERMESSAGE).then((value) => {
+      if (value && value !== ' ') {
+        setBannerMessage(value as string);
+      }
+    });
+  }, 1000);
+
+  if (!!!bannerMessage) {
+    return null;
+  }
+
+  return (
+    <MessageBar>
+      {bannerMessage}
+    </MessageBar>
+  );
+
+}
+
+export default BannerNotification

src/app/views/main-header/MainHeader.tsx

@@ -1,21 +1,18 @@
 import {
   FontIcon, getId, getTheme, IconButton, IStackTokens, Label,
-  MessageBar,
   registerIcons, Stack, TooltipHost
 } from '@fluentui/react';
-import { useState } from 'react';
 
 import { useAppSelector } from '../../../store';
 import { Mode } from '../../../types/enums';
-import { BANNERMESSAGE } from '../../services/variant-constants';
-import variantService from '../../services/variant-service';
 import { translateMessage } from '../../utils/translate-messages';
 import { Authentication } from '../authentication';
 import { FeedbackButton } from './FeedbackButton';
 import { Help } from './Help';
 import { mainHeaderStyles } from './MainHeader.styles';
 import { Settings } from './settings/Settings';
 import TenantIcon from './tenantIcon';
+import BannerNotification from './BannerNotification';
 
 interface MainHeaderProps {
   toggleSidebar: Function;
@@ -36,7 +33,6 @@ export const MainHeader: React.FunctionComponent<MainHeaderProps> = (props: Main
   const { profile, graphExplorerMode, sidebarProperties } = useAppSelector(
     (state) => state
   );
-  const [bannerMessage, setBannerMessage] = useState('');
 
   const mobileScreen = !!sidebarProperties.mobileScreen;
   const showSidebar = !!sidebarProperties.showSidebar;
@@ -47,14 +43,6 @@ export const MainHeader: React.FunctionComponent<MainHeaderProps> = (props: Main
     feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles,
     tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen);
 
-  setTimeout(() => {
-    variantService.getFeatureVariables('default', BANNERMESSAGE).then((value) => {
-      if (value && value !== ' ') {
-        setBannerMessage(value as string);
-      }
-    });
-  }, 1000);
-
   return (
     <Stack tokens={sectionStackTokens}>
       <Stack
@@ -127,9 +115,7 @@ export const MainHeader: React.FunctionComponent<MainHeaderProps> = (props: Main
           <Authentication />
         </Stack>
       </Stack>
-      {!!bannerMessage && <MessageBar>
-        {bannerMessage}
-      </MessageBar>}
+      <BannerNotification />
     </Stack>
   );
 };

src/index.tsx

@@ -3,8 +3,8 @@ import { initializeIcons } from '@fluentui/react';
 import '@ms-ofb/officebrowserfeedbacknpm/styles/officebrowserfeedback.css';
 import 'bootstrap/dist/css/bootstrap-grid.min.css';
 import ReactDOM from 'react-dom/client';
-
 import { Provider } from 'react-redux';
+
 import { getAuthTokenSuccess, getConsentedScopesSuccess } from './app/services/actions/auth-action-creators';
 import { createCollection } from './app/services/actions/collections-action-creators';
 import { setDevxApiUrl } from './app/services/actions/devxApi-action-creators';