chore(ui): add entity right panel component

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,16 +27,13 @@ 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';
 import { ColumnFilter } from '../../components/Table/ColumnFilter/ColumnFilter.component';
 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>
         ),

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>
     );

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();
+  });
+});

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;