feat(edit-unit): add option to change a unit's default product privacy

OliverDudgeon · OliverDudgeon · commit b6a22a6622d5 · 2024-05-01T21:34:08.000+01:00
diff --git a/components/ManageUsers.tsx b/components/ManageUsers.tsx
@@ -10,10 +10,22 @@ export interface ManageUsersProps {
    * Array of current users
    */
   users: string[];
+  /**
+   * Users that will be displayed but not selectable
+   */
+  disabledUsers?: string[];
   /**
    * Whether the component should be in a loading state
    */
   isLoading?: boolean;
+  /**
+   * Whether the field should be disabled. Overridden by loading state.
+   */
+  disabled?: boolean;
+  /**
+   * Text to display under the field
+   */
+  helperText?: string;
   /**
    * Text used for component ID and placeholder text, E.g. "editors".
    */
@@ -35,8 +47,11 @@ export interface ManageUsersProps {
  */
 export const ManageUsers: FC<ManageUsersProps> = ({
   users,
+  disabledUsers = [],
   isLoading = false,
+  disabled = false,
   title,
+  helperText,
   onSelect,
   onRemove,
 }) => {
@@ -60,17 +75,20 @@ export const ManageUsers: FC<ManageUsersProps> = ({
     }
   };
 
+  // TODO: when removing yourself, allow a warning dialog to be displayed
+
   return (
     <Autocomplete
       disableClearable
       freeSolo
       fullWidth
       multiple
-      disabled={loading}
+      disabled={disabled || loading}
+      getOptionDisabled={(user) => disabledUsers.includes(user)}
       id={title.toLowerCase().replace(/\s/gu, "")}
       loading={loading}
       options={availableUsers.map((user) => user.username)}
-      renderInput={(params) => <TextField {...params} label={title} />}
+      renderInput={(params) => <TextField {...params} helperText={helperText} label={title} />}
       renderTags={(value, getTagProps) =>
         value.map((option: string, index: number) => {
           const { onDelete, ...chipProps } = getTagProps({ index });
diff --git a/components/units/EditDefaultPrivacy.tsx b/components/units/EditDefaultPrivacy.tsx
@@ -0,0 +1,81 @@
+import { type UnitDetail, UnitDetailDefaultProductPrivacy } from "@squonk/account-server-client";
+import {
+  getGetUnitQueryKey,
+  getGetUnitsQueryKey,
+  usePatchUnit,
+} from "@squonk/account-server-client/unit";
+
+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";
+
+export interface EditDefaultPrivacyProps {
+  unit: UnitDetail;
+}
+
+export const EditDefaultPrivacy = ({ unit }: EditDefaultPrivacyProps) => {
+  const { user } = useKeycloakUser();
+
+  const [organisation] = useSelectedOrganisation();
+  const [, setUnit] = useSelectedUnit();
+
+  const { mutateAsync: patchUnit, isPending } = usePatchUnit();
+  const { enqueueError, enqueueSnackbar } = useEnqueueError();
+  const queryClient = useQueryClient();
+
+  const handleSelection = async (newValue: UnitDetailDefaultProductPrivacy) => {
+    try {
+      await patchUnit({
+        unitId: unit.id,
+        data: {
+          default_product_privacy: newValue,
+        },
+      });
+      await queryClient.invalidateQueries({ queryKey: getGetUnitsQueryKey() });
+      await queryClient.invalidateQueries({ queryKey: getGetUnitQueryKey(unit.id) });
+      enqueueSnackbar("Unit default privacy updated", { variant: "success" });
+
+      const newUnit = { ...unit, default_product_privacy: newValue } satisfies UnitDetail;
+      setUnit(newUnit);
+    } catch (error) {
+      enqueueError(error);
+    }
+  };
+
+  // const isOrganisationMember = organisation?.caller_is_member;
+  const isUnitOwner = unit.owner_id === user.username;
+  const isPersonalUnit = organisation?.name === process.env.NEXT_PUBLIC_DEFAULT_ORG_NAME;
+
+  // const allowedToEdit = !isPersonalUnit && (isUnitOwner || isOrganisationMember);
+  const allowedToEdit = !isPersonalUnit && isUnitOwner;
+
+  const helperText = isPersonalUnit
+    ? "Default project privacy of personal units may not be changed"
+    : allowedToEdit
+      ? undefined
+      : "You must be the unit owner or have the admin role to edit the unit default project privacy";
+
+  return (
+    <TextField
+      select
+      disabled={isPending || !allowedToEdit}
+      helperText={helperText}
+      label="Default project privacy"
+      value={unit.default_product_privacy}
+      onChange={(event) =>
+        void handleSelection(event.target.value as UnitDetailDefaultProductPrivacy)
+      }
+    >
+      {Object.values(UnitDetailDefaultProductPrivacy).map((rule) => (
+        <MenuItem key={rule} value={rule}>
+          {capitalise(shoutSnakeToLowerCase(rule))}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
diff --git a/components/units/EditUnitName.tsx b/components/units/EditUnitName.tsx
@@ -14,6 +14,7 @@ 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";
@@ -22,7 +23,9 @@ export interface EditUnitProps {
   unit: UnitDetail;
 }
 
-export const EditUnit = ({ unit }: EditUnitProps) => {
+export const EditUnitName = ({ unit }: EditUnitProps) => {
+  const { user } = useKeycloakUser();
+
   const [organisation] = useSelectedOrganisation();
   const [, setUnit] = useSelectedUnit();
   const [name, setName] = useState(unit.name);
@@ -71,15 +74,33 @@ export const EditUnit = ({ unit }: EditUnitProps) => {
     }
   };
 
+  // const isOrganisationMember = organisation?.caller_is_member;
+  const isUnitOwner = unit.owner_id === user.username;
+  const isPersonalUnit = organisation?.name === process.env.NEXT_PUBLIC_DEFAULT_ORG_NAME;
+
+  // const allowedToEdit = !isPersonalUnit && (isUnitOwner || isOrganisationMember);
+  const allowedToEdit = !isPersonalUnit && isUnitOwner;
+
+  const helperText = isPersonalUnit
+    ? "Names of personal units may not be changed"
+    : allowedToEdit
+      ? undefined
+      : "You must be the unit owner to edit the unit name";
+
   return (
-    <Box display="flex" gap={1}>
+    <Box alignItems="baseline" display="flex" gap={1}>
       <TextField
         fullWidth
+        disabled={!allowedToEdit}
+        helperText={helperText}
         label="Unit Name"
         value={name}
         onChange={(e) => setName(e.target.value)}
       />
-      <Button disabled={isPending || name === unit.name} onClick={() => void updateHandler()}>
+      <Button
+        disabled={isPending || name === unit.name || !allowedToEdit}
+        onClick={() => void updateHandler()}
+      >
         Update
       </Button>
     </Box>
diff --git a/components/units/UnitEditors.tsx b/components/units/UnitEditors.tsx
@@ -7,10 +7,13 @@ 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";
 import { useKeycloakUser } from "../../hooks/useKeycloakUser";
+import { useSelectedOrganisation } from "../../state/organisationSelection";
+import { CenterLoader } from "../CenterLoader";
 import { ManageUsers } from "../ManageUsers";
 
 export interface UnitEditorsProps {
@@ -26,20 +29,33 @@ export interface UnitEditorsProps {
 export const UnitEditors = ({ unit }: UnitEditorsProps) => {
   const { user: currentUser } = useKeycloakUser();
 
-  const { data, isLoading: isUsersLoading } = useGetOrganisationUnitUsers(unit.id);
+  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 queryClient = useQueryClient();
 
   const { enqueueError, enqueueSnackbar } = useEnqueueError<DmError>();
 
+  const isPersonalUnit = organisation?.name === process.env.NEXT_PUBLIC_DEFAULT_ORG_NAME;
+
+  if (isUsersLoading) {
+    return <CenterLoader />;
+  }
+
   if (users && currentUser.username) {
     return (
       <ManageUsers
+        disabled={isPersonalUnit}
+        disabledUsers={[unit.owner_id]}
+        helperText={isPersonalUnit ? "Editors of personal unit may not be changed" : undefined}
         isLoading={isAdding || isRemoving || isUsersLoading}
         title="Unit Editors"
-        users={users.filter((user) => user.id !== currentUser.username).map((user) => user.id)}
+        users={users.map((user) => user.id)}
         onRemove={async (value) => {
           const user = users.find((editor) => !value.includes(editor.id));
           if (user) {
@@ -75,5 +91,5 @@ export const UnitEditors = ({ unit }: UnitEditorsProps) => {
       />
     );
   }
-  return null;
+  return <Typography>You must be a unit or organisation member to modify unit editors</Typography>;
 };
diff --git a/features/userSettings/UserSettingsContent/ContextSection/contextActions/EditUnitListItem.tsx b/features/userSettings/UserSettingsContent/ContextSection/contextActions/EditUnitListItem.tsx
@@ -6,7 +6,8 @@ import { Edit as EditIcon } from "@mui/icons-material";
 import { Box, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
 
 import { ModalWrapper } from "../../../../../components/modals/ModalWrapper";
-import { EditUnit } from "../../../../../components/units/EditUnit";
+import { EditDefaultPrivacy } from "../../../../../components/units/EditDefaultPrivacy";
+import { EditUnitName } from "../../../../../components/units/EditUnitName";
 import { UnitEditors } from "../../../../../components/units/UnitEditors";
 
 export interface EditUnitListItemProps {
@@ -32,10 +33,15 @@ export const EditUnitListItem = ({ unit }: EditUnitListItemProps) => {
         onClose={() => setOpen(false)}
       >
         <Box display="flex" flexDirection="column" gap={2}>
+          <Typography variant="subtitle1">Owner: {unit.owner_id}</Typography>
           <Typography component="h3" variant="h4">
             Name
           </Typography>
-          <EditUnit unit={unit} />
+          <EditUnitName unit={unit} />
+          <Typography component="h3" variant="h4">
+            Default Project Privacy
+          </Typography>
+          <EditDefaultPrivacy unit={unit} />
           <Typography component="h3" variant="h4">
             Editors
           </Typography>
diff --git a/features/userSettings/UserSettingsContent/ContextSection/contextActions/UnitActions.tsx b/features/userSettings/UserSettingsContent/ContextSection/contextActions/UnitActions.tsx
@@ -37,11 +37,8 @@ export const UnitActions = () => {
       {!!isUnitOwner && !!unit && (
         <DeleteUnitListItem unit={unit} onDelete={() => setUnit(undefined)} />
       )}
-      {!!isUnitOwner &&
-        !!unit &&
-        organisation?.name !== process.env.NEXT_PUBLIC_DEFAULT_ORG_NAME && (
-          <EditUnitListItem unit={unit} />
-        )}
+
+      {!!unit && <EditUnitListItem unit={unit} />}
       {!!unit && !!(unit.caller_is_member || unit.owner_id === user.username) && (
         <CreateProjectListItem unit={unit} />
       )}
