fix(edit-unit): fix permissions of editing unit members, names and default privacy

Author: OliverDudgeon

package.json

@@ -52,7 +52,7 @@
     "@rjsf/utils": "5.18.3",
     "@rjsf/validator-ajv8": "5.18.3",
     "@sentry/nextjs": "7.112.2",
-    "@squonk/account-server-client": "2.1.2",
+    "@squonk/account-server-client": "2.1.4",
     "@squonk/data-manager-client": "2.0.11-rc.1",
     "@squonk/mui-theme": "3.0.2",
     "@squonk/sdf-parser": "1.3.0",

pnpm-lock.yaml

@@ -9,7 +9,6 @@ import { MenuItem, TextField } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useEnqueueError } from "../../hooks/useEnqueueStackError";
-import { useKeycloakUser } from "../../hooks/useKeycloakUser";
 import { useSelectedOrganisation } from "../../state/organisationSelection";
 import { useSelectedUnit } from "../../state/unitSelection";
 import { capitalise, shoutSnakeToLowerCase } from "../../utils/app/language";
@@ -19,8 +18,6 @@ export interface EditDefaultPrivacyProps {
 }
 
 export const EditDefaultPrivacy = ({ unit }: EditDefaultPrivacyProps) => {
-  const { user } = useKeycloakUser();
-
   const [organisation] = useSelectedOrganisation();
   const [, setUnit] = useSelectedUnit();
 
@@ -47,12 +44,11 @@ export const EditDefaultPrivacy = ({ unit }: EditDefaultPrivacyProps) => {
     }
   };
 
-  // const isOrganisationMember = organisation?.caller_is_member;
-  const isUnitOwner = unit.owner_id === user.username;
+  const isOrganisationMember = organisation?.caller_is_member;
+  const isUnitMember = unit.caller_is_member;
   const isPersonalUnit = organisation?.name === process.env.NEXT_PUBLIC_DEFAULT_ORG_NAME;
 
-  // const allowedToEdit = !isPersonalUnit && (isUnitOwner || isOrganisationMember);
-  const allowedToEdit = !isPersonalUnit && isUnitOwner;
+  const allowedToEdit = !isPersonalUnit && (!!isOrganisationMember || isUnitMember);
 
   const helperText = isPersonalUnit
     ? "Default project privacy of personal units may not be changed"

src/components/units/EditDefaultPrivacy.tsx

@@ -14,7 +14,6 @@ import { useQueryClient } from "@tanstack/react-query";
 import { type AxiosError } from "axios";
 
 import { useEnqueueError } from "../../hooks/useEnqueueStackError";
-import { useKeycloakUser } from "../../hooks/useKeycloakUser";
 import { useSelectedOrganisation } from "../../state/organisationSelection";
 import { useSelectedUnit } from "../../state/unitSelection";
 import { getErrorMessage } from "../../utils/next/orvalError";
@@ -24,8 +23,6 @@ export interface EditUnitProps {
 }
 
 export const EditUnitName = ({ unit }: EditUnitProps) => {
-  const { user } = useKeycloakUser();
-
   const [organisation] = useSelectedOrganisation();
   const [, setUnit] = useSelectedUnit();
   const [name, setName] = useState(unit.name);
@@ -74,12 +71,11 @@ export const EditUnitName = ({ unit }: EditUnitProps) => {
     }
   };
 
-  // const isOrganisationMember = organisation?.caller_is_member;
-  const isUnitOwner = unit.owner_id === user.username;
+  const isOrganisationMember = organisation?.caller_is_member;
+  const isUnitMember = unit.caller_is_member;
   const isPersonalUnit = organisation?.name === process.env.NEXT_PUBLIC_DEFAULT_ORG_NAME;
 
-  // const allowedToEdit = !isPersonalUnit && (isUnitOwner || isOrganisationMember);
-  const allowedToEdit = !isPersonalUnit && isUnitOwner;
+  const allowedToEdit = !isPersonalUnit && (!!isOrganisationMember || isUnitMember);
 
   const helperText = isPersonalUnit
     ? "Names of personal units may not be changed"

src/components/units/EditUnitName.tsx

@@ -7,7 +7,6 @@ import {
 } from "@squonk/account-server-client/user";
 import { type DmError } from "@squonk/data-manager-client";
 
-import { Typography } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useEnqueueError } from "../../hooks/useEnqueueStackError";
@@ -16,51 +15,59 @@ import { useSelectedOrganisation } from "../../state/organisationSelection";
 import { CenterLoader } from "../CenterLoader";
 import { ManageUsers } from "../ManageUsers";
 
-export interface UnitEditorsProps {
+export interface UnitMembersProps {
   /**
    * Unit to be edited.
    */
   unit: UnitDetail;
 }
 
 /**
- * MuiAutocomplete to manage the current editors of the selected project
+ * MuiAutocomplete to manage the current members of the selected project
  */
-export const UnitEditors = ({ unit }: UnitEditorsProps) => {
+export const UnitMembers = ({ unit }: UnitMembersProps) => {
   const { user: currentUser } = useKeycloakUser();
 
   const [organisation] = useSelectedOrganisation();
 
   const { data, isLoading: isUsersLoading } = useGetOrganisationUnitUsers(unit.id, {
     query: { enabled: !!unit.caller_is_member || organisation?.caller_is_member },
   });
-  const users = data?.users;
-  const { mutateAsync: addEditor, isPending: isAdding } = useAddOrganisationUnitUser();
-  const { mutateAsync: removeEditor, isPending: isRemoving } = useDeleteOrganisationUnitUser();
+  const users = data?.users ?? [];
+  const { mutateAsync: addMember, isPending: isAdding } = useAddOrganisationUnitUser();
+  const { mutateAsync: removeMember, isPending: isRemoving } = useDeleteOrganisationUnitUser();
   const queryClient = useQueryClient();
 
   const { enqueueError, enqueueSnackbar } = useEnqueueError<DmError>();
 
+  const isOrganisationMember = organisation?.caller_is_member;
+  const isUnitMember = unit.caller_is_member;
   const isPersonalUnit = organisation?.name === process.env.NEXT_PUBLIC_DEFAULT_ORG_NAME;
 
+  const helperText = isPersonalUnit
+    ? "Members of personal unit may not be changed"
+    : !isOrganisationMember || !isUnitMember
+      ? "You must be a unit or organisation member to view and modify unit members"
+      : undefined;
+
   if (isUsersLoading) {
     return <CenterLoader />;
   }
 
-  if (users && currentUser.username) {
+  if (currentUser.username) {
     return (
       <ManageUsers
-        disabled={isPersonalUnit}
+        disabled={!!helperText}
         disabledUsers={[unit.owner_id]}
-        helperText={isPersonalUnit ? "Editors of personal unit may not be changed" : undefined}
+        helperText={helperText}
         isLoading={isAdding || isRemoving || isUsersLoading}
-        title="Unit Editors"
+        title="Unit Members"
         users={users.map((user) => user.id)}
         onRemove={async (value) => {
-          const user = users.find((editor) => !value.includes(editor.id));
+          const user = users.find((member) => !value.includes(member.id));
           if (user) {
             try {
-              await removeEditor({ unitId: unit.id, userId: user.id });
+              await removeMember({ unitId: unit.id, userId: user.id });
             } catch (error) {
               enqueueError(error);
             }
@@ -76,7 +83,7 @@ export const UnitEditors = ({ unit }: UnitEditorsProps) => {
           const username = value.reverse().find((user) => !users.map((u) => u.id).includes(user));
           if (username) {
             try {
-              await addEditor({ unitId: unit.id, userId: username });
+              await addMember({ unitId: unit.id, userId: username });
             } catch (error) {
               enqueueError(error);
             }
@@ -91,5 +98,6 @@ export const UnitEditors = ({ unit }: UnitEditorsProps) => {
       />
     );
   }
-  return <Typography>You must be a unit or organisation member to modify unit editors</Typography>;
+
+  return null;
 };

src/components/units/UnitEditors.tsx renamed to src/components/units/UnitMembers.tsx

@@ -8,7 +8,7 @@ import { Box, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mu
 import { ModalWrapper } from "../../../../../components/modals/ModalWrapper";
 import { EditDefaultPrivacy } from "../../../../../components/units/EditDefaultPrivacy";
 import { EditUnitName } from "../../../../../components/units/EditUnitName";
-import { UnitEditors } from "../../../../../components/units/UnitEditors";
+import { UnitMembers } from "../../../../../components/units/UnitMembers";
 
 export interface EditUnitListItemProps {
   unit: UnitDetail;
@@ -43,9 +43,9 @@ export const EditUnitListItem = ({ unit }: EditUnitListItemProps) => {
           </Typography>
           <EditDefaultPrivacy unit={unit} />
           <Typography component="h3" variant="h4">
-            Editors
+            Members
           </Typography>
-          <UnitEditors unit={unit} />
+          <UnitMembers unit={unit} />
         </Box>
       </ModalWrapper>
     </>