ATLAS-5049: [React UI] Unable to add single value type attributes in Business Metadata

Author: Brijesh619

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";

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;
+}

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;
+    }
+  }
+};

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);
   };
 
@@ -571,7 +582,7 @@ const BusinessMetadataAttributeForm = ({
                               }}
                               size="small"
                               id="search-by-type"
-                              value={value || []}
+                              value={value || null}
                               clearIcon={null}
                               onChange={(_event, newValue) => {
                                 onChange(newValue);
@@ -596,9 +607,6 @@ const BusinessMetadataAttributeForm = ({
                                 }
                               }}
                               filterSelectedOptions
-                              isOptionEqualToValue={(option, value) =>
-                                option === value
-                              }
                               options={
                                 !isEmpty(enumTypes)
                                   ? enumTypes.map((option: any) => option)
@@ -612,7 +620,6 @@ const BusinessMetadataAttributeForm = ({
                                   disabled={
                                     isEmpty(editbmAttribute) ? false : true
                                   }
-                                  // label="Select type"
                                   InputLabelProps={{
                                     style: {
                                       top: "unset",
@@ -681,11 +688,15 @@ const BusinessMetadataAttributeForm = ({
                         <Grid item md={7}>
                           <Autocomplete
                             size="small"
+                            className="enum-value-selector"
                             readOnly
                             disableClearable={true}
                             multiple={true}
                             value={watched?.[index]?.enumValues || []}
                             getOptionLabel={(option) => option.value}
+                            isOptionEqualToValue={(option, value) =>
+                              option.value === value.value
+                            }
                             data-cy="enumValueSelector"
                             options={
                               !isEmpty(enumTypeOptions)

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
       }),
@@ -164,9 +167,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 +194,9 @@ const BusinessMetaDataForm = ({
             : []
         },
         typeName: currentTypeName,
-        ...(currentTypeName == "enumeration" && { enumType: typeName }),
+        ...(currentTypeName == "enumeration" && {
+          enumType: str.indexOf("<") != -1 ? extracted : str
+        }),
         ...(currentTypeName == "enumeration" && {
           enumValues: enumTypeOptions
         }),
@@ -233,6 +240,7 @@ const BusinessMetaDataForm = ({
 
   const onSubmit = async (values: any) => {
     let formData = { ...values };
+
     let bmData = cloneDeep(bmAttribute);
 
     const { name, description, attributeDefs } = formData;
@@ -243,24 +251,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 = {

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) => (
                             <TextField
                               {...params}

dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataAtrribute.tsx

@@ -56,7 +56,8 @@ const BusinessMetadataAtrribute = ({ componentProps, row }: any) => {
             <span>N/A</span>
           ),
         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

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)
         }
       };
     });