supported pagination and search in tags and term select for both tabl…

…e and entity level
open-metadata · Jun 26, 2023 · 9354569 · 9354569
1 parent b44d4f1
commit 9354569
Show file tree

Hide file tree

Showing 28 changed files with 923 additions and 593 deletions.
diff --git a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
@@ -617,34 +617,35 @@ export const visitEntityDetailsPage = (
 
 // add new tag to entity and its table
 export const addNewTagToEntity = (entityObj, term) => {
+  const { name, fqn } = term;
   visitEntityDetailsPage(
     entityObj.term,
     entityObj.serviceName,
     entityObj.entity
   );
   cy.wait(500);
   cy.get(
-    '[data-testid="classification-tags-0"] [data-testid="entity-tags"] [data-testid="add-tag"]'
+    '[data-testid="Classification-tags-0"] [data-testid="entity-tags"] [data-testid="add-tag"]'
   )
     .eq(0)
     .should('be.visible')
     .scrollIntoView()
     .click();
 
-  cy.get('[data-testid="tag-selector"] input').should('be.visible').type(term);
+  cy.get('[data-testid="tag-selector"] input').should('be.visible').type(name);
 
-  cy.get(`[title="${term}"]`).should('be.visible').click();
+  cy.get(`[data-testid="tag-${fqn}"]`).should('be.visible').click();
   // to close popup
   cy.clickOutside();
 
-  cy.get('[data-testid="tag-selector"] > .ant-select-selector').contains(term);
+  cy.get('[data-testid="tag-selector"] > .ant-select-selector').contains(name);
   cy.get('[data-testid="saveAssociatedTag"]')
     .scrollIntoView()
     .should('be.visible')
     .click();
-  cy.get('[data-testid="classification-tags-0"] [data-testid="tags-container"]')
+  cy.get('[data-testid="Classification-tags-0"] [data-testid="tags-container"]')
     .scrollIntoView()
-    .contains(term)
+    .contains(name)
     .should('exist');
 };
 

diff --git a/openmetadata-ui/src/main/resources/ui/cypress/constants/constants.js b/openmetadata-ui/src/main/resources/ui/cypress/constants/constants.js
@@ -226,6 +226,7 @@ export const NEW_TAG = {
   name: 'CypressTag',
   displayName: 'CypressTag',
   renamedName: 'CypressTag-1',
+  fqn: `${NEW_CLASSIFICATION.name}.CypressTag`,
   description: 'This is the CypressTag',
 };
 

diff --git a/openmetadata-ui/src/main/resources/ui/cypress/constants/tagsAddRemove.constants.js b/openmetadata-ui/src/main/resources/ui/cypress/constants/tagsAddRemove.constants.js
@@ -18,17 +18,15 @@ export const TAGS_ADD_REMOVE_ENTITIES = [
     entity: 'tables',
     serviceName: 'sample_data',
     fieldName: 'SKU',
-    tags: ['Personal', 'Sensitive'],
-    entityTags: 'Personal',
+    tags: ['PersonalData.Personal', 'PII.Sensitive'],
   },
   {
     term: 'address_book',
     displayName: 'address_book',
     entity: 'topics',
     serviceName: 'sample_kafka',
     fieldName: 'AddressBook',
-    tags: ['Personal', 'Sensitive'],
-    entityTags: 'Personal',
+    tags: ['PersonalData.Personal', 'PII.Sensitive'],
   },
   {
     term: 'deck.gl Demo',
@@ -37,25 +35,22 @@ export const TAGS_ADD_REMOVE_ENTITIES = [
     insideEntity: 'charts',
     serviceName: 'sample_superset',
     fieldName: 'e3cfd274-44f8-4bf3-b75d-d40cf88869ba',
-    tags: ['Personal', 'Sensitive'],
-    entityTags: 'Personal',
+    tags: ['PersonalData.Personal', 'PII.Sensitive'],
   },
   {
     term: 'dim_address_etl',
     displayName: 'dim_address etl',
     entity: 'pipelines',
     serviceName: 'sample_airflow',
     fieldName: 'dim_address_task',
-    tags: ['Personal', 'Sensitive'],
-    entityTags: 'Personal',
+    tags: ['PersonalData.Personal', 'PII.Sensitive'],
   },
   {
     term: 'eta_predictions',
     displayName: 'ETA Predictions',
     entity: 'mlmodels',
     serviceName: 'mlflow_svc',
     fieldName: 'sales',
-    tags: ['Personal', 'Sensitive'],
-    entityTags: 'Personal',
+    tags: ['PersonalData.Personal', 'PII.Sensitive'],
   },
 ];
diff --git a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Flow/TagsAddRemove.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Flow/TagsAddRemove.spec.js
@@ -23,9 +23,9 @@ const addTags = (tag) => {
     .scrollIntoView()
     .should('be.visible')
     .click()
-    .type(tag);
+    .type(tag.split('.')[1]);
 
-  cy.get(`[title="${tag}"]`).should('be.visible').click();
+  cy.get(`[data-testid='tag-${tag}']`).should('be.visible').click();
   cy.get('[data-testid="tag-selector"] > .ant-select-selector').contains(tag);
 };
 
@@ -38,7 +38,7 @@ const checkTags = (tag, checkForParentEntity) => {
       .contains(tag);
   } else {
     cy.get(
-      '[data-testid="classification-tags-0"]  [data-testid="tags-container"] [data-testid="entity-tags"] '
+      '[data-testid="Classification-tags-0"]  [data-testid="tags-container"] [data-testid="entity-tags"] '
     )
       .scrollIntoView()
       .contains(tag);
@@ -58,7 +58,7 @@ const removeTags = (checkForParentEntity) => {
 
     cy.get('[data-testid="saveAssociatedTag"]').should('be.visible').click();
   } else {
-    cy.get('[data-testid="classification-tags-0"] [data-testid="edit-button"]')
+    cy.get('[data-testid="Classification-tags-0"] [data-testid="edit-button"]')
       .scrollIntoView()
       .trigger('mouseover')
       .click();
@@ -91,7 +91,7 @@ describe('Check if tags addition and removal flow working properly from tables',
         .should('be.visible')
         .click();
 
-      addTags(entityDetails.entityTags);
+      addTags(entityDetails.tags[0]);
 
       interceptURL('PATCH', `/api/v1/${entityDetails.entity}/*`, 'tagsChange');
 
@@ -105,13 +105,13 @@ describe('Check if tags addition and removal flow working properly from tables',
 
       if (entityDetails.entity === 'mlmodels') {
         cy.get(
-          `[data-testid="feature-card-${entityDetails.fieldName}"] [data-testid="classification-tags-0"] [data-testid="add-tag"]`
+          `[data-testid="feature-card-${entityDetails.fieldName}"] [data-testid="Classification-tags-0"] [data-testid="add-tag"]`
         )
           .should('be.visible')
           .click();
       } else {
         cy.get(
-          `.ant-table-tbody [data-testid="classification-tags-0"] [data-testid="tags-container"] [data-testid="entity-tags"]`
+          `.ant-table-tbody [data-testid="Classification-tags-0"] [data-testid="tags-container"] [data-testid="entity-tags"]`
         )
           .scrollIntoView()
           .should('be.visible')

diff --git a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Tags.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Tags.spec.js
@@ -234,7 +234,7 @@ describe('Tags page should work', () => {
 
   it('Use newly created tag to any entity should work', () => {
     const entity = SEARCH_ENTITY_TABLE.table_3;
-    addNewTagToEntity(entity, `${NEW_TAG.name}`);
+    addNewTagToEntity(entity, NEW_TAG);
   });
 
   it('Add tag at DatabaseSchema level should work', () => {

diff --git a/...ain/resources/ui/src/components/ContainerDetail/ContainerDataModel/ContainerDataModel.tsx b/...ain/resources/ui/src/components/ContainerDetail/ContainerDataModel/ContainerDataModel.tsx
@@ -17,10 +17,6 @@ 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 { TABLE_SCROLL_VALUE } from 'constants/Table.constants';
 import { Column, TagLabel } from 'generated/entity/data/container';
 import { TagSource } from 'generated/type/tagLabel';
@@ -33,12 +29,7 @@ import {
   updateContainerColumnTags,
 } from 'utils/ContainerDetailUtils';
 import { getEntityName } from 'utils/EntityUtils';
-import {
-  getGlossaryTermHierarchy,
-  getGlossaryTermsList,
-} from 'utils/GlossaryUtils';
 import { getTableExpandableConfig } from 'utils/TableUtils';
-import { getAllTagsList, getTagsHierarchy } from 'utils/TagsUtils';
 import {
   CellRendered,
   ContainerDataModelProps,
@@ -56,40 +47,6 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
   const [editContainerColumnDescription, setEditContainerColumnDescription] =
     useState<Column>();
 
-  const [isTagLoading, setIsTagLoading] = useState<boolean>(false);
-  const [isGlossaryLoading, setIsGlossaryLoading] = useState<boolean>(false);
-  const [tagFetchFailed, setTagFetchFailed] = useState<boolean>(false);
-  const [glossaryTags, setGlossaryTags] = useState<GlossaryTermDetailsProps[]>(
-    []
-  );
-  const [classificationTags, setClassificationTags] = useState<
-    TagsDetailsProps[]
-  >([]);
-
-  const fetchGlossaryTags = async () => {
-    setIsGlossaryLoading(true);
-    try {
-      const glossaryTermList = await getGlossaryTermsList();
-      setGlossaryTags(glossaryTermList);
-    } catch {
-      setTagFetchFailed(true);
-    } finally {
-      setIsGlossaryLoading(false);
-    }
-  };
-
-  const fetchClassificationTags = async () => {
-    setIsTagLoading(true);
-    try {
-      const tags = await getAllTagsList();
-      setClassificationTags(tags);
-    } catch {
-      setTagFetchFailed(true);
-    } finally {
-      setIsTagLoading(false);
-    }
-  };
-
   const handleFieldTagsChange = useCallback(
     async (selectedTags: EntityTags[], editColumnTag: Column) => {
       const newSelectedTags: TagOption[] = map(selectedTags, (tag) => ({
@@ -221,16 +178,11 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
         width: 300,
         render: (tags: TagLabel[], record: Column, index: number) => (
           <TableTags<Column>
-            dataTestId="classification-tags"
-            fetchTags={fetchClassificationTags}
             handleTagSelection={handleFieldTagsChange}
             hasTagEditAccess={hasTagEditAccess}
             index={index}
             isReadOnly={isReadOnly}
-            isTagLoading={isTagLoading}
             record={record}
-            tagFetchFailed={tagFetchFailed}
-            tagList={getTagsHierarchy(classificationTags)}
             tags={tags}
             type={TagSource.Classification}
           />
@@ -244,35 +196,23 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
         width: 300,
         render: (tags: TagLabel[], record: Column, index: number) => (
           <TableTags<Column>
-            dataTestId="glossary-tags"
-            fetchTags={fetchGlossaryTags}
             handleTagSelection={handleFieldTagsChange}
             hasTagEditAccess={hasTagEditAccess}
             index={index}
             isReadOnly={isReadOnly}
-            isTagLoading={isGlossaryLoading}
             record={record}
-            tagFetchFailed={tagFetchFailed}
-            tagList={getGlossaryTermHierarchy(glossaryTags)}
             tags={tags}
             type={TagSource.Glossary}
           />
         ),
       },
     ],
     [
-      classificationTags,
-      tagFetchFailed,
-      glossaryTags,
-      fetchClassificationTags,
-      fetchGlossaryTags,
-      handleFieldTagsChange,
-      hasDescriptionEditAccess,
+      isReadOnly,
       hasTagEditAccess,
+      hasDescriptionEditAccess,
       editContainerColumnDescription,
-      isReadOnly,
-      isTagLoading,
-      isGlossaryLoading,
+      handleFieldTagsChange,
     ]
   );