Add toast

Author: andreaskienle

public/locales/en.json

@@ -174,7 +174,12 @@
     "saveButton": "Save changes",
     "defaultNamespaceInfo": "Leave empty to use <span>default</span> namespace",
     "serviceAccoutsGuide": "You can also use our <link1>Service Account Guide</link1> for more information.",
-    "reuseMembersButton": "Reuse"
+    "reuseMembersButton": "Reuse",
+    "membersToastNoChanges": "No changes.",
+    "membersToastAdded1": "1 member added.",
+    "membersToastAddedN": "{{count}} members added.",
+    "membersToastChanged1": "1 member changed.",
+    "membersToastChangedN": "{{count}} members changed."
   },
 
   "ProjectsPage": {
@@ -432,7 +437,7 @@
     "reuseFromLabel": "Reuse from",
     "filterForLabel": "Filter for",
     "addMembersButton0": "Add members",
-    "addMembersButton1": "Add 1 member",
+    "addMembersButton1": "Add member",
     "addMembersButtonN": "Add {{count}} members"
   }
 }

src/components/Members/EditMembers.tsx

@@ -1,12 +1,14 @@
 import { FC, useCallback, useMemo, useState } from 'react';
 import { Button, FlexBox } from '@ui5/webcomponents-react';
 import { MemberTable } from './MemberTable.tsx';
-import { Member } from '../../lib/api/types/shared/members';
+import { areMembersEqual, Member } from '../../lib/api/types/shared/members';
 import { useTranslation } from 'react-i18next';
 import styles from './Members.module.css';
 import { RadioButtonsSelectOption } from '../Ui/RadioButtonsSelect/RadioButtonsSelect.tsx';
 import { AddEditMemberDialog } from './AddEditMemberDialog.tsx';
 import { ImportMembersDialog } from './ImportMembersDialog.tsx';
+import { useToast } from '../../context/ToastContext.tsx';
+import { TFunction } from 'i18next';
 
 export interface EditMembersProps {
   members: Member[];
@@ -73,15 +75,29 @@ export const EditMembers: FC<EditMembersProps> = ({
     setIsImportDialogOpen(false);
   }, []);
 
+  const toast = useToast();
+
   const handleImportMembers = useCallback(
     (imported: Member[]) => {
-      const byName = new Map<string, Member>();
-      members.forEach((m) => byName.set(m.name, m));
-      imported.forEach((m) => byName.set(m.name, m));
-      const merged = Array.from(byName.values());
-      onMemberChanged(merged);
+      let numberOfAddedMembers = 0;
+      let numberOfChangedMembers = 0;
+
+      const membersByName = new Map<string, Member>(members.map((member) => [member.name, member]));
+      imported.forEach((importedMember) => {
+        const existingMember = membersByName.get(importedMember.name);
+        if (!existingMember) {
+          numberOfAddedMembers++;
+        } else if (!areMembersEqual(importedMember, existingMember)) {
+          numberOfChangedMembers++;
+        }
+        membersByName.set(importedMember.name, importedMember);
+      });
+      const updatedMembers = Array.from(membersByName.values());
+
+      toast.show(buildToastMessage(numberOfAddedMembers, numberOfChangedMembers, t));
+      onMemberChanged(updatedMembers);
     },
-    [members, onMemberChanged],
+    [members, onMemberChanged, t],
   );
 
   const handleSaveMember = useCallback(
@@ -161,3 +177,29 @@ export const EditMembers: FC<EditMembersProps> = ({
     </FlexBox>
   );
 };
+
+function buildToastMessage(addedCount: number, changedCount: number, t: TFunction) {
+  const messages: string[] = [];
+
+  if (addedCount === 0 && changedCount === 0) {
+    return t('EditMembers.membersToastNoChanges');
+  }
+
+  if (addedCount > 0) {
+    messages.push(
+      addedCount === 1
+        ? t('EditMembers.membersToastAdded1')
+        : t('EditMembers.membersToastAddedN', { count: addedCount }),
+    );
+  }
+
+  if (changedCount > 0) {
+    messages.push(
+      changedCount === 1
+        ? t('EditMembers.membersToastChanged1')
+        : t('EditMembers.membersToastChangedN', { count: changedCount }),
+    );
+  }
+
+  return messages.join(' ');
+}

src/lib/api/types/shared/members.spec.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { areMembersEqual, Member } from './members.ts';
+
+const makeMember = (overrides: Partial<Member> = {}): Member => ({
+  kind: 'User',
+  name: 'alice',
+  namespace: 'default-namespace',
+  roles: ['Viewer', 'Admin'],
+  ...overrides,
+});
+
+describe('members', () => {
+  describe('areMembersEqual', () => {
+    it('returns true when a and b are the same reference', () => {
+      const a = makeMember();
+      expect(areMembersEqual(a, a)).toBe(true);
+    });
+
+    it('returns true when the members have the very same attributes', () => {
+      const a = makeMember();
+      const b = makeMember();
+      expect(areMembersEqual(a, b)).toBe(true);
+    });
+
+    it('returns true even if the roles are sorted differently', () => {
+      const a = makeMember({ roles: ['Viewer', 'Admin'] });
+      const b = makeMember({ roles: ['Admin', 'Viewer'] });
+      expect(areMembersEqual(a, b)).toBe(true);
+    });
+
+    it('handles empty roles correctly', () => {
+      const a = makeMember({ roles: [] });
+      const b = makeMember({ roles: [] });
+      expect(areMembersEqual(a, b)).toBe(true);
+    });
+
+    it('returns false when b is undefined', () => {
+      const a = makeMember();
+      expect(areMembersEqual(a, undefined)).toBe(false);
+    });
+
+    it('returns false when kinds differ', () => {
+      const a = makeMember({ kind: 'User' });
+      const b = makeMember({ kind: 'ServiceAccount' });
+      expect(areMembersEqual(a, b)).toBe(false);
+    });
+
+    it('returns false when names differ', () => {
+      const a = makeMember({ name: 'alice' });
+      const b = makeMember({ name: 'bob' });
+      expect(areMembersEqual(a, b)).toBe(false);
+    });
+
+    it('returns false when namespaces differ', () => {
+      const a = makeMember({ namespace: 'namespace-a' });
+      const b = makeMember({ namespace: 'namespace-b' });
+      expect(areMembersEqual(a, b)).toBe(false);
+    });
+
+    it('returns false when role counts differ', () => {
+      const a = makeMember({ roles: ['Viewer', 'Admin'] });
+      const b = makeMember({ roles: ['Viewer'] });
+      expect(areMembersEqual(a, b)).toBe(false);
+    });
+
+    it('returns false when roles differ (same length)', () => {
+      const a = makeMember({ roles: ['Viewer', 'Admin'] });
+      const b = makeMember({ roles: ['Viewer', 'OtherRole'] });
+      expect(areMembersEqual(a, b)).toBe(false);
+    });
+
+    it('does not treat duplicate roles in a special way (debatable)', () => {
+      const a = makeMember({ roles: ['Viewer', 'Admin'] });
+      const b = makeMember({ roles: ['Viewer', 'Viewer', 'Admin'] });
+      expect(areMembersEqual(a, b)).toBe(false);
+    });
+
+    it('fails when b has a role a does not have', () => {
+      const a = makeMember({ roles: ['Viewer'] });
+      const b = makeMember({ roles: ['Viewer', 'Admin'] });
+      expect(areMembersEqual(a, b)).toBe(false);
+    });
+  });
+});

src/lib/api/types/shared/members.ts

@@ -29,6 +29,17 @@ export interface Member {
   namespace?: string;
 }
 
+export function areMembersEqual(a: Member, b?: Member): boolean {
+  return (
+    !!b &&
+    a.kind === b.kind &&
+    a.name === b.name &&
+    a.namespace === b.namespace &&
+    a.roles.length === b.roles.length &&
+    a.roles.every((r) => b.roles.includes(r))
+  );
+}
+
 export interface MemberPayload {
   kind: string;
   name: string;