Skip to content

Commit

Permalink
fix(ui): supported hierarchy in table tags for term and tags (open-me…
Browse files Browse the repository at this point in the history 
…tadata#12099)

* supported hierarachy in table tags for term and tags

* remove unwanted code

* fix cypress issue
  • Loading branch information
@Ashish8689
Ashish8689 authored Jun 23, 2023
1 parent d9d3f68 commit eeec58b
Show file tree
Hide file tree
Showing 39 changed files with 773 additions and 647 deletions.
32 changes: 4 additions & 28 deletions openmetadata-ui/src/main/resources/ui/cypress/common/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -623,7 +623,9 @@ export const addNewTagToEntity = (entityObj, term) => {
entityObj.entity
);
cy.wait(500);
cy.get('[data-testid="entity-tags"] [data-testid="add-tag"]')
cy.get(
'[data-testid="classification-tags-0"] [data-testid="entity-tags"] [data-testid="add-tag"]'
)
.eq(0)
.should('be.visible')
.scrollIntoView()
Expand All @@ -640,34 +642,8 @@ export const addNewTagToEntity = (entityObj, term) => {
.scrollIntoView()
.should('be.visible')
.click();
cy.get('[data-testid="tags-container"] [data-testid="entity-tags"]')
cy.get('[data-testid="classification-tags-0"] [data-testid="tags-container"]')
.scrollIntoView()
.should('be.visible')
.contains(term);

cy.get('[data-testid="classification-tags-0"] [data-testid="tag-container"]')
.scrollIntoView()
.contains('Add')
.should('be.visible')
.click();

cy.get('[data-testid="tag-selector"]')
.scrollIntoView()
.should('be.visible')
.type(term);
cy.wait(500);
cy.get('.ant-select-item-option-content')
.contains(term)
.should('be.visible')
.click();
// to close popup
cy.clickOutside();

cy.get('[data-testid="saveAssociatedTag"]')
.scrollIntoView()
.should('be.visible')
.click();
cy.get('[data-testid="classification-tags-0"] [data-testid="tag-container"]')
.contains(term)
.should('exist');
};
Expand Down
10 changes: 5 additions & 5 deletions openmetadata-ui/src/main/resources/ui/cypress/constants/tagsAddRemove.constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const TAGS_ADD_REMOVE_ENTITIES = [
entity: 'tables',
serviceName: 'sample_data',
fieldName: 'SKU',
tags: ['PersonalData.Personal', 'PII.Sensitive'],
tags: ['Personal', 'Sensitive'],
entityTags: 'Personal',
},
{
Expand All @@ -27,7 +27,7 @@ export const TAGS_ADD_REMOVE_ENTITIES = [
entity: 'topics',
serviceName: 'sample_kafka',
fieldName: 'AddressBook',
tags: ['PersonalData.Personal', 'PII.Sensitive'],
tags: ['Personal', 'Sensitive'],
entityTags: 'Personal',
},
{
Expand All @@ -37,7 +37,7 @@ export const TAGS_ADD_REMOVE_ENTITIES = [
insideEntity: 'charts',
serviceName: 'sample_superset',
fieldName: 'e3cfd274-44f8-4bf3-b75d-d40cf88869ba',
tags: ['PersonalData.Personal', 'PII.Sensitive'],
tags: ['Personal', 'Sensitive'],
entityTags: 'Personal',
},
{
Expand All @@ -46,7 +46,7 @@ export const TAGS_ADD_REMOVE_ENTITIES = [
entity: 'pipelines',
serviceName: 'sample_airflow',
fieldName: 'dim_address_task',
tags: ['PersonalData.Personal', 'PII.Sensitive'],
tags: ['Personal', 'Sensitive'],
entityTags: 'Personal',
},
{
Expand All @@ -55,7 +55,7 @@ export const TAGS_ADD_REMOVE_ENTITIES = [
entity: 'mlmodels',
serviceName: 'mlflow_svc',
fieldName: 'sales',
tags: ['PersonalData.Personal', 'PII.Sensitive'],
tags: ['Personal', 'Sensitive'],
entityTags: 'Personal',
},
];
27 changes: 12 additions & 15 deletions openmetadata-ui/src/main/resources/ui/cypress/e2e/Flow/TagsAddRemove.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,14 @@ import {
} from '../../common/common';
import { TAGS_ADD_REMOVE_ENTITIES } from '../../constants/tagsAddRemove.constants';

const addTags = (tag, parent) => {
const addTags = (tag) => {
cy.get('[data-testid="tag-selector"]')
.scrollIntoView()
.should('be.visible')
.click()
.type(tag);

if (parent) {
cy.get(`[title="${tag}"]`).should('be.visible').click();
} else {
cy.get('.ant-select-item-option-content')
.should('be.visible')
.click({ multiple: true });
}
cy.get(`[title="${tag}"]`).should('be.visible').click();
cy.get('[data-testid="tag-selector"] > .ant-select-selector').contains(tag);
};

Expand All @@ -40,18 +34,22 @@ const checkTags = (tag, checkForParentEntity) => {
cy.get(
'[data-testid="entity-right-panel"] [data-testid="tags-container"] [data-testid="entity-tags"] '
)

.scrollIntoView()
.should('be.visible')
.contains(tag);
} else {
cy.get(`[data-testid="tag-${tag}"]`).should('be.visible');
cy.get(
'[data-testid="classification-tags-0"] [data-testid="tags-container"] [data-testid="entity-tags"] '
)
.scrollIntoView()
.contains(tag);
}
};

const removeTags = (checkForParentEntity) => {
if (checkForParentEntity) {
cy.get('[data-testid="entity-right-panel"] [data-testid="edit-button"]')
cy.get(
'[data-testid="entity-right-panel"] [data-testid="tags-container"] [data-testid="edit-button"]'
)
.scrollIntoView()
.should('be.visible')
.click();
Expand Down Expand Up @@ -93,7 +91,7 @@ describe('Check if tags addition and removal flow working properly from tables',
.should('be.visible')
.click();

addTags(entityDetails.entityTags, true);
addTags(entityDetails.entityTags);

interceptURL('PATCH', `/api/v1/${entityDetails.entity}/*`, 'tagsChange');

Expand All @@ -113,9 +111,8 @@ describe('Check if tags addition and removal flow working properly from tables',
.click();
} else {
cy.get(
`.ant-table-tbody [data-testid="tag-container"] [data-testid="add-tag"]`
`.ant-table-tbody [data-testid="classification-tags-0"] [data-testid="tags-container"] [data-testid="entity-tags"]`
)
.eq(0)
.scrollIntoView()
.should('be.visible')
.click();
Expand Down
4 changes: 2 additions & 2 deletions openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Tags.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ describe('Tags page should work', () => {
});

it('Use newly created tag to any entity should work', () => {
const entity = SEARCH_ENTITY_TABLE.table_1;
const entity = SEARCH_ENTITY_TABLE.table_3;
addNewTagToEntity(entity, `${NEW_TAG.name}`);
});

Expand All @@ -251,7 +251,7 @@ describe('Tags page should work', () => {
);
interceptURL('PATCH', '/api/v1/databaseSchemas/*', 'addTags');

const entity = SEARCH_ENTITY_TABLE.table_2;
const entity = SEARCH_ENTITY_TABLE.table_3;
const tag = 'Sensitive';

visitEntityDetailsPage(entity.term, entity.serviceName, entity.entity);
Expand Down
18 changes: 13 additions & 5 deletions ...esources/ui/src/components/ContainerDetail/ContainerDataModel/ContainerDataModel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,14 @@ const props = {
onUpdate: jest.fn(),
};

jest.mock('../../../utils/TagsUtils', () => ({
getClassifications: jest.fn().mockReturnValue([]),
getTaglist: jest.fn().mockReturnValue([]),
jest.mock('utils/TagsUtils', () => ({
getAllTagsList: jest.fn(() => Promise.resolve([])),
getTagsHierarchy: jest.fn().mockReturnValue([]),
}));

jest.mock('utils/GlossaryUtils', () => ({
fetchGlossaryTerms: jest.fn().mockReturnValue([]),
getGlossaryTermlist: jest.fn().mockReturnValue([]),
getGlossaryTermsList: jest.fn(() => Promise.resolve([])),
getGlossaryTermHierarchy: jest.fn().mockReturnValue([]),
}));

jest.mock('utils/TableTags/TableTags.utils', () => ({
Expand Down Expand Up @@ -122,6 +122,14 @@ jest.mock('components/TableTags/TableTags.component', () =>
))
);

jest.mock('components/common/error-with-placeholder/ErrorPlaceHolder', () =>
jest
.fn()
.mockImplementation(() => (
<div data-testid="error-placeholder">ErrorPlaceHolder</div>
))
);

describe('ContainerDataModel', () => {
it('Should render the Container data model component', async () => {
render(<ContainerDataModel {...props} />);
Expand Down
61 changes: 28 additions & 33 deletions ...ain/resources/ui/src/components/ContainerDetail/ContainerDataModel/ContainerDataModel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlac
import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer';
import { ModalWithMarkdownEditor } from 'components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
import TableTags from 'components/TableTags/TableTags.component';
import {
GlossaryTermDetailsProps,
TagsDetailsProps,
} from 'components/Tag/TagsContainerV1/TagsContainerV1.interface';
import { Column, TagLabel } from 'generated/entity/data/container';
import { TagSource } from 'generated/type/tagLabel';
import { cloneDeep, isEmpty, isUndefined, map, toLower } from 'lodash';
Expand All @@ -28,10 +32,12 @@ import {
updateContainerColumnTags,
} from 'utils/ContainerDetailUtils';
import { getEntityName } from 'utils/EntityUtils';
import { fetchGlossaryTerms, getGlossaryTermlist } from 'utils/GlossaryUtils';
import { getFilterTags } from 'utils/TableTags/TableTags.utils';
import {
getGlossaryTermHierarchy,
getGlossaryTermsList,
} from 'utils/GlossaryUtils';
import { getTableExpandableConfig } from 'utils/TableUtils';
import { getClassifications, getTaglist } from 'utils/TagsUtils';
import { getAllTagsList, getTagsHierarchy } from 'utils/TagsUtils';
import {
CellRendered,
ContainerDataModelProps,
Expand All @@ -52,18 +58,18 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
const [isTagLoading, setIsTagLoading] = useState<boolean>(false);
const [isGlossaryLoading, setIsGlossaryLoading] = useState<boolean>(false);
const [tagFetchFailed, setTagFetchFailed] = useState<boolean>(false);
const [glossaryTags, setGlossaryTags] = useState<TagOption[]>([]);
const [classificationTags, setClassificationTags] = useState<TagOption[]>([]);
const [glossaryTags, setGlossaryTags] = useState<GlossaryTermDetailsProps[]>(
[]
);
const [classificationTags, setClassificationTags] = useState<
TagsDetailsProps[]
>([]);

const fetchGlossaryTags = async () => {
setIsGlossaryLoading(true);
try {
const res = await fetchGlossaryTerms();

const glossaryTerms: TagOption[] = getGlossaryTermlist(res).map(
(tag) => ({ fqn: tag, source: TagSource.Glossary })
);
setGlossaryTags(glossaryTerms);
const glossaryTermList = await getGlossaryTermsList();
setGlossaryTags(glossaryTermList);
} catch {
setTagFetchFailed(true);
} finally {
Expand All @@ -74,15 +80,8 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
const fetchClassificationTags = async () => {
setIsTagLoading(true);
try {
const res = await getClassifications();
const tagList = await getTaglist(res.data);

const classificationTag: TagOption[] = map(tagList, (tag) => ({
fqn: tag,
source: TagSource.Classification,
}));

setClassificationTags(classificationTag);
const tags = await getAllTagsList();
setClassificationTags(tags);
} catch {
setTagFetchFailed(true);
} finally {
Expand All @@ -91,15 +90,11 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
};

const handleFieldTagsChange = useCallback(
async (
selectedTags: EntityTags[],
editColumnTag: Column,
otherTags: TagLabel[]
) => {
const newSelectedTags: TagOption[] = map(
[...selectedTags, ...otherTags],
(tag) => ({ fqn: tag.tagFQN, source: tag.source })
);
async (selectedTags: EntityTags[], editColumnTag: Column) => {
const newSelectedTags: TagOption[] = map(selectedTags, (tag) => ({
fqn: tag.tagFQN,
source: tag.source,
}));

if (newSelectedTags && editColumnTag) {
const containerDataModel = cloneDeep(dataModel);
Expand Down Expand Up @@ -233,8 +228,8 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
isTagLoading={isTagLoading}
record={record}
tagFetchFailed={tagFetchFailed}
tagList={classificationTags}
tags={getFilterTags(tags)}
tagList={getTagsHierarchy(classificationTags)}
tags={tags}
type={TagSource.Classification}
/>
),
Expand All @@ -256,8 +251,8 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
isTagLoading={isGlossaryLoading}
record={record}
tagFetchFailed={tagFetchFailed}
tagList={glossaryTags}
tags={getFilterTags(tags)}
tagList={getGlossaryTermHierarchy(glossaryTags)}
tags={tags}
type={TagSource.Glossary}
/>
),
Expand Down
Loading

0 comments on commit eeec58b

Please sign in to comment.