[RHOAIENG-8359] Move and update pipeline and run detail tabs

frontend/src/__tests__/cypress/cypress/pages/pipelines/topology.ts

@@ -77,10 +77,20 @@ class PipelineRunRightDrawer extends Contextual<HTMLDivElement> {
 }
 
 class RunDetails extends PipelinesTopology {
-  findBottomDrawer() {
-    return new PipelineRunBottomDrawer(() =>
-      cy.findByTestId('pipeline-run-drawer-bottom').parent(),
-    );
+  findGraphTab() {
+    return cy.findByTestId('pipeline-run-tab-graph');
+  }
+
+  findDetailsTab() {
+    return cy.findByTestId('pipeline-run-tab-details');
+  }
+
+  findPipelineSpecTab() {
+    return cy.findByTestId('pipeline-run-tab-spec');
+  }
+
+  findDetailItem(key: string) {
+    return new DetailsItem(() => cy.findByTestId(`detail-item-${key}`));
   }
 
   findRightDrawer() {
@@ -247,24 +257,6 @@ class PipelineRunDetails extends RunDetails {
   }
 }
 
-class PipelineRunBottomDrawer extends Contextual<HTMLDivElement> {
-  findBottomDrawerDetailsTab() {
-    return this.find().findByTestId('bottom-drawer-tab-details');
-  }
-
-  findBottomDrawerYamlTab() {
-    return this.find().findByTestId('bottom-drawer-tab-run-output');
-  }
-
-  findBottomDrawerInputTab() {
-    return this.find().findByTestId('bottom-drawer-tab-input-parameters');
-  }
-
-  findBottomDrawerDetailItem(key: string) {
-    return new DetailsItem(() => this.find().findByTestId(`detail-item-${key}`));
-  }
-}
-
 export const pipelineDetails = new PipelineDetails();
 export const pipelineRunDetails = new PipelineRunDetails();
 export const pipelineRunJobDetails = new PipelineRunJobDetails();

frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts

@@ -345,85 +345,45 @@ describe('Pipeline topology', () => {
         cy.wait('@deletepipelineRunJob');
       });
 
-      it('Test pipeline job bottom drawer project navigation', () => {
+      it('Test pipeline job details project navigation', () => {
         pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);
 
-        pipelineRunJobDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
-        pipelineRunJobDetails
-          .findBottomDrawer()
-          .findBottomDrawerDetailItem('Project')
-          .findValue()
-          .find('a')
-          .click();
+        pipelineRunJobDetails.findDetailsTab().click();
+        pipelineRunJobDetails.findDetailItem('Project').findValue().find('a').click();
         verifyRelativeURL(`/projects/${projectId}?section=overview`);
       });
 
-      it('Test pipeline job bottom drawer pipeline version navigation', () => {
+      it('Test pipeline job details pipeline version navigation', () => {
         pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);
 
-        pipelineRunJobDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
-        pipelineRunJobDetails
-          .findBottomDrawer()
-          .findBottomDrawerDetailItem('Pipeline version')
-          .findValue()
-          .find('a')
-          .click();
+        pipelineRunJobDetails.findDetailsTab().click();
+        pipelineRunJobDetails.findDetailItem('Pipeline version').findValue().find('a').click();
         verifyRelativeURL(
           `/pipelines/${projectId}/pipeline/view/${mockJob.pipeline_version_reference.pipeline_id}/${mockJob.pipeline_version_reference.pipeline_version_id}`,
         );
       });
     });
 
-    it('Test pipeline job bottom drawer details', () => {
+    it('Test pipeline job tab details', () => {
       initIntercepts();
 
       pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);
 
-      pipelineRunJobDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
+      pipelineRunJobDetails.findDetailsTab().click();
+      pipelineRunJobDetails.findDetailItem('Name').findValue().contains(mockJob.display_name);
+      pipelineRunJobDetails.findDetailItem('Project').findValue().contains('Test Project');
+      pipelineRunJobDetails.findDetailItem('Run ID').findValue().contains(mockJob.display_name);
       pipelineRunJobDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Name')
+        .findDetailItem('Pipeline version')
         .findValue()
-        .contains(mockJob.display_name);
-      pipelineRunJobDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Project')
-        .findValue()
-        .contains('Test Project');
-      pipelineRunJobDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Run ID')
-        .findValue()
-        .contains(mockJob.display_name);
-      pipelineRunJobDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Workflow name')
-        .findValue()
-        .contains('test-pipeline');
+        .contains('test-version-name');
+      pipelineRunJobDetails.findDetailItem('Pipeline').findValue().contains('test-pipeline');
+      pipelineRunJobDetails.findDetailItem('Workflow name').findValue().contains('test-pipeline');
+      pipelineRunJobDetails.findDetailItem('Created').findValue().contains('February 8, 2024');
+      pipelineRunJobDetails.findDetailItem('Run trigger enabled').findValue().contains('Yes');
+      pipelineRunJobDetails.findDetailItem('Trigger').findValue().contains('Every 1 minute');
     });
 
-    it('Test pipeline job bottom drawer parameters', () => {
-      initIntercepts();
-
-      pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);
-
-      pipelineRunJobDetails.findBottomDrawer().findBottomDrawerInputTab().click();
-      pipelineRunJobDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('min_max_scaler')
-        .findValue()
-        .contains('False');
-      pipelineRunJobDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('neighbors')
-        .findValue()
-        .contains('0');
-      pipelineRunJobDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('standard_scaler')
-        .findValue()
-        .contains('yes');
-    });
     it('Ensure that clicking on a node will open a right-side drawer', () => {
       initIntercepts();
 
@@ -442,63 +402,32 @@ describe('Pipeline topology', () => {
       taskDrawer.find().should('not.exist');
     });
 
-    it('Test pipeline triggered run bottom drawer details', () => {
+    it('Test pipeline triggered run tab details', () => {
       initIntercepts();
 
       pipelineRunDetails.visit(projectId, mockRun.run_id);
 
-      pipelineRunJobDetails.findBottomDrawer().findBottomDrawerYamlTab();
-      pipelineRunDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
-      pipelineRunDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Name')
-        .findValue()
-        .contains(mockJob.display_name);
-      pipelineRunDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Project')
-        .findValue()
-        .contains('Test Project');
-      pipelineRunDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Run ID')
-        .findValue()
-        .contains(mockJob.display_name);
-      pipelineRunDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('Workflow name')
-        .findValue()
-        .contains('test-pipeline');
-    });
-
-    it('Test pipeline triggered run bottom drawer parameters', () => {
-      initIntercepts();
-
-      pipelineRunDetails.visit(projectId, mockRun.run_id);
-
-      pipelineRunDetails.findBottomDrawer().findBottomDrawerInputTab().click();
-      pipelineRunDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('min_max_scaler')
-        .findValue()
-        .contains('False');
-      pipelineRunDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('neighbors')
-        .findValue()
-        .contains('1');
+      pipelineRunJobDetails.findPipelineSpecTab();
+      pipelineRunDetails.findDetailsTab().click();
+      pipelineRunDetails.findDetailItem('Name').findValue().contains(mockJob.display_name);
       pipelineRunDetails
-        .findBottomDrawer()
-        .findBottomDrawerDetailItem('standard_scaler')
+        .findDetailItem('Pipeline version')
         .findValue()
-        .contains('False');
+        .contains('test-version-name');
+      pipelineRunDetails.findDetailItem('Pipeline').findValue().contains('test-pipeline');
+      pipelineRunDetails.findDetailItem('Project').findValue().contains('Test Project');
+      pipelineRunDetails.findDetailItem('Run ID').findValue().contains(mockJob.display_name);
+      pipelineRunDetails.findDetailItem('Workflow name').findValue().contains('test-pipeline');
+      pipelineRunDetails.findDetailItem('Started').findValue().contains('March 15, 2024');
+      pipelineRunDetails.findDetailItem('Finished').findValue().contains('March 15, 2024');
+      pipelineRunDetails.findDetailItem('Duration').findValue().contains('0:50');
     });
 
-    it('Test pipeline triggered run bottom drawer output', () => {
+    it('Test pipeline triggered run YAML output', () => {
       initIntercepts();
       pipelineRunDetails.visit(projectId, mockRun.run_id);
 
-      pipelineRunDetails.findBottomDrawer().findBottomDrawerYamlTab().click();
+      pipelineRunDetails.findPipelineSpecTab().click();
       pipelineRunDetails.findYamlOutput().click();
       const pipelineDashboardCodeEditor = pipelineDetails.getPipelineDashboardCodeEditor();
       pipelineDashboardCodeEditor.findInput().should('not.be.empty');

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

@@ -10,6 +10,7 @@ import {
   FlexItem,
   Tab,
   TabContent,
+  TabContentBody,
   Tabs,
   TabTitleText,
   Truncate,
@@ -30,9 +31,11 @@ import { getCorePipelineSpec } from '~/concepts/pipelines/getCorePipelineSpec';
 import PipelineDetailsActions from './PipelineDetailsActions';
 import SelectedTaskDrawerContent from './SelectedTaskDrawerContent';
 import PipelineNotFound from './PipelineNotFound';
+import { PipelineSummaryDescriptionList } from './PipelineSummaryDescriptionList';
 
 enum PipelineDetailsTab {
   GRAPH,
+  SUMMARY,
   YAML,
 }
 
@@ -163,9 +166,20 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
                   aria-label="Pipeline Graph Tab"
                   tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
                 />
+
+                <Tab
+                  eventKey={PipelineDetailsTab.SUMMARY}
+                  title={<TabTitleText>Summary</TabTitleText>}
+                  aria-label="Pipeline Summary Tab"
+                >
+                  <TabContentBody hasPadding>
+                    <PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
+                  </TabContentBody>
+                </Tab>
+
                 <Tab
                   eventKey={PipelineDetailsTab.YAML}
-                  title={<TabTitleText>YAML</TabTitleText>}
+                  title={<TabTitleText>Pipeline spec</TabTitleText>}
                   data-testid="pipeline-yaml-tab"
                   aria-label="Pipeline YAML Tab"
                   tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
@@ -202,15 +216,17 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
                   eventKey={PipelineDetailsTab.YAML}
                   activeKey={activeTabKey}
                   hidden={PipelineDetailsTab.YAML !== activeTabKey}
-                  style={{ height: '100%' }}
+                  className="pf-v5-u-h-100"
                 >
-                  <PipelineDetailsYAML
-                    filename={`Pipeline ${
-                      getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
-                      'details'
-                    }`}
-                    content={pipelineVersion?.pipeline_spec}
-                  />
+                  <TabContentBody hasPadding className="pf-v5-u-h-100">
+                    <PipelineDetailsYAML
+                      filename={`Pipeline ${
+                        getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
+                        'details'
+                      }`}
+                      content={pipelineVersion?.pipeline_spec}
+                    />
+                  </TabContentBody>
                 </TabContent>
               </div>
             </ApplicationsPage>

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineSummaryDescriptionList.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Truncate } from '@patternfly/react-core';
+
+import { PipelineKFv2, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
+import {
+  asTimestamp,
+  DetailItem,
+  renderDetailItems,
+} from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils';
+
+type PipelineSummaryDescriptionListProps = {
+  pipeline: PipelineKFv2 | null;
+  version: PipelineVersionKFv2 | null;
+};
+
+export const PipelineSummaryDescriptionList: React.FC<PipelineSummaryDescriptionListProps> = ({
+  pipeline,
+  version,
+}) => {
+  if (!pipeline) {
+    return null;
+  }
+
+  const details: DetailItem[] = [
+    { key: 'Pipeline ID', value: <Truncate content={pipeline.pipeline_id} /> },
+    ...(version
+      ? [
+          {
+            key: 'Version ID',
+            value: version.pipeline_version_id,
+          },
+        ]
+      : []),
+    ...(version?.code_source_url
+      ? [
+          {
+            key: 'Version source',
+            value: <Link to={version.code_source_url}>{version.code_source_url}</Link>,
+          },
+        ]
+      : []),
+    { key: 'Uploaded on', value: asTimestamp(new Date(pipeline.created_at)) },
+    ...(pipeline.description ? [{ key: 'Pipeline description', value: pipeline.description }] : []),
+  ];
+
+  return renderDetailItems(details);
+};