fix(ui) Fix changing color and icon for domains in UI (#12792)

Author: chriscollins3456

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/domain/DomainType.java

@@ -40,7 +40,8 @@ public class DomainType
           Constants.OWNERSHIP_ASPECT_NAME,
           Constants.INSTITUTIONAL_MEMORY_ASPECT_NAME,
           Constants.STRUCTURED_PROPERTIES_ASPECT_NAME,
-          Constants.FORMS_ASPECT_NAME);
+          Constants.FORMS_ASPECT_NAME,
+          Constants.DISPLAY_PROPERTIES_ASPECT_NAME);
   private final EntityClient _entityClient;
 
   public DomainType(final EntityClient entityClient) {

datahub-web-react/src/app/domain/DomainsList.tsx

@@ -196,6 +196,7 @@ export const DomainsList = () => {
                                     },
                                     ownership: null,
                                     entities: null,
+                                    displayProperties: null,
                                 },
                                 pageSize,
                             );

datahub-web-react/src/app/domain/utils.ts

@@ -72,6 +72,7 @@ export const updateListDomainsCache = (
             children: null,
             dataProducts: null,
             parentDomains: null,
+            displayProperties: null,
         },
         1000,
         parentDomain,

datahub-web-react/src/app/entityV2/shared/containers/profile/header/IconPicker/IconColorPicker.tsx

@@ -1,5 +1,4 @@
 import { Input, Modal } from 'antd';
-import { debounce } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -53,13 +52,6 @@ const IconColorPicker: React.FC<IconColorPickerProps> = ({
     const [stagedColor, setStagedColor] = React.useState<string>(color || '#000000');
     const [stagedIcon, setStagedIcon] = React.useState<string>(icon || 'account_circle');
 
-    // a debounced version of updateDisplayProperties that takes in the same arguments
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedUpdateDisplayProperties = React.useCallback(
-        debounce((...args) => updateDisplayProperties(...args).then(() => setTimeout(() => refetch(), 1000)), 500),
-        [],
-    );
-
     return (
         <Modal
             open={open}
@@ -77,7 +69,7 @@ const IconColorPicker: React.FC<IconColorPickerProps> = ({
                             },
                         },
                     },
-                });
+                }).then(() => refetch());
                 onChangeColor?.(stagedColor);
                 onChangeIcon?.(stagedIcon);
                 onClose();
@@ -93,44 +85,10 @@ const IconColorPicker: React.FC<IconColorPickerProps> = ({
                     marginBottom: 30,
                     marginTop: 15,
                 }}
-                onChange={(e) => {
-                    setStagedColor(e.target.value);
-                    debouncedUpdateDisplayProperties?.({
-                        variables: {
-                            urn,
-                            input: {
-                                colorHex: e.target.value,
-                                icon: {
-                                    iconLibrary: IconLibrary.Material,
-                                    name: stagedIcon,
-                                    style: 'Outlined',
-                                },
-                            },
-                        },
-                    });
-                }}
+                onChange={(e) => setStagedColor(e.target.value)}
             />
             <Title>Choose an icon for {name || 'Domain'}</Title>
-            <ChatIconPicker
-                color={stagedColor}
-                onIconPick={(i) => {
-                    console.log('picking icon', i);
-                    debouncedUpdateDisplayProperties?.({
-                        variables: {
-                            urn,
-                            input: {
-                                colorHex: stagedColor,
-                                icon: {
-                                    iconLibrary: IconLibrary.Material,
-                                    name: capitalize(snakeToCamel(i)),
-                                    style: 'Outlined',
-                                },
-                            },
-                        },
-                    });
-                    setStagedIcon(i);
-                }}
-            />
+            <ChatIconPicker color={stagedColor} onIconPick={(i) => setStagedIcon(i)} />
         </Modal>
     );
 };

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

@@ -40,6 +40,9 @@ query getDomain($urn: String!) {
         forms {
             ...formsFields
         }
+        displayProperties {
+            ...displayPropertiesFields
+        }
         ...domainEntitiesFields
         ...notes
     }
@@ -64,6 +67,9 @@ query listDomains($input: ListDomainsInput!) {
             ownership {
                 ...ownershipFields
             }
+            displayProperties {
+                ...displayPropertiesFields
+            }
             ...domainEntitiesFields
         }
     }

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

@@ -229,6 +229,9 @@ fragment parentNodesFields on ParentNodesResult {
         properties {
             name
         }
+        displayProperties {
+            ...displayPropertiesFields
+        }
     }
 }
 
@@ -238,6 +241,9 @@ fragment parentDomainsFields on ParentDomainsResult {
         urn
         type
         ... on Domain {
+            displayProperties {
+                ...displayPropertiesFields
+            }
             properties {
                 name
                 description
@@ -1259,6 +1265,9 @@ fragment entityDomain on DomainAssociation {
             ...parentDomainsFields
         }
         ...domainEntitiesFields
+        displayProperties {
+            ...displayPropertiesFields
+        }
     }
     associatedUrn
 }

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

@@ -54,6 +54,9 @@ query getGlossaryNode($urn: String!) {
                 }
             }
         }
+        displayProperties {
+            ...displayPropertiesFields
+        }
         ...notes
     }
 }

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

@@ -341,6 +341,9 @@ fragment entityPreview on Entity {
         parentDomains {
             ...parentDomainsFields
         }
+        displayProperties {
+            ...displayPropertiesFields
+        }
         ...domainEntitiesFields
     }
     ... on Container {

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

@@ -845,6 +845,9 @@ fragment searchResultsWithoutSchemaField on Entity {
         parentDomains {
             ...parentDomainsFields
         }
+        displayProperties {
+            ...displayPropertiesFields
+        }
         ...domainEntitiesFields
         structuredProperties {
             properties {

metadata-models/src/main/resources/entity-registry.yml

@@ -236,6 +236,7 @@ entities:
       - structuredProperties
       - forms
       - testResults
+      - displayProperties
   - name: container
     doc: A container of related data assets.
     category: core
@@ -295,6 +296,7 @@ entities:
       - structuredProperties
       - forms
       - testResults
+      - displayProperties
   - name: dataHubIngestionSource
     category: internal
     keyAspect: dataHubIngestionSourceKey