ITEP-28186 Filter jobs by date

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.component.tsx

@@ -0,0 +1,93 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+import { FC, ReactNode, useState } from 'react';
+
+import {
+    Content,
+    DateField,
+    Dialog,
+    DialogTrigger,
+    Flex,
+    Heading,
+    RangeCalendar,
+    Tooltip,
+    TooltipTrigger,
+    useDateFormatter,
+} from '@adobe/react-spectrum';
+import { DateValue, getLocalTimeZone } from '@internationalized/date';
+import Calendar from '@spectrum-icons/workflow/Calendar';
+import isEmpty from 'lodash/isEmpty';
+import { RangeCalendarProps } from 'react-aria-components';
+
+import { QuietActionButton } from '../quiet-button/quiet-action-button.component';
+
+interface DateRangePickerSmall extends RangeCalendarProps<DateValue> {
+    hasManualEdition?: boolean;
+    headerContent?: ReactNode;
+}
+
+export const DateRangePickerSmall: FC<DateRangePickerSmall> = ({
+    hasManualEdition,
+    headerContent,
+    value: range,
+    onChange,
+    ...props
+}) => {
+    const formatter = useDateFormatter({ dateStyle: 'long' });
+    const [focusedDate, setFocusedDate] = useState<DateValue | undefined>();
+
+    const rangeText = isEmpty(range)
+        ? ''
+        : formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone()));
+
+    const handleOnChange = (attribute: 'start' | 'end', value: DateValue | null | undefined) => {
+        if (isEmpty(value) || isEmpty(range)) {
+            return;
+        }
+
+        onChange && onChange({ ...range, [attribute]: value });
+        setFocusedDate(value);
+    };
+
+    const rangeFields = (
+        <Flex gap={'size-50'}>
+            <DateField
+                isQuiet={false}
+                label='From'
+                value={range?.start}
+                onChange={(value) => handleOnChange('start', value)}
+            />
+            <DateField
+                isQuiet={false}
+                label='To'
+                value={range?.end}
+                onChange={(value) => handleOnChange('end', value)}
+            />
+        </Flex>
+    );
+
+    return (
+        <DialogTrigger type='popover'>
+            <TooltipTrigger placement={'bottom'}>
+                <QuietActionButton aria-label='Select date range'>
+                    <Calendar />
+                </QuietActionButton>
+                <Tooltip>{rangeText}</Tooltip>
+            </TooltipTrigger>
+            <Dialog>
+                {headerContent ? <Heading>{headerContent}</Heading> : <></>}
+                <Content>
+                    <RangeCalendar
+                        {...props}
+                        value={range}
+                        onChange={onChange}
+                        focusedValue={focusedDate}
+                        onFocusChange={setFocusedDate}
+                    />
+                    {hasManualEdition ? rangeFields : <p>{rangeText}</p>}
+                </Content>
+            </Dialog>
+        </DialogTrigger>
+    );
+};

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.test.tsx

@@ -0,0 +1,70 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+import { CalendarDate } from '@internationalized/date';
+import { RangeValue } from '@react-types/shared';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { providersRender as render } from '../../../test-utils/required-providers-render';
+import { DateRangePickerSmall } from './date-range-picker-small.component';
+
+describe('DateRangePickerSmall Component', () => {
+    const MOCKED_TODAY = new CalendarDate(2025, 4, 30);
+
+    const INITIAL_DATES: RangeValue<CalendarDate> = {
+        start: MOCKED_TODAY.subtract({ months: 1 }),
+        end: MOCKED_TODAY,
+    };
+
+    const mockOnChange = jest.fn();
+
+    const renderComponent = (props = {}) =>
+        render(
+            <DateRangePickerSmall
+                value={INITIAL_DATES}
+                onChange={mockOnChange}
+                hasManualEdition={true}
+                headerContent='Select Date Range'
+                {...props}
+            />
+        );
+
+    afterEach(() => {
+        userEvent.keyboard('{escape}');
+    });
+
+    it('should open the date range dialog when the button is clicked', async () => {
+        renderComponent();
+
+        expect(screen.getByRole('button', { name: 'Select date range' })).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button', { name: 'Select date range' }));
+        expect(await screen.findByRole('dialog')).toBeVisible();
+
+        expect(screen.getByText('Select Date Range')).toBeInTheDocument();
+        expect(await screen.findByRole('dialog')).toBeVisible();
+    });
+
+    it('should allow manual editing of the date range', async () => {
+        renderComponent();
+
+        const button = screen.getByRole('button', { name: 'Select date range' });
+        expect(button).toBeInTheDocument();
+
+        await userEvent.click(button);
+        expect(await screen.findByRole('dialog')).toBeVisible();
+
+        const march3rdButton = screen.getByRole('button', { name: 'Monday, March 3, 2025' });
+        const march8thButton = screen.getByRole('button', { name: 'Saturday, March 8, 2025' });
+
+        await userEvent.click(march3rdButton);
+        await userEvent.click(march8thButton);
+
+        expect(mockOnChange).toHaveBeenCalledWith(
+            expect.objectContaining({
+                end: expect.objectContaining({ day: 8, month: 3, year: 2025 }),
+                start: expect.objectContaining({ day: 3, month: 3, year: 2025 }),
+            })
+        );
+    });
+});

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

@@ -0,0 +1,10 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+import { JobType } from '../../../../../core/jobs/jobs.const';
+
+export interface FiltersType {
+    projectId: string | undefined;
+    userId: string | undefined;
+    jobTypes: JobType[];
+}

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

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Key, useCallback, useEffect, useMemo, useState } from 'react';
+import { Key, useCallback, useMemo, useState } from 'react';
 
 import { InfiniteQueryObserverResult } from '@tanstack/react-query';
 import { isEmpty } from 'lodash-es';
@@ -13,29 +13,26 @@ import { ProjectSortingOptions } from '../../../../../core/projects/services/pro
 import { useUsers } from '../../../../../core/users/hook/use-users.hook';
 import { RESOURCE_TYPE, User } from '../../../../../core/users/users.interface';
 import { useWorkspaceIdentifier } from '../../../../../providers/workspaces-provider/use-workspace-identifier.hook';
-import { hasEqualId, isNonEmptyArray } from '../../../../utils';
+import { isNonEmptyArray } from '../../../../utils';
 import { JobsFilterField } from '../jobs-filter-field.component';
 import { JobsTypeFilterField } from './job-types-filter-field.component';
-
-interface JobsFilteringDefaultValuesProps {
-    projectIdFilter: string | undefined;
-    userIdFilter: string | undefined;
-    jobTypeFilter: JobType[];
-}
+import { FiltersType } from './jobs-dialog.interface';
 
 interface JobsFilteringProps {
-    defaultValues: JobsFilteringDefaultValuesProps;
-    onChange: (projectId: string | undefined, userId: string | undefined, type: JobType[]) => void;
+    values: FiltersType;
+    onChange: (newFilters: FiltersType) => void;
 }
 
-export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps): JSX.Element => {
+export const JobsFiltering = ({ values, onChange }: JobsFilteringProps): JSX.Element => {
     const { organizationId, workspaceId } = useWorkspaceIdentifier();
 
-    const { projectIdFilter, userIdFilter, jobTypeFilter } = defaultValues;
+    const [jobFilters, setJobFilters] = useState<FiltersType>(values);
+    const { projectId, userId, jobTypes } = jobFilters;
 
-    const [selectedProject, setSelectedProject] = useState<string | undefined>(projectIdFilter);
-    const [selectedUser, setSelectedUser] = useState<string | undefined>(userIdFilter);
-    const [selectedJobTypes, setSelectedJobTypes] = useState<JobType[]>(jobTypeFilter);
+    const updateJobsFilters = (newFilters: FiltersType): void => {
+        onChange(newFilters);
+        setJobFilters(newFilters);
+    };
 
     const { useGetProjects } = useProjectActions();
     const {
@@ -55,9 +52,9 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
     const { useGetUsersQuery } = useUsers();
     const { users, isLoading: isLoadingUsers } = useGetUsersQuery(
         organizationId,
-        selectedProject
+        projectId
             ? {
-                  resourceId: selectedProject,
+                  resourceId: projectId,
                   resourceType: RESOURCE_TYPE.PROJECT,
               }
             : undefined
@@ -95,29 +92,18 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
     const setSelectedProjectHandler = (key: Key | null): void => {
         const newFilterValue: undefined | string = isEmpty(key) ? undefined : (key as string);
 
-        setSelectedProject(newFilterValue);
+        updateJobsFilters({ ...jobFilters, projectId: newFilterValue });
     };
 
     const setSelectedUserHandler = (key: Key | null): void => {
         const newFilterValue: undefined | string = isEmpty(key) ? undefined : (key as string);
 
-        setSelectedUser(newFilterValue);
+        updateJobsFilters({ ...jobFilters, userId: newFilterValue });
     };
 
-    useEffect(() => {
-        if (isLoadingUsers) return;
-
-        const isSelectedUserInProject: boolean | undefined = users?.some(hasEqualId(selectedUser));
-
-        if (!!isSelectedUserInProject) return;
-
-        setSelectedUser(undefined);
-        onChange(selectedProject, undefined, selectedJobTypes);
-    }, [isLoadingUsers, onChange, selectedJobTypes, selectedProject, selectedUser, users]);
-
-    useEffect(() => {
-        onChange(selectedProject, selectedUser, selectedJobTypes);
-    }, [selectedProject, selectedUser, selectedJobTypes, onChange]);
+    const setSelectedJobTypesHandler = (newJobTypes: JobType[]): void => {
+        updateJobsFilters({ ...jobFilters, jobTypes: newJobTypes });
+    };
 
     return (
         <>
@@ -126,7 +112,7 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
                 ariaLabel={'Job scheduler filter project'}
                 dataTestId={'job-scheduler-filter-project'}
                 options={[allProjectOption, ...projectOptions]}
-                value={selectedProject ?? allProjectOption.key}
+                value={projectId ?? allProjectOption.key}
                 onSelectionChange={setSelectedProjectHandler}
                 isLoading={isLoadingProjects || isFetchingNextPage}
                 loadMore={loadMoreProjects}
@@ -136,11 +122,11 @@ export const JobsFiltering = ({ defaultValues, onChange }: JobsFilteringProps):
                 ariaLabel={'Job scheduler filter user'}
                 dataTestId={'job-scheduler-filter-user'}
                 options={[allUsersOption, ...usersOptions]}
-                value={selectedUser ?? allUsersOption.key}
+                value={userId ?? allUsersOption.key}
                 onSelectionChange={setSelectedUserHandler}
                 isLoading={isLoadingUsers}
             />
-            <JobsTypeFilterField selectedJobTypes={selectedJobTypes} setSelectedJobTypes={setSelectedJobTypes} />
+            <JobsTypeFilterField selectedJobTypes={jobTypes} setSelectedJobTypes={setSelectedJobTypesHandler} />
         </>
     );
 };