import React, { useState, useEffect } from 'react'; import Select from '@/_ui/Select'; import { appsService } from '@/_services'; import { appVersionService } from '@/_services/appVersion.service'; import CodeHinter from '@/AppBuilder/CodeEditor'; import './workflows-query.scss'; import { v4 as uuidv4 } from 'uuid'; import useStore from '@/AppBuilder/_stores/store'; import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext'; import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver'; import useWorkflowStore from '@/_stores/workflowStore'; import { useTranslation } from 'react-i18next'; import { CustomToggleSwitch } from '../Components/CustomToggleSwitch'; export function Workflows({ options, optionsChanged, currentState }) { const { moduleId } = useModuleContext(); const { t } = useTranslation(); const [workflowOptions, setWorkflowOptions] = useState([]); const [isMenuOpen, setIsMenuOpen] = useState(false); const [_selectedWorkflowId, setSelectedWorkflowId] = useState(undefined); const [params, setParams] = useState([...(options.params ?? [{ key: '', value: '' }])]); const [syncExecution, setSyncExecution] = useState(options.syncExecution ?? true); const [versionOptions, setVersionOptions] = useState([]); const workflowIdFromStore = useWorkflowStore((state) => state.workflowId); const appIdFromStore = useStore((state) => state.appStore.modules[moduleId].app.appId); const appId = workflowIdFromStore || appIdFromStore; usePopoverObserver( document.getElementsByClassName('query-details')[0], document.querySelector('.workflow-select.react-select__control'), document.querySelector('.workflow-select.react-select__menu'), isMenuOpen, () => (document.querySelector('.workflow-select.react-select__menu').style.display = 'block'), () => (document.querySelector('.workflow-select.react-select__menu').style.display = 'none') ); useEffect(() => { appsService.getWorkflows(appId).then(({ workflows }) => { setWorkflowOptions( workflows.map((workflow) => ({ value: workflow.id, name: workflow.name, })) ); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { if (options.workflowId) { appVersionService .getAll(options.workflowId) .then((data) => { const versions = (data?.versions || []) .filter((v) => v.status === 'PUBLISHED') .map((v) => ({ value: v.id, name: v.name, })); setVersionOptions(versions); }) .catch(() => { setVersionOptions([]); }); } else { setVersionOptions([]); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [options.workflowId]); useEffect(() => { optionsChanged({ ...options, params, }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [params]); return ( <>
{`To know more about querying workflows data,`}   {t('globals.readDocumentation', 'read documentation').toLowerCase()}
{ optionsChanged({ ...options, workflowVersionId: workflowVersionId || null }); }} height="32px" useMenuPortal={true} closeMenuOnSelect={true} customWrap={true} width="300px" menuPlacement="bottom" customClassPrefix="workflow-version-select" /> )}
{ const newVal = !syncExecution; setSyncExecution(newVal); optionsChanged({ ...options, syncExecution: newVal }); }} action="syncExecution" label="Run workflows synchronously" dataCy="sync-workflow-execution" />
{params.map((param, index) => (
setParams((params) => [ ...params.slice(0, index), { ...param, key: newValue }, ...params.slice(index + 1), ]) } initialValue={param.key} placeholder={'key'} />
setParams((params) => [ ...params.slice(0, index), { ...param, value: newValue }, ...params.slice(index + 1), ]) } initialValue={param.value} placeholder={'value'} />
setParams((params) => [...params.slice(0, index), ...params.slice(index + 1)])} >
))}
setParams((params) => [...params, { key: '', value: '', id: uuidv4() }])} >
); }