From e66aa5363b6d80f93e022fbc50a39c6cb1c8236f Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Mon, 15 Jul 2024 15:37:41 +0530 Subject: [PATCH] #16343: activity feed ui improvements (#16474) * activity feed ui improvements * fix mysql icon not showing in feed card * fix comments not showing in right panel card * remove unused code and added utils test * supported playwright test for feed replies * changes as per comments --- .../e2e/Features/ActivityFeed.spec.ts | 57 ++++++++++++++++++- .../resources/ui/playwright/utils/common.ts | 13 +++++ .../DescriptionFeed/DescriptionFeed.tsx | 10 +--- .../ActivityFeedPanel/FeedPanelHeader.tsx | 6 +- .../ActivityFeedProvider.tsx | 10 ---- .../components/Tag/TagsViewer/TagsViewer.tsx | 36 ++++++------ .../ui/src/locale/languages/de-de.json | 2 +- .../ui/src/locale/languages/en-us.json | 2 +- .../ui/src/locale/languages/es-es.json | 2 +- .../ui/src/locale/languages/fr-fr.json | 2 +- .../ui/src/locale/languages/he-he.json | 2 +- .../ui/src/locale/languages/ja-jp.json | 2 +- .../ui/src/locale/languages/nl-nl.json | 2 +- .../ui/src/locale/languages/pt-br.json | 2 +- .../ui/src/locale/languages/ru-ru.json | 2 +- .../ui/src/locale/languages/zh-cn.json | 2 +- .../resources/ui/src/utils/FeedUtils.test.tsx | 25 ++++++++ .../main/resources/ui/src/utils/FeedUtils.tsx | 14 +++-- .../resources/ui/src/utils/TableUtils.tsx | 9 ++- 19 files changed, 144 insertions(+), 56 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts index 5d21f324b98..44f4805a3ce 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts @@ -17,6 +17,7 @@ import { createNewPage, redirectToHomePage, toastNotification, + visitUserProfilePage, } from '../../utils/common'; import { clickOnLogo } from '../../utils/sidebar'; import { @@ -43,7 +44,6 @@ test.describe('Activity feed', () => { test.beforeEach('Visit on landing page', async ({ page }) => { await redirectToHomePage(page); - await entity.visitEntityPage(page); }); test.afterAll('Cleanup', async ({ browser }) => { @@ -59,6 +59,7 @@ test.describe('Activity feed', () => { term: entity.entity.name, assignee: `${user.data.firstName}.${user.data.lastName}`, }; + await entity.visitEntityPage(page); await page.getByTestId('request-description').click(); @@ -126,4 +127,58 @@ test.describe('Activity feed', () => { expect(closedTask).toContain('2 Closed'); }); + + test('User should be able to reply on feeds in ActivityFeed', async ({ + page, + }) => { + await visitUserProfilePage(page); + + const secondFeedConversation = page + .locator('#center-container [data-testid="message-container"]') + .nth(1); + + await secondFeedConversation.locator('.feed-card-v2-sidebar').click(); + + await page.waitForSelector('#feed-panel', { + state: 'visible', + }); + + // Compare the text of the second feed in the center container with the right panel feed + const secondFeedText = await secondFeedConversation + .locator('[data-testid="headerText"]') + .innerText(); + + const rightPanelFeedText = await page + .locator( + '.right-container [data-testid="message-container"] [data-testid="headerText"]' + ) + .innerText(); + + expect(secondFeedText).toBe(rightPanelFeedText); + + for (let i = 1; i <= 3; i++) { + await page.fill( + '[data-testid="editor-wrapper"] .ql-editor', + `Reply message ${i}` + ); + const sendReply = page.waitForResponse('/api/v1/feed/*/posts'); + await page.getByTestId('send-button').click(); + await sendReply; + } + + // Compare after adding some feeds in the right panel + const rightPanelFeedTextCurrent = await page + .locator( + '.right-container [data-testid="message-container"] [data-testid="headerText"]' + ) + .innerText(); + + expect(secondFeedText).toBe(rightPanelFeedTextCurrent); + + for (let i = 1; i <= 3; i++) { + await expect( + page.locator('.right-container [data-testid="feed-replies"]') + ).toContainText(`Reply message ${i}`); + } + }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts index 93ff6c97ed7..3e1aaa8f0a3 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts @@ -147,3 +147,16 @@ export const clickOutside = async (page: Page) => { }); // with this action left menu bar is getting opened await page.mouse.move(1280, 0); // moving out side left menu bar to avoid random failure due to left menu bar }; + +export const visitUserProfilePage = async (page: Page) => { + await page.getByTestId('dropdown-profile').click(); + await page.waitForSelector('.profile-dropdown', { + state: 'visible', + }); + const userResponse = page.waitForResponse( + '/api/v1/users/name/*?fields=*&include=all' + ); + await page.getByTestId('user-name').click({ force: true }); + await userResponse; + await clickOutside(page); +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/DescriptionFeed/DescriptionFeed.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/DescriptionFeed/DescriptionFeed.tsx index 52f62ea68e4..12c9dbd5061 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/DescriptionFeed/DescriptionFeed.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/DescriptionFeed/DescriptionFeed.tsx @@ -14,7 +14,6 @@ import { Col, Row } from 'antd'; import React, { useMemo } from 'react'; import { EntityField } from '../../../../../constants/Feeds.constants'; -import { getTextDiff } from '../../../../../utils/EntityVersionUtils'; import { getFeedChangeFieldLabel, getFieldOperationIcon, @@ -25,13 +24,10 @@ import { DescriptionFeedProps } from './DescriptionFeed.interface'; function DescriptionFeed({ feed }: Readonly) { const { message, fieldOperation } = useMemo(() => { - const diffText = getTextDiff( - feed.feedInfo?.entitySpecificInfo?.previousDescription ?? '', - feed.feedInfo?.entitySpecificInfo?.newDescription ?? '' - ); - return { - message: diffText, + message: (feed.feedInfo?.entitySpecificInfo?.diffMessage ?? '').split( + ':' + )[1], fieldOperation: feed.fieldOperation, fieldChanged: getFeedChangeFieldLabel( feed.feedInfo?.fieldName as EntityField diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx index 945dc0fa835..0997848caf7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx @@ -44,7 +44,11 @@ const FeedPanelHeader: FC = ({ const entityField = getEntityField(entityLink); return ( -
+

{noun ? noun : getFeedPanelHeaderText(threadType)}{' '} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider.tsx index 4a10fb52540..2c678a3ff38 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider.tsx @@ -218,16 +218,6 @@ const ActivityFeedProvider = ({ children, user }: Props) => { try { const res = await postFeedById(id, data); - const { id: responseId, posts } = res; - setEntityThread((pre) => { - return pre.map((thread) => { - if (thread.id === responseId) { - return { ...res, posts: posts?.slice(-3) }; - } else { - return thread; - } - }); - }); setActiveThread(res); } catch (error) { showErrorToast( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx index e6319f0023b..621d293b42a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx @@ -69,12 +69,13 @@ const TagsViewer: FunctionComponent = ({ const readMoreRenderElement = useMemo( () => (

- {isOpen && - sortedTagsBySource.slice(sizeCap).map((tag) => ( -

- {getTagsElement(tag)} -

- ))} + {isOpen && ( +
+ {sortedTagsBySource + .slice(sizeCap) + .map((tag) => getTagsElement(tag))} +
+ )} {hasMoreElement && (