Settings: Allow stages to be added even if the workflow doesn't have any yet

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js

@@ -90,7 +90,7 @@ export function ReviewWorkflowsPage() {
                 </Loader>
               )}
 
-              {formik.values?.stages && <Stages stages={formik.values.stages} />}
+              <Stages stages={formik.values?.stages} />
             </ContentLayout>
           </Form>
         </FormikProvider>

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stages.js

@@ -70,6 +70,7 @@ Stages.propTypes = {
   stages: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.number,
+      __temp_key__: PropTypes.number,
       name: PropTypes.string.isRequired,
     })
   ),

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/reducer/index.js

@@ -56,13 +56,16 @@ export function reducer(state = initialState, action) {
       case ACTION_ADD_STAGE: {
         const { currentWorkflow } = state.clientState;
 
-        draft.clientState.currentWorkflow.data.stages = [
+        if (!currentWorkflow.data) {
-          ...currentWorkflow.data.stages,
+          draft.clientState.currentWorkflow.data = {
-          {
+            stages: [],
-            ...payload,
+          };
-            __temp_key__: currentWorkflow.data.stages.length + 1,
+        }
-          },
+
-        ];
+        draft.clientState.currentWorkflow.data.stages.push({
+          ...payload,
+          __temp_key__: (currentWorkflow.data?.stages?.length ?? 0) + 1,
+        });
 
         break;
       }

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/reducer/tests/index.test.js

@@ -133,6 +133,38 @@ describe('Admin | Settings | Review Workflows | reducer', () => {
     );
   });
 
+  test('ACTION_ADD_STAGE when there are not stages yet', () => {
+    const action = {
+      type: ACTION_ADD_STAGE,
+      payload: { name: 'something' },
+    };
+
+    state = {
+      status: expect.any(String),
+      serverState: expect.any(Object),
+      clientState: {
+        currentWorkflow: { data: null, isDirty: false },
+      },
+    };
+
+    expect(reducer(state, action)).toStrictEqual(
+      expect.objectContaining({
+        clientState: expect.objectContaining({
+          currentWorkflow: expect.objectContaining({
+            data: expect.objectContaining({
+              stages: expect.arrayContaining([
+                {
+                  __temp_key__: 1,
+                  name: 'something',
+                },
+              ]),
+            }),
+          }),
+        }),
+      })
+    );
+  });
+
   test('ACTION_UPDATE_STAGE', () => {
     const action = {
       type: ACTION_UPDATE_STAGE,