Merge branch 'master' into setup_global_learning_resources_page

README.md

@@ -65,7 +65,7 @@ You can spin chrome locally together with other applications. Use `LOCAL_APPS` t
 For illustration, to deploy Advisor together with Insights Chrome, you would require to
 
 1. Run Advisor on any available port with `npm run start -- --port=8004` or `npm run start:beta -- --port=8004`,
-2. Run Chrome and list the Advisor's port: `LOCAL_APPS=advisor:8004:http npm run dev` or `LOCAL_APPS=advisor:8004:http npm run dev:beta`.
+2. Run Chrome and list the Advisor's port: `LOCAL_APPS=advisor:8004~http npm run dev` or `LOCAL_APPS=advisor:8004~http npm run dev:beta`.
 
 #### Example 2 (using devServer route)
 

cypress/component/NotificationDrawer/NotificationDrawer.cy.tsx

@@ -112,8 +112,8 @@ describe('Notification Drawer', () => {
     cy.get('#drawer-toggle').click();
     cy.get('.pf-m-read').should('have.length', 0);
     // select all notifications
-    cy.get('[aria-label="notifications-bulk-select"]').click();
-    cy.get('[data-ouia-component-id="notifications-bulk-select-select-all"]').click();
+    cy.get('[data-ouia-component-id="BulkSelect"]').click();
+    cy.get('[data-ouia-component-id="BulkSelectList-select-all"]').click();
     // mark selected as read
     cy.get('#notifications-actions-toggle').click();
     cy.contains('Mark selected as read').click();
@@ -129,8 +129,8 @@ describe('Notification Drawer', () => {
     cy.get('#drawer-toggle').click();
     cy.get('.pf-m-read').should('have.length', 3);
     // select all notifications
-    cy.get('[aria-label="notifications-bulk-select"]').click();
-    cy.get('[data-ouia-component-id="notifications-bulk-select-select-all"]').click();
+    cy.get('[data-ouia-component-id="BulkSelect"]').click();
+    cy.get('[data-ouia-component-id="BulkSelectList-select-all"]').click();
     // mark selected as unread
     cy.get('#notifications-actions-toggle').click();
     cy.contains('Mark selected as unread').click();

cypress/component/SharedScope/RouterOverrides.cy.tsx

@@ -0,0 +1,62 @@
+import { getSharedScope } from '@scalprum/core';
+import ScalprumProvider from '@scalprum/react-core';
+import React, { ComponentType, PropsWithChildren, Suspense, lazy, useEffect, useState } from 'react';
+import updateSharedScope, { hacApps } from '../../../src/chrome/update-shared-scope';
+import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
+
+const PatchedLink = lazy<ComponentType<PropsWithChildren<{ to: string }>>>(async () => {
+  const m = await getSharedScope()['react-router-dom']['*'].get();
+  return {
+    default: m().NavLink,
+  };
+});
+
+const ScalprumBase = ({ children }: PropsWithChildren) => {
+  const [ok, setOk] = useState(false);
+  useEffect(() => {
+    updateSharedScope();
+    setTimeout(() => {
+      // delay the render to ensure the shared scope was patched
+      setOk(true);
+    });
+  }, []);
+  return <ScalprumProvider config={{}}>{ok && <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>}</ScalprumProvider>;
+};
+
+describe('RouterOverrides', () => {
+  const cases = [
+    ...hacApps.map((app) => ({
+      name: `Should prefix hacApp link pathname with /hac for ${app}`,
+      pathname: `/foo/hac${app}`,
+      hasPrefix: true,
+    })),
+    {
+      name: 'Should not prefix hacApp link pathname with "hac" substring somewhere in the pathname',
+      pathname: '/foo/hac-e2e-user/application/bar',
+      hasPrefix: false,
+    },
+  ];
+
+  cases.forEach(({ name, pathname, hasPrefix }) => {
+    it(name, () => {
+      cy.mount(
+        <BrowserRouter>
+          <div>
+            <Link to={pathname}>navigate</Link>
+          </div>
+          <ScalprumBase>
+            <Routes>
+              <Route path={pathname} element={<PatchedLink to="/application-pipeline/workspaces">trigger</PatchedLink>} />
+            </Routes>
+          </ScalprumBase>
+        </BrowserRouter>
+      );
+
+      cy.contains('navigate').click();
+      cy.contains('trigger')
+        .first()
+        .invoke('attr', 'href')
+        .should('eq', `${hasPrefix ? '/hac' : ''}/application-pipeline/workspaces`);
+    });
+  });
+});

docs/preview.md

@@ -0,0 +1,127 @@
+# UI Preview environment
+
+Preview environment exists to allow the users to opt-in into experimental version of the HCC UI. This environment can contain future features. The environment is not considered stable!
+
+## Legacy preview environment
+
+> This environment is being decommissioned on **August 1, 2024**.
+
+This environment can be access on any valid HCC URL simply by adding `/preview` to the URL host. This environment uses standalone deployments of the frontend modules (deployments can share builds).
+
+## Upcoming preview environment
+
+As of June 2024, the new preview environment is available. The HCC UI will be switched to this new preview environment on **August 1, 2024**.
+
+### Accessing new preview
+
+To test the preview functionality before the switch a localStorage flag needs to ne enabled. In the browser console use this command:
+
+```js
+window.insights.chrome.enable.forceLocalPreview()
+```
+
+After this, reload the browser window.
+
+### Toggling preview
+
+To toggle between stable/preview environments, use the preview toggle. Changing the URL will no longer have any effect.
+
+### Distinguishing between stable/preview environments
+
+## Using preview
+
+To enable/disable preview features use one of the following:
+
+> Using feature flags is recommended
+
+### Feature flags
+
+Feature flags can be used to enable/disable preview features. Chrome UI is adding a `platform.chrome.ui.preview` context variable. Use this context field in feature flags to enable/disable preview features.
+
+#### React components
+
+Follow the official docs: https://docs.getunleash.io/reference/sdks/react#check-feature-toggle-status
+
+```jsx
+import { useFlag } from '@unleash/proxy-client-react';
+
+const TestComponent = () => {
+  const enabled = useFlag('foo.bar');
+
+  if (enabled) {
+    return <SomeComponent />;
+  }
+  return <AnotherComponent />;
+};
+
+export default TestComponent;
+```
+
+#### Navigation
+
+To conditionally display left navigation items based on feature flag values, use the `featureFlag` visibility function in the nav item definition:
+
+```JSON
+{
+  "id": "foo",
+  "appId": "foo",
+  "title": "Foo",
+  "href": "/foo/bar",
+  "permissions": [
+    {
+      "method": "featureFlag",
+      "args": ["foo.bar", true]
+    }
+  ]
+}
+```
+
+#### Search index
+
+To conditionally display items based on feature flags, use the `featureFlag` visibility functions in the associated link or static entry.
+
+```JSON
+{
+  "id": "foo",
+  "appId": "foo",
+  "title": "Foo",
+  "href": "/foo/bar",
+  "permissions": [
+    {
+      "method": "featureFlag",
+      "args": ["foo.bar", true]
+    }
+  ]
+}
+```
+
+### `isBeta` Chrome API
+
+> This API is deprecated. Please use the feature flags.
+
+#### React components
+
+Use the `useChrome` hook to access the `isBeta` method:
+
+```jsx
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+
+const Component = () => {
+  const { isBeta } = useChrome()
+
+  const isPreview = isBeta()
+
+  return (
+    ...
+  )
+
+}
+```
+
+#### Navigation
+
+Not supported via chrome API
+
+#### Search index
+
+Not supported via chrome API

jest.config.js

@@ -18,9 +18,6 @@ module.exports = {
         $schema: 'http://json.schemastore.org/swcrc',
 
         jsc: {
-          experimental: {
-            plugins: [['jest_workaround', {}]],
-          },
           parser: {
             jsx: true,
             syntax: 'typescript',