(fix #13822):Support for Custom Properties for various entities

openmetadata-ui/src/main/resources/ui/cypress/common/Entities/EntityClass.ts

@@ -26,6 +26,7 @@ import {
   deleteCustomPropertyForEntity,
   generateCustomProperty,
   setValueForProperty,
+  validateValueForProperty,
 } from '../Utils/CustomProperty';
 import { addDomainToEntity, removeDomainFromEntity } from '../Utils/Domain';
 import {
@@ -483,9 +484,12 @@ class EntityClass {
 
   setCustomProperty(propertydetails: CustomProperty, value: string) {
     setValueForProperty(propertydetails.name, value);
+    validateValueForProperty(propertydetails.name, value);
   }
+
   updateCustomProperty(propertydetails: CustomProperty, value: string) {
     setValueForProperty(propertydetails.name, value);
+    validateValueForProperty(propertydetails.name, value);
   }
 }
 

openmetadata-ui/src/main/resources/ui/cypress/common/Utils/CustomProperty.ts

@@ -145,3 +145,16 @@ export const setValueForProperty = (propertyName, value: string) => {
     value.replace(/\*|_/gi, '')
   );
 };
+export const validateValueForProperty = (propertyName, value: string) => {
+  cy.get('.ant-tabs-tab').first().click();
+  cy.get(
+    '[data-testid="entity-right-panel"] [data-testid="custom-properties-table"]',
+    {
+      timeout: 10000,
+    }
+  ).scrollIntoView();
+  cy.get(`[data-row-key="${propertyName}"]`).should(
+    'contain',
+    value.replace(/\*|_/gi, '')
+  );
+};

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

@@ -621,13 +621,15 @@ const DashboardDetails = ({
               data-testid="entity-right-panel"
               flex="320px">
               <EntityRightPanel
+                customProperties={dashboardDetails}
                 dataProducts={dashboardDetails?.dataProducts ?? []}
                 domain={dashboardDetails?.domain}
                 editTagPermission={editTagsPermission}
                 entityFQN={decodedDashboardFQN}
                 entityId={dashboardDetails.id}
                 entityType={EntityType.DASHBOARD}
                 selectedTags={dashboardTags}
+                viewAllPermission={viewAllPermission}
                 onTagSelectionChange={handleTagSelection}
                 onThreadLinkSelect={onThreadLinkSelect}
               />
@@ -676,13 +678,16 @@ const DashboardDetails = ({
           />
         ),
         key: EntityTabs.CUSTOM_PROPERTIES,
-        children: (
-          <CustomPropertyTable
-            entityType={EntityType.DASHBOARD}
-            handleExtensionUpdate={onExtensionUpdate}
-            hasEditAccess={editCustomAttributePermission}
-            hasPermission={viewAllPermission}
-          />
+        children: dashboardDetails && (
+          <div className="m-sm">
+            <CustomPropertyTable<EntityType.DASHBOARD>
+              entityDetails={dashboardDetails}
+              entityType={EntityType.DASHBOARD}
+              handleExtensionUpdate={onExtensionUpdate}
+              hasEditAccess={editCustomAttributePermission}
+              hasPermission={viewAllPermission}
+            />
+          </div>
         ),
       },
     ],

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.test.tsx

@@ -14,6 +14,7 @@ import { render, screen } from '@testing-library/react';
 import { EntityTags } from 'Models';
 import React from 'react';
 import { EntityType } from '../../../enums/entity.enum';
+import { Table } from '../../../generated/entity/data/table';
 import { EntityReference } from '../../../generated/entity/type';
 import entityRightPanelClassBase from '../../../utils/EntityRightPanelClassBase';
 import EntityRightPanel from './EntityRightPanel';
@@ -26,18 +27,45 @@ jest.mock('../../Tag/TagsContainerV2/TagsContainerV2', () => {
   return jest.fn().mockImplementation(() => <div>TagsContainerV2</div>);
 });
 
+jest.mock('../../common/CustomPropertyTable/CustomPropertyTable', () => ({
+  CustomPropertyTable: jest
+    .fn()
+    .mockImplementation(() => (
+      <div data-testid="CustomPropertyTable">CustomPropertyTable</div>
+    )),
+}));
+
 jest.mock('../../../utils/EntityRightPanelClassBase');
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn().mockImplementation(() => ({
+    fqn: 'fqn',
+    tab: 'tab',
+    version: 'version',
+  })),
+  Link: jest
+    .fn()
+    .mockImplementation(({ children, ...rest }) => <a {...rest}>{children}</a>),
+}));
+
 describe('EntityRightPanel component test', () => {
   const mockDataProducts: EntityReference[] = [];
   const mockSelectedTags: EntityTags[] = [];
   const mockOnTagSelectionChange = jest.fn();
   const mockOnThreadLinkSelect = jest.fn();
+  const mockCustomProperties = {
+    extension: {
+      test1: 'test',
+      test2: '',
+    },
+  } as Table;
 
   it('Component should render', () => {
     render(
       <EntityRightPanel
         editTagPermission
+        customProperties={mockCustomProperties}
         dataProducts={mockDataProducts}
         entityFQN="testEntityFQN"
         entityId="testEntityId"
@@ -56,6 +84,7 @@ describe('EntityRightPanel component test', () => {
     render(
       <EntityRightPanel
         editTagPermission
+        customProperties={mockCustomProperties}
         dataProducts={mockDataProducts}
         entityFQN="testEntityFQN"
         entityId="testEntityId"
@@ -76,6 +105,7 @@ describe('EntityRightPanel component test', () => {
         editTagPermission
         afterSlot={<div>afterSlot</div>}
         beforeSlot={<div>beforeSlot</div>}
+        customProperties={mockCustomProperties}
         dataProducts={mockDataProducts}
         entityFQN="testEntityFQN"
         entityId="testEntityId"
@@ -95,6 +125,7 @@ describe('EntityRightPanel component test', () => {
     render(
       <EntityRightPanel
         editTagPermission
+        customProperties={mockCustomProperties}
         dataProducts={mockDataProducts}
         entityFQN="testEntityFQN"
         entityId="testEntityId"
@@ -120,6 +151,7 @@ describe('EntityRightPanel component test', () => {
     render(
       <EntityRightPanel
         editTagPermission
+        customProperties={mockCustomProperties}
         dataProducts={mockDataProducts}
         entityFQN="testEntityFQN"
         entityId="testEntityId"
@@ -143,6 +175,7 @@ describe('EntityRightPanel component test', () => {
     render(
       <EntityRightPanel
         editTagPermission
+        customProperties={mockCustomProperties}
         dataProducts={mockDataProducts}
         entityFQN="testEntityFQN"
         entityId="testEntityId"
@@ -158,4 +191,49 @@ describe('EntityRightPanel component test', () => {
 
     expect(screen.queryByText('KnowledgeArticles')).not.toBeInTheDocument();
   });
+
+  it('should render CustomPropertyTable when mockCustomProperties is not null', () => {
+    render(
+      <EntityRightPanel
+        editTagPermission
+        viewAllPermission
+        customProperties={mockCustomProperties}
+        dataProducts={mockDataProducts}
+        entityFQN="testEntityFQN"
+        entityId="testEntityId"
+        entityType={EntityType.TABLE}
+        selectedTags={mockSelectedTags}
+        showDataProductContainer={false}
+        onTagSelectionChange={mockOnTagSelectionChange}
+        onThreadLinkSelect={mockOnThreadLinkSelect}
+      />
+    );
+
+    expect(
+      screen.getByText('label.custom-property-plural')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('message.no-access-placeholder')
+    ).not.toBeInTheDocument();
+  });
+
+  it('should not render CustomPropertyTable when no custom properties', () => {
+    render(
+      <EntityRightPanel
+        editTagPermission
+        viewAllPermission
+        customProperties={{} as Table}
+        dataProducts={mockDataProducts}
+        entityFQN="testEntityFQN"
+        entityId="testEntityId"
+        entityType={EntityType.TABLE}
+        selectedTags={mockSelectedTags}
+        showDataProductContainer={false}
+        onTagSelectionChange={mockOnTagSelectionChange}
+        onThreadLinkSelect={mockOnThreadLinkSelect}
+      />
+    );
+
+    expect(screen.queryByText('CustomPropertyTable')).not.toBeInTheDocument();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx

@@ -10,19 +10,27 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Space } from 'antd';
+import { Space, Typography } from 'antd';
+import { t } from 'i18next';
 import { EntityTags } from 'Models';
-import React, { FC } from 'react';
-import { EntityType } from '../../../enums/entity.enum';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { EntityTabs, 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 { getEntityDetailLink } from '../../../utils/CommonUtils';
 import entityRightPanelClassBase from '../../../utils/EntityRightPanelClassBase';
+import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable';
+import type {
+  ExtentionEntities,
+  ExtentionEntitiesKeys,
+} from '../../common/CustomPropertyTable/CustomPropertyTable.interface';
 import DataProductsContainer from '../../DataProductsContainer/DataProductsContainer.component';
 import TagsContainerV2 from '../../Tag/TagsContainerV2/TagsContainerV2';
 import { DisplayType } from '../../Tag/TagsViewer/TagsViewer.interface';
 
-interface EntityRightPanelProps {
+interface EntityRightPanelProps<T extends ExtentionEntitiesKeys> {
   dataProducts: EntityReference[];
   editTagPermission: boolean;
   entityType: EntityType;
@@ -36,9 +44,11 @@ interface EntityRightPanelProps {
   domain?: EntityReference;
   onTagSelectionChange?: (selectedTags: EntityTags[]) => Promise<void>;
   onThreadLinkSelect?: (value: string, threadType?: ThreadType) => void;
+  viewAllPermission?: boolean;
+  customProperties?: ExtentionEntities[T];
 }
 
-const EntityRightPanel: FC<EntityRightPanelProps> = ({
+const EntityRightPanel = <T extends ExtentionEntitiesKeys>({
   domain,
   dataProducts,
   entityFQN,
@@ -52,7 +62,9 @@ const EntityRightPanel: FC<EntityRightPanelProps> = ({
   entityId,
   showTaskHandler = true,
   showDataProductContainer = true,
-}) => {
+  viewAllPermission,
+  customProperties,
+}: EntityRightPanelProps<T>) => {
   const KnowledgeArticles =
     entityRightPanelClassBase.getKnowLedgeArticlesWidget();
 
@@ -94,6 +106,30 @@ const EntityRightPanel: FC<EntityRightPanelProps> = ({
         {KnowledgeArticles && (
           <KnowledgeArticles entityId={entityId} entityType={entityType} />
         )}
+        {customProperties?.extension && (
+          <>
+            <div className="d-flex justify-between">
+              <Typography.Text className="right-panel-label">
+                {t('label.custom-property-plural')}
+              </Typography.Text>
+              <Link
+                to={getEntityDetailLink(
+                  entityType,
+                  entityFQN,
+                  EntityTabs.CUSTOM_PROPERTIES
+                )}>
+                {t('label.view-all')}
+              </Link>
+            </div>
+            <CustomPropertyTable
+              entityDetails={customProperties}
+              entityType={entityType as ExtentionEntitiesKeys}
+              hasEditAccess={false}
+              hasPermission={viewAllPermission ?? false}
+              maxDataCap={5}
+            />
+          </>
+        )}
       </Space>
       {afterSlot}
     </>