[#558] added owner to access details (#603)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

__test__/features/Calendars/CalendarAccessRights.test.tsx

@@ -87,6 +87,8 @@ const baseCalendar: Calendar = {
   events: {},
   invite: [],
   owner: { emails: ["user1@example.com"] },
+  access: { write: true },
+  delegated: true,
 };
 
 describe("CalendarAccessRights", () => {
@@ -102,7 +104,8 @@ describe("CalendarAccessRights", () => {
         value={[]}
         onChange={mockOnChange}
         onInvitesLoaded={mockOnInvitesLoaded}
-      />
+      />,
+      { ...userState }
     );
 
     expect(
@@ -113,7 +116,7 @@ describe("CalendarAccessRights", () => {
   it("shows a list of users already passed in via value prop", () => {
     const users: UserWithAccess[] = [
       {
-        openpaasId: "abc",
+        openpaasId: "user1",
         displayName: "Alice",
         email: "alice@example.com",
         accessRight: 2,
@@ -136,10 +139,10 @@ describe("CalendarAccessRights", () => {
   it("calls onChange with user removed when remove button is clicked", () => {
     const users: UserWithAccess[] = [
       {
-        openpaasId: "abc",
+        openpaasId: "user1",
         displayName: "Alice",
         email: "alice@example.com",
-        accessRight: 2,
+        accessRight: 5,
       },
     ];
 
@@ -149,7 +152,8 @@ describe("CalendarAccessRights", () => {
         value={users}
         onChange={mockOnChange}
         onInvitesLoaded={mockOnInvitesLoaded}
-      />
+      />,
+      { ...userState }
     );
 
     fireEvent.click(screen.getByLabelText(/remove/i));
@@ -182,7 +186,8 @@ describe("CalendarAccessRights", () => {
         value={[]}
         onChange={mockOnChange}
         onInvitesLoaded={mockOnInvitesLoaded}
-      />
+      />,
+      { ...userState }
     );
 
     await waitFor(() => expect(getUserDetails).toHaveBeenCalledWith("bob123"));
@@ -219,7 +224,8 @@ describe("CalendarAccessRights", () => {
         value={[]}
         onChange={mockOnChange}
         onInvitesLoaded={mockOnInvitesLoaded}
-      />
+      />,
+      { ...userState }
     );
 
     await waitFor(() => expect(mockOnInvitesLoaded).toHaveBeenCalledWith([]));
@@ -249,7 +255,8 @@ describe("CalendarAccessRights", () => {
         value={[]}
         onChange={mockOnChange}
         onInvitesLoaded={mockOnInvitesLoaded}
-      />
+      />,
+      { ...userState }
     );
 
     expect(document.querySelector('[role="progressbar"]')).toBeInTheDocument();
@@ -286,7 +293,7 @@ describe("AccessTab – conditional rendering of CalendarAccessRights", () => {
     ).toBeInTheDocument();
   });
 
-  it("hides CalendarAccessRights for a non-owner without admin delegation", () => {
+  it("hides CalendarAccessRights textfield for a non-owner without admin delegation", () => {
     const foreignCalendar: Calendar = {
       ...baseCalendar,
       id: "otherUser/cal1",
@@ -306,9 +313,10 @@ describe("AccessTab – conditional rendering of CalendarAccessRights", () => {
       }
     );
 
+    expect(screen.queryByText("peopleSearch.label")).not.toBeInTheDocument();
     expect(
-      screen.queryByText("calendarPopover.access.grantAccessRights")
+      screen.getByText("calendarPopover.access.accessRights")
-    ).not.toBeInTheDocument();
+    ).toBeInTheDocument();
   });
 
   it("shows CalendarAccessRights when the user has access=5 (admin) delegation", () => {

src/components/Calendar/AccessTab.tsx

@@ -1,4 +1,3 @@
-import { useAppSelector } from "@/app/hooks";
 import {
   exportCalendar,
   getSecretLink,
@@ -36,11 +35,6 @@ export function AccessTab({
   onInvitesLoaded,
 }: AccessTabProps) {
   const { t } = useI18n();
-  const userData = useAppSelector((state) => state.user.userData);
-  const isPersonalCalendar = userData.openpaasId === calendar.id.split("/")[0];
-  const isDelegatedWithAdministration = calendar.invite?.find(
-    (invite) => invite.href.includes(userData.email) && invite.access === 5
-  );
 
   const calDAVLink = `${window.DAV_BASE_URL}${calendar.link.replace(".json", "")}`;
 
@@ -98,14 +92,12 @@ export function AccessTab({
 
   return (
     <>
-      {(isPersonalCalendar || isDelegatedWithAdministration) && (
       <CalendarAccessRights
         calendar={calendar}
         value={usersWithAccess}
         onChange={onUsersWithAccessChange}
         onInvitesLoaded={onInvitesLoaded}
       />
-      )}
 
       {!!window.DAV_BASE_URL && (
         <FieldWithLabel label={t("calendar.caldav_access")} isExpanded={false}>

src/components/Calendar/CalendarAccessRights.tsx

@@ -1,5 +1,8 @@
+import { useAppSelector } from "@/app/hooks";
 import { AccessRight, Calendar } from "@/features/Calendars/CalendarTypes";
 import { getUserDetails } from "@/features/User/userAPI";
+import { makeDisplayName } from "@/utils/makeDisplayName";
+import { normalizeEmail } from "@/utils/normalizeEmail";
 import {
   AutocompleteRenderInputParams,
   Avatar,
@@ -38,6 +41,17 @@ export function CalendarAccessRights({
   onInvitesLoaded,
 }: CalendarAccessRightsProps) {
   const { t } = useI18n();
+  const userData = useAppSelector((state) => state.user.userData);
+  const isPersonalCalendar = userData?.openpaasId === calendar.id.split("/")[0];
+  const currentUserEmail = normalizeEmail(userData?.email);
+  const isDelegatedWithAdministration = !!calendar.invite?.some((invite) => {
+    const invitedEmail = normalizeEmail(invite.href.replace(/^mailto:/i, ""));
+    return invitedEmail === currentUserEmail && invite.access === 5;
+  });
+
+  const ownerEmail =
+    calendar.owner?.preferredEmail ?? calendar.owner?.emails?.[0] ?? "";
+  const ownerName = makeDisplayName(calendar) ?? ownerEmail;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const [searchWidth, setSearchWidth] = useState<number | undefined>(undefined);
@@ -115,8 +129,6 @@ export function CalendarAccessRights({
     };
   }, [calendar.invite, onChange, onInvitesLoaded]);
 
-  const normalizeEmail = (email?: string) => email?.trim().toLowerCase() ?? "";
-
   const handleUserSelect = (_event: unknown, users: User[]) => {
     const updated: UserWithAccess[] = users.map((user) => {
       const existing = usersWithAccess.find(
@@ -153,9 +165,14 @@ export function CalendarAccessRights({
 
   return (
     <FieldWithLabel
-      label={t("calendarPopover.access.grantAccessRights")}
+      label={
+        isPersonalCalendar || isDelegatedWithAdministration
+          ? t("calendarPopover.access.grantAccessRights")
+          : t("calendarPopover.access.accessRights")
+      }
       isExpanded={false}
     >
+      {(isPersonalCalendar || isDelegatedWithAdministration) && (
         <Box ref={containerRef}>
           <PeopleSearch
             selectedUsers={usersWithAccess}
@@ -258,15 +275,47 @@ export function CalendarAccessRights({
             )}
           />
         </Box>
+      )}
 
+      <Box mt={2} display="flex" flexDirection="column" gap={1}>
+        <Box
+          key={ownerEmail}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+          px={1}
+          py={0.5}
+          sx={{
+            borderRadius: "8px",
+            "&:hover": { backgroundColor: "action.hover" },
+          }}
+        >
+          <Box display="flex" alignItems="center" gap={1.5} minWidth={0}>
+            <Avatar
+              {...stringAvatar(ownerName)}
+              sx={{ width: 28, height: 28, fontSize: "0.875rem" }}
+            />
+            <Box minWidth={0} display="flex" flexDirection="column" gap={0}>
+              <Typography noWrap>{ownerName}</Typography>
+              <Typography variant="caption" color="text.secondary">
+                {ownerEmail}
+              </Typography>
+            </Box>
+          </Box>
+
+          <Box display="flex" alignItems="center" gap={0.5} flexShrink={0}>
+            <Typography variant="caption">
+              {t("calendarPopover.access.owner")}
+            </Typography>
+          </Box>
+        </Box>
         {inviteLoading ? (
           <Box mt={2} display="flex" justifyContent="center">
             <CircularProgress size={24} />
           </Box>
         ) : (
-        usersWithAccess.length > 0 && (
+          usersWithAccess.length > 0 &&
-          <Box mt={2} display="flex" flexDirection="column" gap={1}>
+          usersWithAccess.map((user) => (
-            {usersWithAccess.map((user) => (
             <Box
               key={user.email}
               display="flex"
@@ -283,15 +332,8 @@ export function CalendarAccessRights({
                 <Avatar
                   {...stringAvatar(user.displayName)}
                   sx={{ width: 28, height: 28, fontSize: "0.875rem" }}
-                  >
+                />
-                    {user.displayName?.[0]?.toUpperCase()}
+                <Box minWidth={0} display="flex" flexDirection="column" gap={0}>
-                  </Avatar>
-                  <Box
-                    minWidth={0}
-                    display="flex"
-                    flexDirection="column"
-                    gap={0}
-                  >
                   <Typography noWrap>{user.displayName}</Typography>
                   <Typography variant="caption" color="text.secondary">
                     {user.email}
@@ -299,12 +341,7 @@ export function CalendarAccessRights({
                 </Box>
               </Box>
 
-                <Box
+              <Box display="flex" alignItems="center" gap={0.5} flexShrink={0}>
-                  display="flex"
-                  alignItems="center"
-                  gap={0.5}
-                  flexShrink={0}
-                >
                 <Select
                   value={user.accessRight}
                   onChange={(e) =>
@@ -315,6 +352,9 @@ export function CalendarAccessRights({
                   }
                   variant="standard"
                   disableUnderline
+                  disabled={
+                    !(isPersonalCalendar || isDelegatedWithAdministration)
+                  }
                   sx={{
                     fontSize: "0.875rem",
                     color: "text.secondary",
@@ -335,6 +375,7 @@ export function CalendarAccessRights({
                     </MenuItem>
                   ))}
                 </Select>
+                {(isPersonalCalendar || isDelegatedWithAdministration) && (
                   <IconButton
                     size="small"
                     aria-label={t("actions.remove")}
@@ -343,12 +384,12 @@ export function CalendarAccessRights({
                   >
                     <HighlightOffIcon fontSize="small" />
                   </IconButton>
-                </Box>
-              </Box>
-            ))}
-          </Box>
-        )
                 )}
+              </Box>
+            </Box>
+          ))
+        )}
+      </Box>
     </FieldWithLabel>
   );
 }

src/components/Calendar/CalendarModal.tsx

@@ -39,6 +39,16 @@ function CalendarPopover({
   const isOwn = calendar?.id
     ? extractEventBaseUuid(calendar.id) === userData.openpaasId
     : true;
+  const canManageInvites =
+    isOwn ||
+    !!calendar?.invite?.some((invite) => {
+      const inviteEmail = invite.href
+        .replace(/^mailto:/i, "")
+        .trim()
+        .toLowerCase();
+      const currentEmail = userData.email?.trim().toLowerCase();
+      return inviteEmail === currentEmail && invite.access === 5;
+    });
 
   // existing calendar params
   const [name, setName] = useState("");
@@ -146,7 +156,7 @@ function CalendarPopover({
       .filter((u) => !!normaliseEmail(u) && !currentMap.has(normaliseEmail(u)))
       .map((u) => ({ "dav:href": `mailto:${normaliseEmail(u)}` }));
 
-    if (set.length === 0 && remove.length === 0) return;
+    if ((set.length === 0 && remove.length === 0) || !canManageInvites) return;
 
     await dispatch(
       updateDelegationCalendarAsync({

src/locales/en.json

@@ -84,8 +84,10 @@
     },
     "access": {
       "grantAccessRights": "Grant Access rights",
+      "accessRights": "Access rights",
       "viewAllEvents": "View all events",
       "editor": "Editor",
+      "owner": "Owner",
       "administrator": "Administrator"
     }
   },

src/locales/fr.json

@@ -86,6 +86,7 @@
     },
     "access": {
       "grantAccessRights": "Accorder des droits d'accès",
+      "accessRights": "Droits d'accès",
       "viewAllEvents": "Voir tous les événements",
       "editor": "Éditeur",
       "administrator": "Administrateur"

src/locales/ru.json

@@ -86,6 +86,7 @@
     },
     "access": {
       "grantAccessRights": "Предоставить права доступа",
+      "accessRights": "Права доступа",
       "viewAllEvents": "Просмотр всех событий",
       "editor": "Редактор",
       "administrator": "Администратор"

src/locales/vi.json

@@ -84,6 +84,7 @@
     },
     "access": {
       "grantAccessRights": "Cấp quyền truy cập",
+      "accessRights": "Quyền truy cập",
       "viewAllEvents": "Xem tất cả sự kiện",
       "editor": "Biên tập viên",
       "administrator": "Quản trị viên"

src/utils/normalizeEmail.tsx

@@ -0,0 +1,3 @@
+export function normalizeEmail(email?: string) {
+  return email?.trim().toLowerCase() ?? "";
+}