diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldProperties.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldProperties.tsx index 8c88cdce95f06..689a191f469f5 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldProperties.tsx +++ b/datahub-web-react/src/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 ( - - {structuredProp.structuredProperty.definition.displayName} - {hasMultipleValues ? ( - - {valuesData.map((value) => ( -
  • + +
    + + {structuredProp.structuredProperty.definition.displayName} + + {hasMultipleValues ? ( + + {valuesData.map((value) => ( +
  • + +
  • + ))} +
    + ) : ( + <> + {valuesData.map((value) => ( - - ))} - - ) : ( - <> - {valuesData.map((value) => ( - - ))} - - )} + ))} + + )} + + v.value) || []} + refetch={refetch} + />
    ); })} 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 index ac50df6a5381e..6a0599c0cdb33 100644 --- 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) { 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 index 73a280031ebd0..c8def8bef5e19 100644 --- 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 ( { propertyTableColumns.push({ title: '', width: '10%', - render: (propertyRow: PropertyRow) => , + render: (propertyRow: PropertyRow) => ( + v.value) || []} + /> + ), } as any); }