Skip to content

Commit 2c3e75e

Browse files
liavweissLiav Weiss (EXT-Nokia)
liavweiss
and
Liav Weiss (EXT-Nokia)
authored
feat(ws): Add Empty State to Workspace list #259 (#338)
* feat(ws): Add Empty State to Workspace list #259 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> * feat(ws): Add Empty State to Workspace list #259 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> * feat(ws): Add Empty State to Workspace list #259 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> * feat(ws): Add Empty State to Workspace list #259 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> --------- Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> Co-authored-by: Liav Weiss (EXT-Nokia) <[email protected]>
1 parent 0ee177f commit 2c3e75e

File tree

7 files changed

+329
-252
lines changed

7 files changed

+329
-252
lines changed

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

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,6 @@ import {
2020
ToolbarGroup,
2121
ToolbarFilter,
2222
ToolbarToggleGroup,
23-
EmptyStateActions,
24-
EmptyState,
25-
EmptyStateFooter,
26-
EmptyStateBody,
27-
Button,
2823
Bullseye,
2924
} from '@patternfly/react-core';
3025
import {
@@ -38,12 +33,13 @@ import {
3833
ActionsColumn,
3934
IActions,
4035
} from '@patternfly/react-table';
41-
import { CodeIcon, FilterIcon, SearchIcon } from '@patternfly/react-icons';
36+
import { CodeIcon, FilterIcon } from '@patternfly/react-icons';
4237
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
4338
import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
4439
import { useWorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
4540
import { WorkspaceKindsColumnNames } from '~/app/types';
4641
import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput';
42+
import CustomEmptyState from '~/shared/components/CustomEmptyState';
4743

4844
export enum ActionType {
4945
ViewDetails,
@@ -178,6 +174,12 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
178174
[sortedWorkspaceKinds, onFilter],
179175
);
180176

177+
const clearAllFilters = React.useCallback(() => {
178+
setSearchNameValue('');
179+
setStatusSelection('');
180+
setSearchDescriptionValue('');
181+
}, []);
182+
181183
// Set up status single select
182184
const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState<boolean>(false);
183185
const statusToggleRef = React.useRef<HTMLButtonElement>(null);
@@ -396,28 +398,8 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
396398
);
397399

398400
const emptyState = React.useMemo(
399-
() => (
400-
<EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
401-
<EmptyStateBody>
402-
No results match the filter criteria. Clear all filters and try again.
403-
</EmptyStateBody>
404-
<EmptyStateFooter>
405-
<EmptyStateActions>
406-
<Button
407-
variant="link"
408-
onClick={() => {
409-
setSearchNameValue('');
410-
setStatusSelection('');
411-
setSearchDescriptionValue('');
412-
}}
413-
>
414-
Clear all filters
415-
</Button>
416-
</EmptyStateActions>
417-
</EmptyStateFooter>
418-
</EmptyState>
419-
),
420-
[],
401+
() => <CustomEmptyState onClearFilters={clearAllFilters} />,
402+
[clearAllFilters],
421403
);
422404

423405
// Actions
@@ -464,14 +446,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
464446
</Content>
465447
<br />
466448
<Content style={{ display: 'flex', alignItems: 'flex-start', columnGap: '20px' }}>
467-
<Toolbar
468-
id="attribute-search-filter-toolbar"
469-
clearAllFilters={() => {
470-
setSearchNameValue('');
471-
setStatusSelection('');
472-
setSearchDescriptionValue('');
473-
}}
474-
>
449+
<Toolbar id="attribute-search-filter-toolbar" clearAllFilters={clearAllFilters}>
475450
<ToolbarContent>
476451
<ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
477452
<ToolbarGroup variant="filter-group">

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,11 @@ import {
77
ToolbarContent,
88
Card,
99
CardHeader,
10-
EmptyState,
11-
EmptyStateBody,
1210
CardBody,
1311
} from '@patternfly/react-core';
14-
import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
15-
import Filter, { FilteredColumn } from '~/shared/components/Filter';
12+
import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
1613
import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes';
14+
import CustomEmptyState from '~/shared/components/CustomEmptyState';
1715

1816
type WorkspaceCreationImageListProps = {
1917
images: WorkspaceImageConfigValue[];
@@ -27,6 +25,7 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
2725
> = ({ images, selectedLabels, selectedImage, onSelect }) => {
2826
const [workspaceImages, setWorkspaceImages] = useState<WorkspaceImageConfigValue[]>(images);
2927
const [filters, setFilters] = useState<FilteredColumn[]>([]);
28+
const filterRef = React.useRef<FilterRef>(null);
3029

3130
const filterableColumns = useMemo(
3231
() => ({
@@ -49,6 +48,10 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
4948
[selectedLabels],
5049
);
5150

51+
const clearAllFilters = useCallback(() => {
52+
filterRef.current?.clearAll();
53+
}, []);
54+
5255
const onChange = useCallback(
5356
(event: React.FormEvent<HTMLInputElement>) => {
5457
const newSelectedWorkspaceImage = workspaceImages.find(
@@ -96,6 +99,7 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
9699
<Toolbar id="toolbar-group-types">
97100
<ToolbarContent>
98101
<Filter
102+
ref={filterRef}
99103
id="filter-workspace-images"
100104
onFilter={setFilters}
101105
columnNames={filterableColumns}
@@ -104,13 +108,7 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
104108
</Toolbar>
105109
</PageSection>
106110
<PageSection isFilled>
107-
{workspaceImages.length === 0 && (
108-
<EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
109-
<EmptyStateBody>
110-
No results match the filter criteria. Clear all filters and try again.
111-
</EmptyStateBody>
112-
</EmptyState>
113-
)}
111+
{workspaceImages.length === 0 && <CustomEmptyState onClearFilters={clearAllFilters} />}
114112
{workspaceImages.length > 0 && (
115113
<Gallery hasGutter aria-label="Selectable card container">
116114
{workspaceImages.map((image) => (

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,10 @@ import {
88
ToolbarContent,
99
Card,
1010
CardHeader,
11-
EmptyState,
12-
EmptyStateBody,
1311
} from '@patternfly/react-core';
14-
import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
1512
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
16-
import Filter, { FilteredColumn } from '~/shared/components/Filter';
13+
import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
14+
import CustomEmptyState from '~/shared/components/CustomEmptyState';
1715

1816
type WorkspaceCreationKindListProps = {
1917
allWorkspaceKinds: WorkspaceKind[];
@@ -27,6 +25,7 @@ export const WorkspaceCreationKindList: React.FunctionComponent<WorkspaceCreatio
2725
onSelect,
2826
}) => {
2927
const [workspaceKinds, setWorkspaceKinds] = useState<WorkspaceKind[]>(allWorkspaceKinds);
28+
const filterRef = React.useRef<FilterRef>(null);
3029

3130
const filterableColumns = useMemo(
3231
() => ({
@@ -67,6 +66,10 @@ export const WorkspaceCreationKindList: React.FunctionComponent<WorkspaceCreatio
6766
[filterableColumns, allWorkspaceKinds],
6867
);
6968

69+
const clearAllFilters = useCallback(() => {
70+
filterRef.current?.clearAll();
71+
}, []);
72+
7073
const onChange = useCallback(
7174
(event: React.FormEvent<HTMLInputElement>) => {
7275
const newSelectedWorkspaceKind = workspaceKinds.find(
@@ -83,21 +86,16 @@ export const WorkspaceCreationKindList: React.FunctionComponent<WorkspaceCreatio
8386
<Toolbar id="toolbar-group-types">
8487
<ToolbarContent>
8588
<Filter
86-
id="filter-workspace-kinds"
89+
ref={filterRef}
90+
id="filter-workspace-images"
8791
onFilter={onFilter}
8892
columnNames={filterableColumns}
8993
/>
9094
</ToolbarContent>
9195
</Toolbar>
9296
</PageSection>
9397
<PageSection isFilled>
94-
{workspaceKinds.length === 0 && (
95-
<EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
96-
<EmptyStateBody>
97-
No results match the filter criteria. Clear all filters and try again.
98-
</EmptyStateBody>
99-
</EmptyState>
100-
)}
98+
{workspaceKinds.length === 0 && <CustomEmptyState onClearFilters={clearAllFilters} />}
10199
{workspaceKinds.length > 0 && (
102100
<Gallery hasGutter aria-label="Selectable card container">
103101
{workspaceKinds.map((kind) => (

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,11 @@ import {
77
ToolbarContent,
88
Card,
99
CardHeader,
10-
EmptyState,
11-
EmptyStateBody,
1210
CardBody,
1311
} from '@patternfly/react-core';
14-
import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
1512
import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
16-
import Filter, { FilteredColumn } from '~/shared/components/Filter';
13+
import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
14+
import CustomEmptyState from '~/shared/components/CustomEmptyState';
1715

1816
type WorkspaceCreationPodConfigListProps = {
1917
podConfigs: WorkspacePodConfigValue[];
@@ -28,6 +26,7 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
2826
const [workspacePodConfigs, setWorkspacePodConfigs] =
2927
useState<WorkspacePodConfigValue[]>(podConfigs);
3028
const [filters, setFilters] = useState<FilteredColumn[]>([]);
29+
const filterRef = React.useRef<FilterRef>(null);
3130

3231
const filterableColumns = useMemo(
3332
() => ({
@@ -50,6 +49,10 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
5049
[selectedLabels],
5150
);
5251

52+
const clearAllFilters = useCallback(() => {
53+
filterRef.current?.clearAll();
54+
}, []);
55+
5356
const onChange = useCallback(
5457
(event: React.FormEvent<HTMLInputElement>) => {
5558
const newSelectedWorkspacePodConfig = workspacePodConfigs.find(
@@ -103,21 +106,16 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
103106
<Toolbar id="toolbar-group-types">
104107
<ToolbarContent>
105108
<Filter
106-
id="filter-workspace-podConfigs"
109+
ref={filterRef}
110+
id="filter-workspace-images"
107111
onFilter={setFilters}
108112
columnNames={filterableColumns}
109113
/>
110114
</ToolbarContent>
111115
</Toolbar>
112116
</PageSection>
113117
<PageSection isFilled>
114-
{workspacePodConfigs.length === 0 && (
115-
<EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
116-
<EmptyStateBody>
117-
No results match the filter criteria. Clear all filters and try again.
118-
</EmptyStateBody>
119-
</EmptyState>
120-
)}
118+
{workspacePodConfigs.length === 0 && <CustomEmptyState onClearFilters={clearAllFilters} />}
121119
{workspacePodConfigs.length > 0 && (
122120
<Gallery hasGutter aria-label="Selectable card container">
123121
{workspacePodConfigs.map((podConfig) => (

0 commit comments

Comments
 (0)