Change pagination to compact style for all pipeline tables

DaoDaoNoCode · Sep 9, 2024 · bdb996b · bdb996b
1 parent aa3ef61
commit bdb996b
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 17 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelineRuns.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelineRuns.cy.ts
@@ -840,7 +840,6 @@ describe('Pipeline runs', () => {
         const pagination = tablePagination.top;
 
         // test Next button
-        pagination.findFirstButton().should('be.disabled');
         pagination.findPreviousButton().should('be.disabled');
         cy.interceptOdh(
           'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/recurringruns',
@@ -864,12 +863,10 @@ describe('Pipeline runs', () => {
           });
         });
 
-        pagination.findInput().should('have.value', '2');
         pipelineRecurringRunTable.getRowByName('another-pipeline-14').find().should('exist');
         pipelineRecurringRunTable.findRows().should('have.length', 5);
 
         //test first button
-        pagination.findLastButton().should('be.disabled');
         pagination.findNextButton().should('be.disabled');
         cy.interceptOdh(
           'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/recurringruns',
@@ -882,13 +879,11 @@ describe('Pipeline runs', () => {
             next_page_token: 'new-page-token',
           },
         );
-        pagination.findFirstButton().click();
-        pagination.findInput().should('have.value', '1');
+        pagination.findPreviousButton().click();
         pipelineRecurringRunTable.getRowByName('another-pipeline-0').find().should('exist');
         pipelineRecurringRunTable.findRows().should('have.length', 10);
 
         //test last button
-        pagination.findFirstButton().should('be.disabled');
         pagination.findPreviousButton().should('be.disabled');
         cy.interceptOdh(
           'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/recurringruns',
@@ -901,8 +896,7 @@ describe('Pipeline runs', () => {
           },
         ).as('refreshPipelineRecurringRuns');
 
-        pagination.findLastButton().click();
-        pagination.findInput().should('have.value', Math.ceil(15 / 10));
+        pagination.findNextButton().click();
         pipelineRecurringRunTable.getRowByName('another-pipeline-14').find().should('exist');
         pipelineRecurringRunTable.findRows().should('have.length', 5);
 
@@ -917,7 +911,6 @@ describe('Pipeline runs', () => {
         });
 
         // test Previous button
-        pagination.findLastButton().should('be.disabled');
         pagination.findNextButton().should('be.disabled');
         cy.interceptOdh(
           'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/recurringruns',
@@ -930,7 +923,6 @@ describe('Pipeline runs', () => {
           },
         );
         pagination.findPreviousButton().click();
-        pagination.findInput().should('have.value', '1');
         pipelineRecurringRunTable.getRowByName('another-pipeline-0').find().should('exist');
         pipelineRecurringRunTable.findRows().should('have.length', 10);
 
@@ -951,11 +943,8 @@ describe('Pipeline runs', () => {
         pipelineRecurringRunTable.getRowByName('another-pipeline-0').find().should('exist');
         pipelineRecurringRunTable.getRowByName('another-pipeline-14').find().should('exist');
         pipelineRecurringRunTable.findRows().should('have.length', 15);
-        pagination.findLastButton().should('be.disabled');
         pagination.findNextButton().should('be.disabled');
         pagination.findPreviousButton().should('be.disabled');
-        pagination.findFirstButton().should('be.disabled');
-        pagination.findInput().should('have.value', Math.ceil(15 / 20));
       });
     });
 

diff --git a/frontend/src/concepts/pipelines/content/compareRuns/metricsSection/roc/RocCurveTable.tsx b/frontend/src/concepts/pipelines/content/compareRuns/metricsSection/roc/RocCurveTable.tsx
@@ -27,7 +27,7 @@ const RocCurveTable: React.FC<RocCurveTableBaseProps> = ({
     {...checkboxTableProps.tableProps}
     data={fullArtifactPaths}
     columns={rocCurveColumns}
-    enablePagination
+    enablePagination="compact"
     emptyTableView={<DashboardEmptyTableView onClearFilters={() => setSearch('')} />}
     toolbarContent={
       <ToolbarItem>

diff --git a/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableBase.tsx b/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableBase.tsx
@@ -64,7 +64,7 @@ const ExperimentTable: React.FC<ExperimentTableProps> = ({
       itemCount={totalSize}
       data={experiments}
       columns={experimentColumns}
-      enablePagination
+      enablePagination="compact"
       emptyTableView={
         <DashboardEmptyTableView onClearFilters={filterToolbarProps.onClearFilters} />
       }

diff --git a/.../src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx b/.../src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
@@ -87,7 +87,7 @@ const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
         itemCount={totalSize}
         data={recurringRuns}
         columns={getColumns()}
-        enablePagination
+        enablePagination="compact"
         emptyTableView={
           <DashboardEmptyTableView onClearFilters={filterToolbarProps.onClearFilters} />
         }

diff --git a/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsMetricsSection.tsx b/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsMetricsSection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import _ from 'lodash-es';
+import * as _ from 'lodash-es';
 import { ExpandableSection, Tab, TabContentBody, TabTitleText, Tabs } from '@patternfly/react-core';
 import { useCompareRuns } from '~/concepts/pipelines/content/compareRuns/CompareRunsContext';
 import { useGetArtifactTypes } from '~/concepts/pipelines/apiHooks/mlmd/useGetArtifactTypes';