Multistep multiactions

client/.eslintignore

@@ -7,5 +7,9 @@ node_modules/
 jest.config.ts
 openapi.d.ts
 
-# This is copied file from lib
-src/pages/wizard/CustomFieldTemplate.tsx
+# This is copied files from lib
+src/pages/wizard/widgets/SwitchPackage.tsx
+src/pages/wizard/ObjectFieldTemplate.tsx
+
+# Temp ignore
+src/pages/wizard/Show.tsx

client/openapi.d.ts

@@ -232,7 +232,12 @@ export interface components {
             success: string;
         };
         WizardFull: components["schemas"]["WizardShort"] & {
-            steps: components["schemas"]["ActionFull"][];
+            steps: components["schemas"]["WizardStep"][];
+        };
+        WizardStep: {
+            title?: string;
+            description?: string;
+            actions?: components["schemas"]["ActionFull"][];
         };
     };
     responses: {

client/src/components/FormFlow.tsx

@@ -1,5 +1,4 @@
-import { Breadcrumbs } from '@mui/material'
-import Box from '@mui/material/Box'
+import { Breadcrumbs, Paper } from '@mui/material'
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
@@ -18,11 +17,12 @@ import {
 import type { IChangeEvent } from '@rjsf/core'
 import { withTheme } from '@rjsf/core'
 import { Theme } from '@rjsf/mui'
-import { DescriptionFieldProps, TitleFieldProps } from '@rjsf/utils'
 import validator from '@rjsf/validator-ajv8'
 import isEqual from 'lodash/isEqual'
 import merge from 'lodash/merge'
 import { type FC, useContext, useEffect, useState } from 'react'
+import formTemplates from '../components/rjsf/templates'
+import formWidgets from '../components/rjsf/widgets'
 
 import { components } from '../../openapi'
 import { AppContext } from '../context/AppContext'
@@ -31,17 +31,18 @@ import {
   sentenceCase,
   splitActionId,
 } from '../utils/helpers'
+import '../wizard-form.css'
 
 interface IFormValues {
   id: string
 }
 
 const Form = withTheme(Theme)
 
-export const FormFlow: FC<{ actionId: string; isFullpage?: boolean }> = ({
-  actionId,
-  isFullpage = false,
-}) => {
+export const FormFlow: FC<{
+  actionId: string
+  formType: 'full' | 'sidebar' | 'wizard'
+}> = ({ actionId, formType = 'sidebar' }) => {
   const [changed, setChanged] = useState<Set<string>>(new Set())
   const [formValues, setFormValues] = useState<IFormValues | null>(null)
   const [actionRunning, setActionRunning] = useState(false)
@@ -60,15 +61,16 @@ export const FormFlow: FC<{ actionId: string; isFullpage?: boolean }> = ({
   })
   const { isFetching, data } = queryResult
 
-  const actionTitle = data?.data?.title
-
   // Fetch schema and customize uiSchema
   const jsonschema = data?.data?.jsonschema
   let uischema = data?.data?.uischema?.uiSchema
 
   if (jsonschema) {
     delete jsonschema.$schema
     uischema = merge({}, uischema, customizeUiSchema(jsonschema))
+    if (uischema && uischema[formType]) {
+      uischema = merge({}, uischema, uischema[formType])
+    }
   }
 
   // Reset formValues to null on each rerender
@@ -150,66 +152,6 @@ export const FormFlow: FC<{ actionId: string; isFullpage?: boolean }> = ({
     }
   }
 
-  function TitleFieldTemplate(props: TitleFieldProps) {
-    const { id, title } = props
-    if (id === 'root__title') {
-      return (
-        <>
-          <Breadcrumbs
-            sx={{
-              marginBottom: 0.5,
-              '.MuiBreadcrumbs-separator': {
-                marginInline: 0.5,
-              },
-            }}
-          >
-            {levels.map((a, i) => (
-              <Typography
-                key={i}
-                sx={{
-                  color: (theme) =>
-                    theme.palette.mode === 'dark' ? '#fff' : '#667085',
-                  fontSize: 11,
-                  fontWeight: 600,
-                  lineHeight: 1.45,
-                  letterSpacing: '0.22px',
-                }}
-              >
-                {sentenceCase(a)}
-              </Typography>
-            ))}
-          </Breadcrumbs>
-          <Typography
-            id={id}
-            sx={{
-              fontSize: 15,
-              fontWeight: 600,
-              lineHeight: 1.6,
-              color: (theme) =>
-                theme.palette.mode === 'dark' ? '#fff' : '#000',
-            }}
-          >
-            {actionTitle || title}
-          </Typography>
-        </>
-      )
-    }
-    return (
-      <Box id={id}>
-        <Typography variant="subtitle2">{title}</Typography>
-      </Box>
-    )
-  }
-
-  function DescriptionFieldTemplate(props: DescriptionFieldProps) {
-    const { description, id } = props
-    return (
-      <Typography id={id} sx={{ display: 'block', mt: 1 }} variant="caption">
-        {description}
-      </Typography>
-    )
-  }
-
   const handleChange = (
     data: IChangeEvent<IFormValues>,
     id: string | undefined
@@ -227,16 +169,33 @@ export const FormFlow: FC<{ actionId: string; isFullpage?: boolean }> = ({
   }
 
   return (
-    <Box
-      sx={{
-        px: 2,
-        pb: 2,
-        '.MuiGrid-item:has(#root_options__title + div:empty), .MuiGrid-item:has(#root_arguments__title + div:empty)':
-          {
-            display: 'none',
-          },
-      }}
-    >
+    <>
+      {formType === 'sidebar' && (
+        <Breadcrumbs
+          sx={{
+            marginBottom: 0.5,
+            '.MuiBreadcrumbs-separator': {
+              marginInline: 0.5,
+            },
+          }}
+        >
+          {levels.map((a, i) => (
+            <Typography
+              key={i}
+              sx={{
+                color: (theme) =>
+                  theme.palette.mode === 'dark' ? '#fff' : '#667085',
+                fontSize: 11,
+                fontWeight: 600,
+                lineHeight: 1.45,
+                letterSpacing: '0.22px',
+              }}
+            >
+              {sentenceCase(a)}
+            </Typography>
+          ))}
+        </Breadcrumbs>
+      )}
       {!isFetching && (
         <Form
           idSeparator={'/'}
@@ -245,21 +204,40 @@ export const FormFlow: FC<{ actionId: string; isFullpage?: boolean }> = ({
           formData={formValues}
           validator={validator}
           onSubmit={onSubmit}
-          templates={{ DescriptionFieldTemplate, TitleFieldTemplate }}
+          templates={formTemplates[formType]}
           onChange={handleChange}
+          className={`${formType}-form`}
+          widgets={formWidgets[formType]}
         >
-          <Button variant="contained" type="submit" disabled={actionRunning}>
-            Submit
-          </Button>
+          {(formType === 'sidebar' || formType === 'full') && (
+            <Button variant="contained" type="submit" disabled={actionRunning}>
+              Submit
+            </Button>
+          )}
 
-          {!isFullpage && (
+          {formType === 'sidebar' && (
             <>
               <Divider sx={{ my: 2 }} />
               <Button href={`/actions/${actionId}/show`}>
                 Or Go to form page
               </Button>
             </>
           )}
+          {formType === 'wizard' && (
+            <Paper
+              sx={{
+                display: 'flex',
+                justifyContent: 'end',
+                padding: '0.75rem 1.5rem',
+                backgroundColor: '#fcfcfd',
+                borderTop: '1px solid #e4e7ec',
+              }}
+            >
+              <Button type="submit" variant="contained">
+                Save
+              </Button>
+            </Paper>
+          )}
         </Form>
       )}
 
@@ -280,6 +258,6 @@ export const FormFlow: FC<{ actionId: string; isFullpage?: boolean }> = ({
           </Button>
         </DialogActions>
       </Dialog>
-    </Box>
+    </>
   )
 }

client/src/components/SecondSidebarFlow.tsx

@@ -100,7 +100,18 @@ export const SecondSidebarFlow: FC<{
         {expand === '25vw' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
       </IconButton>
       {isAction(nodeId) ? (
-        <FormFlow actionId={nodeId} />
+        <Box
+          sx={{
+            px: 2,
+            pb: 2,
+            '.MuiGrid-item:has(#root_options__title + div:empty), .MuiGrid-item:has(#root_arguments__title + div:empty)':
+              {
+                display: 'none',
+              },
+          }}
+        >
+          <FormFlow actionId={nodeId} formType={'sidebar'} />
+        </Box>
       ) : (
         <ActionsListFlow actionsGroup={actionsGroup} />
       )}