From e2d4f889f91bb621758098fe81f9fd36cb02daa0 Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Wed, 14 Aug 2024 13:02:36 +0200
Subject: [PATCH 01/11] Add missing scalprum core to shared scope.

---
 config/webpack.plugins.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/webpack.plugins.js b/config/webpack.plugins.js
index 742efdb7d..b28d07268 100644
--- a/config/webpack.plugins.js
+++ b/config/webpack.plugins.js
@@ -47,6 +47,7 @@ const plugins = (dev = false, beta = false, restricted = false) => {
         { '@openshift/dynamic-plugin-sdk': { singleton: true, requiredVersion: deps['@openshift/dynamic-plugin-sdk'] } },
         { '@patternfly/quickstarts': { singleton: true, requiredVersion: deps['@patternfly/quickstarts'] } },
         { '@redhat-cloud-services/chrome': { singleton: true, requiredVersion: deps['@redhat-cloud-services/chrome'] } },
+        { '@scalprum/core': { singleton: true, requiredVersion: deps['@scalprum/core'] } },
         { '@scalprum/react-core': { singleton: true, requiredVersion: deps['@scalprum/react-core'] } },
         { '@unleash/proxy-client-react': { singleton: true, requiredVersion: deps['@unleash/proxy-client-react'] } },
         getDynamicModules(process.cwd()),

From d6da3d227b3cf964e54b2c3b71f5f990fcdefdea Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Thu, 15 Aug 2024 09:52:53 +0200
Subject: [PATCH 02/11] Add option to disable PF4 styling.

---
 docs/disablingPf4.md         | 11 +++++++++++
 src/index.ejs                |  2 +-
 src/index.ts                 |  6 ++++++
 src/utils/debugFunctions.ts  |  3 +++
 src/utils/removePf4Styles.ts |  8 ++++++++
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 docs/disablingPf4.md
 create mode 100644 src/utils/removePf4Styles.ts

diff --git a/docs/disablingPf4.md b/docs/disablingPf4.md
new file mode 100644
index 000000000..66b7b0892
--- /dev/null
+++ b/docs/disablingPf4.md
@@ -0,0 +1,11 @@
+# Disabling PF4 styling
+
+> Note: This flag is mean to be used for debugging purposes to help visually identify usage of outdated PF version
+
+## To remove PF4 styling support follow these steps
+
+1. Open your browser developer tool and access the "console" tab
+2. Run this command: `window.insights.chrome.enable.disabledPf4()`
+3. Refresh the browser page
+
+> Note: The flag uses localStorage for storage. The browser will remember the flag until the local storage is cleared. To remove the flag run `localStorage.clear()` command in you console and refresh the page.
diff --git a/src/index.ejs b/src/index.ejs
index 3c965890d..c5ad192f0 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -12,7 +12,7 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" type="image/png" href="https://access.redhat.com/webassets/avalon/g/favicon.ico">
-    <link rel="stylesheet" type="text/css" href="<%= pf4styles %>">
+    <link id="pf4-styles" rel="stylesheet" type="text/css" href="<%= pf4styles %>">
     <link rel="stylesheet" type="text/css" href="<%= pf5styles %>">
     <script type="text/javascript">
         window.insights = {
diff --git a/src/index.ts b/src/index.ts
index aa739d472..7d23bc48e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,11 @@
 import './sass/chrome.scss';
 import { chunkLoadErrorRefreshKey } from './utils/common';
+import { CHROME_PF4_DEBUG } from './utils/debugFunctions';
+import removePf4Styles from './utils/removePf4Styles';
+
+if (localStorage.getItem(CHROME_PF4_DEBUG)) {
+  removePf4Styles();
+}
 
 Object.keys(localStorage).map((key) => {
   if (key.includes(chunkLoadErrorRefreshKey)) {
diff --git a/src/utils/debugFunctions.ts b/src/utils/debugFunctions.ts
index cd9b8c890..1897088e8 100644
--- a/src/utils/debugFunctions.ts
+++ b/src/utils/debugFunctions.ts
@@ -3,6 +3,8 @@ const functionBuilder = (key: string, value: boolean | number | string) => {
   return () => window.localStorage && window.localStorage.removeItem(key);
 };
 
+export const CHROME_PF4_DEBUG = 'chrome:pf4:disabled';
+
 const debugFunctions = {
   iqe: () => functionBuilder('iqe:chrome:init', true),
   remediationsDebug: () => functionBuilder('remediations:debug', true),
@@ -23,6 +25,7 @@ const debugFunctions = {
   segmentDev: () => functionBuilder('chrome:analytics:dev', true),
   intlDebug: () => functionBuilder('chrome:intl:debug', true),
   sentryDebug: () => functionBuilder('chrome:sentry:debug', true),
+  disabledPf4: () => functionBuilder(CHROME_PF4_DEBUG, true),
 };
 
 export default debugFunctions;
diff --git a/src/utils/removePf4Styles.ts b/src/utils/removePf4Styles.ts
new file mode 100644
index 000000000..db1fc4a15
--- /dev/null
+++ b/src/utils/removePf4Styles.ts
@@ -0,0 +1,8 @@
+function removePf4Styles() {
+  const pf4Styles = document.getElementById('pf4-styles');
+  if (pf4Styles) {
+    pf4Styles.remove();
+  }
+}
+
+export default removePf4Styles;

From 45e2e253c6d7e8798c6fcc9ac44ad9ebce47c24d Mon Sep 17 00:00:00 2001
From: ewinchel <ewinchel@redhat.com>
Date: Thu, 15 Aug 2024 14:24:44 -0400
Subject: [PATCH 03/11] Update Ansible title in Services dropdown

---
 src/components/AllServicesDropdown/PlatformServicesLinks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AllServicesDropdown/PlatformServicesLinks.tsx b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx
index 53d6c6a1c..d8d96b7a8 100644
--- a/src/components/AllServicesDropdown/PlatformServicesLinks.tsx
+++ b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx
@@ -5,7 +5,7 @@ const PlatformServiceslinks = () => {
   return (
     <>
       <ChromeLink href="/ansible" className="pf-v5-u-pl-lg pf-v5-u-pb-sm" data-ouia-component-id="AllServices-Dropdown-Ansible">
-        Red Hat Ansible Platform
+        Red Hat Ansible Automation Platform
       </ChromeLink>
       <ChromeLink href="/insights" className="pf-v5-u-pl-lg pf-v5-u-pb-sm" data-ouia-component-id="AllServices-Dropdown-RHEL">
         Red Hat Enterprise Linux

From 42b9212cf2287d4ef9f7a0e0530d6bfe06e8f9bb Mon Sep 17 00:00:00 2001
From: Darth Tweed <btweed@redhat.com>
Date: Tue, 20 Aug 2024 14:21:08 -0500
Subject: [PATCH 04/11] Add an ouia ID for iqe-core to consume

---
 src/components/Header/Tools.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
index f5c4d4f9d..7728215bd 100644
--- a/src/components/Header/Tools.tsx
+++ b/src/components/Header/Tools.tsx
@@ -266,6 +266,7 @@ const Tools = () => {
         onChange={() => setIsPreview()}
         isReversed
         className="chr-c-beta-switcher"
+        ouiaId="PreviewSwitcher"
       />
     );
   };

From 92fe5558d0500e92d73242a9c0dad767f0f2cf2e Mon Sep 17 00:00:00 2001
From: Darth Tweed <btweed@redhat.com>
Date: Tue, 20 Aug 2024 14:39:35 -0500
Subject: [PATCH 05/11] Update snapshot

---
 .../Header/HeaderTests/__snapshots__/Tools.test.js.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap b/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap
index a4e0a9461..8f6241161 100644
--- a/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap
+++ b/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap
@@ -6,7 +6,7 @@ exports[`Tools should render correctly 1`] = `
 >
   <label
     class="pf-v5-c-switch pf-m-reverse chr-c-beta-switcher"
-    data-ouia-component-id="OUIA-Generated-Switch-2"
+    data-ouia-component-id="PreviewSwitcher"
     data-ouia-component-type="PF5/Switch"
     data-ouia-safe="true"
     for="reversed-switch"

From ba14e42a41943cc4f0ab92d99b759c4bf9ac563f Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Mon, 26 Aug 2024 11:54:00 +0200
Subject: [PATCH 06/11] Allow permission methods on UI module routes.

---
 .../component/ChromeRoutes/ChromeRoute.cy.tsx | 131 ++++++++++++++++++
 src/@types/types.d.ts                         |   1 +
 src/auth/OIDCConnector/OIDCProvider.tsx       |   5 +-
 src/components/ChromeRoute/ChromeRoute.tsx    |  39 +++++-
 src/utils/common.ts                           |   1 +
 5 files changed, 174 insertions(+), 3 deletions(-)
 create mode 100644 cypress/component/ChromeRoutes/ChromeRoute.cy.tsx

diff --git a/cypress/component/ChromeRoutes/ChromeRoute.cy.tsx b/cypress/component/ChromeRoutes/ChromeRoute.cy.tsx
new file mode 100644
index 000000000..7fe07d165
--- /dev/null
+++ b/cypress/component/ChromeRoutes/ChromeRoute.cy.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import ChromeRoute from '../../../src/components/ChromeRoute';
+import { initializeVisibilityFunctions } from '../../../src/utils/VisibilitySingleton';
+import { ChromeUser } from '@redhat-cloud-services/types';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { IntlProvider } from 'react-intl';
+import ScalprumProvider from '@scalprum/react-core';
+import { initialize, removeScalprum } from '@scalprum/core';
+
+const defaultUser: ChromeUser = {
+  entitlements: {},
+  identity: {
+    user: {
+      is_org_admin: true,
+      is_active: true,
+      is_internal: true,
+      email: 'foo@redhat.com',
+      first_name: 'Joe',
+      last_name: 'Doe',
+      locale: 'en',
+      username: 'jdoe',
+    },
+    org_id: '1',
+    type: 'User',
+    account_number: '2',
+    internal: {
+      org_id: '1',
+      account_id: '3',
+    },
+  },
+};
+
+const defaultVisibilityOptions: Parameters<typeof initializeVisibilityFunctions>[0] = {
+  getToken: () => Promise.resolve('token'),
+  getUser: () => Promise.resolve(defaultUser),
+  getUserPermissions: () => Promise.resolve([]),
+  isPreview: false,
+};
+
+const Wrapper = ({ children, getUser }: React.PropsWithChildren<{ getUser?: () => Promise<ChromeUser> }>) => {
+  const [isReady, setIsReady] = useState(false);
+  const visibilityOptions: Parameters<typeof initializeVisibilityFunctions>[0] = {
+    getToken: defaultVisibilityOptions.getToken,
+    getUser: getUser ?? defaultVisibilityOptions.getUser,
+    getUserPermissions: defaultVisibilityOptions.getUserPermissions,
+    isPreview: defaultVisibilityOptions.isPreview,
+  };
+  const scalprum = useRef(
+    initialize({
+      appsConfig: {
+        foo: {
+          name: 'foo',
+          manifestLocation: '/bar/manifest.json',
+        },
+      },
+    })
+  );
+  useEffect(() => {
+    initializeVisibilityFunctions(visibilityOptions);
+    // mock the module
+    scalprum.current.exposedModules['foo#foo'] = {
+      default: () => <div id="foobar">FooBar</div>,
+    };
+
+    setIsReady(true);
+    return () => {
+      removeScalprum();
+    };
+  }, []);
+
+  if (!isReady) {
+    return null;
+  }
+
+  return (
+    <IntlProvider locale="en">
+      <ScalprumProvider scalprum={scalprum.current}>
+        <Provider store={createStore((state) => state)}>
+          <BrowserRouter>
+            <Routes>
+              <Route path="*" element={children} />
+            </Routes>
+          </BrowserRouter>
+        </Provider>
+      </ScalprumProvider>
+    </IntlProvider>
+  );
+};
+
+describe('ChromeRoute', () => {
+  it('should render not found route if permissions are not met', () => {
+    cy.mount(
+      <Wrapper>
+        <ChromeRoute module="foo" scope="foo" path="*" permissions={[{ method: 'withEmail', args: ['@nonsense.com'] }] as any} />
+      </Wrapper>
+    );
+
+    cy.contains('We lost that page').should('be.visible');
+  });
+
+  it('should not render page if there is error while checking permissions', () => {
+    cy.mount(
+      <Wrapper getUser={() => Promise.reject('expected error')}>
+        <ChromeRoute module="foo" scope="foo" path="*" permissions={[{ method: 'withEmail', args: ['@redhat.com'] }] as any} />
+      </Wrapper>
+    );
+
+    cy.contains('We lost that page').should('be.visible');
+  });
+
+  it('should render page if permissions are met', () => {
+    cy.mount(
+      <Wrapper>
+        <ChromeRoute module="foo" scope="foo" path="*" permissions={[{ method: 'withEmail', args: ['@redhat.com'] }] as any} />
+      </Wrapper>
+    );
+
+    cy.contains('FooBar').should('be.visible');
+  });
+
+  it('should render route if no permissions are provided', () => {
+    cy.mount(
+      <Wrapper>
+        <ChromeRoute module="foo" scope="foo" path="*" />
+      </Wrapper>
+    );
+    cy.contains('FooBar').should('be.visible');
+  });
+});
diff --git a/src/@types/types.d.ts b/src/@types/types.d.ts
index 86369e1af..795d6ca4f 100644
--- a/src/@types/types.d.ts
+++ b/src/@types/types.d.ts
@@ -150,6 +150,7 @@ export type ModuleRoute = {
   dynamic?: boolean;
   props?: Record<string, unknown>;
   supportCaseData?: SupportCaseConfig;
+  permissions?: NavItemPermission[];
 };
 
 export type RemoteModule = {
diff --git a/src/auth/OIDCConnector/OIDCProvider.tsx b/src/auth/OIDCConnector/OIDCProvider.tsx
index b53800b3e..325208c93 100644
--- a/src/auth/OIDCConnector/OIDCProvider.tsx
+++ b/src/auth/OIDCConnector/OIDCProvider.tsx
@@ -17,7 +17,10 @@ const OIDCProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
     | undefined
   >(undefined);
   async function setupSSO() {
-    const { data } = await loadFedModules();
+    const {
+      // ignore $schema from the data as it is an spec ref
+      data: { $schema: ignore, ...data },
+    } = await loadFedModules();
     try {
       const {
         chrome: {
diff --git a/src/components/ChromeRoute/ChromeRoute.tsx b/src/components/ChromeRoute/ChromeRoute.tsx
index f8e7cf7b4..b0c416f71 100644
--- a/src/components/ChromeRoute/ChromeRoute.tsx
+++ b/src/components/ChromeRoute/ChromeRoute.tsx
@@ -1,5 +1,5 @@
 import { ScalprumComponent } from '@scalprum/react-core';
-import React, { memo, useContext, useEffect } from 'react';
+import React, { memo, useContext, useEffect, useState } from 'react';
 import LoadingFallback from '../../utils/loading-fallback';
 import { batch, useDispatch } from 'react-redux';
 import { toggleGlobalFilter } from '../../redux/actions';
@@ -15,6 +15,9 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
 import { gatewayErrorAtom } from '../../state/atoms/gatewayErrorAtom';
 import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { NavItemPermission } from '../../@types/types';
+import { evaluateVisibility } from '../../utils/isNavItemVisible';
+import NotFoundRoute from '../NotFoundRoute';
 
 export type ChromeRouteProps = {
   scope: string;
@@ -23,19 +26,39 @@ export type ChromeRouteProps = {
   exact?: boolean;
   scopeClass?: string;
   props?: any;
+  permissions?: NavItemPermission[];
 };
 
 // eslint-disable-next-line react/display-name
 const ChromeRoute = memo(
-  ({ scope, module, scopeClass, path, props }: ChromeRouteProps) => {
+  ({ scope, module, scopeClass, path, props, permissions }: ChromeRouteProps) => {
     const isPreview = useAtomValue(isPreviewAtom);
     const dispatch = useDispatch();
     const { setActiveHelpTopicByName } = useContext(HelpTopicContext);
     const { user } = useContext(ChromeAuthContext);
     const gatewayError = useAtomValue(gatewayErrorAtom);
+    const [isHidden, setIsHidden] = useState<boolean | null>(null);
 
     const setActiveModule = useSetAtom(activeModuleAtom);
 
+    async function checkPermissions(permissions: NavItemPermission[]) {
+      try {
+        const withResult = await Promise.all(permissions.map((permission) => evaluateVisibility({ permissions: permission })));
+        setIsHidden(withResult.some((result) => result.isHidden));
+      } catch (error) {
+        console.error('Error while checking route permissions', error);
+        // if there is an error, hide the route
+        // better missing page than runtime error that brings down entire chrome
+        setIsHidden(true);
+      }
+    }
+
+    useEffect(() => {
+      if (Array.isArray(permissions)) {
+        checkPermissions(permissions);
+      }
+    }, [permissions]);
+
     useEffect(() => {
       batch(() => {
         // Only trigger update on a first application render before any active module has been selected
@@ -60,6 +83,8 @@ const ChromeRoute = memo(
        */
       setActiveHelpTopicByName && setActiveHelpTopicByName('');
 
+      // reset visibility function
+      setIsHidden(null);
       return () => {
         /**
          * Reset global filter when switching application
@@ -71,6 +96,16 @@ const ChromeRoute = memo(
     if (gatewayError) {
       return <GatewayErrorComponent error={gatewayError} />;
     }
+
+    if (isHidden === null && Array.isArray(permissions)) {
+      return LoadingFallback;
+    }
+
+    if (isHidden) {
+      // do not spill the beans about hidden routes
+      return <NotFoundRoute />;
+    }
+
     return (
       <div className={classNames(scopeClass, scope)}>
         <ScalprumComponent
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 3b067cb94..f4fd87ad8 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -387,6 +387,7 @@ export const generateRoutesList = (modules: { [key: string]: ChromeModule }) =>
               dynamic: typeof dynamic === 'boolean' ? dynamic : typeof route === 'string' ? true : route.dynamic,
               exact: typeof route === 'string' ? false : route.exact,
               props: typeof route === 'object' ? route.props : undefined,
+              permissions: typeof route === 'object' ? route.permissions : undefined,
             }))
           )
           .flat(),

From 2a9a097be8aa3dd8047d7832abb5e01591831e7f Mon Sep 17 00:00:00 2001
From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com>
Date: Tue, 27 Aug 2024 20:13:56 +0000
Subject: [PATCH 07/11] Update webpack to version 5.94.0

---
 package-lock.json | 37 ++++++++-----------------------------
 package.json      |  2 +-
 2 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 828730244..6db288a70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -134,7 +134,7 @@
         "url": "^0.11.3",
         "utility-types": "^3.11.0",
         "wait-on": "^7.2.0",
-        "webpack": "^5.92.1",
+        "webpack": "^5.94.0",
         "webpack-bundle-analyzer": "^4.10.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.2",
@@ -8878,26 +8878,6 @@
         "@types/ms": "*"
       }
     },
-    "node_modules/@types/eslint": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-FlsN0p4FhuYRjIxpbdXovvHQhtlG05O1GG/RNWvdAxTboR438IOTwmrY/vLA+Xfgg06BTkP045M3vpFwTMv1dg==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
@@ -14282,9 +14262,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
-      "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -29356,12 +29336,11 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.92.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz",
-      "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==",
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
@@ -29370,7 +29349,7 @@
         "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
diff --git a/package.json b/package.json
index 0fb5603e3..0bc384d95 100644
--- a/package.json
+++ b/package.json
@@ -119,7 +119,7 @@
     "url": "^0.11.3",
     "utility-types": "^3.11.0",
     "wait-on": "^7.2.0",
-    "webpack": "^5.92.1",
+    "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.2",

From 6d26570e07f35332a0aa997407fd5147c84d52db Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Tue, 13 Aug 2024 16:49:26 +0200
Subject: [PATCH 08/11] Add new beta switcher banner.

---
 cypress/component/Preview/BetaSwitcher.cy.tsx | 130 ++++++++++++++++
 src/bootstrap.tsx                             |   3 +
 src/components/BetaSwitcher/BetaInfoModal.tsx |  46 ++++++
 src/components/BetaSwitcher/BetaSwitcher.scss |   7 +
 src/components/BetaSwitcher/BetaSwitcher.tsx  | 139 ++++++++++++++++++
 .../BetaSwitcher/BetaSwitcherDropdown.tsx     |  62 ++++++++
 src/components/BetaSwitcher/index.ts          |   1 +
 src/components/Header/Header.scss             |   8 -
 .../__snapshots__/Tools.test.js.snap          |  59 ++++----
 src/components/Header/PreviewAlert.tsx        |  48 ------
 src/components/Header/SettingsToggle.tsx      |  20 ++-
 src/components/Header/Tools.tsx               |  97 +++---------
 src/components/RootApp/ScalprumRoot.test.js   |  32 ++--
 src/components/RootApp/ScalprumRoot.tsx       |   2 +
 src/state/atoms/releaseAtom.ts                |  36 +++++
 src/state/atoms/userConfigAtom.ts             |   9 ++
 src/utils/initUserConfig.ts                   |   1 +
 17 files changed, 514 insertions(+), 186 deletions(-)
 create mode 100644 cypress/component/Preview/BetaSwitcher.cy.tsx
 create mode 100644 src/components/BetaSwitcher/BetaInfoModal.tsx
 create mode 100644 src/components/BetaSwitcher/BetaSwitcher.scss
 create mode 100644 src/components/BetaSwitcher/BetaSwitcher.tsx
 create mode 100644 src/components/BetaSwitcher/BetaSwitcherDropdown.tsx
 create mode 100644 src/components/BetaSwitcher/index.ts
 delete mode 100644 src/components/Header/PreviewAlert.tsx
 create mode 100644 src/state/atoms/userConfigAtom.ts

diff --git a/cypress/component/Preview/BetaSwitcher.cy.tsx b/cypress/component/Preview/BetaSwitcher.cy.tsx
new file mode 100644
index 000000000..4c16894a4
--- /dev/null
+++ b/cypress/component/Preview/BetaSwitcher.cy.tsx
@@ -0,0 +1,130 @@
+import React, { PropsWithChildren } from 'react';
+import { Provider, createStore, useSetAtom } from 'jotai';
+import { useHydrateAtoms } from 'jotai/utils';
+import BetaSwitcher from '../../../src/components/BetaSwitcher';
+import { userConfigAtom } from '../../../src/state/atoms/userConfigAtom';
+import { ChromeUserConfig } from '../../../src/utils/initUserConfig';
+import { isPreviewAtom } from '../../../src/state/atoms/releaseAtom';
+
+const HydrateAtoms = ({ initialValues, children }: PropsWithChildren<{ initialValues: any }>) => {
+  useHydrateAtoms(initialValues);
+  return children;
+};
+
+const TestProvider = ({ initialValues, children }: PropsWithChildren<{ initialValues: any }>) => (
+  <Provider>
+    <HydrateAtoms initialValues={initialValues}>{children}</HydrateAtoms>
+  </Provider>
+);
+
+const Wrapper = () => {
+  return <BetaSwitcher />;
+};
+
+describe('BetaSwitcher', () => {
+  it('should show preview modal on first user preview toggle', () => {
+    const userConfig: ChromeUserConfig = {
+      data: {
+        uiPreview: false,
+        uiPreviewSeen: false,
+      },
+    } as ChromeUserConfig;
+    cy.intercept('POST', 'api/chrome-service/v1/user/mark-preview-seen', {
+      data: {
+        uiPreview: true,
+        uiPreviewSeen: true,
+      },
+    });
+    cy.mount(
+      <TestProvider
+        initialValues={[
+          [userConfigAtom, userConfig],
+          [isPreviewAtom, false],
+        ]}
+      >
+        <Wrapper />
+      </TestProvider>
+    );
+
+    cy.contains('turn on Preview mode').should('exist');
+
+    cy.get('#preview-toggle').click();
+    cy.contains('Turn on').should('exist');
+    cy.contains('Turn on').click();
+    cy.contains('Welcome to preview').should('exist');
+    cy.wait(5000);
+    // popover disappears after 5 seconds on its own
+    cy.contains('Welcome to preview').should('not.exist');
+    cy.contains('turn off Preview mode').should('exist');
+
+    // turn off preview again
+    cy.get('#preview-toggle').click();
+    cy.contains('turn on Preview mode').should('exist');
+  });
+
+  it('should not show preview modal on subsequent user preview toggles', () => {
+    const userConfig: ChromeUserConfig = {
+      data: {
+        uiPreview: false,
+        uiPreviewSeen: true,
+      },
+    } as ChromeUserConfig;
+    cy.mount(
+      <TestProvider
+        initialValues={[
+          [userConfigAtom, userConfig],
+          [isPreviewAtom, false],
+        ]}
+      >
+        <Wrapper />
+      </TestProvider>
+    );
+
+    cy.contains('turn on Preview mode').should('exist');
+    cy.contains('Turn on').should('not.exist');
+
+    cy.get('#preview-toggle').click();
+    cy.contains('turn off Preview mode').should('exist');
+
+    // turn off preview again
+    cy.get('#preview-toggle').click();
+    cy.contains('turn on Preview mode').should('exist');
+  });
+
+  it('should hide the entire banner in stable environment, but show in preview', () => {
+    const FakePreviewToggle = () => {
+      const togglePreview = useSetAtom(isPreviewAtom);
+      return <button onClick={() => togglePreview()}>Fake</button>;
+    };
+    const userConfig: ChromeUserConfig = {
+      data: {
+        uiPreview: false,
+        uiPreviewSeen: true,
+      },
+    } as ChromeUserConfig;
+    const store = createStore();
+    store.set(isPreviewAtom, false);
+    cy.mount(
+      <TestProvider
+        initialValues={[
+          [userConfigAtom, userConfig],
+          [isPreviewAtom, false],
+        ]}
+      >
+        <Wrapper />
+        <FakePreviewToggle />
+      </TestProvider>
+    );
+
+    // if the node is turned off immediately it sometimes doesn't render the banner and the test fails
+    cy.wait(1000);
+    cy.get('.pf-v5-c-menu-toggle').click();
+    cy.get('.pf-v5-c-menu__item-text').should('exist');
+    cy.get('.pf-v5-c-menu__item-text').click();
+    cy.get('.pf-v5-c-menu-toggle').should('not.exist');
+
+    // turn preview and banner should show
+    cy.contains('Fake').click();
+    cy.contains('Welcome to preview').should('exist');
+  });
+});
diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
index 0c201d627..93eced07a 100644
--- a/src/bootstrap.tsx
+++ b/src/bootstrap.tsx
@@ -18,6 +18,7 @@ import AppPlaceholder from './components/AppPlaceholder';
 import { ChromeUserConfig, initChromeUserConfig } from './utils/initUserConfig';
 import ChromeAuthContext from './auth/ChromeAuthContext';
 import useSuspenseLoader from '@redhat-cloud-services/frontend-components-utilities/useSuspenseLoader/useSuspenseLoader';
+import { userConfigAtom } from './state/atoms/userConfigAtom';
 
 const isITLessEnv = ITLess();
 const language: keyof typeof messages = 'en';
@@ -55,8 +56,10 @@ const App = ({ initApp }: { initApp: (...args: Parameters<typeof initChromeUserC
 
 const ConfigLoader = () => {
   const initPreview = useSetAtom(isPreviewAtom);
+  const setUserConfig = useSetAtom(userConfigAtom);
   function initSuccess(userConfig: ChromeUserConfig) {
     initPreview(userConfig.data.uiPreview);
+    setUserConfig(userConfig);
   }
   function initFail() {
     initPreview(false);
diff --git a/src/components/BetaSwitcher/BetaInfoModal.tsx b/src/components/BetaSwitcher/BetaInfoModal.tsx
new file mode 100644
index 000000000..dba2fe422
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaInfoModal.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Modal, ModalVariant } from '@patternfly/react-core/dist/dynamic/components/Modal';
+import WrenchIcon from '@patternfly/react-icons/dist/dynamic/icons/wrench-icon';
+import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
+import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+
+const BetaInfoModal = ({ onAccept, isOpen, toggleOpen }: { toggleOpen: (isOpen: boolean) => void; isOpen: boolean; onAccept: () => void }) => {
+  const Header = () => (
+    <Title headingLevel="h1" size="2xl">
+      Preview{' '}
+      <Label>
+        <WrenchIcon />
+      </Label>
+    </Title>
+  );
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => toggleOpen(false)}
+      variant={ModalVariant.small}
+      header={<Header />}
+      actions={[
+        <Button key="enable-preview" variant="primary" type="button" onClick={onAccept}>
+          Turn on
+        </Button>,
+        <Button key="cancel" variant="link" type="button" onClick={() => toggleOpen(false)}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <TextContent>
+        <Text>
+          You can enable Preview mode to try out upcoming features that are in technology preview.{' '}
+          <a href="https://access.redhat.com/support/policy/updates/hybridcloud-console/lifecycle" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+          .
+        </Text>
+      </TextContent>
+    </Modal>
+  );
+};
+
+export default BetaInfoModal;
diff --git a/src/components/BetaSwitcher/BetaSwitcher.scss b/src/components/BetaSwitcher/BetaSwitcher.scss
new file mode 100644
index 000000000..5f77b34d9
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaSwitcher.scss
@@ -0,0 +1,7 @@
+.chr-c-beta-switcher {
+    background-color: var(--pf-v5-global--BackgroundColor--dark-400);
+    transition: background-color 0.3s;
+    &.active {
+        background-color: var(--pf-v5-global--palette--blue-200);
+    }
+}
diff --git a/src/components/BetaSwitcher/BetaSwitcher.tsx b/src/components/BetaSwitcher/BetaSwitcher.tsx
new file mode 100644
index 000000000..774acfa1f
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaSwitcher.tsx
@@ -0,0 +1,139 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import classNames from 'classnames';
+import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
+import { Switch } from '@patternfly/react-core/dist/dynamic/components/Switch';
+import { Text, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
+import WrenchIcon from '@patternfly/react-icons/dist/dynamic/icons/wrench-icon';
+import { Popover } from '@patternfly/react-core/dist/dynamic/components/Popover';
+import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
+import { Split, SplitItem } from '@patternfly/react-core/dist/dynamic/layouts/Split';
+import {
+  hidePreviewBannerAtom,
+  isPreviewAtom,
+  previewModalOpenAtom,
+  setPreviewSeenAtom,
+  togglePreviewWithCheckAtom,
+} from '../../state/atoms/releaseAtom';
+import BetaInfoModal from './BetaInfoModal';
+import { userConfigAtom } from '../../state/atoms/userConfigAtom';
+import BetaSwitcherDropdown from './BetaSwitcherDropdown';
+
+import './BetaSwitcher.scss';
+
+const BetaPopover = ({ children, isFirstTime }: PropsWithChildren<{ isFirstTime: boolean }>) => {
+  const [isVisible, setIsVisible] = React.useState(isFirstTime);
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isFirstTime) {
+      setIsVisible(true);
+      timeout = setTimeout(() => {
+        setIsVisible(false);
+      }, 5000);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        setIsVisible(false);
+      }
+    };
+  }, [isFirstTime]);
+  return (
+    <Popover
+      isVisible={isVisible}
+      position="bottom-end"
+      shouldClose={() => setIsVisible(false)}
+      headerContent="Welcome to preview"
+      bodyContent={
+        <span>
+          Look for items with this icon&nbsp;
+          <Label color="purple">
+            <WrenchIcon />
+          </Label>
+          &nbsp;to quickly identify preview features.
+        </span>
+      }
+    >
+      <>{children}</>
+    </Popover>
+  );
+};
+
+const BetaSwitcher = () => {
+  const bannerRef = useRef<HTMLDivElement>(null);
+  const [hideBanner, setHideBanner] = useAtom(hidePreviewBannerAtom);
+  const [isPreview, setIsPreview] = useAtom(isPreviewAtom);
+  const togglePreviewWithCheck = useSetAtom(togglePreviewWithCheckAtom);
+  const setUserPreviewSeen = useSetAtom(setPreviewSeenAtom);
+  const [isBetaModalOpen, setIsBetaModalOpen] = useAtom(previewModalOpenAtom);
+  const {
+    data: { uiPreviewSeen },
+  } = useAtomValue(userConfigAtom);
+  useEffect(() => {
+    const chromeRenderElement = document.getElementById('chrome-app-render-root');
+    // adjust the height of the chrome render element to fit the banner and not show extra scrollbar
+    if (!hideBanner && bannerRef.current && chromeRenderElement) {
+      const { height } = bannerRef.current.getBoundingClientRect();
+      chromeRenderElement.style.height = `calc(100vh - ${height}px)`;
+    } else if (hideBanner && chromeRenderElement) {
+      chromeRenderElement.style.removeProperty('height');
+    }
+    if (isPreview) {
+      // preview should always reset the banner visibility
+      setHideBanner(false);
+    }
+  }, [isPreview, hideBanner]);
+
+  const handleBetaAccept = () => {
+    setIsBetaModalOpen(false);
+    setIsPreview(true);
+    setUserPreviewSeen();
+  };
+
+  if (hideBanner) {
+    return null;
+  }
+
+  return (
+    <div ref={bannerRef}>
+      <Split
+        className={classNames('chr-c-beta-switcher pf-v5-u-p-xs', {
+          active: isPreview,
+        })}
+      >
+        <SplitItem isFilled>
+          <Bullseye>
+            <BetaPopover isFirstTime={isPreview}>
+              <Switch
+                ouiaId="PreviewSwitcher"
+                id="preview-toggle"
+                label={
+                  <Text className="pf-v5-u-color-100" component={TextVariants.small}>
+                    You&apos;re in Hybrid Cloud Console Preview mode. To return to production, turn off Preview mode
+                  </Text>
+                }
+                labelOff={
+                  <Text className="pf-v5-u-color-light-100" component={TextVariants.small}>
+                    You&apos;re in Hybrid Cloud Console production. To see new pre-production features, turn on Preview mode
+                  </Text>
+                }
+                aria-label="preview-toggle"
+                isChecked={isPreview}
+                onChange={(_e, checked) => togglePreviewWithCheck(checked)}
+                isReversed
+              />
+            </BetaPopover>
+          </Bullseye>
+        </SplitItem>
+        {!isPreview ? (
+          <SplitItem>
+            <BetaSwitcherDropdown />
+          </SplitItem>
+        ) : null}
+      </Split>
+      {!uiPreviewSeen ? <BetaInfoModal isOpen={isBetaModalOpen} toggleOpen={setIsBetaModalOpen} onAccept={handleBetaAccept} /> : null}
+    </div>
+  );
+};
+
+export default BetaSwitcher;
diff --git a/src/components/BetaSwitcher/BetaSwitcherDropdown.tsx b/src/components/BetaSwitcher/BetaSwitcherDropdown.tsx
new file mode 100644
index 000000000..1dbddb291
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaSwitcherDropdown.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
+import { EllipsisVIcon } from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { CogIcon } from '@patternfly/react-icons/dist/dynamic/icons/cog-icon';
+import { useSetAtom } from 'jotai';
+import { hidePreviewBannerAtom } from '../../state/atoms/releaseAtom';
+
+const BetaSwitcherDropdown = () => {
+  const hidePreview = useSetAtom(hidePreviewBannerAtom);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const description = (
+    <Text component="small">
+      You can enable &quot;Preview&quot; from the Settings menu <CogIcon /> at any time.
+    </Text>
+  );
+
+  return (
+    <Dropdown
+      className="chr-c-beta-switcher-dropdown"
+      popperProps={{
+        position: 'end',
+      }}
+      isOpen={isOpen}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          className="pf-v5-u-color-light-100 pf-v5-u-pt-0 pf-v5-u-pb-0"
+          ref={toggleRef}
+          aria-label="hide preview banner"
+          variant="plain"
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+    >
+      <DropdownList>
+        <DropdownItem
+          onClick={() => {
+            hidePreview(true);
+            setIsOpen(false);
+          }}
+          description={description}
+          key="hide-preview-banner"
+        >
+          Hide &quot;Preview&quot; banner
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};
+
+export default BetaSwitcherDropdown;
diff --git a/src/components/BetaSwitcher/index.ts b/src/components/BetaSwitcher/index.ts
new file mode 100644
index 000000000..1497d220b
--- /dev/null
+++ b/src/components/BetaSwitcher/index.ts
@@ -0,0 +1 @@
+export { default } from './BetaSwitcher';
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 36d9eb1dc..29fafcb2a 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -40,14 +40,6 @@
      }
    }
 
-
-  .chr-c-beta-switcher {
-    --pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--sm);
-    .pf-v5-c-switch__label {
-      color: var(--pf-v5-global--palette--black-400) !important;
-      padding-right: 0;
-    }
-  }
   .chr-c-dropdown-item__stack {
     white-space: nowrap;
     * { color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color); }
diff --git a/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap b/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap
index 8f6241161..d40c38317 100644
--- a/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap
+++ b/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap
@@ -2,36 +2,39 @@
 
 exports[`Tools should render correctly 1`] = `
 <div
-  class="pf-v5-c-toolbar__item pf-m-spacer-md pf-v5-u-mr-0"
+  class="pf-v5-c-toolbar__item pf-v5-u-mr-0 pf-v5-u-ml-sm"
 >
-  <label
-    class="pf-v5-c-switch pf-m-reverse chr-c-beta-switcher"
-    data-ouia-component-id="PreviewSwitcher"
-    data-ouia-component-type="PF5/Switch"
-    data-ouia-safe="true"
-    for="reversed-switch"
+  <div
+    style="display: contents;"
   >
-    <input
-      aria-label="Preview switcher"
-      class="pf-v5-c-switch__input"
-      id="reversed-switch"
-      type="checkbox"
-    />
-    <span
-      class="pf-v5-c-switch__toggle"
-    />
-    <span
-      aria-hidden="true"
-      class="pf-v5-c-switch__label pf-m-on"
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-label="Notifications"
+      class="pf-v5-c-button pf-m-plain chr-c-notification-badge"
+      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-type="PF5/Button"
+      data-ouia-safe="true"
+      type="button"
     >
-      Preview on
-    </span>
-    <span
-      aria-hidden="true"
-      class="pf-v5-c-switch__label pf-m-off"
-    >
-      Preview off
-    </span>
-  </label>
+      <span
+        class="pf-v5-c-notification-badge pf-m-read"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 896 1024"
+          width="1em"
+        >
+          <path
+            d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
 </div>
 `;
diff --git a/src/components/Header/PreviewAlert.tsx b/src/components/Header/PreviewAlert.tsx
deleted file mode 100644
index 58caab9b3..000000000
--- a/src/components/Header/PreviewAlert.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useState } from 'react';
-import cookie from 'js-cookie';
-import HeaderAlert from './HeaderAlert';
-import { useAtom } from 'jotai';
-import { isPreviewAtom } from '../../state/atoms/releaseAtom';
-import { AlertActionLink, AlertVariant } from '@patternfly/react-core/dist/dynamic/components/Alert';
-
-const PreviewAlert = () => {
-  const [isPreview, togglePreview] = useAtom(isPreviewAtom);
-  const [prevPreviewValue, setPrevPreviewValue] = useState(isPreview);
-  const shouldRenderAlert = isPreview !== prevPreviewValue;
-
-  function handlePreviewToggle() {
-    togglePreview();
-  }
-
-  return shouldRenderAlert ? (
-    <HeaderAlert
-      className="chr-c-alert-preview"
-      title={`Preview has been ${isPreview ? 'enabled' : 'disabled'}.`}
-      variant={AlertVariant.info}
-      actionLinks={
-        <React.Fragment>
-          <AlertActionLink
-            component="a"
-            href="https://access.redhat.com/support/policy/updates/hybridcloud-console/lifecycle"
-            target="_blank"
-            rel="noreferrer"
-            title="Learn more link"
-          >
-            Learn more
-          </AlertActionLink>
-          <AlertActionLink
-            onClick={() => {
-              handlePreviewToggle();
-            }}
-          >{`${isPreview ? 'Disable' : 'Enable'} preview`}</AlertActionLink>
-        </React.Fragment>
-      }
-      onDismiss={() => {
-        cookie.set('cs_toggledRelease', 'false');
-        setPrevPreviewValue(isPreview);
-      }}
-    />
-  ) : null;
-};
-
-export default PreviewAlert;
diff --git a/src/components/Header/SettingsToggle.tsx b/src/components/Header/SettingsToggle.tsx
index 337559361..2d3f6365c 100644
--- a/src/components/Header/SettingsToggle.tsx
+++ b/src/components/Header/SettingsToggle.tsx
@@ -9,7 +9,7 @@ import ChromeLink from '../ChromeLink/ChromeLink';
 import { isPreviewAtom } from '../../state/atoms/releaseAtom';
 
 export type SettingsToggleDropdownGroup = {
-  title: string;
+  title?: string;
   items: SettingsToggleDropdownItem[];
 };
 
@@ -20,6 +20,7 @@ export type SettingsToggleDropdownItem = {
   isHidden?: boolean;
   isDisabled?: boolean;
   rel?: string;
+  ouiaId?: string;
 };
 
 export type SettingsToggleProps = {
@@ -43,14 +44,19 @@ const SettingsToggle = (props: SettingsToggleProps) => {
       {items.map(({ url, title, onClick, isHidden, isDisabled, rel = 'noopener noreferrer', ...rest }) =>
         !isHidden ? (
           <DropdownItem
+            onClick={onClick}
             key={title}
-            ouiaId={title}
+            ouiaId={rest.ouiaId ?? title}
             isDisabled={isDisabled}
-            component={({ className: itemClassName }) => (
-              <ChromeLink {...rest} className={itemClassName} href={url} rel={rel} isBeta={isPreview}>
-                {title}
-              </ChromeLink>
-            )}
+            component={
+              onClick
+                ? undefined
+                : ({ className: itemClassName }) => (
+                    <ChromeLink {...rest} className={itemClassName} href={url} rel={rel} isBeta={isPreview}>
+                      {title}
+                    </ChromeLink>
+                  )
+            }
           >
             {title}
           </DropdownItem>
diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
index 7728215bd..83a198866 100644
--- a/src/components/Header/Tools.tsx
+++ b/src/components/Header/Tools.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { memo, useContext, useEffect, useState } from 'react';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Divider } from '@patternfly/react-core/dist/dynamic/components/Divider';
 import { DropdownItem } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
@@ -12,7 +12,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/quest
 import CogIcon from '@patternfly/react-icons/dist/dynamic/icons/cog-icon';
 import RedhatIcon from '@patternfly/react-icons/dist/dynamic/icons/redhat-icon';
 import UserToggle from './UserToggle';
-import ToolbarToggle, { ToolbarToggleDropdownItem } from './ToolbarToggle';
+import ToolbarToggle from './ToolbarToggle';
 import SettingsToggle, { SettingsToggleDropdownGroup } from './SettingsToggle';
 import cookie from 'js-cookie';
 import { ITLess, getSection } from '../../utils/common';
@@ -21,11 +21,9 @@ import { useFlag } from '@unleash/proxy-client-react';
 import messages from '../../locales/Messages';
 import { createSupportCase } from '../../utils/createCase';
 import BellIcon from '@patternfly/react-icons/dist/dynamic/icons/bell-icon';
-import useWindowWidth from '../../hooks/useWindowWidth';
 import ChromeAuthContext from '../../auth/ChromeAuthContext';
-import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { isPreviewAtom, togglePreviewWithCheckAtom } from '../../state/atoms/releaseAtom';
 import { notificationDrawerExpandedAtom, unreadNotificationsAtom } from '../../state/atoms/notificationDrawerAtom';
-import PreviewAlert from './PreviewAlert';
 import useSupportCaseData from '../../hooks/useSupportCaseData';
 
 const isITLessEnv = ITLess();
@@ -43,26 +41,6 @@ const InternalButton = () => (
   </Button>
 );
 
-type SettingsButtonProps = {
-  settingsMenuDropdownItems: ToolbarToggleDropdownItem[];
-};
-
-const SettingsButton = ({ settingsMenuDropdownItems }: SettingsButtonProps) => (
-  <Tooltip aria="none" aria-live="polite" content={'Settings'} flipBehavior={['bottom']} className="tooltip-inner-settings-cy">
-    <ToolbarToggle
-      key="Settings menu"
-      icon={() => <CogIcon />}
-      id="SettingsMenu"
-      ariaLabel="Settings menu"
-      ouiaId="chrome-settings"
-      hasToggleIndicator={null}
-      widget-type="SettingsMenu"
-      dropdownItems={settingsMenuDropdownItems}
-      className="tooltip-button-settings-cy"
-    />
-  </Tooltip>
-);
-
 type ExpandedSettingsButtonProps = {
   settingsMenuDropdownGroups: SettingsToggleDropdownGroup[];
 };
@@ -89,10 +67,10 @@ const Tools = () => {
     isRhosakEntitled: false,
     isDemoAcc: false,
   });
-  const [isPreview, setIsPreview] = useAtom(isPreviewAtom);
+  const isPreview = useAtomValue(isPreviewAtom);
+  const togglePreviewWithCheck = useSetAtom(togglePreviewWithCheckAtom);
   const enableIntegrations = useFlag('platform.sources.integrations');
   const enableGlobalLearningResourcesPage = useFlag('platform.learning-resources.global-learning-resources');
-  const { xs } = useWindowWidth();
   const { user, token } = useContext(ChromeAuthContext);
   const unreadNotifications = useAtomValue(unreadNotificationsAtom);
   const [isNotificationDrawerExpanded, toggleNotifications] = useAtom(notificationDrawerExpandedAtom);
@@ -103,8 +81,6 @@ const Tools = () => {
     messages.betaRelease
   )}`;
 
-  const enableAuthDropdownOption = useFlag('platform.chrome.dropdown.authfactor');
-  const enableExpandedSettings = useFlag('platform.chrome.expanded-settings');
   const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
 
   const enableMyUserAccessLanding = useFlag('platform.chrome.my-user-access-landing-page');
@@ -112,6 +88,16 @@ const Tools = () => {
 
   /* list out the items for the settings menu */
   const settingsMenuDropdownGroups = [
+    {
+      items: [
+        {
+          ouiaId: 'PreviewSwitcher',
+          title: `${isPreview ? 'Exit' : 'Enable'} "Preview" mode`,
+          url: '#',
+          onClick: () => togglePreviewWithCheck(),
+        },
+      ],
+    },
     {
       title: 'Settings',
       items: [
@@ -148,24 +134,6 @@ const Tools = () => {
     },
   ];
 
-  // Old settings menu
-  const settingsMenuDropdownItems = [
-    {
-      url: settingsPath,
-      title: 'Settings',
-      appId: 'sources',
-    },
-    ...(enableAuthDropdownOption
-      ? [
-          {
-            url: identityAndAccessManagmentPath,
-            title: 'Identity & Access Management',
-            appId: 'iam',
-          },
-        ]
-      : []),
-  ];
-
   useEffect(() => {
     if (user) {
       setState({
@@ -233,7 +201,7 @@ const Tools = () => {
     },
     {
       title: betaSwitcherTitle,
-      onClick: () => setIsPreview(),
+      onClick: () => togglePreviewWithCheck(),
     },
     { title: 'separator' },
     ...aboutMenuDropdownItems,
@@ -255,22 +223,6 @@ const Tools = () => {
     </Tooltip>
   );
 
-  const BetaSwitcher = () => {
-    return (
-      <Switch
-        id="reversed-switch"
-        label="Preview on"
-        labelOff="Preview off"
-        aria-label="Preview switcher"
-        isChecked={isPreview}
-        onChange={() => setIsPreview()}
-        isReversed
-        className="chr-c-beta-switcher"
-        ouiaId="PreviewSwitcher"
-      />
-    );
-  };
-
   const ThemeToggle = () => {
     const [darkmode, setDarkmode] = useState(false);
     return (
@@ -290,16 +242,6 @@ const Tools = () => {
 
   return (
     <>
-      <ToolbarItem
-        className="pf-v5-u-mr-0"
-        {...(isNotificationsEnabled && {
-          spacer: {
-            default: 'spacerMd',
-          },
-        })}
-      >
-        {!xs && <BetaSwitcher />}
-      </ToolbarItem>
       {isNotificationsEnabled && (
         <ToolbarItem className="pf-v5-u-mr-0 pf-v5-u-ml-sm">
           <Tooltip aria="none" aria-live="polite" content={'Notifications'} flipBehavior={['bottom']} className="tooltip-inner-settings-cy">
@@ -328,11 +270,7 @@ const Tools = () => {
         </ToolbarItem>
       )}
       <ToolbarItem className="pf-v5-u-mr-0" visibility={{ default: 'hidden', md: 'visible' }}>
-        {enableExpandedSettings ? (
-          <ExpandedSettingsButton settingsMenuDropdownGroups={settingsMenuDropdownGroups} />
-        ) : (
-          <SettingsButton settingsMenuDropdownItems={settingsMenuDropdownItems} />
-        )}
+        <ExpandedSettingsButton settingsMenuDropdownGroups={settingsMenuDropdownGroups} />
       </ToolbarItem>
       <ToolbarItem className="pf-v5-u-mr-0" visibility={{ default: 'hidden', md: 'visible' }}>
         <AboutButton />
@@ -372,7 +310,6 @@ const Tools = () => {
           />
         </Tooltip>
       </ToolbarItem>
-      <PreviewAlert />
     </>
   );
 };
diff --git a/src/components/RootApp/ScalprumRoot.test.js b/src/components/RootApp/ScalprumRoot.test.js
index 378cf7151..098bf2754 100644
--- a/src/components/RootApp/ScalprumRoot.test.js
+++ b/src/components/RootApp/ScalprumRoot.test.js
@@ -42,14 +42,6 @@ jest.mock('@unleash/proxy-client-react', () => {
   };
 });
 
-jest.mock('../../state/atoms/releaseAtom', () => {
-  const util = jest.requireActual('../../state/atoms/utils');
-  return {
-    __esModule: true,
-    isPreviewAtom: util.atomWithToggle(false),
-  };
-});
-
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
@@ -63,6 +55,8 @@ import { initializeVisibilityFunctions } from '../../utils/VisibilitySingleton';
 import ChromeAuthContext from '../../auth/ChromeAuthContext';
 import { useHydrateAtoms } from 'jotai/utils';
 import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
+import { hidePreviewBannerAtom, isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { userConfigAtom } from '../../state/atoms/userConfigAtom';
 
 const HydrateAtoms = ({ initialValues, children }) => {
   useHydrateAtoms(initialValues);
@@ -207,13 +201,21 @@ describe('ScalprumRoot', () => {
     let getByLabelText;
     await act(async () => {
       const { getByLabelText: internalGetByLabelText } = await render(
-        <Provider store={store}>
-          <ChromeAuthContext.Provider value={chromeContextMockValue}>
-            <MemoryRouter initialEntries={['/*']}>
-              <ScalprumRoot globalFilterHidden config={config} {...initialProps} />
-            </MemoryRouter>
-          </ChromeAuthContext.Provider>
-        </Provider>
+        <JotaiTestProvider
+          initialValues={[
+            [hidePreviewBannerAtom, false],
+            [isPreviewAtom, false],
+            [userConfigAtom, { data: {} }],
+          ]}
+        >
+          <Provider store={store}>
+            <ChromeAuthContext.Provider value={chromeContextMockValue}>
+              <MemoryRouter initialEntries={['/*']}>
+                <ScalprumRoot globalFilterHidden config={config} {...initialProps} />
+              </MemoryRouter>
+            </ChromeAuthContext.Provider>
+          </Provider>
+        </JotaiTestProvider>
       );
       getByLabelText = internalGetByLabelText;
     });
diff --git a/src/components/RootApp/ScalprumRoot.tsx b/src/components/RootApp/ScalprumRoot.tsx
index e21ee5643..75fd23460 100644
--- a/src/components/RootApp/ScalprumRoot.tsx
+++ b/src/components/RootApp/ScalprumRoot.tsx
@@ -37,6 +37,7 @@ import useTabName from '../../hooks/useTabName';
 import { NotificationData, notificationDrawerDataAtom } from '../../state/atoms/notificationDrawerAtom';
 import { isPreviewAtom } from '../../state/atoms/releaseAtom';
 import { addNavListenerAtom, deleteNavListenerAtom } from '../../state/atoms/activeAppAtom';
+import BetaSwitcher from '../BetaSwitcher';
 
 const ProductSelection = lazy(() => import('../Stratosphere/ProductSelection'));
 
@@ -225,6 +226,7 @@ const ScalprumRoot = memo(
       <InternalChromeContext.Provider value={mutableChromeApi.current}>
         <ScalprumProvider {...scalprumProviderProps}>
           <ChromeProvider>
+            <BetaSwitcher />
             <Routes>
               <Route
                 index
diff --git a/src/state/atoms/releaseAtom.ts b/src/state/atoms/releaseAtom.ts
index b19c87817..1b803c549 100644
--- a/src/state/atoms/releaseAtom.ts
+++ b/src/state/atoms/releaseAtom.ts
@@ -3,7 +3,13 @@ import { updateVisibilityFunctionsBeta, visibilityFunctionsExist } from '../../u
 import { atomWithToggle } from './utils';
 import { getUnleashClient, unleashClientExists } from '../../components/FeatureFlags/unleashClient';
 import { SearchPermissionsCache } from './localSearchAtom';
+import { atom } from 'jotai';
+import { userConfigAtom } from './userConfigAtom';
+import { ChromeUserConfig } from '../../utils/initUserConfig';
 
+export const previewModalOpenAtom = atomWithToggle(false);
+
+const HIDE_PREVIEW_BANNER_KEY = 'chrome:preview:banner:hide';
 export const isPreviewAtom = atomWithToggle(undefined, async (isPreview) => {
   try {
     SearchPermissionsCache.clear();
@@ -25,4 +31,34 @@ export const isPreviewAtom = atomWithToggle(undefined, async (isPreview) => {
   } catch (error) {
     console.error('Failed to update the visibility functions or feature flags context', error);
   }
+
+  // make sure the banner shows after preview is toggled
+  localStorage.removeItem(HIDE_PREVIEW_BANNER_KEY);
+});
+
+export const togglePreviewWithCheckAtom = atom(null, (get, set, update?: boolean) => {
+  const isPreview = get(isPreviewAtom);
+  const userConfig = get(userConfigAtom);
+  if (!isPreview && !userConfig.data?.uiPreviewSeen) {
+    set(previewModalOpenAtom, true);
+  } else {
+    set(isPreviewAtom, update);
+  }
+});
+
+const initialHidePreviewBanner = localStorage.getItem(HIDE_PREVIEW_BANNER_KEY) === 'true';
+export const hidePreviewBannerAtom = atomWithToggle(initialHidePreviewBanner, async (hidePreviewBanner) => {
+  // hide the banner for session until preview is turned off
+  if (hidePreviewBanner) {
+    localStorage.setItem(HIDE_PREVIEW_BANNER_KEY, 'true');
+  }
+});
+
+export const setPreviewSeenAtom = atom(null, async (get, set) => {
+  try {
+    const userConfig = await axios.post<ChromeUserConfig>('/api/chrome-service/v1/user/mark-preview-seen');
+    set(userConfigAtom, userConfig.data);
+  } catch (error) {
+    console.error('Failed to update the preview seen flag', error);
+  }
 });
diff --git a/src/state/atoms/userConfigAtom.ts b/src/state/atoms/userConfigAtom.ts
new file mode 100644
index 000000000..5fda36a1e
--- /dev/null
+++ b/src/state/atoms/userConfigAtom.ts
@@ -0,0 +1,9 @@
+import { atom } from 'jotai';
+import { ChromeUserConfig } from '../../utils/initUserConfig';
+
+export const userConfigAtom = atom<ChromeUserConfig>({
+  data: {
+    uiPreviewSeen: false,
+    uiPreview: false,
+  },
+});
diff --git a/src/utils/initUserConfig.ts b/src/utils/initUserConfig.ts
index ba0e4404d..a1122968c 100644
--- a/src/utils/initUserConfig.ts
+++ b/src/utils/initUserConfig.ts
@@ -6,6 +6,7 @@ import { ChromeUser } from '@redhat-cloud-services/types';
 export type ChromeUserConfig = {
   data: {
     uiPreview: boolean;
+    uiPreviewSeen: boolean;
   };
 };
 

From 41bfa01355ec3f057db1639e4eef32fd3645cb64 Mon Sep 17 00:00:00 2001
From: acosferreia <acosferreira@gmail.com>
Date: Fri, 30 Aug 2024 12:14:24 -0700
Subject: [PATCH 09/11] AAP-29825 add ansible-cloud allowed origin

---
 src/utils/iqeEnablement.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/iqeEnablement.ts b/src/utils/iqeEnablement.ts
index 10a8133a3..0733bc596 100644
--- a/src/utils/iqeEnablement.ts
+++ b/src/utils/iqeEnablement.ts
@@ -19,6 +19,7 @@ const AUTH_ALLOWED_ORIGINS = [
   /https:\/\/api(?:\.[a-z]+)?\.openshift(?:[a-z]+)?\.com/,
   /https:\/\/api?\.demo-experience(?:\.[a-z]+)?\.demo?\.redhat?\.com/,
   /https:\/\/api?\.aws?\.ap-southeast-1(?:\.[a-z]+)?\.openshift?\.com/,
+  /https:\/\/console-service?\.[a-z]*-[a-z]*\.aws?\.ansiblecloud?\.com\/api/,
 ];
 const AUTH_EXCLUDED_URLS = [/https:\/\/api(?:\.[a-z]+)?\.openshift(?:[a-z]+)?\.com\/api\/upgrades_info/];
 

From 79261a5c035bc258a0257023529792626813525e Mon Sep 17 00:00:00 2001
From: acosferreia <acosferreira@gmail.com>
Date: Fri, 30 Aug 2024 12:47:20 -0700
Subject: [PATCH 10/11] AAP-29825 add ansible-cloud allowed origin

---
 src/utils/iqeEnablement.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/iqeEnablement.ts b/src/utils/iqeEnablement.ts
index 0733bc596..0160313f5 100644
--- a/src/utils/iqeEnablement.ts
+++ b/src/utils/iqeEnablement.ts
@@ -20,6 +20,7 @@ const AUTH_ALLOWED_ORIGINS = [
   /https:\/\/api?\.demo-experience(?:\.[a-z]+)?\.demo?\.redhat?\.com/,
   /https:\/\/api?\.aws?\.ap-southeast-1(?:\.[a-z]+)?\.openshift?\.com/,
   /https:\/\/console-service?\.[a-z]*-[a-z]*\.aws?\.ansiblecloud?\.com\/api/,
+  /https:\/\/console-service?\.[a-z]*-[a-z]*\.aws?\.ansiblecloud?\.redhat?\.com\/api/,
 ];
 const AUTH_EXCLUDED_URLS = [/https:\/\/api(?:\.[a-z]+)?\.openshift(?:[a-z]+)?\.com\/api\/upgrades_info/];
 

From 34ff1ac052d6481aaa06170bbf1d6ddff626e978 Mon Sep 17 00:00:00 2001
From: acosferreia <acosferreira@gmail.com>
Date: Wed, 4 Sep 2024 17:50:56 -0700
Subject: [PATCH 11/11] make optinal for int and redhat domain

---
 src/utils/iqeEnablement.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils/iqeEnablement.ts b/src/utils/iqeEnablement.ts
index 0160313f5..4ed92dfda 100644
--- a/src/utils/iqeEnablement.ts
+++ b/src/utils/iqeEnablement.ts
@@ -19,8 +19,7 @@ const AUTH_ALLOWED_ORIGINS = [
   /https:\/\/api(?:\.[a-z]+)?\.openshift(?:[a-z]+)?\.com/,
   /https:\/\/api?\.demo-experience(?:\.[a-z]+)?\.demo?\.redhat?\.com/,
   /https:\/\/api?\.aws?\.ap-southeast-1(?:\.[a-z]+)?\.openshift?\.com/,
-  /https:\/\/console-service?\.[a-z]*-[a-z]*\.aws?\.ansiblecloud?\.com\/api/,
-  /https:\/\/console-service?\.[a-z]*-[a-z]*\.aws?\.ansiblecloud?\.redhat?\.com\/api/,
+  /https:\/\/console-service?\.[a-z]*-[a-z]*\.?(?:[a-z]*)\.aws?\.ansiblecloud?(?:\.redhat)?\.com\/api/,
 ];
 const AUTH_EXCLUDED_URLS = [/https:\/\/api(?:\.[a-z]+)?\.openshift(?:[a-z]+)?\.com\/api\/upgrades_info/];