Merge pull request #4347 from kris6673/edit-group

Feat: Enhance group editing and add hide/show M365 group in outlook

Author: KelvinTegelaar

src/pages/identity/administration/groups/edit.jsx

@@ -18,6 +18,7 @@ const EditGroup = () => {
   const [groupIdReady, setGroupIdReady] = useState(false);
   const [showMembershipTable, setShowMembershipTable] = useState(false);
   const [combinedData, setCombinedData] = useState([]);
+  const [initialValues, setInitialValues] = useState({});
   const tenantFilter = useSettings().currentTenant;
 
   const groupInfo = ApiGetCall({
@@ -65,13 +66,14 @@ const EditGroup = () => {
         ];
         setCombinedData(combinedData);
 
-        // Reset the form with all values
-        formControl.reset({
+        // Create initial values object
+        const formValues = {
           tenantFilter: tenantFilter,
           mail: group.mail,
           mailNickname: group.mailNickname || "",
           allowExternal: groupInfo?.data?.allowExternal,
           sendCopies: groupInfo?.data?.sendCopies,
+          hideFromOutlookClients: groupInfo?.data?.hideFromOutlookClients,
           displayName: group.displayName,
           description: group.description || "",
           membershipRules: group.membershipRule || "",
@@ -103,11 +105,37 @@ const EditGroup = () => {
           RemoveOwner: [],
           AddContact: [],
           RemoveContact: [],
+        };
+
+        // Store initial values for comparison
+        setInitialValues({
+          allowExternal: groupInfo?.data?.allowExternal,
+          sendCopies: groupInfo?.data?.sendCopies,
+          hideFromOutlookClients: groupInfo?.data?.hideFromOutlookClients,
         });
+
+        // Reset the form with all values
+        formControl.reset(formValues);
       }
     }
   }, [groupInfo.isSuccess, router.query, groupInfo.isFetching]);
 
+  // Custom data formatter to only send changed values
+  const customDataFormatter = (formData) => {
+    const cleanedData = { ...formData };
+
+    // Properties that should only be sent if they've changed from initial values
+    const changeDetectionProperties = ["allowExternal", "sendCopies", "hideFromOutlookClients"];
+
+    changeDetectionProperties.forEach((property) => {
+      if (formData[property] === initialValues[property]) {
+        delete cleanedData[property];
+      }
+    });
+
+    return cleanedData;
+  };
+
   return (
     <>
       <CippFormPage
@@ -117,6 +145,7 @@ const EditGroup = () => {
         formPageType="Edit"
         backButtonTitle="Group Overview"
         postUrl="/api/EditGroup"
+        customDataformatter={customDataFormatter}
         titleButton={
           <>
             <Button
@@ -331,6 +360,19 @@ const EditGroup = () => {
                   />
                 </Grid>
               )}
+
+              {groupType === "Microsoft 365" && (
+                <Grid size={{ xs: 12 }}>
+                  <CippFormComponent
+                    type="switch"
+                    label="Hide group mailbox from Outlook"
+                    name="hideFromOutlookClients"
+                    formControl={formControl}
+                    isFetching={groupInfo.isFetching}
+                    disabled={groupInfo.isFetching}
+                  />
+                </Grid>
+              )}
             </Grid>
           </Box>
         )}