From 9e05c41d623d843a294bf89a653381c1e31d9e99 Mon Sep 17 00:00:00 2001 From: Brijesh Bhalala Date: Mon, 2 Jun 2025 11:33:28 +0530 Subject: [PATCH] ATLAS-5049: [React UI] Unable to add single value type attributes in Business Metadata --- dashboard/src/index.scss | 1 + dashboard/src/styles/administration.scss | 10 +-- dashboard/src/utils/CommonViewFunction.ts | 22 +++++++ .../BusinessMetadataAtrributeForm.tsx | 49 +++++++++++---- .../BusinessMetadata/BusinessMetadataForm.tsx | 62 ++++++++++++------- .../BusinessMetadata/EnumCreateUpdate.tsx | 9 ++- .../BusinessMetadataAtrribute.tsx | 9 ++- .../BusinessMetadataDetailsLayout.tsx | 29 ++++++--- 8 files changed, 138 insertions(+), 53 deletions(-) diff --git a/dashboard/src/index.scss b/dashboard/src/index.scss index 9c7cfd0a52..0bbae8f64a 100644 --- a/dashboard/src/index.scss +++ b/dashboard/src/index.scss @@ -35,6 +35,7 @@ @use "@styles/errorPage.scss" as *; @use "@styles/errorPage.scss" as *; @use "@styles/customdatepPicker.scss" as *; +@use "@styles/administration.scss" as *; @font-face { font-family: "Source Sans 3"; diff --git a/dashboard/src/styles/administration.scss b/dashboard/src/styles/administration.scss index cce35f4812..10786f3f87 100644 --- a/dashboard/src/styles/administration.scss +++ b/dashboard/src/styles/administration.scss @@ -32,11 +32,11 @@ padding-left: 20px; } -.audit-results-lsit-item { - display: list-item; - padding-left: 0; -} - .audit-results-entityid { display: block; } + +.enum-value-selector { + display: inline-grid !important; + grid-template-columns: 1fr !important; +} diff --git a/dashboard/src/utils/CommonViewFunction.ts b/dashboard/src/utils/CommonViewFunction.ts index e0f345b344..880797ecc3 100644 --- a/dashboard/src/utils/CommonViewFunction.ts +++ b/dashboard/src/utils/CommonViewFunction.ts @@ -305,3 +305,25 @@ export const generateObjectForSaveSearchApi = (options) => { return obj; } }; + +export const getTypeName = ( + multiValueSelect: boolean, + enumType: string, + rest: any +) => { + if (multiValueSelect) { + switch (rest.typeName) { + case "enumeration": + return `array<${enumType}>`; + default: + return `array<${rest.typeName}>`; + } + } else { + switch (rest.typeName) { + case "enumeration": + return enumType; + default: + return rest.typeName; + } + } +}; diff --git a/dashboard/src/views/BusinessMetadata/BusinessMetadataAtrributeForm.tsx b/dashboard/src/views/BusinessMetadata/BusinessMetadataAtrributeForm.tsx index cfb070e51c..1f4bc2acf7 100644 --- a/dashboard/src/views/BusinessMetadata/BusinessMetadataAtrributeForm.tsx +++ b/dashboard/src/views/BusinessMetadata/BusinessMetadataAtrributeForm.tsx @@ -154,13 +154,23 @@ const BusinessMetadataAttributeForm = ({ await updateEnum(data); toast.dismiss(toastId.current); toastId.current = toast.success( - `Enumeration ${enumType} updated - successfully` + `Enumeration ${enumType} updated successfully` ); } else { toast.dismiss(toastId.current); toastId.current = toast.success("No updated values"); } + fields?.forEach((fieldItem: any, idx: number) => { + const fieldEnumType = + attributeDefsWatch && + attributeDefsWatch(`attributeDefs.${idx}.enumType`); + if (fieldEnumType === enumType) { + attributeDefsSetValue( + `attributeDefs.${idx}.enumValues`, + elementValues + ); + } + }); handleCloseEnumModal(); reset({ enumType: "", enumValues: [] }); dispatchState(fetchEnumData()); @@ -170,6 +180,7 @@ const BusinessMetadataAttributeForm = ({ } }; const handleCloseEnumModal = () => { + reset({ enumType: "", enumValues: [] }); setEnumModal(false); }; @@ -258,7 +269,13 @@ const BusinessMetadataAttributeForm = ({ data-cy={`attributeDefs.${index}.name`} key={`attributeDefs.${index}.name`} defaultValue={field?.name} - render={({ field: { value, onChange } }) => ( + rules={{ + required: true + }} + render={({ + field: { value, onChange }, + fieldState: { error } + }) => ( ( <> ( + rules={{ + required: true + }} + render={({ + field: { value, onChange }, + fieldState: { error } + }) => ( <> { onChange(newValue); @@ -596,9 +623,6 @@ const BusinessMetadataAttributeForm = ({ } }} filterSelectedOptions - isOptionEqualToValue={(option, value) => - option === value - } options={ !isEmpty(enumTypes) ? enumTypes.map((option: any) => option) @@ -608,11 +632,11 @@ const BusinessMetadataAttributeForm = ({ renderInput={(params) => ( { return ( <> @@ -681,11 +702,15 @@ const BusinessMetadataAttributeForm = ({ option.value} + isOptionEqualToValue={(option, value) => + option.value === value.value + } data-cy="enumValueSelector" options={ !isEmpty(enumTypeOptions) diff --git a/dashboard/src/views/BusinessMetadata/BusinessMetadataForm.tsx b/dashboard/src/views/BusinessMetadata/BusinessMetadataForm.tsx index f6e4d1e91d..2f6af49dc7 100644 --- a/dashboard/src/views/BusinessMetadata/BusinessMetadataForm.tsx +++ b/dashboard/src/views/BusinessMetadata/BusinessMetadataForm.tsx @@ -43,6 +43,7 @@ import { setEditBMAttribute } from "@redux/slice/createBMSlice"; import { cloneDeep } from "@utils/Helper"; import { fetchBusinessMetaData } from "@redux/slice/typeDefSlices/typedefBusinessMetadataSlice"; import { defaultType } from "@utils/Enum"; +import { getTypeName } from "@utils/CommonViewFunction"; const BusinessMetaDataForm = ({ setForm, @@ -77,7 +78,7 @@ const BusinessMetaDataForm = ({ : "enumeration"; let selectedEnumObj = !isEmpty(enumDefs) ? enumDefs.find((obj: { name: any }) => { - return obj.name == typeName; + return obj.name == (str.indexOf("<") != -1 ? extracted : str); }) : {}; let selectedEnumValues = !isEmpty(selectedEnumObj) @@ -108,7 +109,9 @@ const BusinessMetaDataForm = ({ : defaultType.includes(typeName) ? typeName : "enumeration", - ...(currentTypeName == "enumeration" && { enumType: typeName }), + ...(currentTypeName == "enumeration" && { + enumType: str.indexOf("<") != -1 ? extracted : str + }), ...(currentTypeName == "enumeration" && { enumValues: enumTypeOptions }), @@ -152,7 +155,10 @@ const BusinessMetaDataForm = ({ const { fields, append, remove } = useFieldArray({ control, - name: "attributeDefs" + name: "attributeDefs", + rules: { + required: true + } }); useEffect(() => { @@ -164,9 +170,11 @@ const BusinessMetaDataForm = ({ : defaultType.includes(typeName) ? typeName : "enumeration"; - let selectedEnumObj = enumDefs.find((obj: { name: any }) => { - return obj.name == typeName; - }); + let selectedEnumObj = !isEmpty(enumDefs) + ? enumDefs.find((obj: { name: any }) => { + return obj.name == (str.indexOf("<") != -1 ? extracted : str); + }) + : {}; let selectedEnumValues = !isEmpty(selectedEnumObj) ? selectedEnumObj?.elementDefs : []; @@ -189,7 +197,9 @@ const BusinessMetaDataForm = ({ : [] }, typeName: currentTypeName, - ...(currentTypeName == "enumeration" && { enumType: typeName }), + ...(currentTypeName == "enumeration" && { + enumType: str.indexOf("<") != -1 ? extracted : str + }), ...(currentTypeName == "enumeration" && { enumValues: enumTypeOptions }), @@ -233,6 +243,7 @@ const BusinessMetaDataForm = ({ const onSubmit = async (values: any) => { let formData = { ...values }; + let bmData = cloneDeep(bmAttribute); const { name, description, attributeDefs } = formData; @@ -243,24 +254,33 @@ const BusinessMetaDataForm = ({ let attributeDefsData = !isEmpty(attributeDefs) ? [...attributeDefs] : []; let attributes = !isEmpty(attributeDefsData) - ? attributeDefsData.map((item) => ({ - ...item, - ...{ + ? attributeDefsData.map((item) => { + const { multiValueSelect, enumType, enumValues, ...rest } = item; + + const baseObj = { + ...rest, options: { applicableEntityTypes: JSON.stringify( - item.options.applicableEntityTypes + rest.options.applicableEntityTypes ), - maxStrLength: item.options.maxStrLength + maxStrLength: rest.options.maxStrLength }, - typeName: item.multiValueSelect - ? item.typeName == "enumeration" - ? item.enumType - : `array<${item.typeName}>` - : item.typeName == "enumeration" - ? item.enumType - : `array<${item.typeName}>` - } - })) + ...(multiValueSelect && { + multiValueSelect: true, + multiValued: true + }), + ...(enumType && { + enumValues: !isEmpty(enumValues) + ? enumValues.map((enums: { value: any }) => { + return enums.value; + }) + : [] + }), + typeName: getTypeName(multiValueSelect, enumType, rest) + }; + + return baseObj; + }) : []; let data = { diff --git a/dashboard/src/views/BusinessMetadata/EnumCreateUpdate.tsx b/dashboard/src/views/BusinessMetadata/EnumCreateUpdate.tsx index be238d7302..bd4eed7df6 100644 --- a/dashboard/src/views/BusinessMetadata/EnumCreateUpdate.tsx +++ b/dashboard/src/views/BusinessMetadata/EnumCreateUpdate.tsx @@ -131,7 +131,12 @@ const EnumCreateUpdate = ({ sx={{ flex: "1" }} size="small" value={value} - onChange={(_event, newValue) => { + onChange={(_event, newValue, reason) => { + if (reason == "clear") { + onChange(""); + setValue("enumValues", []); + return; + } if (!isEmpty(newValue.label)) { onChange(newValue.value); } else { @@ -170,6 +175,7 @@ const EnumCreateUpdate = ({ return filtered; }} + clearIcon={null} filterSelectedOptions onBlur={onBlur} options={ @@ -261,7 +267,6 @@ const EnumCreateUpdate = ({ : [] } onBlur={onBlur} - className="advanced-search-autocomplete" renderInput={(params) => ( { N/A ), header: "Type Name", - enableSorting: true + enableSorting: true, + width: "30%" }, { accessorKey: "searchWeight", @@ -176,7 +177,9 @@ const BusinessMetadataAtrribute = ({ componentProps, row }: any) => { : "enumeration"; let selectedEnumObj = !isEmpty(enumDefs) ? enumDefs.find((obj: { name: any }) => { - return obj.name == typeName; + return ( + obj.name == (str.indexOf("<") != -1 ? extracted : str) + ); }) : {}; let selectedEnumValues = !isEmpty(selectedEnumObj) @@ -208,7 +211,7 @@ const BusinessMetadataAtrribute = ({ componentProps, row }: any) => { ? typeName : "enumeration", ...(currentTypeName == "enumeration" && { - enumType: typeName + enumType: str.indexOf("<") != -1 ? extracted : str }), ...(currentTypeName == "enumeration" && { enumValues: enumTypeOptions diff --git a/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataDetailsLayout.tsx b/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataDetailsLayout.tsx index 5b07e1e70d..1638565ff0 100644 --- a/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataDetailsLayout.tsx +++ b/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataDetailsLayout.tsx @@ -45,6 +45,7 @@ import { createEditBusinessMetadata } from "@api/apiMethods/typeDefApiMethods"; import { cloneDeep } from "@utils/Helper"; import { defaultAttrObj, defaultType } from "@utils/Enum"; import { fetchBusinessMetaData } from "@redux/slice/typeDefSlices/typedefBusinessMetadataSlice"; +import { getTypeName } from "@utils/CommonViewFunction"; const BusinessMetadataDetailsLayout = () => { const { bmguid } = useParams(); @@ -97,9 +98,10 @@ const BusinessMetadataDetailsLayout = () => { : "enumeration"; let selectedEnumObj = !isEmpty(enumDefs) ? enumDefs.find((obj: { name: any }) => { - return obj.name == typeName; + return obj.name == (str.indexOf("<") != -1 ? extracted : str); }) : {}; + let selectedEnumValues = !isEmpty(selectedEnumObj) ? selectedEnumObj?.elementDefs : []; @@ -129,7 +131,9 @@ const BusinessMetadataDetailsLayout = () => { : defaultType.includes(typeName) ? typeName : "enumeration", - ...(currentTypeName == "enumeration" && { enumType: typeName }), + ...(currentTypeName == "enumeration" && { + enumType: str.indexOf("<") != -1 ? extracted : str + }), ...(currentTypeName == "enumeration" && { enumValues: enumTypeOptions }), @@ -175,7 +179,7 @@ const BusinessMetadataDetailsLayout = () => { let attributeDefsData = [...formAttributes]; let attributes = attributeDefsData.map((item) => { - const { multiValueSelect, ...rest } = item; + const { multiValueSelect, enumValues, enumType, ...rest } = item; return { ...rest, @@ -186,13 +190,18 @@ const BusinessMetadataDetailsLayout = () => { ), maxStrLength: rest.options.maxStrLength }, - typeName: rest.multiValueSelect - ? rest.typeName == "enumeration" - ? rest.enumType - : `array<${rest.typeName}>` - : rest.typeName == "enumeration" - ? rest.enumType - : `array<${rest.typeName}>` + ...(multiValueSelect && { + multiValueSelect: true, + multiValued: true + }), + ...(!isEmpty(enumType) && { + enumValues: !isEmpty(enumType) + ? enumValues.map((enums: { value: any }) => { + return enums.value; + }) + : [] + }), + typeName: getTypeName(multiValueSelect, enumType, rest) } }; });