feat(ws): Add Empty State to Workspace list

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

@@ -21,11 +21,6 @@ import {
   ToolbarGroup,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  EmptyState,
-  EmptyStateFooter,
-  EmptyStateBody,
-  Button,
   Bullseye,
 } from '@patternfly/react-core';
 import {
@@ -39,8 +34,9 @@ import {
   ActionsColumn,
   IActions,
 } from '@patternfly/react-table';
-import { CodeIcon, FilterIcon, SearchIcon } from '@patternfly/react-icons';
+import { CodeIcon, FilterIcon } from '@patternfly/react-icons';
 import { WorkspaceKind, WorkspaceKindsColumnNames } from '~/shared/types';
+import EmptyStateWithClearFilters from 'shared/components/EmptyStateWithClearFilters';
 
 export enum ActionType {
   ViewDetails,
@@ -245,6 +241,12 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
     [sortedWorkspaceKinds, onFilter],
   );
 
+  const clearAllFilters = React.useCallback(() => {
+    setSearchNameValue('');
+    setStatusSelection('');
+    setSearchDescriptionValue('');
+  }, []);
+
   // Set up name search input
   const searchNameInput = React.useMemo(
     () => (
@@ -490,27 +492,14 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
 
   const emptyState = React.useMemo(
     () => (
-      <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
-        <EmptyStateBody>
-          No results match the filter criteria. Clear all filters and try again.
-        </EmptyStateBody>
-        <EmptyStateFooter>
-          <EmptyStateActions>
-            <Button
-              variant="link"
-              onClick={() => {
-                setSearchNameValue('');
-                setStatusSelection('');
-                setSearchDescriptionValue('');
-              }}
-            >
-              Clear all filters
-            </Button>
-          </EmptyStateActions>
-        </EmptyStateFooter>
-      </EmptyState>
+      <EmptyStateWithClearFilters
+        title="No results found"
+        body="No results match the filter criteria. Clear all filters and try again."
+        onClearFilters={clearAllFilters} // Pass the local clearAllFilters function
+        colSpan={8} // Pass colSpan for table usage
+      />
     ),
-    [],
+    [clearAllFilters],
   );
 
   // Actions
@@ -549,14 +538,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
             </Content>
             <br />
             <Content style={{ display: 'flex', alignItems: 'flex-start', columnGap: '20px' }}>
-              <Toolbar
-                id="attribute-search-filter-toolbar"
-                clearAllFilters={() => {
-                  setSearchNameValue('');
-                  setStatusSelection('');
-                  setSearchDescriptionValue('');
-                }}
-              >
+              <Toolbar id="attribute-search-filter-toolbar" clearAllFilters={clearAllFilters}>
                 <ToolbarContent>
                   <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
                     <ToolbarGroup variant="filter-group">

workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageList.tsx

@@ -7,13 +7,11 @@ import {
   ToolbarContent,
   Card,
   CardHeader,
-  EmptyState,
-  EmptyStateBody,
   CardBody,
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { WorkspaceImage } from '~/shared/types';
-import Filter, { FilteredColumn } from '~/shared/components/Filter';
+import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
+import EmptyStateWithClearFilters from 'shared/components/EmptyStateWithClearFilters';
 
 type WorkspaceCreationImageListProps = {
   images: WorkspaceImage[];
@@ -28,13 +26,19 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
   const [workspaceImages, setWorkspaceImages] = useState<WorkspaceImage[]>(images);
   const [filters, setFilters] = useState<FilteredColumn[]>([]);
 
+  const filterRef = React.useRef<FilterRef>(null);
+
   const filterableColumns = useMemo(
     () => ({
       name: 'Name',
     }),
     [],
   );
 
+  const clearAllFilters = useCallback(() => {
+    filterRef.current?.clearAll();
+  }, []);
+
   const getFilteredWorkspaceImagesByLabels = useCallback(
     (unfilteredImages: WorkspaceImage[]) =>
       unfilteredImages.filter((image) =>
@@ -97,6 +101,7 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
         <Toolbar id="toolbar-group-types">
           <ToolbarContent>
             <Filter
+              ref={filterRef}
               id="filter-workspace-images"
               onFilter={setFilters}
               columnNames={filterableColumns}
@@ -106,11 +111,11 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
       </PageSection>
       <PageSection isFilled>
         {workspaceImages.length === 0 && (
-          <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
-            <EmptyStateBody>
-              No results match the filter criteria. Clear all filters and try again.
-            </EmptyStateBody>
-          </EmptyState>
+          <EmptyStateWithClearFilters
+            title="No results found"
+            body="No results match the filter criteria. Clear all filters and try again."
+            onClearFilters={clearAllFilters}
+          />
         )}
         {workspaceImages.length > 0 && (
           <Gallery hasGutter aria-label="Selectable card container">

workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindList.tsx

@@ -8,12 +8,10 @@ import {
   ToolbarContent,
   Card,
   CardHeader,
-  EmptyState,
-  EmptyStateBody,
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { WorkspaceKind } from '~/shared/types';
-import Filter, { FilteredColumn } from '~/shared/components/Filter';
+import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
+import EmptyStateWithClearFilters from 'shared/components/EmptyStateWithClearFilters';
 
 type WorkspaceCreationKindListProps = {
   allWorkspaceKinds: WorkspaceKind[];
@@ -28,6 +26,8 @@ export const WorkspaceCreationKindList: React.FunctionComponent<WorkspaceCreatio
 }) => {
   const [workspaceKinds, setWorkspaceKinds] = useState<WorkspaceKind[]>(allWorkspaceKinds);
 
+  const filterRef = React.useRef<FilterRef>(null);
+
   const filterableColumns = useMemo(
     () => ({
       name: 'Name',
@@ -67,6 +67,10 @@ export const WorkspaceCreationKindList: React.FunctionComponent<WorkspaceCreatio
     [filterableColumns, allWorkspaceKinds],
   );
 
+  const clearAllFilters = useCallback(() => {
+    filterRef.current?.clearAll();
+  }, []);
+
   const onChange = useCallback(
     (event: React.FormEvent<HTMLInputElement>) => {
       const newSelectedWorkspaceKind = workspaceKinds.find(
@@ -83,7 +87,8 @@ export const WorkspaceCreationKindList: React.FunctionComponent<WorkspaceCreatio
         <Toolbar id="toolbar-group-types">
           <ToolbarContent>
             <Filter
-              id="filter-workspace-kinds"
+              ref={filterRef}
+              id="filter-workspace-images"
               onFilter={onFilter}
               columnNames={filterableColumns}
             />
@@ -92,11 +97,11 @@ export const WorkspaceCreationKindList: React.FunctionComponent<WorkspaceCreatio
       </PageSection>
       <PageSection isFilled>
         {workspaceKinds.length === 0 && (
-          <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
-            <EmptyStateBody>
-              No results match the filter criteria. Clear all filters and try again.
-            </EmptyStateBody>
-          </EmptyState>
+          <EmptyStateWithClearFilters
+            title="No results found"
+            body="No results match the filter criteria. Clear all filters and try again."
+            onClearFilters={clearAllFilters}
+          />
         )}
         {workspaceKinds.length > 0 && (
           <Gallery hasGutter aria-label="Selectable card container">

workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigList.tsx

@@ -7,13 +7,11 @@ import {
   ToolbarContent,
   Card,
   CardHeader,
-  EmptyState,
-  EmptyStateBody,
   CardBody,
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { WorkspacePodConfig } from '~/shared/types';
-import Filter, { FilteredColumn } from '~/shared/components/Filter';
+import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
+import EmptyStateWithClearFilters from 'shared/components/EmptyStateWithClearFilters';
 
 type WorkspaceCreationPodConfigListProps = {
   podConfigs: WorkspacePodConfig[];
@@ -28,6 +26,8 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
   const [workspacePodConfigs, setWorkspacePodConfigs] = useState<WorkspacePodConfig[]>(podConfigs);
   const [filters, setFilters] = useState<FilteredColumn[]>([]);
 
+  const filterRef = React.useRef<FilterRef>(null);
+
   const filterableColumns = useMemo(
     () => ({
       name: 'Name',
@@ -60,6 +60,10 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
     [workspacePodConfigs, onSelect],
   );
 
+  const clearAllFilters = useCallback(() => {
+    filterRef.current?.clearAll();
+  }, []);
+
   useEffect(() => {
     // Search name with search value
     let filteredWorkspacePodConfigs = podConfigs;
@@ -103,7 +107,8 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
         <Toolbar id="toolbar-group-types">
           <ToolbarContent>
             <Filter
-              id="filter-workspace-podConfigs"
+              ref={filterRef}
+              id="filter-workspace-images"
               onFilter={setFilters}
               columnNames={filterableColumns}
             />
@@ -112,11 +117,11 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
       </PageSection>
       <PageSection isFilled>
         {workspacePodConfigs.length === 0 && (
-          <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
-            <EmptyStateBody>
-              No results match the filter criteria. Clear all filters and try again.
-            </EmptyStateBody>
-          </EmptyState>
+          <EmptyStateWithClearFilters
+            title="No results found"
+            body="No results match the filter criteria. Clear all filters and try again."
+            onClearFilters={clearAllFilters}
+          />
         )}
         {workspacePodConfigs.length > 0 && (
           <Gallery hasGutter aria-label="Selectable card container">