Fix UX issues on archived experiment runs table

DaoDaoNoCode · Jun 19, 2024 · 8fa4f0e · 8fa4f0e
1 parent f1fc8c5
commit 8fa4f0e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts
@@ -10,15 +10,21 @@ class PipelineRunsRow extends TableRow {
   findColumnName(name: string) {
     return this.find().find(`[data-label=Name]`).contains(name);
   }
+}
 
-  findColumnVersion(name: string) {
-    return this.find().find(`[data-label="Pipeline"]`).contains(name);
+class PipelineRunTableRow extends PipelineRunsRow {
+  findKebabAction(name: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    this.find().findKebab().click();
+    return cy.findByTestId('pipeline-run-table-row-actions').findByRole('menuitem', { name });
   }
+}
 
+class PipelineRunJobTableRow extends PipelineRunsRow {
   findStatusSwitchByRowName() {
     return this.find().findByTestId('job-status-switch');
   }
 }
+
 class PipelineRunsTable {
   protected testId = '';
 
@@ -33,12 +39,6 @@ class PipelineRunsTable {
     return cy.findByTestId(this.testId);
   }
 
-  getRowByName(name: string) {
-    return new PipelineRunsRow(() =>
-      this.find().find(`[data-label=Name]`).contains(name).parents('tr'),
-    );
-  }
-
   shouldRowNotBeVisible(name: string) {
     this.find()
       .parents()
@@ -120,6 +120,12 @@ class ActiveRunsTable extends PipelineRunsTable {
   mockGetActiveRuns(runs: PipelineRunKFv2[], namespace: string, times?: number) {
     return this.mockGetRuns(runs, [], namespace, times);
   }
+
+  getRowByName(name: string) {
+    return new PipelineRunTableRow(() =>
+      this.find().find(`[data-label=Name]`).contains(name).parents('tr'),
+    );
+  }
 }
 class ArchivedRunsTable extends PipelineRunsTable {
   constructor() {
@@ -129,13 +135,25 @@ class ArchivedRunsTable extends PipelineRunsTable {
   mockGetArchivedRuns(runs: PipelineRunKFv2[], namespace: string, times?: number) {
     return this.mockGetRuns([], runs, namespace, times);
   }
+
+  getRowByName(name: string) {
+    return new PipelineRunTableRow(() =>
+      this.find().find(`[data-label=Name]`).contains(name).parents('tr'),
+    );
+  }
 }
 
 class PipelineRunJobTable extends PipelineRunsTable {
   constructor() {
     super('schedules');
   }
 
+  getRowByName(name: string) {
+    return new PipelineRunJobTableRow(() =>
+      this.find().find(`[data-label=Name]`).contains(name).parents('tr'),
+    );
+  }
+
   findEmptyState() {
     return cy.findByTestId('schedules-empty-state');
   }

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx
@@ -22,6 +22,7 @@ import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import { ArchiveRunModal } from '~/pages/pipelines/global/runs/ArchiveRunModal';
 import PipelineRunTableRowExperiment from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRowExperiment';
 import { useContextExperimentArchived } from '~/pages/pipelines/global/experiments/ExperimentRunsContext';
+import { getDashboardMainContainer } from '~/utilities/utils';
 
 type PipelineRunTableRowProps = {
   checkboxProps: Omit<React.ComponentProps<typeof CheckboxTd>, 'id'>;
@@ -161,7 +162,11 @@ const PipelineRunTableRow: React.FC<PipelineRunTableRowProps> = ({
       {customCells}
       {hasRowActions && (
         <Td isActionCell dataLabel="Kebab">
-          <ActionsColumn items={actions} />
+          <ActionsColumn
+            data-testid="pipeline-run-table-row-actions"
+            items={actions}
+            popperProps={{ appendTo: getDashboardMainContainer, position: 'right' }}
+          />
           <RestoreRunModal
             isOpen={isRestoreModalOpen}
             runs={[run]}

diff --git a/frontend/src/pages/pipelines/global/experiments/ExperimentRunsListBreadcrumb.tsx b/frontend/src/pages/pipelines/global/experiments/ExperimentRunsListBreadcrumb.tsx
@@ -9,16 +9,22 @@ import { ExperimentRunsContext } from '~/pages/pipelines/global/experiments/Expe
 export const ExperimentRunsListBreadcrumb: React.FC = () => {
   const { experiment } = React.useContext(ExperimentRunsContext);
 
+  const displayName = experiment?.display_name || 'Loading...';
+
   return (
     <Breadcrumb>
       <BreadcrumbItem>
         <Link to={experimentsRootPath}>Experiments</Link>
       </BreadcrumbItem>
 
       <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
-        <Truncate content={experiment?.display_name || 'Loading...'} />
-        {experiment?.storage_state === StorageStateKF.ARCHIVED && <Label>Archived</Label>}
+        {/* A hack solution to get rid of the minWidth set on PF Truncate component
+          So we can show correct spacing between the title and the label
+          The min width is set to 12 characters:
+          https://github.com/patternfly/patternfly/blob/9499f0a70a18f51474285752a04928958d901829/src/patternfly/components/Truncate/truncate.scss#L4 */}
+        {displayName.length > 12 ? <Truncate content={displayName} /> : <>{displayName}</>}
       </BreadcrumbItem>
+      {experiment?.storage_state === StorageStateKF.ARCHIVED && <Label>Archived</Label>}
     </Breadcrumb>
   );
 };