Feature: changed multi select custom component in MF

forms-flow-web/src/components/Form/EditForm/FormEdit.js

@@ -61,7 +61,8 @@ import NewVersionModal from "../../Modals/NewVersionModal";
 import { currentFormReducer } from "../../../modules/formReducer.js";
 import { toast } from "react-toastify";
 import userRoles from "../../../constants/permissions.js";
-import { generateUniqueId, isFormComponentsChanged, addTenantkey, textTruncate } from "../../../helper/helper.js";
+import { generateUniqueId, isFormComponentsChanged, addTenantkey, textTruncate,
+  convertMultiSelectOptionToValue } from "../../../helper/helper.js";
 import { useMutation } from "react-query";
 import NavigateBlocker from "../../CustomComponents/NavigateBlocker";
 import { setProcessData, setFormPreviosData, setFormProcessesData } from "../../../actions/processActions.js";
@@ -538,12 +539,13 @@ const handleSaveLayout = () => {
 
 
   /* ----------- save settings function to be used in settings modal ---------- */
+
   const filterAuthorizationData = (authorizationData) => {
     if(authorizationData.selectedOption === "submitter"){
       return {roles: [], userName:null, resourceDetails:{submitter:true}};
     }
     if (authorizationData.selectedOption === "specifiedRoles") {
-      return { roles: authorizationData.selectedRoles, userName: "" };
+      return { roles: convertMultiSelectOptionToValue(authorizationData.selectedRoles, "role"), userName: "" };
     }
     return { roles: [], userName: preferred_username };
   };
@@ -582,7 +584,7 @@ const handleSaveLayout = () => {
         resourceDetails: {},
         roles:
           rolesState.FORM.selectedOption === "specifiedRoles"
-            ? rolesState.FORM.selectedRoles
+            ? convertMultiSelectOptionToValue(rolesState.FORM.selectedRoles, "role")
             : [],
       },
     };

forms-flow-web/src/components/Form/EditForm/FormSettings.js

@@ -11,11 +11,11 @@ import {
   CustomRadioButton,
   FormInput,
   FormTextArea,
+  MultipleSelect
 } from "@formsflow/components";
 
-import MultiSelectComponent from "../../CustomComponents/MultiSelect";
 import { MULTITENANCY_ENABLED } from "../../../constants/constants";
-import {  addTenantkeyAsSuffix } from "../../../helper/helper";
+import {  addTenantkeyAsSuffix, convertSelectedValueToMultiSelectOption } from "../../../helper/helper";
 import { useDispatch, useSelector } from "react-redux";
 import { getUserRoles } from "../../../apiManager/services/authorizationService";
 import { useTranslation } from "react-i18next";
@@ -64,22 +64,26 @@ const FormSettings = forwardRef((props, ref) => {
 
   const publicUrlPath = `${window.location.origin}/public/form/`;
   const [urlPath,setUrlPath] = useState(publicUrlPath);
-  const setSelectedOption = (roles, option)=> roles.length ? "specifiedRoles" : option;
+  const setSelectedOption = (option, roles = [])=> roles.length ? "specifiedRoles" : option;
+  const multiSelectOptionKey = "role";
   /* ------------------------- authorization variables ------------------------ */
   const [rolesState, setRolesState] = useState({
     DESIGN: {
-      selectedRoles: formAuthorization.DESIGNER?.roles,
-      selectedOption: setSelectedOption(formAuthorization.DESIGNER?.roles,"onlyYou"),
+      selectedRoles: convertSelectedValueToMultiSelectOption(formAuthorization.DESIGNER?.roles,
+         multiSelectOptionKey),
+      selectedOption: setSelectedOption("onlyYou", formAuthorization.DESIGNER?.roles),
     },
     FORM: {
       roleInput: "",
-      selectedRoles: formAuthorization.FORM?.roles,
-      selectedOption: setSelectedOption(formAuthorization.FORM?.roles,"registeredUsers"),
+      selectedRoles: convertSelectedValueToMultiSelectOption(formAuthorization.FORM?.roles, 
+        multiSelectOptionKey),
+      selectedOption: setSelectedOption("registeredUsers", formAuthorization.FORM?.roles),
     },
     APPLICATION: {
       roleInput: "",
-      selectedRoles: formAuthorization.APPLICATION?.roles,
-      selectedOption: setSelectedOption(formAuthorization.APPLICATION?.roles, "submitter"), 
+      selectedRoles: convertSelectedValueToMultiSelectOption(formAuthorization.APPLICATION?.roles,
+         multiSelectOptionKey),
+      selectedOption: setSelectedOption("submitter", formAuthorization.APPLICATION?.roles), 
       /* The 'submitter' key is stored in 'resourceDetails'. If the roles array is not empty
        we assume that the submitter is true. */
     }
@@ -154,15 +158,15 @@ const FormSettings = forwardRef((props, ref) => {
       .then((res) => {
         if (res) {
           const { data = [] } = res;
-          setUserRoles(data.map((role) => role.name));
+          setUserRoles(data.map((role,index) => ({[multiSelectOptionKey]:role.name, id: index})));
         }
       })
       .catch((error) => console.error("error", error));
   }, [dispatch]);
 
 
 
-  const handleRoleStateChange = (section, key, value) => {
+  const handleRoleStateChange = (section, key, value = []) => {
     setRolesState((prevState) => ({
       ...prevState,
       [section]: {
@@ -210,6 +214,10 @@ const FormSettings = forwardRef((props, ref) => {
     props.setIsSaveButtonDisabled(shouldDisableSaveButton);
   }, [rolesState, errors, formDetails]);
 
+  const handleRoleSelectForDesign = (roles) => handleRoleStateChange(DESIGN, "selectedRoles", roles);
+  const handleRoleSelectForForm = (roles) => handleRoleStateChange(FORM, "selectedRoles", roles);
+  const handleRoleSelectForApplication = (roles) => 
+    handleRoleStateChange(APPLICATION, "selectedRoles", roles);
 
   return (
     <>
@@ -289,14 +297,15 @@ const FormSettings = forwardRef((props, ref) => {
           <FormInput disabled={true} />
         )}
         {rolesState.DESIGN.selectedOption === "specifiedRoles" && (
-          <MultiSelectComponent
-            openByDefault
-            allRoles={userRoles}
-            selectedRoles={rolesState.DESIGN.selectedRoles}
-            setSelectedRoles={(roles) =>
-              handleRoleStateChange(DESIGN, "selectedRoles", roles)
-            }
+          <MultipleSelect
+          options={userRoles}  
+          selectedValues={rolesState.DESIGN.selectedRoles} 
+          onSelect={handleRoleSelectForDesign}  
+          onRemove={handleRoleSelectForDesign}  
+          displayValue={multiSelectOptionKey}
+          avoidHighlightFirstOption={true}
           />
+
         )}
 
         <Form.Label className="field-label mt-3">
@@ -338,14 +347,15 @@ const FormSettings = forwardRef((props, ref) => {
           <FormInput disabled={true} />
         )}
         {rolesState.FORM.selectedOption === "specifiedRoles" && (
-          <MultiSelectComponent
-            openByDefault 
-            allRoles={userRoles}
-            selectedRoles={rolesState.FORM.selectedRoles}
-            setSelectedRoles={(roles) =>
-              handleRoleStateChange(FORM, "selectedRoles", roles)
-            }
-          />
+            <MultipleSelect 
+            options={userRoles} // Options to display in the dropdown
+            selectedValues={rolesState.FORM.selectedRoles} // Preselected value to persist in dropdown
+            onSelect={handleRoleSelectForForm} // Function will trigger on select event
+            onRemove={handleRoleSelectForForm} // Function will trigger on remove event
+            displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
+            avoidHighlightFirstOption={true}
+            />
+
         )}
 
         <Form.Label className="field-label mt-3">
@@ -378,14 +388,15 @@ const FormSettings = forwardRef((props, ref) => {
         )}
 
         {rolesState.APPLICATION.selectedOption === "specifiedRoles" && (
-          <MultiSelectComponent
-            openByDefault
-            allRoles={userRoles}
-            selectedRoles={rolesState.APPLICATION.selectedRoles}
-            setSelectedRoles={(roles) =>
-              handleRoleStateChange(APPLICATION, "selectedRoles", roles)
-            }
+          <MultipleSelect 
+            options={userRoles} // Options to display in the dropdown
+            selectedValues={rolesState.APPLICATION.selectedRoles} // Preselected value to persist in dropdown
+            onSelect={handleRoleSelectForApplication} // Function will trigger on select event
+            onRemove={handleRoleSelectForApplication} // Function will trigger on remove event
+            displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
+            avoidHighlightFirstOption={true}
           />
+
         )}
       </div>
 

forms-flow-web/src/helper/helper.js

@@ -114,5 +114,22 @@ const addTenantkeyAsSuffix = (value, tenantkey) => {
   }
 };
 
-export { generateUniqueId, replaceUrl, addTenantkey, removeTenantKey, textTruncate, renderPage, 
-  filterSelectOptionByLabel, isFormComponentsChanged,addTenantkeyAsSuffix};
+/* ----------------- convert data from and into multiselect ----------------- */
+const convertMultiSelectOptionToValue = (selectedValues = [], key = null) => 
+  selectedValues.map(i=> i[key]);
+
+const convertSelectedValueToMultiSelectOption = (values = [], key = null) => 
+  values.map((value)=>({[key]:value, id:_.uniqueId(value)}));
+/* ----------------------------------- --- ---------------------------------- */
+export { generateUniqueId, 
+  replaceUrl, 
+  addTenantkey, 
+  removeTenantKey, 
+  textTruncate, 
+  renderPage, 
+  filterSelectOptionByLabel, 
+  isFormComponentsChanged,
+  addTenantkeyAsSuffix, 
+  convertMultiSelectOptionToValue,
+  convertSelectedValueToMultiSelectOption
+};