Mutation: updateProject.step -> transitionProject

src/scenes/Projects/Overview/ProjectOverview.graphql

@@ -53,6 +53,7 @@ fragment ProjectOverview on Project {
     canEdit
     value
     transitions {
+      key
       to
       label
       type

src/scenes/Projects/Update/ProjectWorkflowDialog.tsx

@@ -22,7 +22,7 @@ import {
 import { AutocompleteField } from '../../../components/form/AutocompleteField';
 import { Link } from '../../../components/Routing';
 import { ProjectOverviewFragment } from '../Overview/ProjectOverview.graphql';
-import { UpdateProjectDocument } from './UpdateProject.graphql';
+import { TransitionProjectDocument } from './TransitionProject.graphql';
 
 type UpdateProjectDialogProps = Except<
   DialogFormProps<SubmitAction & { project?: { step?: ProjectStep } }>,
@@ -41,7 +41,7 @@ export const ProjectWorkflowDialog = ({
   project,
   ...props
 }: UpdateProjectDialogProps) => {
-  const [updateProject] = useMutation(UpdateProjectDocument);
+  const [transitionProject] = useMutation(TransitionProjectDocument);
   const { classes } = useStyles();
   const { canBypassTransitions, transitions } = project.step;
 
@@ -68,23 +68,23 @@ export const ProjectWorkflowDialog = ({
       submitLabel={canBypassTransitions ? undefined : false}
       sendIfClean
       changesetAware
-      onSubmit={async ({ submitAction, project: submittedProjectFields }) => {
+      onSubmit={async ({
+        submitAction: transitionKey,
+        project: submittedProjectFields,
+      }) => {
         const step = submittedProjectFields?.step;
         // If clicking save for step override, but there is no step, do nothing.
-        if (!submitAction && !step) {
+        if (!transitionKey && !step) {
           return;
         }
 
-        await updateProject({
+        await transitionProject({
           variables: {
             input: {
-              project: {
-                id: project.id,
-                // remove index suffix used to make submit action unique
-                step:
-                  (submitAction?.split(':')[0] as ProjectStep | null) ?? step,
-              },
-              changeset: project.changeset?.id,
+              project: project.id,
+              ...(transitionKey
+                ? { transition: transitionKey }
+                : { bypassTo: step }),
             },
           },
         });
@@ -96,22 +96,20 @@ export const ProjectWorkflowDialog = ({
     >
       <SubmitError />
       <Grid container direction="column" spacing={1}>
-        {transitions.map((transition, i) => (
+        {transitions.map((transition) => (
           <Tooltip
             title={
               transition.disabledReason ??
               `This will change the project step to ${
                 ProjectStepLabels[transition.to]
               }`
             }
-            key={i}
+            key={transition.key}
           >
             <Grid item>
               <SubmitButton
                 {...transitionTypeStyles[transition.type]}
-                // Ensure submit action/step is unique by appending index. This prevents
-                // multiple spinners for the same next step with different labels.
-                action={`${transition.to}:${i}`}
+                action={transition.key}
                 disabled={transition.disabled}
               >
                 {transition.label}

src/scenes/Projects/Update/TransitionProject.graphql

@@ -0,0 +1,6 @@
+mutation TransitionProject($input: ExecuteProjectTransitionInput!) {
+  transitionProject(input: $input) {
+    ...ProjectOverview
+    ...RecalculateChangesetDiff
+  }
+}