feat: add schedule integration

packages/web/src/components/ControlledAutocomplete/index.tsx

@@ -2,20 +2,16 @@ import * as React from 'react';
 import FormHelperText from '@mui/material/FormHelperText';
 import { Controller, useFormContext } from 'react-hook-form';
 import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
+import type { IFieldDropdownOption } from '@automatisch/types';
 
-interface ControlledAutocompleteProps extends AutocompleteProps<Option, boolean, boolean, boolean> {
+interface ControlledAutocompleteProps extends AutocompleteProps<IFieldDropdownOption, boolean, boolean, boolean> {
   shouldUnregister?: boolean;
   name: string;
   required?: boolean;
   description?: string;
 }
 
-type Option = {
-  label: string;
-  value: string;
-}
-
-const getOption = (options: readonly Option[], value: string) => options.find(option => option.value === value) || null;
+const getOption = (options: readonly IFieldDropdownOption[], value: string) => options.find(option => option.value === value);
 
 function ControlledAutocomplete(props: ControlledAutocompleteProps): React.ReactElement {
   const { control } = useFormContext();
@@ -48,8 +44,8 @@ function ControlledAutocomplete(props: ControlledAutocompleteProps): React.React
             options={options}
             value={getOption(options, field.value)}
             onChange={(event, selectedOption, reason, details) => {
-              const typedSelectedOption = selectedOption as Option;
-              if (typedSelectedOption?.value) {
+              const typedSelectedOption = selectedOption as IFieldDropdownOption;
+              if (Object.prototype.hasOwnProperty.call(typedSelectedOption, 'value')) {
                 controllerOnChange(typedSelectedOption.value);
               } else {
                 controllerOnChange(typedSelectedOption);

packages/web/src/components/FlowStep/index.tsx

@@ -57,7 +57,7 @@ function generateValidationSchema(substeps: ISubstep[]) {
 
       // base validation for the field if not exists
       if (!substepArgumentValidations[key]) {
-        substepArgumentValidations[key] = yup.string();
+        substepArgumentValidations[key] = yup.mixed();
       }
 
       if (typeof substepArgumentValidations[key] === 'object') {

packages/web/src/components/FlowSubstep/index.tsx

@@ -29,6 +29,9 @@ const validateSubstep = (substep: ISubstep, step: IStep) => {
 
     const argValue = step.parameters?.[arg.key];
 
+    // `false` is an exceptional valid value
+    if (argValue === false) return true;
+
     return Boolean(argValue);
   });
 };
@@ -52,7 +55,6 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
   const formContext = useFormContext();
   const [validationStatus, setValidationStatus] = React.useState<boolean | null>(validateSubstep(substep, formContext.getValues() as IStep));
 
-
   const handleChangeOnBlur = React.useCallback((key: string) => {
     return (value: string) => {
       const currentValue = step.parameters?.[key];

packages/web/src/components/InputCreator/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useLazyQuery } from '@apollo/client';
 import MuiTextField from '@mui/material/TextField';
-import type { IField, IFieldDropdown, IJSONObject } from '@automatisch/types';
+import type { IField, IFieldDropdown, IFieldDropdownOption, IJSONObject } from '@automatisch/types';
 
 import useDynamicData from 'hooks/useDynamicData';
 import { GET_DATA } from 'graphql/queries/get-data';
@@ -22,13 +22,9 @@ type RawOption = {
   value: string;
 };
 
-type Option = {
-  label: string;
-  value: string;
-};
-
-const optionGenerator = (options: RawOption[]): Option[] => options?.map(({ name, value }) => ({ label: name as string, value: value as string }));
-const getOption = (options: Option[], value: string) => options?.find(option => option.value === value);
+const computeArguments = (args: IFieldDropdown["source"]["arguments"]): IJSONObject => args.reduce((result, { name, value }) => ({ ...result, [name as string]: value }), {});
+const optionGenerator = (options: RawOption[]): IFieldDropdownOption[] => options?.map(({ name, value }) => ({ label: name as string, value: value }));
+const getOption = (options: IFieldDropdownOption[], value: string) => options?.find(option => option.value === value);
 
 export default function InputCreator(props: InputCreatorProps): React.ReactElement {
   const {
@@ -55,7 +51,7 @@ export default function InputCreator(props: InputCreatorProps): React.ReactEleme
   const computedName = namePrefix ? `${namePrefix}.${name}` : name;
 
   if (type === 'dropdown') {
-    const options = optionGenerator(data);
+    const preparedOptions = schema.options || optionGenerator(data?.getData);
 
     return (
       <ControlledAutocomplete
@@ -63,9 +59,9 @@ export default function InputCreator(props: InputCreatorProps): React.ReactEleme
         fullWidth
         disablePortal
         disableClearable={required}
-        options={options}
+        options={preparedOptions}
         renderInput={(params) => <MuiTextField {...params} label={label} />}
-        value={getOption(options, value)}
+        value={getOption(preparedOptions, value)}
         onChange={console.log}
         description={description}
         loading={loading}

packages/web/src/graphql/mutations/update-step.ts

@@ -8,6 +8,7 @@ export const UPDATE_STEP = gql`
       key
       appKey
       parameters
+      status
       connection {
         id
       }

packages/web/src/graphql/queries/get-apps.ts

@@ -64,6 +64,10 @@ export const GET_APPS = gql`
             description
             variables
             dependsOn
+            options {
+              label
+              value
+            }
             source {
               type
               name