update generation of circle changes

src/shared/components/Form/Formik/AdvancedSettings/components/ConfirmationModal/ConfirmationModal.tsx

@@ -7,7 +7,8 @@ import { useNotification } from "@/shared/hooks";
 import { IntermediateCreateProjectPayload } from "@/shared/interfaces";
 import { Button, ButtonVariant, Loader } from "@/shared/ui-kit";
 import { emptyFunction } from "@/shared/utils";
-import { CircleChange } from "./types";
+import { ChangeItem } from "./components";
+import { CommonCircleChange } from "./types";
 import { generateCircleChanges, generatePreviewPayload } from "./utils";
 import styles from "./ConfirmationModal.module.scss";
 
@@ -27,7 +28,9 @@ const ConfirmationModal: FC<ConfirmationModalProps> = (props) => {
   const [isCirclesUpdateLoading, setIsCirclesUpdateLoading] = useState(false);
   const [isMovingForwardConfirmed, setIsMovingForwardConfirmed] =
     useState(false);
-  const [circleChanges, setCircleChanges] = useState<CircleChange[]>([]);
+  const [commonCircleChanges, setCommonCircleChanges] = useState<
+    CommonCircleChange[]
+  >([]);
   const isLoading = isUpdatePreviewLoading || isCirclesUpdateLoading;
 
   const confirmChanges = async () => {
@@ -64,7 +67,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = (props) => {
 
     if (!isOpen || !governanceId || !permissionGovernanceId || !circles) {
       setIsUpdatePreviewLoading(true);
-      setCircleChanges([]);
+      setCommonCircleChanges([]);
       return;
     }
 
@@ -74,7 +77,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = (props) => {
           generatePreviewPayload(governanceId, permissionGovernanceId, circles),
         );
         const circleChanges = await generateCircleChanges(data);
-        setCircleChanges(circleChanges);
+        setCommonCircleChanges(circleChanges);
       } catch (err) {
         Logger.error(err);
       } finally {
@@ -102,12 +105,11 @@ const ConfirmationModal: FC<ConfirmationModalProps> = (props) => {
             Notice that this action will change the roles for some users:
           </span>
           <ul className={styles.changesList}>
-            {circleChanges.map((circleChange) => (
-              <li>
-                {circleChange.userName} will be{" "}
-                {circleChange.added ? "added to" : "removed from"}{" "}
-                {circleChange.circleName}
-              </li>
+            {commonCircleChanges.map((commonCircleChange) => (
+              <ChangeItem
+                key={commonCircleChange.commonId}
+                change={commonCircleChange}
+              />
             ))}
           </ul>
           <Checkbox

src/shared/components/Form/Formik/AdvancedSettings/components/ConfirmationModal/components/ChangeItem/ChangeItem.module.scss

@@ -0,0 +1,19 @@
+@import "../../../../../../../../../constants";
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+}
+
+.text {
+  margin-bottom: 0.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

src/shared/components/Form/Formik/AdvancedSettings/components/ConfirmationModal/components/ChangeItem/ChangeItem.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { CommonCircleChange } from "../../types";
+import styles from "./ChangeItem.module.scss";
+
+interface ChangeItemProps {
+  change: CommonCircleChange;
+}
+
+const ChangeItem: FC<ChangeItemProps> = (props) => {
+  const { change } = props;
+
+  return (
+    <li className={styles.container}>
+      <span className={styles.title}>{change.commonName}</span>
+      {change.removedUsers.length > 0 && (
+        <span className={styles.text}>
+          The following users will be removed from {change.commonName}:{" "}
+          {change.removedUsers.map(({ userName }) => userName).join(", ")}
+        </span>
+      )}
+      {change.changes.map(
+        ({ circleId, circleName, addedUsers, removedUsers }) => (
+          <React.Fragment key={circleId}>
+            {addedUsers.length > 0 && (
+              <span className={styles.text}>
+                The following users will be added to {circleName}:{" "}
+                {addedUsers.map(({ userName }) => userName).join(", ")}
+              </span>
+            )}
+            {removedUsers.length > 0 && (
+              <span className={styles.text}>
+                The following users will be removed from {circleName}:{" "}
+                {removedUsers.map(({ userName }) => userName).join(", ")}
+              </span>
+            )}
+          </React.Fragment>
+        ),
+      )}
+    </li>
+  );
+};
+
+export default ChangeItem;

src/shared/components/Form/Formik/AdvancedSettings/components/ConfirmationModal/components/ChangeItem/index.ts

@@ -0,0 +1 @@
+export { default as ChangeItem } from "./ChangeItem";

src/shared/components/Form/Formik/AdvancedSettings/components/ConfirmationModal/components/index.ts

@@ -0,0 +1 @@
+export * from "./ChangeItem";

src/shared/components/Form/Formik/AdvancedSettings/components/ConfirmationModal/types.ts

@@ -1,5 +1,18 @@
-export interface CircleChange {
+interface User {
+  userId: string;
   userName: string;
+}
+
+export interface CircleChange {
+  circleId: string;
   circleName: string;
-  added: boolean;
+  addedUsers: User[];
+  removedUsers: User[];
+}
+
+export interface CommonCircleChange {
+  commonId: string;
+  commonName: string;
+  removedUsers: User[];
+  changes: CircleChange[];
 }

src/shared/components/Form/Formik/AdvancedSettings/components/ConfirmationModal/utils/generateCircleChanges.ts

@@ -1,40 +1,65 @@
 import { UserService } from "@/services";
 import { PreviewCirclesUpdateResponse } from "@/shared/interfaces";
 import { getUserName } from "@/shared/utils";
-import { CircleChange } from "../types";
+import { CircleChange, CommonCircleChange } from "../types";
+
+const getDefaultCircleChange = (
+  circleId: string,
+  circleName: string,
+): CircleChange => ({
+  circleId,
+  circleName,
+  addedUsers: [],
+  removedUsers: [],
+});
 
 export const generateCircleChanges = async ({
   changes,
-}: PreviewCirclesUpdateResponse): Promise<CircleChange[]> => {
-  const circleChanges: CircleChange[] = [];
+}: PreviewCirclesUpdateResponse): Promise<CommonCircleChange[]> => {
+  const commonCircleChanges: CommonCircleChange[] = [];
 
   await Promise.all(
-    changes.map(
-      (change) =>
-        Promise.all(
-          change.members.map(async (member) => {
-            const user = await UserService.getCachedUserById(member.id);
-            const userName = getUserName(user) || "Unknown";
-
-            member.circlesAdded.forEach((addedCircle) => {
-              circleChanges.push({
-                userName,
-                circleName: addedCircle.name,
-                added: true,
-              });
-            });
-            member.circlesRemoved.forEach((removedCircle) => {
-              circleChanges.push({
-                userName,
-                circleName: removedCircle.name,
-                added: false,
-              });
-            });
-          }),
-        ),
-      [],
-    ),
+    changes.map(async (change) => {
+      const circleChanges: Record<string, CircleChange> = {};
+      const commonCircleChange: CommonCircleChange = {
+        commonId: change.commonId,
+        commonName: change.commonName,
+        removedUsers: [],
+        changes: [],
+      };
+
+      await Promise.all(
+        change.members.map(async (member) => {
+          const userId = member.userId;
+          const user = await UserService.getCachedUserById(userId);
+          const userName = getUserName(user) || "<Unknown>";
+
+          if (member.circleIds.length === 0) {
+            commonCircleChange.removedUsers.push({ userId, userName });
+            return;
+          }
+
+          member.circlesAdded.forEach((addedCircle) => {
+            const circleChange =
+              circleChanges[addedCircle.id] ||
+              getDefaultCircleChange(addedCircle.id, addedCircle.name);
+            circleChange.addedUsers.push({ userId, userName });
+            circleChanges[addedCircle.id] = circleChange;
+          });
+          member.circlesRemoved.forEach((removedCircle) => {
+            const circleChange =
+              circleChanges[removedCircle.id] ||
+              getDefaultCircleChange(removedCircle.id, removedCircle.name);
+            circleChange.removedUsers.push({ userId, userName });
+            circleChanges[removedCircle.id] = circleChange;
+          });
+        }),
+      );
+
+      commonCircleChange.changes = Object.values(circleChanges);
+      commonCircleChanges.push(commonCircleChange);
+    }),
   );
 
-  return circleChanges;
+  return commonCircleChanges;
 };

src/shared/interfaces/PreviewCirclesUpdate.ts

@@ -24,9 +24,11 @@ interface ChangedCircle {
 export interface PreviewCirclesUpdateResponse {
   changes: {
     commonId: string;
+    commonName: string;
     governanceId: string;
     members: {
       id: string;
+      userId: string;
       circlesAdded: ChangedCircle[];
       circlesRemoved: ChangedCircle[];
       circleIds: string[];