Update layout in the pipelines and runs node side panel

DaoDaoNoCode · Aug 26, 2024 · 8ee1ed5 · 8ee1ed5
1 parent 5e854fe
commit 8ee1ed5
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 52 deletions.
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineTaskDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineTaskDetails.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Stack, StackItem } from '@patternfly/react-core';
 import TaskDetailsSection from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsSection';
 import TaskDetailsCodeBlock from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsCodeBlock';
 import TaskDetailsInputOutput from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput';
@@ -19,58 +19,58 @@ const PipelineTaskDetails: React.FC<TaskDetailsProps> = ({ task }) => {
   }
 
   return (
-    <Stack hasGutter>
+    <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsXl' }}>
       {task.inputs && (
-        <StackItem>
+        <FlexItem>
           <TaskDetailsInputOutput
             type="Input"
             artifacts={task.inputs.artifacts}
             params={task.inputs.params?.map((p) => ({ label: p.label, value: p.value ?? p.type }))}
           />
-        </StackItem>
+        </FlexItem>
       )}
       {task.outputs && (
-        <StackItem>
+        <FlexItem>
           <TaskDetailsInputOutput
             type="Output"
             artifacts={task.outputs.artifacts}
             params={task.outputs.params?.map((p) => ({ label: p.label, value: p.value ?? p.type }))}
           />
-        </StackItem>
+        </FlexItem>
       )}
       {task.steps?.map((step, i) => (
         <React.Fragment key={i}>
-          <StackItem>
+          <FlexItem>
             <TaskDetailsSection testId="task-detail-image" title="Image">
               {step.image}
             </TaskDetailsSection>
-          </StackItem>
+          </FlexItem>
           {step.command && (
-            <StackItem>
+            <FlexItem>
               <TaskDetailsSection title="Command">
                 <TaskDetailsCodeBlock
                   id="command"
                   testId="command-task-detail-code-block"
                   content={step.command.join('\n')}
                 />
               </TaskDetailsSection>
-            </StackItem>
+            </FlexItem>
           )}
           {step.args && (
-            <StackItem>
+            <FlexItem>
               <TaskDetailsSection title="Arguments">
                 <TaskDetailsCodeBlock
                   id="args"
                   testId="arguments-task-detail-code-block"
                   content={step.args.join('\n')}
                 />
               </TaskDetailsSection>
-            </StackItem>
+            </FlexItem>
           )}
         </React.Fragment>
       ))}
-      <StackItem>&nbsp;</StackItem>
-    </Stack>
+      <FlexItem>&nbsp;</FlexItem>
+    </Flex>
   );
 };
 

diff --git a/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx b/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 
-import { Grid, GridItem, Stack, StackItem } from '@patternfly/react-core';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
 import { Value as ProtoValue } from 'google-protobuf/google/protobuf/struct_pb';
 
 import { Link } from 'react-router-dom';
@@ -107,40 +114,40 @@ const SelectedNodeInputOutputTab: React.FC<SelectedNodeInputOutputTabProps> = ({
   );
 
   return (
-    <Stack hasGutter>
+    <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsXl' }}>
       {isExperimentsAvailable && execution?.id && (
-        <StackItem data-testid="execution-name">
-          <Grid hasGutter>
-            <GridItem span={6}>
-              <b>Execution name</b>
-            </GridItem>
-            <GridItem span={6}>
-              <Link to={executionDetailsRoute(namespace, execution.id.toString())}>
-                {executionDisplayName}
-              </Link>
-            </GridItem>
-          </Grid>
-        </StackItem>
+        <FlexItem data-testid="execution-name">
+          <DescriptionList isHorizontal horizontalTermWidthModifier={{ default: '16ch' }}>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Execution name</DescriptionListTerm>
+              <DescriptionListDescription>
+                <Link to={executionDetailsRoute(namespace, execution.id.toString())}>
+                  {executionDisplayName}
+                </Link>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </FlexItem>
       )}
       {task.inputs && (
-        <StackItem>
+        <FlexItem>
           <TaskDetailsInputOutput
             type="Input"
             artifacts={task.inputs.artifacts}
             params={getParams(task.inputs.params, getExecutionFieldsMap('inputs'))}
           />
-        </StackItem>
+        </FlexItem>
       )}
       {task.outputs && (
-        <StackItem>
+        <FlexItem>
           <TaskDetailsInputOutput
             type="Output"
             artifacts={task.outputs.artifacts}
             params={getParams(task.outputs.params, getExecutionFieldsMap('outputs'))}
           />
-        </StackItem>
+        </FlexItem>
       )}
-    </Stack>
+    </Flex>
   );
 };
 export default SelectedNodeInputOutputTab;
diff --git a/...nd/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput.tsx b/...nd/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Flex, FlexItem } from '@patternfly/react-core';
 import TaskDetailsSection from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsSection';
 import TaskDetailsPrintKeyValues from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues';
 import { PipelineTaskArtifact } from '~/concepts/pipelines/topology';
@@ -43,22 +43,22 @@ const TaskDetailsInputOutput: React.FC<TaskDetailsInputOutputProps> = ({
   }
 
   return (
-    <Stack hasGutter>
+    <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsXl' }}>
       {artifacts && (
-        <StackItem>
+        <FlexItem>
           <TaskDetailsSection title={`${type} artifacts`} testId={`${type}-artifacts`}>
             <TaskDetailsPrintKeyValues items={artifactKeyValues} />
           </TaskDetailsSection>
-        </StackItem>
+        </FlexItem>
       )}
       {params && (
-        <StackItem>
+        <FlexItem>
           <TaskDetailsSection title={`${type} parameters`} testId={`${type}-parameters`}>
             <TaskDetailsPrintKeyValues items={params} />
           </TaskDetailsSection>
-        </StackItem>
+        </FlexItem>
       )}
-    </Stack>
+    </Flex>
   );
 };
 

diff --git a/...src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx b/...src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx
@@ -1,25 +1,32 @@
 import * as React from 'react';
-import { Grid, GridItem, Truncate } from '@patternfly/react-core';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+} from '@patternfly/react-core';
 
 type TaskDetailsPrintKeyValuesProps = {
   items: { label: string; value: React.ReactNode }[];
 };
 
 const TaskDetailsPrintKeyValues: React.FC<TaskDetailsPrintKeyValuesProps> = ({ items }) => (
-  <Grid hasGutter>
+  <DescriptionList
+    isHorizontal
+    isCompact
+    horizontalTermWidthModifier={{
+      default: '16ch',
+    }}
+  >
     {items.map((result, i) => (
-      <React.Fragment key={`item-${i}`}>
-        <GridItem span={6}>
-          <b>
-            <Truncate content={result.label} />
-          </b>
-        </GridItem>
-        <GridItem span={6} data-testid={`${result.label}-item`}>
+      <DescriptionListGroup key={`item-${i}`}>
+        <DescriptionListTerm>{result.label}</DescriptionListTerm>
+        <DescriptionListDescription data-testid={`${result.label}-item`}>
           {result.value}
-        </GridItem>
-      </React.Fragment>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
     ))}
-  </Grid>
+  </DescriptionList>
 );
 
 export default TaskDetailsPrintKeyValues;