Bug 1873143: fix pipeline details page breadcrumbs in admin perspective

frontend/packages/dev-console/src/components/cluster-tasks/ClusterTaskDetailsPage.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
+import { navFactory, Kebab } from '@console/internal/components/utils';
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { useTasksBreadcrumbsFor } from '../pipelines/hooks';
+
+const ClusterTaskDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match, kind } = props;
+  const breadcrumbsFor = useTasksBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={Kebab.factory.common}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+    />
+  );
+};
+
+export default ClusterTaskDetailsPage;

frontend/packages/dev-console/src/components/pipelineruns/PipelineRunDetailsPage.tsx

@@ -6,15 +6,19 @@ import { getPipelineRunKebabActions } from '../../utils/pipeline-actions';
 import { PipelineRunDetails } from './detail-page-tabs/PipelineRunDetails';
 import { PipelineRunLogsWithActiveTask } from './detail-page-tabs/PipelineRunLogs';
 import { useMenuActionsWithUserLabel } from './triggered-by';
+import { usePipelinesBreadcrumbsFor } from '../pipelines/hooks';
 
 const PipelineRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match } = props;
   const menuActions: KebabAction[] = useMenuActionsWithUserLabel(getPipelineRunKebabActions(true));
+  const breadcrumbsFor = usePipelinesBreadcrumbsFor(kindObj, match);
 
   return (
     <DetailsPage
       {...props}
       menuActions={menuActions}
       getResourceStatus={pipelineRunStatus}
+      breadcrumbsFor={() => breadcrumbsFor}
       pages={[
         navFactory.details(PipelineRunDetails),
         navFactory.editYaml(viewYamlComponent),

frontend/packages/dev-console/src/components/pipelines/ClusterTriggerBindingPage.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
+import { navFactory, Kebab } from '@console/internal/components/utils';
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { useTriggersBreadcrumbsFor } from './hooks';
+
+const ClusterTriggerBindingPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match, kind } = props;
+  const breadcrumbsFor = useTriggersBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={Kebab.factory.common}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+    />
+  );
+};
+
+export default ClusterTriggerBindingPage;

frontend/packages/dev-console/src/components/pipelines/EventListenerPage.tsx

@@ -2,13 +2,19 @@ import * as React from 'react';
 import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
 import { Kebab, navFactory } from '@console/internal/components/utils';
 import EventListenerDetails from './detail-page-tabs/EventListenerDetails';
+import { useTriggersBreadcrumbsFor } from './hooks';
 
-const EventListenerPage: React.FC<DetailsPageProps> = (props) => (
-  <DetailsPage
-    {...props}
-    menuActions={Kebab.factory.common}
-    pages={[navFactory.details(EventListenerDetails), navFactory.editYaml()]}
-  />
-);
+const EventListenerPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match } = props;
+  const breadcrumbsFor = useTriggersBreadcrumbsFor(kindObj, match);
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={() => breadcrumbsFor}
+      menuActions={Kebab.factory.common}
+      pages={[navFactory.details(EventListenerDetails), navFactory.editYaml()]}
+    />
+  );
+};
 
 export default EventListenerPage;

frontend/packages/dev-console/src/components/pipelines/PipelineDetailsPage.tsx

@@ -17,12 +17,14 @@ import {
   resourcesValidationSchema,
 } from './detail-page-tabs';
 import { usePipelineTriggerTemplateNames } from './utils/triggers';
+import { usePipelinesBreadcrumbsFor } from './hooks';
 
 const PipelineDetailsPage: React.FC<DetailsPageProps> = (props) => {
   const [errorCode, setErrorCode] = React.useState(null);
   const [latestPipelineRun, setLatestPipelineRun] = React.useState<PipelineRun>({});
-  const { name, namespace } = props;
+  const { name, namespace, kindObj, match } = props;
   const templateNames = usePipelineTriggerTemplateNames(name, namespace) || [];
+  const breadcrumbsFor = usePipelinesBreadcrumbsFor(kindObj, match);
 
   React.useEffect(() => {
     k8sGet(PipelineModel, name, namespace)
@@ -55,6 +57,7 @@ const PipelineDetailsPage: React.FC<DetailsPageProps> = (props) => {
       {...props}
       menuActions={augmentedMenuActions}
       customData={templateNames}
+      breadcrumbsFor={() => breadcrumbsFor}
       pages={[
         navFactory.details(PipelineDetails),
         navFactory.editYaml(),

frontend/packages/dev-console/src/components/pipelines/TriggerBindingPage.tsx

@@ -2,13 +2,20 @@ import * as React from 'react';
 import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
 import { Kebab, navFactory } from '@console/internal/components/utils';
 import TriggerBindingDetails from './detail-page-tabs/TriggerBindingDetails';
+import { useTriggersBreadcrumbsFor } from './hooks';
 
-const TriggerBindingPage: React.FC<DetailsPageProps> = (props) => (
-  <DetailsPage
-    {...props}
-    menuActions={Kebab.factory.common}
-    pages={[navFactory.details(TriggerBindingDetails), navFactory.editYaml()]}
-  />
-);
+const TriggerBindingPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match } = props;
+  const breadcrumbsFor = useTriggersBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={() => breadcrumbsFor}
+      menuActions={Kebab.factory.common}
+      pages={[navFactory.details(TriggerBindingDetails), navFactory.editYaml()]}
+    />
+  );
+};
 
 export default TriggerBindingPage;

frontend/packages/dev-console/src/components/pipelines/TriggerTemplatePage.tsx

@@ -2,13 +2,20 @@ import * as React from 'react';
 import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
 import { Kebab, navFactory } from '@console/internal/components/utils';
 import TriggerTemplateDetails from './detail-page-tabs/TriggerTemplateDetails';
+import { useTriggersBreadcrumbsFor } from './hooks';
 
-const TriggerTemplatePage: React.FC<DetailsPageProps> = (props) => (
-  <DetailsPage
-    {...props}
-    menuActions={Kebab.factory.common}
-    pages={[navFactory.details(TriggerTemplateDetails), navFactory.editYaml()]}
-  />
-);
+const TriggerTemplatePage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match } = props;
+  const breadcrumbsFor = useTriggersBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={() => breadcrumbsFor}
+      menuActions={Kebab.factory.common}
+      pages={[navFactory.details(TriggerTemplateDetails), navFactory.editYaml()]}
+    />
+  );
+};
 
 export default TriggerTemplatePage;

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/PipelineConditionDetailsPage.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
+import { navFactory, Kebab } from '@console/internal/components/utils';
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { usePipelinesBreadcrumbsFor } from '../hooks';
+
+const PipelineConditionDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match, kind } = props;
+  const breadcrumbsFor = usePipelinesBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={Kebab.factory.common}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+    />
+  );
+};
+
+export default PipelineConditionDetailsPage;

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/PipelineResourceDetailsPage.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
+import { navFactory, Kebab } from '@console/internal/components/utils';
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { usePipelinesBreadcrumbsFor } from '../hooks';
+
+const PipelineResourceDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match, kind } = props;
+  const breadcrumbsFor = usePipelinesBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={Kebab.factory.common}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+    />
+  );
+};
+
+export default PipelineResourceDetailsPage;

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

@@ -0,0 +1,43 @@
+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 { 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');
+
+export const useTasksBreadcrumbsFor = (kindObj: K8sKind, match: Match) =>
+  useTabbedTableBreadcrumbsFor(kindObj, match, 'tasks');
+
+export const useTriggersBreadcrumbsFor = (kindObj: K8sKind, match: Match) =>
+  useTabbedTableBreadcrumbsFor(kindObj, match, 'triggers');

frontend/packages/dev-console/src/components/taskruns/TaskRunDetailsPage.tsx

@@ -2,11 +2,18 @@ import * as React from 'react';
 import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
 import { navFactory, viewYamlComponent } from '@console/internal/components/utils';
 import TaskRunDetails from './TaskRunDetails';
+import { useTasksBreadcrumbsFor } from '../pipelines/hooks';
 
-const TaskRunDetailsPage: React.FC<DetailsPageProps> = (props) => (
-  <DetailsPage
-    {...props}
-    pages={[navFactory.details(TaskRunDetails), navFactory.editYaml(viewYamlComponent)]}
-  />
-);
+const TaskRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match } = props;
+  const breadcrumbsFor = useTasksBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={[navFactory.details(TaskRunDetails), navFactory.editYaml(viewYamlComponent)]}
+    />
+  );
+};
 export default TaskRunDetailsPage;

frontend/packages/dev-console/src/components/tasks/TaskDetailsPage.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
+import { navFactory, Kebab } from '@console/internal/components/utils';
+import { DetailsForKind } from '@console/internal/components/default-resource';
+import { useTasksBreadcrumbsFor } from '../pipelines/hooks';
+
+const TaskDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { kindObj, match, kind } = props;
+  const breadcrumbsFor = useTasksBreadcrumbsFor(kindObj, match);
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={Kebab.factory.common}
+      breadcrumbsFor={() => breadcrumbsFor}
+      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+    />
+  );
+};
+
+export default TaskDetailsPage;

frontend/packages/dev-console/src/components/tasks-lists/TasksListsPage.tsx → frontend/packages/dev-console/src/components/tasks/list-page/TasksListsPage.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { match as Rmatch } from 'react-router-dom';
-import MultiTabListPage from '../multi-tab-list/MultiTabListPage';
+import MultiTabListPage from '../../multi-tab-list/MultiTabListPage';
 import { referenceForModel } from '@console/internal/module/k8s';
-import { TaskModel, ClusterTaskModel, TaskRunModel } from '../../models';
+import { TaskModel, ClusterTaskModel, TaskRunModel } from '../../../models';
 import { Page } from '@console/internal/components/utils';
 import { TechPreviewBadge } from '@console/shared';
 import { DefaultPage } from '@console/internal/components/default-resource';
-import TaskRunsListPage from '../taskruns/list-page/TaskRunsListPage';
-import { MenuActions } from '../multi-tab-list/multi-tab-list-page-types';
+import TaskRunsListPage from '../../taskruns/list-page/TaskRunsListPage';
+import { MenuActions } from '../../multi-tab-list/multi-tab-list-page-types';
 
 interface TasksListsPageProps {
   match: Rmatch<any>;

frontend/packages/dev-console/src/models/pipelines.ts

@@ -105,7 +105,7 @@ export const ConditionModel: K8sKind = {
   id: 'condition',
   labelPlural: 'Conditions',
   crd: true,
-  badge: BadgeType.DEV,
+  badge: BadgeType.TECH,
   color,
 };