From 811bc6a6dd3c03d8046012cfacabf19146806007 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 24 Nov 2023 16:11:45 +0530
Subject: [PATCH 1/2] chore(ui): add entity right panel component

---
 .../DashboardDetails.component.tsx            | 45 +++------
 .../DataModels/DataModelDetails.component.tsx | 45 +++------
 .../EntityRightPanel/EntityRightPanel.tsx     | 94 +++++++++++++++++++
 .../MlModelDetail/MlModelDetail.component.tsx | 46 +++------
 .../PipelineDetails.component.tsx             | 44 +++------
 .../TopicDetails/TopicDetails.component.tsx   | 46 +++------
 .../src/pages/ContainerPage/ContainerPage.tsx | 51 +++-------
 .../DatabaseDetailsPage.tsx                   | 46 +++------
 .../DatabaseSchemaPage.component.tsx          | 45 +++------
 .../SearchIndexDetailsPage.tsx                | 45 +++------
 .../ServiceMainTabContent.tsx                 | 48 +++-------
 .../StoredProcedure/StoredProcedurePage.tsx   | 46 +++------
 .../TableDetailsPageV1/TableDetailsPageV1.tsx | 70 ++++++--------
 13 files changed, 263 insertions(+), 408 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx

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 371c40aff107..3af901f6a474 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
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Col, Row, Space, Table, Tabs, Typography } from 'antd';
+import { Col, Row, Table, Tabs, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
@@ -27,7 +27,6 @@ import { withActivityFeed } from '../../components/AppRouter/withActivityFeed';
 import DescriptionV1 from '../../components/common/EntityDescription/DescriptionV1';
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
 import EntityLineageComponent from '../../components/Entity/EntityLineage/EntityLineage.component';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
@@ -35,8 +34,6 @@ import { ColumnFilter } from '../../components/Table/ColumnFilter/ColumnFilter.c
 import TableDescription from '../../components/TableDescription/TableDescription.component';
 import TableTags from '../../components/TableTags/TableTags.component';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import { getDashboardDetailsPath } from '../../constants/constants';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
 import { Tag } from '../../generated/entity/classification/tag';
@@ -64,6 +61,7 @@ import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { useAuthContext } from '../Auth/AuthProviders/AuthProvider';
 import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropertyTable';
+import EntityRightPanel from '../Entity/EntityRightPanel/EntityRightPanel';
 import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
 import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
 import { ResourceEntity } from '../PermissionProvider/PermissionProvider.interface';
@@ -621,35 +619,16 @@ const DashboardDetails = ({
               className="entity-tag-right-panel-container"
               data-testid="entity-right-panel"
               flex="320px">
-              <Space className="w-full" direction="vertical" size="large">
-                <DataProductsContainer
-                  activeDomain={dashboardDetails?.domain}
-                  dataProducts={dashboardDetails?.dataProducts ?? []}
-                  hasPermission={false}
-                />
-
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedDashboardFQN}
-                  entityType={EntityType.DASHBOARD}
-                  permission={editTagsPermission}
-                  selectedTags={dashboardTags}
-                  tagType={TagSource.Classification}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedDashboardFQN}
-                  entityType={EntityType.DASHBOARD}
-                  permission={editTagsPermission}
-                  selectedTags={dashboardTags}
-                  tagType={TagSource.Glossary}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-              </Space>
+              <EntityRightPanel
+                dataProducts={dashboardDetails?.dataProducts ?? []}
+                domain={dashboardDetails?.domain}
+                editTagPermission={editTagsPermission}
+                entityFQN={decodedDashboardFQN}
+                entityType={EntityType.DASHBOARD}
+                selectedTags={dashboardTags}
+                onTagSelectionChange={handleTagSelection}
+                onThreadLinkSelect={onThreadLinkSelect}
+              />
             </Col>
           </Row>
         ),
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 993309c0d486..7bd95a8393b4 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
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Card, Col, Row, Space, Tabs } from 'antd';
+import { Card, Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import { isUndefined, toString } from 'lodash';
 import { EntityTags } from 'Models';
@@ -28,15 +28,13 @@ import EntityLineageComponent from '../../components/Entity/EntityLineage/Entity
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import {
   getDataModelDetailsPath,
   getVersionPath,
 } from '../../constants/constants';
 import { CSMode } from '../../enums/codemirror.enum';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
-import { TagLabel, TagSource } from '../../generated/type/tagLabel';
+import { TagLabel } from '../../generated/type/tagLabel';
 import { restoreDataModel } from '../../rest/dataModelsAPI';
 import { getFeedCounts } from '../../utils/CommonUtils';
 import { getEntityName } from '../../utils/EntityUtils';
@@ -45,7 +43,7 @@ import { getDecodedFqn } from '../../utils/StringsUtils';
 import { getTagsWithoutTier } from '../../utils/TableUtils';
 import { createTagObject } from '../../utils/TagsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
-import DataProductsContainer from '../DataProductsContainer/DataProductsContainer.component';
+import EntityRightPanel from '../Entity/EntityRightPanel/EntityRightPanel';
 import SchemaEditor from '../SchemaEditor/SchemaEditor';
 import { SourceType } from '../SearchedData/SearchedData.interface';
 import { DataModelDetailsProps } from './DataModelDetails.interface';
@@ -232,33 +230,16 @@ const DataModelDetails = ({
           className="entity-tag-right-panel-container"
           data-testid="entity-right-panel"
           flex="320px">
-          <Space className="w-full" direction="vertical" size="large">
-            <DataProductsContainer
-              activeDomain={dataModelData?.domain}
-              dataProducts={dataModelData?.dataProducts ?? []}
-              hasPermission={false}
-            />
-            <TagsContainerV2
-              displayType={DisplayType.READ_MORE}
-              entityFqn={decodedDataModelFQN}
-              entityType={EntityType.DASHBOARD_DATA_MODEL}
-              permission={editTagsPermission}
-              selectedTags={tags}
-              tagType={TagSource.Classification}
-              onSelectionChange={handleTagSelection}
-              onThreadLinkSelect={onThreadLinkSelect}
-            />
-            <TagsContainerV2
-              displayType={DisplayType.READ_MORE}
-              entityFqn={decodedDataModelFQN}
-              entityType={EntityType.DASHBOARD_DATA_MODEL}
-              permission={editTagsPermission}
-              selectedTags={tags}
-              tagType={TagSource.Glossary}
-              onSelectionChange={handleTagSelection}
-              onThreadLinkSelect={onThreadLinkSelect}
-            />
-          </Space>
+          <EntityRightPanel
+            dataProducts={dataModelData?.dataProducts ?? []}
+            domain={dataModelData?.domain}
+            editTagPermission={editTagsPermission}
+            entityFQN={decodedDataModelFQN}
+            entityType={EntityType.DASHBOARD_DATA_MODEL}
+            selectedTags={tags}
+            onTagSelectionChange={handleTagSelection}
+            onThreadLinkSelect={onThreadLinkSelect}
+          />
         </Col>
       </Row>
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx
new file mode 100644
index 000000000000..03faffa447c8
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx
@@ -0,0 +1,94 @@
+/*
+ *  Copyright 2023 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { Space } from 'antd';
+import { EntityTags } from 'Models';
+import React, { FC } from 'react';
+import { EntityType } from '../../../enums/entity.enum';
+import { ThreadType } from '../../../generated/entity/feed/thread';
+import { EntityReference } from '../../../generated/entity/type';
+import { TagSource } from '../../../generated/type/tagLabel';
+import DataProductsContainer from '../../DataProductsContainer/DataProductsContainer.component';
+import TagsContainerV2 from '../../Tag/TagsContainerV2/TagsContainerV2';
+import { DisplayType } from '../../Tag/TagsViewer/TagsViewer.interface';
+
+interface EntityRightPanelProps {
+  dataProducts: EntityReference[];
+  editTagPermission: boolean;
+  entityType: EntityType;
+  entityFQN: string;
+  selectedTags: EntityTags[];
+  beforeSlot?: React.ReactNode;
+  showTaskHandler?: boolean;
+  showDataProductContainer?: boolean;
+  afterSlot?: React.ReactNode;
+  domain?: EntityReference;
+  onTagSelectionChange?: (selectedTags: EntityTags[]) => Promise<void>;
+  onThreadLinkSelect?: (value: string, threadType?: ThreadType) => void;
+}
+
+const EntityRightPanel: FC<EntityRightPanelProps> = ({
+  domain,
+  dataProducts,
+  entityFQN,
+  entityType,
+  selectedTags,
+  editTagPermission,
+  onTagSelectionChange,
+  onThreadLinkSelect,
+  beforeSlot,
+  afterSlot,
+  showTaskHandler = true,
+  showDataProductContainer = true,
+}) => {
+  return (
+    <>
+      {beforeSlot}
+      <Space className="w-full" direction="vertical" size="large">
+        {showDataProductContainer && (
+          <DataProductsContainer
+            activeDomain={domain}
+            dataProducts={dataProducts}
+            hasPermission={false}
+          />
+        )}
+
+        <TagsContainerV2
+          displayType={DisplayType.READ_MORE}
+          entityFqn={entityFQN}
+          entityType={entityType}
+          permission={editTagPermission}
+          selectedTags={selectedTags}
+          showTaskHandler={showTaskHandler}
+          tagType={TagSource.Classification}
+          onSelectionChange={onTagSelectionChange}
+          onThreadLinkSelect={onThreadLinkSelect}
+        />
+
+        <TagsContainerV2
+          displayType={DisplayType.READ_MORE}
+          entityFqn={entityFQN}
+          entityType={entityType}
+          permission={editTagPermission}
+          selectedTags={selectedTags}
+          showTaskHandler={showTaskHandler}
+          tagType={TagSource.Glossary}
+          onSelectionChange={onTagSelectionChange}
+          onThreadLinkSelect={onThreadLinkSelect}
+        />
+      </Space>
+      {afterSlot}
+    </>
+  );
+};
+
+export default EntityRightPanel;
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 dfe68a568544..2454f3c4ec4f 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
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Col, Row, Space, Table, Tabs, Typography } from 'antd';
+import { Col, Row, Table, Tabs, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
@@ -28,15 +28,13 @@ import EntityLineageComponent from '../../components/Entity/EntityLineage/Entity
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import { getMlModelDetailsPath } from '../../constants/constants';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
 import { MlHyperParameter } from '../../generated/api/data/createMlModel';
 import { Tag } from '../../generated/entity/classification/tag';
 import { Mlmodel, MlStore } from '../../generated/entity/data/mlmodel';
 import { ThreadType } from '../../generated/entity/feed/thread';
-import { TagLabel, TagSource } from '../../generated/type/schema';
+import { TagLabel } from '../../generated/type/schema';
 import { restoreMlmodel } from '../../rest/mlModelAPI';
 import { getEmptyPlaceholder, getFeedCounts } from '../../utils/CommonUtils';
 import { getEntityName } from '../../utils/EntityUtils';
@@ -49,7 +47,7 @@ import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { useAuthContext } from '../Auth/AuthProviders/AuthProvider';
 import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropertyTable';
-import DataProductsContainer from '../DataProductsContainer/DataProductsContainer.component';
+import EntityRightPanel from '../Entity/EntityRightPanel/EntityRightPanel';
 import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
 import { ResourceEntity } from '../PermissionProvider/PermissionProvider.interface';
 import { MlModelDetailProp } from './MlModelDetail.interface';
@@ -417,34 +415,16 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
               className="entity-tag-right-panel-container"
               data-testid="entity-right-panel"
               flex="320px">
-              <Space className="w-full" direction="vertical" size="large">
-                <DataProductsContainer
-                  activeDomain={mlModelDetail?.domain}
-                  dataProducts={mlModelDetail?.dataProducts ?? []}
-                  hasPermission={false}
-                />
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedMlModelFqn}
-                  entityType={EntityType.MLMODEL}
-                  permission={editTagsPermission}
-                  selectedTags={mlModelTags}
-                  tagType={TagSource.Classification}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={handleThreadLinkSelect}
-                />
-
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedMlModelFqn}
-                  entityType={EntityType.MLMODEL}
-                  permission={editTagsPermission}
-                  selectedTags={mlModelTags}
-                  tagType={TagSource.Glossary}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={handleThreadLinkSelect}
-                />
-              </Space>
+              <EntityRightPanel
+                dataProducts={mlModelDetail?.dataProducts ?? []}
+                domain={mlModelDetail?.domain}
+                editTagPermission={editTagsPermission}
+                entityFQN={decodedMlModelFqn}
+                entityType={EntityType.MLMODEL}
+                selectedTags={mlModelTags}
+                onTagSelectionChange={handleTagSelection}
+                onThreadLinkSelect={handleThreadLinkSelect}
+              />
             </Col>
           </Row>
         ),
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 5808208ad176..33093d91ba8e 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
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Card, Col, Radio, Row, Space, Tabs, Typography } from 'antd';
+import { Card, Col, Radio, Row, Tabs, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
@@ -34,8 +34,6 @@ import { ColumnFilter } from '../../components/Table/ColumnFilter/ColumnFilter.c
 import TableDescription from '../../components/TableDescription/TableDescription.component';
 import TableTags from '../../components/TableTags/TableTags.component';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import TasksDAGView from '../../components/TasksDAGView/TasksDAGView';
 import {
   getPipelineDetailsPath,
@@ -73,7 +71,7 @@ import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { withActivityFeed } from '../AppRouter/withActivityFeed';
 import { useAuthContext } from '../Auth/AuthProviders/AuthProvider';
-import DataProductsContainer from '../DataProductsContainer/DataProductsContainer.component';
+import EntityRightPanel from '../Entity/EntityRightPanel/EntityRightPanel';
 import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
 import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
 import { ResourceEntity } from '../PermissionProvider/PermissionProvider.interface';
@@ -602,34 +600,16 @@ const PipelineDetails = ({
               className="entity-tag-right-panel-container"
               data-testid="entity-right-panel"
               flex="320px">
-              <Space className="w-full" direction="vertical" size="large">
-                <DataProductsContainer
-                  activeDomain={pipelineDetails?.domain}
-                  dataProducts={pipelineDetails?.dataProducts ?? []}
-                  hasPermission={false}
-                />
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={pipelineFQN}
-                  entityType={EntityType.PIPELINE}
-                  permission={editTagsPermission}
-                  selectedTags={tags}
-                  tagType={TagSource.Classification}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={pipelineFQN}
-                  entityType={EntityType.PIPELINE}
-                  permission={editTagsPermission}
-                  selectedTags={tags}
-                  tagType={TagSource.Glossary}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-              </Space>
+              <EntityRightPanel
+                dataProducts={pipelineDetails?.dataProducts ?? []}
+                domain={pipelineDetails?.domain}
+                editTagPermission={editTagsPermission}
+                entityFQN={pipelineFQN}
+                entityType={EntityType.PIPELINE}
+                selectedTags={tags}
+                onTagSelectionChange={handleTagSelection}
+                onThreadLinkSelect={onThreadLinkSelect}
+              />
             </Col>
           </Row>
         ),
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 1130377d2c60..890e94645e7b 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
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Col, Row, Space, Tabs } from 'antd';
+import { Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import { EntityTags } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -24,14 +24,11 @@ import DescriptionV1 from '../../components/common/EntityDescription/Description
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import QueryViewer from '../../components/common/QueryViewer/QueryViewer.component';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
 import EntityLineageComponent from '../../components/Entity/EntityLineage/EntityLineage.component';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
 import SampleDataWithMessages from '../../components/SampleDataWithMessages/SampleDataWithMessages';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import { getTopicDetailsPath } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
@@ -40,7 +37,6 @@ import { Topic } from '../../generated/entity/data/topic';
 import { DataProduct } from '../../generated/entity/domains/dataProduct';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { TagLabel } from '../../generated/type/schema';
-import { TagSource } from '../../generated/type/tagLabel';
 import { restoreTopic } from '../../rest/topicsAPI';
 import { getFeedCounts } from '../../utils/CommonUtils';
 import {
@@ -54,6 +50,7 @@ import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { useAuthContext } from '../Auth/AuthProviders/AuthProvider';
 import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropertyTable';
+import EntityRightPanel from '../Entity/EntityRightPanel/EntityRightPanel';
 import { TopicDetailsProps } from './TopicDetails.interface';
 import TopicSchemaFields from './TopicSchema/TopicSchema';
 
@@ -328,35 +325,16 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
               className="entity-tag-right-panel-container"
               data-testid="entity-right-panel"
               flex="320px">
-              <Space className="w-full" direction="vertical" size="large">
-                <DataProductsContainer
-                  activeDomain={topicDetails?.domain}
-                  dataProducts={topicDetails?.dataProducts ?? []}
-                  hasPermission={false}
-                />
-
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedTopicFQN}
-                  entityType={EntityType.TOPIC}
-                  permission={editTagsPermission}
-                  selectedTags={topicTags}
-                  tagType={TagSource.Classification}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedTopicFQN}
-                  entityType={EntityType.TOPIC}
-                  permission={editTagsPermission}
-                  selectedTags={topicTags}
-                  tagType={TagSource.Glossary}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-              </Space>
+              <EntityRightPanel
+                dataProducts={topicDetails?.dataProducts ?? []}
+                domain={topicDetails?.domain}
+                editTagPermission={editTagsPermission}
+                entityFQN={decodedTopicFQN}
+                entityType={EntityType.TOPIC}
+                selectedTags={topicTags}
+                onTagSelectionChange={handleTagSelection}
+                onThreadLinkSelect={onThreadLinkSelect}
+              />
             </Col>
           </Row>
         ),
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 7187c3e65d26..942d63784625 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
@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Col, Row, Space, Tabs } from 'antd';
+import { Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
 import { isEmpty, isUndefined, omitBy, toString } from 'lodash';
@@ -29,8 +29,8 @@ import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/Error
 import ContainerChildren from '../../components/ContainerDetail/ContainerChildren/ContainerChildren';
 import ContainerDataModel from '../../components/ContainerDetail/ContainerDataModel/ContainerDataModel';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
 import EntityLineageComponent from '../../components/Entity/EntityLineage/EntityLineage.component';
+import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
 import Loader from '../../components/Loader/Loader';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
@@ -41,8 +41,6 @@ import {
 } from '../../components/PermissionProvider/PermissionProvider.interface';
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import {
   getContainerDetailPath,
   getVersionPath,
@@ -54,7 +52,7 @@ import { Tag } from '../../generated/entity/classification/tag';
 import { Container } from '../../generated/entity/data/container';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { Include } from '../../generated/type/include';
-import { TagLabel, TagSource } from '../../generated/type/tagLabel';
+import { TagLabel } from '../../generated/type/tagLabel';
 import { postThread } from '../../rest/feedsAPI';
 import {
   addContainerFollower,
@@ -540,37 +538,18 @@ const ContainerPage = () => {
               className="entity-tag-right-panel-container"
               data-testid="entity-right-panel"
               flex="320px">
-              <Space className="w-full" direction="vertical" size="large">
-                <DataProductsContainer
-                  activeDomain={containerData?.domain}
-                  dataProducts={containerData?.dataProducts ?? []}
-                  hasPermission={false}
-                />
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedContainerName}
-                  entityType={EntityType.CONTAINER}
-                  permission={
-                    editDescriptionPermission && !containerData?.deleted
-                  }
-                  selectedTags={tags}
-                  tagType={TagSource.Classification}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedContainerName}
-                  entityType={EntityType.CONTAINER}
-                  permission={
-                    editDescriptionPermission && !containerData?.deleted
-                  }
-                  selectedTags={tags}
-                  tagType={TagSource.Glossary}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-              </Space>
+              <EntityRightPanel
+                dataProducts={containerData?.dataProducts ?? []}
+                domain={containerData?.domain}
+                editTagPermission={
+                  editTagsPermission && !containerData?.deleted
+                }
+                entityFQN={decodedContainerName}
+                entityType={EntityType.CONTAINER}
+                selectedTags={tags}
+                onTagSelectionChange={handleTagSelection}
+                onThreadLinkSelect={onThreadLinkSelect}
+              />
             </Col>
           </Row>
         ),
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx
index f0d9b0768585..e13a31aa1639 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Col, Row, Space, Tabs } from 'antd';
+import { Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { isEmpty, isUndefined, toString } from 'lodash';
@@ -37,7 +37,7 @@ import DescriptionV1 from '../../components/common/EntityDescription/Description
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
 import { DatabaseSchemaTable } from '../../components/Database/DatabaseSchema/DatabaseSchemaTable/DatabaseSchemaTable';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
+import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
 import Loader from '../../components/Loader/Loader';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
@@ -49,8 +49,6 @@ import {
 import ProfilerSettings from '../../components/ProfilerSettings/ProfilerSettings';
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
   getDatabaseDetailsPath,
@@ -63,7 +61,6 @@ import { CreateThread } from '../../generated/api/feed/createThread';
 import { Tag } from '../../generated/entity/classification/tag';
 import { Database } from '../../generated/entity/data/database';
 import { Include } from '../../generated/type/include';
-import { TagSource } from '../../generated/type/tagLabel';
 import { EntityFieldThreadCount } from '../../interface/feed.interface';
 import {
   getDatabaseDetailsByFQN,
@@ -186,7 +183,7 @@ const DatabaseDetails: FunctionComponent = () => {
 
       setSchemaInstanceCount(paging.total);
     } catch (error) {
-      showErrorToast(error);
+      showErrorToast(error as AxiosError);
     } finally {
       setIsLoading(false);
     }
@@ -535,33 +532,16 @@ const DatabaseDetails: FunctionComponent = () => {
               className="entity-tag-right-panel-container"
               data-testid="entity-right-panel"
               flex="320px">
-              <Space className="w-full" direction="vertical" size="large">
-                <DataProductsContainer
-                  activeDomain={database?.domain}
-                  dataProducts={database?.dataProducts ?? []}
-                  hasPermission={false}
-                />
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedDatabaseFQN}
-                  entityType={EntityType.DATABASE}
-                  permission={editTagsPermission}
-                  selectedTags={tags}
-                  tagType={TagSource.Classification}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedDatabaseFQN}
-                  entityType={EntityType.DATABASE}
-                  permission={editTagsPermission}
-                  selectedTags={tags}
-                  tagType={TagSource.Glossary}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-              </Space>
+              <EntityRightPanel
+                dataProducts={database?.dataProducts ?? []}
+                domain={database?.domain}
+                editTagPermission={editTagsPermission}
+                entityFQN={decodedDatabaseFQN}
+                entityType={EntityType.DATABASE}
+                selectedTags={tags}
+                onTagSelectionChange={handleTagSelection}
+                onThreadLinkSelect={onThreadLinkSelect}
+              />
             </Col>
           </Row>
         ),
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
index 66477cfc6c64..5d82695ecdca 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Col, Row, Skeleton, Space, Tabs, TabsProps } from 'antd';
+import { Col, Row, Skeleton, Tabs, TabsProps } from 'antd';
 import { AxiosError } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { isEmpty, isUndefined } from 'lodash';
@@ -38,7 +38,7 @@ import { CustomPropertyTable } from '../../components/common/CustomPropertyTable
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { PagingHandlerParams } from '../../components/common/NextPrevious/NextPrevious.interface';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
+import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
 import Loader from '../../components/Loader/Loader';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
@@ -50,8 +50,6 @@ import {
 import ProfilerSettings from '../../components/ProfilerSettings/ProfilerSettings';
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import {
   getDatabaseSchemaDetailsPath,
   getVersionPathWithTab,
@@ -65,7 +63,7 @@ import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
 import { Table } from '../../generated/entity/data/table';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { Include } from '../../generated/type/include';
-import { TagLabel, TagSource } from '../../generated/type/tagLabel';
+import { TagLabel } from '../../generated/type/tagLabel';
 import StoredProcedureTab from '../../pages/StoredProcedure/StoredProcedureTab';
 import {
   getDatabaseSchemaDetailsByFQN,
@@ -578,33 +576,16 @@ const DatabaseSchemaPage: FunctionComponent = () => {
             className="entity-tag-right-panel-container"
             data-testid="entity-right-panel"
             flex="320px">
-            <Space className="w-full" direction="vertical" size="large">
-              <DataProductsContainer
-                activeDomain={databaseSchema?.domain}
-                dataProducts={databaseSchema?.dataProducts ?? []}
-                hasPermission={false}
-              />
-              <TagsContainerV2
-                displayType={DisplayType.READ_MORE}
-                entityFqn={decodedDatabaseSchemaFQN}
-                entityType={EntityType.DATABASE_SCHEMA}
-                permission={editTagsPermission}
-                selectedTags={tags}
-                tagType={TagSource.Classification}
-                onSelectionChange={handleTagSelection}
-                onThreadLinkSelect={onThreadLinkSelect}
-              />
-              <TagsContainerV2
-                displayType={DisplayType.READ_MORE}
-                entityFqn={decodedDatabaseSchemaFQN}
-                entityType={EntityType.DATABASE_SCHEMA}
-                permission={editTagsPermission}
-                selectedTags={tags}
-                tagType={TagSource.Glossary}
-                onSelectionChange={handleTagSelection}
-                onThreadLinkSelect={onThreadLinkSelect}
-              />
-            </Space>
+            <EntityRightPanel
+              dataProducts={databaseSchema?.dataProducts ?? []}
+              domain={databaseSchema?.domain}
+              editTagPermission={editTagsPermission}
+              entityFQN={decodedDatabaseSchemaFQN}
+              entityType={EntityType.DATABASE_SCHEMA}
+              selectedTags={tags}
+              onTagSelectionChange={handleTagSelection}
+              onThreadLinkSelect={onThreadLinkSelect}
+            />
           </Col>
         </Row>
       ),
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.tsx
index 6c5b071c5b11..2d5132f03836 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Col, Row, Space, Tabs } from 'antd';
+import { Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
 import { isEqual } from 'lodash';
@@ -30,8 +30,8 @@ import DescriptionV1 from '../../components/common/EntityDescription/Description
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import QueryViewer from '../../components/common/QueryViewer/QueryViewer.component';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
 import EntityLineageComponent from '../../components/Entity/EntityLineage/EntityLineage.component';
+import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
 import Loader from '../../components/Loader/Loader';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
@@ -44,8 +44,6 @@ import SampleDataWithMessages from '../../components/SampleDataWithMessages/Samp
 import { SourceType } from '../../components/SearchedData/SearchedData.interface';
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import { getVersionPath } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
@@ -55,7 +53,6 @@ import {
 } from '../../generated/api/feed/createThread';
 import { Tag } from '../../generated/entity/classification/tag';
 import { SearchIndex, TagLabel } from '../../generated/entity/data/searchIndex';
-import { TagSource } from '../../generated/type/tagLabel';
 import { postThread } from '../../rest/feedsAPI';
 import {
   addFollower,
@@ -393,34 +390,16 @@ function SearchIndexDetailsPage() {
           className="entity-tag-right-panel-container"
           data-testid="entity-right-panel"
           flex="320px">
-          <Space className="w-full" direction="vertical" size="large">
-            <DataProductsContainer
-              activeDomain={searchIndexDetails?.domain}
-              dataProducts={searchIndexDetails?.dataProducts ?? []}
-              hasPermission={false}
-            />
-            <TagsContainerV2
-              displayType={DisplayType.READ_MORE}
-              entityFqn={decodedSearchIndexFQN}
-              entityType={EntityType.SEARCH_INDEX}
-              permission={editTagsPermission}
-              selectedTags={searchIndexTags}
-              tagType={TagSource.Classification}
-              onSelectionChange={handleTagSelection}
-              onThreadLinkSelect={onThreadLinkSelect}
-            />
-
-            <TagsContainerV2
-              displayType={DisplayType.READ_MORE}
-              entityFqn={decodedSearchIndexFQN}
-              entityType={EntityType.SEARCH_INDEX}
-              permission={editTagsPermission}
-              selectedTags={searchIndexTags}
-              tagType={TagSource.Glossary}
-              onSelectionChange={handleTagSelection}
-              onThreadLinkSelect={onThreadLinkSelect}
-            />
-          </Space>
+          <EntityRightPanel
+            dataProducts={searchIndexDetails?.dataProducts ?? []}
+            domain={searchIndexDetails?.domain}
+            editTagPermission={editTagsPermission}
+            entityFQN={decodedSearchIndexFQN}
+            entityType={EntityType.SEARCH_INDEX}
+            selectedTags={searchIndexTags}
+            onTagSelectionChange={handleTagSelection}
+            onThreadLinkSelect={onThreadLinkSelect}
+          />
         </Col>
       </Row>
     ),
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
index e72496802433..31461e526e16 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
@@ -22,16 +22,13 @@ import DescriptionV1 from '../../components/common/EntityDescription/Description
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
 import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
+import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
 import Loader from '../../components/Loader/Loader';
 import { OperationPermission } from '../../components/PermissionProvider/PermissionProvider.interface';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import { PAGE_SIZE } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { DatabaseService } from '../../generated/entity/services/databaseService';
 import { Paging } from '../../generated/type/paging';
-import { TagSource } from '../../generated/type/tagLabel';
 import { ServicesType } from '../../interface/service.interface';
 import { getServiceMainTabColumns } from '../../utils/ServiceMainTabContentUtils';
 import { getEntityTypeFromServiceCategory } from '../../utils/ServiceUtils';
@@ -218,38 +215,17 @@ function ServiceMainTabContent({
         className="entity-tag-right-panel-container"
         data-testid="entity-right-panel"
         flex="320px">
-        <Space className="w-full" direction="vertical" size="large">
-          {entityType !== EntityType.METADATA_SERVICE && (
-            <DataProductsContainer
-              activeDomain={(serviceDetails as DatabaseService)?.domain}
-              dataProducts={
-                (serviceDetails as DatabaseService)?.dataProducts ?? []
-              }
-              hasPermission={false}
-            />
-          )}
-
-          <TagsContainerV2
-            displayType={DisplayType.READ_MORE}
-            entityFqn={serviceFQN}
-            entityType={entityType}
-            permission={editTagsPermission}
-            selectedTags={tags}
-            showTaskHandler={false}
-            tagType={TagSource.Classification}
-            onSelectionChange={handleTagSelection}
-          />
-          <TagsContainerV2
-            displayType={DisplayType.READ_MORE}
-            entityFqn={serviceFQN}
-            entityType={entityType}
-            permission={editTagsPermission}
-            selectedTags={tags}
-            showTaskHandler={false}
-            tagType={TagSource.Glossary}
-            onSelectionChange={handleTagSelection}
-          />
-        </Space>
+        <EntityRightPanel
+          dataProducts={(serviceDetails as DatabaseService)?.dataProducts ?? []}
+          domain={(serviceDetails as DatabaseService)?.domain}
+          editTagPermission={editTagsPermission}
+          entityFQN={serviceFQN}
+          entityType={entityType}
+          selectedTags={tags}
+          showDataProductContainer={entityType !== EntityType.METADATA_SERVICE}
+          showTaskHandler={false}
+          onTagSelectionChange={handleTagSelection}
+        />
       </Col>
     </Row>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.tsx
index 4788d17e4a23..23b00f2b6011 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.tsx
@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Card, Col, Row, Space, Tabs } from 'antd';
+import { Card, Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
 import { EntityTags } from 'Models';
@@ -26,8 +26,8 @@ import { CustomPropertyTable } from '../../components/common/CustomPropertyTable
 import DescriptionV1 from '../../components/common/EntityDescription/DescriptionV1';
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
 import EntityLineageComponent from '../../components/Entity/EntityLineage/EntityLineage.component';
+import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
 import Loader from '../../components/Loader/Loader';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
@@ -40,8 +40,6 @@ import SchemaEditor from '../../components/SchemaEditor/SchemaEditor';
 import { SourceType } from '../../components/SearchedData/SearchedData.interface';
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import {
   getStoredProcedureDetailPath,
   getVersionPath,
@@ -58,7 +56,7 @@ import {
   StoredProcedure,
   StoredProcedureCodeObject,
 } from '../../generated/entity/data/storedProcedure';
-import { TagLabel, TagSource } from '../../generated/type/tagLabel';
+import { TagLabel } from '../../generated/type/tagLabel';
 import { postThread } from '../../rest/feedsAPI';
 import {
   addStoredProceduresFollower,
@@ -553,34 +551,16 @@ const StoredProcedurePage = () => {
               className="entity-tag-right-panel-container"
               data-testid="entity-right-panel"
               flex="320px">
-              <Space className="w-full" direction="vertical" size="large">
-                <DataProductsContainer
-                  activeDomain={storedProcedure?.domain}
-                  dataProducts={storedProcedure?.dataProducts ?? []}
-                  hasPermission={false}
-                />
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedStoredProcedureFQN}
-                  entityType={EntityType.STORED_PROCEDURE}
-                  permission={editTagsPermission}
-                  selectedTags={tags}
-                  tagType={TagSource.Classification}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-
-                <TagsContainerV2
-                  displayType={DisplayType.READ_MORE}
-                  entityFqn={decodedStoredProcedureFQN}
-                  entityType={EntityType.STORED_PROCEDURE}
-                  permission={editTagsPermission}
-                  selectedTags={tags}
-                  tagType={TagSource.Glossary}
-                  onSelectionChange={handleTagSelection}
-                  onThreadLinkSelect={onThreadLinkSelect}
-                />
-              </Space>
+              <EntityRightPanel
+                dataProducts={storedProcedure?.dataProducts ?? []}
+                domain={storedProcedure?.domain}
+                editTagPermission={editTagsPermission}
+                entityFQN={decodedStoredProcedureFQN}
+                entityType={EntityType.STORED_PROCEDURE}
+                selectedTags={tags}
+                onTagSelectionChange={handleTagSelection}
+                onThreadLinkSelect={onThreadLinkSelect}
+              />
             </Col>
           </Row>
         ),
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 2d7691c20986..6c3d54a5f5db 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
@@ -29,8 +29,8 @@ import DescriptionV1 from '../../components/common/EntityDescription/Description
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import QueryViewer from '../../components/common/QueryViewer/QueryViewer.component';
 import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
-import DataProductsContainer from '../../components/DataProductsContainer/DataProductsContainer.component';
 import EntityLineageComponent from '../../components/Entity/EntityLineage/EntityLineage.component';
+import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
 import Loader from '../../components/Loader/Loader';
 import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
@@ -46,8 +46,6 @@ import TableProfilerV1 from '../../components/TableProfiler/TableProfilerV1';
 import TableQueries from '../../components/TableQueries/TableQueries';
 import { QueryVote } from '../../components/TableQueries/TableQueries.interface';
 import TabsLabel from '../../components/TabsLabel/TabsLabel.component';
-import TagsContainerV2 from '../../components/Tag/TagsContainerV2/TagsContainerV2';
-import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interface';
 import { useTourProvider } from '../../components/TourProvider/TourProvider';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTableTabPath, getVersionPath } from '../../constants/constants';
@@ -63,7 +61,7 @@ import { CreateThread } from '../../generated/api/feed/createThread';
 import { Tag } from '../../generated/entity/classification/tag';
 import { JoinedWith, Table } from '../../generated/entity/data/table';
 import { ThreadType } from '../../generated/entity/feed/thread';
-import { TagLabel, TagSource } from '../../generated/type/tagLabel';
+import { TagLabel } from '../../generated/type/tagLabel';
 import { postThread } from '../../rest/feedsAPI';
 import { getQueriesList } from '../../rest/queryAPI';
 import {
@@ -517,43 +515,33 @@ const TableDetailsPageV1 = () => {
           className="entity-tag-right-panel-container"
           data-testid="entity-right-panel"
           flex="320px">
-          {!isEmpty(joinedTables) ? (
-            <FrequentlyJoinedTables joinedTables={joinedTables} />
-          ) : null}
-
-          <Space className="w-full" direction="vertical" size="large">
-            <DataProductsContainer
-              activeDomain={tableDetails?.domain}
-              dataProducts={tableDetails?.dataProducts ?? []}
-              hasPermission={false}
-            />
-
-            <TagsContainerV2
-              displayType={DisplayType.READ_MORE}
-              entityFqn={decodedTableFQN}
-              entityType={EntityType.TABLE}
-              permission={editTagsPermission}
-              selectedTags={tableTags}
-              tagType={TagSource.Classification}
-              onSelectionChange={handleTagSelection}
-              onThreadLinkSelect={onThreadLinkSelect}
-            />
-
-            <TagsContainerV2
-              displayType={DisplayType.READ_MORE}
-              entityFqn={decodedTableFQN}
-              entityType={EntityType.TABLE}
-              permission={editTagsPermission}
-              selectedTags={tableTags}
-              tagType={TagSource.Glossary}
-              onSelectionChange={handleTagSelection}
-              onThreadLinkSelect={onThreadLinkSelect}
-            />
-            <TableConstraints constraints={tableDetails?.tableConstraints} />
-            {tableDetails?.tablePartition ? (
-              <PartitionedKeys tablePartition={tableDetails.tablePartition} />
-            ) : null}
-          </Space>
+          <EntityRightPanel
+            afterSlot={
+              <Space className="w-full" direction="vertical" size="large">
+                <TableConstraints
+                  constraints={tableDetails?.tableConstraints}
+                />
+                {tableDetails?.tablePartition ? (
+                  <PartitionedKeys
+                    tablePartition={tableDetails.tablePartition}
+                  />
+                ) : null}
+              </Space>
+            }
+            beforeSlot={
+              !isEmpty(joinedTables) ? (
+                <FrequentlyJoinedTables joinedTables={joinedTables} />
+              ) : null
+            }
+            dataProducts={tableDetails?.dataProducts ?? []}
+            domain={tableDetails?.domain}
+            editTagPermission={editTagsPermission}
+            entityFQN={decodedTableFQN}
+            entityType={EntityType.TABLE}
+            selectedTags={tableTags}
+            onTagSelectionChange={handleTagSelection}
+            onThreadLinkSelect={onThreadLinkSelect}
+          />
         </Col>
       </Row>
     ),

From f5f3e91063fe0d061432fdac689f0583dd27c4db Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 24 Nov 2023 16:24:45 +0530
Subject: [PATCH 2/2] add unit test for right panel component

---
 .../EntityRightPanel.test.tsx                 | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.test.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.test.tsx
new file mode 100644
index 000000000000..458b850a9cc8
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.test.tsx
@@ -0,0 +1,105 @@
+/*
+ *  Copyright 2023 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { render, screen } from '@testing-library/react';
+import { EntityTags } from 'Models';
+import React from 'react';
+import { EntityType } from '../../../enums/entity.enum';
+import { EntityReference } from '../../../generated/entity/type';
+import EntityRightPanel from './EntityRightPanel';
+
+jest.mock('../../DataProductsContainer/DataProductsContainer.component', () => {
+  return jest.fn().mockImplementation(() => <div>DataProductsContainer</div>);
+});
+
+jest.mock('../../Tag/TagsContainerV2/TagsContainerV2', () => {
+  return jest.fn().mockImplementation(() => <div>TagsContainerV2</div>);
+});
+
+describe('EntityRightPanel component test', () => {
+  const mockDataProducts: EntityReference[] = [];
+  const mockSelectedTags: EntityTags[] = [];
+  const mockOnTagSelectionChange = jest.fn();
+  const mockOnThreadLinkSelect = jest.fn();
+
+  it('Component should render', () => {
+    render(
+      <EntityRightPanel
+        editTagPermission
+        dataProducts={mockDataProducts}
+        entityFQN="testEntityFQN"
+        entityType={EntityType.TABLE}
+        selectedTags={mockSelectedTags}
+        onTagSelectionChange={mockOnTagSelectionChange}
+        onThreadLinkSelect={mockOnThreadLinkSelect}
+      />
+    );
+
+    expect(screen.getByText('DataProductsContainer')).toBeInTheDocument();
+    expect(screen.getAllByText('TagsContainerV2')).toHaveLength(2);
+  });
+
+  it('Component should not render DataProductsContainer when showDataProductContainer is false', () => {
+    render(
+      <EntityRightPanel
+        editTagPermission
+        dataProducts={mockDataProducts}
+        entityFQN="testEntityFQN"
+        entityType={EntityType.TABLE}
+        selectedTags={mockSelectedTags}
+        showDataProductContainer={false}
+        onTagSelectionChange={mockOnTagSelectionChange}
+        onThreadLinkSelect={mockOnThreadLinkSelect}
+      />
+    );
+
+    expect(screen.queryByText('DataProductsContainer')).not.toBeInTheDocument();
+  });
+
+  it('Component should render before and after slot', () => {
+    render(
+      <EntityRightPanel
+        editTagPermission
+        afterSlot={<div>afterSlot</div>}
+        beforeSlot={<div>beforeSlot</div>}
+        dataProducts={mockDataProducts}
+        entityFQN="testEntityFQN"
+        entityType={EntityType.TABLE}
+        selectedTags={mockSelectedTags}
+        showDataProductContainer={false}
+        onTagSelectionChange={mockOnTagSelectionChange}
+        onThreadLinkSelect={mockOnThreadLinkSelect}
+      />
+    );
+
+    expect(screen.getByText('beforeSlot')).toBeInTheDocument();
+    expect(screen.getByText('afterSlot')).toBeInTheDocument();
+  });
+
+  it('Component should not render before and after slot when not provided', () => {
+    render(
+      <EntityRightPanel
+        editTagPermission
+        dataProducts={mockDataProducts}
+        entityFQN="testEntityFQN"
+        entityType={EntityType.TABLE}
+        selectedTags={mockSelectedTags}
+        showDataProductContainer={false}
+        onTagSelectionChange={mockOnTagSelectionChange}
+        onThreadLinkSelect={mockOnThreadLinkSelect}
+      />
+    );
+
+    expect(screen.queryByText('beforeSlot')).not.toBeInTheDocument();
+    expect(screen.queryByText('afterSlot')).not.toBeInTheDocument();
+  });
+});