feat(react): add custom properties tab on dashboard profile page (#2439) (#2469)

datahub-web-react/src/app/entity/dashboard/profile/DashboardProfile.tsx

@@ -12,14 +12,15 @@ import DashboardHeader from './DashboardHeader';
 import DashboardCharts from './DashboardCharts';
 import { Message } from '../../../shared/Message';
 import TagGroup from '../../../shared/tags/TagGroup';
+import { Properties as PropertiesView } from '../../shared/Properties';
 
 export enum TabType {
     Ownership = 'Ownership',
     Charts = 'Charts',
+    Properties = 'Properties',
 }
 
-const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Charts];
-
+const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Charts, TabType.Properties];
 /**
  * Responsible for reading & writing users.
  */
@@ -69,6 +70,11 @@ export default function DashboardProfile({ urn }: { urn: string }) {
                     />
                 ),
             },
+            {
+                name: TabType.Properties,
+                path: TabType.Properties.toLowerCase(),
+                content: <PropertiesView properties={info?.customProperties || []} />,
+            },
             {
                 name: TabType.Charts,
                 path: TabType.Charts.toLowerCase(),

datahub-web-react/src/graphql/fragments.graphql

@@ -192,6 +192,10 @@ fragment dashboardFields on Dashboard {
                 ...ownershipFields
             }
         }
+        customProperties {
+            key
+            value
+        }
         externalUrl
         access
         lastRefreshed

metadata-ingestion/examples/mce_files/bootstrap_mce.json

@@ -1181,6 +1181,10 @@
                         "com.linkedin.pegasus2avro.dashboard.DashboardInfo": {
                             "title": "Baz Dashboard",
                             "description": "Baz Dashboard",
+                            "customProperties": {
+                                "prop1": "fakeprop",
+                                "prop2": "pikachu"
+                            },
                             "charts": [
                                 "urn:li:chart:(looker,baz1)",
                                 "urn:li:chart:(looker,baz2)"