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

machine.js

const fetchKafkaInstances = (_authToken) => new Promise((resolve) => setTimeout(() => resolve([{ id: 1, name: 'test' }]), 2000));
const kafkaInstancesMachine = Machine({
    id: 'kafka-instances',
    initial: 'loading',
    states: {
        loading: {
            invoke: {
                id: 'fetchKafkaInstances',
                src: (context) => fetchKafkaInstances(context.authToken),
                onDone: {
                    target: 'ready',
                    actions: assign({ instances: (_context, event) => event.data }),
                },
                onError: {
                    target: 'failure',
                    actions: assign({ error: (_context, event) => event.data }),
                },
            },
        },
        failure: {},
        ready: {
            on: {
                SELECT: {
                    target: "ready",
                    actions: assign({
                        selectedInstance: (context, event) => {
                            var _a, _b;
                            return (_b = (_a = context.instances) === null || _a === void 0 ? void 0 : _a.find(i => i.id == event.data)) === null || _b === void 0 ? void 0 : _b.id;
                        }
                    })
                }
            }
        },
        selected: {
            type: "final",
            data: (context) => ({
                selectedInstance: context.selectedInstance
            })
        },
    },
    on: {
        NEXT: {
            target: "selected",
            cond: (context) => context.selectedInstance !== undefined
        }
    }
});
const configuratorMachine = Machine({
    id: 'connector-configurator',
    initial: 'selectKafka',
    context: {
        authToken: "asdasdasd",
        selectedKafkaInstance: undefined
    },
    states: {
        selectKafka: {
            invoke: {
                id: 'select-kafka-instance',
                src: kafkaInstancesMachine,
                data: (context) => ({
                    authToken: context.authToken,
                    selectedInstance: context.selectedKafkaInstance
                }),
                onDone: {
                    target: "selectCluster",
                    actions: assign({
                        selectedKafkaInstance: (_context, event) => event.data.selectedInstance
                    })
                }
            },
        },
        selectCluster: {
            on: {
                NEXT: 'selectConnector',
                PREV: 'selectKafka',
            },
        },
        selectConnector: {
            on: {
                NEXT: 'configureConnector',
                PREV: 'selectCluster',
            },
        },
        configureConnector: {
            on: {
                NEXT: 'reviewConfiguration',
                PREV: 'selectConnector',
            },
        },
        reviewConfiguration: {
            on: {
                NEXT: 'complete',
                PREV: 'configureConnector',
            },
        },
        complete: {
            type: 'final',
        },
    },
});