Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const kafkaMachine = Machine({
    id: 'kafkas',
    initial: 'loading',
    context: {},
    states: {
        loading: {
            invoke: {
                id: 'fetchKafkaInstances',
                src: 'something',
                onDone: {
                    target: 'verify',
                    actions: assign({
                        instances: (_context, event) => event.data.data,
                    }),
                },
                onError: {
                    target: 'failure',
                    actions: assign({
                        error: (_context, event) => event.data,
                    }),
                },
            },
        },
        failure: {

        },
        verify: {
            on: {
                '': [
                    { target: 'selecting', cond: 'noInstanceSelected' },
                    { target: 'valid', cond: 'instanceSelected' },
                ]
            }
        },
        selecting: {
            entry: sendParent('isInvalid'),
            on: {
                selectInstance: {
                    target: 'valid',
                    actions: 'selectInstance',
                },
            },
        },
        valid: {
            entry: sendParent('isValid'),
            on: {
                selectInstance: {
                    target: 'verify',
                    actions: 'selectInstance',
                },
                deselectInstance: {
                    target: 'verify',
                    actions: 'reset'
                },
                confirm: {
                    target: 'done'
                }
            }
        },
        done: {
            type: "final",
            data: {
                selectedInstance: (context) => context.selectedInstance
            }
        }
    },
}, {
  services: {
    'something': Promise.resolve({ 
      data: {
        data: {
          instances: []
        }
      } 
    })
  },
  actions: {
      selectInstance: assign({
        selectedInstance: (context, event) => {
          if (event.type === "selectInstance") {
            return context.instances?.items.find(i => i.id == event.selectedInstance);
          }
          return context.selectedInstance;
        }
      }),
      reset: assign({
        selectedInstance: (context, event) => event.type === "deselectInstance" ? undefined : context.selectedInstance
      })
    },
    guards: {
      instanceSelected: (context) => context.selectedInstance !== undefined,
      noInstanceSelected: (context) => context.selectedInstance === undefined,
    }
})