[release-4.8] Bug 1985193: Add create resource extension

frontend/packages/ceph-storage-plugin/src/components/block-pool/create-block-pool.tsx

@@ -103,22 +103,21 @@ const CreateBlockPool: React.FC<CreateBlockPoolProps> = ({ match }) => {
 
   return (
     <>
+      <div className="co-create-operand__breadcrumbs">
+        <BreadCrumbs
+          breadcrumbs={[
+            {
+              name: 'Openshift Container Storage',
+              path: url.replace('/~new', ''),
+            },
+            {
+              name: t('ceph-storage-plugin~Create BlockPool'),
+              path: url,
+            },
+          ]}
+        />
+      </div>
       <div className="co-create-operand__header">
-        <div className="co-create-operand__header-buttons">
-          <BreadCrumbs
-            breadcrumbs={[
-              {
-                name: 'Openshift Container Storage',
-                path: url.replace('/~new', ''),
-              },
-              {
-                name: t('ceph-storage-plugin~Create BlockPool'),
-                path: url,
-              },
-            ]}
-          />
-        </div>
-
         <h1 className="co-create-operand__header-text">
           {t('ceph-storage-plugin~Create BlockPool')}
         </h1>

frontend/packages/ceph-storage-plugin/src/components/bucket-class/create-bc.tsx

@@ -248,25 +248,25 @@ const CreateBucketClass: React.FC<CreateBCProps> = ({ match }) => {
 
   return (
     <>
+      <div className="co-create-operand__breadcrumbs">
+        <BreadCrumbs
+          breadcrumbs={[
+            {
+              name: _.get(
+                clusterServiceVersion,
+                'spec.displayName',
+                'Openshift Container Storage Operator',
+              ),
+              path: resourcePathFromModel(ClusterServiceVersionModel, appName, ns),
+            },
+            {
+              name: t('ceph-storage-plugin~Create BucketClass'),
+              path: match.url,
+            },
+          ]}
+        />
+      </div>
       <div className="co-create-operand__header">
-        <div className="co-create-operand__header-buttons">
-          <BreadCrumbs
-            breadcrumbs={[
-              {
-                name: _.get(
-                  clusterServiceVersion,
-                  'spec.displayName',
-                  'Openshift Container Storage Operator',
-                ),
-                path: resourcePathFromModel(ClusterServiceVersionModel, appName, ns),
-              },
-              {
-                name: t('ceph-storage-plugin~Create BucketClass'),
-                path: match.url,
-              },
-            ]}
-          />
-        </div>
         <div className="nb-create-bc-header-title">
           <Title size="2xl" headingLevel="h1" className="nb-create-bc-header-title__main">
             {t('ceph-storage-plugin~Create new BucketClass')}

frontend/packages/ceph-storage-plugin/src/components/create-backingstore-page/create-bs-page.tsx

@@ -19,18 +19,18 @@ const CreateBackingStoreFormPage: React.FC<CreateBackingStoreFormPageProps> = ({
 
   return (
     <>
+      <div className="co-create-operand__breadcrumbs">
+        <BreadCrumbs
+          breadcrumbs={[
+            {
+              name: 'Openshift Container Storage',
+              path: resourcePathFromModel(ClusterServiceVersionModel, appName, ns),
+            },
+            { name: t('ceph-storage-plugin~Create BackingStore '), path: match.url },
+          ]}
+        />
+      </div>
       <div className="co-create-operand__header">
-        <div className="co-create-operand__header-buttons">
-          <BreadCrumbs
-            breadcrumbs={[
-              {
-                name: 'Openshift Container Storage',
-                path: resourcePathFromModel(ClusterServiceVersionModel, appName, ns),
-              },
-              { name: t('ceph-storage-plugin~Create BackingStore '), path: match.url },
-            ]}
-          />
-        </div>
         <div className="nb-endpoints-page-title">
           <Title size="2xl" headingLevel="h1" className="nb-endpoints-page-title__main">
             {t('ceph-storage-plugin~Create new BackingStore ')}

frontend/packages/ceph-storage-plugin/src/components/namespace-store/create-namespace-store.tsx

@@ -18,18 +18,18 @@ const CreateNamespaceStore: React.FC<CreateNamespaceStoreProps> = ({ match }) =>
 
   return (
     <>
+      <div className="co-create-operand__breadcrumbs">
+        <BreadCrumbs
+          breadcrumbs={[
+            {
+              name: 'Openshift Container Storage',
+              path: resourcePathFromModel(ClusterServiceVersionModel, appName, ns),
+            },
+            { name: t('ceph-storage-plugin~Create NamespaceStore '), path: match.url },
+          ]}
+        />
+      </div>
       <div className="co-create-operand__header">
-        <div className="co-create-operand__header-buttons">
-          <BreadCrumbs
-            breadcrumbs={[
-              {
-                name: 'Openshift Container Storage',
-                path: resourcePathFromModel(ClusterServiceVersionModel, appName, ns),
-              },
-              { name: t('ceph-storage-plugin~Create NamespaceStore '), path: match.url },
-            ]}
-          />
-        </div>
         <div className="nb-endpoints-page-title">
           <Title size="2xl" headingLevel="h1" className="nb-endpoints-page-title__main">
             {t('ceph-storage-plugin~Create NamespaceStore ')}

frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-page.tsx

@@ -136,23 +136,23 @@ const InstallCluster: React.FC<InstallClusterProps> = ({ match }) => {
 
   return (
     <>
+      <div className="co-create-operand__breadcrumbs">
+        {clusterServiceVersion !== null && (
+          <BreadCrumbs
+            breadcrumbs={[
+              {
+                name: clusterServiceVersion.spec.displayName,
+                path: url.replace('/~new', ''),
+              },
+              {
+                name: t('ceph-storage-plugin~Create StorageCluster'),
+                path: url,
+              },
+            ]}
+          />
+        )}
+      </div>
       <div className="co-create-operand__header">
-        <div className="co-create-operand__header-buttons">
-          {clusterServiceVersion !== null && (
-            <BreadCrumbs
-              breadcrumbs={[
-                {
-                  name: clusterServiceVersion.spec.displayName,
-                  path: url.replace('/~new', ''),
-                },
-                {
-                  name: t('ceph-storage-plugin~Create StorageCluster'),
-                  path: url,
-                },
-              ]}
-            />
-          )}
-        </div>
         <h1 className="co-create-operand__header-text">
           {t('ceph-storage-plugin~Create StorageCluster')}
         </h1>

frontend/packages/console-dynamic-plugin-sdk/src/extensions/create-resource.ts

@@ -0,0 +1,17 @@
+import { ExtensionK8sModel } from '../api/common-types';
+import { CodeRef, Extension, ExtensionDeclaration } from '../types';
+
+export type CreateResource = ExtensionDeclaration<
+  'console.resource/create',
+  {
+    /** The model for which this create resource page will be rendered. */
+    model: ExtensionK8sModel;
+    /** The component to be rendered when the model matches */
+    component: CodeRef<React.ComponentType<{ namespace?: string }>>;
+  }
+>;
+
+// Type guards
+
+export const isCreateResource = (e: Extension): e is CreateResource =>
+  e.type === 'console.resource/create';

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

@@ -18,3 +18,4 @@ export * from './storage-provider';
 export * from './actions';
 export * from './topology-details';
 export * from './topology';
+export * from './create-resource';

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

@@ -1,32 +1,9 @@
-import { FeatureFlag, ModelFeatureFlag } from '../extensions/feature-flags';
-import { ReduxReducer } from '../extensions/redux';
-import { ContextProvider } from '../extensions/context-providers';
-import {
-  StandaloneRoutePage,
-  RoutePage,
-  ResourceDetailsPage,
-  ResourceListPage,
-  ResourceTabPage,
-} from '../extensions/pages';
-import { YAMLTemplate } from '../extensions/yaml-templates';
+import { SupportedActionExtensions } from '../extensions/actions';
 import { AddAction, AddActionGroup } from '../extensions/add-actions';
-import { ClusterGlobalConfig } from '../extensions/cluster-settings';
-import {
-  HrefNavItem,
-  ResourceNSNavItem,
-  ResourceClusterNavItem,
-  Separator,
-  NavSection,
-} from '../extensions/navigation';
 import { SupportedCatalogExtensions } from '../extensions/catalog';
-import { FileUpload } from '../extensions/file-upload';
-import { ModelMetadata } from '../extensions/resource-metadata';
-import { AlertAction } from '../extensions/notification-alert';
-import { PVCCreateProp, PVCStatus, PVCAlert, PVCDelete } from '../extensions/pvc';
-import { StorageProvider } from '../extensions/storage-provider';
-import { TelemetryListener } from '../extensions/telemetry';
-import { SupportedActionExtensions } from '../extensions/actions';
-import { SupportedTopologyDetailsExtensions } from '../extensions/topology-details';
+import { ClusterGlobalConfig } from '../extensions/cluster-settings';
+import { ContextProvider } from '../extensions/context-providers';
+import { CreateResource } from '../extensions/create-resource';
 import {
   DashboardsTab,
   DashboardsCard,
@@ -38,13 +15,37 @@ import {
   DashboardsOverviewInventoryItem,
   DashboardsOverviewResourceActivity,
 } from '../extensions/dashboards';
+import { FeatureFlag, ModelFeatureFlag } from '../extensions/feature-flags';
+import { FileUpload } from '../extensions/file-upload';
+import {
+  HrefNavItem,
+  ResourceNSNavItem,
+  ResourceClusterNavItem,
+  Separator,
+  NavSection,
+} from '../extensions/navigation';
+import { AlertAction } from '../extensions/notification-alert';
+import {
+  StandaloneRoutePage,
+  RoutePage,
+  ResourceDetailsPage,
+  ResourceListPage,
+  ResourceTabPage,
+} from '../extensions/pages';
+import { PVCCreateProp, PVCStatus, PVCAlert, PVCDelete } from '../extensions/pvc';
+import { ReduxReducer } from '../extensions/redux';
+import { ModelMetadata } from '../extensions/resource-metadata';
+import { StorageProvider } from '../extensions/storage-provider';
+import { TelemetryListener } from '../extensions/telemetry';
 import {
   TopologyComponentFactory,
   TopologyCreateConnector,
   TopologyDataModelFactory,
   TopologyDecoratorProvider,
   TopologyDisplayFilters,
 } from '../extensions/topology';
+import { SupportedTopologyDetailsExtensions } from '../extensions/topology-details';
+import { YAMLTemplate } from '../extensions/yaml-templates';
 
 export type SupportedExtension =
   | FeatureFlag
@@ -90,7 +91,8 @@ export type SupportedExtension =
   | TopologyCreateConnector
   | TopologyDataModelFactory
   | TopologyDisplayFilters
-  | TopologyDecoratorProvider;
+  | TopologyDecoratorProvider
+  | CreateResource;
 
 /**
  * Schema of Console plugin's `console-extensions.json` file.

frontend/packages/console-shared/src/hooks/create-resource-hook.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { isCreateResource, CreateResource, GroupVersionKind } from '@console/dynamic-plugin-sdk';
+import { referenceForExtensionModel } from '@console/internal/module/k8s';
+import { Extension, LoadedExtension, useExtensions } from '@console/plugin-sdk';
+
+export const useCreateResourceExtension = (
+  modelReference: GroupVersionKind,
+): LoadedExtension<CreateResource> => {
+  const createResourceTypeGuard = React.useCallback(
+    (e: Extension): e is CreateResource =>
+      isCreateResource(e) && referenceForExtensionModel(e.properties.model) === modelReference,
+    [modelReference],
+  );
+  const [extensionPage] = useExtensions<CreateResource>(createResourceTypeGuard);
+  return extensionPage;
+};

frontend/packages/local-storage-operator-plugin/src/components/local-volume-discovery/create-local-volume-discovery.tsx

@@ -78,18 +78,18 @@ export const CreateLocalVolumeDiscovery: React.FC<CreateLocalVolumeDiscoveryProp
 
   return (
     <>
+      <div className="co-create-operand__breadcrumbs">
+        <BreadCrumbs
+          breadcrumbs={[
+            {
+              name: t('lso-plugin~Local Storage'),
+              path: resourcePath,
+            },
+            { name: t('lso-plugin~Create Local Volume Discovery'), path: '' },
+          ]}
+        />
+      </div>
       <div className="co-create-operand__header">
-        <div className="co-create-operand__header-buttons">
-          <BreadCrumbs
-            breadcrumbs={[
-              {
-                name: t('lso-plugin~Local Storage'),
-                path: resourcePath,
-              },
-              { name: t('lso-plugin~Create Local Volume Discovery'), path: '' },
-            ]}
-          />
-        </div>
         <LocalVolumeDiscoveryHeader variant={TextVariants.h1} />
       </div>
       <Form

frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/create-local-volume-set.tsx

@@ -62,18 +62,18 @@ const CreateLocalVolumeSet: React.FC<CreateLocalVolumeSetProps> = ({ match }) =>
 
   return (
     <>
+      <div className="co-create-operand__breadcrumbs">
+        <BreadCrumbs
+          breadcrumbs={[
+            {
+              name: t('lso-plugin~Local Storage'),
+              path: resourcePath,
+            },
+            { name: t('lso-plugin~Create Local Volume Set'), path: '' },
+          ]}
+        />
+      </div>
       <div className="co-create-operand__header">
-        <div className="co-create-operand__header-buttons">
-          <BreadCrumbs
-            breadcrumbs={[
-              {
-                name: t('lso-plugin~Local Storage'),
-                path: resourcePath,
-              },
-              { name: t('lso-plugin~Create Local Volume Set'), path: '' },
-            ]}
-          />
-        </div>
         <LocalVolumeSetHeader variant={TextVariants.h1} />
       </div>
       <Form