From b4c50e02012ac024259024f0ab7000f0ffa7e5ba Mon Sep 17 00:00:00 2001 From: Karan Hotchandani <33024356+karanh37@users.noreply.github.com> Date: Mon, 7 Apr 2025 23:26:19 +0530 Subject: [PATCH] UI design feedbacks (#20671) * fix glossary feedbacks * fixed locales * fix styles * add tests --- .../ui/playwright/e2e/Pages/Glossary.spec.ts | 67 +++++++++++++++++++ .../resources/ui/playwright/utils/glossary.ts | 24 ++++++- .../main/resources/ui/src/assets/svg/bank.svg | 14 ++-- .../ui/src/assets/svg/classification.svg | 4 +- .../resources/ui/src/assets/svg/explore.svg | 20 +++--- .../resources/ui/src/assets/svg/glossary.svg | 10 +-- .../resources/ui/src/assets/svg/ic-alert.svg | 25 +++---- .../ui/src/assets/svg/ic-data-contract.svg | 15 +++-- .../resources/ui/src/assets/svg/ic-domain.svg | 8 +-- .../resources/ui/src/assets/svg/ic-home.svg | 4 +- .../ui/src/assets/svg/ic-incident-manager.svg | 8 ++- .../ui/src/assets/svg/ic-observability.svg | 20 +++--- .../ui/src/assets/svg/ic-platform-lineage.svg | 16 ++--- .../ui/src/assets/svg/ic-settings-v1.svg | 6 +- .../ui/src/assets/svg/lamp-charge.svg | 22 +++--- .../resources/ui/src/assets/svg/logout.svg | 8 +-- .../resources/ui/src/assets/svg/metric.svg | 16 ++--- .../GlossaryTermTab.component.tsx | 49 ++++++++++++-- .../GlossaryTermsV1.component.tsx | 2 +- .../src/components/Glossary/glossaryV1.less | 14 ++++ .../ChangeParentHierarchy.component.tsx | 4 ++ .../MyData/LeftSidebar/left-sidebar.less | 23 ++----- .../ui/src/components/NavBar/NavBar.tsx | 8 +-- .../ui/src/components/NavBar/nav-bar.less | 17 +---- .../StatusBadge/StatusBadge.component.tsx | 10 ++- .../StatusBadge/StatusBadge.interface.ts | 1 + .../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/gl-es.json | 2 + .../ui/src/locale/languages/he-he.json | 2 + .../ui/src/locale/languages/ja-jp.json | 2 + .../ui/src/locale/languages/ko-kr.json | 2 + .../ui/src/locale/languages/mr-in.json | 2 + .../ui/src/locale/languages/nl-nl.json | 2 + .../ui/src/locale/languages/pr-pr.json | 2 + .../ui/src/locale/languages/pt-br.json | 2 + .../ui/src/locale/languages/pt-pt.json | 2 + .../ui/src/locale/languages/ru-ru.json | 2 + .../ui/src/locale/languages/th-th.json | 2 + .../ui/src/locale/languages/zh-cn.json | 2 + .../GlossaryPage/GlossaryPage.component.tsx | 3 +- .../ui/src/styles/components/glossary.less | 14 ++++ 44 files changed, 319 insertions(+), 145 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts index 253e850f577..cb9e65a468f 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts @@ -63,6 +63,7 @@ import { selectActiveGlossaryTerm, selectColumns, toggleBulkActionColumnsSelection, + updateGlossaryReviewer, updateGlossaryTermDataFromTree, updateGlossaryTermOwners, updateGlossaryTermReviewers, @@ -842,6 +843,72 @@ test.describe('Glossary tests', () => { } }); + test('Drag and Drop Glossary Term Approved Terms having reviewer', async ({ + browser, + }) => { + const { page, afterAction, apiContext } = await performAdminLogin(browser); + const glossary1 = new Glossary(); + const glossaryTerm1 = new GlossaryTerm(glossary1); + const glossaryTerm2 = new GlossaryTerm(glossary1); + const user1 = new UserClass(); + glossary1.data.terms = [glossaryTerm1, glossaryTerm2]; + + try { + await user1.create(apiContext); + await glossary1.create(apiContext); + await glossaryTerm1.create(apiContext); + await glossaryTerm2.create(apiContext); + await sidebarClick(page, SidebarItem.GLOSSARY); + await selectActiveGlossary(page, glossary1.data.displayName); + + await test.step('Update Glossary Term Reviewer', async () => { + await updateGlossaryReviewer(page, [ + `${user1.data.firstName}${user1.data.lastName}`, + ]); + }); + + await test.step('Drag and Drop Glossary Term', async () => { + await dragAndDropTerm( + page, + glossaryTerm1.data.displayName, + glossaryTerm2.data.displayName + ); + + await confirmationDragAndDropGlossary( + page, + glossaryTerm1.data.name, + glossaryTerm2.data.name, + false, + true + ); + + await expect( + page.getByRole('cell', { + name: glossaryTerm1.responseData.displayName, + }) + ).not.toBeVisible(); + + const termRes = page.waitForResponse('/api/v1/glossaryTerms?*'); + + // verify the term is moved under the parent term + await page.getByTestId('expand-collapse-all-button').click(); + await termRes; + + await expect( + page.getByRole('cell', { + name: glossaryTerm1.responseData.displayName, + }) + ).toBeVisible(); + }); + } finally { + await user1.delete(apiContext); + await glossaryTerm1.delete(apiContext); + await glossaryTerm2.delete(apiContext); + await glossary1.delete(apiContext); + await afterAction(); + } + }); + test('Change glossary term hierarchy using menu options', async ({ browser, }) => { diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts index 56d19a685cf..8d313bcb9ab 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts @@ -772,7 +772,8 @@ export const confirmationDragAndDropGlossary = async ( page: Page, dragElement: string, dropElement: string, - isHeader = false + isHeader = false, + tickCheckbox = false ) => { await expect( page.locator('[data-testid="confirmation-modal"] .ant-modal-body') @@ -784,10 +785,14 @@ export const confirmationDragAndDropGlossary = async ( }` ); + if (tickCheckbox) { + await page.getByTestId('confirm-status-checkbox').click(); + } + const patchGlossaryTermResponse = page.waitForResponse( '/api/v1/glossaryTerms/*' ); - await page.getByRole('button', { name: 'Confirm' }).click(); + await page.getByRole('button', { name: 'Move' }).click(); await patchGlossaryTermResponse; }; @@ -1413,6 +1418,21 @@ export const updateGlossaryTermOwners = async ( await glossaryTermResponse; }; +export const updateGlossaryReviewer = async ( + page: Page, + reviewers: string[] +) => { + await addMultiOwner({ + page, + ownerNames: reviewers, + activatorBtnDataTestId: 'Add', + resultTestId: 'glossary-reviewer', + endpoint: EntityTypeEndpoint.Glossary, + isSelectableInsideForm: true, + type: 'Users', + }); +}; + export const updateGlossaryTermReviewers = async ( page: Page, term: GlossaryTermData, diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/bank.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/bank.svg index 46cb868777a..d94d6229798 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/bank.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/bank.svg @@ -1,8 +1,8 @@ - - - - - - - + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/classification.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/classification.svg index 39090de9598..8ab6f0a31b7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/classification.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/classification.svg @@ -1,5 +1,5 @@ - - + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/explore.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/explore.svg index 81f24b5636a..6cbd08fe7e3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/explore.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/explore.svg @@ -1,12 +1,12 @@ - - - - - + + + + + - - - - - + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/glossary.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/glossary.svg index 9fe7dd53365..390653cfc0b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/glossary.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/glossary.svg @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-alert.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-alert.svg index c0942735edc..a409e856a4a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-alert.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-alert.svg @@ -1,17 +1,12 @@ - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-data-contract.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-data-contract.svg index 294d2b3bb5a..37c3ccc014e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-data-contract.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-data-contract.svg @@ -1,9 +1,10 @@ - - - - - - - + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-domain.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-domain.svg index 73d89ceb1dc..9edc5d82935 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-domain.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-domain.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-home.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-home.svg index f145fbf1780..003c9176219 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-home.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-home.svg @@ -1,4 +1,4 @@ - - + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-incident-manager.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-incident-manager.svg index 0bef6f3c3d9..a7077d5e53f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-incident-manager.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-incident-manager.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-observability.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-observability.svg index e5fbb6e2ee8..fe24f28295d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-observability.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-observability.svg @@ -1,15 +1,15 @@ - - - - - - - - + + + + + + + + - - + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-platform-lineage.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-platform-lineage.svg index 7536ae08d20..f14dc0a950d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-platform-lineage.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-platform-lineage.svg @@ -1,9 +1,9 @@ - - - - - - - - + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-v1.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-v1.svg index 0f33c588cd3..276ad76aabd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-v1.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-v1.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/lamp-charge.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/lamp-charge.svg index b1aedd480ae..f800c30752d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/lamp-charge.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/lamp-charge.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - + + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/logout.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/logout.svg index 728a2a1bf1f..acf9d7fe33d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/logout.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/logout.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/metric.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/metric.svg index b260775a811..383dfa5f36d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/metric.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/metric.svg @@ -1,10 +1,10 @@ - - - - - - - - + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx index 5f558e65ed6..cb8d453dad6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { DownOutlined } from '@ant-design/icons'; +import { DownOutlined, WarningOutlined } from '@ant-design/icons'; import Icon from '@ant-design/icons/lib/components/Icon'; import { Button, @@ -157,6 +157,7 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => { const [selectedStatus, setSelectedStatus] = useState([ ...statusDropdownSelection, ]); + const [confirmCheckboxChecked, setConfirmCheckboxChecked] = useState(false); const fetchAllTerms = async () => { setIsTableLoading(true); @@ -810,8 +811,13 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => { const onDragConfirmationModalClose = useCallback(() => { setIsModalOpen(false); setIsTableHovered(false); + setConfirmCheckboxChecked(false); }, []); + const hasReviewers = useMemo(() => { + return !isEmpty(activeGlossary.reviewers); + }, [movedGlossaryTerm, activeGlossary]); + useEffect(() => { if (!tableContainerRef.current) { return; @@ -883,11 +889,17 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => { confirmLoading={isTableLoading} data-testid="confirmation-modal" maskClosable={false} - okText={t('label.confirm')} + okButtonProps={{ disabled: hasReviewers && !confirmCheckboxChecked }} + okText={t('label.move')} open={isModalOpen} - title={t('label.move-the-entity', { - entity: t('label.glossary-term'), - })} + title={ + <> + + {t('label.move-the-entity', { + entity: t('label.glossary-term'), + })} + + } onCancel={onDragConfirmationModalClose} onOk={handleChangeGlossaryTerm}> { : t('label.term-lowercase'), }} /> + {hasReviewers && ( +
+ setConfirmCheckboxChecked(e.target.checked)}> + + } + values={{ + from: movedGlossaryTerm?.from.name, + }} + /> + + + + + +
+ )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/GlossaryTermsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/GlossaryTermsV1.component.tsx index 6a8c1f87660..268907875e7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/GlossaryTermsV1.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/GlossaryTermsV1.component.tsx @@ -367,7 +367,7 @@ const GlossaryTermsV1 = ({ type={EntityType.GLOSSARY_TERM} onUpdate={onTermUpdate}> - +