Updated the ApprovalList and Details Pages and minor Updates

openshift · Apr 4, 2024 · 3c7ab20 · 3c7ab20
1 parent 537716b
commit 3c7ab20
Show file tree

Hide file tree

Showing 23 changed files with 314 additions and 137 deletions.
diff --git a/frontend/packages/pipelines-plugin/console-extensions.json b/frontend/packages/pipelines-plugin/console-extensions.json
@@ -505,6 +505,35 @@
       "disallowed": ["HIDE_STATIC_PIPELINE_PLUGIN_CLUSTERTRIGGERSBINDING_DETAILS"]
     }
   },
+  {
+    "type": "console.resource/details-item",
+    "properties": {
+      "id": "approval-task-description",
+      "model": {
+        "group": "openshift-pipelines.org",
+        "version": "v1alpha1",
+        "kind": "ApprovalTask"
+      },
+      "component": { "$codeRef": "tasksComponent.TaskDescriptionSection" },
+      "sortWeight": 1,
+      "column": "right"
+    }
+  },
+  {
+    "type": "console.resource/details-item",
+    "properties": {
+      "id": "approval-task-approvers",
+      "model": {
+        "group": "openshift-pipelines.org",
+        "version": "v1alpha1",
+        "kind": "ApprovalTask"
+      },
+      "component": { "$codeRef": "tasksComponent.ApproverListSection" },
+      "title": "%pipelines-plugin~Approvers%",
+      "sortWeight": 1,
+      "column": "right"
+    }
+  },
   {
     "type": "console.page/resource/list",
     "properties": {

diff --git a/frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json b/frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json
@@ -23,6 +23,7 @@
   "EventListeners": "EventListeners",
   "Repository": "Repository",
   "Repositories": "Repositories",
+  "Approvers": "Approvers",
   "Create a Tekton Pipeline to automate delivery of your application": "Create a Tekton Pipeline to automate delivery of your application",
   "Triggers": "Triggers",
   "Red Hat": "Red Hat",
@@ -129,6 +130,7 @@
   "Medium": "Medium",
   "Low": "Low",
   "Resource is being deleted.": "Resource is being deleted.",
+  "Approvals": "Approvals",
   "View GitHub App": "View GitHub App",
   "EventListener details": "EventListener details",
   "URL": "URL",
@@ -344,7 +346,6 @@
   "Select a Project to view the list of Pipelines<1></1>.": "Select a Project to view the list of Pipelines<1></1>.",
   "Create Pipeline": "Create Pipeline",
   "by name": "by name",
-  "Approvals": "Approvals",
   "Select a Project to view its details<1></1>.": "Select a Project to view its details<1></1>.",
   "Install and add": "Install and add",
   "Update and add": "Update and add",
@@ -438,16 +439,18 @@
   "Download all TaskRun logs": "Download all TaskRun logs",
   "TaskRun log": "TaskRun log",
   "Pod not found": "Pod not found",
-  "PipelineRun Name": "PipelineRun Name",
-  "Approvers": "Approvers",
-  "Task Name": "Task Name",
-  "Current Status": "Current Status",
+  "PipelineRun name": "PipelineRun name",
+  "TaskRun name": "TaskRun name",
+  "Current status": "Current status",
+  "{{description}}": "{{description}}",
   "Approve": "Approve",
   "Reject": "Reject",
   "Approval status": "Approval status",
-  "ApprovalTasks": "ApprovalTasks",
+  "Approval tasks": "Approval tasks",
   "An error occurred. Please try again": "An error occurred. Please try again",
-  "<0>{type === 'approve'\n          ? 'Are you sure you want to approve'\n          : 'Please provide a reason for not approving'} <2></2><3>{name}</3> in <6></6><7></7><8>{pipelineRunName}</8>?</0>": "<0>{type === 'approve'\n          ? 'Are you sure you want to approve'\n          : 'Please provide a reason for not approving'} <2></2><3>{name}</3> in <6></6><7></7><8>{pipelineRunName}</8>?</0>",
+  "Are you sure you want to approve": "Are you sure you want to approve",
+  "Please provide a reason for not approving": "Please provide a reason for not approving",
+  "in": "in",
   "Reason": "Reason",
   "Submit": "Submit",
   "{{taskLabel}} details": "{{taskLabel}} details",

diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines-lists/PipelinesListsPage.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines-lists/PipelinesListsPage.tsx
@@ -17,19 +17,25 @@ import {
   SecondaryButtonAction,
   useFlag,
 } from '@console/shared';
-import { FLAG_OPENSHIFT_PIPELINE_AS_CODE, FLAG_OPENSHIFT_PIPELINE_CONDITION } from '../../const';
+import {
+  FLAG_OPENSHIFT_PIPELINE_APPROVAL_TASK,
+  FLAG_OPENSHIFT_PIPELINE_AS_CODE,
+  FLAG_OPENSHIFT_PIPELINE_CONDITION,
+} from '../../const';
 import { PipelineModel, ConditionModel, PipelineRunModel, RepositoryModel } from '../../models';
 import { usePipelineTechPreviewBadge } from '../../utils/hooks';
 import { PAC_SECRET_NAME } from '../pac/const';
 import PipelineRunsResourceList from '../pipelineruns/PipelineRunsResourceList';
 import { PIPELINE_NAMESPACE } from '../pipelines/const';
 import PipelinesList from '../pipelines/list-page/PipelinesList';
 import RepositoriesList from '../repository/list-page/RepositoriesList';
+import ApprovalTasksListPage from '../tasks/approval-tasks/ApprovalTasksListPage';
 
 const PipelinesListPage: React.FC = () => {
   const { t } = useTranslation();
   const { ns: namespace } = useParams();
   const isRepositoryEnabled = useFlag(FLAG_OPENSHIFT_PIPELINE_AS_CODE);
+  const isApprovalTaskEnabled = useFlag(FLAG_OPENSHIFT_PIPELINE_APPROVAL_TASK);
   const isConditionsEnabled = useFlag(FLAG_OPENSHIFT_PIPELINE_CONDITION);
   const badge = usePipelineTechPreviewBadge(namespace);
   const [hasCreateAccess, hasCreateAccessLoading] = useAccessReview({
@@ -100,6 +106,17 @@ const PipelinesListPage: React.FC = () => {
           },
         ]
       : []),
+    ...(isApprovalTaskEnabled
+      ? [
+          {
+            href: 'approvals',
+            // t(RepositoryModel.labelPluralKey)
+            nameKey: `${t('pipelines-plugin~Approvals')}`,
+            component: ApprovalTasksListPage,
+            pageData: { showTitle, hideBadge, canCreate },
+          },
+        ]
+      : []),
   ];
 
   const secondaryButtonAction: SecondaryButtonAction = {

diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/PipelineTabbedPage.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/PipelineTabbedPage.tsx
@@ -21,11 +21,11 @@ import {
   FLAG_OPENSHIFT_PIPELINE_AS_CODE,
   PREFERRED_DEV_PIPELINE_PAGE_TAB_USER_SETTING_KEY,
 } from '../../const';
-import { PipelineModel, PipelineRunModel, RepositoryModel } from '../../models';
+import { ApprovalTaskModel, PipelineModel, PipelineRunModel, RepositoryModel } from '../../models';
 import { usePipelineTechPreviewBadge } from '../../utils/hooks';
 import { PipelineRunsResourceList } from '../pipelineruns';
 import RepositoriesList from '../repository/list-page/RepositoriesList';
-import ApprovalTasksListPage from '../tasks/list-page/approval-tasks/ApprovalTasksListPage';
+import ApprovalTasksListPage from '../tasks/approval-tasks/ApprovalTasksListPage';
 import PipelinesList from './list-page/PipelinesList';
 
 export const PageContents: React.FC = () => {
@@ -93,8 +93,8 @@ export const PageContents: React.FC = () => {
       ? [
           {
             href: 'approvals',
-            // t(RepositoryModel.labelPluralKey)
-            nameKey: `${t('pipelines-plugin~Approvals')}`,
+            // t(ApprovalTaskModel.labelPluralKey)
+            nameKey: ApprovalTaskModel.labelPluralKey,
             component: ApprovalTasksListPage,
             pageData: { showTitle, hideBadge, canCreate },
           },

diff --git a/...packages/pipelines-plugin/src/components/pipelines/pipeline-topology/ApprovalTaskNode.tsx b/...packages/pipelines-plugin/src/components/pipelines/pipeline-topology/ApprovalTaskNode.tsx
@@ -10,8 +10,10 @@ import {
   WatchK8sResults,
   getGroupVersionKindForModel,
 } from '@console/dynamic-plugin-sdk/src/lib-core';
+import { useUserSettings } from '@console/dynamic-plugin-sdk/src/lib-internal';
 import { useK8sWatchResources } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks';
-import { resourcePathFromModel, truncateMiddle } from '@console/internal/components/utils';
+import { truncateMiddle } from '@console/internal/components/utils';
+import { PREFERRED_DEV_PIPELINE_PAGE_TAB_USER_SETTING_KEY } from '@console/pipelines-plugin/src/const';
 import { ApprovalTaskModel, CustomRunModelV1Beta1 } from '@console/pipelines-plugin/src/models';
 import {
   getApprovalStatus,
@@ -67,8 +69,20 @@ const ApprovalTaskComponent: React.FC<ApprovalTaskComponentProps> = ({
   const visualName = name || _.get(task, ['metadata', 'name'], '');
   const nameRef = React.useRef();
   const pillRef = React.useRef();
+  const [, setPreferredTab, preferredTabLoaded] = useUserSettings<string>(
+    PREFERRED_DEV_PIPELINE_PAGE_TAB_USER_SETTING_KEY,
+    'approvals',
+  );
+
+  React.useEffect(() => {
+    if (preferredTabLoaded) {
+      setPreferredTab('approvals');
+    }
+  }, [preferredTabLoaded, setPreferredTab]);
 
-  const path = `${resourcePathFromModel(ApprovalTaskModel, customTask?.metadata?.name, namespace)}`;
+  const path = customTask?.metadata?.name
+    ? `/dev-pipelines/ns/${namespace}/approvals?name=${customTask?.metadata?.name}`
+    : undefined;
 
   const enableLogLink = status !== ApprovalStatus.Idle && !!path;
   const taskStatusColor = status

diff --git a/...st-page/approval-tasks/ApprovalHeader.tsx → ...s/tasks/approval-tasks/ApprovalHeader.tsx b/...st-page/approval-tasks/ApprovalHeader.tsx → ...s/tasks/approval-tasks/ApprovalHeader.tsx
@@ -5,33 +5,35 @@ import { tableColumnClasses } from './approval-table';
 const ApprovalHeader = () => {
   return [
     {
-      title: i18next.t('pipelines-plugin~PipelineRun Name'),
-      sortField: 'metadata.name',
+      title: i18next.t('pipelines-plugin~PipelineRun name'),
+      sortFunc: 'plrName',
       transforms: [sortable],
       props: { className: tableColumnClasses.plrName },
       id: 'plrName',
     },
     {
-      title: i18next.t('pipelines-plugin~Approvers'),
-      props: { className: tableColumnClasses.approvers },
-      id: 'approvers',
-    },
-    {
-      title: i18next.t('pipelines-plugin~Task Name'),
-      props: { className: tableColumnClasses.taskName },
-      id: 'taskName',
+      title: i18next.t('pipelines-plugin~TaskRun name'),
+      props: { className: tableColumnClasses.taskRunName },
+      sortField: 'metadata.name',
+      transforms: [sortable],
+      id: 'taskRunName',
     },
     {
-      title: i18next.t('pipelines-plugin~Current Status'),
+      title: i18next.t('pipelines-plugin~Current status'),
       props: { className: tableColumnClasses.status },
-      transforms: [sortable],
       id: 'status',
     },
     {
-      title: i18next.t('pipelines-plugin~Duration'),
-      props: { className: tableColumnClasses.duration },
+      title: i18next.t('pipelines-plugin~Description'),
+      props: { className: tableColumnClasses.description },
+      id: 'description',
+    },
+    {
+      title: i18next.t('pipelines-plugin~Started'),
+      props: { className: tableColumnClasses.startTime },
+      sortField: 'metadata.creationTimestamp',
       transforms: [sortable],
-      id: 'duration',
+      id: 'startTime',
     },
     {
       title: '',

diff --git a/frontend/packages/pipelines-plugin/src/components/tasks/approval-tasks/ApprovalRow.scss b/frontend/packages/pipelines-plugin/src/components/tasks/approval-tasks/ApprovalRow.scss
@@ -0,0 +1,8 @@
+.odc-pl-approval-status-icon {
+  position: fixed;
+  margin-left: -10px;
+}
+
+.odc-table-overflow {
+  overflow: hidden;
+}