fix: disable run, rerun and delete/terminate buttons when the user isn't a project editor

Author: OliverDudgeon

components/executionsCards/ApplicationCard/ApplicationCard.tsx

@@ -3,6 +3,7 @@ import type { ApplicationSummary } from "@squonk/data-manager-client";
 import { CircularProgress, useTheme } from "@mui/material";
 import dynamic from "next/dynamic";
 
+import { useIsEditorOfCurrentProject } from "../../../hooks/projectHooks";
 import { BaseCard } from "../../BaseCard";
 import type { InstancesListProps } from "../InstancesList";
 import type { ApplicationModalButtonProps } from "./ApplicationModalButton";
@@ -31,11 +32,14 @@ export interface ApplicationCardProps extends Pick<ApplicationModalButtonProps,
 export const ApplicationCard = ({ app, projectId }: ApplicationCardProps) => {
   const theme = useTheme();
 
+  const isEditor = useIsEditorOfCurrentProject();
+
   return (
     <BaseCard
       actions={({ setExpanded }) => (
         <ApplicationModalButton
           applicationId={app.application_id}
+          disabled={!isEditor}
           projectId={projectId}
           onLaunch={() => setExpanded(true)}
         />

components/executionsCards/ApplicationCard/ApplicationModalButton.tsx

@@ -12,10 +12,10 @@ const ApplicationModal = dynamic<ApplicationModalProps>(
   },
 );
 
-export type ApplicationModalButtonProps = Pick<
-  ApplicationModalProps,
-  "onLaunch" | "applicationId" | "projectId"
->;
+export interface ApplicationModalButtonProps
+  extends Pick<ApplicationModalProps, "onLaunch" | "applicationId" | "projectId"> {
+  disabled?: boolean;
+}
 
 /**
  * Button controlling a modal that allows the user to create an new instance of an application
@@ -24,6 +24,7 @@ export const ApplicationModalButton = ({
   applicationId,
   projectId,
   onLaunch,
+  disabled,
 }: ApplicationModalButtonProps) => {
   const [open, setOpen] = useState(false);
   const [hasOpened, setHasOpened] = useState(false);
@@ -34,7 +35,7 @@ export const ApplicationModalButton = ({
         <span>
           <Button
             color="primary"
-            disabled={!projectId}
+            disabled={!projectId || disabled}
             onClick={() => {
               setOpen(true);
               setHasOpened(true);

components/executionsCards/JobCard/JobCard.tsx

@@ -19,20 +19,24 @@ export interface ApplicationCardProps extends Pick<RunJobButtonProps, "projectId
    * the job to be instantiated
    */
   job: JobSummary;
+  /**
+   * Whether to disable the button
+   */
+  disabled?: boolean;
 }
 
 /**
  * MuiCard that displays a summary of a job with actions to create new instances and view
  * existing instances.
  */
-export const JobCard = ({ projectId, job }: ApplicationCardProps) => {
+export const JobCard = ({ projectId, job, disabled = false }: ApplicationCardProps) => {
   const theme = useTheme();
 
   return (
     <BaseCard
       actions={({ setExpanded }) => (
         <RunJobButton
-          disabled={job.disabled}
+          disabled={job.disabled || disabled}
           jobId={job.id}
           projectId={projectId}
           onLaunch={() => setExpanded(true)}

components/instances/ResultApplicationCard.tsx

@@ -2,7 +2,7 @@ import type { InstanceGetResponse, InstanceSummary } from "@squonk/data-manager-
 
 import { CardContent, ListItem, ListItemText } from "@mui/material";
 
-import { useProjectFromId } from "../../hooks/projectHooks";
+import { useIsEditorOfCurrentProject, useProjectFromId } from "../../hooks/projectHooks";
 import { HrefButton } from "../HrefButton";
 import { ProjectListItem } from "../projects/ProjectListItem";
 import { ResultCard } from "../results/ResultCard";
@@ -36,11 +36,14 @@ export const ResultApplicationCard = ({
 
   const associatedProject = useProjectFromId(instance.project_id);
 
+  const isEditor = useIsEditorOfCurrentProject();
+
   return (
     <ResultCard
       actions={({ setSlideIn }) => (
         <>
           <TerminateInstance
+            disabled={!isEditor}
             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 { useProjectFromId } from "../../hooks/projectHooks";
+import { useIsEditorOfCurrentProject, useProjectFromId } from "../../hooks/projectHooks";
 import { ProjectListItem } from "../projects/ProjectListItem";
 import { ArchivedStatus } from "./ArchivedStatus";
 import { ArchiveInstance } from "./ArchiveInstance";
@@ -40,6 +40,8 @@ export const ResultJobCard = ({
 
   const associatedProject = useProjectFromId(instance.project_id);
 
+  const isEditor = useIsEditorOfCurrentProject();
+
   if (instance.job_id === undefined) {
     return <Alert severity="error">Instance is missing a job ID</Alert>;
   }
@@ -49,12 +51,13 @@ export const ResultJobCard = ({
       actions={({ setSlideIn }) => (
         <>
           <TerminateInstance
+            disabled={!isEditor}
             instanceId={instanceId}
             phase={instance.phase}
             projectId={instance.project_id}
             onTermination={() => setSlideIn(false)}
           />
-          <RerunJobButton instance={instance} />
+          <RerunJobButton disabled={!isEditor} instance={instance} />
           <LogsButton instance={instance} instanceId={instanceId} />
           <ArchiveInstance archived={instance.archived} instanceId={instanceId} />
         </>

components/instances/TerminateInstance.tsx

@@ -18,6 +18,7 @@ export interface TerminateInstanceProps {
   instanceId: InstanceSummary["id"];
   phase: InstanceSummary["phase"] | InstanceGetResponse["phase"];
   projectId: InstanceSummary["project_id"] | InstanceGetResponse["project_id"];
+  disabled?: boolean;
   /**
    * Called when the delete request is successfully made
    */
@@ -29,6 +30,7 @@ export const TerminateInstance = ({
   phase,
   projectId,
   onTermination,
+  disabled = false,
 }: TerminateInstanceProps) => {
   const queryClient = useQueryClient();
   const { mutateAsync: terminateInstance } = useTerminateInstance();
@@ -62,7 +64,7 @@ export const TerminateInstance = ({
       }}
     >
       {({ openModal }) => (
-        <Button onClick={openModal}>
+        <Button disabled={disabled} onClick={openModal}>
           {/* Instances in an end state are deleted but others are still running so are terminated.
           It's all the same to the API though. */}
           {verb}

components/results/RerunJobButton.tsx

@@ -11,18 +11,22 @@ export interface RerunJobButtonProps {
    * Instance of the job that will be used to provide default options to rerun the job
    */
   instance: InstanceSummary | InstanceGetResponse;
+  /**
+   * Whether the button is disabled
+   */
+  disabled: boolean;
 }
 
 /**
  * Wrapper around the *execution card* job run modal that reloads defaults from an existing instance
  */
-export const RerunJobButton = ({ instance }: RerunJobButtonProps) => {
+export const RerunJobButton = ({ instance, disabled = false }: RerunJobButtonProps) => {
   const [open, setOpen] = useState(false);
 
   // If the job id is undefined, it's probably an application which we don't currently let be rerun.
   return instance.job_id !== undefined ? (
     <>
-      <Button color="primary" onClick={() => setOpen(true)}>
+      <Button color="primary" disabled={disabled} onClick={() => setOpen(true)}>
         Run again
       </Button>
       <JobModal

components/tasks/ResultTaskCard.tsx

@@ -5,7 +5,7 @@ import { Button, CardContent } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 
-import { useCurrentProjectId } from "../../hooks/projectHooks";
+import { useCurrentProjectId, useIsEditorOfCurrentProject } from "../../hooks/projectHooks";
 import { useEnqueueError } from "../../hooks/useEnqueueStackError";
 import { ResultCard } from "../results/ResultCard";
 import { WarningDeleteButton } from "../WarningDeleteButton";
@@ -32,6 +32,8 @@ export const ResultTaskCard = ({ task, collapsedByDefault = true }: ResultTaskCa
 
   const { projectId } = useCurrentProjectId();
 
+  const isEditor = useIsEditorOfCurrentProject();
+
   const { query } = useRouter();
 
   return (
@@ -55,7 +57,11 @@ export const ResultTaskCard = ({ task, collapsedByDefault = true }: ResultTaskCa
             }
           }}
         >
-          {({ openModal }) => <Button onClick={openModal}>Delete</Button>}
+          {({ openModal }) => (
+            <Button disabled={!isEditor} onClick={openModal}>
+              Delete
+            </Button>
+          )}
         </WarningDeleteButton>
       )}
       collapsed={

hooks/projectHooks.ts

@@ -88,3 +88,12 @@ export const useIsUserAProjectOwnerOrEditor = () => {
     (project?.editors.includes(user.username) || project?.owner === user.username)
   );
 };
+
+export const useIsEditorOfCurrentProject = () => {
+  const currentProject = useCurrentProject();
+
+  const { user } = useKeycloakUser();
+  const isEditor = !!user.username && currentProject?.editors.includes(user.username);
+
+  return isEditor;
+};

pages/executions.tsx

@@ -22,7 +22,7 @@ import { CenterLoader } from "../components/CenterLoader";
 import { ApplicationCard } from "../components/executionsCards/ApplicationCard";
 import { JobCard } from "../components/executionsCards/JobCard";
 import { SearchTextField } from "../components/SearchTextField";
-import { useCurrentProject } from "../hooks/projectHooks";
+import { useCurrentProject, useIsEditorOfCurrentProject } from "../hooks/projectHooks";
 import Layout from "../layouts/Layout";
 import { dmOptions } from "../utils/api/ssrQueryOptions";
 import { search } from "../utils/app/searches";
@@ -75,6 +75,7 @@ const Executions = () => {
 
   const currentProject = useCurrentProject();
 
+  const isEditor = useIsEditorOfCurrentProject();
   // Needs to assert some types here as Orval still doesn't get this right
   const {
     data: applicationsData,
@@ -113,7 +114,7 @@ const Executions = () => {
         // Then create a card for each
         ?.map((job) => (
           <Grid item key={job.id} md={3} sm={6} xs={12}>
-            <JobCard job={job} projectId={currentProject?.project_id} />
+            <JobCard disabled={!isEditor} job={job} projectId={currentProject?.project_id} />
           </Grid>
         )) ?? [];
 
@@ -126,7 +127,7 @@ const Executions = () => {
       return applicationCards;
     }
     return jobCards;
-  }, [applications, currentProject?.project_id, executionTypes, jobs, searchValue]);
+  }, [applications, currentProject?.project_id, executionTypes, jobs, searchValue, isEditor]);
 
   return (
     <>
@@ -185,7 +186,15 @@ const Executions = () => {
               {!currentProject && (
                 <Grid item xs={12}>
                   <Alert severity="warning">
-                    Select a project from the settings to launch apps and run jobs
+                    Select a project from the settings to launch apps and run jobs.
+                  </Alert>
+                </Grid>
+              )}
+
+              {!isEditor && (
+                <Grid item xs={12}>
+                  <Alert severity="warning">
+                    You must be a project editor to run jobs in this project.
                   </Alert>
                 </Grid>
               )}