From 6a3d1ced9379420e299b82719dc2a1d033a39b0a Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Tue, 1 Feb 2022 22:11:32 +0100 Subject: [PATCH] feat: introduce choose account substep in flow editor --- packages/backend/src/models/connection.ts | 4 +- packages/backend/src/models/step.ts | 4 +- .../components/ChooseAccountSubstep/index.tsx | 53 +++++++++++++++++++ packages/web/src/components/FlowRow/style.ts | 3 -- .../web/src/components/FlowStep/index.tsx | 38 ++++++++++--- packages/web/src/types/app.ts | 13 ++++- 6 files changed, 99 insertions(+), 16 deletions(-) create mode 100644 packages/web/src/components/ChooseAccountSubstep/index.tsx diff --git a/packages/backend/src/models/connection.ts b/packages/backend/src/models/connection.ts index 146daa38..6c1e92e4 100644 --- a/packages/backend/src/models/connection.ts +++ b/packages/backend/src/models/connection.ts @@ -20,10 +20,10 @@ class Connection extends Base { required: ['key', 'data'], properties: { - id: { type: 'integer' }, + id: { type: 'string' }, key: { type: 'string', minLength: 1, maxLength: 255 }, data: { type: 'object' }, - userId: { type: 'integer' }, + userId: { type: 'string' }, verified: { type: 'boolean' }, }, }; diff --git a/packages/backend/src/models/step.ts b/packages/backend/src/models/step.ts index b6f63637..a5fe6055 100644 --- a/packages/backend/src/models/step.ts +++ b/packages/backend/src/models/step.ts @@ -13,7 +13,7 @@ class Step extends Base { key: string; appKey: string; type!: StepEnumType; - connectionId: number; + connectionId: string; position: number; parameters: string; connection?: Connection; @@ -31,7 +31,7 @@ class Step extends Base { key: { type: ['string', null] }, appKey: { type: ['string', null], minLength: 1, maxLength: 255 }, type: { type: 'string', enum: ['action', 'trigger'] }, - connectionId: { type: ['integer', null] }, + connectionId: { type: ['string', null] }, position: { type: 'integer' }, parameters: { type: ['string', null] }, }, diff --git a/packages/web/src/components/ChooseAccountSubstep/index.tsx b/packages/web/src/components/ChooseAccountSubstep/index.tsx new file mode 100644 index 00000000..0eae914e --- /dev/null +++ b/packages/web/src/components/ChooseAccountSubstep/index.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import { useQuery } from '@apollo/client'; +import Autocomplete from '@mui/material/Autocomplete'; +import TextField from '@mui/material/TextField'; + +import type { App, AppConnection } from 'types/app'; +import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections'; + +type ChooseAccountSubstepProps = { + appKey: string; + connectionId: string; + onChange: (connectionId: string) => void; +}; + +const optionGenerator = (connection: AppConnection): { label: string; value: string; } => ({ + label: connection?.data?.screenName as string, + value: connection?.id as string, +}); + +const getOption = (options: Record[], connectionId: string) => options.find(connection => connection.value === connectionId) || null; + +function ChooseAccountSubstep(props: ChooseAccountSubstepProps): React.ReactElement { + const { appKey, connectionId, onChange } = props; + const { data, loading } = useQuery(GET_APP_CONNECTIONS, { variables: { key: appKey }}); + + const app: App = data?.getApp; + const connections = app?.connections || []; + + const connectionOptions = React.useMemo(() => connections.map((connection) => optionGenerator(connection)), [connections]); + + const handleChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => { + if (typeof selectedOption === 'object') { + const typedSelectedOption = selectedOption as { value: string }; + const value = typedSelectedOption.value; + + onChange(value); + } + }, [onChange]); + + return ( + } + value={getOption(connectionOptions, connectionId)} + onChange={handleChange} + loading={loading} + /> + ); +} + +export default ChooseAccountSubstep; diff --git a/packages/web/src/components/FlowRow/style.ts b/packages/web/src/components/FlowRow/style.ts index 2403d416..c392df8b 100644 --- a/packages/web/src/components/FlowRow/style.ts +++ b/packages/web/src/components/FlowRow/style.ts @@ -12,9 +12,6 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({ export const Typography = styled(MuiTypography)(() => ({ - '&.MuiTypography-h6': { - textTransform: 'capitalize', - }, display: 'inline-block', width: 500, maxWidth: '70%', diff --git a/packages/web/src/components/FlowStep/index.tsx b/packages/web/src/components/FlowStep/index.tsx index f98c4de9..3b77e2eb 100644 --- a/packages/web/src/components/FlowStep/index.tsx +++ b/packages/web/src/components/FlowStep/index.tsx @@ -13,6 +13,7 @@ import Autocomplete from '@mui/material/Autocomplete'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import IconButton from '@mui/material/IconButton'; +import ChooseAccountSubstep from 'components/ChooseAccountSubstep'; import Form from 'components/Form'; import InputCreator from 'components/InputCreator'; import FlowStepContextMenu from 'components/FlowStepContextMenu'; @@ -38,7 +39,7 @@ const optionGenerator = (app: Record): { label: string; value: value: app.key as string, }); -const getOption = (options: Record[], appKey: unknown) => options.find(app => app.value === appKey as string); +const getOption = (options: Record[], appKey: unknown) => options.find(app => app.value === appKey as string) || null; const parseStep = (step: any) => { try { @@ -76,7 +77,7 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul } }, [step, onChange]); - const appAndEventOptions = 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 substeps = React.useMemo(() => actionsOrTriggers?.find(({ key }) => key === step.key)?.subSteps, [actionsOrTriggers, step?.key]); @@ -103,6 +104,15 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul } }, []); + const onAccountChange = React.useCallback((connectionId: string) => { + setStep((step) => ({ + ...step, + connection: { + id: connectionId, + }, + })); + }, []); + const onParameterChange = React.useCallback((event: React.SyntheticEvent) => { const { name, value } = event.target as HTMLInputElement; @@ -172,9 +182,9 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul } - value={getOption(appAndEventOptions, step.appKey)} + options={appOptions} + renderInput={(params) => } + value={getOption(appOptions, step.appKey)} onChange={onAppChange} /> @@ -207,9 +217,21 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul - {substep?.arguments?.map((argument: AppFields) => ( - - ))} + {substep.name === 'Choose account' && ( + + )} + + {substep.name !== 'Choose account' && ( + + {substep?.arguments?.map((argument: AppFields) => ( + + ))} + + )} diff --git a/packages/web/src/types/app.ts b/packages/web/src/types/app.ts index 79e2fa8a..b674839e 100644 --- a/packages/web/src/types/app.ts +++ b/packages/web/src/types/app.ts @@ -11,6 +11,16 @@ type AppFields = { clickToCopy: boolean, }; +type AppConnection = { + id: string; + key: string; + verified: boolean; + createdAt: string; + data: { + [key: string]: any; + }; +}; + type App = { key: string; name: string; @@ -23,6 +33,7 @@ type App = { reconnectionSteps: any[]; triggers: any[]; actions: any[]; + connections: AppConnection[]; }; -export type { App, AppFields }; +export type { App, AppFields, AppConnection };