Bug 2080260: Update OLM pages to use details and list page extensions…

… for operands when they exist

- Update the CSV details page to load and render list and details page extensions for the operands it manages
- Remove container security route extensions that collide with olm create operand routes

frontend/packages/console-shared/src/hooks/useResourceDetailsPage.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { useResourceDetailsPages } from './useResourceDetailsPages';
+
+export const useResourceDetailsPage = (key: string) => {
+ const detailsPages = useResourceDetailsPages();
+ return React.useMemo(() => detailsPages.get(key), [detailsPages, key]);
+};

frontend/packages/console-shared/src/hooks/useResourceDetailsPages.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {
+ ResourceDetailsPage as DynamicResourceDetailsPage,
+ isResourceDetailsPage as isDynamicResourceDetailsPage,
+} from '@console/dynamic-plugin-sdk/src';
+import { getResourceDetailsPages } from '@console/internal/components/resource-pages';
+import { isResourceDetailsPage, ResourceDetailsPage, useExtensions } from '@console/plugin-sdk/src';
+
+export const useResourceDetailsPages = () => {
+ const resourceDetailsPageExtensions = useExtensions<ResourceDetailsPage>(isResourceDetailsPage);
+ const dynamicResourceDetailsPageExtensions = useExtensions<DynamicResourceDetailsPage>(
+ isDynamicResourceDetailsPage,
+ );
+ return React.useMemo(
+ () =>
+ getResourceDetailsPages(resourceDetailsPageExtensions, dynamicResourceDetailsPageExtensions),
+ [resourceDetailsPageExtensions, dynamicResourceDetailsPageExtensions],
+ );
+};

frontend/packages/console-shared/src/hooks/useResourceListPage.ts

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+import { useResourceListPages } from './useResourceListPages';
+
+export const useResourceListPage = (key: string) => {
+ const listPages = useResourceListPages();
+ return useMemo(() => listPages.get(key), [listPages, key]);
+};

frontend/packages/console-shared/src/hooks/useResourceListPages.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {
+ ResourceListPage as DynamicResourceListPage,
+ isResourceListPage as isDynamicResourceListPage,
+} from '@console/dynamic-plugin-sdk/src';
+import { getResourceListPages } from '@console/internal/components/resource-pages';
+import { isResourceListPage, ResourceListPage, useExtensions } from '@console/plugin-sdk/src';
+
+export const useResourceListPages = () => {
+ const resourceListPageExtensions = useExtensions<ResourceListPage>(isResourceListPage);
+ const dynamicResourceListPageExtensions = useExtensions<DynamicResourceListPage>(
+ isDynamicResourceListPage,
+ );
+ return React.useMemo(
+ () => getResourceListPages(resourceListPageExtensions, dynamicResourceListPageExtensions),
+ [resourceListPageExtensions, dynamicResourceListPageExtensions],
+ );
+};

frontend/packages/container-security/src/plugin.ts

@@ -1,5 +1,4 @@
 import { referenceForModel } from '@console/internal/module/k8s';
-import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager';
 import {
  Plugin,
  ModelDefinition,
@@ -62,32 +61,6 @@ const plugin: Plugin<ConsumedExtensions> = [
  ).then((m) => m.ImageManifestVulnDetailsPage),
  },
  },
- {
- type: 'Page/Route',
- properties: {
- exact: false,
- path: `/k8s/ns/:ns/${ClusterServiceVersionModel.plural}/:appName/${referenceForModel(
- ImageManifestVulnModel,
- )}/:name`,
- loader: () =>
- import(
- './components/image-manifest-vuln' /* webpackChunkName: "container-security" */
- ).then((m) => m.ImageManifestVulnDetailsPage),
- },
- },
- {
- type: 'Page/Route',
- properties: {
- exact: false,
- path: `/k8s/ns/:ns/${referenceForModel(
- ClusterServiceVersionModel,
- )}/:appName/${referenceForModel(ImageManifestVulnModel)}/:name`,
- loader: () =>
- import(
- './components/image-manifest-vuln' /* webpackChunkName: "container-security" */
- ).then((m) => m.ImageManifestVulnDetailsPage),
- },
- },
  {
  type: 'Dashboards/Overview/Health/Resource',
  properties: {

frontend/packages/dev-console/src/components/builds/BuildsTabListPage.tsx

@@ -2,34 +2,18 @@ import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import { useTranslation, Trans } from 'react-i18next';
 import { match as Rmatch } from 'react-router-dom';
-import {
- ResourceListPage as DynamicResourceListPage,
- isResourceListPage as isDynamicResourceListPage,
-} from '@console/dynamic-plugin-sdk';
-import { getResourceListPages } from '@console/internal/components/resource-pages';
 import { withStartGuide } from '@console/internal/components/start-guide';
 import { Page, AsyncComponent } from '@console/internal/components/utils';
-import { useExtensions, isResourceListPage, ResourceListPage } from '@console/plugin-sdk';
 import { useFlag, MenuActions, MultiTabListPage, getBadgeFromType } from '@console/shared';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
+import { useResourceListPages } from '@console/shared/src/hooks/useResourceListPages';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage from '../projects/CreateProjectListPage';
 
 interface BuildsTabListPageProps {
  match: Rmatch<{ ns?: string }>;
 }
 
-const useResourceListPages = () => {
- const resourceListPageExtensions = useExtensions<ResourceListPage>(isResourceListPage);
- const dynamicResourceListPageExtensions = useExtensions<DynamicResourceListPage>(
- isDynamicResourceListPage,
- );
- return React.useMemo(
- () => getResourceListPages(resourceListPageExtensions, dynamicResourceListPageExtensions),
- [resourceListPageExtensions, dynamicResourceListPageExtensions],
- );
-};
-
 /**
  * We might add a generic extension for multi tab list pages in the future.
  * Currently we just check if some well known build (BuildConfigs and Shipwright Builds)

frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useDispatch } from 'react-redux';
 import { useHistory, match } from 'react-router-dom';
-import { ListPageBody } from '@console/dynamic-plugin-sdk';
+import { ListPageBody, K8sModel } from '@console/dynamic-plugin-sdk';
 import { getResources } from '@console/internal/actions/k8s';
 import { Conditions } from '@console/internal/components/conditions';
 import { ErrorPage404 } from '@console/internal/components/error';
@@ -40,6 +40,7 @@ import {
  Timestamp,
  navFactory,
  ResourceLink,
+ AsyncComponent,
 } from '@console/internal/components/utils';
 import {
  useK8sWatchResources,
@@ -73,6 +74,8 @@ import { Status, SuccessStatus } from '@console/shared';
 import ErrorAlert from '@console/shared/src/components/alerts/error';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
 import { useK8sModels } from '@console/shared/src/hooks/useK8sModels';
+import { useResourceDetailsPage } from '@console/shared/src/hooks/useResourceDetailsPage';
+import { useResourceListPage } from '@console/shared/src/hooks/useResourceListPage';
 import { ClusterServiceVersionModel } from '../../models';
 import { ClusterServiceVersionKind, ProvidedAPI } from '../../types';
 import { DescriptorDetailsItem, DescriptorDetailsItemList } from '../descriptors';
@@ -552,7 +555,7 @@ export const ProvidedAPIsPage = (props: ProvidedAPIsPageProps) => {
  );
 };
 
-export const ProvidedAPIPage: React.FC<ProvidedAPIPageProps> = (props) => {
+const DefaultProvidedAPIPage: React.FC<ProvidedAPIPageProps> = (props) => {
  const { t } = useTranslation();
  const [showOperandsInAllNamespaces] = useShowOperandsInAllNamespaces();
 
@@ -627,6 +630,14 @@ export const ProvidedAPIPage: React.FC<ProvidedAPIPageProps> = (props) => {
  );
 };
 
+export const ProvidedAPIPage = (props: ProvidedAPIPageProps) => {
+ const resourceListPage = useResourceListPage(props.kind);
+ if (resourceListPage) {
+ return <AsyncComponent {...props} loader={resourceListPage} />;
+ }
+ return <DefaultProvidedAPIPage {...props} />;
+};
+
 const OperandDetailsSection: React.FC = ({ children }) => (
  <div className="co-operand-details__section co-operand-details__section--info">{children}</div>
 );
@@ -784,7 +795,7 @@ const ResourcesTab = (resourceProps) => (
  <Resources {...resourceProps} clusterServiceVersion={resourceProps.csv} />
 );
 
-export const OperandDetailsPage = (props: OperandDetailsPageProps) => {
+const DefaultOperandDetailsPage = (props: OperandDetailsPageProps) => {
  const { t } = useTranslation();
  const [model] = useK8sModel(props.match.params.plural);
  const actionExtensions = useExtensions<ClusterServiceVersionAction>(
@@ -850,6 +861,14 @@ export const OperandDetailsPage = (props: OperandDetailsPageProps) => {
  );
 };
 
+export const OperandDetailsPage = (props: OperandDetailsPageProps) => {
+ const resourceDetailsPage = useResourceDetailsPage(props.match.params.plural);
+ if (resourceDetailsPage) {
+ return <AsyncComponent {...props} loader={resourceDetailsPage} />;
+ }
+ return <DefaultOperandDetailsPage {...props} />;
+};
+
 type OperandStatusType = {
  type: string;
  value: string;
@@ -898,6 +917,10 @@ export type ProvidedAPIPageProps = {
  hideLabelFilter?: boolean;
  hideNameLabelFilters?: boolean;
  hideColumnManagement?: boolean;
+ match?: match<{
+ ns: string;
+ plural: string;
+ }>;
 };
 
 type PodStatusesProps = {
@@ -924,6 +947,8 @@ export type OperandDetailsPageProps = {
  }>;
 };
 
+type DefaultOperandDetailsPage = OperandDetailsPageProps & { model: K8sModel };
+
 export type OperandesourceDetailsProps = {
  csv?: { data: ClusterServiceVersionKind };
  gvk: GroupVersionKind;
@@ -958,6 +983,9 @@ type GetK8sWatchResources = {
 OperandList.displayName = 'OperandList';
 OperandDetails.displayName = 'OperandDetails';
 ProvidedAPIsPage.displayName = 'ProvidedAPIsPage';
+DefaultProvidedAPIPage.displayName = 'DefaultProvidedAPIPage';
+ProvidedAPIPage.displayName = 'ProvidedAPIPage';
+DefaultOperandDetailsPage.displayName = 'DefaultOperandDetailsPage';
 OperandDetailsPage.displayName = 'OperandDetailsPage';
 OperandTableRow.displayName = 'OperandTableRow';
 OperandDetailsSection.displayName = 'OperandDetailsSection';

frontend/public/components/resource-list.tsx

@@ -83,7 +83,7 @@ export const ResourceListPage = connectToPlural(
 
 export const ResourceDetailsPage = connectToPlural((props: ResourceDetailsPageProps) => {
  const detailsPageExtensions = useExtensions<ResourceDetailsPageExt>(isResourceDetailsPage);
- const dynamicResourceListPageExtensions = useExtensions<DynamicResourceDetailsPage>(
+ const dynamicResourceDetailsPageExtensions = useExtensions<DynamicResourceDetailsPage>(
  isDynamicResourceDetailsPage,
  );
  const { name, ns, kindObj, kindsInFlight } = allParams(props);
@@ -101,8 +101,8 @@ export const ResourceDetailsPage = connectToPlural((props: ResourceDetailsPagePr
  ? referenceForModel(kindObj)
  : null;
  const componentLoader =
- getResourceDetailsPages(detailsPageExtensions, dynamicResourceListPageExtensions).get(ref) ||
- getResourceDetailsPages(detailsPageExtensions, dynamicResourceListPageExtensions).get(
+ getResourceDetailsPages(detailsPageExtensions, dynamicResourceDetailsPageExtensions).get(ref) ||
+ getResourceDetailsPages(detailsPageExtensions, dynamicResourceDetailsPageExtensions).get(
  referenceForExtensionModel({
  group: kindObj.apiGroup,
  kind: kindObj.kind,