fix(api): fix admin/editor level permissions for v2 DM api

Author: OliverDudgeon

components/ManageUsers.tsx

@@ -6,10 +6,6 @@ import { Autocomplete, Chip, TextField } from "@mui/material";
 import type { AutocompleteChangeReason } from "@mui/material/useAutocomplete";
 
 export interface ManageUsersProps {
-  /**
-   * User's username
-   */
-  currentUsername: string;
   /**
    * Array of current users
    */
@@ -38,7 +34,6 @@ export interface ManageUsersProps {
  * The current user is assumed to always be included.
  */
 export const ManageUsers: FC<ManageUsersProps> = ({
-  currentUsername,
   users,
   isLoading = false,
   title,
@@ -72,7 +67,6 @@ export const ManageUsers: FC<ManageUsersProps> = ({
       fullWidth
       multiple
       disabled={loading}
-      getOptionDisabled={(option) => option === currentUsername}
       id={title.toLowerCase().replace(/\s/g, "")}
       loading={loading}
       options={availableUsers.map((user) => user.username)}
@@ -84,14 +78,14 @@ export const ManageUsers: FC<ManageUsersProps> = ({
             <Chip
               label={option}
               variant="outlined"
-              onDelete={option !== currentUsername ? onDelete : undefined}
+              onDelete={onDelete}
               {...chipProps}
               key={option}
             />
           );
         })
       }
-      value={[currentUsername, ...users]}
+      value={users}
       onChange={(_, value, reason) => updateUsers(value, reason)}
     />
   );

components/instances/ResultApplicationCard.tsx

@@ -2,7 +2,7 @@ import type { InstanceGetResponse, InstanceSummary } from "@squonk/data-manager-
 
 import { CardContent, ListItem, ListItemText } from "@mui/material";
 
-import { useIsEditorOfCurrentProject, useProjectFromId } from "../../hooks/projectHooks";
+import { useIsUserAdminOrEditorOfCurrentProject, useProjectFromId } from "../../hooks/projectHooks";
 import { HrefButton } from "../HrefButton";
 import { ProjectListItem } from "../projects/ProjectListItem";
 import { ResultCard } from "../results/ResultCard";
@@ -36,14 +36,14 @@ export const ResultApplicationCard = ({
 
   const associatedProject = useProjectFromId(instance.project_id);
 
-  const isEditor = useIsEditorOfCurrentProject();
+  const hasPermission = useIsUserAdminOrEditorOfCurrentProject();
 
   return (
     <ResultCard
       actions={({ setSlideIn }) => (
         <>
           <TerminateInstance
-            disabled={!isEditor}
+            disabled={!hasPermission}
             instanceId={instanceId}
             phase={instance.phase}
             projectId={instance.project_id}

components/instances/ResultJobCard.tsx

@@ -5,7 +5,7 @@ import { Alert, CardContent, ListItem, ListItemText } from "@mui/material";
 import { LogsButton } from "../../components/results/LogsButton";
 import { RerunJobButton } from "../../components/results/RerunJobButton";
 import { ResultCard } from "../../components/results/ResultCard";
-import { useIsEditorOfCurrentProject, useProjectFromId } from "../../hooks/projectHooks";
+import { useIsUserAdminOrEditorOfCurrentProject, useProjectFromId } from "../../hooks/projectHooks";
 import { ProjectListItem } from "../projects/ProjectListItem";
 import { ArchivedStatus } from "./ArchivedStatus";
 import { ArchiveInstance } from "./ArchiveInstance";
@@ -40,7 +40,7 @@ export const ResultJobCard = ({
 
   const associatedProject = useProjectFromId(instance.project_id);
 
-  const isEditor = useIsEditorOfCurrentProject();
+  const hasPermission = useIsUserAdminOrEditorOfCurrentProject();
 
   if (instance.job_id === undefined) {
     return <Alert severity="error">Instance is missing a job ID</Alert>;
@@ -51,13 +51,13 @@ export const ResultJobCard = ({
       actions={({ setSlideIn }) => (
         <>
           <TerminateInstance
-            disabled={!isEditor}
+            disabled={!hasPermission}
             instanceId={instanceId}
             phase={instance.phase}
             projectId={instance.project_id}
             onTermination={() => setSlideIn(false)}
           />
-          <RerunJobButton disabled={!isEditor} instance={instance} />
+          <RerunJobButton disabled={!hasPermission} instance={instance} />
           <LogsButton instance={instance} instanceId={instanceId} />
           <ArchiveInstance archived={instance.archived} instanceId={instanceId} />
         </>

components/projects/EditProjectButton/EditProjectButton.tsx

@@ -5,9 +5,9 @@ import type { ProjectDetail } from "@squonk/data-manager-client";
 import { Edit as EditIcon } from "@mui/icons-material";
 import { Box, IconButton, Tooltip, Typography } from "@mui/material";
 
-import { useKeycloakUser } from "../../../hooks/useKeycloakUser";
 import { ModalWrapper } from "../../modals/ModalWrapper";
 import { PrivateProjectToggle } from "./PrivateProjectToggle";
+import { ProjectAdministrators } from "./ProjectAdministrators";
 import { ProjectEditors } from "./ProjectEditors";
 import { ProjectObservers } from "./ProjectObservers";
 
@@ -24,20 +24,16 @@ export interface EditProjectButtonProps {
 export const EditProjectButton = ({ project }: EditProjectButtonProps) => {
   const [open, setOpen] = useState(false);
 
-  const { user } = useKeycloakUser();
-  const isEditor = !!user.username && !!project.editors.includes(user.username);
-
   return (
     <>
-      {isEditor && (
-        <Tooltip title={"Edit Project"}>
-          <span>
-            <IconButton size="small" sx={{ p: "1px" }} onClick={() => setOpen(!open)}>
-              <EditIcon />
-            </IconButton>
-          </span>
-        </Tooltip>
-      )}
+      <Tooltip title={"Edit Project"}>
+        <span>
+          <IconButton size="small" sx={{ p: "1px" }} onClick={() => setOpen(!open)}>
+            <EditIcon />
+          </IconButton>
+        </span>
+      </Tooltip>
+
       <ModalWrapper
         DialogProps={{ maxWidth: "sm", fullWidth: true }}
         id="edit-project"
@@ -50,13 +46,12 @@ export const EditProjectButton = ({ project }: EditProjectButtonProps) => {
           {project.name}
         </Typography>
 
-        <Typography gutterBottom>
-          <b>Owner</b>: {project.owner}
-        </Typography>
+        <Typography gutterBottom>{/* <b>Owner</b>: {project.owner} */}</Typography>
 
         <PrivateProjectToggle isPrivate={project.private} projectId={project.project_id} />
 
         <Box display="flex" flexDirection="column" gap={2}>
+          <ProjectAdministrators project={project} />
           <ProjectEditors project={project} />
           <ProjectObservers project={project} />
         </Box>

components/projects/EditProjectButton/ProjectAdministrators.tsx

@@ -0,0 +1,47 @@
+import type { ProjectDetail } from "@squonk/data-manager-client";
+import {
+  getGetProjectQueryKey,
+  getGetProjectsQueryKey,
+  useAddAdministratorToProject,
+  useGetProjects,
+  useRemoveAdministratorFromProject,
+} from "@squonk/data-manager-client/project";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import { ProjectMemberSelection } from "./ProjectMemberSelection";
+
+export interface ProjectAdministratorsProps {
+  /**
+   * Project to be edited.
+   */
+  project: ProjectDetail;
+}
+
+/**
+ * MuiAutocomplete to manage the current administrators of the selected project
+ */
+export const ProjectAdministrators = ({ project }: ProjectAdministratorsProps) => {
+  const { isLoading: isProjectsLoading } = useGetProjects();
+
+  const { mutateAsync: addAdministrator, isPending: isAdding } = useAddAdministratorToProject();
+  const { mutateAsync: removeAdministrator, isPending: isRemoving } =
+    useRemoveAdministratorFromProject();
+  const queryClient = useQueryClient();
+
+  return (
+    <ProjectMemberSelection
+      addMember={(userId) => addAdministrator({ projectId: project.project_id, userId })}
+      isLoading={isAdding || isRemoving || isProjectsLoading}
+      memberList={project.administrators}
+      removeMember={(userId) => removeAdministrator({ projectId: project.project_id, userId })}
+      title="Administrators"
+      onSettled={() =>
+        Promise.all([
+          queryClient.invalidateQueries({ queryKey: getGetProjectQueryKey(project.project_id) }),
+          queryClient.invalidateQueries({ queryKey: getGetProjectsQueryKey() }),
+        ])
+      }
+    />
+  );
+};

components/projects/EditProjectButton/ProjectEditors.tsx

@@ -1,4 +1,4 @@
-import type { DmError, ProjectDetail } from "@squonk/data-manager-client";
+import type { ProjectDetail } from "@squonk/data-manager-client";
 import {
   getGetProjectQueryKey,
   getGetProjectsQueryKey,
@@ -9,9 +9,7 @@ import {
 
 import { useQueryClient } from "@tanstack/react-query";
 
-import { useEnqueueError } from "../../../hooks/useEnqueueStackError";
-import { useKeycloakUser } from "../../../hooks/useKeycloakUser";
-import { ManageUsers } from "../../ManageUsers";
+import { ProjectMemberSelection } from "./ProjectMemberSelection";
 
 export interface ProjectEditorsProps {
   /**
@@ -24,54 +22,25 @@ export interface ProjectEditorsProps {
  * MuiAutocomplete to manage the current editors of the selected project
  */
 export const ProjectEditors = ({ project }: ProjectEditorsProps) => {
-  const { user: currentUser } = useKeycloakUser();
-
   const { isLoading: isProjectsLoading } = useGetProjects();
+
   const { mutateAsync: addEditor, isPending: isAdding } = useAddEditorToProject();
   const { mutateAsync: removeEditor, isPending: isRemoving } = useRemoveEditorFromProject();
   const queryClient = useQueryClient();
 
-  const { enqueueError, enqueueSnackbar } = useEnqueueError<DmError>();
-
-  if (currentUser.username) {
-    return (
-      <ManageUsers
-        currentUsername={currentUser.username}
-        isLoading={isAdding || isRemoving || isProjectsLoading}
-        title="Editors"
-        users={project.editors.filter((user) => user !== currentUser.username)}
-        onRemove={async (value) => {
-          const username = project.editors.find((editor) => !value.includes(editor));
-          if (username) {
-            try {
-              await removeEditor({ projectId: project.project_id, userId: username });
-            } catch (error) {
-              enqueueError(error);
-            }
-            // DM Queries
-            queryClient.invalidateQueries({ queryKey: getGetProjectQueryKey(project.project_id) });
-            queryClient.invalidateQueries({ queryKey: getGetProjectsQueryKey() });
-          } else {
-            enqueueSnackbar("Username not found", { variant: "warning" });
-          }
-        }}
-        onSelect={async (value) => {
-          const username = value.find((user) => !project.editors.includes(user));
-          if (username) {
-            try {
-              await addEditor({ projectId: project.project_id, userId: username });
-            } catch (error) {
-              enqueueError(error);
-            }
-            // DM Queries
-            queryClient.invalidateQueries({ queryKey: getGetProjectQueryKey(project.project_id) });
-            queryClient.invalidateQueries({ queryKey: getGetProjectsQueryKey() });
-          } else {
-            enqueueSnackbar("Username not found", { variant: "warning" });
-          }
-        }}
-      />
-    );
-  }
-  return null;
+  return (
+    <ProjectMemberSelection
+      addMember={(userId) => addEditor({ projectId: project.project_id, userId })}
+      isLoading={isAdding || isRemoving || isProjectsLoading}
+      memberList={project.editors}
+      removeMember={(userId) => removeEditor({ projectId: project.project_id, userId })}
+      title="Editors"
+      onSettled={() =>
+        Promise.all([
+          queryClient.invalidateQueries({ queryKey: getGetProjectQueryKey(project.project_id) }),
+          queryClient.invalidateQueries({ queryKey: getGetProjectsQueryKey() }),
+        ])
+      }
+    />
+  );
 };

components/projects/EditProjectButton/ProjectMemberSelection.tsx

@@ -0,0 +1,75 @@
+import type { DmError } from "@squonk/data-manager-client";
+
+import { useEnqueueError } from "../../../hooks/useEnqueueStackError";
+import { useKeycloakUser } from "../../../hooks/useKeycloakUser";
+import { ManageUsers } from "../../ManageUsers";
+
+type Callback = (userId: string) => Promise<void>;
+
+export interface ProjectMemberSelectionProps {
+  title: string;
+  /**
+   * Project to be edited.
+   */
+  memberList: string[];
+  addMember: Callback;
+  removeMember: Callback;
+  onSettled: () => Promise<unknown>;
+  /**
+   * Loading state of async operations
+   */
+  isLoading: boolean;
+}
+
+/**
+ * MuiAutocomplete to manage the current editors of the selected project
+ */
+export const ProjectMemberSelection = ({
+  title,
+  memberList,
+  addMember,
+  removeMember,
+  onSettled,
+  isLoading,
+}: ProjectMemberSelectionProps) => {
+  const { user: currentUser } = useKeycloakUser();
+
+  const { enqueueError, enqueueSnackbar } = useEnqueueError<DmError>();
+
+  if (currentUser.username) {
+    return (
+      <ManageUsers
+        isLoading={isLoading}
+        title={title}
+        users={memberList}
+        onRemove={async (value) => {
+          const username = memberList.find((editor) => !value.includes(editor));
+          if (username) {
+            try {
+              await removeMember(username);
+            } catch (error) {
+              enqueueError(error);
+            }
+            await onSettled();
+          } else {
+            enqueueSnackbar("Username not found", { variant: "warning" });
+          }
+        }}
+        onSelect={async (value) => {
+          const username = value.slice(-1).pop();
+          if (username) {
+            try {
+              await addMember(username);
+            } catch (error) {
+              enqueueError(error);
+            }
+            await onSettled();
+          } else {
+            enqueueSnackbar("Username not found", { variant: "warning" });
+          }
+        }}
+      />
+    );
+  }
+  return null;
+};