Steppers

Configurable steppers

The stepper dialog is now configurable when providing the FormController with a stepControl object which holds an array of the selected steps to enable/disable and a condition under which this should trigger. The condition is a function and can be defined in any way you see fit, but is of course limited by the type of controller that is being used. Here's an example:

src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema.js:

const RESET = {
  name: 'reset',
  label: T.ResetBackup,
  type: INPUT_TYPES.SWITCH,
  validation: boolean(),
  grid: { xs: 12, md: 6 },
  stepControl: {
    condition: (value) => value === true,
    steps: ['datastore'],
  },
}

Here you can see the stepControl object, which in this case, controls the datastore step based on the following condition: value === true. This means that when the controller, in this case a simple switch controller returns true, that condition will trigger and disable the datastore step and also enable it when it returns false.

Also, you can define stepControl as an array, so many steps could be disabled under different conditions:

const NETWORK_MODE = {
  name: 'NETWORK_MODE',
  label: T.AutomaticNetworkMode,
  tooltip: T.NetworkMoeConcept,
  type: INPUT_TYPES.SWITCH,
  validation: boolean()
  grid: { sm: 6 },
  stepControl: [
    {
      condition: (value) => value === true,
      steps: ['network'],
    },
    {
      condition: (value) => value === false,
      steps: ['network-auto'],
    },
  ],
}

This functionality has been enabled for the following types of controllers:

• AutocompleteController
• CheckboxController
• DockerfileController
• FileController
• SelectController
• SliderController
• SwitchController
• TableController
• TextController
• ToggleController

So for example, this is how a different condition can be specified depending on the type of controller used:

src/fireedge/src/client/components/Forms/MarketplaceApp/CreateForm/Steps/BasicConfiguration/schema.js

const APP_TEMPLATE = {
  name: 'image.APPTEMPLATE64',
  label: T.AppTemplate,
  type: INPUT_TYPES.TEXT,
  validation: string()
    .trim()
    .default(() => undefined)
    .afterSubmit((value) => encodeBase64(value)),
  fieldProps: { multiline: true, placeholder: 'ATTRIBUTE = "VALUE"' },
  stepControl: {
    condition: (text) => text === 'SOMEATTRIBUTE="TEST"',
    steps: ['marketplace'],
  },
}

This results in the marketplace step being disabled when the text in that text box controller equals SOMEATTRIBUTE="TEST"

VDC stepper

TODO