change description format within tables

opendatahub-io · Sep 12, 2024 · a3fb9ba · a3fb9ba
1 parent 843e85a
commit a3fb9ba
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/experiments.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/experiments.ts
@@ -91,6 +91,10 @@ class ExperimentsRow extends TableRow {
     return this.find().find(`[data-label=Checkbox]`).find('input');
   }
 
+  findDescription() {
+    return this.find().findByTestId('table-row-title-description');
+  }
+
   findExperimentCreatedTime() {
     return this.find().find(`[data-label="Created"]`);
   }

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/experiments.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/experiments.cy.ts
@@ -39,6 +39,7 @@ const mockExperiments = [
   buildMockExperimentKF({
     display_name: 'Test experiment 1',
     experiment_id: '1',
+    description: 'Test experiment 1',
     last_run_created_at: currentTime.toISOString(),
   }),
   buildMockExperimentKF({
@@ -86,6 +87,10 @@ describe('Experiments', () => {
     it('experiments table time', () => {
       experimentsTabs.findActiveTab().click();
       const activeExperimentsTable = experimentsTabs.getActiveExperimentsTable();
+      activeExperimentsTable
+        .getRowByName('Test experiment 1')
+        .findDescription()
+        .should('have.text', 'Test experiment 1');
       activeExperimentsTable
         .getRowByName('Test experiment 1')
         .findExperimentLastRunTime()

diff --git a/frontend/src/concepts/pipelines/content/tables/columns.ts b/frontend/src/concepts/pipelines/content/tables/columns.ts
@@ -65,26 +65,25 @@ export const experimentColumns: SortableData<ExperimentKFv2>[] = [
     label: 'Experiment',
     field: 'display_name',
     sortable: true,
-  },
-  {
-    label: 'Description',
-    field: 'description',
-    sortable: true,
+    width: 40,
   },
   {
     label: 'Created',
     field: 'created_at',
     sortable: true,
+    width: 20,
   },
   {
     label: 'Last run started',
     field: 'last_run_created_at',
     sortable: true,
+    width: 20,
   },
   {
     label: 'Last 5 runs',
     field: 'last_5_runs',
     sortable: false,
+    width: 20,
   },
   kebabTableColumn(),
 ];

diff --git a/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableRow.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { ActionsColumn, IAction, Td, Tr } from '@patternfly/react-table';
 import { Truncate } from '@patternfly/react-core';
 import { ExperimentKFv2, StorageStateKF } from '~/concepts/pipelines/kfTypes';
-import { CheckboxTd } from '~/components/table';
+import { CheckboxTd, TableRowTitleDescription } from '~/components/table';
 import { experimentArchivedRunsRoute, experimentRunsRoute } from '~/routes';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { ExperimentCreated, LastExperimentRuns, LastExperimentRunsStarted } from './renderUtils';
@@ -29,19 +29,25 @@ const ExperimentTableRow: React.FC<ExperimentTableRowProps> = ({
     <Tr>
       <CheckboxTd id={experiment.experiment_id} isChecked={isChecked} onToggle={onToggleCheck} />
       <Td dataLabel="Experiment">
-        <Link
-          to={
-            isArchived
-              ? experimentArchivedRunsRoute(namespace, experiment.experiment_id)
-              : experimentRunsRoute(namespace, experiment.experiment_id)
+        <TableRowTitleDescription
+          title={
+            <Link
+              to={
+                isArchived
+                  ? experimentArchivedRunsRoute(namespace, experiment.experiment_id)
+                  : experimentRunsRoute(namespace, experiment.experiment_id)
+              }
+              state={{ experiment }}
+            >
+              {/* TODO: Remove the custom className after upgrading to PFv6 */}
+              <Truncate content={experiment.display_name} className="truncate-no-min-width" />
+            </Link>
           }
-          state={{ experiment }}
-        >
-          {/* TODO: Remove the custom className after upgrading to PFv6 */}
-          <Truncate content={experiment.display_name} className="truncate-no-min-width" />
-        </Link>
+          description={experiment.description}
+          truncateDescriptionLines={2}
+        />
       </Td>
-      <Td dataLabel="Description">{experiment.description}</Td>
+
       <Td dataLabel="Created">
         <ExperimentCreated experiment={experiment} />
       </Td>