+ )}
+
+
);
};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx
index 46907e3ee7d6..a9aea16e465a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx
@@ -19,12 +19,10 @@ import {
Dropdown,
Grid,
} from '@openmetadata/ui-core-components';
-import { XCircle } from '@openmetadata/ui-core-components/icons';
import { AxiosError } from 'axios';
-import { isNaN, map } from 'lodash';
+import { map } from 'lodash';
import { Key, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { ReactComponent as Calendar } from '../../../assets/svg/calendar.svg';
import { ReactComponent as FilterIcon } from '../../../assets/svg/filter.svg';
import {
EXECUTION_FILTER_RANGE,
@@ -43,10 +41,7 @@ import {
getEpochMillisForPastDays,
} from '../../../utils/date-time/DateTimeUtils';
import { showErrorToast } from '../../../utils/ToastUtils';
-import DatePicker, {
- RangePickerProps,
-} from '../../common/DatePicker/DatePicker';
-import './execution.less';
+import DateRangeFilter from '../../common/DateRangeFilter/DateRangeFilter';
import ListView from './ListView/ListViewTab.component';
import TreeViewTab from './TreeView/TreeViewTab.component';
@@ -92,33 +87,13 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
[]
);
- const onDateChange: RangePickerProps['onChange'] = (values) => {
- if (values) {
- const startTime = values[0]?.startOf('day').valueOf() ?? 0;
- const endTime = values[1]?.endOf('day').valueOf() ?? 0;
-
- if (!isNaN(startTime) && !isNaN(endTime)) {
- setStartTime(startTime);
- setEndTime(endTime);
- }
- if (isNaN(startTime)) {
- setIsClickedCalendar(false);
- setStartTime(
- getEpochMillisForPastDays(EXECUTION_FILTER_RANGE.last365days.days)
- );
- setEndTime(getCurrentMillis());
-
- setDatesSelected(false);
- }
-
- setDatesSelected(true);
- } else {
- setDatesSelected(false);
- setStartTime(
+ const onDateChange = (range?: { startTs: number; endTs: number }) => {
+ setDatesSelected(Boolean(range));
+ setStartTime(
+ range?.startTs ??
getEpochMillisForPastDays(EXECUTION_FILTER_RANGE.last365days.days)
- );
- setEndTime(getCurrentMillis());
- }
+ );
+ setEndTime(range?.endTs ?? getCurrentMillis());
};
useEffect(() => {
@@ -194,16 +169,15 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
{view === PIPELINE_EXECUTION_TABS.LIST_VIEW ? (
-
}
- data-testid="data-range-picker"
- placeholder={[t('label.date-filter'), '']}
- suffixIcon={
}
- onChange={onDateChange}
- />
+
+ onDateChange()}
+ />
+
) : null}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less
deleted file mode 100644
index ee60625ba836..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright 2022 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.ant-picker-range.executions-date-picker {
- padding: 0 var(--om-space-6) 0 0;
- max-width: 200px;
- .ant-picker-range-separator {
- display: none;
- }
- .ant-picker-clear {
- right: -6px;
- }
-
- .ant-picker-active-bar {
- margin-left: 0;
- width: 85px !important;
- }
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/AuthMechanismForm.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/AuthMechanismForm.test.tsx
index 3a04a19d8820..e58fc45e8e48 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/AuthMechanismForm.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/AuthMechanismForm.test.tsx
@@ -12,7 +12,6 @@
*/
import { render, screen, waitFor, within } from '@testing-library/react';
-import { Select } from 'antd';
import {
PersonalAccessToken,
TokenType,
@@ -25,8 +24,6 @@ import {
import { SettingType } from '../../../../generated/settings/settings';
import AuthMechanismForm from './AuthMechanismForm';
-const { Option } = Select;
-
const mockUpdateSettingsConfig = jest.fn();
const mockPatchSettingsConfig = jest.fn();
const mockShowErrorToast = jest.fn();
@@ -56,11 +53,7 @@ jest.mock('../../../../utils/BotsUtils', () => ({
? options.filter((opt) => opt.value !== JWTTokenExpiry.Unlimited)
: options;
- return filteredOptions.map((opt) => (
-
- ));
+ return filteredOptions.map((opt) => ({ id: opt.value, label: opt.label }));
}),
}));
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/AddIngestion/AddIngestion.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/AddIngestion/AddIngestion.test.tsx
index 64a88f0c0540..8fad68f8fe5c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/AddIngestion/AddIngestion.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/AddIngestion/AddIngestion.test.tsx
@@ -91,11 +91,6 @@ jest.mock('../Ingestion/IngestionWorkflowForm/IngestionWorkflowForm', () => {
));
});
-jest.mock('../../../../utils/SchedularUtils', () => ({
- getScheduleOptionsFromSchedules: jest.fn().mockReturnValue([]),
- getRaiseOnErrorFormField: jest.fn().mockReturnValue({}),
-}));
-
jest.mock('../../../../hooks/useEntityRules', () => ({
useEntityRules: jest.fn().mockReturnValue({
entityRules: {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelect.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelect.test.tsx
deleted file mode 100644
index b0f0dd567eb1..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelect.test.tsx
+++ /dev/null
@@ -1,325 +0,0 @@
-/*
- * Copyright 2025 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { DefaultOptionType } from 'antd/lib/select';
-import { PagingResponse } from '../../../interface/common/paging.interface';
-import { showErrorToast } from '../../../utils/ToastUtils';
-import { AsyncSelect } from './AsyncSelect';
-
-// Mock dependencies
-jest.mock('../../../utils/ToastUtils', () => ({
- showErrorToast: jest.fn(),
-}));
-
-jest.mock('../Loader/Loader', () => {
- return function MockLoader({ size }: { size?: string }) {
- return
Loading...
;
- };
-});
-
-// Mock debounce to make tests synchronous
-jest.mock('lodash', () => ({
- ...jest.requireActual('lodash'),
- debounce: (fn: unknown) => fn,
-}));
-
-const mockOptions: DefaultOptionType[] = [
- { label: 'Option 1', value: 'option1' },
- { label: 'Option 2', value: 'option2' },
- { label: 'Option 3', value: 'option3' },
-];
-
-const mockPaginatedResponse: PagingResponse
= {
- data: mockOptions,
- paging: {
- total: 10,
- after: 'cursor1',
- before: 'cursor2',
- },
-};
-
-describe('AsyncSelect Component', () => {
- const mockApi = jest.fn();
- const mockOnSelect = jest.fn();
-
- beforeEach(() => {
- jest.clearAllMocks();
- (showErrorToast as jest.Mock).mockClear();
- });
-
- describe('Basic Functionality', () => {
- it('should render AsyncSelect component', () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render(
-
- );
-
- expect(screen.getByTestId('async-select')).toBeInTheDocument();
- });
-
- it('should call API on mount with empty search', async () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render();
-
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith('', undefined);
- });
- });
-
- it('should display loading state initially', async () => {
- mockApi.mockImplementation(
- () =>
- new Promise((resolve) => setTimeout(() => resolve(mockOptions), 100))
- );
-
- render();
-
- expect(screen.getByTestId('loader-small')).toBeInTheDocument();
- });
-
- it('should populate options after API call', async () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render();
-
- fireEvent.mouseDown(screen.getByRole('combobox'));
-
- await waitFor(() => {
- expect(screen.getByText('Option 1')).toBeInTheDocument();
- expect(screen.getByText('Option 2')).toBeInTheDocument();
- expect(screen.getByText('Option 3')).toBeInTheDocument();
- });
- });
-
- it('should call API with search text when typing', async () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render();
-
- const input = screen.getByRole('combobox');
- fireEvent.change(input, { target: { value: 'test search' } });
-
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith('test search', undefined);
- });
- });
-
- it('should handle option selection', async () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render(
-
- );
-
- fireEvent.mouseDown(screen.getByRole('combobox'));
-
- await waitFor(() => {
- expect(screen.getByText('Option 1')).toBeInTheDocument();
- });
-
- fireEvent.click(screen.getByText('Option 1'));
-
- expect(mockOnSelect).toHaveBeenCalled();
- });
-
- it('should handle API errors gracefully', async () => {
- const error = new Error('API Error');
- mockApi.mockRejectedValue(error);
-
- render();
-
- await waitFor(() => {
- expect(showErrorToast).toHaveBeenCalledWith(error);
- });
- });
- });
-
- describe('Infinite Scroll Functionality', () => {
- it('should enable infinite scroll when enableInfiniteScroll is true', async () => {
- mockApi.mockResolvedValue(mockPaginatedResponse);
-
- render(
-
- );
-
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith('', 1);
- });
- });
-
- it('should handle paginated response correctly', async () => {
- mockApi.mockResolvedValue(mockPaginatedResponse);
-
- render(
-
- );
-
- fireEvent.mouseDown(screen.getByRole('combobox'));
-
- await waitFor(() => {
- expect(screen.getByText('Option 1')).toBeInTheDocument();
- expect(screen.getByText('Option 2')).toBeInTheDocument();
- expect(screen.getByText('Option 3')).toBeInTheDocument();
- });
- });
-
- it('should not load more when all options are loaded', async () => {
- const limitedResponse: PagingResponse = {
- data: mockOptions,
- paging: { total: 3 }, // Same as data length
- };
-
- mockApi.mockResolvedValue(limitedResponse);
-
- render(
-
- );
-
- fireEvent.mouseDown(screen.getByRole('combobox'));
-
- await waitFor(() => {
- expect(screen.getByText('Option 1')).toBeInTheDocument();
- });
-
- // Simulate scroll to bottom
- const dropdown = screen.getByRole('listbox');
- Object.defineProperty(dropdown, 'scrollTop', {
- value: 100,
- writable: true,
- });
- Object.defineProperty(dropdown, 'offsetHeight', {
- value: 100,
- writable: true,
- });
- Object.defineProperty(dropdown, 'scrollHeight', {
- value: 200,
- writable: true,
- });
-
- fireEvent.scroll(dropdown);
-
- // Should not call API again since all options are loaded
- expect(mockApi).toHaveBeenCalledTimes(1);
- });
-
- it('should reset page when search text changes', async () => {
- mockApi.mockResolvedValue(mockPaginatedResponse);
-
- render(
-
- );
-
- const input = screen.getByRole('combobox');
-
- // Initial load
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith('', 1);
- });
-
- // Change search text
- fireEvent.change(input, { target: { value: 'new search' } });
-
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith('new search', 1);
- });
- });
- });
-
- describe('Configuration Options', () => {
- it('should use custom debounce timeout', async () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render(
-
- );
-
- // Since we mocked debounce to be synchronous, this just ensures the prop is passed
- expect(screen.getByTestId('async-select')).toBeInTheDocument();
- });
-
- it('should work without infinite scroll by default', async () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render();
-
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith('', undefined);
- });
- });
- });
-
- describe('Edge Cases', () => {
- it('should handle empty API response', async () => {
- mockApi.mockResolvedValue([]);
-
- render();
-
- fireEvent.mouseDown(screen.getByRole('combobox'));
-
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalled();
- });
-
- // Should not crash and should show no options
- expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
- });
-
- it('should handle scroll events when infinite scroll is disabled', async () => {
- mockApi.mockResolvedValue(mockOptions);
-
- render();
-
- fireEvent.mouseDown(screen.getByRole('combobox'));
-
- await waitFor(() => {
- expect(screen.getByText('Option 1')).toBeInTheDocument();
- });
-
- // Simulate scroll - should not trigger additional API calls
- const dropdown = screen.getByRole('listbox');
- fireEvent.scroll(dropdown);
-
- expect(mockApi).toHaveBeenCalledTimes(1);
- });
- });
-});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelect.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelect.tsx
deleted file mode 100644
index 891e5c974f8a..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelect.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-/*
- * Copyright 2022 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Select, SelectProps } from 'antd';
-import { DefaultOptionType } from 'antd/lib/select';
-import { AxiosError } from 'axios';
-import { debounce, isObject } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
-import { Paging } from '../../../generated/type/paging';
-import { PagingResponse } from '../../../interface/common/paging.interface';
-import { showErrorToast } from '../../../utils/ToastUtils';
-import Loader from '../Loader/Loader';
-import { AsyncSelectListProps } from './AsyncSelectList.interface';
-
-// Interface for paginated API response
-
-/**
- * AsyncSelect to work with options provided from API directly
- * Pass api reference or a function which can communicate with API and return with DefaultOptionType[]
- * Additional configuration can be provided once needed like: debounce value, defaultOptions etc
- * @param param0
- * @returns ReactComponent with select functionality
- */
-export const AsyncSelect = ({
- options,
- api,
- enableInfiniteScroll = false,
- debounceTimeout = 400,
- ...restProps
-}: SelectProps & AsyncSelectListProps) => {
- const [optionsInternal, setOptionsInternal] = useState();
- const [loadingOptions, setLoadingOptions] = useState(false);
- const [hasContentLoading, setHasContentLoading] = useState(false);
- const [searchText, setSearchText] = useState('');
- const [paging, setPaging] = useState({} as Paging);
- const [currentPage, setCurrentPage] = useState(1);
-
- useEffect(() => {
- setOptionsInternal(options);
- }, [options]);
-
- const fetchOptions = useCallback(
- debounce(async (value: string, page = 1) => {
- if (page === 1) {
- setLoadingOptions(true);
- setOptionsInternal([]);
- } else {
- setHasContentLoading(true);
- }
-
- try {
- const response = await api(
- value,
- enableInfiniteScroll ? page : undefined
- );
-
- if (
- enableInfiniteScroll &&
- response &&
- isObject(response) &&
- 'data' in response
- ) {
- // Handle paginated response
- const pagingResponse = response as PagingResponse<
- DefaultOptionType[]
- >;
- if (page === 1) {
- setOptionsInternal(pagingResponse.data);
- setPaging(pagingResponse.paging);
- setCurrentPage(1);
- } else {
- setOptionsInternal((prev) => [
- ...(prev || []),
- ...pagingResponse.data,
- ]);
- setPaging(pagingResponse.paging);
- setCurrentPage(page);
- }
- } else {
- // Handle simple array response
- const simpleResponse = response as DefaultOptionType[];
- setOptionsInternal(simpleResponse);
- }
- } catch (error) {
- showErrorToast(error as AxiosError);
- } finally {
- setLoadingOptions(false);
- setHasContentLoading(false);
- }
- }, debounceTimeout),
- [api, enableInfiniteScroll, debounceTimeout]
- );
-
- const handleSelection = useCallback(() => {
- setSearchText('');
- }, []);
-
- const onScroll = useCallback(
- async (e: React.UIEvent) => {
- if (!enableInfiniteScroll) {
- return;
- }
-
- const { currentTarget } = e;
- if (
- currentTarget.scrollTop + currentTarget.offsetHeight ===
- currentTarget.scrollHeight
- ) {
- const currentOptionsLength = optionsInternal?.length ?? 0;
- if (currentOptionsLength < paging.total && !hasContentLoading) {
- await fetchOptions(searchText, currentPage + 1);
- }
- }
- },
- [
- enableInfiniteScroll,
- optionsInternal,
- paging.total,
- hasContentLoading,
- searchText,
- currentPage,
- fetchOptions,
- ]
- );
-
- const dropdownRender = useCallback(
- (menu: React.ReactElement) => (
- <>
- {menu}
- {hasContentLoading && }
-
- ),
- [hasContentLoading]
- );
-
- useEffect(() => {
- if (!restProps.disabled) {
- fetchOptions(searchText, 1);
- }
- }, [searchText, restProps.disabled]);
-
- return (
- : null}
- options={optionsInternal}
- searchValue={searchText}
- suffixIcon={loadingOptions && }
- onPopupScroll={enableInfiniteScroll ? onScroll : undefined}
- onSearch={(value: string) => {
- setSearchText(value);
- setCurrentPage(1);
- }}
- onSelect={handleSelection}
- {...restProps}
- />
- );
-};
-
-// Re-exported because consumers outside this repository import it from this path.
-export type { PagingResponse } from '../../../interface/common/paging.interface';
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelectList.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelectList.interface.ts
deleted file mode 100644
index ff5558c7bef2..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelect/AsyncSelectList.interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * Copyright 2025 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { DefaultOptionType } from 'antd/lib/select';
-import { PagingResponse } from '../../../interface/common/paging.interface';
-
-export interface AsyncSelectListProps {
- api: (
- queryString: string,
- page?: number
- ) => Promise>;
- enableInfiniteScroll?: boolean;
- debounceTimeout?: number;
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DatePicker/DatePicker.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DatePicker/DatePicker.tsx
deleted file mode 100644
index f397832fabba..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DatePicker/DatePicker.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright 2025 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import generatePicker, {
- RangePickerBaseProps as BaseRangePickerProps,
-} from 'antd/lib/date-picker/generatePicker';
-import { DateTime } from 'luxon';
-import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';
-
-const DatePicker = generatePicker(luxonGenerateConfig);
-
-type RangePickerProps = BaseRangePickerProps;
-
-export default DatePicker;
-
-export type { RangePickerProps };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.integration.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.integration.test.tsx
similarity index 91%
rename from openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.integration.test.tsx
rename to openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.integration.test.tsx
index 52b605e4b67a..71ff1c7c91cf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.integration.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.integration.test.tsx
@@ -11,7 +11,7 @@
* limitations under the License.
*/
import { fireEvent, render, screen } from '@testing-library/react';
-import DqDateRangeFilter from './DqDateRangeFilter';
+import DateRangeFilter from './DateRangeFilter';
const START_TS = new Date('2024-01-15T00:00:00Z').getTime();
const END_TS = new Date('2024-01-20T00:00:00Z').getTime();
@@ -24,11 +24,11 @@ const END_TS = new Date('2024-01-20T00:00:00Z').getTime();
* production callers (`DqFilterBar`, `IncidentGroupsFilters`, `TestSummary`)
* mount it.
*/
-describe('DqDateRangeFilter integration', () => {
+describe('DateRangeFilter integration', () => {
it('uncontrolled: reverts abandoned selection to the committed range after Escape close', () => {
const onApply = jest.fn();
render(
-
+
);
const trigger = screen.getByRole('button', { name: /date range/i });
@@ -57,7 +57,7 @@ describe('DqDateRangeFilter integration', () => {
it('uncontrolled: reverts abandoned selection to the committed range after Dismiss close', () => {
const onApply = jest.fn();
render(
-
+
);
const trigger = screen.getByRole('button', { name: /date range/i });
@@ -84,7 +84,7 @@ describe('DqDateRangeFilter integration', () => {
it('uncontrolled: Cancel then close reverts to the committed range', () => {
const onApply = jest.fn();
render(
-
+
);
const trigger = screen.getByRole('button', { name: /date range/i });
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.test.tsx
similarity index 83%
rename from openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.test.tsx
rename to openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.test.tsx
index f7ba871e86c2..2b2073939ce2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.test.tsx
@@ -13,7 +13,7 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { ComponentProps } from 'react';
-import DqDateRangeFilter from './DqDateRangeFilter';
+import DateRangeFilter from './DateRangeFilter';
type MockDateRangePickerProps = Pick<
ComponentProps<
@@ -33,6 +33,7 @@ type MockDateRangePickerProps = Pick<
// and open/close triggers so we can assert the epoch-millis conversion and the
// reset-on-close behaviour done by the component.
jest.mock('@openmetadata/ui-core-components', () => ({
+ ...jest.requireActual('@openmetadata/ui-core-components'),
DateRangePicker: ({
value,
onApply,
@@ -72,7 +73,7 @@ jest.mock('@openmetadata/ui-core-components', () => ({
const START_TS = new Date('2024-01-15T00:00:00Z').getTime();
const END_TS = new Date('2024-01-20T00:00:00Z').getTime();
-describe('DqDateRangeFilter', () => {
+describe('DateRangeFilter', () => {
const onApply = jest.fn();
beforeEach(() => {
@@ -80,26 +81,26 @@ describe('DqDateRangeFilter', () => {
});
it('should render the date range picker', () => {
- render();
+ render();
expect(screen.getByTestId('date-range-picker')).toBeInTheDocument();
});
it('should render with null value when no timestamps are provided', () => {
- render();
+ render();
expect(screen.getByTestId('picker-value')).toHaveTextContent('null');
});
it('should render with null value when only start timestamp is provided', () => {
- render();
+ render();
expect(screen.getByTestId('picker-value')).toHaveTextContent('null');
});
it('should build a staged value when both timestamps are provided', () => {
render(
-
+
);
const value = screen.getByTestId('picker-value').textContent ?? '';
@@ -111,7 +112,7 @@ describe('DqDateRangeFilter', () => {
it('should call onApply with epoch millis when applied with a valid range', () => {
render(
-
+
);
fireEvent.click(screen.getByTestId('picker-apply'));
@@ -127,7 +128,7 @@ describe('DqDateRangeFilter', () => {
it('should commit the end boundary as the last ms of the end day', () => {
render(
-
+
);
fireEvent.click(screen.getByTestId('picker-apply'));
@@ -142,14 +143,14 @@ describe('DqDateRangeFilter', () => {
});
it('should treat an epoch-0 timestamp as a real date, not absent', () => {
- render();
+ render();
// A truthiness check would drop startTs=0 and leave the staged value null.
expect(screen.getByTestId('picker-value')).not.toHaveTextContent('null');
});
it('should not call onApply when there is no staged range', () => {
- render();
+ render();
fireEvent.click(screen.getByTestId('picker-apply'));
@@ -158,7 +159,7 @@ describe('DqDateRangeFilter', () => {
it('should not call onApply after clearing the staged range', () => {
render(
-
+
);
fireEvent.click(screen.getByTestId('picker-clear'));
@@ -169,7 +170,7 @@ describe('DqDateRangeFilter', () => {
it('should restore the committed range on cancel', () => {
render(
-
+
);
// Stage a clear, then cancel — value should be rebuilt from props.
@@ -184,7 +185,7 @@ describe('DqDateRangeFilter', () => {
it('should discard uncommitted selection on close (uncontrolled)', () => {
render(
-
+
);
const committedValue = screen.getByTestId('picker-value').textContent ?? '';
@@ -207,7 +208,7 @@ describe('DqDateRangeFilter', () => {
it('should forward onOpenChange and discard on close (controlled)', () => {
const onOpenChange = jest.fn();
render(
- {
it('should keep the [isOpen] force-close reset for the controlled path', () => {
const { rerender } = render(
- {
// would NOT emit onOpenChange for this externally-driven close, so the effect
// must still reset on its own.
rerender(
- {
});
it('should leave the core trigger at its default size and width', () => {
- render();
+ render();
expect(screen.getByTestId('date-range-picker')).toHaveAttribute(
'data-full-width',
@@ -284,7 +285,7 @@ describe('DqDateRangeFilter', () => {
});
it('should pass the size and full width to the core trigger', () => {
- render();
+ render();
expect(screen.getByTestId('date-range-picker')).toHaveAttribute(
'data-full-width',
@@ -295,4 +296,25 @@ describe('DqDateRangeFilter', () => {
'sm'
);
});
+
+ it('offers a clear button only while a range is set, when onClear is given', () => {
+ const onClear = jest.fn();
+ const { rerender } = render(
+
+ );
+
+ expect(screen.queryByTestId('clear-date-filter')).not.toBeInTheDocument();
+
+ rerender(
+
+ );
+ fireEvent.click(screen.getByTestId('clear-date-filter'));
+
+ expect(onClear).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.tsx
similarity index 63%
rename from openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.tsx
rename to openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.tsx
index ce825188edf4..8861968933b7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqDateRangeFilter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DateRangeFilter/DateRangeFilter.tsx
@@ -10,17 +10,24 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { DateRangePicker } from '@openmetadata/ui-core-components';
+import {
+ Box,
+ ButtonUtility,
+ DateRangePicker,
+} from '@openmetadata/ui-core-components';
+import { XClose } from '@openmetadata/ui-core-components/icons';
import { useEffect, useState } from 'react';
-import type { DateValue } from 'react-aria-components';
+import { useTranslation } from 'react-i18next';
import {
+ dateValueToEndOfDayMillis,
dateValueToMillis,
- millisToDateValue,
-} from '../../../../utils/date-time/calendarDate.utils';
+ millisToPickerDateValue,
+ PickerDateValue,
+} from '../../../utils/date-time/calendarDate.utils';
-type PickerRange = { start: DateValue; end: DateValue } | null;
+type PickerRange = { start: PickerDateValue; end: PickerDateValue } | null;
-export interface DqDateRangeFilterProps {
+export interface DateRangeFilterProps {
startTs?: number;
endTs?: number;
/** `sm` matches the trigger to the sm filter inputs. */
@@ -32,14 +39,23 @@ export interface DqDateRangeFilterProps {
onOpenChange?: (open: boolean) => void;
/** Commit handler — compatible with the hook's `onDateRangeChange`. */
onApply: (range: { startTs: number; endTs: number }) => void;
+ /** Shows a clear button while a range is set; called when it is pressed. */
+ onClear?: () => void;
}
+const toPickerRange = (startTs?: number, endTs?: number): PickerRange => {
+ const start = millisToPickerDateValue(startTs);
+ const end = millisToPickerDateValue(endTs);
+
+ return start && end ? { start, end } : null;
+};
+
/**
* Adapts the core (untitled-ui) `DateRangePicker`, which speaks
* `@internationalized/date` values, to the dashboard's epoch-millis
* `DateRangeObject`. Selection is staged locally and committed on Apply.
*/
-export const DqDateRangeFilter = ({
+export const DateRangeFilter = ({
startTs,
endTs,
size = 'md',
@@ -47,21 +63,16 @@ export const DqDateRangeFilter = ({
isOpen,
onOpenChange,
onApply,
-}: DqDateRangeFilterProps) => {
- const buildValue = (): PickerRange => {
- const start = millisToDateValue(startTs);
- const end = millisToDateValue(endTs);
-
- return start && end ? { start, end } : null;
- };
-
- const [value, setValue] = useState(buildValue);
+ onClear,
+}: DateRangeFilterProps) => {
+ const { t } = useTranslation();
+ const [value, setValue] = useState(() =>
+ toPickerRange(startTs, endTs)
+ );
// Re-sync the staged value when the committed range changes upstream.
useEffect(() => {
- const start = millisToDateValue(startTs);
- const end = millisToDateValue(endTs);
- setValue(start && end ? { start, end } : null);
+ setValue(toPickerRange(startTs, endTs));
}, [startTs, endTs]);
// Discard any uncommitted (staged) selection when single-open coordination
@@ -71,9 +82,9 @@ export const DqDateRangeFilter = ({
// Apply / Cancel) are handled by `handleOpenChange` instead (see below).
useEffect(() => {
if (isOpen === false) {
- setValue(buildValue());
+ setValue(toPickerRange(startTs, endTs));
}
- }, [isOpen]);
+ }, [isOpen, startTs, endTs]);
// Intercept every close event — including uncontrolled usage where the
// caller passes no `isOpen`/`onOpenChange` — so an abandoned (never-applied)
@@ -82,27 +93,25 @@ export const DqDateRangeFilter = ({
// report here; together they cover both close origins.
const handleOpenChange = (open: boolean) => {
if (!open) {
- setValue(buildValue());
+ setValue(toPickerRange(startTs, endTs));
}
onOpenChange?.(open);
};
const handleApply = () => {
if (value?.start && value?.end) {
- // Commit the end boundary as the last millisecond of the selected day —
- // the date-only value resolves to midnight, which would exclude the end day.
onApply({
startTs: dateValueToMillis(value.start),
- endTs: dateValueToMillis(value.end.add({ days: 1 })) - 1,
+ endTs: dateValueToEndOfDayMillis(value.end),
});
}
};
const handleCancel = () => {
- setValue(buildValue());
+ setValue(toPickerRange(startTs, endTs));
};
- return (
+ const picker = (
);
+
+ if (!onClear) {
+ return picker;
+ }
+
+ return (
+
+ {picker}
+ {startTs !== undefined && endTs !== undefined && (
+ }
+ onClick={onClear}
+ />
+ )}
+
+ );
};
-export default DqDateRangeFilter;
+export default DateRangeFilter;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DrawerPopupContainerProvider/DrawerPopupContainerProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DrawerPopupContainerProvider/DrawerPopupContainerProvider.tsx
deleted file mode 100644
index 76d0f93c2685..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DrawerPopupContainerProvider/DrawerPopupContainerProvider.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright 2026 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { ConfigProvider } from 'antd';
-import { PropsWithChildren } from 'react';
-
-const PORTAL_CONTAINER_ID = 'drawer-popup-portal';
-
-export const getPopupContainer = (): HTMLElement => {
- let container = document.getElementById(PORTAL_CONTAINER_ID);
- if (!container) {
- container = document.createElement('div');
- container.id = PORTAL_CONTAINER_ID;
- container.setAttribute('data-react-aria-top-layer', 'true');
- container.style.position = 'absolute';
- container.style.zIndex = '10001';
- document.body.appendChild(container);
- }
-
- return container;
-};
-
-export const DrawerPopupContainerProvider = ({
- children,
-}: PropsWithChildren) => (
-
- {children}
-
-);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DrawerPopupContainerProvider/index.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/DrawerPopupContainerProvider/index.ts
deleted file mode 100644
index b0c0f22979ec..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DrawerPopupContainerProvider/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * Copyright 2026 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { DrawerPopupContainerProvider } from './DrawerPopupContainerProvider';
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityPageInfos/ManageButton/ManageButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntityPageInfos/ManageButton/ManageButton.tsx
index 7e27d017f32b..4a541a34c722 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityPageInfos/ManageButton/ManageButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntityPageInfos/ManageButton/ManageButton.tsx
@@ -34,10 +34,7 @@ import { hardDeleteEntity } from '../../../../utils/DeleteWidget/DeleteWidgetUti
import entityUtilClassBase from '../../../../utils/EntityUtilClassBase';
import { showErrorToast } from '../../../../utils/ToastUtils';
import EntityNameModal from '../../../Modals/EntityNameModal/EntityNameModal.component';
-import {
- EntityName,
- EntityNameValidationRule,
-} from '../../../Modals/EntityNameModal/EntityNameModal.interface';
+import { EntityName } from '../../../Modals/EntityNameModal/EntityNameModal.interface';
import DeleteModal from '../../DeleteModal/DeleteModal';
import DeleteEntityModal from '../../DeleteWidget/DeleteEntityModal';
import { DeleteType } from '../../DeleteWidget/DeleteWidget.interface';
@@ -382,9 +379,7 @@ const ManageButton: FC = ({
{onEditDisplayName && isDisplayNameEditing && (
{
- it('FilterPattern component should render', async () => {
- const { container } = render();
-
- const filterPatternContainer = await findByTestId(
- container,
- 'filter-pattern-container'
- );
- const fieldContainer = await findByTestId(container, 'field-container');
- const checkbox = await findByTestId(
- container,
- `${mockFilterPatternProps.type}-filter-pattern-checkbox`
- );
- const includeFilterInput = await findByTestId(
- container,
- 'filter-pattern-includes-table'
- );
- const excludeFilterInput = await findByTestId(
- container,
- 'filter-pattern-excludes-table'
- );
-
- expect(filterPatternContainer).toBeInTheDocument();
- expect(checkbox).toBeInTheDocument();
- expect(fieldContainer).toBeInTheDocument();
- expect(includeFilterInput).toBeInTheDocument();
- expect(excludeFilterInput).toBeInTheDocument();
- });
-
- it('FilterPattern component should render with filter pattern description', async () => {
- const { container } = render();
-
- const filterPatternContainer = await findByTestId(
- container,
- 'filter-pattern-container'
- );
- const fieldContainer = await findByTestId(container, 'field-container');
- const checkbox = await findByTestId(
- container,
- `${mockFilterPatternProps.type}-filter-pattern-checkbox`
- );
-
- const includeFilterInput = await findByTestId(
- container,
- 'filter-pattern-includes-table'
- );
- const excludeFilterInput = await findByTestId(
- container,
- 'filter-pattern-excludes-table'
- );
-
- expect(filterPatternContainer).toBeInTheDocument();
- expect(checkbox).toBeInTheDocument();
- expect(fieldContainer).toBeInTheDocument();
- expect(includeFilterInput).toBeInTheDocument();
- expect(excludeFilterInput).toBeInTheDocument();
- });
-});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
deleted file mode 100644
index 2e7c2963bcfb..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- * Copyright 2022 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {
- Box,
- Checkbox,
- Divider,
- Grid,
- Typography,
-} from '@openmetadata/ui-core-components';
-import { Select } from 'antd';
-import { capitalize } from 'lodash';
-import { useTranslation } from 'react-i18next';
-import { getLayoutGutter } from '../../../utils/common/layout.utils';
-import { FilterPatternProps } from './filterPattern.interface';
-
-const FilterPattern = ({
- showSeparator = true,
- isDisabled = false,
- checked,
- includePattern,
- excludePattern,
- handleChecked,
- getIncludeValue,
- getExcludeValue,
- includePatternExtraInfo,
- type,
-}: FilterPatternProps) => {
- const { t } = useTranslation();
-
- return (
-
-
-
- {/* eslint-disable-next-line jsx-a11y/label-has-for -- htmlFor-linked to checkbox (sibling column) */}
-
-
-
- handleChecked(e)}
- />
-
-
- {checked && (
-
-
-
- {t('label.include')}:
-
-
-
-
-
- {t('label.exclude')}:
-
-
-
- )}
-
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqFilterBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqFilterBar.tsx
index 1d59207b5974..ebcc2ec37597 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqFilterBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/observability/DataQuality/Dashboard/DqFilterBar.tsx
@@ -14,7 +14,7 @@ import { Box, Button } from '@openmetadata/ui-core-components';
import { XCircle } from '@openmetadata/ui-core-components/icons';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import DqDateRangeFilter from './DqDateRangeFilter';
+import DateRangeFilter from '../../../common/DateRangeFilter/DateRangeFilter';
import { DqFilterBarProps } from './DqFilterBar.types';
import DqFilterChip from './DqFilterChip';
@@ -52,7 +52,7 @@ export const DqFilterBar = ({
return (
- ({
),
}));
-jest.mock('../../DataQuality/Dashboard/DqDateRangeFilter', () => ({
+jest.mock('../../../common/DateRangeFilter/DateRangeFilter', () => ({
__esModule: true,
default: jest
.fn()
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/observability/IncidentManager/IncidentGroups/IncidentGroupsFilters.tsx b/openmetadata-ui/src/main/resources/ui/src/components/observability/IncidentManager/IncidentGroups/IncidentGroupsFilters.tsx
index fc5c9d5ec882..11f31ed91e63 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/observability/IncidentManager/IncidentGroups/IncidentGroupsFilters.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/observability/IncidentManager/IncidentGroups/IncidentGroupsFilters.tsx
@@ -38,9 +38,9 @@ import { getUserByName } from '../../../../rest/userAPI';
import { getEntityName } from '../../../../utils/EntityNameUtils';
import { getEntityReferenceFromEntity } from '../../../../utils/EntityReferenceUtils';
import { getNameFromFQN } from '../../../../utils/FqnUtils';
+import DateRangeFilter from '../../../common/DateRangeFilter/DateRangeFilter';
import { UserTeamSelectableList } from '../../../common/UserTeamSelectableList/UserTeamSelectableList.component';
import { useIncidentFilterOptions } from '../../../IncidentManager/useIncidentFilterOptions';
-import DqDateRangeFilter from '../../DataQuality/Dashboard/DqDateRangeFilter';
import {
CLEARED_INCIDENT_GROUP_FILTERS,
DEFAULT_INCIDENT_LIST_DATE_FIELD,
@@ -294,7 +294,7 @@ const IncidentGroupsFilters = ({
/>
- ({
Table: () => ,
}));
-jest.mock('../../DataQuality/Dashboard/DqDateRangeFilter', () => ({
+jest.mock('../../../common/DateRangeFilter/DateRangeFilter', () => ({
__esModule: true,
default: ({ onApply, startTs, endTs }: any) => (