feat(ui) Enable editing structured props on fields (#11042)

datahub-project · Aug 12, 2024 · 796483b · 796483b
1 parent 3f4b8ea
commit 796483b
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 33 deletions.
diff --git a/...rc/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldProperties.tsx b/...rc/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldProperties.tsx
@@ -4,6 +4,8 @@ import { SchemaField, StdDataType } from '../../../../../../../../types.generate
 import { SectionHeader, StyledDivider } from './components';
 import { mapStructuredPropertyValues } from '../../../../Properties/useStructuredProperties';
 import StructuredPropertyValue from '../../../../Properties/StructuredPropertyValue';
+import { EditColumn } from '../../../../Properties/Edit/EditColumn';
+import { useGetEntityWithSchema } from '../../useGetEntitySchema';
 
 const PropertyTitle = styled.div`
     font-size: 14px;
@@ -13,6 +15,8 @@ const PropertyTitle = styled.div`
 
 const PropertyWrapper = styled.div`
     margin-bottom: 12px;
+    display: flex;
+    justify-content: space-between;
 `;
 
 const PropertiesWrapper = styled.div`
@@ -29,6 +33,7 @@ interface Props {
 
 export default function FieldProperties({ expandedField }: Props) {
     const { schemaFieldEntity } = expandedField;
+    const { refetch } = useGetEntityWithSchema(true);
 
     if (!schemaFieldEntity?.structuredProperties?.properties?.length) return null;
 
@@ -43,23 +48,33 @@ export default function FieldProperties({ expandedField }: Props) {
                     const hasMultipleValues = valuesData.length > 1;
 
                     return (
-                        <PropertyWrapper>
-                            <PropertyTitle>{structuredProp.structuredProperty.definition.displayName}</PropertyTitle>
-                            {hasMultipleValues ? (
-                                <StyledList>
-                                    {valuesData.map((value) => (
-                                        <li>
+                        <PropertyWrapper key={structuredProp.structuredProperty.urn}>
+                            <div>
+                                <PropertyTitle>
+                                    {structuredProp.structuredProperty.definition.displayName}
+                                </PropertyTitle>
+                                {hasMultipleValues ? (
+                                    <StyledList>
+                                        {valuesData.map((value) => (
+                                            <li>
+                                                <StructuredPropertyValue value={value} isRichText={isRichText} />
+                                            </li>
+                                        ))}
+                                    </StyledList>
+                                ) : (
+                                    <>
+                                        {valuesData.map((value) => (
                                             <StructuredPropertyValue value={value} isRichText={isRichText} />
-                                        </li>
-                                    ))}
-                                </StyledList>
-                            ) : (
-                                <>
-                                    {valuesData.map((value) => (
-                                        <StructuredPropertyValue value={value} isRichText={isRichText} />
-                                    ))}
-                                </>
-                            )}
+                                        ))}
+                                    </>
+                                )}
+                            </div>
+                            <EditColumn
+                                structuredProperty={structuredProp.structuredProperty}
+                                associatedUrn={schemaFieldEntity.urn}
+                                values={valuesData.map((v) => v.value) || []}
+                                refetch={refetch}
+                            />
                         </PropertyWrapper>
                     );
                 })}

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Properties/Edit/EditColumn.tsx b/datahub-web-react/src/app/entity/shared/tabs/Properties/Edit/EditColumn.tsx
@@ -1,16 +1,19 @@
 import { Button } from 'antd';
 import React, { useState } from 'react';
-import { PropertyRow } from '../types';
 import EditStructuredPropertyModal from './EditStructuredPropertyModal';
+import { StructuredPropertyEntity } from '../../../../../../types.generated';
 
 interface Props {
-    propertyRow: PropertyRow;
+    structuredProperty?: StructuredPropertyEntity;
+    associatedUrn?: string;
+    values?: (string | number | null)[];
+    refetch?: () => void;
 }
 
-export function EditColumn({ propertyRow }: Props) {
+export function EditColumn({ structuredProperty, associatedUrn, values, refetch }: Props) {
     const [isEditModalVisible, setIsEditModalVisible] = useState(false);
 
-    if (!propertyRow.structuredProperty || propertyRow.structuredProperty?.definition.immutable) {
+    if (!structuredProperty || structuredProperty?.definition.immutable) {
         return null;
     }
 
@@ -21,9 +24,11 @@ export function EditColumn({ propertyRow }: Props) {
             </Button>
             <EditStructuredPropertyModal
                 isOpen={isEditModalVisible}
-                propertyRow={propertyRow}
-                structuredProperty={propertyRow.structuredProperty}
+                structuredProperty={structuredProperty}
+                associatedUrn={associatedUrn}
+                values={values}
                 closeModal={() => setIsEditModalVisible(false)}
+                refetch={refetch}
             />
         </>
     );

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Properties/Edit/EditStructuredPropertyModal.tsx b/datahub-web-react/src/app/entity/shared/tabs/Properties/Edit/EditStructuredPropertyModal.tsx
@@ -1,7 +1,6 @@
 import { Button, Modal, message } from 'antd';
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import { PropertyRow } from '../types';
 import StructuredPropertyInput from '../../../components/styled/StructuredProperty/StructuredPropertyInput';
 import { PropertyValueInput, StructuredPropertyEntity } from '../../../../../../types.generated';
 import { useUpsertStructuredPropertiesMutation } from '../../../../../../graphql/structuredProperties.generated';
@@ -17,19 +16,33 @@ const Description = styled.div`
 
 interface Props {
     isOpen: boolean;
-    propertyRow: PropertyRow;
     structuredProperty: StructuredPropertyEntity;
+    associatedUrn?: string;
+    values?: (string | number | null)[];
     closeModal: () => void;
+    refetch?: () => void;
 }
 
-export default function EditStructuredPropertyModal({ isOpen, propertyRow, structuredProperty, closeModal }: Props) {
-    const { refetch } = useEntityContext();
-    const urn = useMutationUrn();
-    const initialValues = propertyRow.values?.map((v) => v.value) || [];
-    const { selectedValues, selectSingleValue, toggleSelectedValue, updateSelectedValues } =
+export default function EditStructuredPropertyModal({
+    isOpen,
+    structuredProperty,
+    associatedUrn,
+    values,
+    closeModal,
+    refetch,
+}: Props) {
+    const { refetch: entityRefetch } = useEntityContext();
+    const mutationUrn = useMutationUrn();
+    const urn = associatedUrn || mutationUrn;
+    const initialValues = useMemo(() => values || [], [values]);
+    const { selectedValues, selectSingleValue, toggleSelectedValue, updateSelectedValues, setSelectedValues } =
         useEditStructuredProperty(initialValues);
     const [upsertStructuredProperties] = useUpsertStructuredPropertiesMutation();
 
+    useEffect(() => {
+        setSelectedValues(initialValues);
+    }, [isOpen, initialValues, setSelectedValues]);
+
     function upsertProperties() {
         message.loading('Updating...');
         upsertStructuredProperties({
@@ -51,7 +64,11 @@ export default function EditStructuredPropertyModal({ isOpen, propertyRow, struc
             },
         })
             .then(() => {
-                refetch();
+                if (refetch) {
+                    refetch();
+                } else {
+                    entityRefetch();
+                }
                 message.destroy();
                 message.success('Successfully updated structured property!');
                 closeModal();
@@ -67,7 +84,7 @@ export default function EditStructuredPropertyModal({ isOpen, propertyRow, struc
 
     return (
         <Modal
-            title={propertyRow.displayName}
+            title={structuredProperty.definition.displayName}
             onCancel={closeModal}
             open={isOpen}
             width={650}

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Properties/PropertiesTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Properties/PropertiesTab.tsx
@@ -41,7 +41,12 @@ export const PropertiesTab = () => {
         propertyTableColumns.push({
             title: '',
             width: '10%',
-            render: (propertyRow: PropertyRow) => <EditColumn propertyRow={propertyRow} />,
+            render: (propertyRow: PropertyRow) => (
+                <EditColumn
+                    structuredProperty={propertyRow.structuredProperty}
+                    values={propertyRow.values?.map((v) => v.value) || []}
+                />
+            ),
         } as any);
     }