MGDCTRS-1926 chore: migrate useAlert usage

This change introduces a local useAlert hook to replace the
implementation from app-services-ui-shared.  In federated mode this hook
is now connected to the console notification system via
frontend-components-notifications, and this component is now a direct
dependency.  This commit therefore also contains some required
initialization code and dependencies such as a redux store and
react-redux for frontend-components-notifications.  Finally, this commit
also changes the routing behavior when saving a configuration change,
the user remains in the connector detail/overview page when editing a
connector instead of going back to the connector list.

package.json

@@ -32,9 +32,12 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-error-boundary": "3.1.4",
+    "react-redux": "8.0.5",
     "react-router-dom": "5.2.1",
     "react-viewport-utils": "2.0.2",
     "react-virtualized": "9.22.3",
+    "redux": "4.2.1",
+    "redux-logger": "3.0.6",
     "short-uuid": "4.2.2",
     "uniforms": "3.10.2",
     "uniforms-bridge-json-schema": "3.10.2",
@@ -50,6 +53,8 @@
     "@changesets/cli": "2.26.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@redhat-cloud-services/frontend-components-config": "4.7.2",
+    "@redhat-cloud-services/frontend-components-notifications": "3.2.14",
+    "@redhat-cloud-services/frontend-components-utilities": "3.4.0",
     "@storybook/addon-actions": "6.5.16",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/addon-links": "6.5.16",
@@ -69,6 +74,7 @@
     "@types/react-dom": "17.0.19",
     "@types/react-router-dom": "5.3.3",
     "@types/react-virtualized": "9.21.21",
+    "@types/redux-logger": "3.0.9",
     "@types/simpl-schema": "1.12.3",
     "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "5.57.1",
@@ -114,6 +120,7 @@
     "prando": "6.0.1",
     "prettier": "2.8.7",
     "raw-loader": "4.0.2",
+    "redux-promise-middleware": "6.1.3",
     "react-refresh": "0.14.0",
     "react-refresh-typescript": "2.0.8",
     "rimraf": "3.0.2",

src/AppFederated.tsx

@@ -1,14 +1,22 @@
 import { Loading } from '@app/components/Loading/Loading';
+import { init } from '@app/store';
+import { AlertContext, AlertProps } from '@hooks/useAlert';
 import { AnalyticsProvider } from '@hooks/useAnalytics';
 import i18n from '@i18n/i18n';
+import NotificationPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
+import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
+import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux';
+import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import React, {
   FunctionComponent,
   useCallback,
   useEffect,
   useState,
 } from 'react';
+import { Provider, useDispatch } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
+import type { Reducer } from 'redux';
 
 import '@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css';
 
@@ -33,49 +41,92 @@ const KAFKA_MANAGEMENT_API_BASE_PATH = 'https://api.openshift.com';
  * The auth token and the API basePath will come from the relative context set
  * up in the `application-services-ui` app.
  */
-export const AppFederated: FunctionComponent = () => {
-  const config = useConfig();
+const AppFederatedInner: FunctionComponent = () => {
   const [key, setKey] = useState(0);
-  const chrome = useChrome();
-  const analytics = chrome.analytics;
+  const config = useConfig();
+  const { analytics, auth, isBeta, on } = useChrome();
+  const dispatch = useDispatch();
+
   const bumpKey = useCallback(() => {
     setKey(key + 1);
   }, [key, setKey]);
-  // force our router instance to refresh it's history state when there's a
-  // side navigation event
+
   useEffect(() => {
-    const unregister = chrome
-      ? chrome.on('APP_NAVIGATION', (event) => {
-          if (event.navId === 'connectors') {
-            bumpKey();
-          }
-        })
-      : () => {};
+    // Connect toast notifications
+    const registry = getRegistry();
+    registry.register({
+      notifications: notificationsReducer as Reducer,
+    });
+
+    // force our router instance to refresh it's history state when there's a
+    // side navigation event
+    const unregister = on('APP_NAVIGATION', (event) => {
+      if (event.navId === 'connectors') {
+        bumpKey();
+      }
+    });
     return () => {
       unregister!();
     };
-  });
+  }, [on, bumpKey]);
+
+  // Connect toast notifications to console dot
+  const addAlert = ({
+    title,
+    variant,
+    description,
+    dismissable,
+    id,
+  }: AlertProps) => {
+    console.log(
+      'dispatching addNotification action, title: ',
+      title,
+      ' variant: ',
+      variant,
+      ' description: ',
+      description,
+      ' dismissable: ',
+      dismissable
+    );
+    dispatch(
+      addNotification({
+        title,
+        variant,
+        description,
+        dismissable: dismissable || true,
+        id,
+      })
+    );
+  };
   return (
-    <I18nextProvider i18n={i18n}>
-      <AnalyticsProvider
-        onActivity={(event, properties) =>
-          analytics ? analytics.track(event, properties) : false
-        }
-      >
-        <React.Suspense fallback={<Loading />}>
-          <Router
-            basename={chrome.isBeta() ? PREVIEW_APP_ROUTE : APP_ROUTE}
-            key={key}
-          >
+    <AlertContext.Provider value={{ addAlert }}>
+      <React.Suspense fallback={<Loading />}>
+        <AnalyticsProvider
+          onActivity={(event, properties) =>
+            analytics ? analytics.track(event, properties) : false
+          }
+        >
+          <Router basename={isBeta() ? PREVIEW_APP_ROUTE : APP_ROUTE} key={key}>
+            <NotificationPortal />
             <CosRoutes
-              getToken={async () => (await chrome.auth.getToken()) || ''}
+              getToken={async () => (await auth.getToken()) || ''}
               connectorsApiBasePath={config?.cos.apiBasePath || ''}
               kafkaManagementApiBasePath={KAFKA_MANAGEMENT_API_BASE_PATH}
             />
           </Router>
-        </React.Suspense>
-      </AnalyticsProvider>
-    </I18nextProvider>
+        </AnalyticsProvider>
+      </React.Suspense>
+    </AlertContext.Provider>
+  );
+};
+
+export const AppFederated: FunctionComponent = () => {
+  return (
+    <Provider store={init().getStore()}>
+      <I18nextProvider i18n={i18n}>
+        <AppFederatedInner />
+      </I18nextProvider>
+    </Provider>
   );
 };
 

src/CosRoutes.tsx

@@ -2,11 +2,11 @@ import { ConnectorDetailsPage } from '@app/pages/ConnectorDetailsPage/ConnectorD
 import { ConnectorsPage } from '@app/pages/ConnectorsPage/ConnectorsPage';
 import { CreateConnectorPage } from '@app/pages/CreateConnectorPage/CreateConnectorPage';
 import { DuplicateConnectorPage } from '@app/pages/CreateConnectorPage/DuplicateConnectorPage';
+import { AlertVariant, useAlert } from '@hooks/useAlert';
 import React, { FunctionComponent, useCallback } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import { AlertVariant, useAlert } from '@rhoas/app-services-ui-shared';
 
 import { CosContextProvider } from './hooks/useCos';
 
@@ -86,7 +86,7 @@ export const CosRoutes: FunctionComponent<CosRoutesProps> = ({
         </Route>
         <Route path={'/:id/'}>
           <ConnectorDetailsPage
-            onSave={goToConnectorsList}
+            onSave={() => {}}
             onDuplicateConnector={goToDuplicateConnector}
           />
         </Route>

src/app/components/Alerts/Alerts.tsx

@@ -1,3 +1,4 @@
+import { AlertContext, AlertProps, AlertVariant } from '@hooks/useAlert';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 
 import {
@@ -6,22 +7,18 @@ import {
   AlertActionCloseButton,
 } from '@patternfly/react-core';
 
-import {
-  AlertContext,
-  AlertProps,
-  AlertVariant,
-} from '@rhoas/app-services-ui-shared';
-
 type TimeOut = {
   key: string | undefined;
   timeOut: ReturnType<typeof setTimeout> | undefined;
 };
 
+export type TestAlertProps = AlertProps & { dataTestId?: string };
+
 /**
  * Mocks the behaviour of notifications on console.redhat.com
  */
 export const AlertsProvider: FunctionComponent = ({ children }) => {
-  const [alerts, setAlerts] = useState<AlertProps[]>([]);
+  const [alerts, setAlerts] = useState<TestAlertProps[]>([]);
   const [timers, setTimers] = useState<TimeOut[]>([]);
 
   useEffect(() => {
@@ -75,7 +72,14 @@ export const AlertToastGroup: React.FunctionComponent<AlertToastGroupProps> = ({
   return (
     <AlertGroup isToast>
       {alerts.map(
-        ({ id, variant, title, description, dataTestId, ...rest }) => (
+        ({
+          id,
+          variant,
+          title,
+          description,
+          dataTestId,
+          ...rest
+        }: TestAlertProps) => (
           <Alert
             key={id}
             isLiveRegion

src/app/components/CreateServiceAccount/CreateServiceAccount.tsx

@@ -1,4 +1,5 @@
 import { createServiceAccount, UserProvidedServiceAccount } from '@apis/api';
+import { useAlert } from '@hooks/useAlert';
 import { useCos } from '@hooks/useCos';
 import React, { FormEvent, useCallback, useState } from 'react';
 import { FC } from 'react';
@@ -28,7 +29,7 @@ import {
 import { KeyIcon, HelpIcon } from '@patternfly/react-icons';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import { ServiceAccount, useAlert } from '@rhoas/app-services-ui-shared';
+import { ServiceAccount } from '@rhoas/app-services-ui-shared';
 
 type CreateServiceAccountProps = {
   isOpen: boolean;

src/app/components/RegisterEvalNamespace/RegisterEvalNamespace.tsx

@@ -1,4 +1,5 @@
 import { registerEvalNamespace } from '@apis/api';
+import { useAlert } from '@hooks/useAlert';
 import { useCos } from '@hooks/useCos';
 import React, { useCallback, useEffect, useState } from 'react';
 
@@ -15,7 +16,6 @@ import {
 } from '@patternfly/react-core';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import { useAlert } from '@rhoas/app-services-ui-shared';
 
 import { ModalAlerts } from './ModalAlerts';
 

src/app/pages/ConnectorDetailsPage/components/ConfigurationTab/ConfigurationTab.tsx

@@ -6,6 +6,7 @@ import {
   ConfigurationMode,
   ConnectorConfiguratorComponent,
 } from '@app/machines/StepConfiguratorLoader.machine';
+import { useAlert } from '@hooks/useAlert';
 import { useCos } from '@hooks/useCos';
 import { fetchConfigurator } from '@utils/loadFederatedConfigurator';
 import {
@@ -31,11 +32,7 @@ import {
 } from '@patternfly/react-core';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import {
-  KafkaInstance,
-  useAlert,
-  useConfig,
-} from '@rhoas/app-services-ui-shared';
+import { KafkaInstance, useConfig } from '@rhoas/app-services-ui-shared';
 import {
   Connector,
   ConnectorType,

src/app/pages/ConnectorDetailsPage/components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx

@@ -2,6 +2,7 @@ import { deleteConnector, startConnector, stopConnector } from '@apis/api';
 import { ConnectorStatus } from '@app/components/ConnectorStatus/ConnectorStatus';
 import { SomethingWentWrongInline } from '@app/components/SomethingWentWrongInline/SomethingWentWrongInline';
 import { CONNECTOR_DETAILS_TABS } from '@constants/constants';
+import { useAlert } from '@hooks/useAlert';
 import React, { FC, useCallback, useEffect, useReducer } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 
@@ -16,7 +17,6 @@ import {
 } from '@patternfly/react-core';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import { useAlert } from '@rhoas/app-services-ui-shared';
 import {
   Connector,
   ConnectorDesiredState,

src/app/pages/ConnectorDetailsPage/components/OverviewTab/OverviewTab.tsx

@@ -1,5 +1,6 @@
 import { getKafkaInstanceById, getNamespace } from '@apis/api';
 import { ConnectorInfoTextList } from '@app/components/ConnectorInfoTextList/ConnectorInfoTextList';
+import { useAlert } from '@hooks/useAlert';
 import { useCos } from '@hooks/useCos';
 import React, { FC, useCallback, useEffect, useState } from 'react';
 
@@ -11,7 +12,7 @@ import {
 } from '@patternfly/react-core';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import { KafkaInstance, useAlert } from '@rhoas/app-services-ui-shared';
+import { KafkaInstance } from '@rhoas/app-services-ui-shared';
 import { Connector, ConnectorNamespace } from '@rhoas/connector-management-sdk';
 
 export interface OverviewTabProps {

src/app/pages/ConnectorsPage/ConnectorsPage.tsx

@@ -1,8 +1,8 @@
+import { AlertVariant, useAlert } from '@hooks/useAlert';
 import { useCos } from '@hooks/useCos';
 import React, { FunctionComponent, useCallback } from 'react';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import { AlertVariant, useAlert } from '@rhoas/app-services-ui-shared';
 
 import { ConnectorsPageProvider } from './ConnectorsPageContext';
 import { ConnectorInstances } from './components/ConnectorInstances/ConnectorInstances';

src/app/pages/ConnectorsPage/components/ConnectorDrawer/ConnectorDrawerData.tsx

@@ -1,4 +1,5 @@
 import { getKafkaInstanceById, getNamespace } from '@apis/api';
+import { useAlert } from '@hooks/useAlert';
 import { useCos } from '@hooks/useCos';
 import React, {
   FunctionComponent,
@@ -10,7 +11,7 @@ import React, {
 import { AlertVariant, Spinner } from '@patternfly/react-core';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import { KafkaInstance, useAlert } from '@rhoas/app-services-ui-shared';
+import { KafkaInstance } from '@rhoas/app-services-ui-shared';
 import { ConnectorNamespace } from '@rhoas/connector-management-sdk';
 
 import { ConnectorDrawerContent } from './ConnectorDrawerContent';

src/app/pages/CreateConnectorPage/DuplicateConnectorPage.tsx

@@ -2,6 +2,7 @@ import { getConnector, getConnectorTypeDetail } from '@apis/api';
 import { CreateConnectorWizard } from '@app/components/CreateConnectorWizard/CreateConnectorWizard';
 import { CreateConnectorWizardProvider } from '@app/components/CreateConnectorWizard/CreateConnectorWizardContext';
 import { Loading } from '@app/components/Loading/Loading';
+import { AlertVariant, useAlert } from '@hooks/useAlert';
 import { useCos } from '@hooks/useCos';
 import { fetchConfigurator } from '@utils/loadFederatedConfigurator';
 import _ from 'lodash';
@@ -22,11 +23,7 @@ import {
 } from '@patternfly/react-core';
 
 import { useTranslation } from '@rhoas/app-services-ui-components';
-import {
-  AlertVariant,
-  useAlert,
-  useConfig,
-} from '@rhoas/app-services-ui-shared';
+import { useConfig } from '@rhoas/app-services-ui-shared';
 import { Connector, ConnectorTypeAllOf } from '@rhoas/connector-management-sdk';
 
 import { ConnectorWizardHeader } from './components/ConnectorWizardHeader';

src/app/store/index.ts

@@ -0,0 +1,18 @@
+import notificationsMiddleware from '@redhat-cloud-services/frontend-components-notifications/notificationsMiddleware';
+import ReducerRegistry from '@redhat-cloud-services/frontend-components-utilities/ReducerRegistry';
+import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry';
+import promiseMiddleware from 'redux-promise-middleware';
+
+let registry: ReducerRegistry<any> | undefined = undefined;
+
+export function init(...middleware: any) {
+  if (!registry) {
+    registry = getRegistry({}, [
+      promiseMiddleware,
+      notificationsMiddleware,
+      ...middleware,
+    ]);
+    console.log('Using reducer registry: ', registry);
+  }
+  return registry;
+}