OCPBUGS-84214: Fix Shipwright detail pages crashing with React error #310

frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsPage.tsx

@@ -7,12 +7,15 @@ import { referenceFor } from '@console/internal/module/k8s';
 import { ActionServiceProvider } from '@console/shared/src/components/actions/ActionServiceProvider';
 import { ActionMenu } from '@console/shared/src/components/actions/menu/ActionMenu';
 import { ActionMenuVariant } from '@console/shared/src/components/actions/types';
-import { useShipwrightBreadcrumbsFor } from '../../utils';
+import { useBuildModel, useShipwrightBreadcrumbsFor } from '../../utils';
 import BuildDetailsTab from './BuildDetailsTab';
 import BuildEventsTab from './BuildEventsTab';
 import BuildRunsTab from './BuildRunsTab';
 
 const BuildDetailsPage: FC<DetailsPageProps> = (props) => {
+  const model = useBuildModel();
+  const breadcrumbs = useShipwrightBreadcrumbsFor(model);
+
   const customActionMenu = (_, build) => {
     const kindReference = referenceFor(build);
     const context = { [kindReference]: build };
@@ -44,7 +47,7 @@ const BuildDetailsPage: FC<DetailsPageProps> = (props) => {
       {...props}
       customActionMenu={customActionMenu}
       pages={pages}
-      breadcrumbsFor={useShipwrightBreadcrumbsFor}
+      breadcrumbsFor={() => breadcrumbs}
     />
   );
 };

frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx

@@ -7,13 +7,16 @@ import { referenceFor } from '@console/internal/module/k8s';
 import { ActionServiceProvider } from '@console/shared/src/components/actions/ActionServiceProvider';
 import { ActionMenu } from '@console/shared/src/components/actions/menu/ActionMenu';
 import { ActionMenuVariant } from '@console/shared/src/components/actions/types';
-import { useShipwrightBreadcrumbsFor } from '../../utils';
+import { useBuildRunModel, useShipwrightBreadcrumbsFor } from '../../utils';
 import { getBuildRunStatus } from '../buildrun-status/BuildRunStatus';
 import BuildRunDetailsTab from './BuildRunDetailsTab';
 import BuildRunEventsTab from './BuildRunEventsTab';
 import BuildRunLogsTab from './BuildRunLogsTab';
 
 const BuildRunDetailsPage: FC<DetailsPageProps> = (props) => {
+  const model = useBuildRunModel();
+  const breadcrumbs = useShipwrightBreadcrumbsFor(model);
+
   const customActionMenu = (_, buildRun) => {
     const kindReference = referenceFor(buildRun);
     const context = { [kindReference]: buildRun };
@@ -41,7 +44,7 @@ const BuildRunDetailsPage: FC<DetailsPageProps> = (props) => {
       getResourceStatus={getBuildRunStatus}
       customActionMenu={customActionMenu}
       pages={pages}
-      breadcrumbsFor={useShipwrightBreadcrumbsFor}
+      breadcrumbsFor={() => breadcrumbs}
     />
   );
 };

frontend/packages/shipwright-plugin/src/components/buildstrategy-details/BuildStrategyDetailsPage.tsx

@@ -4,12 +4,14 @@ import type { DetailsPageProps } from '@console/internal/components/factory';
 import { DetailsPage } from '@console/internal/components/factory';
 import type { Page } from '@console/internal/components/utils';
 import { navFactory } from '@console/internal/components/utils';
-import { useShipwrightBreadcrumbsFor } from '../../utils';
+import { useBuildStrategyModel, useShipwrightBreadcrumbsFor } from '../../utils';
 
 const BuildStrategyPage: FC<DetailsPageProps> = (props) => {
+  const model = useBuildStrategyModel();
+  const breadcrumbs = useShipwrightBreadcrumbsFor(model);
   const pages: Page[] = [navFactory.details(DetailsForKind), navFactory.editYaml()];
 
-  return <DetailsPage {...props} pages={pages} breadcrumbsFor={useShipwrightBreadcrumbsFor} />;
+  return <DetailsPage {...props} pages={pages} breadcrumbsFor={() => breadcrumbs} />;
 };
 
 export default BuildStrategyPage;

frontend/packages/shipwright-plugin/src/components/clusterbuildstrategy-details/ClusterBuildStrategyDetailsPage.tsx

@@ -4,12 +4,14 @@ import type { DetailsPageProps } from '@console/internal/components/factory';
 import { DetailsPage } from '@console/internal/components/factory';
 import type { Page } from '@console/internal/components/utils';
 import { navFactory } from '@console/internal/components/utils';
-import { useShipwrightBreadcrumbsFor } from '../../utils';
+import { useClusterBuildStrategyModel, useShipwrightBreadcrumbsFor } from '../../utils';
 
 const ClusterBuildStrategyPage: FC<DetailsPageProps> = (props) => {
+  const model = useClusterBuildStrategyModel();
+  const breadcrumbs = useShipwrightBreadcrumbsFor(model);
   const pages: Page[] = [navFactory.details(DetailsForKind), navFactory.editYaml()];
 
-  return <DetailsPage {...props} pages={pages} breadcrumbsFor={useShipwrightBreadcrumbsFor} />;
+  return <DetailsPage {...props} pages={pages} breadcrumbsFor={() => breadcrumbs} />;
 };
 
 export default ClusterBuildStrategyPage;

frontend/packages/shipwright-plugin/src/utils.ts

@@ -194,46 +194,16 @@ const kindToTabMap = {
   [ClusterBuildStrategyModelV1Alpha1.kind]: 'clusterbuildstrategies',
 };
 
-/** convert a resource using a shipwright model to its corresponding k8s model */
-const resourceToModel = (obj: K8sResourceKind): K8sModel => {
-  if (obj?.apiVersion === 'shipwright.io/v1alpha1') {
-    switch (obj?.kind) {
-      case 'Build':
-        return BuildModelV1Alpha1;
-      case 'BuildRun':
-        return BuildRunModelV1Alpha1;
-      case 'BuildStrategy':
-        return BuildStrategyModelV1Alpha1;
-      case 'ClusterBuildStrategy':
-        return ClusterBuildStrategyModelV1Alpha1;
-      default:
-        return null;
-    }
-  }
-  switch (obj?.kind) {
-    case 'Build':
-      return BuildModel;
-    case 'BuildRun':
-      return BuildRunModel;
-    case 'BuildStrategy':
-      return BuildStrategyModel;
-    case 'ClusterBuildStrategy':
-      return ClusterBuildStrategyModel;
-    default:
-      return null;
-  }
-};
-
-export const useShipwrightBreadcrumbsFor = (obj: K8sResourceKind) => {
+export const useShipwrightBreadcrumbsFor = (kindObj: K8sModel) => {
   const isAdminPerspective = useActivePerspective()[0] === 'admin';
   const params = useParams();
   const location = useLocation();
   return useTabbedTableBreadcrumbsFor(
-    resourceToModel(obj),
+    kindObj ?? ({} as K8sModel),
     location,
     params,
     'k8s',
-    `shipwright.io/${kindToTabMap[obj.kind]}`,
+    kindObj ? `shipwright.io/${kindToTabMap[kindObj.kind]}` : null,
     undefined,
     isAdminPerspective,
   );