feat: add PowerInput component
This commit is contained in:
Ali BARIN
committed by
Ömer Faruk Aydın
Ömer Faruk Aydın
parent
c864a1062d
commit
d06f21c927
@@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { useQuery, useLazyQuery } from '@apollo/client';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
@@ -11,6 +11,7 @@ import IconButton from '@mui/material/IconButton';
|
||||
import ErrorIcon from '@mui/icons-material/Error';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
|
||||
import { StepExecutionsProvider } from 'contexts/StepExecutions';
|
||||
import TestSubstep from 'components/TestSubstep';
|
||||
import FlowSubstep from 'components/FlowSubstep';
|
||||
import ChooseAppAndEventSubstep from 'components/ChooseAppAndEventSubstep';
|
||||
@@ -19,6 +20,7 @@ import Form from 'components/Form';
|
||||
import FlowStepContextMenu from 'components/FlowStepContextMenu';
|
||||
import AppIcon from 'components/AppIcon';
|
||||
import { GET_APPS } from 'graphql/queries/get-apps';
|
||||
import { GET_STEP_WITH_TEST_EXECUTIONS } from 'graphql/queries/get-step-with-test-executions';
|
||||
import useFormatMessage from 'hooks/useFormatMessage';
|
||||
import type { App, AppFields } from 'types/app';
|
||||
import type { Step } from 'types/step';
|
||||
@@ -34,35 +36,40 @@ type FlowStepProps = {
|
||||
onChange: (step: Step) => void;
|
||||
}
|
||||
|
||||
const parseStep = (step: Step) => {
|
||||
try {
|
||||
// stringify stringified JSON first to overcome type casting
|
||||
const parameters = JSON.parse(step.parameters?.toString());
|
||||
return {
|
||||
...step,
|
||||
parameters,
|
||||
}
|
||||
} catch (err) {
|
||||
// highly likely that step does not have any parameters and thus, the error is thrown
|
||||
return {
|
||||
...step,
|
||||
parameters: {},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const validIcon = <CheckCircleIcon color="success" />;
|
||||
const errorIcon = <ErrorIcon color="error" />;
|
||||
|
||||
export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
|
||||
const { collapsed, index, onChange } = props;
|
||||
const contextButtonRef = React.useRef<HTMLButtonElement | null>(null);
|
||||
const step: Step = React.useMemo(() => parseStep(props.step), [props.step]);
|
||||
const step: Step = props.step;
|
||||
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
|
||||
const isTrigger = step.type === StepType.Trigger;
|
||||
const formatMessage = useFormatMessage();
|
||||
const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(0);
|
||||
const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(2);
|
||||
const { data } = useQuery(GET_APPS, { variables: { onlyWithTriggers: isTrigger }});
|
||||
const [
|
||||
getStepWithTestExecutions,
|
||||
{
|
||||
data: stepWithTestExecutionsData,
|
||||
called: stepWithTestExecutionsCalled,
|
||||
loading: stepWithTestExecutionsLoading,
|
||||
error: stepWithTestExecutionsError
|
||||
},
|
||||
] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
|
||||
fetchPolicy: 'network-only',
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!stepWithTestExecutionsCalled && !collapsed && !isTrigger) {
|
||||
getStepWithTestExecutions({
|
||||
variables: {
|
||||
stepId: step.id,
|
||||
},
|
||||
});
|
||||
}
|
||||
}, [collapsed, stepWithTestExecutionsCalled, getStepWithTestExecutions, step.id, isTrigger]);
|
||||
|
||||
const apps: App[] = data?.getApps;
|
||||
const app = apps?.find((currentApp: App) => currentApp.key === step.appKey);
|
||||
|
||||
@@ -77,6 +84,10 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
|
||||
setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (val: any) => {
|
||||
handleChange({ step: val as Step });
|
||||
}
|
||||
|
||||
if (!apps) return null;
|
||||
|
||||
const onContextMenuClose = (event: React.SyntheticEvent) => {
|
||||
@@ -132,57 +143,59 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
|
||||
<Collapse in={!collapsed} unmountOnExit>
|
||||
<Content>
|
||||
<List>
|
||||
<ChooseAppAndEventSubstep
|
||||
expanded={currentSubstep === 0}
|
||||
substep={{ name: 'Choose app & event', arguments: [] }}
|
||||
onExpand={() => toggleSubstep(0)}
|
||||
onCollapse={() => toggleSubstep(0)}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
<StepExecutionsProvider value={stepWithTestExecutionsData?.getStepWithTestExecutions as Step[]}>
|
||||
<Form defaultValues={step} onSubmit={handleSubmit}>
|
||||
<ChooseAppAndEventSubstep
|
||||
expanded={currentSubstep === 0}
|
||||
substep={{ name: 'Choose app & event', arguments: [] }}
|
||||
onExpand={() => toggleSubstep(0)}
|
||||
onCollapse={() => toggleSubstep(0)}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
|
||||
<Form defaultValues={step.parameters}>
|
||||
{substeps?.length > 0 && substeps.map((substep: { name: string, key: string, arguments: AppFields[] }, index: number) => (
|
||||
<React.Fragment key={`${substep?.name}-${index}`}>
|
||||
{substep.key === 'chooseAccount' && (
|
||||
<ChooseAccountSubstep
|
||||
expanded={currentSubstep === (index + 1)}
|
||||
substep={substep}
|
||||
onExpand={() => toggleSubstep((index + 1))}
|
||||
onCollapse={() => toggleSubstep((index + 1))}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
)}
|
||||
{substeps?.length > 0 && substeps.map((substep: { name: string, key: string, arguments: AppFields[] }, index: number) => (
|
||||
<React.Fragment key={`${substep?.name}-${index}`}>
|
||||
{substep.key === 'chooseAccount' && (
|
||||
<ChooseAccountSubstep
|
||||
expanded={currentSubstep === (index + 1)}
|
||||
substep={substep}
|
||||
onExpand={() => toggleSubstep((index + 1))}
|
||||
onCollapse={() => toggleSubstep((index + 1))}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
)}
|
||||
|
||||
{substep.key === 'testStep' && (
|
||||
<TestSubstep
|
||||
expanded={currentSubstep === (index + 1)}
|
||||
substep={substep}
|
||||
onExpand={() => toggleSubstep((index + 1))}
|
||||
onCollapse={() => toggleSubstep((index + 1))}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
)}
|
||||
{substep.key === 'testStep' && (
|
||||
<TestSubstep
|
||||
expanded={currentSubstep === (index + 1)}
|
||||
substep={substep}
|
||||
onExpand={() => toggleSubstep((index + 1))}
|
||||
onCollapse={() => toggleSubstep((index + 1))}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
)}
|
||||
|
||||
{['chooseAccount', 'testStep'].includes(substep.key) === false && (
|
||||
<FlowSubstep
|
||||
expanded={currentSubstep === (index + 1)}
|
||||
substep={substep}
|
||||
onExpand={() => toggleSubstep((index + 1))}
|
||||
onCollapse={() => toggleSubstep((index + 1))}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Form>
|
||||
{['chooseAccount', 'testStep'].includes(substep.key) === false && (
|
||||
<FlowSubstep
|
||||
expanded={currentSubstep === (index + 1)}
|
||||
substep={substep}
|
||||
onExpand={() => toggleSubstep((index + 1))}
|
||||
onCollapse={() => toggleSubstep((index + 1))}
|
||||
onSubmit={expandNextStep}
|
||||
onChange={handleChange}
|
||||
step={step}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Form>
|
||||
</StepExecutionsProvider>
|
||||
</List>
|
||||
</Content>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user