From 25264edc453b9a5426589d7d88274123cd685540 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Mon, 26 Jun 2023 19:30:36 +0530
Subject: [PATCH] supported pagination of tags in glossary overiew section for
 tags

---
 .../DashboardDetails.component.tsx            |  6 +-
 .../DataModels/DataModelDetails.component.tsx |  6 +-
 .../InfiniteSelectScroll.tsx                  | 24 ++++---
 .../MlModelDetail/MlModelDetail.component.tsx |  6 +-
 .../PipelineDetails.component.tsx             |  6 +-
 .../TableTags/TableTags.component.tsx         |  6 +-
 .../TagsContainerV2.interface.ts}             |  2 +-
 .../TagsContainerV2.tsx}                      | 26 +++----
 .../Tag/TagsV1/TagsV1.component.tsx           | 25 ++++++-
 .../components/Tag/TagsV1/TagsV1.interface.ts |  2 +
 .../ui/src/components/Tag/TagsV1/tagsV1.less  | 16 +++--
 .../TagsInput/TagsInput.component.tsx         | 70 +------------------
 .../TopicDetails/TopicDetails.component.tsx   |  6 +-
 .../src/pages/ContainerPage/ContainerPage.tsx |  6 +-
 .../TableDetailsPageV1/TableDetailsPageV1.tsx |  6 +-
 15 files changed, 87 insertions(+), 126 deletions(-)
 rename openmetadata-ui/src/main/resources/ui/src/components/Tag/{TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.interface.ts => TagsContainerV2/TagsContainerV2.interface.ts} (96%)
 rename openmetadata-ui/src/main/resources/ui/src/components/Tag/{TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.tsx => TagsContainerV2/TagsContainerV2.tsx} (94%)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
index 8ee9557dbbe6..25a2be30d1db 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@@ -26,7 +26,7 @@ import { DataAssetsHeader } from 'components/DataAssets/DataAssetsHeader/DataAss
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import TableTags from 'components/TableTags/TableTags.component';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { getDashboardDetailsPath } from 'constants/constants';
 import { compare } from 'fast-json-patch';
 import { TagSource } from 'generated/type/schema';
@@ -598,7 +598,7 @@ const DashboardDetails = ({
               data-testid="entity-right-panel"
               flex="320px">
               <Space className="w-full" direction="vertical" size="large">
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={dashboardDetails.fullyQualifiedName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.DASHBOARD}
@@ -613,7 +613,7 @@ const DashboardDetails = ({
                   onThreadLinkSelect={onThreadLinkSelect}
                 />
 
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={dashboardDetails.fullyQualifiedName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.DASHBOARD}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.component.tsx
index daa41bce72de..b42da2cd79c7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.component.tsx
@@ -24,7 +24,7 @@ import EntityLineageComponent from 'components/EntityLineage/EntityLineage.compo
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import SchemaEditor from 'components/schema-editor/SchemaEditor';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { getDataModelDetailsPath, getVersionPath } from 'constants/constants';
 import { EntityField } from 'constants/Feeds.constants';
 import { CSMode } from 'enums/codemirror.enum';
@@ -195,7 +195,7 @@ const DataModelDetails = ({
           data-testid="entity-right-panel"
           flex="320px">
           <Space className="w-full" direction="vertical" size="large">
-            <TagsContainerInfiniteScroll
+            <TagsContainerV2
               entityFqn={dashboardDataModelFQN}
               entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
               entityType={EntityType.DASHBOARD_DATA_MODEL}
@@ -205,7 +205,7 @@ const DataModelDetails = ({
               onSelectionChange={handleTagSelection}
               onThreadLinkSelect={onThreadLinkSelect}
             />
-            <TagsContainerInfiniteScroll
+            <TagsContainerV2
               entityFqn={dashboardDataModelFQN}
               entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
               entityType={EntityType.DASHBOARD_DATA_MODEL}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/InfiniteSelectScroll/InfiniteSelectScroll.tsx b/openmetadata-ui/src/main/resources/ui/src/components/InfiniteSelectScroll/InfiniteSelectScroll.tsx
index 09d2d88f86e4..c5f22c0bf629 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/InfiniteSelectScroll/InfiniteSelectScroll.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/InfiniteSelectScroll/InfiniteSelectScroll.tsx
@@ -10,8 +10,9 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Select, Space, Spin, Tooltip, Typography } from 'antd';
+import { Select, Space, Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
+import Loader from 'components/Loader/Loader';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
 import { Paging } from 'generated/type/paging';
 import { debounce } from 'lodash';
@@ -47,9 +48,10 @@ const InfiniteSelectScroll: FC<InfiniteSelectScrollProps> = ({
         setOptions(res.data);
         setPaging(res.paging);
         setSearchValue(value);
-        setIsLoading(false);
       } catch (error) {
         showErrorToast(error as AxiosError);
+      } finally {
+        setIsLoading(false);
       }
     },
     [fetchOptions]
@@ -109,22 +111,22 @@ const InfiniteSelectScroll: FC<InfiniteSelectScrollProps> = ({
     }
   };
 
+  const dropdownRender = (menu: React.ReactElement) => (
+    <>
+      {menu}
+      {hasContentLoading ? <Loader size="small" /> : null}
+    </>
+  );
+
   return (
     <Select
       autoFocus
       showSearch
       data-testid="tag-selector"
-      dropdownRender={(menu) => (
-        <>
-          {menu}
-          {hasContentLoading ? (
-            <Spin size="small" style={{ padding: '0 12px' }} />
-          ) : null}
-        </>
-      )}
+      dropdownRender={dropdownRender}
       filterOption={false}
       mode={mode}
-      notFoundContent={isLoading ? <Spin size="small" /> : null}
+      notFoundContent={isLoading ? <Loader size="small" /> : null}
       optionLabelProp="label"
       style={{ width: '100%' }}
       tagRender={tagRender}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
index f7d57346b52c..1b04334a9546 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
@@ -23,7 +23,7 @@ import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { DataAssetsHeader } from 'components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { TagLabel, TagSource } from 'generated/type/schema';
 import { EntityFieldThreadCount } from 'interface/feed.interface';
 import { isEmpty } from 'lodash';
@@ -419,7 +419,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
               data-testid="entity-right-panel"
               flex="320px">
               <Space className="w-full" direction="vertical" size="large">
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={mlModelDetail.fullyQualifiedName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.MLMODEL}
@@ -434,7 +434,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
                   onThreadLinkSelect={handleThreadLinkSelect}
                 />
 
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={mlModelDetail.fullyQualifiedName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.MLMODEL}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
index 26805c280563..44ddd3ad9118 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -29,7 +29,7 @@ import ExecutionsTab from 'components/Execution/Execution.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import TableTags from 'components/TableTags/TableTags.component';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import TasksDAGView from 'components/TasksDAGView/TasksDAGView';
 import { EntityField } from 'constants/Feeds.constants';
 import { compare } from 'fast-json-patch';
@@ -593,7 +593,7 @@ const PipelineDetails = ({
               data-testid="entity-right-panel"
               flex="320px">
               <Space className="w-full" direction="vertical" size="large">
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={pipelineFQN}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.PIPELINE}
@@ -608,7 +608,7 @@ const PipelineDetails = ({
                   onThreadLinkSelect={onThreadLinkSelect}
                 />
 
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={pipelineFQN}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.PIPELINE}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx
index 4c49cbdbd8ea..d6eee4142a47 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx
@@ -13,7 +13,7 @@
 
 import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { DE_ACTIVE_COLOR } from 'constants/constants';
 import { EntityField } from 'constants/Feeds.constants';
 import { EntityType } from 'enums/entity.enum';
@@ -100,7 +100,7 @@ const TableTags = <T extends TableUnion>({
       <div
         className={classNames('d-flex justify-content flex-col items-start')}
         data-testid="tags-wrapper">
-        <TagsContainerInfiniteScroll
+        <TagsContainerV2
           showBottomEditButton
           permission={hasTagEditAccess && !isReadOnly}
           selectedTags={tags}
@@ -147,7 +147,7 @@ const TableTags = <T extends TableUnion>({
               </div>
             )}
           </>
-        </TagsContainerInfiniteScroll>
+        </TagsContainerV2>
       </div>
     </div>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts
similarity index 96%
rename from openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.interface.ts
rename to openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts
index 7ec26c1f37fe..5b4ec3f39e40 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts
@@ -16,7 +16,7 @@ import { TagSource } from 'generated/type/tagLabel';
 import { EntityTags } from 'Models';
 import { ReactElement } from 'react';
 
-export type TagsContainerInfiniteScrollProps = {
+export type TagsContainerV2Props = {
   permission: boolean;
   selectedTags: EntityTags[];
   entityType?: string;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx
similarity index 94%
rename from openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.tsx
rename to openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx
index 33e4b358b11c..f962a6ba6470 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx
@@ -15,7 +15,6 @@ import { Button, Col, Form, Row, Space, Tooltip, Typography } from 'antd';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { AxiosError } from 'axios';
 import { TableTagsProps } from 'components/TableTags/TableTags.interface';
-import Tags from 'components/Tag/Tags/tags';
 import { DE_ACTIVE_COLOR, PAGE_SIZE } from 'constants/constants';
 import { TAG_CONSTANT, TAG_START_WITH } from 'constants/Tag.constants';
 import { EntityType } from 'enums/entity.enum';
@@ -44,10 +43,11 @@ import {
 import { ReactComponent as IconComments } from '../../../assets/svg/comment.svg';
 import { ReactComponent as IconRequest } from '../../../assets/svg/request-icon.svg';
 import TagSelectForm from '../TagsSelectForm/TagsSelectForm.component';
+import TagsV1 from '../TagsV1/TagsV1.component';
 import TagsViewer from '../TagsViewer/tags-viewer';
-import { TagsContainerInfiniteScrollProps } from './TagsContainerInfiniteScroll.interface';
+import { TagsContainerV2Props } from './TagsContainerV2.interface';
 
-const TagsContainerInfiniteScroll = ({
+const TagsContainerV2 = ({
   permission,
   selectedTags,
   entityType,
@@ -60,7 +60,7 @@ const TagsContainerInfiniteScroll = ({
   onSelectionChange,
   onThreadLinkSelect,
   children,
-}: TagsContainerInfiniteScrollProps) => {
+}: TagsContainerV2Props) => {
   const history = useHistory();
   const [form] = Form.useForm();
   const { t } = useTranslation();
@@ -79,7 +79,7 @@ const TagsContainerInfiniteScroll = ({
   );
 
   const selectedTagsInternal = useMemo(
-    () => tags?.[tagType].map(({ tagFQN }) => tagFQN as string),
+    () => tags?.[tagType].map(({ tagFQN }) => tagFQN),
     [tags, tagType]
   );
 
@@ -204,12 +204,7 @@ const TagsContainerInfiniteScroll = ({
     () =>
       showAddTagButton ? (
         <span onClick={handleAddClick}>
-          <Tags
-            className="tw-font-semibold tw-text-primary"
-            startWith={TAG_START_WITH.PLUS}
-            tag={TAG_CONSTANT}
-            type="border"
-          />
+          <TagsV1 startWith={TAG_START_WITH.PLUS} tag={TAG_CONSTANT} />
         </span>
       ) : null,
     [showAddTagButton]
@@ -293,8 +288,7 @@ const TagsContainerInfiniteScroll = ({
           size="small"
           type="text"
           onClick={() =>
-            onThreadLinkSelect &&
-            onThreadLinkSelect(
+            onThreadLinkSelect?.(
               entityThreadLink ??
                 getEntityFeedLink(entityType, entityFqn, 'tags')
             )
@@ -326,7 +320,7 @@ const TagsContainerInfiniteScroll = ({
   const header = useMemo(() => {
     return (
       showHeader && (
-        <div className="d-flex justify-between m-b-xs">
+        <div className="d-flex justify-between m-b-xss">
           <div className="d-flex items-center">
             <Typography.Text className="right-panel-label">
               {isGlossaryType
@@ -348,7 +342,7 @@ const TagsContainerInfiniteScroll = ({
           {permission && (
             <Row gutter={8}>
               {tagType === TagSource.Classification && requestTagElement}
-              {conversationThreadElement}
+              {onThreadLinkSelect && conversationThreadElement}
             </Row>
           )}
         </div>
@@ -414,4 +408,4 @@ const TagsContainerInfiniteScroll = ({
   );
 };
 
-export default TagsContainerInfiniteScroll;
+export default TagsContainerV2;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx
index 534d193e94d3..52c1a6c24183 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx
@@ -20,14 +20,16 @@ import { useHistory } from 'react-router-dom';
 import { getTagDisplay, getTagTooltip } from 'utils/TagsUtils';
 
 import { ReactComponent as IconTag } from 'assets/svg/classification.svg';
+import { TAG_START_WITH } from 'constants/Tag.constants';
 import { reduceColorOpacity } from 'utils/CommonUtils';
 import { ReactComponent as IconPage } from '../../../assets/svg/ic-flat-doc.svg';
+import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
 import { TagsV1Props } from './TagsV1.interface';
 import './tagsV1.less';
 
 const color = '';
 
-const TagsV1 = ({ tag, showOnlyName = false }: TagsV1Props) => {
+const TagsV1 = ({ tag, startWith, showOnlyName = false }: TagsV1Props) => {
   const history = useHistory();
 
   const isGlossaryTag = useMemo(
@@ -104,7 +106,7 @@ const TagsV1 = ({ tag, showOnlyName = false }: TagsV1Props) => {
   const tagChip = useMemo(
     () => (
       <Tag
-        className={classNames('tag-container-style-v1')}
+        className={classNames('tag-chip tag-chip-content')}
         data-testid="tags"
         style={{ backgroundColor: reduceColorOpacity(color, 0.1) }}
         onClick={() => redirectLink()}>
@@ -114,7 +116,24 @@ const TagsV1 = ({ tag, showOnlyName = false }: TagsV1Props) => {
     []
   );
 
-  return (
+  const addTagChip = useMemo(
+    () => (
+      <Tag
+        className="tag-chip tag-chip-add-button"
+        icon={<PlusIcon height={16} name="plus" width={16} />}>
+        <Typography.Paragraph
+          className="m-0 text-xs font-medium text-primary"
+          data-testid="add-tag">
+          {getTagDisplay(tagName)}
+        </Typography.Paragraph>
+      </Tag>
+    ),
+    []
+  );
+
+  return startWith === TAG_START_WITH.PLUS ? (
+    addTagChip
+  ) : (
     <Tooltip
       className="cursor-pointer"
       mouseEnterDelay={1.5}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.interface.ts
index c80c04b1118a..9683797f77df 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.interface.ts
@@ -11,9 +11,11 @@
  *  limitations under the License.
  */
 
+import { TAG_START_WITH } from 'constants/Tag.constants';
 import { TagLabel } from '../../../generated/type/tagLabel';
 
 export type TagsV1Props = {
   tag: TagLabel;
+  startWith: TAG_START_WITH;
   showOnlyName?: boolean;
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/tagsV1.less b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/tagsV1.less
index e84678ec0c85..64713a9eceeb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/tagsV1.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/tagsV1.less
@@ -13,20 +13,28 @@
 
 @import url('../../../styles/variables.less');
 
-.tag-container-style-v1 {
+.tag-chip {
   display: flex;
   gap: 4px;
   align-items: center;
   font-size: 12px;
   font-weight: 500;
-  cursor: pointer;
   justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.tag-chip-content {
   margin: 0 5px 4px 0;
   border: none;
   padding: 0;
   background: rgba(0, 0, 0, 0.03);
-  border-radius: 4px;
-  overflow: hidden;
+}
+
+.tag-chip-add-button {
+  padding: 3px 8px;
+  background: @white;
 }
 
 .tag-color-bar {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.component.tsx
index 6780e2820323..d7b048bc9608 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.component.tsx
@@ -10,18 +10,11 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Button, Typography } from 'antd';
-import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
-import { TagDetails } from 'components/TableQueries/TableQueryRightPanel/TableQueryRightPanel.interface';
-import TagsContainerEntityTable from 'components/Tag/TagsContainerEntityTable/TagsContainerEntityTable.component';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import TagsViewer from 'components/Tag/TagsViewer/tags-viewer';
-import { DE_ACTIVE_COLOR } from 'constants/constants';
 import { LabelType, State, TagLabel, TagSource } from 'generated/type/tagLabel';
-import { t } from 'i18next';
-import { isEmpty } from 'lodash';
 import { EntityTags } from 'Models';
-import React, { useEffect, useState } from 'react';
-import { getAllTagsList, getTagsHierarchy } from 'utils/TagsUtils';
+import React from 'react';
 
 type Props = {
   isVersionView?: boolean;
@@ -36,13 +29,6 @@ const TagsInput: React.FC<Props> = ({
   onTagsUpdate,
   isVersionView,
 }) => {
-  const [isEditTags, setIsEditTags] = useState(false);
-  const [tagDetails, setTagDetails] = useState<TagDetails>({
-    isLoading: false,
-    isError: false,
-    options: [],
-  });
-
   const handleTagSelection = async (selectedTags: EntityTags[]) => {
     const updatedTags: TagLabel[] | undefined = selectedTags?.map((tag) => {
       return {
@@ -55,7 +41,6 @@ const TagsInput: React.FC<Props> = ({
     if (onTagsUpdate) {
       await onTagsUpdate(updatedTags);
     }
-    setIsEditTags(false);
   };
 
   const getSelectedTags = () => {
@@ -71,64 +56,15 @@ const TagsInput: React.FC<Props> = ({
     }
   };
 
-  const fetchTags = async () => {
-    setTagDetails((pre) => ({ ...pre, isLoading: true }));
-
-    try {
-      const tags = await getAllTagsList();
-      setTagDetails((pre) => ({
-        ...pre,
-        options: tags,
-      }));
-    } catch (_error) {
-      setTagDetails((pre) => ({ ...pre, isError: true, options: [] }));
-    } finally {
-      setTagDetails((pre) => ({ ...pre, isLoading: false }));
-    }
-  };
-
-  const addButtonHandler = () => {
-    setIsEditTags(true);
-    if (isEmpty(tagDetails.options) || tagDetails.isError) {
-      fetchTags();
-    }
-  };
-
-  useEffect(() => {
-    fetchTags();
-  }, []);
-
   return (
     <div className="tags-input-container" data-testid="tags-input-container">
-      <div className="d-flex items-center">
-        <Typography.Text className="right-panel-label">
-          {t('label.tag-plural')}
-        </Typography.Text>
-        {editable && tags.length > 0 && (
-          <Button
-            className="cursor-pointer flex-center m-l-xss"
-            data-testid="edit-button"
-            disabled={!editable}
-            icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
-            size="small"
-            type="text"
-            onClick={() => setIsEditTags(true)}
-          />
-        )}
-      </div>
-
       {isVersionView ? (
         <TagsViewer sizeCap={-1} tags={tags} type="border" />
       ) : (
-        <TagsContainerEntityTable
-          isEditing={isEditTags}
-          isLoading={tagDetails.isLoading}
+        <TagsContainerV2
           permission={editable}
           selectedTags={getSelectedTags()}
           tagType={TagSource.Classification}
-          treeData={getTagsHierarchy(tagDetails.options)}
-          onAddButtonClick={addButtonHandler}
-          onCancel={() => setIsEditTags(false)}
           onSelectionChange={handleTagSelection}
         />
       )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
index ab43b9872327..08ae5e691b59 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
@@ -22,7 +22,7 @@ import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { DataAssetsHeader } from 'components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { getTopicDetailsPath } from 'constants/constants';
 import { TagLabel } from 'generated/type/schema';
 import { EntityFieldThreadCount } from 'interface/feed.interface';
@@ -340,7 +340,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
               data-testid="entity-right-panel"
               flex="320px">
               <Space className="w-full" direction="vertical" size="large">
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={topicDetails.fullyQualifiedName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.TOPIC}
@@ -354,7 +354,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                   onThreadLinkSelect={onThreadLinkSelect}
                 />
 
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={topicDetails.fullyQualifiedName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.TOPIC}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx
index 8071b86b8933..8f3d4a1bf422 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx
@@ -42,7 +42,7 @@ import {
   ResourceEntity,
 } from 'components/PermissionProvider/PermissionProvider.interface';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { getContainerDetailPath, getVersionPath } from 'constants/constants';
 import { EntityField } from 'constants/Feeds.constants';
 import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum';
@@ -628,7 +628,7 @@ const ContainerPage = () => {
               data-testid="entity-right-panel"
               flex="320px">
               <Space className="w-full" direction="vertical" size="large">
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={containerName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.CONTAINER}
@@ -640,7 +640,7 @@ const ContainerPage = () => {
                   onSelectionChange={handleTagSelection}
                   onThreadLinkSelect={onThreadLinkSelect}
                 />
-                <TagsContainerInfiniteScroll
+                <TagsContainerV2
                   entityFqn={containerName}
                   entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
                   entityType={EntityType.CONTAINER}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
index 04dff2dcaa9f..bc942b9191ea 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
@@ -37,7 +37,7 @@ import SchemaTab from 'components/SchemaTab/SchemaTab.component';
 import TableProfilerV1 from 'components/TableProfiler/TableProfilerV1';
 import TableQueries from 'components/TableQueries/TableQueries';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { useTourProvider } from 'components/TourProvider/TourProvider';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
 import { getTableTabPath, getVersionPath } from 'constants/constants';
@@ -445,7 +445,7 @@ const TableDetailsPageV1 = () => {
           ) : null}
 
           <Space className="w-full" direction="vertical" size="large">
-            <TagsContainerInfiniteScroll
+            <TagsContainerV2
               entityFqn={datasetFQN}
               entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
               entityType={EntityType.TABLE}
@@ -459,7 +459,7 @@ const TableDetailsPageV1 = () => {
               onThreadLinkSelect={onThreadLinkSelect}
             />
 
-            <TagsContainerInfiniteScroll
+            <TagsContainerV2
               entityFqn={datasetFQN}
               entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
               entityType={EntityType.TABLE}