wip: Restructure twitter integration
This commit is contained in:
@@ -15,7 +15,7 @@ import FlowSubstepTitle from 'components/FlowSubstepTitle';
|
||||
import type { IApp, IStep, ISubstep } from '@automatisch/types';
|
||||
|
||||
type ChooseAppAndEventSubstepProps = {
|
||||
substep: ISubstep,
|
||||
substep: ISubstep;
|
||||
expanded?: boolean;
|
||||
onExpand: () => void;
|
||||
onCollapse: () => void;
|
||||
@@ -24,14 +24,17 @@ type ChooseAppAndEventSubstepProps = {
|
||||
step: IStep;
|
||||
};
|
||||
|
||||
const optionGenerator = (app: IApp): { label: string; value: string; } => ({
|
||||
const optionGenerator = (app: IApp): { label: string; value: string } => ({
|
||||
label: app.name as string,
|
||||
value: app.key as string,
|
||||
});
|
||||
|
||||
const getOption = (options: Record<string, unknown>[], appKey: IApp["key"]) => options.find(option => option.value === appKey as string) || null;
|
||||
const getOption = (options: Record<string, unknown>[], appKey?: IApp['key']) =>
|
||||
options.find((option) => option.value === (appKey as string)) || null;
|
||||
|
||||
function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.ReactElement {
|
||||
function ChooseAppAndEventSubstep(
|
||||
props: ChooseAppAndEventSubstepProps
|
||||
): React.ReactElement {
|
||||
const {
|
||||
substep,
|
||||
expanded = false,
|
||||
@@ -47,59 +50,74 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
|
||||
|
||||
const isTrigger = step.type === 'trigger';
|
||||
|
||||
const { data } = useQuery(GET_APPS, { variables: { onlyWithTriggers: isTrigger }});
|
||||
const { data } = useQuery(GET_APPS, {
|
||||
variables: { onlyWithTriggers: isTrigger },
|
||||
});
|
||||
const apps: IApp[] = data?.getApps;
|
||||
const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
|
||||
|
||||
const appOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]);
|
||||
const appOptions = React.useMemo(
|
||||
() => apps?.map((app) => optionGenerator(app)),
|
||||
[apps]
|
||||
);
|
||||
const actionsOrTriggers = isTrigger ? app?.triggers : app?.actions;
|
||||
const actionOptions = React.useMemo(() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]);
|
||||
const selectedActionOrTrigger = actionsOrTriggers?.find((actionOrTrigger) => actionOrTrigger.key === step?.key) || null;
|
||||
const actionOptions = React.useMemo(
|
||||
() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [],
|
||||
[app?.key]
|
||||
);
|
||||
const selectedActionOrTrigger =
|
||||
actionsOrTriggers?.find(
|
||||
(actionOrTrigger) => actionOrTrigger.key === step?.key
|
||||
) || null;
|
||||
|
||||
const {
|
||||
name,
|
||||
} = substep;
|
||||
const { name } = substep;
|
||||
|
||||
const valid: boolean = !!step.key && !!step.appKey;
|
||||
|
||||
// placeholders
|
||||
const onEventChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
|
||||
if (typeof selectedOption === 'object') {
|
||||
// TODO: try to simplify type casting below.
|
||||
const typedSelectedOption = selectedOption as { value: string };
|
||||
const option: { value: string } = typedSelectedOption;
|
||||
const eventKey = option?.value as string;
|
||||
const onEventChange = React.useCallback(
|
||||
(event: React.SyntheticEvent, selectedOption: unknown) => {
|
||||
if (typeof selectedOption === 'object') {
|
||||
// TODO: try to simplify type casting below.
|
||||
const typedSelectedOption = selectedOption as { value: string };
|
||||
const option: { value: string } = typedSelectedOption;
|
||||
const eventKey = option?.value as string;
|
||||
|
||||
if (step.key !== eventKey) {
|
||||
onChange({
|
||||
step: {
|
||||
...step,
|
||||
key: eventKey,
|
||||
},
|
||||
});
|
||||
if (step.key !== eventKey) {
|
||||
onChange({
|
||||
step: {
|
||||
...step,
|
||||
key: eventKey,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [step, onChange]);
|
||||
},
|
||||
[step, onChange]
|
||||
);
|
||||
|
||||
const onAppChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
|
||||
if (typeof selectedOption === 'object') {
|
||||
// TODO: try to simplify type casting below.
|
||||
const typedSelectedOption = selectedOption as { value: string };
|
||||
const option: { value: string } = typedSelectedOption;
|
||||
const appKey = option?.value as string;
|
||||
const onAppChange = React.useCallback(
|
||||
(event: React.SyntheticEvent, selectedOption: unknown) => {
|
||||
if (typeof selectedOption === 'object') {
|
||||
// TODO: try to simplify type casting below.
|
||||
const typedSelectedOption = selectedOption as { value: string };
|
||||
const option: { value: string } = typedSelectedOption;
|
||||
const appKey = option?.value as string;
|
||||
|
||||
if (step.appKey !== appKey) {
|
||||
onChange({
|
||||
step: {
|
||||
...step,
|
||||
key: '',
|
||||
appKey,
|
||||
parameters: {},
|
||||
},
|
||||
});
|
||||
if (step.appKey !== appKey) {
|
||||
onChange({
|
||||
step: {
|
||||
...step,
|
||||
key: '',
|
||||
appKey,
|
||||
parameters: {},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [step, onChange]);
|
||||
},
|
||||
[step, onChange]
|
||||
);
|
||||
|
||||
const onToggle = expanded ? onCollapse : onExpand;
|
||||
|
||||
@@ -112,14 +130,26 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
|
||||
valid={valid}
|
||||
/>
|
||||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
||||
<ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
|
||||
<ListItem
|
||||
sx={{
|
||||
pt: 2,
|
||||
pb: 3,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<Autocomplete
|
||||
fullWidth
|
||||
disablePortal
|
||||
disableClearable
|
||||
disabled={editorContext.readOnly}
|
||||
options={appOptions}
|
||||
renderInput={(params) => <TextField {...params} label={formatMessage('flowEditor.chooseApp')} />}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label={formatMessage('flowEditor.chooseApp')}
|
||||
/>
|
||||
)}
|
||||
value={getOption(appOptions, step.appKey)}
|
||||
onChange={onAppChange}
|
||||
/>
|
||||
@@ -137,7 +167,12 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
|
||||
disableClearable
|
||||
disabled={editorContext.readOnly}
|
||||
options={actionOptions}
|
||||
renderInput={(params) => <TextField {...params} label={formatMessage('flowEditor.chooseEvent')} />}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label={formatMessage('flowEditor.chooseEvent')}
|
||||
/>
|
||||
)}
|
||||
value={getOption(actionOptions, step.key)}
|
||||
onChange={onEventChange}
|
||||
/>
|
||||
@@ -147,7 +182,9 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
|
||||
{isTrigger && selectedActionOrTrigger?.pollInterval && (
|
||||
<TextField
|
||||
label={formatMessage('flowEditor.pollIntervalLabel')}
|
||||
value={formatMessage('flowEditor.pollIntervalValue', { minutes: selectedActionOrTrigger.pollInterval })}
|
||||
value={formatMessage('flowEditor.pollIntervalValue', {
|
||||
minutes: selectedActionOrTrigger.pollInterval,
|
||||
})}
|
||||
sx={{ mt: 2 }}
|
||||
fullWidth
|
||||
disabled
|
||||
|
@@ -24,13 +24,10 @@ const LIST_HEIGHT = 256;
|
||||
|
||||
const getPartialArray = (array: any[], length = array.length) => {
|
||||
return array.slice(0, length);
|
||||
}
|
||||
};
|
||||
|
||||
const Suggestions = (props: SuggestionsProps) => {
|
||||
const {
|
||||
data,
|
||||
onSuggestionClick = () => null,
|
||||
} = props;
|
||||
const { data, onSuggestionClick = () => null } = props;
|
||||
const [current, setCurrent] = React.useState<number | null>(0);
|
||||
const [listLength, setListLength] = React.useState<number>(SHORT_LIST_LENGTH);
|
||||
|
||||
@@ -40,41 +37,43 @@ const Suggestions = (props: SuggestionsProps) => {
|
||||
|
||||
const collapseList = () => {
|
||||
setListLength(SHORT_LIST_LENGTH);
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
setListLength(SHORT_LIST_LENGTH);
|
||||
}, [current])
|
||||
}, [current]);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={5}
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
<Typography variant="subtitle2" sx={{ p: 2, }}>Variables</Typography>
|
||||
<List
|
||||
disablePadding
|
||||
>
|
||||
<Paper elevation={5} sx={{ width: '100%' }}>
|
||||
<Typography variant="subtitle2" sx={{ p: 2 }}>
|
||||
Variables
|
||||
</Typography>
|
||||
<List disablePadding>
|
||||
{data.map((option: IStep, index: number) => (
|
||||
<>
|
||||
<ListItemButton
|
||||
divider
|
||||
onClick={() => setCurrent((currentIndex) => currentIndex === index ? null : index)}
|
||||
sx={{ py: 0.5, }}
|
||||
onClick={() =>
|
||||
setCurrent((currentIndex) =>
|
||||
currentIndex === index ? null : index
|
||||
)
|
||||
}
|
||||
sx={{ py: 0.5 }}
|
||||
>
|
||||
<ListItemText
|
||||
primary={option.name}
|
||||
/>
|
||||
<ListItemText primary={option.name} />
|
||||
|
||||
{!!option.output?.length && (
|
||||
current === index ? <ExpandLess /> : <ExpandMore />
|
||||
)}
|
||||
{!!option.output?.length &&
|
||||
(current === index ? <ExpandLess /> : <ExpandMore />)}
|
||||
</ListItemButton>
|
||||
|
||||
<Collapse in={current === index} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}>
|
||||
{getPartialArray(option.output as any || [], listLength)
|
||||
.map((suboption: any, index: number) => (
|
||||
<List
|
||||
component="div"
|
||||
disablePadding
|
||||
sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}
|
||||
>
|
||||
{getPartialArray((option.output as any) || [], listLength).map(
|
||||
(suboption: any, index: number) => (
|
||||
<ListItemButton
|
||||
sx={{ pl: 4 }}
|
||||
divider
|
||||
@@ -85,7 +84,7 @@ const Suggestions = (props: SuggestionsProps) => {
|
||||
primaryTypographyProps={{
|
||||
variant: 'subtitle1',
|
||||
title: 'Property name',
|
||||
sx: { fontWeight: 700 }
|
||||
sx: { fontWeight: 700 },
|
||||
}}
|
||||
secondary={suboption.value || ''}
|
||||
secondaryTypographyProps={{
|
||||
@@ -95,24 +94,18 @@ const Suggestions = (props: SuggestionsProps) => {
|
||||
}}
|
||||
/>
|
||||
</ListItemButton>
|
||||
))
|
||||
}
|
||||
)
|
||||
)}
|
||||
</List>
|
||||
|
||||
{option.output?.length > listLength && (
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={expandList}
|
||||
>
|
||||
{(option.output?.length || 0) > listLength && (
|
||||
<Button fullWidth onClick={expandList}>
|
||||
Show all
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{listLength === Infinity && (
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={collapseList}
|
||||
>
|
||||
<Button fullWidth onClick={collapseList}>
|
||||
Show less
|
||||
</Button>
|
||||
)}
|
||||
@@ -122,6 +115,6 @@ const Suggestions = (props: SuggestionsProps) => {
|
||||
</List>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Suggestions;
|
||||
|
@@ -1,6 +1,7 @@
|
||||
import type { IStep } from '@automatisch/types';
|
||||
|
||||
const joinBy = (delimiter = '.', ...args: string[]) => args.filter(Boolean).join(delimiter);
|
||||
const joinBy = (delimiter = '.', ...args: string[]) =>
|
||||
args.filter(Boolean).join(delimiter);
|
||||
|
||||
const process = (data: any, parentKey?: any, index?: number): any[] => {
|
||||
if (typeof data !== 'object') {
|
||||
@@ -8,14 +9,19 @@ const process = (data: any, parentKey?: any, index?: number): any[] => {
|
||||
{
|
||||
name: `${parentKey}.${index}`,
|
||||
value: data,
|
||||
}
|
||||
]
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const entries = Object.entries(data);
|
||||
|
||||
return entries.flatMap(([name, value]) => {
|
||||
const fullName = joinBy('.', parentKey, (index as number)?.toString(), name);
|
||||
const fullName = joinBy(
|
||||
'.',
|
||||
parentKey,
|
||||
(index as number)?.toString(),
|
||||
name
|
||||
);
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
return value.flatMap((item, index) => process(item, fullName, index));
|
||||
@@ -25,10 +31,12 @@ const process = (data: any, parentKey?: any, index?: number): any[] => {
|
||||
return process(value, fullName);
|
||||
}
|
||||
|
||||
return [{
|
||||
name: fullName,
|
||||
value,
|
||||
}];
|
||||
return [
|
||||
{
|
||||
name: fullName,
|
||||
value,
|
||||
},
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
@@ -39,12 +47,17 @@ export const processStepWithExecutions = (steps: IStep[]): any[] => {
|
||||
.filter((step: IStep) => {
|
||||
const hasExecutionSteps = !!step.executionSteps?.length;
|
||||
|
||||
return hasExecutionSteps
|
||||
return hasExecutionSteps;
|
||||
})
|
||||
.map((step: IStep, index: number) => ({
|
||||
id: step.id,
|
||||
// TODO: replace with step.name once introduced
|
||||
name: `${index + 1}. ${step.appKey?.charAt(0)?.toUpperCase() + step.appKey?.slice(1)}`,
|
||||
output: process(step.executionSteps?.[0]?.dataOut || {}, `step.${step.id}`),
|
||||
name: `${index + 1}. ${
|
||||
(step.appKey || '').charAt(0)?.toUpperCase() + step.appKey?.slice(1)
|
||||
}`,
|
||||
output: process(
|
||||
step.executionSteps?.[0]?.dataOut || {},
|
||||
`step.${step.id}`
|
||||
),
|
||||
}));
|
||||
};
|
||||
|
Reference in New Issue
Block a user