fix(#10500): When the tier is removed all tags are also removed. (#10513)

* fix(#10500): When the tier is removed all tags are also removed.

* chore: warp TagsViewer component with AntD Space component

* test: add cypress test

* update test

* test: fix test for feed message check

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/EntityDetails.spec.js

@@ -24,6 +24,8 @@ import {
 } from '../../common/common';
 import { DELETE_ENTITY, DELETE_TERM } from '../../constants/constants';
 
+const entityTag = 'PersonalData.Personal';
+
 describe('Entity Details Page', () => {
   beforeEach(() => {
     cy.login();
@@ -105,7 +107,7 @@ describe('Entity Details Page', () => {
     cy.clickOnLogo();
   };
 
-  const addOwnerAndTier = (value) => {
+  const addOwnerTierAndTag = (value) => {
     visitEntityDetailsPage(value.term, value.serviceName, value.entity);
 
     interceptURL(
@@ -161,27 +163,52 @@ describe('Entity Details Page', () => {
 
     cy.get('[data-testid="entity-tags"]').should('contain', 'Tier1');
 
+    // add tag to the entity
+    interceptURL('GET', '/api/v1/tags?limit=1000', 'tagsRequest');
+    interceptURL(
+      'GET',
+      '/api/v1/search/query?q=*&from=0&size=1000&index=glossary_search_index',
+      'glossaryRequest'
+    );
+
+    cy.get('[data-testid="edit-button"]').should('be.visible').click();
+
+    cy.get('[data-testid="tag-selector"]')
+      .scrollIntoView()
+      .should('be.visible')
+      .type(entityTag);
+
+    verifyResponseStatusCode('@tagsRequest', 200);
+    verifyResponseStatusCode('@glossaryRequest', 200);
+
+    cy.get('.ant-select-item-option-content')
+      .first()
+      .should('be.visible')
+      .click();
+
+    cy.get('[data-testid="saveAssociatedTag"]').should('be.visible').click();
+
     // Test out the activity feed and task tab
     cy.get('[data-testid="Activity Feeds & Tasks"]')
       .should('be.visible')
       .click();
     // Check for tab count
-    cy.get('[data-testid=filter-count').should('be.visible').contains('2');
+    cy.get('[data-testid=filter-count').should('be.visible').contains('3');
 
-    // Check for activity feeds - count should be 2
+    // Check for activity feeds - count should be 3
-    // 1 for tier change and 1 for owner change
+    // 1 for tier change , 1 for owner change, 1 for entity tag
-    cy.get('[data-testid="message-container"]').its('length').should('eq', 2);
+    cy.get('[data-testid="message-container"]').its('length').should('eq', 3);
 
     cy.clickOnLogo();
 
     // checks newly generated feed for follow and setting owner
     cy.get('[data-testid="message-container"]')
-      .eq(1)
+      .eq(2)
       .contains('Added owner: admin')
       .should('be.visible');
 
     cy.get('[data-testid="message-container"]')
-      .eq(0)
+      .eq(1)
       .scrollIntoView()
       .contains('Added tags: Tier.Tier1')
       .should('be.visible');
@@ -235,6 +262,9 @@ describe('Entity Details Page', () => {
       .should('be.visible')
       .click();
 
+    // after removing the tier entity tag should exists
+    cy.get('[data-testid="entity-tags"]').should('contain', entityTag);
+
     cy.clickOnLogo();
   };
 
@@ -282,8 +312,8 @@ describe('Entity Details Page', () => {
     cy.clickOnLogo();
   };
 
-  it('Add Owner and Tier for entity', () => {
+  it('Add Owner, Tier and tags for entity', () => {
-    addOwnerAndTier(DELETE_ENTITY.table);
+    addOwnerTierAndTag(DELETE_ENTITY.table);
   });
 
   it('Remove Owner and Tier for entity', () => {

openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerDataModel/ContainerDataModel.tsx

@@ -153,9 +153,7 @@ const ContainerDataModel: FC<ContainerDataModelProps> = ({
     return (
       <>
         {isReadOnly ? (
-          <Space wrap>
+          <TagsViewer sizeCap={-1} tags={tags || []} />
-            <TagsViewer sizeCap={-1} tags={tags || []} />
-          </Space>
         ) : (
           <Space
             align={isUpdatingTags ? 'start' : 'center'}

openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx

@@ -316,7 +316,7 @@ const DashboardDetails = ({
     if (dashboardDetails) {
       const updatedDashboardDetails = {
         ...dashboardDetails,
-        tags: undefined,
+        tags: getTagsWithoutTier(dashboardDetails.tags ?? []),
       };
       settingsUpdateHandler(updatedDashboardDetails);
     }
@@ -616,9 +616,7 @@ const DashboardDetails = ({
               data-testid="tags-wrapper"
               onClick={() => handleTagContainerClick(record, index)}>
               {deleted ? (
-                <Space>
+                <TagsViewer sizeCap={-1} tags={tags || []} />
-                  <TagsViewer sizeCap={-1} tags={tags || []} />
-                </Space>
               ) : (
                 <TagsContainer
                   editable={editChartTags?.index === index}

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx

@@ -533,7 +533,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
     if (tableDetails) {
       const updatedTableDetails = {
         ...tableDetails,
-        tags: undefined,
+        tags: getTagsWithoutTier(tableDetails.tags ?? []),
       };
       settingsUpdateHandler(updatedTableDetails);
     }

openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx

@@ -522,9 +522,7 @@ const EntityTable = ({
       return (
         <div className="hover-icon-group">
           {isReadOnly ? (
-            <div className="tw-flex tw-flex-wrap">
+            <TagsViewer sizeCap={-1} tags={tags || []} />
-              <TagsViewer sizeCap={-1} tags={tags || []} />
-            </div>
           ) : (
             <div
               className={classNames(

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SummaryList/SummaryListItems/SummaryListItems.component.tsx

@@ -91,14 +91,12 @@ function SummaryListItem({
                       className="w-12 h-12"
                       data-testid="tag-grey-icon"
                     />
-                    <Row wrap>
+                    <TagsViewer
-                      <TagsViewer
+                      sizeCap={-1}
-                        sizeCap={-1}
+                      tags={(entityDetails.tags || []).map((tag) =>
-                        tags={(entityDetails.tags || []).map((tag) =>
+                        getTagValue(tag)
-                          getTagValue(tag)
+                      )}
-                        )}
+                    />
-                      />
-                    </Row>
                   </Space>
                 </Col>
               </>

openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx

@@ -355,7 +355,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
     if (mlModelDetail) {
       const updatedMlModelDetails = {
         ...mlModelDetail,
-        tags: undefined,
+        tags: getTagsWithoutTier(mlModelDetail.tags ?? []),
       };
       settingsUpdateHandler(updatedMlModelDetails);
     }

openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx

@@ -304,7 +304,7 @@ const PipelineDetails = ({
     if (pipelineDetails) {
       const updatedPipelineDetails = {
         ...pipelineDetails,
-        tags: undefined,
+        tags: getTagsWithoutTier(pipelineDetails.tags ?? []),
       };
       settingsUpdateHandler(updatedPipelineDetails);
     }
@@ -531,9 +531,7 @@ const PipelineDetails = ({
         data-testid="tags-wrapper"
         onClick={() => handleEditTaskTag(record, index)}>
         {deleted ? (
-          <div className="tw-flex tw-flex-wrap">
+          <TagsViewer sizeCap={-1} tags={text || []} />
-            <TagsViewer sizeCap={-1} tags={text || []} />
-          </div>
         ) : (
           <TagsContainer
             editable={editTaskTags?.index === index}

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/tags-viewer.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Popover } from 'antd';
+import { Popover, Space } from 'antd';
 import classNames from 'classnames';
 import Tags from 'components/Tag/Tags/tags';
 import { sortBy, uniqBy } from 'lodash';
@@ -56,33 +56,39 @@ const TagsViewer: FunctionComponent<TagsViewerProps> = ({
     [tags]
   );
 
-  return sizeCap > -1 ? (
+  return (
-    <>
+    <Space wrap>
-      {sortedTagsBySource
+      {sizeCap > -1 ? (
-        .slice(0, sizeCap)
+        <>
-        .map((tag, index) => getTagsElement(tag, index))}
+          {sortedTagsBySource
+            .slice(0, sizeCap)
+            .map((tag, index) => getTagsElement(tag, index))}
 
-      {sortedTagsBySource.slice(sizeCap).length > 0 && (
+          {sortedTagsBySource.slice(sizeCap).length > 0 && (
-        <Popover
+            <Popover
-          content={
+              content={
-            <>
+                <>
-              {sortedTagsBySource.slice(sizeCap).map((tag, index) => (
+                  {sortedTagsBySource.slice(sizeCap).map((tag, index) => (
-                <p className="text-left" key={index}>
+                    <p className="text-left" key={index}>
-                  {getTagsElement(tag, index)}
+                      {getTagsElement(tag, index)}
-                </p>
+                    </p>
-              ))}
+                  ))}
-            </>
+                </>
-          }
+              }
-          placement="bottom"
+              placement="bottom"
-          trigger="click">
+              trigger="click">
-          <span className="cursor-pointer text-xs link-text v-align-sub">
+              <span className="cursor-pointer text-xs link-text v-align-sub">
-            {ELLIPSES}
+                {ELLIPSES}
-          </span>
+              </span>
-        </Popover>
+            </Popover>
+          )}
+        </>
+      ) : (
+        <>
+          {sortedTagsBySource.map((tag, index) => getTagsElement(tag, index))}
+        </>
       )}
-    </>
+    </Space>
-  ) : (
-    <>{sortedTagsBySource.map((tag, index) => getTagsElement(tag, index))}</>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx

@@ -314,7 +314,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
     if (topicDetails) {
       const updatedTopicDetails = {
         ...topicDetails,
-        tags: undefined,
+        tags: getTagsWithoutTier(topicDetails.tags ?? []),
       };
       settingsUpdateHandler(updatedTopicDetails);
     }

openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx

@@ -183,9 +183,7 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
     return (
       <>
         {isReadOnly ? (
-          <Space wrap>
+          <TagsViewer sizeCap={-1} tags={tags || []} />
-            <TagsViewer sizeCap={-1} tags={tags || []} />
-          </Space>
         ) : (
           <Space
             align={styleFlag ? 'start' : 'center'}

openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx

@@ -92,9 +92,7 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
         accessor: 'tags',
         width: 272,
         render: (tags: Column['tags']) => (
-          <div className="d-flex flex-wrap">
+          <TagsViewer sizeCap={-1} tags={tags || []} />
-            <TagsViewer sizeCap={-1} tags={tags || []} />
-          </div>
         ),
       },
     ],