Search - 'Clear all Filters' doesn't work (#3271)

* saving * lable change * addressed comments
opendatahub-io · Oct 10, 2024 · a3c2b58 · a3c2b58
1 parent 355fbf7
commit a3c2b58
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 10 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts
@@ -155,14 +155,14 @@ describe('ClusterStorage', () => {
     addClusterStorageModal.findMountField().fill('test2');
     addClusterStorageModal
       .findMountFieldHelperText()
-      .should('have.text', 'Must only consist of lower case letters and dashes.');
+      .should('have.text', 'Must only consist of lowercase letters and dashes.');
 
     // Allow trailing slash
     addClusterStorageModal.findMountField().clear();
     addClusterStorageModal.findMountField().fill('test/');
     addClusterStorageModal
       .findMountFieldHelperText()
-      .should('have.text', 'Must consist of lower case letters and dashes.');
+      .should('have.text', 'Must consist of lowercase letters and dashes.');
 
     addClusterStorageModal.findMountField().clear();
     addClusterStorageModal

diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -121,7 +121,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
                       variant: 'error',
                     })}
                   >
-                    {`Must consist of lower case alphanumeric characters or '-', and must start and
+                    {`Must consist of lowercase alphanumeric characters or '-', and must start and
                     end with an alphanumeric character`}
                   </HelperTextItem>
                 </HelperText>

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx
@@ -26,6 +26,7 @@ const ModelVersionsTable: React.FC<ModelVersionsTableProps> = ({
     toolbarContent={toolbarContent}
     defaultSortColumn={3}
     enablePagination
+    onClearFilters={clearFilters}
     emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
     rowRenderer={(mv) => (
       <ModelVersionsTableRow

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx
@@ -23,6 +23,7 @@ const ModelVersionsArchiveTable: React.FC<ModelVersionsArchiveTableProps> = ({
     columns={mvColumns}
     toolbarContent={toolbarContent}
     enablePagination
+    onClearFilters={clearFilters}
     emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
     defaultSortColumn={1}
     rowRenderer={(mv) => (

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -75,8 +75,8 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
     <ToolbarGroup variant="filter-group">
       <ToolbarFilter
         chips={search === '' ? [] : [search]}
-        deleteChip={() => setSearch('')}
-        deleteChipGroup={() => setSearch('')}
+        deleteChip={resetFilters}
+        deleteChipGroup={resetFilters}
         categoryName="Keyword"
       >
         <SimpleSelect
@@ -101,7 +101,7 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
           onChange={(_, searchValue) => {
             setSearch(searchValue);
           }}
-          onClear={() => setSearch('')}
+          onClear={resetFilters}
           style={{ minWidth: '200px' }}
           data-testid="registered-model-table-search"
         />
@@ -114,7 +114,12 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
       refresh={refresh}
       clearFilters={resetFilters}
       registeredModels={filteredRegisteredModels}
-      toolbarContent={<RegisteredModelsTableToolbar toggleGroupItems={toggleGroupItems} />}
+      toolbarContent={
+        <RegisteredModelsTableToolbar
+          toggleGroupItems={toggleGroupItems}
+          onClearAllFilters={resetFilters}
+        />
+      }
     />
   );
 };

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx
@@ -23,6 +23,7 @@ const RegisteredModelTable: React.FC<RegisteredModelTableProps> = ({
     columns={rmColumns}
     toolbarContent={toolbarContent}
     defaultSortColumn={2}
+    onClearFilters={clearFilters}
     enablePagination
     emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
     rowRenderer={(rm) => (

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableToolbar.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableToolbar.tsx
@@ -22,10 +22,12 @@ import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/M
 
 type RegisteredModelsTableToolbarProps = {
   toggleGroupItems?: React.ReactNode;
+  onClearAllFilters?: () => void;
 };
 
 const RegisteredModelsTableToolbar: React.FC<RegisteredModelsTableToolbarProps> = ({
   toggleGroupItems: tableToggleGroupItems,
+  onClearAllFilters,
 }) => {
   const navigate = useNavigate();
   const { preferredModelRegistry } = React.useContext(ModelRegistrySelectorContext);
@@ -35,7 +37,7 @@ const RegisteredModelsTableToolbar: React.FC<RegisteredModelsTableToolbarProps>
   const tooltipRef = React.useRef<HTMLButtonElement>(null);
 
   return (
-    <Toolbar data-testid="registered-models-table-toolbar">
+    <Toolbar data-testid="registered-models-table-toolbar" clearAllFilters={onClearAllFilters}>
       <ToolbarContent>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           {tableToggleGroupItems}

diff --git a/.../src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx b/.../src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx
@@ -23,6 +23,7 @@ const RegisteredModelsArchiveTable: React.FC<RegisteredModelsArchiveTableProps>
     columns={rmColumns}
     toolbarContent={toolbarContent}
     defaultSortColumn={2}
+    onClearFilters={clearFilters}
     enablePagination
     emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
     rowRenderer={(rm) => (

diff --git a/frontend/src/pages/projects/pvc/MountPathField.tsx b/frontend/src/pages/projects/pvc/MountPathField.tsx
@@ -39,7 +39,7 @@ const MountPathField: React.FC<MountPathFieldProps> = ({
             if (value.length === 0) {
               error = 'Enter a path to a model or folder. This path cannot point to a root folder.';
             } else if (!/^[a-z-]+\/?$/.test(value)) {
-              error = 'Must only consist of lower case letters and dashes.';
+              error = 'Must only consist of lowercase letters and dashes.';
             } else if (inUseMountPaths.includes(`/${value}`)) {
               error = 'Mount folder is already in use for this workbench.';
             }
@@ -54,7 +54,7 @@ const MountPathField: React.FC<MountPathFieldProps> = ({
           variant={mountPath.error ? 'error' : 'default'}
           data-testid="mount-path-folder-helper-text"
         >
-          {mountPath.error || 'Must consist of lower case letters and dashes.'}
+          {mountPath.error || 'Must consist of lowercase letters and dashes.'}
         </HelperTextItem>
       </HelperText>
     </FormHelperText>