fix pipeline details page breadcrumbs in admin perspective

openshift · Aug 4, 2020 · 6e07d11 · 6e07d11
1 parent 3baa5e3
commit 6e07d11
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 2 deletions.
diff --git a/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunDetailsPage.tsx b/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunDetailsPage.tsx
@@ -1,20 +1,39 @@
 import * as React from 'react';
+// 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 { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
 import { KebabAction, navFactory, viewYamlComponent } from '@console/internal/components/utils';
+import { getBreadcrumbPath } from '@console/internal/components/utils/breadcrumbs';
+import { RootState } from '@console/internal/redux';
+import { getActivePerspective } from '@console/internal/reducers/ui';
 import { pipelineRunStatus } from '../../utils/pipeline-filter-reducer';
 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';
 
 const PipelineRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { namespace, kindObj, match } = props;
   const menuActions: KebabAction[] = useMenuActionsWithUserLabel(getPipelineRunKebabActions(true));
+  const activePerspective = useSelector((state: RootState) => getActivePerspective(state));
 
   return (
     <DetailsPage
       {...props}
       menuActions={menuActions}
       getResourceStatus={pipelineRunStatus}
+      breadcrumbsFor={() => [
+        {
+          name: kindObj.labelPlural,
+          path:
+            activePerspective === 'admin'
+              ? `/pipelines/ns/${namespace}/pipeline-runs`
+              : getBreadcrumbPath(match),
+        },
+        { name: `${kindObj.label} Details`, path: `${match.url}` },
+      ]}
       pages={[
         navFactory.details(PipelineRunDetails),
         navFactory.editYaml(viewYamlComponent),

diff --git a/frontend/packages/dev-console/src/components/pipelines/PipelineDetailsPage.tsx b/frontend/packages/dev-console/src/components/pipelines/PipelineDetailsPage.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
+// 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 { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
 import { KebabAction, navFactory } from '@console/internal/components/utils';
 import { k8sGet, k8sList } from '@console/internal/module/k8s';
 import { ErrorPage404 } from '@console/internal/components/error';
+import { RootState } from '@console/internal/redux';
+import { getActivePerspective } from '@console/internal/reducers/ui';
 import { getPipelineKebabActions } from '../../utils/pipeline-actions';
 import { getLatestRun, PipelineRun } from '../../utils/pipeline-augment';
 import { PipelineRunModel, PipelineModel } from '../../models';
@@ -17,12 +23,14 @@ import {
   resourcesValidationSchema,
 } from './detail-page-tabs';
 import { usePipelineTriggerTemplateNames } from './utils/triggers';
+import { getBreadcrumbPath } from '@console/internal/components/utils/breadcrumbs';
 
 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 activePerspective = useSelector((state: RootState) => getActivePerspective(state));
 
   React.useEffect(() => {
     k8sGet(PipelineModel, name, namespace)
@@ -55,6 +63,14 @@ const PipelineDetailsPage: React.FC<DetailsPageProps> = (props) => {
       {...props}
       menuActions={augmentedMenuActions}
       customData={templateNames}
+      breadcrumbsFor={() => [
+        {
+          name: kindObj.labelPlural,
+          path:
+            activePerspective === 'admin' ? `/pipelines/ns/${namespace}` : getBreadcrumbPath(match),
+        },
+        { name: `${kindObj.label} Details`, path: `${match.url}` },
+      ]}
       pages={[
         navFactory.details(PipelineDetails),
         navFactory.editYaml(),

diff --git a/...es/dev-console/src/components/pipelines/detail-page-tabs/PipelineConditionDetailsPage.tsx b/...es/dev-console/src/components/pipelines/detail-page-tabs/PipelineConditionDetailsPage.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+// 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 { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
+import { getActivePerspective } from '@console/internal/reducers/ui';
+import { RootState } from '@console/internal/redux';
+import { getBreadcrumbPath } from '@console/internal/components/utils/breadcrumbs';
+import { navFactory, Kebab } from '@console/internal/components/utils';
+import { DetailsForKind } from '@console/internal/components/default-resource';
+
+const PipelineConditionDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { namespace, kindObj, match, kind } = props;
+  const activePerspective = useSelector((state: RootState) => getActivePerspective(state));
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={Kebab.factory.common}
+      breadcrumbsFor={() => [
+        {
+          name: kindObj.labelPlural,
+          path:
+            activePerspective === 'admin'
+              ? `/pipelines/ns/${namespace}/conditions`
+              : getBreadcrumbPath(match),
+        },
+        { name: `${kindObj.label} Details`, path: `${match.url}` },
+      ]}
+      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+    />
+  );
+};
+
+export default PipelineConditionDetailsPage;
diff --git a/...ges/dev-console/src/components/pipelines/detail-page-tabs/PipelineResourceDetailsPage.tsx b/...ges/dev-console/src/components/pipelines/detail-page-tabs/PipelineResourceDetailsPage.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+// 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 { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
+import { getActivePerspective } from '@console/internal/reducers/ui';
+import { RootState } from '@console/internal/redux';
+import { getBreadcrumbPath } from '@console/internal/components/utils/breadcrumbs';
+import { navFactory, Kebab } from '@console/internal/components/utils';
+import { DetailsForKind } from '@console/internal/components/default-resource';
+
+const PipelineResourceDetailsPage: React.FC<DetailsPageProps> = (props) => {
+  const { namespace, kindObj, match, kind } = props;
+  const activePerspective = useSelector((state: RootState) => getActivePerspective(state));
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={Kebab.factory.common}
+      breadcrumbsFor={() => [
+        {
+          name: kindObj.labelPlural,
+          path:
+            activePerspective === 'admin'
+              ? `/pipelines/ns/${namespace}/pipeline-resources`
+              : getBreadcrumbPath(match),
+        },
+        { name: `${kindObj.label} Details`, path: `${match.url}` },
+      ]}
+      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+    />
+  );
+};
+
+export default PipelineResourceDetailsPage;
diff --git a/frontend/packages/dev-console/src/models/pipelines.ts b/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,
 };
 

diff --git a/frontend/packages/dev-console/src/plugin.tsx b/frontend/packages/dev-console/src/plugin.tsx
@@ -78,6 +78,7 @@ const {
   PipelineModel,
   PipelineResourceModel,
   PipelineRunModel,
+  ConditionModel,
   TaskModel,
   TaskRunModel,
   EventListenerModel,
@@ -371,6 +372,30 @@ const plugin: Plugin<ConsumedExtensions> = [
         ).default,
     },
   },
+  {
+    type: 'Page/Resource/Details',
+    properties: {
+      model: PipelineResourceModel,
+      loader: async () =>
+        (
+          await import(
+            './components/pipelines/detail-page-tabs/PipelineResourceDetailsPage' /* webpackChunkName: "pipelineresource-details" */
+          )
+        ).default,
+    },
+  },
+  {
+    type: 'Page/Resource/Details',
+    properties: {
+      model: ConditionModel,
+      loader: async () =>
+        (
+          await import(
+            './components/pipelines/detail-page-tabs/PipelineConditionDetailsPage' /* webpackChunkName: "pipelinecondition-details" */
+          )
+        ).default,
+    },
+  },
   {
     type: 'Page/Resource/Details',
     properties: {