yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-18 12:18:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat(ui): Bump react, react-dom, react-router and dependant (#20869)

Browse Source 
* Feat(ui): Bump react, react-dom, react-router antd and dependant

* update imports

* fix more imports

* update useParams

* fix imports

* fix compilation errors

* bump react-oidc

* Revert antd version bump

* added missing css for antd v4

* fix merge issues

* bump react-awesome-query-builder/antd

* fix basepath error

* clean errors and update withPageLayout HOC

* fix test failure

* fix the file error

* fix some unit test

* fix some unit test file

* fix some unit test file

* address comments

* fix remaning utils test

* fix some component folder test

* fix page tests

* fix tests for remaining pages

* fix some more test

* revert react-oidc upgrade

* fix tests for pages

* fix and skip some unit test

* fix nested routes structure

* Fix the type error for WebAnalyticsProvider

* fix console errors

* Revert "Fix the type error for WebAnalyticsProvider"

This reverts commit e9780bf174a3f831480324260a10990e03cfe2b5.

* fix the test and console error

* fix the last failing unit test

* fix dataInsight left panel tab switch

* revert order of data assets for explore page

* fix the schema editor, showing 2 sql editor

* fix customProperty and glossary version page breaking and playwright test

* Fix the advanced search playwright

* fix bulk edit and glossary import page

* fix bulk import page not working

* Fix the advanced search styling

* fix the unit test

* fix multiple failing playwright test

* fix sonar issue

* fix kpi and alerts playwright issue

* fix explore tree and sonar issue

* fix customProperty playwright test

* fix the console error

* fix the failing page and test due to schema editor component failure

* fix import not added

* fix custom property and testsuite failing test

* update yarn.lock

* Fix CI error

* Fix the sonarcloud check

* Fix the Custom property format mapping for date time formats

* Fix alert details page stuck in loading state

* re-added the react-strict mode

* fix custom property advance search

* fix sonar, url encoding issue causing playwright test failure

* fix the unit test and change data insight page render method

* fix sonar and test suite playwright test

* fix the sonar issue

* fix the dataAssetHeader failing unit test

* fix the explore tree issue on dev mode

* update es format function for query builder

* fix the failing unit test

* fix sonar failure

* changes around queryBuildr checkTree as it was deprecated

* linter header added

* fix the rule operator not resetting on rule field change

* reverted back to checkTree as it query builder to not load inital options

* fix advance search customproperty spec

* Push the fix for failing playwright tests

* trying to fix schema search

* add wait for search service

* Fix unit tests

---------

Co-authored-by: Ashish Gupta <ashish@getcollate.io>
Co-authored-by: Aniket Katkar <aniketkatkar97@gmail.com>
Co-authored-by: Pranita <pfulsundar8@gmail.com>
Co-authored-by: karanh37 <karanh37@gmail.com>
This commit is contained in:
Chirag Madlani 2025-06-29 16:25:51 +05:30 committed by GitHub
parent eb234c8199
commit cb39c70ef7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1433 changed files with 9923 additions and 10729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openmetadata-ui/src/main/resources/ui/.eslintrc.yaml
View File

@ -18,7 +18,7 @@ env:
extends:
- eslint:recommended
- plugin:react/recommended
- plugin:react/jsx-runtime
- plugin:jest/recommended
- plugin:jest/style
- plugin:jest-formatting/recommended

6
openmetadata-ui/src/main/resources/ui/jest.config.js
View File

@ -62,10 +62,14 @@ module.exports = {
'@azure/msal-react':
'<rootDir>/node_modules/@azure/msal-react/dist/index.js',
axios: 'axios/dist/node/axios.cjs',
'@melloware/react-logviewer':
'<rootDir>/node_modules/@melloware/react-logviewer/dist/cjs/index.js',
'react-antd-column-resize':
'<rootDir>/src/test/unit/mocks/reactColumnResize.mock.js',
},
transformIgnorePatterns: ['node_modules/(?!@azure/msal-react)'],
transformIgnorePatterns: [
'node_modules/(?!(@azure/msal-react|react-dnd|react-dnd-html5-backend|dnd-core|@react-dnd/invariant|@react-dnd/asap|@react-dnd/shallowequal|@melloware/react-logviewer))',
],
// TypeScript
preset: 'ts-jest',

52
openmetadata-ui/src/main/resources/ui/package.json
View File

@ -40,7 +40,7 @@
},
"dependencies": {
"@analytics/session-utils": "^0.1.17",
"@ant-design/icons": "^4.7.0",
"@ant-design/icons": "^4.8.3",
"@apidevtools/json-schema-ref-parser": "^9.0.9",
"@auth0/auth0-react": "^1.9.0",
"@azure/msal-browser": "^3.25.0",
@ -52,11 +52,13 @@
"@fontsource/source-code-pro": "^5.0.0",
"@github/g-emoji-element": "^1.1.5",
"@inovua/reactdatagrid-community": "^5.10.2",
"@melloware/react-logviewer": "^6.2.0",
"@okta/okta-auth-js": "^7.8.1",
"@okta/okta-react": "^6.4.3",
"@rjsf/core": "5.15.0",
"@rjsf/utils": "5.15.0",
"@rjsf/validator-ajv8": "5.15.1",
"@react-awesome-query-builder/antd": "^6.6.15",
"@rjsf/core": "5.24.8",
"@rjsf/utils": "5.24.8",
"@rjsf/validator-ajv8": "5.24.8",
"@tiptap/core": "^2.3.0",
"@tiptap/extension-link": "^2.3.0",
"@tiptap/extension-placeholder": "^2.3.0",
@ -73,7 +75,7 @@
"@toast-ui/react-editor": "^3.1.8",
"@windmillcode/quill-emoji": "^2.0.1000",
"analytics": "^0.8.1",
"antd": "4.24.0",
"antd": "4.24.16",
"antlr4": "4.9.2",
"autoprefixer": "^10.0.0",
"axios": "1.8.3",
@ -87,7 +89,6 @@
"elkjs": "^0.9.3",
"eventemitter3": "^5.0.1",
"fast-json-patch": "^3.1.1",
"history": "4.5.1",
"html-react-parser": "^1.4.14",
"html-to-image": "1.11.11",
"https-browserify": "^1.0.0",
@ -103,24 +104,22 @@
"quill-mention": "^6.0.1",
"quilljs-markdown": "^1.2.0",
"rapidoc": "9.3.7",
"react": "^17.0.2",
"react": "^18.2.0",
"react-antd-column-resize": "1.0.3",
"react-awesome-query-builder": "5.1.2",
"react-codemirror2": "^7.2.1",
"react-dnd": "14.0.2",
"react-dnd-html5-backend": "14.0.2",
"react-dom": "^17.0.2",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-grid-layout": "^1.4.2",
"react-grid-layout": "^1.5.1",
"react-helmet-async": "^1.3.0",
"react-i18next": "^11.18.6",
"react-latex-next": "^3.0.0",
"react-lazylog": "^4.5.3",
"react-oidc": "^1.0.3",
"react-papaparse": "^4.1.0",
"react-quill-new": "^3.3.2",
"react-reflex": "^4.0.12",
"react-router-dom": "^5.2.0",
"react-quill-new": "^3.4.0",
"react-reflex": "^4.1.0",
"react-router-dom": "^6.22.1",
"reactflow": "^11.10.2",
"reactjs-localstorage": "^1.0.1",
"recharts": "2.10.3",
@ -128,7 +127,7 @@
"socket.io-client": "^4.5.1",
"styled-components": "^6.1.8",
"turndown": "^7.1.2",
"use-analytics": "^0.0.5",
"use-analytics": "1.1.0",
"zustand": "^4.5.0"
},
"browserslist": {
@ -153,9 +152,9 @@
"@playwright/test": "1.48.2",
"@svgr/webpack": "^6.5.0",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.7",
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.8.3",
"@testing-library/react": "^14.2.1",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/antlr4": "^4.11.2",
"@types/classnames": "^2.3.1",
"@types/codemirror": "^0.0.104",
@ -165,14 +164,11 @@
"@types/katex": "^0.16.7",
"@types/lodash": "^4.14.167",
"@types/luxon": "^3.0.1",
"@types/moment": "^2.13.0",
"@types/node": "^15.6.1",
"@types/pako": "^2.0.0",
"@types/react": "^17.0.8",
"@types/react-dom": "^17.0.11",
"@types/react-grid-layout": "^1.3.3",
"@types/react-lazylog": "^4.5.1",
"@types/react-router-dom": "^5.1.7",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@types/react-grid-layout": "^1.3.5",
"@types/react-test-renderer": "^17.0.0",
"@types/reactjs-localstorage": "^1.0.0",
"@types/recharts": "^1.8.23",
@ -218,7 +214,7 @@
"postcss": "8.4.31",
"postcss-loader": "^6.1.0",
"prettier": "^2.1.2",
"react-test-renderer": "^16.14.0",
"react-test-renderer": "^18.2.0",
"style-loader": "^3.3.1",
"sync-i18n": "^0.0.20",
"thread-loader": "^4.0.4",
@ -233,7 +229,7 @@
"webpack-dev-server": "5.2.1"
},
"resolutions": {
"history": "4.5.1",
"@types/react": "^18.2.55",
"prosemirror-model": "1.18.1",
"prosemirror-state": "1.4.1",
"prosemirror-transform": "1.7.0",

8
openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/AdvanceSearchCustomProperty.spec.ts
View File

@ -16,6 +16,7 @@ import { GlobalSettingOptions } from '../../constant/settings';
import { SidebarItem } from '../../constant/sidebar';
import { TableClass } from '../../support/entity/TableClass';
import {
CONDITIONS_MUST,
selectOption,
showAdvancedSearchDialog,
} from '../../utils/advancedSearch';
@ -113,6 +114,13 @@ test.describe('Advanced Search Custom Property', () => {
durationPropertyName
);
// Perform click on operator
await selectOption(
page,
ruleLocator.locator('.rule--operator .ant-select'),
CONDITIONS_MUST.equalTo.name
);
const inputElement = ruleLocator.locator(
'.rule--widget--TEXT input[type="text"]'
);

13
openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/SchemaSearch.spec.ts
View File

@ -50,10 +50,19 @@ test.describe('Schema search', { tag: '@ingestion' }, () => {
const serviceName = table.serviceResponseData?.name ?? '';
const schemaName = table.schemaResponseData?.name;
const searchServiceResponse = page.waitForResponse(
'/api/v1/search/query?q=*'
);
await page.getByPlaceholder('Search Services').fill(serviceName);
await searchServiceResponse;
await page.waitForSelector('[data-testid="loader"]', { state: 'hidden' });
await page.click(`[data-testid="service-name-${serviceName}"]`);
const databasesResponse = page.waitForResponse('/api/v1/databases?**');
await page.waitForLoadState('networkidle');
await page.waitForSelector('[data-testid="loader"]', { state: 'hidden' });
const headerText = await page.textContent(
`[data-testid="entity-header-name"]`
@ -61,8 +70,6 @@ test.describe('Schema search', { tag: '@ingestion' }, () => {
expect(headerText).toBe(serviceName);
await databasesResponse;
const schemaResponse = page.waitForResponse('/api/v1/databaseSchemas?**');
await page.click('[data-testid="databases"]');
await page.click(

27
openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/AdvanceSearchFilter/CustomPropertyAdvanceSeach.spec.ts
View File

@ -28,7 +28,7 @@ test.use({ storageState: 'playwright/.auth/admin.json' });
const dashboardEntity = new DashboardClass();
const propertyName = `pwCustomPropertyDashboardTest${uuid()}`;
const propertyValue = 'dashboardcustomproperty';
const propertyValue = `dashboardcustomproperty_${uuid()}`;
test.beforeAll('Setup pre-requests', async ({ browser }) => {
const { apiContext, afterAction } = await createNewPage(browser);
@ -125,7 +125,12 @@ test('CustomProperty Dashboard Filter', async ({ page }) => {
const ruleLocator = page.locator('.rule').nth(0);
await page.getByTitle('Custom Properties').click();
// Perform click on rule field
await selectOption(
page,
ruleLocator.locator('.rule--field .ant-select'),
'Custom Properties'
);
await selectOption(
page,
@ -136,11 +141,19 @@ test('CustomProperty Dashboard Filter', async ({ page }) => {
// Select Custom Property Field when we want filter
await page
.locator(
'.group--children .rule--field .ant-select-selector .ant-select-selection-search'
'.group--children .rule--field .ant-select-selector .ant-select-selection-search .ant-select-selection-search-input'
)
.click();
.fill(propertyName);
await page.getByTitle(propertyName).click();
await page
.locator('.rule--operator .ant-select-selection-search-input')
.click();
await page.waitForSelector(`.ant-select-dropdown:visible`, {
state: 'visible',
});
await page.click(`.ant-select-dropdown:visible [title="=="]`);
// type custom property value based, on which the filter should be made on dashboard
await page
.locator('.group--children .rule--widget .ant-input')
@ -152,6 +165,12 @@ test('CustomProperty Dashboard Filter', async ({ page }) => {
await applyAdvanceFilter;
await page.waitForLoadState('networkidle');
await page.waitForSelector('[data-testid="loader"]', {
state: 'detached',
});
// Validate if filter dashboard appeared
await expect(

6
openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/ExploreTree.spec.ts
View File

@ -42,6 +42,12 @@ test.beforeEach(async ({ page }) => {
test.describe('Explore Tree scenarios ', () => {
test('Explore Tree', async ({ page }) => {
await test.step('Check the explore tree', async () => {
await page.waitForLoadState('networkidle');
await page.waitForSelector('[data-testid="loader"]', {
state: 'detached',
});
await expect(page.getByRole('tree')).toContainText('Databases');
await expect(page.getByRole('tree')).toContainText('Dashboards');
await expect(page.getByRole('tree')).toContainText('Pipelines');

4
openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts
View File

@ -74,6 +74,7 @@ test('Logical TestSuite', async ({ page }) => {
const testCaseName1 = table.testCasesResponseData?.[0]?.['name'];
const testCaseName2 = table.testCasesResponseData?.[1]?.['name'];
await sidebarClick(page, SidebarItem.DATA_QUALITY);
await page.waitForLoadState('networkidle');
const testSuite = page.waitForResponse(
'/api/v1/dataQuality/testSuites/search/list?*testSuiteType=logical*'
);
@ -217,6 +218,9 @@ test('Logical TestSuite', async ({ page }) => {
await page.waitForSelector("[data-testid='select-owner-tabs']", {
state: 'visible',
});
await page.waitForSelector(`[data-testid="loader"]`, {
state: 'detached',
});
const getOwnerList = page.waitForResponse(
'/api/v1/search/query?q=*isBot:false*index=user_search_index*'
);

1
openmetadata-ui/src/main/resources/ui/playwright/utils/advancedSearch.ts
View File

@ -200,6 +200,7 @@ export const selectOption = async (
optionTitle: string
) => {
await dropdownLocator.click();
await page.keyboard.type(optionTitle);
await page.waitForSelector(`.ant-select-dropdown:visible`, {
state: 'visible',
});

1
openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
View File

@ -1016,6 +1016,7 @@ export const createDescriptionTaskForGlossary = async (
}
if (addDescription) {
await page.locator(descriptionBox).clear();
await page
.locator(descriptionBox)
.fill(value.description ?? 'Updated description');

1
openmetadata-ui/src/main/resources/ui/src/App.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { render } from '@testing-library/react';
import React from 'react';
import App from './App';
import { AuthProvider } from './components/Auth/AuthProviders/AuthProvider';

11
openmetadata-ui/src/main/resources/ui/src/App.tsx
View File

@ -12,10 +12,10 @@
*/
import { isEmpty } from 'lodash';
import React, { FC, useEffect } from 'react';
import { FC, useEffect } from 'react';
import { HelmetProvider } from 'react-helmet-async';
import { I18nextProvider } from 'react-i18next';
import { Router } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
import AppRouter from './components/AppRouter/AppRouter';
import { AuthProvider } from './components/Auth/AuthProviders/AuthProvider';
import ErrorBoundary from './components/common/ErrorBoundary/ErrorBoundary';
@ -30,8 +30,8 @@ import TourProvider from './context/TourProvider/TourProvider';
import WebSocketProvider from './context/WebSocketProvider/WebSocketProvider';
import { useApplicationStore } from './hooks/useApplicationStore';
import { getCustomUiThemePreference } from './rest/settingConfigAPI';
import { getBasePath } from './utils/HistoryUtils';
import { history } from './utils/HistoryUtils';
import i18n from './utils/i18next/LocalUtil';
import { getThemeConfig } from './utils/ThemeUtils';
@ -41,7 +41,6 @@ const App: FC = () => {
const fetchApplicationConfig = async () => {
try {
const data = await getCustomUiThemePreference();
setApplicationConfig({
...data,
customTheme: getThemeConfig(data.customTheme),
@ -75,7 +74,7 @@ const App: FC = () => {
return (
<div className="main-container">
<div className="content-wrapper" data-testid="content-wrapper">
<Router history={history}>
<BrowserRouter basename={getBasePath()}>
<I18nextProvider i18n={i18n}>
<HelmetProvider>
<ErrorBoundary>
@ -103,7 +102,7 @@ const App: FC = () => {
</ErrorBoundary>
</HelmetProvider>
</I18nextProvider>
</Router>
</BrowserRouter>
</div>
</div>
);

15
openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointDetails/APIEndpointDetails.tsx
View File

@ -13,9 +13,9 @@
import { Col, Row, Tabs } from 'antd';
import { AxiosError } from 'axios';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory, useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants';
import { EntityTabs, EntityType } from '../../../enums/entity.enum';
import { Tag } from '../../../generated/entity/classification/tag';
@ -42,6 +42,7 @@ import {
updateTierTag,
} from '../../../utils/TagsUtils';
import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
import { useRequiredParams } from '../../../utils/useRequiredParams';
import { withActivityFeed } from '../../AppRouter/withActivityFeed';
import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton';
import Loader from '../../common/Loader/Loader';
@ -66,9 +67,9 @@ const APIEndpointDetails: React.FC<APIEndpointDetailsProps> = ({
const { t } = useTranslation();
const { currentUser } = useApplicationStore();
const { tab: activeTab = EntityTabs.SCHEMA } =
useParams<{ tab: EntityTabs }>();
useRequiredParams<{ tab: EntityTabs }>();
const { fqn: decodedApiEndpointFqn } = useFqn();
const history = useHistory();
const navigate = useNavigate();
const [feedCount, setFeedCount] = useState<FeedCounts>(
FEED_COUNT_INITIAL_DATA
);
@ -131,7 +132,7 @@ const APIEndpointDetails: React.FC<APIEndpointDetailsProps> = ({
const handleTabChange = (activeKey: string) => {
if (activeKey !== activeTab) {
history.push(
navigate(
getEntityDetailsPath(
EntityType.API_ENDPOINT,
decodedApiEndpointFqn,
@ -174,8 +175,8 @@ const APIEndpointDetails: React.FC<APIEndpointDetailsProps> = ({
);
const afterDeleteAction = useCallback(
(isSoftDelete?: boolean) => !isSoftDelete && history.push('/'),
[]
(isSoftDelete?: boolean) => !isSoftDelete && navigate('/'),
[navigate]
);
const {

14
openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointSchema/APIEndpointSchema.tsx
View File

@ -15,14 +15,7 @@ import { ColumnsType } from 'antd/lib/table';
import classNames from 'classnames';
import { cloneDeep, groupBy, isEmpty, isUndefined, uniqBy } from 'lodash';
import { EntityTags, TagFilterOptions } from 'Models';
import React, {
FC,
Key,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { FC, Key, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {} from '../../../constants/constants';
import { TABLE_SCROLL_VALUE } from '../../../constants/Table.constants';
@ -205,7 +198,7 @@ const APIEndpointSchema: FC<APIEndpointSchemaProps> = ({
};
const renderSchemaName = useCallback(
(_, record: Field) => (
(_: string, record: Field) => (
<div className="d-inline-flex w-max-90 vertical-align-inherit">
<Tooltip destroyTooltipOnHide title={getEntityName(record)}>
<span className="break-word">
@ -290,7 +283,6 @@ const APIEndpointSchema: FC<APIEndpointSchemaProps> = ({
title: t('label.name'),
dataIndex: TABLE_COLUMNS_KEYS.NAME,
key: TABLE_COLUMNS_KEYS.NAME,
accessor: TABLE_COLUMNS_KEYS.NAME,
fixed: 'left',
width: 220,
render: renderSchemaName,
@ -329,7 +321,6 @@ const APIEndpointSchema: FC<APIEndpointSchemaProps> = ({
title: t('label.tag-plural'),
dataIndex: TABLE_COLUMNS_KEYS.TAGS,
key: TABLE_COLUMNS_KEYS.TAGS,
accessor: TABLE_COLUMNS_KEYS.TAGS,
width: 300,
filterIcon: columnFilterIcon,
render: (tags: TagLabel[], record: Field, index: number) => (
@ -353,7 +344,6 @@ const APIEndpointSchema: FC<APIEndpointSchemaProps> = ({
title: t('label.glossary-term-plural'),
dataIndex: TABLE_COLUMNS_KEYS.TAGS,
key: TABLE_COLUMNS_KEYS.GLOSSARY,
accessor: TABLE_COLUMNS_KEYS.TAGS,
width: 300,
filterIcon: columnFilterIcon,
render: (tags: TagLabel[], record: Field, index: number) => (

2
openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.interface.ts
View File

@ -19,7 +19,7 @@ import { EntityHistory } from '../../../generated/type/entityHistory';
import { TitleBreadcrumbProps } from '../../common/TitleBreadcrumb/TitleBreadcrumb.interface';
export interface APIEndpointVersionProp {
version: string;
version?: string;
currentVersionData: APIEndpoint;
isVersionLoading: boolean;
owners: APIEndpoint['owners'];

13
openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx
View File

@ -13,9 +13,9 @@
import { Col, Row, Space, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import React, { FC, useEffect, useMemo, useState } from 'react';
import { FC, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory, useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { EntityField } from '../../../constants/Feeds.constants';
import { EntityTabs, EntityType } from '../../../enums/entity.enum';
import { ChangeDescription } from '../../../generated/entity/data/apiEndpoint';
@ -26,6 +26,7 @@ import {
getEntityVersionTags,
} from '../../../utils/EntityVersionUtils';
import { getVersionPath } from '../../../utils/RouterUtils';
import { useRequiredParams } from '../../../utils/useRequiredParams';
import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable';
import DescriptionV1 from '../../common/EntityDescription/DescriptionV1';
import Loader from '../../common/Loader/Loader';
@ -52,8 +53,8 @@ const APIEndpointVersion: FC<APIEndpointVersionProp> = ({
domain,
}: APIEndpointVersionProp) => {
const { t } = useTranslation();
const history = useHistory();
const { tab } = useParams<{ tab: EntityTabs }>();
const navigate = useNavigate();
const { tab } = useRequiredParams<{ tab: EntityTabs }>();
const [changeDescription, setChangeDescription] = useState<ChangeDescription>(
currentVersionData.changeDescription as ChangeDescription
);
@ -77,7 +78,7 @@ const APIEndpointVersion: FC<APIEndpointVersionProp> = ({
}, [currentVersionData]);
const handleTabChange = (activeKey: string) => {
history.push(
navigate(
getVersionPath(
EntityType.API_ENDPOINT,
currentVersionData.fullyQualifiedName ?? '',
@ -219,7 +220,7 @@ const APIEndpointVersion: FC<APIEndpointVersionProp> = ({
)}
<EntityVersionTimeLine
currentVersion={version}
currentVersion={version ?? ''}
entityType={EntityType.API_ENDPOINT}
versionHandler={versionHandler}
versionList={versionList}

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { findByText, queryByText, render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import {
Post,

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
View File

@ -15,7 +15,7 @@ import { Popover, Space } from 'antd';
import classNames from 'classnames';
import { compare, Operation } from 'fast-json-patch';
import { isUndefined } from 'lodash';
import React, { FC, useEffect, useRef, useState } from 'react';
import { FC, useEffect, useRef, useState } from 'react';
import { ReactionOperation } from '../../../enums/reactions.enum';
import { AnnouncementDetails } from '../../../generated/api/feed/createThread';
import { Post } from '../../../generated/entity/feed/thread';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardBody/FeedCardBody.test.tsx
View File

@ -18,7 +18,6 @@ import {
getByTestId,
render,
} from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import FeedCardBody from './FeedCardBody';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardBody/FeedCardBody.tsx
View File

@ -14,7 +14,7 @@
import { Button, Space, Typography } from 'antd';
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import React, { FC, useEffect, useMemo, useState } from 'react';
import { FC, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { formatDateTime } from '../../../../utils/date-time/DateTimeUtils';
import {

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardBody/FeedCardBodyNew.tsx
View File

@ -12,7 +12,7 @@
*/
import { Button, Card, Typography } from 'antd';
import React, { useCallback, useMemo, useState } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ASSET_CARD_STYLES } from '../../../../constants/Feeds.constants';
import { CardStyle } from '../../../../generated/entity/feed/thread';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardBody/FeedCardBodyV1.tsx
View File

@ -14,7 +14,7 @@
import { Button, Col, Row, Typography } from 'antd';
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import React, { useCallback, useMemo, useState } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import ActivityFeedEditor from '../../../../components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardFooter/FeedCardFooter.test.tsx
View File

@ -17,7 +17,6 @@ import {
queryByTestId,
render,
} from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import FeedCardFooter from './FeedCardFooter';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardFooter/FeedCardFooter.tsx
View File

@ -13,7 +13,7 @@
import { Button, Divider } from 'antd';
import { isUndefined } from 'lodash';
import React, { FC } from 'react';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { getReplyText } from '../../../../utils/FeedUtils';
import ProfilePicture from '../../../common/ProfilePicture/ProfilePicture';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeader.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { render, screen } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { Thread, ThreadType } from '../../../../generated/entity/feed/thread';
import FeedCardHeader from './FeedCardHeader';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeader.tsx
View File

@ -14,7 +14,7 @@
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import React, { FC } from 'react';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { ThreadType } from '../../../../generated/entity/feed/thread';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { User } from '../../../generated/entity/teams/user';
import PopoverContent from './PopoverContent';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
View File

@ -14,7 +14,7 @@
import Icon from '@ant-design/icons';
import { Popover, Space } from 'antd';
import { isNil, isUndefined, uniqueId } from 'lodash';
import React, { FC, useMemo, useState } from 'react';
import { FC, useMemo, useState } from 'react';
import { ReactComponent as IconEdit } from '../../../assets/svg/edit-new.svg';
import { ReactComponent as IconFeedDelete } from '../../../assets/svg/ic-delete.svg';
import { ReactComponent as IconReaction } from '../../../assets/svg/ic-reaction.svg';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx
View File

@ -14,7 +14,7 @@ import { Card, Col, Input, Skeleton, Space, Tooltip, Typography } from 'antd';
import classNames from 'classnames';
import { compare } from 'fast-json-patch';
import { isUndefined, orderBy } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { ASSET_CARD_STYLES } from '../../../constants/Feeds.constants';

8
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/CommentCard.component.tsx
View File

@ -13,13 +13,7 @@
import { Tooltip, Typography } from 'antd';
import classNames from 'classnames';
import { compare } from 'fast-json-patch';
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { Thread } from '../../../generated/entity/feed/thread';
import { useUserProfile } from '../../../hooks/user-profile/useUserProfile';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/ActivityFeedCardV2.tsx
View File

@ -14,7 +14,7 @@
import { Col, Row } from 'antd';
import classNames from 'classnames';
import { compare } from 'fast-json-patch';
import React, { useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { EntityField } from '../../../constants/Feeds.constants';
import { GeneratedBy } from '../../../generated/entity/feed/thread';
import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/CustomPropertyFeed/CustomPropertyFeed.component.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { getTextDiffCustomProperty } from '../../../../../utils/EntityVersionUtils';
import RichTextEditorPreviewerV1 from '../../../../common/RichTextEditor/RichTextEditorPreviewerV1';
import { CustomPropertyFeedProps } from './CustomPropertyFeed.interface';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/DescriptionFeed/DescriptionFeed.test.tsx
View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import { render, screen } from '@testing-library/react';
import React from 'react';
import {
MOCK_DESCRIPTION_FEED_1,
MOCK_DESCRIPTION_FEED_2,

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/DescriptionFeed/DescriptionFeed.tsx
View File

@ -12,7 +12,7 @@
*/
import { Col, Row } from 'antd';
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { EntityField } from '../../../../../constants/Feeds.constants';
import {
getFeedChangeFieldLabel,

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/DescriptionFeed/DescriptionFeedNew.tsx
View File

@ -12,7 +12,7 @@
*/
import { Col, Row } from 'antd';
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { EntityField } from '../../../../../constants/Feeds.constants';
import {
getFeedChangeFieldLabel,

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/OwnerFeed/OwnersFeed.tsx
View File

@ -14,7 +14,7 @@
import { Col, Row, Typography } from 'antd';
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import React, { useCallback, useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as AddIcon } from '../../../../../assets/svg/added-icon.svg';
import { ReactComponent as DeletedIcon } from '../../../../../assets/svg/deleted-icon.svg';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/TagsFeed/TagsFeed.tsx
View File

@ -13,7 +13,7 @@
import { Col, Row } from 'antd';
import { isEmpty } from 'lodash';
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { ReactComponent as AddIcon } from '../../../../../assets/svg/added-icon.svg';
import { ReactComponent as DeletedIcon } from '../../../../../assets/svg/deleted-icon.svg';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/TestCaseFeed/TestCaseFeed.test.tsx
View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import { render, screen } from '@testing-library/react';
import React from 'react';
import {
MOCK_TEST_CASE_FEED_DATA,
MOCK_TEST_CASE_FEED_DATA_2,

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/TestCaseFeed/TestCaseFeed.tsx
View File

@ -12,7 +12,7 @@
*/
import { Col, Row, Typography } from 'antd';
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { TEST_CASE_FEED_GRAPH_HEIGHT } from '../../../../../constants/constants';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardFooter/FeedCardFooter.tsx
View File

@ -13,7 +13,7 @@
import { Avatar, Button, Col, Row, Space, Tooltip, Typography } from 'antd';
import { min, noop, sortBy } from 'lodash';
import React, { useCallback, useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as ThreadIcon } from '../../../../assets/svg/thread-icon.svg';
import { ReactionOperation } from '../../../../enums/reactions.enum';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardFooter/FeedCardFooterNew.tsx
View File

@ -14,7 +14,7 @@
import { Avatar, Button, Col, Row } from 'antd';
import classNames from 'classnames';
import { min, noop, sortBy } from 'lodash';
import React, { useCallback, useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { ReactComponent as ThreadIcon } from '../../../../assets/svg/ic-reply-2.svg';
import { ReactionOperation } from '../../../../enums/reactions.enum';
import { ReactionType } from '../../../../generated/type/reaction';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardHeader/FeedCardHeaderV2.test.tsx
View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import { render, screen } from '@testing-library/react';
import React from 'react';
import {
CardStyle,
FieldOperation,

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardHeader/FeedCardHeaderV2.tsx
View File

@ -14,7 +14,7 @@
import { Tooltip, Typography } from 'antd';
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { Link } from 'react-router-dom';
import { useUserProfile } from '../../../../hooks/user-profile/useUserProfile';
import {

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedDrawer/ActivityFeedDrawer.tsx
View File

@ -13,7 +13,7 @@
import { Col, Drawer, Row } from 'antd';
import classNames from 'classnames';
import React, { FC } from 'react';
import { FC } from 'react';
import { ThreadType } from '../../../generated/entity/feed/thread';
import FeedPanelBodyV1 from '../ActivityFeedPanel/FeedPanelBodyV1';
import FeedPanelHeader from '../ActivityFeedPanel/FeedPanelHeader';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor.test.tsx
View File

@ -12,7 +12,7 @@
*/
import { findByTestId, render } from '@testing-library/react';
import React, { forwardRef } from 'react';
import { forwardRef } from 'react';
import { MemoryRouter } from 'react-router-dom';
import ActivityFeedEditor from './ActivityFeedEditor';

27
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor.tsx
View File

@ -12,15 +12,17 @@
*/
import classNames from 'classnames';
import React, {
import { noop } from 'lodash';
import {
forwardRef,
HTMLAttributes,
LegacyRef,
useImperativeHandle,
useRef,
useState,
} from 'react';
import { getBackendFormat, HTMLToMarkdown } from '../../../utils/FeedUtils';
import { editorRef } from '../../common/RichTextEditor/RichTextEditor.interface';
import { EditorContentRef } from '../../common/RichTextEditor/RichTextEditor.interface';
import { FeedEditor } from '../FeedEditor/FeedEditor';
import { KeyHelp } from './KeyHelp';
import { SendButton } from './SendButton';
@ -35,12 +37,7 @@ interface ActivityFeedEditorProp extends HTMLAttributes<HTMLDivElement> {
focused?: boolean;
}
export type EditorContentRef = {
getEditorValue: () => string;
clearEditorValue: () => string;
};
const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
const ActivityFeedEditor = forwardRef<EditorContentRef, ActivityFeedEditorProp>(
(
{
className,
@ -66,10 +63,12 @@ const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
const onSaveHandler = () => {
if (editorRef.current) {
if (editorRef.current?.getEditorValue()) {
if (editorRef.current?.getEditorContent()) {
setEditorValue('');
editorRef.current?.clearEditorValue();
const message = getBackendFormat(editorRef.current?.getEditorValue());
editorRef.current?.clearEditorContent();
const message = getBackendFormat(
editorRef.current?.getEditorContent()
);
onSave && onSave(message);
}
}
@ -79,7 +78,9 @@ const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
* Handle forward ref logic and provide method access to parent component
*/
useImperativeHandle(ref, () => ({
...editorRef.current,
getEditorContent: editorRef.current?.getEditorContent ?? (() => ''),
clearEditorContent: editorRef.current?.clearEditorContent ?? noop,
setEditorContent: editorRef.current?.setEditorContent ?? noop,
}));
return (
@ -91,7 +92,7 @@ const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
editorClass={editorClass}
focused={focused}
placeHolder={placeHolder}
ref={editorRef}
ref={editorRef as LegacyRef<EditorContentRef>}
onChangeHandler={onChangeHandler}
onSave={onSaveHandler}
/>

27
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditorNew.tsx
View File

@ -12,15 +12,17 @@
*/
import classNames from 'classnames';
import React, {
import { noop } from 'lodash';
import {
forwardRef,
HTMLAttributes,
LegacyRef,
useImperativeHandle,
useRef,
useState,
} from 'react';
import { getBackendFormat, HTMLToMarkdown } from '../../../utils/FeedUtils';
import { editorRef } from '../../common/RichTextEditor/RichTextEditor.interface';
import { EditorContentRef } from '../../common/RichTextEditor/RichTextEditor.interface';
import { FeedEditor } from '../FeedEditor/FeedEditor';
import { KeyHelp } from './KeyHelp';
import { SendButton } from './SendButton';
@ -35,12 +37,7 @@ interface ActivityFeedEditorProp extends HTMLAttributes<HTMLDivElement> {
focused?: boolean;
}
export type EditorContentRef = {
getEditorValue: () => string;
clearEditorValue: () => string;
};
const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
const ActivityFeedEditor = forwardRef<EditorContentRef, ActivityFeedEditorProp>(
(
{
className,
@ -66,10 +63,12 @@ const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
const onSaveHandler = () => {
if (editorRef.current) {
if (editorRef.current?.getEditorValue()) {
if (editorRef.current?.getEditorContent()) {
setEditorValue('');
editorRef.current?.clearEditorValue();
const message = getBackendFormat(editorRef.current?.getEditorValue());
editorRef.current?.clearEditorContent();
const message = getBackendFormat(
editorRef.current?.getEditorContent()
);
onSave && onSave(message);
}
}
@ -79,7 +78,9 @@ const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
* Handle forward ref logic and provide method access to parent component
*/
useImperativeHandle(ref, () => ({
...editorRef.current,
getEditorContent: editorRef.current?.getEditorContent ?? (() => ''),
clearEditorContent: editorRef.current?.clearEditorContent ?? noop,
setEditorContent: editorRef.current?.setEditorContent ?? noop,
}));
return (
@ -92,7 +93,7 @@ const ActivityFeedEditor = forwardRef<editorRef, ActivityFeedEditorProp>(
editorClass={editorClass}
focused={focused}
placeHolder={placeHolder}
ref={editorRef}
ref={editorRef as LegacyRef<EditorContentRef>}
onChangeHandler={onChangeHandler}
onSave={onSaveHandler}
/>

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/KeyHelp.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { findByTestId, queryByTestId, render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { KeyHelp } from './KeyHelp';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/KeyHelp.tsx
View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import React from 'react';
import { useTranslation } from 'react-i18next';
export const KeyHelp = ({ editorValue }: { editorValue: string }) => {

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { findByTestId, fireEvent, render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { SendButton } from './SendButton';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx
View File

@ -14,7 +14,7 @@
import Icon from '@ant-design/icons/lib/components/Icon';
import { Button } from 'antd';
import classNames from 'classnames';
import React, { FC } from 'react';
import { FC } from 'react';
import { ReactComponent as IconPaperPlanePrimary } from '../../../assets/svg/paper-plane-fill.svg';
import './send-button.less';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
View File

@ -12,7 +12,7 @@
*/
import { Typography } from 'antd';
import { isEmpty } from 'lodash';
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
import { ReactNode, useEffect, useMemo, useState } from 'react';
import { ReactComponent as FeedEmptyIcon } from '../../../assets/svg/activity-feed-no-data-placeholder.svg';
import ErrorPlaceHolder from '../../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1New.component.tsx
View File

@ -13,7 +13,7 @@
import { Typography } from 'antd';
import classNames from 'classnames';
import { isEmpty, isUndefined } from 'lodash';
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
import { ReactNode, useEffect, useMemo, useState } from 'react';
import { ReactComponent as FeedEmptyIcon } from '../../../assets/svg/ic-task-empty.svg';
import { ERROR_PLACEHOLDER_TYPE } from '../../../enums/common.enum';
import { Thread } from '../../../generated/entity/feed/thread';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelBodyV1.tsx
View File

@ -13,7 +13,7 @@
import { Button } from 'antd';
import classNames from 'classnames';
import React, { FC, useCallback, useMemo } from 'react';
import { FC, useCallback, useMemo } from 'react';
import { EntityType } from '../../../enums/entity.enum';
import { Post, ThreadType } from '../../../generated/entity/feed/thread';
import { ENTITY_LINK_SEPARATOR } from '../../../utils/EntityUtils';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelBodyV1New.tsx
View File

@ -13,7 +13,7 @@
import { Button } from 'antd';
import classNames from 'classnames';
import React, { FC, useCallback, useMemo } from 'react';
import { FC, useCallback, useMemo } from 'react';
import { Post, ThreadType } from '../../../generated/entity/feed/thread';
import ActivityFeedCardNew from '../ActivityFeedCardNew/ActivityFeedcardNew.component';
import TaskFeedCardNew from '../TaskFeedCard/TaskFeedCardNew.component';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { findByTestId, queryByTestId, render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { ThreadType } from '../../../generated/entity/feed/thread';
import FeedPanelHeader from './FeedPanelHeader';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx
View File

@ -14,7 +14,7 @@
import { PlusOutlined } from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import classNames from 'classnames';
import React, { FC } from 'react';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import CloseIcon from '../../../components/Modals/CloseIcon.component';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider.test.tsx
View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import { act, fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { mockUserData } from '../../../mocks/MyDataPage.mock';
import {
deletePostById,

10
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider.tsx
View File

@ -14,7 +14,7 @@
import { AxiosError } from 'axios';
import { compare, Operation } from 'fast-json-patch';
import { isEqual, orderBy } from 'lodash';
import React, {
import {
createContext,
ReactNode,
useCallback,
@ -94,7 +94,7 @@ const ActivityFeedProvider = ({ children, user }: Props) => {
setTestCaseResolutionStatus(
orderBy(data, (item) => item.timestamp, ['asc'])
);
} catch (error) {
} catch {
setTestCaseResolutionStatus([]);
} finally {
setIsTestCaseResolutionLoading(false);
@ -134,7 +134,7 @@ const ActivityFeedProvider = ({ children, user }: Props) => {
}, []);
const fetchUpdatedThread = useCallback(
async (id) => {
async (id: string) => {
try {
const res = await getFeedById(id);
setSelectedThread(res.data);
@ -147,7 +147,7 @@ const ActivityFeedProvider = ({ children, user }: Props) => {
}
});
});
} catch (err) {
} catch {
// no need to show error toast
}
},
@ -236,7 +236,7 @@ const ActivityFeedProvider = ({ children, user }: Props) => {
}
}, []);
const refreshActivityFeed = useCallback((threads) => {
const refreshActivityFeed = useCallback((threads: Thread[]) => {
setEntityThread([...threads]);
}, []);

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedProvider/DummyTestComponent.tsx
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useEffect } from 'react';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { EntityType } from '../../../enums/entity.enum';
import { FeedFilter } from '../../../enums/mydata.enum';

23
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx
View File

@ -14,16 +14,9 @@ import { Button, Dropdown, Menu, Segmented, Space, Typography } from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import {
default as React,
RefObject,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory, useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { ReactComponent as AllActivityIcon } from '../../../assets/svg/all-activity-v2.svg';
import { ReactComponent as TaskCloseIcon } from '../../../assets/svg/ic-check-circle-new.svg';
import { ReactComponent as TaskCloseIconBlue } from '../../../assets/svg/ic-close-task.svg';
@ -62,6 +55,7 @@ import {
getEntityUserLink,
} from '../../../utils/EntityUtils';
import { showErrorToast } from '../../../utils/ToastUtils';
import { useRequiredParams } from '../../../utils/useRequiredParams';
import ErrorPlaceHolderNew from '../../common/ErrorWithPlaceholder/ErrorPlaceHolderNew';
import Loader from '../../common/Loader/Loader';
import { TaskTabNew } from '../../Entity/Task/TaskTab/TaskTabNew.component';
@ -93,7 +87,7 @@ export const ActivityFeedTab = ({
layoutType,
feedCount,
}: ActivityFeedTabProps) => {
const history = useHistory();
const navigate = useNavigate();
const { t } = useTranslation();
const { currentUser } = useApplicationStore();
const { isAdminUser } = useAuth();
@ -104,7 +98,7 @@ export const ActivityFeedTab = ({
rootMargin: '0px 0px 2px 0px',
});
const { subTab: activeTab = subTab } =
useParams<{ tab: EntityTabs; subTab: ActivityFeedTabs }>();
useRequiredParams<{ tab: EntityTabs; subTab: ActivityFeedTabs }>();
const [taskFilter, setTaskFilter] = useState<ThreadTaskStatus>(
ThreadTaskStatus.Open
);
@ -158,13 +152,14 @@ export const ActivityFeedTab = ({
const handleTabChange = (subTab: string) => {
setIsFirstLoad(true);
history.replace(
navigate(
entityUtilClassBase.getEntityLink(
entityType,
fqn,
EntityTabs.ACTIVITY_FEED,
subTab
)
),
{ replace: true }
);
setActiveThread();
setIsFullWidth(false);
@ -235,7 +230,7 @@ export const ActivityFeedTab = ({
setCountData((prev) => ({ ...prev, loading: false }));
};
const getThreadType = useCallback((activeTab) => {
const getThreadType = useCallback((activeTab?: ActivityFeedTabs) => {
if (activeTab === ActivityFeedTabs.TASKS) {
return ThreadType.Task;
} else if (activeTab === ActivityFeedTabs.ALL) {

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThread.test.tsx
View File

@ -16,7 +16,6 @@ import {
findByText,
render,
} from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import ActivityThread from './ActivityThread';
import { mockThreadData } from './ActivityThread.mock';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThread.tsx
View File

@ -13,7 +13,7 @@
import { Divider } from 'antd';
import { AxiosError } from 'axios';
import React, { FC, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Post,

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.test.tsx
View File

@ -17,7 +17,6 @@ import {
queryByTestId,
render,
} from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { mockThreadData } from './ActivityThread.mock';
import ActivityThreadList from './ActivityThreadList';

8
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
View File

@ -12,9 +12,9 @@
*/
import { Card, Typography } from 'antd';
import { isEqual } from 'lodash';
import React, { FC, Fragment } from 'react';
import { FC, Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import {
ANNOUNCEMENT_BG,
ANNOUNCEMENT_BORDER,
@ -49,7 +49,7 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
updateThreadHandler,
}) => {
const { t } = useTranslation();
const history = useHistory();
const navigate = useNavigate();
const { updatedFeedList: updatedThreads, relativeDays } =
getFeedListWithRelativeDays(threads);
@ -58,7 +58,7 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
};
const handleCardClick = (task: Thread, isTask: boolean) => {
isTask && history.push(getTaskDetailPath(task));
isTask && navigate(getTaskDetailPath(task));
};
return (

21
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { act, findAllByText, render, screen } from '@testing-library/react';
import React from 'react';
import ReactDOM from 'react-dom';
import { MemoryRouter } from 'react-router-dom';
import ActivityThreadPanel from './ActivityThreadPanel';
@ -54,19 +53,17 @@ describe('Test ActivityThreadPanel Component', () => {
});
it('Check if it has all child elements', async () => {
await act(async () => {
const { container } = render(
<ActivityThreadPanel {...mockActivityThreadPanelProp} />,
{ wrapper: MemoryRouter }
);
const { container } = render(
<ActivityThreadPanel {...mockActivityThreadPanelProp} />,
{ wrapper: MemoryRouter }
);
const panelThreadList = await findAllByText(
container,
/ActivityThreadList/i
);
const panelThreadList = await findAllByText(
container,
/ActivityThreadList/i
);
expect(panelThreadList).toHaveLength(1);
});
expect(panelThreadList).toHaveLength(1);
});
it('Should create an observer if IntersectionObserver is available', async () => {

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.tsx
View File

@ -14,7 +14,7 @@
import { Drawer, Tabs } from 'antd';
import classNames from 'classnames';
import { isEqual } from 'lodash';
import React, { FC, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PanelTab } from '../../../constants/Feeds.constants';
import { ThreadType } from '../../../generated/entity/feed/thread';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { findByTestId, findByText, render } from '@testing-library/react';
import React from 'react';
import ReactDOM from 'react-dom';
import { MemoryRouter } from 'react-router-dom';
import { ThreadType } from '../../../generated/entity/feed/thread';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
View File

@ -16,7 +16,7 @@ import { AxiosError } from 'axios';
import classNames from 'classnames';
import { Operation } from 'fast-json-patch';
import { isEqual, isUndefined } from 'lodash';
import React, { FC, Fragment, RefObject, useEffect, useState } from 'react';
import { FC, Fragment, RefObject, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { confirmStateInitialValue } from '../../../constants/Feeds.constants';
import { observerOptions } from '../../../constants/Mydata.constants';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.test.tsx
View File

@ -12,7 +12,7 @@
*/
import { findByTestId, fireEvent, render } from '@testing-library/react';
import React, { KeyboardEvent } from 'react';
import { KeyboardEvent } from 'react';
import { MemoryRouter } from 'react-router-dom';
import { FeedEditor } from './FeedEditor';

13
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx
View File

@ -18,7 +18,7 @@ import { debounce, isNil } from 'lodash';
import { Parchment } from 'quill';
import 'quill-mention/autoregister';
import QuillMarkdown from 'quilljs-markdown';
import React, {
import {
forwardRef,
KeyboardEvent,
useCallback,
@ -50,7 +50,7 @@ import { LinkBlot } from '../../../utils/QuillLink/QuillLink';
import { insertMention, insertRef } from '../../../utils/QuillUtils';
import { getSanitizeContent } from '../../../utils/sanitize.utils';
import searchClassBase from '../../../utils/SearchClassBase';
import { editorRef } from '../../common/RichTextEditor/RichTextEditor.interface';
import { EditorContentRef } from '../../common/RichTextEditor/RichTextEditor.interface';
import './feed-editor.less';
import { FeedEditorProp, MentionSuggestionsItem } from './FeedEditor.interface';
import './quill-emoji.css';
@ -68,7 +68,7 @@ const strikethrough = (_node: any, delta: typeof Delta) => {
: null;
};
export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
export const FeedEditor = forwardRef<EditorContentRef, FeedEditorProp>(
(
{
className,
@ -309,15 +309,18 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
* Handle forward ref logic and provide method access to parent component
*/
useImperativeHandle(ref, () => ({
getEditorValue() {
getEditorContent() {
setValue('');
// sanitize the content before sending it to the parent component
return HTMLToMarkdown.turndown(getSanitizeContent(value));
},
clearEditorValue() {
clearEditorContent() {
setValue('');
},
setEditorContent(content: string) {
setValue(content);
},
}));
useEffect(() => {

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedListSeparator/FeedListSeparator.test.tsx
View File

@ -17,7 +17,6 @@ import {
queryByTestId,
render,
} from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import FeedListSeparator from './FeedListSeparator';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedListSeparator/FeedListSeparator.tsx
View File

@ -13,7 +13,7 @@
import { Divider } from 'antd';
import classNames from 'classnames';
import React, { FC } from 'react';
import { FC } from 'react';
import { FeedListSeparatorProp } from '../ActivityFeedList/ActivityFeedList.interface';
import './feed-list-separator.less';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Emoji.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { User } from '../../../generated/entity/teams/user';
import { ReactionType } from '../../../generated/type/reaction';
import Emoji from './Emoji';

4
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Emoji.tsx
View File

@ -14,7 +14,7 @@
import '@github/g-emoji-element';
import { Button, Popover } from 'antd';
import classNames from 'classnames';
import React, { FC, useEffect, useMemo, useState } from 'react';
import { createElement, FC, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { REACTION_LIST } from '../../../constants/reactions.constant';
import { ReactionOperation } from '../../../enums/reactions.enum';
@ -93,7 +93,7 @@ const Emoji: FC<EmojiProps> = ({
setIsClicked(false);
}, [reaction]);
const element = React.createElement(
const element = createElement(
'g-emoji',
{
alias: reactionObject?.alias,

3
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Reaction.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { ReactionType } from '../../../generated/type/reaction';
import Reaction from './Reaction';
@ -58,7 +57,7 @@ describe('Test Reaction Component', () => {
);
});
it('Should call onHide methdod on click of emoji button', async () => {
it('Should call onHide method on click of emoji button', async () => {
const { findByTestId } = render(<Reaction {...mockProps} />);
const reactionButton = await findByTestId('reaction-button');

4
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Reaction.tsx
View File

@ -15,7 +15,7 @@ import '@github/g-emoji-element';
import { Button } from 'antd';
import classNames from 'classnames';
import { uniqueId } from 'lodash';
import React, { FC } from 'react';
import { createElement, FC } from 'react';
import { ReactionOperation } from '../../../enums/reactions.enum';
import { ReactionType } from '../../../generated/type/reaction';
import useImage from '../../../hooks/useImage';
@ -51,7 +51,7 @@ const Reaction: FC<ReactionProps> = ({
onHide();
};
const element = React.createElement(
const element = createElement(
'g-emoji',
{
alias: reaction?.alias,

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Reactions.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { ReactionType } from '../../../generated/type/reaction';
import Reactions from './Reactions';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Reactions/Reactions.tsx
View File

@ -14,7 +14,7 @@
import '@github/g-emoji-element';
import { Button, Popover } from 'antd';
import { groupBy, uniqueId } from 'lodash';
import React, { FC, useState } from 'react';
import { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as AddReactionIcon } from '../../../assets/svg/ic-add-emoji.svg';
import {

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/ActivityFeedActions.tsx
View File

@ -12,7 +12,7 @@
*/
import Icon from '@ant-design/icons/lib/components/Icon';
import { Space } from 'antd';
import React, { useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as IconEdit } from '../../../assets/svg/edit-new.svg';
import { ReactComponent as DeleteIcon } from '../../../assets/svg/ic-delete.svg';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx
View File

@ -13,7 +13,6 @@
import Icon from '@ant-design/icons/lib/components/Icon';
import { Typography } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as AnnouncementIcon } from '../../../assets/svg/announcements-v1.svg';
import './task-badge.less';

1
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/TaskBadge.tsx
View File

@ -14,7 +14,6 @@
import Icon from '@ant-design/icons';
import { Space, Tooltip, Typography } from 'antd';
import { isEqual } from 'lodash';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as IconTaskClose } from '../../../assets/svg/complete.svg';
import { ReactComponent as IconTaskOpen } from '../../../assets/svg/in-progress.svg';

2
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.test.tsx
View File

@ -22,7 +22,7 @@ jest.mock('react-router-dom', () => ({
.mockImplementation(({ children }: { children: React.ReactNode }) => (
<p data-testid="link">{children}</p>
)),
useHistory: jest.fn(),
useNavigate: jest.fn(),
}));
jest.mock('../ActivityFeedProvider/ActivityFeedProvider', () => ({

13
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
View File

@ -14,14 +14,15 @@ import Icon from '@ant-design/icons';
import { Button, Col, Row, Tooltip, Typography } from 'antd';
import classNames from 'classnames';
import { isUndefined, lowerCase, noop } from 'lodash';
import React, { useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { ReactComponent as TaskCloseIcon } from '../../../assets/svg/ic-close-task.svg';
import { ReactComponent as TaskOpenIcon } from '../../../assets/svg/ic-open-task.svg';
import { ReactComponent as ThreadIcon } from '../../../assets/svg/thread.svg';
import EntityPopOverCard from '../../../components/common/PopOverCard/EntityPopOverCard';
import UserPopOverCard from '../../../components/common/PopOverCard/UserPopOverCard';
import { TASK_TYPES } from '../../../constants/Task.constant';
import {
Post,
Thread,
@ -34,8 +35,6 @@ import {
} from '../../../utils/date-time/DateTimeUtils';
import EntityLink from '../../../utils/EntityLink';
import { getEntityFQN, getEntityType } from '../../../utils/FeedUtils';
import { TASK_TYPES } from '../../../constants/Task.constant';
import { getTaskDetailPath } from '../../../utils/TasksUtils';
import { OwnerLabel } from '../../common/OwnerLabel/OwnerLabel.component';
import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';
@ -62,7 +61,7 @@ const TaskFeedCard = ({
isActive,
hidePopover = false,
}: TaskFeedCardProps) => {
const history = useHistory();
const navigate = useNavigate();
const { t } = useTranslation();
const { showDrawer, setActiveThread } = useActivityFeedProvider();
const [showActions, setShowActions] = useState(false);
@ -112,9 +111,7 @@ const TaskFeedCard = ({
};
const handleTaskLinkClick = () => {
history.push({
pathname: getTaskDetailPath(feed),
});
navigate(getTaskDetailPath(feed));
setActiveThread(feed);
};

10
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCardNew.component.tsx
View File

@ -15,9 +15,9 @@ import { Button, Card, Col, Row, Tooltip, Typography } from 'antd';
import classNames from 'classnames';
import { isEmpty, isEqual, isUndefined, lowerCase } from 'lodash';
import React, { useCallback, useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { ReactComponent as TaskCloseIcon } from '../../../assets/svg/ic-close-task.svg';
import { ReactComponent as TaskOpenIcon } from '../../../assets/svg/ic-open-task.svg';
import { ReactComponent as ReplyIcon } from '../../../assets/svg/ic-reply-2.svg';
@ -78,7 +78,7 @@ const TaskFeedCard = ({
isForFeedTab = false,
isOpenInDrawer = false,
}: TaskFeedCardProps) => {
const history = useHistory();
const navigate = useNavigate();
const { t } = useTranslation();
const { setActiveThread } = useActivityFeedProvider();
const { currentUser } = useApplicationStore();
@ -120,9 +120,7 @@ const TaskFeedCard = ({
}, [feed]);
const handleTaskLinkClick = () => {
history.push({
pathname: getTaskDetailPath(feed),
});
navigate(getTaskDetailPath(feed));
setActiveThread(feed);
};

1
openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.test.tsx
View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import { render, screen } from '@testing-library/react';
import React from 'react';
import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg';
import * as ToastUtils from '../../utils/ToastUtils';
import AlertBar from './AlertBar';

2
openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx
View File

@ -12,7 +12,7 @@
*/
import { Alert } from 'antd';
import classNames from 'classnames';
import React, { useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg';
import { useAlertStore } from '../../hooks/useAlertStore';
import { getIconAndClassName } from '../../utils/ToastUtils';

16
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertConfigDetails/AlertConfigDetails.test.tsx
View File

@ -108,15 +108,13 @@ describe('AlertConfigDetails', () => {
it('should show loader when fetching data', async () => {
jest.spyOn(React, 'useState').mockImplementationOnce(() => [1, jest.fn()]);
await act(async () => {
render(
<AlertConfigDetails
alertDetails={mockAlertDetails}
isNotificationAlert={false}
/>
);
render(
<AlertConfigDetails
alertDetails={mockAlertDetails}
isNotificationAlert={false}
/>
);
expect(screen.getByText('Loader')).toBeInTheDocument();
});
expect(screen.getByText('Loader')).toBeInTheDocument();
});
});

2
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertConfigDetails/AlertConfigDetails.tsx
View File

@ -14,7 +14,7 @@
import { Col, Divider, Form, Row } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { isEmpty } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FilterResourceDescriptor } from '../../../../generated/events/filterResourceDescriptor';
import { ModifiedCreateEventSubscription } from '../../../../pages/AddObservabilityPage/AddObservabilityPage.interface';

1
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertDiagnosticInfo/AlertDiagnosticInfoTab.test.tsx
View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import { act, render, screen } from '@testing-library/react';
import React from 'react';
import {
mockDiagnosticData,
mockEmptyDiagnosticData,

4
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertDiagnosticInfo/AlertDiagnosticInfoTab.tsx
View File

@ -14,7 +14,7 @@
import { InfoCircleOutlined } from '@ant-design/icons';
import { Card, Col, Row, Skeleton, Tooltip, Typography } from 'antd';
import { AxiosError } from 'axios';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { GRAYED_OUT_COLOR } from '../../../../constants/constants';
import { EventSubscriptionDiagnosticInfo } from '../../../../generated/events/api/eventSubscriptionDiagnosticInfo';
import { useFqn } from '../../../../hooks/useFqn';
@ -90,4 +90,4 @@ function AlertDiagnosticInfoTab() {
);
}
export default React.memo(AlertDiagnosticInfoTab);
export default memo(AlertDiagnosticInfoTab);

11
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertRecentEventsTab/AlertRecentEventsTab.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { act, fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import {
mockAlertDetails,
MOCK_TYPED_EVENT_LIST_RESPONSE,
@ -69,13 +68,11 @@ describe('AlertRecentEventsTab', () => {
});
it('should display loading skeletons when loading', async () => {
await act(async () => {
render(<AlertRecentEventsTab alertDetails={mockAlertDetails} />);
render(<AlertRecentEventsTab alertDetails={mockAlertDetails} />);
expect(
await screen.findAllByTestId('skeleton-loading-panel')
).toHaveLength(5);
});
expect(await screen.findAllByTestId('skeleton-loading-panel')).toHaveLength(
5
);
});
it('should display error placeholder when no data is available', async () => {

2
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertRecentEventsTab/AlertRecentEventsTab.tsx
View File

@ -24,7 +24,7 @@ import {
import { AxiosError } from 'axios';
import { isEmpty, isUndefined, startCase } from 'lodash';
import { MenuInfo } from 'rc-menu/lib/interface';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as FilterIcon } from '../../../../assets/svg/ic-feeds-filter.svg';
import { AlertRecentEventFilters } from '../../../../enums/Alerts.enum';

9
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertFormSourceItem/AlertFormSourceItem.test.tsx
View File

@ -10,10 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { fireEvent, render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { useFqn } from '../../../hooks/useFqn';
import { MOCK_FILTER_RESOURCES } from '../../../test/unit/mocks/observability.mock';
@ -69,9 +66,7 @@ describe('AlertFormSourceItem', () => {
wrapper: MemoryRouter,
});
const addButton = screen.getByTestId('add-source-button');
await act(async () => {
userEvent.click(addButton);
});
fireEvent.click(addButton);
expect(screen.getByTestId('drop-down-menu')).toBeInTheDocument();
});

20
openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertFormSourceItem/AlertFormSourceItem.tsx
View File

@ -21,13 +21,8 @@ import {
Select,
Typography,
} from 'antd';
import React, {
ReactNode,
useCallback,
useMemo,
useRef,
useState,
} from 'react';
import type { MenuInfo } from 'rc-menu/lib/interface';
import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import FormCardSection from '../../../components/common/FormCardSection/FormCardSection';
import { useFqn } from '../../../hooks/useFqn';
@ -85,10 +80,13 @@ function AlertFormSourceItem({
[resourcesOptions]
);
const handleMenuItemClick: MenuItemProps['onClick'] = useCallback((info) => {
form.setFieldValue(['resources'], [info.key]);
setIsEditMode(true);
}, []);
const handleMenuItemClick: MenuItemProps['onClick'] = useCallback(
(info: MenuInfo) => {
form.setFieldValue(['resources'], [info.key]);
setIsEditMode(true);
},
[]
);
return (
<FormCardSection

2
openmetadata-ui/src/main/resources/ui/src/components/Alerts/DestinationFormItem/DestinationFormItem.component.tsx
View File

@ -14,7 +14,7 @@
import { Button, Col, Divider, Form, Row, Tooltip } from 'antd';
import { AxiosError } from 'axios';
import { isEmpty, isNil, isUndefined } from 'lodash';
import React, { Fragment, useMemo, useState } from 'react';
import { Fragment, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import FormCardSection from '../../../components/common/FormCardSection/FormCardSection';
import { EXTERNAL_CATEGORY_OPTIONS } from '../../../constants/Alerts.constants';

1
openmetadata-ui/src/main/resources/ui/src/components/Alerts/DestinationFormItem/DestinationFormItem.test.tsx
View File

@ -12,7 +12,6 @@
*/
import { render, screen } from '@testing-library/react';
import { Form, FormInstance } from 'antd';
import React from 'react';
import { DESTINATION_SOURCE_ITEMS } from '../../../constants/Alerts.constants';
import DestinationFormItem from './DestinationFormItem.component';

64
openmetadata-ui/src/main/resources/ui/src/components/Alerts/DestinationFormItem/DestinationSelectItem/DestinationSelectItem.test.tsx
View File

@ -14,14 +14,13 @@
import {
act,
findByRole,
fireEvent,
render,
screen,
waitForElement,
waitFor,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Form } from 'antd';
import { isString } from 'lodash';
import React from 'react';
import DestinationSelectItem from './DestinationSelectItem';
import { DestinationSelectItemProps } from './DestinationSelectItem.interface';
@ -57,9 +56,11 @@ jest.mock('antd', () => {
describe('DestinationSelectItem component', () => {
it('should show internal tab by default in the dropdown', async () => {
await act(async () => {
render(<DestinationSelectItem {...MOCK_DESTINATION_SELECT_ITEM_PROPS} />);
});
render(
<Form initialValues={{ destinations: [{}] }}>
<DestinationSelectItem {...MOCK_DESTINATION_SELECT_ITEM_PROPS} />
</Form>
);
const id = MOCK_DESTINATION_SELECT_ITEM_PROPS.id;
const selectorKey = MOCK_DESTINATION_SELECT_ITEM_PROPS.selectorKey;
@ -71,13 +72,23 @@ describe('DestinationSelectItem component', () => {
'combobox'
);
// Handle click and dropdown rendering
await act(async () => {
userEvent.click(categorySelect);
fireEvent.focus(categorySelect);
fireEvent.keyDown(categorySelect, {
key: 'ArrowDown',
code: 'ArrowDown',
});
});
await waitForElement(() =>
screen.findByTestId(`destination-category-dropdown-${selectorKey}`)
);
// Wait for the dropdown to be rendered in the portal
await waitFor(async () => {
expect(
await screen.findByTestId(
`destination-category-dropdown-${selectorKey}`
)
).toBeInTheDocument();
});
expect(
await screen.findByTestId('Admins-internal-option')
@ -113,7 +124,11 @@ describe('DestinationSelectItem component', () => {
const selectorKey = MOCK_DESTINATION_SELECT_ITEM_PROPS.selectorKey;
await act(async () => {
render(<DestinationSelectItem {...MOCK_DESTINATION_SELECT_ITEM_PROPS} />);
render(
<Form initialValues={{ destinations: [{}] }}>
<DestinationSelectItem {...MOCK_DESTINATION_SELECT_ITEM_PROPS} />
</Form>
);
});
const categorySelect = await findByRole(
@ -121,16 +136,21 @@ describe('DestinationSelectItem component', () => {
'combobox'
);
// Handle initial focus and state updates
await act(async () => {
userEvent.click(categorySelect);
fireEvent.focus(categorySelect);
fireEvent.keyDown(categorySelect, {
key: 'ArrowDown',
code: 'ArrowDown',
});
});
await waitForElement(() =>
screen.findByTestId(`destination-category-dropdown-${selectorKey}`)
);
screen.debug(
await screen.findByTestId(`destination-category-dropdown-${selectorKey}`)
);
// Wait for the dropdown to be rendered in the portal
await waitFor(() => {
expect(
screen.getByTestId(`destination-category-dropdown-${selectorKey}`)
).toBeInTheDocument();
});
expect(
await screen.findByTestId('Email-external-option')
@ -153,13 +173,17 @@ describe('DestinationSelectItem component', () => {
const id = MOCK_DESTINATION_SELECT_ITEM_PROPS.id;
await act(async () => {
render(<DestinationSelectItem {...MOCK_DESTINATION_SELECT_ITEM_PROPS} />);
render(
<Form initialValues={{ destinations: [{}] }}>
<DestinationSelectItem {...MOCK_DESTINATION_SELECT_ITEM_PROPS} />
</Form>
);
});
const removeFieldButton = screen.getByTestId(`remove-destination-${id}`);
await act(async () => {
userEvent.click(removeFieldButton);
fireEvent.click(removeFieldButton);
});
expect(MOCK_DESTINATION_SELECT_ITEM_PROPS.remove).toHaveBeenCalledWith(id);

10
openmetadata-ui/src/main/resources/ui/src/components/Alerts/DestinationFormItem/DestinationSelectItem/DestinationSelectItem.tsx
View File

@ -24,13 +24,7 @@ import {
Typography,
} from 'antd';
import { isEmpty, isEqual, isUndefined, map, omitBy } from 'lodash';
import React, {
ReactElement,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
DESTINATION_DROPDOWN_TABS,
@ -116,7 +110,7 @@ function DestinationSelectItem({
[];
const handleTabChange = useCallback(
(key) => {
(key: string) => {
setActiveTab(key);
setDestinationOptions(getFilteredDestinationOptions(key, selectedSource));
},

16
openmetadata-ui/src/main/resources/ui/src/components/Alerts/DestinationFormItem/TeamAndUserSelectItem/TeamAndUserSelectItem.test.tsx
View File

@ -11,9 +11,7 @@
* limitations under the License.
*/
import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { act, fireEvent, render, screen } from '@testing-library/react';
import {
MOCK_PROPS,
TEST_SEARCHED_TEAM_OPTIONS,
@ -42,7 +40,7 @@ describe('TeamAndUserSelectItem Component', () => {
const triggerButton = screen.getByTestId('dropdown-trigger-button');
await act(async () => {
userEvent.click(triggerButton);
fireEvent.click(triggerButton);
jest.advanceTimersByTime(500);
});
@ -59,7 +57,7 @@ describe('TeamAndUserSelectItem Component', () => {
const triggerButton = screen.getByTestId('dropdown-trigger-button');
await act(async () => {
userEvent.click(triggerButton);
fireEvent.click(triggerButton);
jest.advanceTimersByTime(500);
});
@ -82,7 +80,7 @@ describe('TeamAndUserSelectItem Component', () => {
const triggerButton = screen.getByTestId('dropdown-trigger-button');
await act(async () => {
userEvent.click(triggerButton);
fireEvent.click(triggerButton);
jest.advanceTimersByTime(500);
});
@ -101,7 +99,7 @@ describe('TeamAndUserSelectItem Component', () => {
const searchInput = screen.getByTestId('search-input');
userEvent.type(searchInput, 'test');
fireEvent.change(searchInput, { target: { value: 'test' } });
await act(async () => {
jest.advanceTimersByTime(500);
@ -123,7 +121,7 @@ describe('TeamAndUserSelectItem Component', () => {
const triggerButton = screen.getByTestId('dropdown-trigger-button');
await act(async () => {
userEvent.click(triggerButton);
fireEvent.click(triggerButton);
jest.advanceTimersByTime(500);
});
@ -132,7 +130,7 @@ describe('TeamAndUserSelectItem Component', () => {
).toBeInTheDocument();
await act(async () => {
userEvent.click(document.body);
fireEvent.click(document.body);
});
expect(screen.queryByTestId('team-user-select-dropdown-0')).toBeNull();

Some files were not shown because too many files have changed in this diff Show More