@dxos/plugin-automation 0.8.1-staging.9eaf14f → 0.8.2-main.10c050d

package/src/components/FunctionsPanel/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { FunctionsPanel } from './FunctionsPanel';
+
+export * from './FunctionsPanel';
+export default FunctionsPanel;

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { type JsonPath, RefImpl, toEffectSchema } from '@dxos/echo-schema';
+import { type FunctionType } from '@dxos/functions';
+import { useOnTransition } from '@dxos/react-ui';
+import { Form, type FormInputStateProps, type QueryRefOptions, useFormValues } from '@dxos/react-ui-form';
+
+export type FunctionInputEditorProps = {
+  functions: FunctionType[];
+  onQueryRefOptions: QueryRefOptions;
+} & FormInputStateProps;
+
+/**
+ * Editor component for function input parameters.
+ */
+export const FunctionInputEditor = ({
+  functions,
+  getValue,
+  onValueChange,
+  onQueryRefOptions,
+}: FunctionInputEditorProps) => {
+  const selectedFunctionValue = useFormValues(['function' as JsonPath]);
+  const selectedFunctionId = useMemo(() => {
+    if (selectedFunctionValue instanceof RefImpl) {
+      return selectedFunctionValue.dxn.toString().split('dxn:echo:@:').at(1);
+    }
+  }, [selectedFunctionValue]);
+
+  const selectedFunction = useMemo(
+    () => functions.find((f) => f.id === selectedFunctionId),
+    [functions, selectedFunctionId],
+  );
+
+  useOnTransition(
+    // Clear function parameter input when the function changes.
+    selectedFunctionValue,
+    (prevValue) => prevValue !== undefined && prevValue !== selectedFunctionValue,
+    (currValue) => currValue !== undefined,
+    () => onValueChange('object', {}),
+  );
+
+  const inputSchema = useMemo(() => selectedFunction?.inputSchema, [selectedFunction]);
+  const effectSchema = useMemo(() => (inputSchema ? toEffectSchema(inputSchema) : undefined), [inputSchema]);
+  const propertyCount = inputSchema?.properties ? Object.keys(inputSchema.properties).length : 0;
+
+  const values = useMemo(() => getValue() ?? {}, [getValue]);
+
+  const handleValuesChanged = useCallback(
+    (values: any) => {
+      onValueChange('object', values);
+    },
+    [onValueChange],
+  );
+
+  if (selectedFunction === undefined || effectSchema === undefined || propertyCount === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <h3 className='text-md'>Function parameters</h3>
+      {/* TODO(ZaymonFC): Try using <FormFields /> internal component for this nesting.
+                          This would allow errors to flow up to the root context. */}
+      <Form
+        schema={effectSchema}
+        values={values}
+        classNames='p-0'
+        onValuesChanged={handleValuesChanged}
+        onQueryRefOptions={onQueryRefOptions}
+      />
+    </>
+  );
+};

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { type FunctionTriggerType, TriggerKind, type TriggerType } from '@dxos/functions';
+import { useTranslation } from '@dxos/react-ui';
+import { SelectInput, type InputProps, useInputProps } from '@dxos/react-ui-form';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+
+export type SpecSelectorProps = InputProps;
+
+export const SpecSelector = (props: SpecSelectorProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const specProps = useInputProps(['spec' satisfies keyof FunctionTriggerType]);
+
+  const handleTypeChange = useCallback(
+    (_type: any, value: string): TriggerType | undefined => {
+      const getDefaultTriggerSpec = (kind: string) => {
+        switch (kind) {
+          case TriggerKind.Timer:
+            return { kind: TriggerKind.Timer, cron: '' };
+          case TriggerKind.Subscription:
+            return { kind: TriggerKind.Subscription, filter: {} };
+          case TriggerKind.Queue:
+            return { kind: TriggerKind.Queue, queue: '' };
+          case TriggerKind.Email:
+            return { kind: TriggerKind.Email };
+          case TriggerKind.Webhook:
+            return { kind: TriggerKind.Webhook };
+          default:
+            return undefined;
+        }
+      };
+
+      const defaultSpec = getDefaultTriggerSpec(value);
+      if (!defaultSpec) {
+        return;
+      }
+
+      // Update the entire spec object, not just the `spec.kind`.
+      specProps.onValueChange('object', defaultSpec);
+    },
+    [specProps],
+  );
+
+  const options = useMemo(
+    () =>
+      Object.values(TriggerKind).map((kind) => ({
+        value: kind,
+        label: t(`trigger type ${kind}`),
+      })),
+    [t],
+  );
+
+  return <SelectInput {...props} options={options} onValueChange={handleTypeChange} />;
+};

package/src/components/TriggerEditor/TriggerEditor.stories.tsx

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import '@dxos-theme';
@@ -7,10 +7,11 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
-import { FunctionType, FunctionTrigger, TriggerKind } from '@dxos/functions/types';
-import { create } from '@dxos/live-object';
+import { FunctionType, FunctionTrigger, TriggerKind } from '@dxos/functions';
+import { live } from '@dxos/live-object';
+import { faker } from '@dxos/random';
 import { useSpaces } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { ContactType, withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { TriggerEditor } from './TriggerEditor';
@@ -26,7 +27,7 @@ const DefaultStory = () => {
       return;
     }
 
-    const trigger = space.db.add(create(FunctionTrigger, { spec: { type: TriggerKind.Timer, cron: '' } }));
+    const trigger = space.db.add(live(FunctionTrigger, { spec: { kind: TriggerKind.Timer, cron: '' } }));
     setTrigger(trigger);
   }, [space]);
 
@@ -35,8 +36,8 @@ const DefaultStory = () => {
   }
 
   return (
-    <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
-      <TriggerEditor space={space} trigger={trigger} />
+    <div role='none' className='w-[32rem] bs-fit border border-separator rounded-sm'>
+      <TriggerEditor space={space} trigger={trigger} onSave={(values) => console.log('on save', values)} />
     </div>
   );
 };
@@ -49,14 +50,22 @@ const meta: Meta = {
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [FunctionType, FunctionTrigger],
+      types: [FunctionType, FunctionTrigger, ContactType],
       onSpaceCreated: ({ space }) => {
         for (const fn of functions) {
-          space.db.add(create(FunctionType, fn));
+          space.db.add(live(FunctionType, fn));
         }
+        Array.from({ length: 10 }).map(() => {
+          return space.db.add(
+            live(ContactType, {
+              name: faker.person.fullName(),
+              identifiers: [],
+            }),
+          );
+        });
       },
     }),
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center m-2' }),
+    withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),
     withTheme,
   ],
   parameters: {

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -1,23 +1,23 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { ComputeGraph } from '@dxos/conductor';
+import { Type } from '@dxos/echo';
 import {
   FunctionType,
   FunctionTriggerSchema,
   type FunctionTriggerType,
   type FunctionTrigger,
   ScriptType,
-  TriggerKind,
-} from '@dxos/functions/types';
-import { Filter, useQuery, type Space } from '@dxos/react-client/echo';
-import { IconButton, Input, useTranslation } from '@dxos/react-ui';
-import { type CustomInputMap, Form, type InputProps, SelectInput, TextInput, useInputProps } from '@dxos/react-ui-form';
+} from '@dxos/functions';
+import { Filter, Ref, useQuery, type Space } from '@dxos/react-client/echo';
+import { type CustomInputMap, Form, SelectInput, useRefQueryLookupHandler } from '@dxos/react-ui-form';
 
-import { AUTOMATION_PLUGIN } from '../../meta';
+import { FunctionInputEditor, type FunctionInputEditorProps } from './FunctionInputEditor';
+import { SpecSelector } from './SpecSelector';
 
 export type TriggerEditorProps = {
   space: Space;
@@ -26,119 +26,81 @@ export type TriggerEditorProps = {
   onCancel?: () => void;
 };
 
-const PayloadInput = (props: InputProps & { property: string }) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  // TODO(dmaretskyi): Prop name (`meta`) should be passed in.
-  const inputProps = useInputProps(['meta', props.property]);
-  return (
-    <div role='none' className='flex items-center mt-2 gap-1'>
-      <div role='none' className='flex-1'>
-        <TextInput {...inputProps} type='string' label={props.property} />
-      </div>
-      <IconButton
-        icon='ph--trash--regular'
-        iconOnly
-        classNames={'mt-6'}
-        label={t('trigger meta remove')}
-        onClick={() => {
-          const newValues: any = { ...props.getValue() };
-          delete newValues[props.property];
-          props.onValueChange('object', newValues);
-        }}
-      />
-    </div>
-  );
-};
-
 export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEditorProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-
-  const functions = useQuery(space, Filter.schema(FunctionType));
-  const workflows = useQuery(space, Filter.schema(ComputeGraph));
-  const scripts = useQuery(space, Filter.schema(ScriptType));
-
   const handleSave = (values: FunctionTriggerType) => {
     onSave?.(values);
   };
 
-  const Custom = useMemo(
-    (): CustomInputMap => ({
-      ['function' satisfies keyof FunctionTriggerType]: (props) => (
-        <SelectInput
-          {...props}
-          options={getWorkflowOptions(workflows).concat(getFunctionOptions(scripts, functions))}
-        />
-      ),
-      ['spec.type' as const]: (props) => (
-        <SelectInput
-          {...props}
-          options={Object.values(TriggerKind).map((kind) => ({
-            value: kind,
-            label: t(`trigger type ${kind}`),
-          }))}
-        />
-      ),
-      // TODO(wittjosiah): Form should be able to handle arbitrary records by default.
-      ['meta' as const]: (props) => {
-        const payload = props.getValue() ?? {};
-        useEffect(() => props.onValueChange('object', { ...payload }), []);
-        const [newPayloadFieldName, setNewPayloadFieldName] = useState('');
-
-        const handleAddPayload = useCallback(() => {
-          if (newPayloadFieldName.length) {
-            const payload = props.getValue() ?? {};
-            const payloadWithNewProp = { ...payload, [newPayloadFieldName]: '' };
-            setNewPayloadFieldName('');
-            props.onValueChange('object', payloadWithNewProp);
-          }
-        }, [newPayloadFieldName, props.getValue, props.onValueChange]);
-
-        return (
-          <>
-            <div>{/* TODO(wittjosiah): props.label */ 'Payload'}</div>
-            {[...Object.keys(payload)].map((key) => (
-              <PayloadInput key={key} property={key} {...props} />
-            ))}
-            <div role='none' className='flex items-center mt-2 gap-1 plb-1'>
-              <div role='none' className='flex-1'>
-                <Input.Root>
-                  <Input.TextInput
-                    placeholder={t('trigger payload prop name placeholder')}
-                    value={newPayloadFieldName}
-                    onChange={(event) => setNewPayloadFieldName(event.target.value)}
-                  />
-                </Input.Root>
-              </div>
-              <IconButton
-                icon='ph--plus--regular'
-                iconOnly
-                label={t('trigger payload add')}
-                onClick={handleAddPayload}
-              />
-            </div>
-          </>
-        );
-      },
-    }),
-    [workflows, scripts, functions, t],
-  );
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+  const Custom = useCustomInputs(space, handleRefQueryLookup);
 
   return (
-    <Form<FunctionTriggerType>
+    <Form
+      Custom={Custom}
       schema={FunctionTriggerSchema}
       values={trigger}
       onSave={handleSave}
       onCancel={onCancel}
-      Custom={Custom}
+      onQueryRefOptions={handleRefQueryLookup}
     />
   );
 };
 
+const useCustomInputs = (space: Space, onQueryRefOptions: FunctionInputEditorProps['onQueryRefOptions']) => {
+  const functions = useQuery(space, Filter.type(FunctionType));
+  const workflows = useQuery(space, Filter.type(ComputeGraph));
+  const scripts = useQuery(space, Filter.type(ScriptType));
+
+  return useMemo(
+    (): CustomInputMap => ({
+      // Function selector.
+      ['function' satisfies keyof FunctionTriggerType]: (props) => {
+        const getValue = useCallback(() => {
+          const formValue = props.getValue();
+          if (Ref.isRef(formValue)) {
+            return formValue.dxn.toString() as string;
+          }
+          return undefined;
+        }, [props]);
+
+        const handleOnValueChange = useCallback(
+          (_type: any, dxnString: string) => {
+            const dxn = Type.DXN.parse(dxnString);
+            if (dxn) {
+              const ref = Ref.fromDXN(dxn);
+              props.onValueChange('object', ref);
+            }
+          },
+          [props.onValueChange],
+        );
+
+        return (
+          <SelectInput
+            {...props}
+            getValue={getValue as any}
+            onValueChange={handleOnValueChange}
+            options={getWorkflowOptions(workflows).concat(getFunctionOptions(scripts, functions))}
+          />
+        );
+      },
+
+      // Spec selector.
+      ['spec.kind' as const]: SpecSelector,
+
+      // Function input editor.
+      ['input' as const]: (props) => (
+        <FunctionInputEditor {...props} functions={functions} onQueryRefOptions={onQueryRefOptions} />
+      ),
+    }),
+    [workflows, scripts, functions],
+  );
+};
+
 const getWorkflowOptions = (graphs: ComputeGraph[]) => {
   return graphs.map((graph) => ({ label: `compute-${graph.id}`, value: `dxn:echo:@:${graph.id}` }));
 };
 
 const getFunctionOptions = (scripts: ScriptType[], functions: FunctionType[]) => {
   const getLabel = (fn: FunctionType) => scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
-  return functions.map((fn) => ({ label: getLabel(fn), value: `dxn:worker:${fn.name}` }));
+  return functions.map((fn) => ({ label: getLabel(fn), value: `dxn:echo:@:${fn.id}` }));
 };

package/src/components/index.ts

@@ -6,4 +6,7 @@ import { lazy } from 'react';
 
 export * from './TriggerEditor';
 
+export const AutomationContainer = lazy(() => import('./AutomationContainer'));
 export const AutomationPanel = lazy(() => import('./AutomationPanel'));
+export const FunctionsContainer = lazy(() => import('./FunctionsContainer'));
+export const FunctionsPanel = lazy(() => import('./FunctionsPanel'));

package/src/meta.ts

@@ -12,5 +12,5 @@ export const meta: PluginMeta = {
   description:
     'The Automation tab allows you to trigger pre-defined workflows related to the element you are interacting with inside of Composer.',
   icon: 'ph--robot--regular',
-  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-automation',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-automation',
 };

package/src/testing/test-functions.ts

@@ -2,16 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import { AST, S, toJsonSchema } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
+import { ContactType } from '@dxos/client/testing';
+import { Ref, toJsonSchema } from '@dxos/echo-schema';
 
 export const functions = [
   {
     name: 'example.com/function/chess',
     version: '0.1.0',
     inputSchema: toJsonSchema(
-      S.Struct({
-        level: S.Number.annotations({
-          [AST.TitleAnnotationId]: 'Level',
+      Schema.Struct({
+        level: Schema.Number.annotations({
+          title: 'Level',
         }),
       }),
     ),
@@ -21,12 +24,23 @@ export const functions = [
     version: '0.1.0',
     binding: 'FOREX',
     inputSchema: toJsonSchema(
-      S.Struct({
-        from: S.String.annotations({
-          [AST.TitleAnnotationId]: 'Currency from',
+      Schema.Struct({
+        from: Schema.String.annotations({
+          title: 'Currency from',
+        }),
+        to: Schema.String.annotations({
+          title: 'Currency to',
         }),
-        to: S.String.annotations({
-          [AST.TitleAnnotationId]: 'Currency to',
+      }),
+    ),
+  },
+  {
+    name: 'example.com/function/ping-contact',
+    version: '0.0.1',
+    inputSchema: toJsonSchema(
+      Schema.Struct({
+        contact: Ref(ContactType).annotations({
+          title: 'Contact',
         }),
       }),
     ),

package/src/translations.ts

@@ -11,8 +11,17 @@ export default [
         'plugin name': 'Automation',
         'automation panel label': 'Automations',
         'script automation label': 'Automation',
+        'automation verbose label': 'Manage automations',
+        'automation description': 'You can manage all the triggers which automate your space here.',
 
-        'trigger editor title': 'New Trigger',
+        'functions panel label': 'Functions',
+        'functions verbose label': 'Manage deployed functions',
+        'functions description': 'You can manage all the functions deployed from your space on EDGE here.',
+        'function copy id': 'Copy Function ID',
+        'no functions found': 'No functions found',
+        'go to function source button label': 'Show function source',
+
+        'trigger editor title': 'Configure Trigger',
         'new trigger label': 'Add Trigger',
         'trigger type timer': 'Timer',
         'trigger type webhook': 'Webhook',

package/src/types.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Schema } from 'effect';
+
+import { SpaceSchema } from '@dxos/react-client/echo';
+
+import { AUTOMATION_PLUGIN } from './meta';
+
+const TriggerTemplate = Schema.Union(
+  Schema.Struct({ type: Schema.Literal('timer'), cron: Schema.String }),
+  Schema.Struct({ type: Schema.Literal('queue'), queueDXN: Schema.Any }),
+);
+
+export namespace AutomationAction {
+  const AUTOMATION_ACTION = `${AUTOMATION_PLUGIN}/action`;
+
+  export class CreateTriggerFromTemplate extends Schema.TaggedClass<CreateTriggerFromTemplate>()(
+    `${AUTOMATION_ACTION}/create-trigger-from-template`,
+    {
+      input: Schema.Struct({
+        space: SpaceSchema,
+        template: TriggerTemplate,
+        enabled: Schema.optional(Schema.Boolean),
+        // TODO(wittjosiah): Improve how this lookup is done.
+        scriptName: Schema.optional(Schema.String),
+        input: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Any })),
+      }),
+      output: Schema.Void,
+    },
+  ) {}
+}