Skip to content

Commit b4330c6

Browse files
pplaskiepplaskie
committed
Refactor code of picker filters
1 parent 7dc329e commit b4330c6

File tree

4 files changed

+43
-45
lines changed

4 files changed

+43
-45
lines changed

‎web_ui/src/shared/components/header/jobs-management/jobs-actions/jobs-dialog.interface.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Copyright (C) 2022-2025 Intel Corporation
2+
// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
3+
4+
import { JobType } from '../../../../../core/jobs/jobs.const';
5+
6+
export interface FiltersType {
7+
projectId: string | undefined;
8+
userId: string | undefined;
9+
jobTypes: JobType[];
10+
}

‎web_ui/src/shared/components/header/jobs-management/jobs-actions/jobs-filtering.component.tsx

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright (C) 2022-2025 Intel Corporation
22
// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
33

4-
import { Key, useCallback, useEffect, useMemo, useState } from 'react';
4+
import { Key, useCallback, useEffect, useMemo } from 'react';
55

66
import { InfiniteQueryObserverResult } from '@tanstack/react-query';
77
import isEmpty from 'lodash/isEmpty';
@@ -16,26 +16,23 @@ import { useWorkspaceIdentifier } from '../../../../../providers/workspaces-prov
1616
import { hasEqualId, isNonEmptyArray } from '../../../../utils';
1717
import { JobsFilterField } from '../jobs-filter-field.component';
1818
import { JobsTypeFilterField } from './job-types-filter-field.component';
19+
import { FiltersType } from './jobs-dialog.interface';
1920

2021
interface JobsFilteringDefaultValuesProps {
21-
projectIdFilter: string | undefined;
22-
userIdFilter: string | undefined;
23-
jobTypeFilter: JobType[];
22+
projectId: string | undefined;
23+
userId: string | undefined;
24+
jobTypes: JobType[];
2425
}
2526

2627
interface JobsFilteringProps {
27-
defaultValues: JobsFilteringDefaultValuesProps;
28-
onChange: (projectId: string | undefined, userId: string | undefined, type: JobType[]) => void;
28+
values: JobsFilteringDefaultValuesProps;
29+
onChange: (newFilters: FiltersType) => void;
2930
}
3031

31-
export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps): JSX.Element => {
32+
export const JobsFiltering = ({ values, onChange }: JobsFilteringProps): JSX.Element => {
3233
const { organizationId, workspaceId } = useWorkspaceIdentifier();
3334

34-
const { projectIdFilter, userIdFilter, jobTypeFilter } = defaultValues;
35-
36-
const [selectedProject, setSelectedProject] = useState<string | undefined>(projectIdFilter);
37-
const [selectedUser, setSelectedUser] = useState<string | undefined>(userIdFilter);
38-
const [selectedJobTypes, setSelectedJobTypes] = useState<JobType[]>(jobTypeFilter);
35+
const { projectId, userId, jobTypes } = values;
3936

4037
const { useGetProjects } = useProjectActions();
4138
const {
@@ -55,9 +52,9 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
5552
const { useGetUsersQuery } = useUsers();
5653
const { users, isLoading: isLoadingUsers } = useGetUsersQuery(
5754
organizationId,
58-
selectedProject
55+
projectId
5956
? {
60-
resourceId: selectedProject,
57+
resourceId: projectId,
6158
resourceType: RESOURCE_TYPE.PROJECT,
6259
}
6360
: undefined
@@ -95,29 +92,24 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
9592
const setSelectedProjectHandler = (key: Key | null): void => {
9693
const newFilterValue: undefined | string = isEmpty(key) ? undefined : (key as string);
9794

98-
setSelectedProject(newFilterValue);
95+
onChange({ ...values, projectId: newFilterValue });
9996
};
10097

10198
const setSelectedUserHandler = (key: Key | null): void => {
10299
const newFilterValue: undefined | string = isEmpty(key) ? undefined : (key as string);
103100

104-
setSelectedUser(newFilterValue);
101+
onChange({ ...values, userId: newFilterValue });
105102
};
106103

107104
useEffect(() => {
108105
if (isLoadingUsers) return;
109106

110-
const isSelectedUserInProject: boolean | undefined = users?.some(hasEqualId(selectedUser));
107+
const isSelectedUserInProject: boolean | undefined = users?.some(hasEqualId(userId));
111108

112109
if (!!isSelectedUserInProject) return;
113110

114-
setSelectedUser(undefined);
115-
onChange(selectedProject, undefined, selectedJobTypes);
116-
}, [isLoadingUsers, onChange, selectedJobTypes, selectedProject, selectedUser, users]);
117-
118-
useEffect(() => {
119-
onChange(selectedProject, selectedUser, selectedJobTypes);
120-
}, [selectedProject, selectedUser, selectedJobTypes, onChange]);
111+
onChange({ ...values, userId: undefined });
112+
}, [isLoadingUsers, onChange, users, userId, values]);
121113

122114
return (
123115
<>
@@ -126,7 +118,7 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
126118
ariaLabel={'Job scheduler filter project'}
127119
dataTestId={'job-scheduler-filter-project'}
128120
options={[allProjectOption, ...projectOptions]}
129-
value={selectedProject ?? allProjectOption.key}
121+
value={projectId ?? allProjectOption.key}
130122
onSelectionChange={setSelectedProjectHandler}
131123
isLoading={isLoadingProjects || isFetchingNextPage}
132124
loadMore={loadMoreProjects}
@@ -136,11 +128,14 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
136128
ariaLabel={'Job scheduler filter user'}
137129
dataTestId={'job-scheduler-filter-user'}
138130
options={[allUsersOption, ...usersOptions]}
139-
value={selectedUser ?? allUsersOption.key}
131+
value={userId ?? allUsersOption.key}
140132
onSelectionChange={setSelectedUserHandler}
141133
isLoading={isLoadingUsers}
142134
/>
143-
<JobsTypeFilterField selectedJobTypes={selectedJobTypes} setSelectedJobTypes={setSelectedJobTypes} />
135+
<JobsTypeFilterField
136+
selectedJobTypes={jobTypes}
137+
setSelectedJobTypes={(newJobTypes) => onChange({ ...values, jobTypes: newJobTypes })}
138+
/>
144139
</>
145140
);
146141
};

‎web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { keepPreviousData } from '@tanstack/react-query';
1010

1111
import { useJobs } from '../../../../core/jobs/hooks/use-jobs.hook';
1212
import { NORMAL_INTERVAL } from '../../../../core/jobs/hooks/utils';
13-
import { JobState, JobType } from '../../../../core/jobs/jobs.const';
13+
import { JobState } from '../../../../core/jobs/jobs.const';
1414
import { JobCount } from '../../../../core/jobs/jobs.interface';
1515
import { useWorkspaceIdentifier } from '../../../../providers/workspaces-provider/use-workspace-identifier.hook';
1616
import { CornerIndicator } from '../../corner-indicator/corner-indicator.component';
@@ -22,6 +22,7 @@ import { SortDirection } from '../../sort-by-attribute/sort-by-attribute.compone
2222
import { Tabs } from '../../tabs/tabs.component';
2323
import { TabItem } from '../../tabs/tabs.interface';
2424
import { Fullscreen } from './jobs-actions/fullscreen.component';
25+
import { FiltersType } from './jobs-actions/jobs-dialog.interface';
2526
import { JobsFiltering } from './jobs-actions/jobs-filtering.component';
2627
import { JobsList } from './jobs-list.component';
2728
import { getAllJobs } from './utils';
@@ -57,10 +58,10 @@ export const JobsDialog = ({ isFullScreen, onClose, setIsFullScreen }: JobsDialo
5758
[TODAY]
5859
);
5960

60-
const [filters, setFilters] = useState({
61-
projectId: undefined as string | undefined,
62-
userId: undefined as string | undefined,
63-
jobTypes: [] as JobType[],
61+
const [filters, setFilters] = useState<FiltersType>({
62+
projectId: undefined,
63+
userId: undefined,
64+
jobTypes: [],
6465
});
6566

6667
const [range, setRange] = useState<RangeValue<DateValue>>(INITIAL_DATES);
@@ -90,6 +91,7 @@ export const JobsDialog = ({ isFullScreen, onClose, setIsFullScreen }: JobsDialo
9091
() => JSON.stringify(range) === JSON.stringify(INITIAL_DATES),
9192
[range, INITIAL_DATES]
9293
);
94+
9395
const areFiltersChanged = useMemo(
9496
() => !isInitialRange || !!filters.projectId || !!filters.userId || !!filters.jobTypes.length,
9597
[isInitialRange, filters]
@@ -148,9 +150,6 @@ export const JobsDialog = ({ isFullScreen, onClose, setIsFullScreen }: JobsDialo
148150
setRange(INITIAL_DATES);
149151
};
150152

151-
const handleFilteringChange = (projectId: string | undefined, userId: string | undefined, jobTypes: JobType[]) => {
152-
setFilters((prev) => ({ ...prev, projectId, userId, jobTypes }));
153-
};
154153
const handleRangeChange = (value: SetStateAction<RangeValue<DateValue>> | null) => {
155154
value === null ? setRange(INITIAL_DATES) : setRange(value);
156155
};
@@ -160,15 +159,7 @@ export const JobsDialog = ({ isFullScreen, onClose, setIsFullScreen }: JobsDialo
160159
<Content>
161160
<Flex alignItems='center' marginBottom='size-150'>
162161
<Flex flex={4} alignItems='center' justifyContent='left' gap='size-300'>
163-
<JobsFiltering
164-
onChange={handleFilteringChange}
165-
defaultValues={{
166-
projectIdFilter: filters.projectId,
167-
userIdFilter: filters.userId,
168-
jobTypeFilter: filters.jobTypes,
169-
}}
170-
key={`${filters.projectId}${filters.userId}${filters.jobTypes}`}
171-
/>
162+
<JobsFiltering onChange={setFilters} values={filters} />
172163

173164
<CornerIndicator isActive={!isInitialRange}>
174165
<DateRangePickerSmall

‎web_ui/src/test-utils/utils.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ export const checkTooltip = async (element: HTMLElement, tooltipText: Matcher) =
5959
onHoverTooltip(element);
6060
jest.advanceTimersByTime(750);
6161

62-
expect(await screen.findByText(tooltipText)).toBeInTheDocument();
62+
expect((await screen.findByRole('tooltip')).textContent).toBe(tooltipText);
63+
64+
jest.useRealTimers();
6365
};
6466

6567
export const hover = (element: HTMLElement) => {

0 commit comments

Comments
 (0)