NCL-8899 Add announcement redirect to old UI when React UI is set as …

…primary UI

src/AppLayout.tsx

@@ -41,6 +41,7 @@ import { DropdownLinkItem } from 'components/Dropdown/DropdownLinkItem';
 import { ExperimentalContent } from 'components/ExperimentalContent/ExperimentalContent';
 import { ExperimentalContentMarker } from 'components/ExperimentalContent/ExperimentalContentMarker';
 import { ProtectedComponent } from 'components/ProtectedContent/ProtectedComponent';
+import { OldUIAnnouncement } from 'components/TopBar/OldUIAnnouncement';
 import { TopBarAnnouncement } from 'components/TopBar/TopBarAnnouncement';
 
 import { IAuthBroadcastMessage, authBroadcastService } from 'services/broadcastService';
@@ -131,6 +132,11 @@ export const AppLayout = () => {
         <ProtectedComponent role={AUTH_ROLE.Admin} hide key="administration">
           <DropdownLinkItem to="/admin/administration">Administration</DropdownLinkItem>
         </ProtectedComponent>
+        {process.env.REACT_APP_PNC_OLD_UI_WEB && (
+          <DropdownLinkItem key="old-ui" to={process.env.REACT_APP_PNC_OLD_UI_WEB}>
+            Old UI Version
+          </DropdownLinkItem>
+        )}
       </>
     );
 
@@ -358,6 +364,7 @@ export const AppLayout = () => {
   return (
     <>
       <div ref={topBarsRef}>
+        <OldUIAnnouncement />
         {serviceContainerPncStatus.data && (
           <TopBarAnnouncement
             id="site-top-bar"

src/components/TopBar/OldUIAnnouncement.tsx

@@ -0,0 +1,47 @@
+import { Alert, AlertActionCloseButton, AlertVariant } from '@patternfly/react-core';
+import { ApplicationsIcon, ArrowIcon } from '@patternfly/react-icons';
+
+import { useStorage } from 'hooks/useStorage';
+
+const URL_TRIGGER = 'secondary';
+const LOCAL_STORAGE_KEY = 'old-ui-announcement-closed';
+
+export const OldUIAnnouncement = () => {
+  const { storageValue: isClosed, storeToStorage: setIsClosed } = useStorage<boolean>({
+    storageKey: LOCAL_STORAGE_KEY,
+    initialValue: false,
+  });
+
+  const oldUIUrl = process.env.REACT_APP_PNC_OLD_UI_WEB;
+
+  //Display announcement when oldUIUrl is configured and current host name does not contain keyword
+  const shouldDisplay = !!oldUIUrl && !window.location.hostname.toLowerCase().includes(URL_TRIGGER);
+
+  if (!shouldDisplay || isClosed) {
+    return null;
+  }
+
+  const closeAnnouncement = () => {
+    setIsClosed(true);
+  };
+
+  return (
+    <Alert
+      id="old-ui-announcement-bar"
+      variant={AlertVariant.custom}
+      actionClose={<AlertActionCloseButton onClose={closeAnnouncement} />}
+      aria-label="Old UI Announcement"
+      customIcon={<ApplicationsIcon />}
+      title={
+        <>
+          Welcome to the new PNC Web UI. The{' '}
+          <a href={oldUIUrl} target="_blank" rel="noopener noreferrer">
+            Old UI Version <ArrowIcon />
+          </a>{' '}
+          is temporarily available, but it will soon be decommissioned.
+        </>
+      }
+      isInline
+    />
+  );
+};