adds details page and handles breadcrumb

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

@@ -9,3 +9,4 @@ export * from './select-list';
 export * from './useQueryParams';
 export * from './version';
 export * from './csv-watch-hook';
+export * from './useTabbedTableBreadcrumb';

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

@@ -0,0 +1,37 @@
+import { match as RMatch } from 'react-router-dom';
+import { K8sKind } from '@console/internal/module/k8s';
+// FIXME upgrading redux types is causing many errors at this time
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import { useSelector } from 'react-redux';
+import { getBreadcrumbPath } from '@console/internal/components/utils/breadcrumbs';
+import { RootState } from '@console/internal/redux';
+import { getActivePerspective, getActiveNamespace } from '@console/internal/reducers/ui';
+import { ALL_NAMESPACES_KEY } from '../constants/common';
+
+type Match = RMatch<{ url: string }>;
+
+export const useTabbedTableBreadcrumbsFor = (
+  kindObj: K8sKind,
+  match: Match,
+  navOption: string,
+  subTab: string = null,
+) => {
+  const currentNamespace = useSelector((state: RootState) => getActiveNamespace(state));
+  const isAdminPerspective =
+    useSelector((state: RootState) => getActivePerspective(state)) === 'admin';
+  const nsURL =
+    ALL_NAMESPACES_KEY === currentNamespace ? 'all-namespaces' : `ns/${currentNamespace}`;
+
+  if (subTab == null) {
+    return [];
+  }
+
+  return [
+    {
+      name: kindObj.labelPlural,
+      path: isAdminPerspective ? `/${navOption}/${nsURL}/${subTab}` : getBreadcrumbPath(match),
+    },
+    { name: `${kindObj.label} Details`, path: match.url },
+  ];
+};

frontend/packages/dev-console/src/components/pipelines/hooks.ts

@@ -1,43 +1,15 @@
 import { match as RMatch } from 'react-router-dom';
-// FIXME upgrading redux types is causing many errors at this time
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-import { useSelector } from 'react-redux';
-import { getBreadcrumbPath } from '@console/internal/components/utils/breadcrumbs';
+import { useTabbedTableBreadcrumbsFor } from '@console/shared';
 import { K8sKind } from '@console/internal/module/k8s';
-import { RootState } from '@console/internal/redux';
-import { getActivePerspective, getActiveNamespace } from '@console/internal/reducers/ui';
-import { ALL_NAMESPACES_KEY } from '@console/shared';
 import { pipelinesTab } from '../../utils/pipeline-utils';
 
 type Match = RMatch<{ url: string }>;
 
-const useTabbedTableBreadcrumbsFor = (kindObj: K8sKind, match: Match, navOption: string) => {
-  const currentNamespace = useSelector((state: RootState) => getActiveNamespace(state));
-  const isAdminPerspective =
-    useSelector((state: RootState) => getActivePerspective(state)) === 'admin';
-  const nsURL =
-    ALL_NAMESPACES_KEY === currentNamespace ? 'all-namespaces' : `ns/${currentNamespace}`;
-  const subTab = pipelinesTab(kindObj);
-
-  if (subTab == null) {
-    return [];
-  }
-
-  return [
-    {
-      name: kindObj.labelPlural,
-      path: isAdminPerspective ? `/${navOption}/${nsURL}/${subTab}` : getBreadcrumbPath(match),
-    },
-    { name: `${kindObj.label} Details`, path: match.url },
-  ];
-};
-
 export const usePipelinesBreadcrumbsFor = (kindObj: K8sKind, match: Match) =>
-  useTabbedTableBreadcrumbsFor(kindObj, match, 'pipelines');
+  useTabbedTableBreadcrumbsFor(kindObj, match, 'pipelines', pipelinesTab(kindObj));
 
 export const useTasksBreadcrumbsFor = (kindObj: K8sKind, match: Match) =>
-  useTabbedTableBreadcrumbsFor(kindObj, match, 'tasks');
+  useTabbedTableBreadcrumbsFor(kindObj, match, 'tasks', pipelinesTab(kindObj));
 
 export const useTriggersBreadcrumbsFor = (kindObj: K8sKind, match: Match) =>
-  useTabbedTableBreadcrumbsFor(kindObj, match, 'triggers');
+  useTabbedTableBreadcrumbsFor(kindObj, match, 'triggers', pipelinesTab(kindObj));

frontend/packages/knative-plugin/src/components/revisions/RevisionDetailsPage.tsx

@@ -4,13 +4,23 @@ import { navFactory } from '@console/internal/components/utils';
 import { DetailsForKind } from '@console/internal/components/default-resource';
 import { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
 import { getRevisionActions } from '../../actions/getRevisionActions';
+import { useServingBreadcrumbsFor } from '../services/hooks';
 
-const RevisionsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
+const RevisionDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
+  const { kindObj, match } = props;
+  const breadcrumbsFor = useServingBreadcrumbsFor(kindObj, match);
   const pages = [navFactory.details(DetailsForKind(props.kind)), navFactory.editYaml()];
-  const menuActionsCreator = (kindObj: K8sKind, obj: K8sResourceKind) =>
-    getRevisionActions().map((action) => action(kindObj, obj));
+  const menuActionsCreator = (kindsObj: K8sKind, obj: K8sResourceKind) =>
+    getRevisionActions().map((action) => action(kindsObj, obj));
 
-  return <DetailsPage {...props} pages={pages} menuActions={menuActionsCreator} />;
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={pages}
+      menuActions={menuActionsCreator}
+    />
+  );
 };
 
-export default RevisionsPage;
+export default RevisionDetailsPage;

frontend/packages/knative-plugin/src/components/routes/RouteDetailsPage.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Kebab, navFactory } from '@console/internal/components/utils';
+import { DetailsPage } from '@console/internal/components/factory';
+
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { useServingBreadcrumbsFor } from '../services/hooks';
+import { RouteModel } from '../../models';
+
+const RouteDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
+  const { kindObj, match } = props;
+  const breadcrumbsFor = useServingBreadcrumbsFor(kindObj, match);
+  const pages = [navFactory.details(DetailsForKind(props.kind)), navFactory.editYaml()];
+  const commonActions = Kebab.factory.common.map((action) => action);
+  const menuActionsCreator = [...Kebab.getExtensionsActionsForKind(RouteModel), ...commonActions];
+
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={pages}
+      menuActions={menuActionsCreator}
+    />
+  );
+};
+
+export default RouteDetailsPage;

frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Kebab, navFactory } from '@console/internal/components/utils';
+import { DetailsPage } from '@console/internal/components/factory';
+
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { useServingBreadcrumbsFor } from './hooks';
+import { ServiceModel } from '../../models';
+
+const ServiceDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
+  const { kindObj, match } = props;
+  const breadcrumbsFor = useServingBreadcrumbsFor(kindObj, match);
+  const pages = [navFactory.details(DetailsForKind(props.kind)), navFactory.editYaml()];
+  const commonActions = Kebab.factory.common.map((action) => action);
+  const menuActionsCreator = [...Kebab.getExtensionsActionsForKind(ServiceModel), ...commonActions];
+
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={pages}
+      menuActions={menuActionsCreator}
+    />
+  );
+};
+
+export default ServiceDetailsPage;

frontend/packages/knative-plugin/src/components/services/ServicesPage.tsx

@@ -10,8 +10,8 @@ export interface ServicesPageProps {
 
 const ServicesPage: React.FC<React.ComponentProps<typeof ListPage>> = (props) => (
   <ListPage
+    canCreate
     {...props}
-    canCreate={false}
     kind={referenceForModel(ServiceModel)}
     ListComponent={ServiceList}
   />

frontend/packages/knative-plugin/src/components/services/hooks.ts

@@ -0,0 +1,9 @@
+import { match as RMatch } from 'react-router-dom';
+import { K8sKind } from '@console/internal/module/k8s';
+import { useTabbedTableBreadcrumbsFor } from '@console/shared';
+import { servingTab } from '../../utils/serverless-tab-utils';
+
+type Match = RMatch<{ url: string }>;
+
+export const useServingBreadcrumbsFor = (kindObj: K8sKind, match: Match) =>
+  useTabbedTableBreadcrumbsFor(kindObj, match, 'serving', servingTab(kindObj));

frontend/packages/knative-plugin/src/plugin.tsx

@@ -273,7 +273,31 @@ const plugin: Plugin<ConsumedExtensions> = [
       loader: async () =>
         (
           await import(
-            './components/revisions/RevisionDetailsPage' /* webpackChunkName: "knative-revisions-details page" */
+            './components/revisions/RevisionDetailsPage' /* webpackChunkName: "revision-details-page" */
+          )
+        ).default,
+    },
+  },
+  {
+    type: 'Page/Resource/Details',
+    properties: {
+      model: models.RouteModel,
+      loader: async () =>
+        (
+          await import(
+            './components/routes/RouteDetailsPage' /* webpackChunkName: "route-details-page" */
+          )
+        ).default,
+    },
+  },
+  {
+    type: 'Page/Resource/Details',
+    properties: {
+      model: models.ServiceModel,
+      loader: async () =>
+        (
+          await import(
+            './components/services/ServiceDetailsPage' /* webpackChunkName: "service-details-page" */
           )
         ).default,
     },

frontend/packages/knative-plugin/src/utils/serverless-tab-utils.ts

@@ -0,0 +1,15 @@
+import { K8sKind } from '@console/internal/module/k8s';
+import { RevisionModel, ServiceModel, RouteModel } from '../models';
+
+export const servingTab = (kindObj: K8sKind) => {
+  switch (kindObj.kind) {
+    case ServiceModel.kind:
+      return '';
+    case RevisionModel.kind:
+      return 'revisions';
+    case RouteModel.kind:
+      return 'routes';
+    default:
+      return null;
+  }
+};