fix: clear all filters (kubeflow#1262)

Signed-off-by: rsun19 <[email protected]>

Author: rsun19

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts

@@ -184,6 +184,10 @@ class ModelRegistry {
     return cy.findByTestId('registered-model-table-search');
   }
 
+  findModelVersionsTableToolbar() {
+    return cy.findByTestId('model-versions-table-toolbar');
+  }
+
   findModelVersionsTableSearch() {
     return cy.findByTestId('model-versions-table-search');
   }
@@ -207,6 +211,10 @@ class ModelRegistry {
   findRegisterModelButton() {
     return cy.findByRole('button', { name: 'Register model' });
   }
+
+  findRegisteredModelsTableToolbar() {
+    return cy.findByTestId('registered-models-table-toolbar');
+  }
 }
 
 export const modelRegistry = new ModelRegistry();

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelVersionArchive.ts

@@ -93,6 +93,14 @@ class ModelVersionArchive {
     cy.findByTestId('empty-archive-state').should('exist');
   }
 
+  findArchivedVersionTableToolbar() {
+    return cy.findByTestId('model-versions-archive-table-toolbar');
+  }
+
+  findArchivedVersionTableSearch() {
+    return cy.findByTestId('model-versions-archive-table-search');
+  }
+
   findArchiveVersionBreadcrumbItem() {
     return cy.findByTestId('archive-version-page-breadcrumb');
   }

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/registeredModelArchive.ts

@@ -104,6 +104,14 @@ class ModelArchive {
     return cy.findByTestId('registered-models-archive-table');
   }
 
+  findArchiveModelsTableSearch() {
+    return cy.findByTestId('registered-models-archive-table-search');
+  }
+
+  findArchiveModelsTableToolbar() {
+    return cy.findByTestId('registered-models-archive-table-toolbar');
+  }
+
   findArchiveModelsTableRows() {
     return this.findArchiveModelTable().find('tbody tr');
   }

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelRegistry.cy.ts

@@ -261,6 +261,11 @@ describe('Model Registry core', () => {
       modelRegistry.findTableSearch().type('Fraud detection model');
       modelRegistry.findTableRows().should('have.length', 1);
       modelRegistry.findTableRows().contains('Fraud detection model');
+      modelRegistry
+        .findRegisteredModelsTableToolbar()
+        .findByRole('button', { name: 'Clear all filters' })
+        .click();
+      modelRegistry.findTableRows().should('have.length', 2);
     });
   });
 });

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionArchive.cy.ts

@@ -187,6 +187,13 @@ describe('Model version archive list', () => {
 
     // name, last modified, owner, labels modal
     modelVersionArchive.findArchiveVersionTable().should('be.visible');
+
+    modelVersionArchive.findArchivedVersionTableSearch().type('model version 1');
+    modelVersionArchive.findArchiveVersionsTableRows().should('have.length', 1);
+    modelVersionArchive
+      .findArchivedVersionTableToolbar()
+      .findByRole('button', { name: 'Clear all filters' })
+      .click();
     modelVersionArchive.findArchiveVersionsTableRows().should('have.length', 2);
 
     const archiveVersionRow = modelVersionArchive.getRow('model version 1');

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersions.cy.ts

@@ -224,13 +224,22 @@ describe('Model Versions', () => {
     modelRegistry.findModelVersionsTableSearch().type('new model version');
     modelRegistry.findModelVersionsTableRows().should('have.length', 1);
     modelRegistry.findModelVersionsTableRows().contains('new model version');
-    modelRegistry.findModelVersionsTableSearch().focused().clear();
+    modelRegistry
+      .findModelVersionsTableToolbar()
+      .findByRole('button', { name: 'Clear all filters' })
+      .click();
+    modelRegistry.findModelVersionsTableRows().should('have.length', 2);
 
     // filtering by model version author
     modelRegistry.findModelVersionsTableFilter().findSelectOption('Author').click();
     modelRegistry.findModelVersionsTableSearch().type('Test author');
     modelRegistry.findModelVersionsTableRows().should('have.length', 1);
     modelRegistry.findModelVersionsTableRows().contains('Test author');
+    modelRegistry
+      .findModelVersionsTableToolbar()
+      .findByRole('button', { name: 'Clear all filters' })
+      .click();
+    modelRegistry.findModelVersionsTableRows().should('have.length', 2);
   });
 
   it('Model version details back button should lead to versions table', () => {

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/registeredModelArchive.cy.ts

@@ -219,6 +219,12 @@ describe('Model archive list', () => {
 
     // name, last modified, owner, labels modal
     registeredModelArchive.findArchiveModelTable().should('be.visible');
+    registeredModelArchive.findArchiveModelsTableSearch().type('model 1');
+    registeredModelArchive.findArchiveModelsTableRows().should('have.length', 1);
+    registeredModelArchive
+      .findArchiveModelsTableToolbar()
+      .findByRole('button', { name: 'Clear all filters' })
+      .click();
     registeredModelArchive.findArchiveModelsTableRows().should('have.length', 2);
 
     const archiveModelRow = registeredModelArchive.getRow('model 1');

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx

@@ -130,7 +130,7 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
         clearFilters={resetFilters}
         modelVersions={sortModelVersionsByCreateTime(filteredModelVersions)}
         toolbarContent={
-          <Toolbar data-testid="model-versions-table-toolbar">
+          <Toolbar data-testid="model-versions-table-toolbar" clearAllFilters={resetFilters}>
             <ToolbarContent>
               <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
                 <ToolbarGroup variant="filter-group">

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx

@@ -51,7 +51,7 @@ const ModelVersionsArchiveListView: React.FC<ModelVersionsArchiveListViewProps>
       clearFilters={resetFilters}
       modelVersions={filteredModelVersions}
       toolbarContent={
-        <Toolbar>
+        <Toolbar data-testid="model-versions-archive-table-toolbar" clearAllFilters={resetFilters}>
           <ToolbarContent>
             <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
               <ToolbarGroup variant="filter-group">

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx

@@ -58,7 +58,10 @@ const RegisteredModelsArchiveListView: React.FC<RegisteredModelsArchiveListViewP
       clearFilters={resetFilters}
       registeredModels={filteredRegisteredModels}
       toolbarContent={
-        <Toolbar>
+        <Toolbar
+          data-testid="registered-models-archive-table-toolbar"
+          clearAllFilters={resetFilters}
+        >
           <ToolbarContent>
             <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
               <ToolbarGroup variant="filter-group">