feat(Editor): implement dynamic fields
This commit is contained in:
@@ -51,7 +51,7 @@ export default defineAction({
|
|||||||
value: false,
|
value: false,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
source: {
|
additionalFields: {
|
||||||
type: 'query',
|
type: 'query',
|
||||||
name: 'getDynamicFields',
|
name: 'getDynamicFields',
|
||||||
arguments: [
|
arguments: [
|
||||||
|
@@ -40,14 +40,13 @@ const getDynamicFields = async (
|
|||||||
$.step.parameters[parameterKey] = parameterValue;
|
$.step.parameters[parameterKey] = parameterValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const existingArguments = await step.getSetupFields();
|
|
||||||
const remainingArguments = await command.run($);
|
const remainingArguments = await command.run($);
|
||||||
|
|
||||||
if (remainingArguments.error) {
|
if (remainingArguments.error) {
|
||||||
throw new Error(JSON.stringify(remainingArguments.error));
|
throw new Error(JSON.stringify(remainingArguments.error));
|
||||||
}
|
}
|
||||||
|
|
||||||
return [...existingArguments, ...remainingArguments.data];
|
return remainingArguments.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default getDynamicFields;
|
export default getDynamicFields;
|
||||||
|
@@ -32,7 +32,7 @@ type Query {
|
|||||||
stepId: String!
|
stepId: String!
|
||||||
key: String!
|
key: String!
|
||||||
parameters: JSONObject
|
parameters: JSONObject
|
||||||
): [Field]
|
): [SubstepArgument]
|
||||||
getCurrentUser: User
|
getCurrentUser: User
|
||||||
getLicense: GetLicense
|
getLicense: GetLicense
|
||||||
healthcheck: AppHealth
|
healthcheck: AppHealth
|
||||||
@@ -70,38 +70,64 @@ directive @specifiedBy(
|
|||||||
url: String!
|
url: String!
|
||||||
) on SCALAR
|
) on SCALAR
|
||||||
|
|
||||||
|
type Trigger {
|
||||||
|
name: String
|
||||||
|
key: String
|
||||||
|
description: String
|
||||||
|
pollInterval: Int
|
||||||
|
type: String
|
||||||
|
substeps: [Substep]
|
||||||
|
}
|
||||||
|
|
||||||
type Action {
|
type Action {
|
||||||
name: String
|
name: String
|
||||||
key: String
|
key: String
|
||||||
description: String
|
description: String
|
||||||
substeps: [ActionSubstep]
|
substeps: [Substep]
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActionSubstep {
|
type Substep {
|
||||||
key: String
|
key: String
|
||||||
name: String
|
name: String
|
||||||
arguments: [ActionSubstepArgument]
|
arguments: [SubstepArgument]
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActionSubstepArgument {
|
type SubstepArgument {
|
||||||
label: String
|
label: String
|
||||||
key: String
|
key: String
|
||||||
type: String
|
type: String
|
||||||
description: String
|
description: String
|
||||||
required: Boolean
|
required: Boolean
|
||||||
variables: Boolean
|
variables: Boolean
|
||||||
options: [ArgumentOption]
|
options: [SubstepArgumentOption]
|
||||||
source: ActionSubstepArgumentSource
|
source: SubstepArgumentSource
|
||||||
|
additionalFields: SubstepArgumentAdditionalFields
|
||||||
dependsOn: [String]
|
dependsOn: [String]
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActionSubstepArgumentSource {
|
type SubstepArgumentOption {
|
||||||
type: String
|
label: String
|
||||||
name: String
|
value: JSONObject
|
||||||
arguments: [ActionSubstepArgumentSourceArgument]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ActionSubstepArgumentSourceArgument {
|
type SubstepArgumentSource {
|
||||||
|
type: String
|
||||||
|
name: String
|
||||||
|
arguments: [SubstepArgumentSourceArgument]
|
||||||
|
}
|
||||||
|
|
||||||
|
type SubstepArgumentSourceArgument {
|
||||||
|
name: String
|
||||||
|
value: String
|
||||||
|
}
|
||||||
|
|
||||||
|
type SubstepArgumentAdditionalFields {
|
||||||
|
type: String
|
||||||
|
name: String
|
||||||
|
arguments: [SubstepArgumentAdditionalFieldsArgument]
|
||||||
|
}
|
||||||
|
|
||||||
|
type SubstepArgumentAdditionalFieldsArgument {
|
||||||
name: String
|
name: String
|
||||||
value: String
|
value: String
|
||||||
}
|
}
|
||||||
@@ -203,7 +229,7 @@ type Field {
|
|||||||
description: String
|
description: String
|
||||||
docUrl: String
|
docUrl: String
|
||||||
clickToCopy: Boolean
|
clickToCopy: Boolean
|
||||||
options: [ArgumentOption]
|
options: [SubstepArgumentOption]
|
||||||
}
|
}
|
||||||
|
|
||||||
type FlowConnection {
|
type FlowConnection {
|
||||||
@@ -399,49 +425,6 @@ input StepInput {
|
|||||||
previousStep: PreviousStepInput
|
previousStep: PreviousStepInput
|
||||||
}
|
}
|
||||||
|
|
||||||
type Trigger {
|
|
||||||
name: String
|
|
||||||
key: String
|
|
||||||
description: String
|
|
||||||
pollInterval: Int
|
|
||||||
type: String
|
|
||||||
substeps: [TriggerSubstep]
|
|
||||||
}
|
|
||||||
|
|
||||||
type TriggerSubstep {
|
|
||||||
key: String
|
|
||||||
name: String
|
|
||||||
arguments: [TriggerSubstepArgument]
|
|
||||||
}
|
|
||||||
|
|
||||||
type TriggerSubstepArgument {
|
|
||||||
label: String
|
|
||||||
key: String
|
|
||||||
type: String
|
|
||||||
description: String
|
|
||||||
required: Boolean
|
|
||||||
variables: Boolean
|
|
||||||
source: TriggerSubstepArgumentSource
|
|
||||||
dependsOn: [String]
|
|
||||||
options: [ArgumentOption]
|
|
||||||
}
|
|
||||||
|
|
||||||
type TriggerSubstepArgumentSource {
|
|
||||||
type: String
|
|
||||||
name: String
|
|
||||||
arguments: [TriggerSubstepArgumentSourceArgument]
|
|
||||||
}
|
|
||||||
|
|
||||||
type ArgumentOption {
|
|
||||||
label: String
|
|
||||||
value: JSONObject
|
|
||||||
}
|
|
||||||
|
|
||||||
type TriggerSubstepArgumentSourceArgument {
|
|
||||||
name: String
|
|
||||||
value: String
|
|
||||||
}
|
|
||||||
|
|
||||||
type User {
|
type User {
|
||||||
id: String
|
id: String
|
||||||
email: String
|
email: String
|
||||||
|
9
packages/types/index.d.ts
vendored
9
packages/types/index.d.ts
vendored
@@ -104,6 +104,7 @@ export interface IFieldDropdown {
|
|||||||
dependsOn?: string[];
|
dependsOn?: string[];
|
||||||
options?: IFieldDropdownOption[];
|
options?: IFieldDropdownOption[];
|
||||||
source?: IFieldDropdownSource;
|
source?: IFieldDropdownSource;
|
||||||
|
additionalFields?: IFieldDropdownAdditionalFields;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IFieldDropdownSource {
|
export interface IFieldDropdownSource {
|
||||||
@@ -114,6 +115,14 @@ export interface IFieldDropdownSource {
|
|||||||
value: string;
|
value: string;
|
||||||
}[];
|
}[];
|
||||||
}
|
}
|
||||||
|
export interface IFieldDropdownAdditionalFields {
|
||||||
|
type: string;
|
||||||
|
name: string;
|
||||||
|
arguments: {
|
||||||
|
name: string;
|
||||||
|
value: string;
|
||||||
|
}[];
|
||||||
|
}
|
||||||
|
|
||||||
export interface IFieldDropdownOption {
|
export interface IFieldDropdownOption {
|
||||||
label: string;
|
label: string;
|
||||||
|
@@ -27,7 +27,7 @@ function ControlledAutocomplete(
|
|||||||
required = false,
|
required = false,
|
||||||
name,
|
name,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
shouldUnregister,
|
shouldUnregister = true,
|
||||||
onBlur,
|
onBlur,
|
||||||
onChange,
|
onChange,
|
||||||
description,
|
description,
|
||||||
|
@@ -1,7 +1,9 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import MuiTextField from '@mui/material/TextField';
|
import MuiTextField from '@mui/material/TextField';
|
||||||
|
import CircularProgress from '@mui/material/CircularProgress';
|
||||||
import type { IField, IFieldDropdownOption } from '@automatisch/types';
|
import type { IField, IFieldDropdownOption } from '@automatisch/types';
|
||||||
|
|
||||||
|
import useDynamicFields from 'hooks/useDynamicFields';
|
||||||
import useDynamicData from 'hooks/useDynamicData';
|
import useDynamicData from 'hooks/useDynamicData';
|
||||||
import PowerInput from 'components/PowerInput';
|
import PowerInput from 'components/PowerInput';
|
||||||
import TextField from 'components/TextField';
|
import TextField from 'components/TextField';
|
||||||
@@ -52,12 +54,17 @@ export default function InputCreator(
|
|||||||
} = schema;
|
} = schema;
|
||||||
|
|
||||||
const { data, loading } = useDynamicData(stepId, schema);
|
const { data, loading } = useDynamicData(stepId, schema);
|
||||||
|
const {
|
||||||
|
data: additionalFields,
|
||||||
|
loading: additionalFieldsLoading
|
||||||
|
} = useDynamicFields(stepId, schema);
|
||||||
const computedName = namePrefix ? `${namePrefix}.${name}` : name;
|
const computedName = namePrefix ? `${namePrefix}.${name}` : name;
|
||||||
|
|
||||||
if (type === 'dropdown') {
|
if (type === 'dropdown') {
|
||||||
const preparedOptions = schema.options || optionGenerator(data);
|
const preparedOptions = schema.options || optionGenerator(data);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<React.Fragment>
|
||||||
<ControlledAutocomplete
|
<ControlledAutocomplete
|
||||||
name={computedName}
|
name={computedName}
|
||||||
dependsOn={dependsOn}
|
dependsOn={dependsOn}
|
||||||
@@ -72,12 +79,29 @@ export default function InputCreator(
|
|||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
showOptionValue={showOptionValue}
|
showOptionValue={showOptionValue}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{(additionalFieldsLoading && !additionalFields?.length) && <div>
|
||||||
|
<CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
|
||||||
|
</div>}
|
||||||
|
|
||||||
|
{additionalFields?.map((field) => (
|
||||||
|
<InputCreator
|
||||||
|
key={field.key}
|
||||||
|
schema={field}
|
||||||
|
namePrefix="parameters"
|
||||||
|
stepId={stepId}
|
||||||
|
disabled={disabled}
|
||||||
|
showOptionValue={true}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'string') {
|
if (type === 'string') {
|
||||||
if (variables) {
|
if (variables) {
|
||||||
return (
|
return (
|
||||||
|
<React.Fragment>
|
||||||
<PowerInput
|
<PowerInput
|
||||||
label={label}
|
label={label}
|
||||||
description={description}
|
description={description}
|
||||||
@@ -85,10 +109,27 @@ export default function InputCreator(
|
|||||||
required={required}
|
required={required}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{(additionalFieldsLoading && !additionalFields?.length) && <div>
|
||||||
|
<CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
|
||||||
|
</div>}
|
||||||
|
|
||||||
|
{additionalFields?.map((field) => (
|
||||||
|
<InputCreator
|
||||||
|
key={field.key}
|
||||||
|
schema={field}
|
||||||
|
namePrefix="parameters"
|
||||||
|
stepId={stepId}
|
||||||
|
disabled={disabled}
|
||||||
|
showOptionValue={true}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<React.Fragment>
|
||||||
<TextField
|
<TextField
|
||||||
defaultValue={value}
|
defaultValue={value}
|
||||||
required={required}
|
required={required}
|
||||||
@@ -102,6 +143,22 @@ export default function InputCreator(
|
|||||||
helperText={description}
|
helperText={description}
|
||||||
clickToCopy={clickToCopy}
|
clickToCopy={clickToCopy}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{(additionalFieldsLoading && !additionalFields?.length) && <div>
|
||||||
|
<CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
|
||||||
|
</div>}
|
||||||
|
|
||||||
|
{additionalFields?.map((field) => (
|
||||||
|
<InputCreator
|
||||||
|
key={field.key}
|
||||||
|
schema={field}
|
||||||
|
namePrefix="parameters"
|
||||||
|
stepId={stepId}
|
||||||
|
disabled={disabled}
|
||||||
|
showOptionValue={true}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -81,7 +81,7 @@ const PowerInput = (props: PowerInputProps) => {
|
|||||||
name={name}
|
name={name}
|
||||||
control={control}
|
control={control}
|
||||||
defaultValue={defaultValue}
|
defaultValue={defaultValue}
|
||||||
shouldUnregister={false}
|
shouldUnregister={true}
|
||||||
render={({
|
render={({
|
||||||
field: {
|
field: {
|
||||||
value,
|
value,
|
||||||
|
@@ -38,9 +38,10 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
|
|||||||
required,
|
required,
|
||||||
name,
|
name,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
shouldUnregister,
|
shouldUnregister = true,
|
||||||
clickToCopy,
|
clickToCopy = false,
|
||||||
readOnly,
|
readOnly = false,
|
||||||
|
disabled = false,
|
||||||
onBlur,
|
onBlur,
|
||||||
onChange,
|
onChange,
|
||||||
...textFieldProps
|
...textFieldProps
|
||||||
@@ -64,6 +65,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
|
|||||||
<MuiTextField
|
<MuiTextField
|
||||||
{...textFieldProps}
|
{...textFieldProps}
|
||||||
{...field}
|
{...field}
|
||||||
|
disabled={disabled}
|
||||||
onChange={(...args) => {
|
onChange={(...args) => {
|
||||||
controllerOnChange(...args);
|
controllerOnChange(...args);
|
||||||
onChange?.(...args);
|
onChange?.(...args);
|
||||||
@@ -85,10 +87,3 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
TextField.defaultProps = {
|
|
||||||
readOnly: false,
|
|
||||||
disabled: false,
|
|
||||||
clickToCopy: false,
|
|
||||||
shouldUnregister: false,
|
|
||||||
};
|
|
||||||
|
@@ -122,6 +122,14 @@ export const GET_APPS = gql`
|
|||||||
value
|
value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
additionalFields {
|
||||||
|
type
|
||||||
|
name
|
||||||
|
arguments {
|
||||||
|
name
|
||||||
|
value
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
21
packages/web/src/graphql/queries/get-dynamic-fields.ts
Normal file
21
packages/web/src/graphql/queries/get-dynamic-fields.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { gql } from '@apollo/client';
|
||||||
|
|
||||||
|
export const GET_DYNAMIC_FIELDS = gql`
|
||||||
|
query GetDynamicFields(
|
||||||
|
$stepId: String!
|
||||||
|
$key: String!
|
||||||
|
$parameters: JSONObject
|
||||||
|
) {
|
||||||
|
getDynamicFields(stepId: $stepId, key: $key, parameters: $parameters) {
|
||||||
|
label
|
||||||
|
key
|
||||||
|
type
|
||||||
|
required
|
||||||
|
description
|
||||||
|
options {
|
||||||
|
label
|
||||||
|
value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
112
packages/web/src/hooks/useDynamicFields.ts
Normal file
112
packages/web/src/hooks/useDynamicFields.ts
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { useLazyQuery } from '@apollo/client';
|
||||||
|
import type { UseFormReturn } from 'react-hook-form';
|
||||||
|
import { useFormContext } from 'react-hook-form';
|
||||||
|
import set from 'lodash/set';
|
||||||
|
import isEqual from 'lodash/isEqual';
|
||||||
|
import type {
|
||||||
|
IField,
|
||||||
|
IFieldDropdownAdditionalFields,
|
||||||
|
IJSONObject,
|
||||||
|
} from '@automatisch/types';
|
||||||
|
|
||||||
|
import { GET_DYNAMIC_FIELDS } from 'graphql/queries/get-dynamic-fields';
|
||||||
|
|
||||||
|
const variableRegExp = /({.*?})/g;
|
||||||
|
|
||||||
|
// TODO: extract this function to a separate file
|
||||||
|
function computeArguments(
|
||||||
|
args: IFieldDropdownAdditionalFields['arguments'],
|
||||||
|
getValues: UseFormReturn['getValues']
|
||||||
|
): IJSONObject {
|
||||||
|
const initialValue = {};
|
||||||
|
return args.reduce((result, { name, value }) => {
|
||||||
|
const isVariable = variableRegExp.test(value);
|
||||||
|
|
||||||
|
if (isVariable) {
|
||||||
|
const sanitizedFieldPath = value.replace(/{|}/g, '');
|
||||||
|
const computedValue = getValues(sanitizedFieldPath);
|
||||||
|
|
||||||
|
if (computedValue === undefined)
|
||||||
|
throw new Error(`The ${sanitizedFieldPath} field is required.`);
|
||||||
|
|
||||||
|
set(result, name, computedValue);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
set(result, name, value);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}, initialValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch the dynamic fields for the given step.
|
||||||
|
* This hook must be within a react-hook-form context.
|
||||||
|
*
|
||||||
|
* @param stepId - the id of the step
|
||||||
|
* @param schema - the field schema that needs the dynamic fields
|
||||||
|
*/
|
||||||
|
function useDynamicFields(stepId: string | undefined, schema: IField) {
|
||||||
|
const lastComputedVariables = React.useRef({});
|
||||||
|
const [getDynamicFields, { called, data, loading }] =
|
||||||
|
useLazyQuery(GET_DYNAMIC_FIELDS);
|
||||||
|
const { getValues } = useFormContext();
|
||||||
|
const formValues = getValues();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return `null` when even a field is missing value.
|
||||||
|
*
|
||||||
|
* This must return the same reference if no computed variable is changed.
|
||||||
|
* Otherwise, it causes redundant network request!
|
||||||
|
*/
|
||||||
|
const computedVariables = React.useMemo(() => {
|
||||||
|
if (schema.type === 'dropdown' && schema.additionalFields) {
|
||||||
|
try {
|
||||||
|
const variables = computeArguments(schema.additionalFields.arguments, getValues);
|
||||||
|
|
||||||
|
// if computed variables are the same, return the last computed variables.
|
||||||
|
if (isEqual(variables, lastComputedVariables.current)) {
|
||||||
|
return lastComputedVariables.current;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastComputedVariables.current = variables;
|
||||||
|
|
||||||
|
return variables;
|
||||||
|
} catch (err) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
/**
|
||||||
|
* `formValues` is to trigger recomputation when form is updated.
|
||||||
|
* `getValues` is for convenience as it supports paths for fields like `getValues('foo.bar.baz')`.
|
||||||
|
*/
|
||||||
|
}, [schema, formValues, getValues]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (
|
||||||
|
schema.type === 'dropdown' &&
|
||||||
|
stepId &&
|
||||||
|
schema.additionalFields &&
|
||||||
|
computedVariables
|
||||||
|
) {
|
||||||
|
getDynamicFields({
|
||||||
|
variables: {
|
||||||
|
stepId,
|
||||||
|
...computedVariables,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [getDynamicFields, stepId, schema, computedVariables]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
called,
|
||||||
|
data: data?.getDynamicFields as IField[] | undefined,
|
||||||
|
loading,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useDynamicFields;
|
Reference in New Issue
Block a user