Improve types/props for Details page extension

frontend/packages/ceph-storage-plugin/src/components/modals/volume-snapshot-modal/volume-snapshot-modal.tsx

@@ -11,7 +11,6 @@ import {
 import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 import {
   K8sResourceKind,
-  K8sResourceKindReference,
   apiVersionForModel,
   k8sCreate,
   k8sPatch,
@@ -278,26 +277,25 @@ export const VolumeSnapshotModal = withHandlePromise((props: VolumeSnapshotModal
 });
 
 type VolumeSnapshotModalWithFireHoseProps = {
-  name: string;
-  namespace: string;
-  kind: K8sResourceKindReference;
-  pvcData?: FirehoseResourcesResult;
-  resource?: K8sResourceKind;
+  resource: K8sResourceKind;
 } & ModalComponentProps;
 
-const VolumeSnapshotModalWithFireHose: React.FC<VolumeSnapshotModalWithFireHoseProps> = (props) => (
+const VolumeSnapshotModalWithFireHose: React.FC<VolumeSnapshotModalWithFireHoseProps> = ({
+  resource,
+  ...rest
+}) => (
   <Firehose
     resources={[
       {
-        kind: props.kind || PersistentVolumeClaimModel.kind,
+        kind: resource?.kind || PersistentVolumeClaimModel.kind,
         prop: 'pvcData',
-        namespace: props?.resource?.metadata?.namespace || props.namespace,
+        namespace: resource?.metadata?.namespace,
         isList: false,
-        name: props?.resource?.metadata?.name || props.name,
+        name: resource?.metadata?.name,
       },
     ]}
   >
-    <VolumeSnapshotModal {...props} />
+    <VolumeSnapshotModal {...rest} />
   </Firehose>
 );
 

frontend/packages/ceph-storage-plugin/src/components/volume-snapshot/volume-snapshot.tsx

@@ -20,6 +20,7 @@ import {
   ResourceSummary,
   SectionHeading,
   navFactory,
+  PageComponentProps,
 } from '@console/internal/components/utils';
 import { getName, getNamespace } from '@console/shared';
 
@@ -172,13 +173,13 @@ export const VolumeSnapshotList: React.FC<TableProps> = (props) => (
   />
 );
 
-export const VolumeSnapshotPage = (props) => (
+export const VolumeSnapshotPage: React.FC<PageComponentProps> = ({ obj }) => (
   <ListPage
     canCreate
     kind={volumeSnapshotKind}
     ListComponent={VolumeSnapshotList}
     showTitle={false}
-    namespace={props.namespace}
-    createHandler={() => volumeSnapshotModal({ ...props })}
+    namespace={obj.metadata.namespace}
+    createHandler={() => volumeSnapshotModal({ resource: obj })}
   />
 );

frontend/packages/ceph-storage-plugin/src/utils/snapshot-workflow.ts

@@ -6,15 +6,10 @@ export const SnapshotPVC = (kind: K8sKind, resource: K8sResourceKind): KebabOpti
   return {
     label: 'Create Snapshot',
     callback: () => {
-      const clusterObject = {
-        name: resource.metadata.name,
-        namespace: resource.metadata.namespace,
-        kind: kind.kind,
-      };
       import(
         '../components/modals/volume-snapshot-modal/volume-snapshot-modal' /* webpackChunkName: "ceph-storage-volume-snapshot-modal" */
       )
-        .then((m) => m.volumeSnapshotModal(clusterObject))
+        .then((m) => m.volumeSnapshotModal({ resource }))
         // eslint-disable-next-line no-console
         .catch((e) => console.error(e));
     },

frontend/packages/console-plugin-sdk/src/typings/pages.ts

@@ -1,6 +1,12 @@
 import { RouteComponentProps, RouteProps } from 'react-router-dom';
-import { K8sKind, K8sResourceKindReference, K8sResourceKind } from '@console/internal/module/k8s';
+import {
+  K8sKind,
+  K8sResourceKindReference,
+  K8sResourceKind,
+  K8sResourceCommon,
+} from '@console/internal/module/k8s';
 import { Extension, LazyLoader } from './base';
+import { PageComponentProps } from '@console/internal/components/utils';
 
 namespace ExtensionProperties {
   export interface ResourcePage<T> {
@@ -11,16 +17,7 @@ namespace ExtensionProperties {
   }
 
   /** To add an additonal page to public components(ex: PVs, PVCs) via plugins */
-  export type ResourceTabPage = ResourcePage<{
-    /** See https://reacttraining.com/react-router/web/api/match */
-    match: RouteComponentProps['match'];
-    /** The resource kind scope. */
-    kind: K8sResourceKindReference;
-    /** The namespace scope. */
-    namespace: string;
-    /** Name of the resource tab inside detailsPage  */
-    name: string;
-  }> & {
+  export type ResourceTabPage<R extends K8sResourceCommon> = ResourcePage<PageComponentProps<R>> & {
     /** The href for the resource page */
     href: string;
     /** Name of the resource tab inside detailsPage  */
@@ -83,7 +80,8 @@ export interface RoutePage extends Extension<ExtensionProperties.RoutePage> {
   type: 'Page/Route';
 }
 
-export interface ResourceTabPage extends Extension<ExtensionProperties.ResourceTabPage> {
+export interface ResourceTabPage<R extends K8sResourceCommon = K8sResourceCommon>
+  extends Extension<ExtensionProperties.ResourceTabPage<R>> {
   type: 'Page/Resource/Tab';
 }
 

frontend/public/components/factory/details.tsx

@@ -12,6 +12,7 @@ import {
   KebabOptionsCreator,
   Page,
   AsyncComponent,
+  PageComponentProps,
 } from '../utils';
 import {
   K8sResourceKindReference,
@@ -26,14 +27,8 @@ import { breadcrumbsForDetailsPage } from '../utils/breadcrumbs';
 export const DetailsPage = withFallback<DetailsPageProps>(({ pages = [], ...props }) => {
   const resourceKeys = _.map(props.resources, 'prop');
 
-  const renderAsyncComponent = (page: ResourceTabPage, pageProps: DetailsPageProps) => (
-    <AsyncComponent
-      loader={page.properties.loader}
-      namespace={pageProps.namespace}
-      name={pageProps.name}
-      kind={pageProps.kind}
-      match={pageProps.match}
-    />
+  const renderAsyncComponent = (page: ResourceTabPage, cProps: PageComponentProps) => (
+    <AsyncComponent loader={page.properties.loader} {...cProps} />
   );
 
   const resourcePageExtensions = useExtensions<ResourceTabPage>(isResourceTabPage);
@@ -49,7 +44,7 @@ export const DetailsPage = withFallback<DetailsPageProps>(({ pages = [], ...prop
         .map((p) => ({
           href: p.properties.href,
           name: p.properties.name,
-          component: () => renderAsyncComponent(p, props),
+          component: (cProps) => renderAsyncComponent(p, cProps),
         })),
     [resourcePageExtensions, props],
   );

frontend/public/components/utils/horizontal-nav.tsx

@@ -7,7 +7,7 @@ import { Route, Switch, Link, withRouter, match, matchPath } from 'react-router-
 import { EmptyBox, StatusBox } from '.';
 import { PodsPage } from '../pod';
 import { AsyncComponent } from './async';
-import { K8sResourceKind } from '../../module/k8s';
+import { K8sResourceKind, K8sResourceCommon } from '../../module/k8s';
 import { referenceForModel, referenceFor } from '../../module/k8s/k8s';
 import { useExtensions, HorizontalNavTab, isHorizontalNavTab } from '@console/plugin-sdk';
 
@@ -275,11 +275,11 @@ export type HorizontalNavProps = {
   customData?: any;
 };
 
-export type PageComponentProps = {
+export type PageComponentProps<R extends K8sResourceCommon = K8sResourceKind> = {
   filters?: any;
   selected?: any;
   match?: any;
-  obj?: K8sResourceKind;
+  obj?: R;
   params?: any;
   customData?: any;
   showTitle?: boolean;