yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-18 22:28:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui/glossary): Keep the same tab selected when browsing Glossary (#9469)

Browse Source
This commit is contained in:
Sumit Patil 2023-12-21 13:24:33 +05:30 committed by GitHub
parent bf813d1d24
commit 50be329492
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx
View File

@ -180,6 +180,7 @@ function EntityDropdown(props: Props) {
)}
{menuItems.has(EntityMenuItems.ADD_TERM) && (
<StyledMenuItem
data-testid="entity-menu-add-term-button"
key="2"
disabled={!canCreateGlossaryEntity}
onClick={() => setIsCreateTermModalVisible(true)}

1
datahub-web-react/src/app/entity/shared/containers/profile/header/EntityTabs.tsx
View File

@ -39,6 +39,7 @@ export const EntityTabs = <T,>({ tabs, selectedTab }: Props) => {
return (
<UnborderedTabs
data-testid="entity-tab-headers-test-id"
animated={false}
activeKey={selectedTab?.name || ''}
size="large"

16
datahub-web-react/src/app/entity/shared/containers/profile/utils.ts
View File

@ -134,6 +134,22 @@ export function useIsOnTab(tabName: string): boolean {
return false;
}
export function useGlossaryActiveTabPath(): string {
const { pathname, search } = useLocation();
const trimmedPathName = pathname.endsWith('/') ? pathname.slice(0, pathname.length - 1) : pathname;
// Match against the regex
const match = trimmedPathName.match(ENTITY_TAB_NAME_REGEX_PATTERN);
if (match && match[1]) {
const selectedTabPath = match[1] + (search || ''); // Include all query parameters
return selectedTabPath;
}
// No match found!
return "";
}
export function formatDateString(time: number) {
const date = new Date(time);
return date.toLocaleDateString('en-US');

2
datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx
View File

@ -166,7 +166,7 @@ function NodeItem(props: Props) {
))}
{!hideTerms &&
(childTerms as GlossaryTerm[]).map((child) => (
<TermItem term={child} isSelecting={isSelecting} selectTerm={selectTerm} />
<TermItem term={child} isSelecting={isSelecting} selectTerm={selectTerm} includeActiveTabPath />
))}
</ChildrenWrapper>
)}

9
datahub-web-react/src/app/glossary/GlossaryBrowser/TermItem.tsx
View File

@ -5,6 +5,7 @@ import { useEntityRegistry } from '../../useEntityRegistry';
import { ANTD_GRAY } from '../../entity/shared/constants';
import { ChildGlossaryTermFragment } from '../../../graphql/glossaryNode.generated';
import { useGlossaryEntityData } from '../../entity/shared/GlossaryEntityContext';
import { useGlossaryActiveTabPath } from '../../entity/shared/containers/profile/utils';
const TermWrapper = styled.div`
font-weight: normal;
@ -47,13 +48,15 @@ interface Props {
term: ChildGlossaryTermFragment;
isSelecting?: boolean;
selectTerm?: (urn: string, displayName: string) => void;
includeActiveTabPath?: boolean;
}
function TermItem(props: Props) {
const { term, isSelecting, selectTerm } = props;
const { term, isSelecting, selectTerm, includeActiveTabPath } = props;
const { entityData } = useGlossaryEntityData();
const entityRegistry = useEntityRegistry();
const activeTabPath = useGlossaryActiveTabPath();
function handleSelectTerm() {
if (selectTerm) {
@ -68,7 +71,9 @@ function TermItem(props: Props) {
<TermWrapper>
{!isSelecting && (
<TermLink
to={`${entityRegistry.getEntityUrl(term.type, term.urn)}`}
to={`${entityRegistry.getEntityUrl(term.type, term.urn)}${
includeActiveTabPath ? `/${activeTabPath}` : ''
}`}
isSelected={entityData?.urn === term.urn}
>
{entityRegistry.getDisplayName(term.type, isOnEntityPage ? entityData : term)}

38
smoke-test/tests/cypress/cypress/e2e/glossary/glossary_navigation.js
View File

@ -1,4 +1,5 @@
const glossaryTerm = "CypressGlosssaryNavigationTerm";
const glossarySecondTerm = "CypressGlossarySecondTerm";
const glossaryTermGroup = "CypressGlosssaryNavigationGroup";
const glossaryParentGroup = "CypressNode";
@ -30,6 +31,39 @@ describe("glossary sidebar navigation test", () => {
cy.get('[data-testid="glossary-browser-sidebar"]').contains(glossaryTermGroup).click().wait(3000);
cy.get('*[class^="GlossaryEntitiesList"]').contains(glossaryTerm).should("be.visible");
// Create another term and move it to the same term group
cy.clickOptionWithText(glossaryTermGroup);
cy.openThreeDotDropdown();
cy.clickOptionWithTestId("entity-menu-add-term-button");
// Wait for the create term modal to be visible
cy.waitTextVisible("Create Glossary Term");
cy.enterTextInTestId("create-glossary-entity-modal-name", glossarySecondTerm);
cy.clickOptionWithTestId("glossary-entity-modal-create-button");
// Wait for the new term to be visible in the sidebar
cy.clickOptionWithText(glossarySecondTerm).wait(3000);
// Move the term to the created term group
cy.openThreeDotDropdown();
cy.clickOptionWithTestId("entity-menu-move-button");
cy.get('[data-testid="move-glossary-entity-modal"]').contains(glossaryTermGroup).click({ force: true });
cy.get('[data-testid="move-glossary-entity-modal"]').contains(glossaryTermGroup).should("be.visible");
cy.clickOptionWithTestId("glossary-entity-modal-move-button");
cy.waitTextVisible("Moved Glossary Term!");
// Ensure the new term is under the parent term group in the navigation sidebar
cy.get('[data-testid="glossary-browser-sidebar"]').contains(glossaryTermGroup).click();
cy.get('*[class^="GlossaryEntitiesList"]').contains(glossarySecondTerm).should("be.visible");
// Switch between terms and ensure the "Properties" tab is active
cy.clickOptionWithText(glossaryTerm);
cy.get('[data-testid="entity-tab-headers-test-id"]').contains("Properties").click({ force: true });
cy.get('[data-node-key="Properties"]').contains("Properties").should("have.attr", "aria-selected", "true");
cy.clickOptionWithText(glossarySecondTerm);
cy.get('[data-node-key="Properties"]').contains("Properties").should("have.attr", "aria-selected", "true");
// Move a term group from the root level to be under a parent term group
cy.goToGlossaryList();
cy.clickOptionWithText(glossaryTermGroup);
@ -52,6 +86,10 @@ describe("glossary sidebar navigation test", () => {
cy.clickOptionWithText(glossaryTerm).wait(3000);
cy.deleteFromDropdown();
cy.waitTextVisible("Deleted Glossary Term!");
cy.clickOptionWithText(glossaryTermGroup);
cy.clickOptionWithText(glossarySecondTerm).wait(3000);
cy.deleteFromDropdown();
cy.waitTextVisible("Deleted Glossary Term!");
cy.clickOptionWithText(glossaryParentGroup);
cy.clickOptionWithText(glossaryTermGroup).wait(3000);
cy.deleteFromDropdown();