Merge pull request #1722 from Gkrumbach07/params-tab

Added pipeline run param tab

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerBottomTabs.tsx

@@ -4,9 +4,11 @@ import PipelineRunTabDetails from '~/concepts/pipelines/content/pipelinesDetails
 import PipelineDetailsYAML from '~/concepts/pipelines/content/pipelinesDetails/PipelineDetailsYAML';
 import { PipelineRunKind } from '~/k8sTypes';
 import { PipelineRunKF } from '~/concepts/pipelines/kfTypes';
+import PipelineRunTabParameters from './PipelineRunTabParameters';
 
 export enum RunDetailsTabs {
   DETAILS = 'Details',
+  PARAMETERS = 'Input parameters',
   YAML = 'Run output',
 }
 
@@ -51,6 +53,14 @@ export const PipelineRunDrawerBottomTabs: React.FC<PipelineRunBottomDrawerProps>
             pipelineRunKF={pipelineRunDetails?.kf}
           />
         </TabContent>
+        <TabContent
+          id={RunDetailsTabs.PARAMETERS}
+          eventKey={RunDetailsTabs.PARAMETERS}
+          activeKey={selection ?? ''}
+          hidden={RunDetailsTabs.PARAMETERS !== selection}
+        >
+          <PipelineRunTabParameters pipelineRunKF={pipelineRunDetails?.kf} />
+        </TabContent>
         <TabContent
           id={RunDetailsTabs.YAML}
           eventKey={RunDetailsTabs.YAML}

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabParameters.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+  Spinner,
+  EmptyStateVariant,
+  EmptyState,
+  Title,
+  EmptyStateBody,
+} from '@patternfly/react-core';
+import { PipelineRunKF } from '~/concepts/pipelines/kfTypes';
+import {
+  DetailItem,
+  renderDetailItems,
+} from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils';
+type PipelineRunTabParametersProps = {
+  pipelineRunKF?: PipelineRunKF;
+};
+
+const PipelineRunTabParameters: React.FC<PipelineRunTabParametersProps> = ({ pipelineRunKF }) => {
+  if (!pipelineRunKF) {
+    return (
+      <EmptyState variant={EmptyStateVariant.large} data-id="loading-empty-state">
+        <Spinner size="xl" />
+        <Title headingLevel="h4" size="lg">
+          Loading
+        </Title>
+      </EmptyState>
+    );
+  }
+
+  if (
+    !pipelineRunKF?.pipeline_spec.parameters ||
+    pipelineRunKF.pipeline_spec.parameters.length === 0
+  ) {
+    return (
+      <EmptyState variant={EmptyStateVariant.large} data-id="parameters-empty-state">
+        <Title headingLevel="h4" size="lg">
+          No parameters
+        </Title>
+        <EmptyStateBody>This pipeline run does not have any parameters defined.</EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
+  const details: DetailItem[] = pipelineRunKF.pipeline_spec.parameters.map((param) => ({
+    key: param.name,
+    value: param.value,
+  }));
+
+  return <>{renderDetailItems(details)}</>;
+};
+
+export default PipelineRunTabParameters;

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx

@@ -20,7 +20,9 @@ export const renderDetailItems = (details: DetailItem[], flexKey?: boolean): Rea
     {details.map((detail) => (
       <StackItem key={detail.key}>
         <Flex flexWrap={{ default: 'wrap' }}>
-          <FlexItem style={{ width: flexKey ? undefined : 150 }}>{detail.key}</FlexItem>
+          <FlexItem style={{ width: flexKey ? undefined : 150 }}>
+            <b>{detail.key}</b>
+          </FlexItem>
           <FlexItem>{detail.value}</FlexItem>
         </Flex>
       </StackItem>

frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx

@@ -9,7 +9,9 @@ const TaskDetailsPrintKeyValues: React.FC<TaskDetailsPrintKeyValuesProps> = ({ i
   <Grid hasGutter>
     {items.map((result, i) => (
       <React.Fragment key={`item-${i}`}>
-        <GridItem span={4}>{result.name}</GridItem>
+        <GridItem span={4}>
+          <b>{result.name}</b>
+        </GridItem>
         <GridItem span={8}>{result.value}</GridItem>
       </React.Fragment>
     ))}