Merge pull request #15679 from logonoff/CONSOLE-4840-guided-tour

CONSOLE-4840: Migrate GuidedTour to dynamic

Author: openshift-merge-bot[bot]

frontend/packages/console-app/console-extensions.json

@@ -10,6 +10,13 @@
       "importRedirectURL": { "$codeRef": "perspective.getImportRedirectURL" }
     }
   },
+  {
+    "type": "INTERNAL_DO_NOT_USE.guided-tour",
+    "properties": {
+      "perspective": "admin",
+      "tour": { "$codeRef": "getGuidedTour" }
+    }
+  },
   {
     "type": "console.flag/model",
     "properties": {

frontend/packages/console-app/package.json

@@ -27,7 +27,7 @@
     "@console/webterminal-plugin": "0.0.0-fixed"
   },
   "consolePlugin": {
-    "entry": "src/plugin.tsx",
+    "entry": "src/plugin.ts",
     "exposedModules": {
       "tourContext": "src/components/tour/tour-context.ts",
       "quickStartContext": "src/components/quick-starts/utils/quick-start-context.tsx",
@@ -89,7 +89,8 @@
       "volumeSnapshotContentDetails": "src/components/volume-snapshot/volume-snapshot-content-details.tsx",
       "ConsoleOperatorConfig": "src/components/console-operator/ConsoleOperatorConfig.tsx",
       "UserPreferencePage": "src/components/user-preferences/UserPreferencePage.tsx",
-      "ConsolePluginManifestPage": "src/components/console-operator/ConsolePluginManifestPage.tsx"
+      "ConsolePluginManifestPage": "src/components/console-operator/ConsolePluginManifestPage.tsx",
+      "getGuidedTour": "src/components/guided-tour/index.tsx"
     }
   }
 }

frontend/packages/console-app/src/components/guided-tour/index.tsx

@@ -85,3 +85,5 @@ export const getGuidedTour = (): TourDataType => ({
     modalVariant: ModalVariant.medium,
   },
 });
+
+export default getGuidedTour();

frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts

@@ -1,5 +1,5 @@
 import * as redux from 'react-redux';
-import * as useExtensionsModule from '@console/plugin-sdk/src/api/useExtensions';
+import * as useResolvedExtensions from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
 import * as userHooks from '@console/shared/src/hooks/useUserSettingsCompatibility';
 import { testHook } from '@console/shared/src/test-utils/hooks-utils';
 import { TourActions } from '../const';
@@ -62,13 +62,15 @@ describe('guided-tour-context', () => {
       };
 
       mockTourExtension = [
-        {
-          type: 'GuidedTour',
-          properties: {
-            perspective: 'dev',
-            tour: mockTour,
+        [
+          {
+            type: 'INTERNAL_DO_NOT_USE.guided-tour',
+            properties: {
+              perspective: 'dev',
+              tour: mockTour,
+            },
           },
-        },
+        ],
       ];
     });
 
@@ -80,7 +82,7 @@ describe('guided-tour-context', () => {
           B: false,
         },
       );
-      spyOn(useExtensionsModule, 'useExtensions').and.returnValue(mockTourExtension);
+      spyOn(useResolvedExtensions, 'useResolvedExtensions').and.returnValue(mockTourExtension);
       spyOn(TourModule, 'useTourStateForPerspective').and.returnValue([
         { completed: false },
         () => null,
@@ -110,7 +112,7 @@ describe('guided-tour-context', () => {
           B: false,
         },
       );
-      spyOn(useExtensionsModule, 'useExtensions').and.returnValue([]);
+      spyOn(useResolvedExtensions, 'useResolvedExtensions').and.returnValue([[]]);
       spyOn(TourModule, 'useTourStateForPerspective').and.returnValue([
         { completed: false },
         () => null,
@@ -133,7 +135,7 @@ describe('guided-tour-context', () => {
           B: false,
         },
       );
-      spyOn(useExtensionsModule, 'useExtensions').and.returnValue(mockTourExtension);
+      spyOn(useResolvedExtensions, 'useResolvedExtensions').and.returnValue(mockTourExtension);
       spyOn(TourModule, 'useTourStateForPerspective').and.returnValue([
         { completed: false },
         () => null,

frontend/packages/console-app/src/components/tour/tour-context.ts

@@ -12,10 +12,14 @@ import { pick, union, isEqual } from 'lodash';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { useActivePerspective } from '@console/dynamic-plugin-sdk';
+import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
+import {
+  INTERNAL_DO_NOT_USE_isGuidedTour as isGuidedTour,
+  INTERNAL_DO_NOT_USE_GuidedTour as GuidedTour,
+} from '@console/dynamic-plugin-sdk/src/extensions/guided-tour';
 import { getFlagsObject } from '@console/internal/reducers/features';
 import { RootState } from '@console/internal/redux';
-import { useExtensions } from '@console/plugin-sdk/src/api/useExtensions';
-import { isGuidedTour, GuidedTour } from '@console/plugin-sdk/src/typings/guided-tour';
+import { useTranslatedExtensions } from '@console/plugin-sdk/src/utils/useTranslatedExtensions';
 import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
 import { TourActions, TOUR_LOCAL_STORAGE_KEY } from './const';
 import { TourDataType, Step } from './type';
@@ -117,13 +121,24 @@ export const useTourStateForPerspective = (
   ];
 };
 
+/**
+ * Hook to get translated guided tour extensions.
+ *
+ * As the translated strings of format `%namespace~string%` are behind a codeRef,
+ * `useResolvedExtensions` does not translate the extensions.
+ *
+ * `useTranslatedExtensions` utility is only called in `useExtensions`. We do not
+ * have the tour strings at this point as the codeRef is not resolved yet.
+ */
+const useTranslatedTourExtensions = () => {
+  const [tourExtensionsRaw] = useResolvedExtensions<GuidedTour>(isGuidedTour);
+  return useTranslatedExtensions(tourExtensionsRaw);
+};
+
 export const useTourValuesForContext = (): TourContextType => {
-  // declaring a method for the perspective instead of using getActivePerspective
-  // because importing getActivePerspective in this file throws error
-  // Uncaught ReferenceError: Cannot access 'allModels' before initialization and this hook is used in plugin extension for ContextProvider
   const [activePerspective] = useActivePerspective();
   const [perspective, setPerspective] = useState<string>(activePerspective);
-  const tourExtension = useExtensions<GuidedTour>(isGuidedTour);
+  const tourExtension = useTranslatedTourExtensions();
   const tour = tourExtension.find(({ properties }) => properties.perspective === perspective);
   const selectorSteps = tour?.properties?.tour?.steps ?? [];
   const flags = useSelector(

frontend/packages/console-app/src/plugin.ts

@@ -0,0 +1,2 @@
+// See console-extensions.json instead
+export default [];

frontend/packages/console-app/src/plugin.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import type { TourDataType } from '@console/app/src/components/tour';
+import type {
+  Extension,
+  ExtensionDeclaration,
+  CodeRef,
+} from '@console/dynamic-plugin-sdk/src/types';
+
+// This extension is not part of the console dynamic plugin SDK public API.
+// It is intended for internal use only. Please do not use it. Pretty please?
+
+// Reasons:
+// 1. The `tour` CodeRef is structured for static plugins. i18n support is not good.
+// 2. We are investigating removal of the guided tour entirely.
+// 3. We do not guarantee the stability of the extension properties and type.
+
+/** @hidden */
+export type INTERNAL_DO_NOT_USE_GuidedTour = ExtensionDeclaration<
+  'INTERNAL_DO_NOT_USE.guided-tour',
+  {
+    perspective: string;
+    tour: CodeRef<TourDataType>;
+  }
+>;
+
+/** @hidden */
+export const INTERNAL_DO_NOT_USE_isGuidedTour = (
+  e: Extension,
+): e is INTERNAL_DO_NOT_USE_GuidedTour => {
+  return e.type === 'INTERNAL_DO_NOT_USE.guided-tour';
+};

frontend/packages/console-dynamic-plugin-sdk/src/extensions/guided-tour.ts

@@ -1,24 +1,25 @@
 # OpenShift Console Static Plugins
 
 > [!CAUTION]
-> The static plugin system is deprecated and is actively being removed. New and existing plugins should
-> use the [dynamic plugin system](../console-dynamic-plugin-sdk/README.md) instead.
+> New console plugins should use the dynamic plugin system as described in
+> the [Console Dynamic Plugins README]. New static plugins will not be accepted.
 
-Static plugins become part of the Console application during its webpack build. Their code is maintained
-as part of the frontend monorepo, built and released as an integral part of Console.
+Static plugins become part of the Console application during its webpack build.
+Their code is maintained as part of the frontend monorepo, built and released as
+an integral part of Console.
 
-The `@console/app` package represents the core application. Static plugins to be automatically included
-in the build are declared as `dependencies` of this package. This can be overridden via `CONSOLE_PLUGINS`
-env. variable whose value is a comma separated list of plugin package names.
+The `@console/app` package represents the core application. Static plugins to be
+automatically included in the build are declared as `dependencies` of this package.
+This can be overridden via `CONSOLE_PLUGINS` env. variable whose value is a comma
+separated list of plugin package names.
 
 For example:
 
 ```sh
-CONSOLE_PLUGINS=dev-console,operator-lifecycle-manager yarn dev
+# start a dev server with only `dev-console` and `topology` plugins enabled
+CONSOLE_PLUGINS=dev-console,topology yarn dev
 ```
 
-starts webpack dev-server with only DevConsole and OLM plugins included in the build.
-
 Example project structure:
 
 ```
@@ -32,8 +33,8 @@ packages/foo-plugin/
 
 ## `package.json`
 
-`name` must include the `@console` scope. `version` should be `0.0.0-fixed`. Additional plugin metadata
-is declared via the `consolePlugin` object.
+`name` must include the `@console` scope. `version` should be `0.0.0-fixed`.
+Additional plugin metadata is declared via the [`consolePlugin` object].
 
 ```jsonc
 {
@@ -42,43 +43,31 @@ is declared via the `consolePlugin` object.
   "private": true,
   // scripts, dependencies, devDependencies, ...
   "consolePlugin": {
-    "entry": "src/plugin.ts",
     "exposedModules": {
       "barUtils": "src/utils/bar.ts"
     }
   }
 }
 ```
 
-Static plugins can provide both static and dynamic extensions. All paths in the `consolePlugin` object
-are relative to plugin package root directory and expected to reference actual files (including proper
-file extension).
-
-## Static extensions
-
-The `consolePlugin.entry` path in `package.json` file points to the plugin entry module which exports
-all of the plugin's static extensions.
+Static plugins can provide extensions. All paths in the `consolePlugin` object
+are relative to plugin package root directory and expected to reference actual
+files (including proper file extension). Barrel files (index files which
+re-export other modules) are discouraged and not supported.
 
-The standard way to reference additional code in static extensions is via ES6 module `import` function,
-which generates a separate [webpack chunk](https://webpack.js.org/guides/code-splitting/) to be loaded
-on demand at runtime.
+## Extensions
 
-## Dynamic extensions
-
-Plugin's dynamic extensions are declared via `console-extensions.json` file; see the relevant section in
-[Console Dynamic Plugins README](/frontend/packages/console-dynamic-plugin-sdk/README.md) for details.
-
-When loading static plugins during Console startup, the overall list of plugin's extensions is computed
-as `[...staticExtensions, ...dynamicExtensions]`.
+Plugin's extensions are declared via `console-extensions.json` file; see the
+relevant section in [Console Dynamic Plugins README] for details.
 
 ## `OWNERS`
 
-The main purpose of `OWNERS` file is to list people responsible for reviewing and approving pull requests
-related to the given package or project. It also gives us the ability to add labels to pull requests for
-easier categorization.
+The main purpose of `OWNERS` file is to list people responsible for reviewing
+and approving pull requests related to the given package or project. It also
+gives us the ability to add labels to pull requests for easier categorization.
 
-Packages maintained by core Console group (`packages/console-xxx`) usually inherit their reviewer/approver
-list from root frontend `OWNERS` file. Packages maintained by other groups (`packages/xxx-plugin`) should
+Packages maintained by core Console team usually inherit their reviewer/approver
+list from root frontend `OWNERS` file. Packages maintained by other teams should
 provide their own list.
 
 ```yaml
@@ -92,15 +81,15 @@ labels:
   - component/sdk
 ```
 
-To add new component label in [Prow CI/CD system](https://github.com/kubernetes/test-infra), open a pull
-request that modifies
-[`core-services/prow/02_config/_labels.yaml`](https://github.com/openshift/release/blob/master/core-services/prow/02_config/_labels.yaml)
-in `openshift/release` repository.
+To add new component label in [Prow CI/CD system], open a pull request that modifies
+[`core-services/prow/02_config/_labels.yaml`] in `openshift/release` repository.
 
 ## Build time constraints and specifics
 
 - From webpack perspective, the list of plugins to be included in the build is immutable.
-- The core application package (`@console/app`) is a static plugin, loaded before any other plugins.
-- Plugin entry modules are loaded during Console startup. To avoid breaking the overall Console UX:
-  - Additional code should be loaded via the `import` function.
-  - Side effects, such as CSS imports, should be avoided if possible.
+- The core application package (`@console/app`) is a static plugin is always loaded first.
+
+[Console Dynamic Plugins README]: /frontend/packages/console-dynamic-plugin-sdk/README.md
+[Prow CI/CD system]: https://github.com/kubernetes/test-infra
+[`consolePlugin` object]: /frontend/packages/console-dynamic-plugin-sdk/src/build-types.ts
+[`core-services/prow/02_config/_labels.yaml`]: https://github.com/openshift/release/blob/master/core-services/prow/02_config/_labels.yaml

frontend/packages/console-plugin-sdk/README.md

@@ -2,7 +2,7 @@ import { useRef, useCallback, useEffect } from 'react';
 import * as _ from 'lodash';
 import { useForceRender } from '@console/shared/src/hooks/useForceRender';
 import { Extension, ExtensionTypeGuard, LoadedExtension } from '../typings';
-import useTranslatedExtensions from '../utils/useTranslatedExtensions';
+import { useTranslatedExtensions } from '../utils/useTranslatedExtensions';
 import { subscribeToExtensions } from './pluginSubscriptionService';
 
 /**