MGDCTRS-1926 chore: remove useConfig usage

This change removes usage of useConfig from app-services-ui-shared. The data it was providing has been moved to the useCos hook. For the federated entrypoint AppFederated.tsx the mapping that exists in app-services-ui is now local and added to a new endpoints file as constant values. The federated entrypoint will consult this map during initialization and will use the appropriate backend based on the hostname used to access the console. The standalone (AppDemo) and e2e (AppE2E) entrypoints behave as before but each contain their own specific setup to cater for their usage.
bf2fc6cc711aee1a0c2a · Apr 7, 2023 · 34c8144 · 34c8144
1 parent 7c732f7
commit 34c8144
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 144 deletions.
diff --git a/.env b/.env
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -20,9 +20,10 @@ http://localhost:9002/?pseudolocalization=true&lng=en
 # Change language to Japanese (if you don't want to change your browser language)
 http://localhost:9002/?lng=ja
 ```
+
 ## API
 
-By default the UI will run against the staging api (api.stage.openshift.com) in development. To change the API server set the environment variable `BASE_PATH`.
+By default the standalone UI will run against a development backend environment for connectors and use production for Kafka.
 
 For example:
 
@@ -37,10 +38,10 @@ npm install
 npm run start
 ```
 
-This will start the standalone app on `https://prod.foo.redhat.com:1337/`. 
+This will start the standalone app on `https://prod.foo.redhat.com:1337/`.
 
 - make sure you have `127.0.0.1 prod.foo.redhat.com` in your hosts file for this to work.
-- you can also change the backend (fleet-manager) that the app will point to in the `.env` file.
+- You can use the menu at the top right of the main navigation to select a backend to run against.
 
 ## Run the UI as a federated module consumed by the application-services-ui app
 
@@ -49,7 +50,16 @@ npm install
 npm run start:federate
 ```
 
-This will run a dev server on http://localhost:9002 that will serve a federated module named `cos`.
+This will run a dev server on http://localhost:9002 that will serve a federated module named `cos`. When using this with the app-services-ui shell the backend will default to the development connectors environment and the production Kafka environment. To change either backend URL set either or both of the relevant environment variables before running `npm run start:federate`:
+
+```sh
+# use the stage instance of this API
+export COS_MGMT_URL="https://api.stage.openshift.com"
+# use the production instance of this API
+export KAS_MGMT_URL="https://api.openshift.com"
+```
+
+_Important Note_: These environment variables also allow for building a version of the federated module that uses a custom backend. It's very important however when building this module for staging or production that these variables are left unset.
 
 ### Running Cypress
 
@@ -110,6 +120,7 @@ type ApiDrawerState = {
   isExpanded: boolean;
 };
 ```
+
 ### Interfaces
 
 Interfaces should be used for all public facing API definitions, as well as models. A table describing when to use interfaces vs. types can be found [here](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/types_or_interfaces).
@@ -211,6 +222,7 @@ function Counter() {
   );
 }
 ```
+
 #### useEffect
 
 For useEffect only [return the function or undefined](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/hooks#useeffect).
@@ -280,4 +292,4 @@ console.log(user.profile);
 ```js
 const { keycloak } = useContext(AuthContext);
 const header = keycloak.getAuthHeader();
-```
+```
diff --git a/src/AppDemo.tsx b/src/AppDemo.tsx
@@ -1,6 +1,12 @@
 import { AlertsProvider } from '@app/components/Alerts/Alerts';
 import { AppLayout } from '@app/components/AppLayout/AppLayout';
 import { Loading } from '@app/components/Loading/Loading';
+import {
+  COS_MANAGEMENT_DEV_BASE_PATH,
+  DEBEZIUM_CONFIGURATOR,
+  PROD_BASE_PATH,
+  STAGE_BASE_PATH,
+} from '@constants/endpoints';
 import { AnalyticsProvider } from '@hooks/useAnalytics';
 import {
   getKeycloakInstance,
@@ -26,11 +32,6 @@ import {
 } from '@patternfly/react-core';
 
 import { I18nextProvider } from '@rhoas/app-services-ui-components';
-import {
-  Config,
-  ConfigContext,
-  useConfig,
-} from '@rhoas/app-services-ui-shared';
 
 import { CosRoutes } from './CosRoutes';
 
@@ -39,9 +40,8 @@ let keycloak: Keycloak.KeycloakInstance | undefined;
 type EnvironmentType = 'staging' | 'development' | 'local';
 const environmentNames = ['staging', 'development', 'local'] as const;
 const environments: { [k in EnvironmentType]: string } = {
-  staging: 'https://wxn4aqqc8bqvxcy6unfe.api.stage.openshift.com',
-  development:
-    'https://cos-fleet-manager-managed-connectors-dev.rhoc-dev-153f1de160110098c1928a6c05e19444-0000.eu-de.containers.appdomain.cloud',
+  staging: STAGE_BASE_PATH,
+  development: COS_MANAGEMENT_DEV_BASE_PATH,
   local: 'http://localhost:8000',
 };
 
@@ -131,47 +131,44 @@ const ConnectedAppDemo: FunctionComponent<ConnectedAppDemoProps> = ({
   headerTools,
   initialized,
 }) => (
-  <ConfigContext.Provider
-    value={
-      {
-        cos: {
-          apiBasePath: baseUrl,
-          configurators: {
-            debezium: {
-              remoteEntry:
-                'https://qaprodauth.cloud.redhat.com/apps/dbz-ui-build/dbz-connector-configurator.remoteEntry.js',
-              scope: 'debezium_ui',
-              module: './config',
-            },
-          } as Record<string, unknown>,
-        },
-      } as Config
-    }
-  >
-    <I18nextProvider i18n={i18n}>
-      <AlertsProvider>
-        <AnalyticsProvider>
-          <React.Suspense fallback={<Loading />}>
-            <Router>
-              <AppLayout headerTools={headerTools}>
-                {initialized ? <ConnectedRoutes /> : <Spinner />}
-              </AppLayout>
-            </Router>
-          </React.Suspense>
-        </AnalyticsProvider>
-      </AlertsProvider>
-    </I18nextProvider>
-  </ConfigContext.Provider>
+  <I18nextProvider i18n={i18n}>
+    <AlertsProvider>
+      <AnalyticsProvider>
+        <React.Suspense fallback={<Loading />}>
+          <Router>
+            <AppLayout headerTools={headerTools}>
+              {initialized ? (
+                <ConnectedRoutes baseUrl={baseUrl} />
+              ) : (
+                <Spinner />
+              )}
+            </AppLayout>
+          </Router>
+        </React.Suspense>
+      </AnalyticsProvider>
+    </AlertsProvider>
+  </I18nextProvider>
 );
 
-const ConnectedRoutes: FunctionComponent<{}> = () => {
+type ConnectedRoutesProps = {
+  baseUrl: string;
+};
+const ConnectedRoutes: FunctionComponent<ConnectedRoutesProps> = ({
+  baseUrl,
+}) => {
   const { getKeyCloakToken } = useKeyCloakAuthToken();
-  const config = useConfig();
   return (
     <CosRoutes
       getToken={async () => (await getKeyCloakToken()) || ''}
-      connectorsApiBasePath={config?.cos.apiBasePath || ''}
-      kafkaManagementApiBasePath={'https://api.openshift.com'}
+      connectorsApiBasePath={baseUrl || ''}
+      kafkaManagementApiBasePath={PROD_BASE_PATH}
+      configurators={{
+        debezium: {
+          remoteEntry: DEBEZIUM_CONFIGURATOR,
+          scope: 'debezium_ui',
+          module: './config',
+        },
+      }}
     />
   );
 };
diff --git a/src/AppE2E.tsx b/src/AppE2E.tsx
@@ -7,11 +7,6 @@ import React, { FunctionComponent } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { I18nextProvider } from '@rhoas/app-services-ui-components';
-import {
-  Config,
-  ConfigContext,
-  useConfig,
-} from '@rhoas/app-services-ui-shared';
 
 import { CosRoutes } from './CosRoutes';
 
@@ -23,59 +18,43 @@ import { CosRoutes } from './CosRoutes';
  * The `baseUrl` for the API is statically set to `localhost`.
  */
 export const AppE2E: FunctionComponent = () => {
-  const config = {
-    cos: {
-      apiBasePath: 'localhost',
-      configurators: {
-        'debezium-mongodb-1.9.0.Alpha1': {
-          remoteEntry:
-            'https://qaprodauth.cloud.redhat.com/apps/dbz-ui-build/dbz-connector-configurator.remoteEntry.js',
-          scope: 'debezium_ui',
-          module: './config',
-        },
-        'debezium-mysql-1.9.0.Alpha1': {
-          remoteEntry:
-            'https://qaprodauth.cloud.redhat.com/apps/dbz-ui-build/dbz-connector-configurator.remoteEntry.js',
-          scope: 'debezium_ui',
-          module: './config',
-        },
-        'debezium-postgres-1.9.0.Alpha1': {
-          remoteEntry:
-            'https://qaprodauth.cloud.redhat.com/apps/dbz-ui-build/dbz-connector-configurator.remoteEntry.js',
-          scope: 'debezium_ui',
-          module: './config',
-        },
-      } as Record<string, unknown>,
-    },
-  } as Config;
-
-  return (
-    <ConfigContext.Provider value={config}>
-      <I18nextProvider i18n={i18n}>
-        <AlertsProvider>
-          <AnalyticsProvider>
-            <React.Suspense fallback={<Loading />}>
-              <Router>
-                <AppLayout>
-                  <ConnectedRoutes />
-                </AppLayout>
-              </Router>
-            </React.Suspense>
-          </AnalyticsProvider>
-        </AlertsProvider>
-      </I18nextProvider>
-    </ConfigContext.Provider>
-  );
-};
-
-const ConnectedRoutes = () => {
-  const config = useConfig();
   return (
-    <CosRoutes
-      getToken={async () => 'dummy'}
-      connectorsApiBasePath={config?.cos.apiBasePath || ''}
-      // TODO: remove after demo
-      kafkaManagementApiBasePath={'localhost'}
-    />
+    <I18nextProvider i18n={i18n}>
+      <AlertsProvider>
+        <AnalyticsProvider>
+          <React.Suspense fallback={<Loading />}>
+            <Router>
+              <AppLayout>
+                <CosRoutes
+                  getToken={async () => 'dummy'}
+                  connectorsApiBasePath={'localhost'}
+                  kafkaManagementApiBasePath={'localhost'}
+                  configurators={{
+                    'debezium-mongodb-1.9.0.Alpha1': {
+                      remoteEntry:
+                        'https://qaprodauth.cloud.redhat.com/apps/dbz-ui-build/dbz-connector-configurator.remoteEntry.js',
+                      scope: 'debezium_ui',
+                      module: './config',
+                    },
+                    'debezium-mysql-1.9.0.Alpha1': {
+                      remoteEntry:
+                        'https://qaprodauth.cloud.redhat.com/apps/dbz-ui-build/dbz-connector-configurator.remoteEntry.js',
+                      scope: 'debezium_ui',
+                      module: './config',
+                    },
+                    'debezium-postgres-1.9.0.Alpha1': {
+                      remoteEntry:
+                        'https://qaprodauth.cloud.redhat.com/apps/dbz-ui-build/dbz-connector-configurator.remoteEntry.js',
+                      scope: 'debezium_ui',
+                      module: './config',
+                    },
+                  }}
+                />
+              </AppLayout>
+            </Router>
+          </React.Suspense>
+        </AnalyticsProvider>
+      </AlertsProvider>
+    </I18nextProvider>
   );
 };
diff --git a/src/AppFederated.tsx b/src/AppFederated.tsx
@@ -1,5 +1,13 @@
 import { Loading } from '@app/components/Loading/Loading';
 import { init } from '@app/store';
+import {
+  APP_ROUTE,
+  DEBEZIUM_CONFIGURATOR,
+  DEBEZIUM_CONFIGURATOR_PREVIEW,
+  ENDPOINT_MAPPINGS,
+  PREVIEW_APP_ROUTE,
+  PROD_BASE_PATH,
+} from '@constants/endpoints';
 import { AlertContext, AlertProps } from '@hooks/useAlert';
 import { AnalyticsProvider } from '@hooks/useAnalytics';
 import i18n from '@i18n/i18n';
@@ -21,17 +29,9 @@ import type { Reducer } from 'redux';
 import '@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css';
 
 import { I18nextProvider } from '@rhoas/app-services-ui-components';
-import { useConfig } from '@rhoas/app-services-ui-shared';
 
 import { CosRoutes } from './CosRoutes';
 
-// The route within the console.redhat.com environment that this app sits at
-const APP_ROUTE = '/application-services/connectors';
-// The preview/beta route within console.redhat.com
-const PREVIEW_APP_ROUTE = '/beta/application-services/connectors';
-// The root URL for the kafka management API
-const KAFKA_MANAGEMENT_API_BASE_PATH = 'https://api.openshift.com';
-
 /**
  * Initializes the COS UI without any chrome. This is meant to be used in
  * production, or locally when consuming this component as a federated module
@@ -43,7 +43,6 @@ const KAFKA_MANAGEMENT_API_BASE_PATH = 'https://api.openshift.com';
  */
 const AppFederatedInner: FunctionComponent = () => {
   const [key, setKey] = useState(0);
-  const config = useConfig();
   const { analytics, auth, isBeta, on } = useChrome();
   const dispatch = useDispatch();
 
@@ -98,6 +97,14 @@ const AppFederatedInner: FunctionComponent = () => {
       })
     );
   };
+  const { cosManagementApiBasePath, kafkaManagementApiBasePath } =
+    ENDPOINT_MAPPINGS.find(
+      ({ hostnames }: { hostnames: ReadonlyArray<string> }) =>
+        hostnames.includes(window.location.hostname)
+    ) || {
+      cosManagementApiBasePath: PROD_BASE_PATH,
+      kafkaManagementApiBasePath: PROD_BASE_PATH,
+    };
   return (
     <AlertContext.Provider value={{ addAlert }}>
       <React.Suspense fallback={<Loading />}>
@@ -110,8 +117,21 @@ const AppFederatedInner: FunctionComponent = () => {
             <NotificationPortal />
             <CosRoutes
               getToken={async () => (await auth.getToken()) || ''}
-              connectorsApiBasePath={config?.cos.apiBasePath || ''}
-              kafkaManagementApiBasePath={KAFKA_MANAGEMENT_API_BASE_PATH}
+              connectorsApiBasePath={
+                (process.env.COS_MGMT_URL || cosManagementApiBasePath)!
+              }
+              kafkaManagementApiBasePath={
+                (process.env.KAS_MGMT_URL || kafkaManagementApiBasePath)!
+              }
+              configurators={{
+                debezium: {
+                  remoteEntry: isBeta()
+                    ? DEBEZIUM_CONFIGURATOR_PREVIEW
+                    : DEBEZIUM_CONFIGURATOR,
+                  scope: 'debezium_ui',
+                  module: './config',
+                },
+              }}
             />
           </Router>
         </AnalyticsProvider>