@dxos/plugin-automation 0.8.4-main.b97322e → 0.8.4-main.bc2380dfbc

package/src/components/FunctionsRegistry/FunctionsRegistry.tsx

@@ -0,0 +1,119 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import { useState } from 'react';
+import React, { useCallback } from 'react';
+
+import * as OperationModule from '@dxos/compute';
+import { Context } from '@dxos/context';
+import { Filter, Obj } from '@dxos/echo';
+import { getDeployedFunctions } from '@dxos/functions-runtime/edge';
+import { useClient } from '@dxos/react-client';
+import { type Space, useQuery } from '@dxos/react-client/echo';
+import { IconButton, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+import { List } from '@dxos/react-ui-list';
+import { ghostHover, mx } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+const grid = 'grid grid-cols-[1fr_1fr_auto] min-h-[2.5rem]';
+
+type FunctionsRegistryProps = {
+  space: Space;
+};
+
+export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
+  const client = useClient();
+  const [loading, setLoading] = useState(true);
+  const [functions, setFunctions] = useState<OperationModule.Operation.PersistentOperation[]>([]);
+  const { t } = useTranslation(meta.id);
+
+  const dbFunctions = useQuery(space.db, Filter.type(OperationModule.Operation.PersistentOperation));
+
+  const state = (func: OperationModule.Operation.PersistentOperation) => {
+    const funcKey = Obj.getMeta(func).key;
+    const dbFunction = dbFunctions.find((f) => Obj.getMeta(f).key === funcKey);
+    if (!dbFunction) {
+      return 'import';
+    }
+    if (Obj.getMeta(dbFunction).version === Obj.getMeta(func).version && dbFunction.updated === func.updated) {
+      return 'none';
+    }
+    return 'update';
+  };
+
+  useAsyncEffect(async () => {
+    setLoading(true);
+    const functions = await getDeployedFunctions(Context.default(), client, true);
+    setFunctions(functions);
+    setLoading(false);
+  }, []);
+
+  const hanleImportOrUpdate = useCallback(
+    async (func: OperationModule.Operation.PersistentOperation) => {
+      const funcKey = Obj.getMeta(func).key;
+      const functions = funcKey
+        ? await space.db
+            .query(Filter.and(Filter.type(OperationModule.Operation.PersistentOperation), Filter.key(funcKey)))
+            .run()
+        : [];
+      const [existingFunc] = functions;
+      if (!existingFunc) {
+        space.db.add(func);
+        return;
+      }
+      OperationModule.Operation.setFrom(existingFunc, func);
+    },
+    [space],
+  );
+
+  return (
+    <Settings.Panel>
+      {functions.length > 0 && (
+        <List.Root<OperationModule.Operation.PersistentOperation>
+          items={functions}
+          isItem={Schema.is(OperationModule.Operation.PersistentOperation)}
+          getId={(func) => func.id}
+        >
+          {({ items }) => (
+            <div role='list' className='flex flex-col w-full'>
+              {items?.map((func) => (
+                <List.Item<OperationModule.Operation.PersistentOperation>
+                  key={func.id}
+                  item={func}
+                  classNames={mx(grid, ghostHover, 'items-center', 'px-2', 'min-h-[3rem]')}
+                >
+                  <div className='flex flex-col truncate'>
+                    <List.ItemTitle classNames='truncate'>{func.name}</List.ItemTitle>
+                    <div className='text-xs text-description truncate'>{Obj.getMeta(func).key}</div>
+                  </div>
+                  <div className='flex flex-col truncate'>
+                    <div className='text-xs text-description truncate'>{Obj.getMeta(func).version}</div>
+                    <div className='text-xs text-description truncate'>
+                      {func.updated ? `Uploaded ${new Date(func.updated).toLocaleString()}` : ''}
+                    </div>
+                  </div>
+
+                  <IconButton
+                    iconOnly
+                    icon={state(func) === 'update' ? 'ph--arrows-clockwise--regular' : 'ph--download--regular'}
+                    label={
+                      state(func) === 'update' ? t('update-function-button.label') : t('import-function-button.label')
+                    }
+                    disabled={state(func) === 'none'}
+                    onClick={() => hanleImportOrUpdate(func)}
+                  />
+                </List.Item>
+              ))}
+            </div>
+          )}
+        </List.Root>
+      )}
+
+      {loading && <div className='text-center py-4 text-gray-500'>{t('loading-functions.message')}</div>}
+    </Settings.Panel>
+  );
+};

package/src/components/FunctionsRegistry/index.ts

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

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -2,29 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
+import type * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useMemo } from 'react';
 
-import { Ref, Type } from '@dxos/echo';
-import { type JsonPath } 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';
+import { type Operation } from '@dxos/compute';
+import { type Database, JsonSchema, Obj, Ref } from '@dxos/echo';
+import { type JsonPath } from '@dxos/echo/internal';
+import { useOnTransition, useTranslation } from '@dxos/react-ui';
+import { Form, type FormFieldStateProps, type FormRootProps, useFormValues } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
 
 export type FunctionInputEditorProps = {
-  functions: FunctionType[];
-  onQueryRefOptions: QueryRefOptions;
-} & FormInputStateProps;
+  type: SchemaAST.AST;
+  functions: Operation.PersistentOperation[];
+  db?: Database.Database;
+} & FormFieldStateProps;
 
-/**
- * Editor component for function input parameters.
- */
-export const FunctionInputEditor = ({
-  functions,
-  getValue,
-  onValueChange,
-  onQueryRefOptions,
-}: FunctionInputEditorProps) => {
-  const selectedFunctionValue = useFormValues(['function' as JsonPath]);
+export const FunctionInputEditor = ({ type, functions, db, getValue, onValueChange }: FunctionInputEditorProps) => {
+  const { t } = useTranslation(meta.id);
+  const selectedFunctionValue = useFormValues(FunctionInputEditor.displayName, ['function' as JsonPath]);
   const selectedFunctionId = useMemo(() => {
     if (Ref.isRef(selectedFunctionValue)) {
       return selectedFunctionValue.dxn.toString().split('dxn:echo:@:').at(1);
@@ -39,22 +36,30 @@ export const FunctionInputEditor = ({
   useOnTransition(
     // Clear function parameter input when the function changes.
     selectedFunctionValue,
-    (prevValue) => prevValue !== undefined && prevValue !== selectedFunctionValue,
+    (prevValue) => {
+      if (!Ref.isRef(prevValue) || !Ref.isRef(selectedFunctionValue)) {
+        return false;
+      }
+
+      return prevValue.dxn.toString() !== selectedFunctionValue.dxn.toString();
+    },
     (currValue) => currValue !== undefined,
-    () => onValueChange('object', {}),
+    () => onValueChange(type, {}),
   );
 
   const inputSchema = useMemo(() => selectedFunction?.inputSchema, [selectedFunction]);
-  const effectSchema = useMemo(() => (inputSchema ? Type.toEffectSchema(inputSchema) : undefined), [inputSchema]);
+  const effectSchema = useMemo(() => (inputSchema ? JsonSchema.toEffectSchema(inputSchema) : undefined), [inputSchema]);
   const propertyCount = inputSchema?.properties ? Object.keys(inputSchema.properties).length : 0;
+  const defaultValues = useMemo(() => {
+    const raw = getValue() ?? {};
+    return Obj.isObject(raw) ? { ...Obj.getSnapshot(raw) } : { ...raw };
+  }, [getValue]);
 
-  const values = useMemo(() => getValue() ?? {}, [getValue]);
-
-  const handleValuesChanged = useCallback(
-    (values: any) => {
-      onValueChange('object', values);
+  const handleValuesChanged = useCallback<NonNullable<FormRootProps['onValuesChanged']>>(
+    (values) => {
+      onValueChange(type, values);
     },
-    [onValueChange],
+    [type, onValueChange],
   );
 
   if (selectedFunction === undefined || effectSchema === undefined || propertyCount === 0) {
@@ -63,16 +68,18 @@ export const FunctionInputEditor = ({
 
   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
+      <Form.Label label={t('function-parameters.label')} asChild />
+      <Form.Root
+        key={selectedFunction.id}
         schema={effectSchema}
-        values={values}
+        defaultValues={defaultValues}
+        db={db}
         onValuesChanged={handleValuesChanged}
-        onQueryRefOptions={onQueryRefOptions}
-        outerSpacing={false}
-      />
+      >
+        <Form.FieldSet />
+      </Form.Root>
     </>
   );
 };
+
+FunctionInputEditor.displayName = 'AutomationTrigger.FunctionInputEditor';

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -4,32 +4,33 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { type FunctionTriggerType, TriggerKind, type TriggerType } from '@dxos/functions';
+import { Trigger } from '@dxos/compute';
+import { Filter, Query } from '@dxos/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { SelectInput, type InputProps, useInputProps } from '@dxos/react-ui-form';
+import { type FormFieldComponentProps, SelectField, useFormFieldState } from '@dxos/react-ui-form';
 
-import { AUTOMATION_PLUGIN } from '../../meta';
+import { meta } from '#meta';
 
-export type SpecSelectorProps = InputProps;
+export type SpecSelectorProps = FormFieldComponentProps;
 
 export const SpecSelector = (props: SpecSelectorProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  const specProps = useInputProps(['spec' satisfies keyof FunctionTriggerType]);
+  const { t } = useTranslation(meta.id);
+  const specProps = useFormFieldState(SpecSelector.displayName, ['spec' satisfies keyof Trigger.Trigger]);
 
   const handleTypeChange = useCallback(
-    (_type: any, value: string): TriggerType | undefined => {
+    (_type: any, value: string): Trigger.Spec | 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 };
+          case 'timer':
+            return Trigger.specTimer('');
+          case 'subscription':
+            return Trigger.specSubscription(Query.select(Filter.nothing()));
+          case 'queue':
+            return Trigger.specQueue('dxn:queue:default');
+          case 'email':
+            return Trigger.specEmail();
+          case 'webhook':
+            return Trigger.specWebhook();
           default:
             return undefined;
         }
@@ -41,19 +42,30 @@ export const SpecSelector = (props: SpecSelectorProps) => {
       }
 
       // Update the entire spec object, not just the `spec.kind`.
-      specProps.onValueChange('object', defaultSpec);
+      specProps.onValueChange(props.type, defaultSpec);
     },
-    [specProps],
+    [props.type, specProps],
   );
 
+  const kindLabels: Record<string, string> = {
+    timer: t('trigger-type.timer.label'),
+    webhook: t('trigger-type.webhook.label'),
+    websocket: t('trigger-type.websocket.label'),
+    subscription: t('trigger-type.subscription.label'),
+    email: t('trigger-type.email.label'),
+    queue: t('trigger-type.queue.label'),
+  };
+
   const options = useMemo(
     () =>
-      Object.values(TriggerKind).map((kind) => ({
+      Trigger.Kinds.map((kind) => ({
         value: kind,
-        label: t(`trigger type ${kind}`),
+        label: kindLabels[kind],
       })),
     [t],
   );
 
-  return <SelectInput {...props} options={options} onValueChange={handleTypeChange} />;
+  return <SelectField {...props} options={options} onValueChange={handleTypeChange} />;
 };
+
+SpecSelector.displayName = 'Form.SpecSelector';

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

@@ -2,32 +2,57 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { FunctionType, FunctionTrigger, TriggerKind } from '@dxos/functions';
-import { faker } from '@dxos/random';
-import { useSpaces } from '@dxos/react-client/echo';
-import { ContactType, withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { TriggerEditor } from './TriggerEditor';
-import { functions } from '../../testing';
-import { translations } from '../../translations';
-
-const DefaultStory = () => {
-  const spaces = useSpaces();
-  const space = spaces[1];
-  const [trigger, setTrigger] = useState<FunctionTrigger>();
-  useEffect(() => {
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Operation, Trigger } from '@dxos/compute';
+import { Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { random } from '@dxos/random';
+import { useQuery } from '@dxos/react-client/echo';
+import { TestSchema, useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Employer, Organization, Person, Pipeline } from '@dxos/types';
+
+import { functions } from '#testing';
+import { translations } from '#translations';
+
+import { TriggerEditor, type TriggerEditorProps } from './TriggerEditor';
+
+const types = [
+  // TODO(burdon): Get label from annotation.
+  { value: Organization.Organization.typename, label: 'Organization' },
+  { value: Person.Person.typename, label: 'Person' },
+  { value: Type.getTypename(Pipeline.Pipeline), label: 'Project' },
+  { value: Employer.Employer.typename, label: 'Employer' },
+];
+
+const DefaultStory = (props: Partial<TriggerEditorProps>) => {
+  const { space } = useClientStory();
+  const [trigger, setTrigger] = useState<Trigger.Trigger>();
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+
+  useAsyncEffect(async () => {
     if (!space) {
       return;
     }
 
-    const trigger = space.db.add(Obj.make(FunctionTrigger, { spec: { kind: TriggerKind.Timer, cron: '' } }));
+    const functions = await space.db.query(Filter.type(Operation.PersistentOperation)).run();
+    const fn = functions.find((fn) => fn.name === 'com.example.function.forex');
+    invariant(fn);
+    const trigger = space.db.add(
+      Trigger.make({
+        function: Ref.make(fn),
+        spec: Trigger.specWebhook(),
+        input: {
+          from: 'USD',
+          to: 'JPY',
+        },
+      }),
+    );
     setTrigger(trigger);
   }, [space]);
 
@@ -36,43 +61,112 @@ const DefaultStory = () => {
   }
 
   return (
-    <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>
+    <TriggerEditor
+      db={space.db}
+      trigger={trigger}
+      types={types}
+      tags={tags}
+      onSave={(values) => console.log('on save', values)}
+      {...props}
+    />
   );
 };
 
-const meta: Meta = {
-  title: 'plugins/plugin-automation/TriggerEditor',
-  component: TriggerEditor,
+const meta = {
+  title: 'plugins/plugin-automation/components/TriggerEditor',
+  component: TriggerEditor as any,
   render: DefaultStory,
   decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [FunctionType, FunctionTrigger, ContactType],
-      onSpaceCreated: ({ space }) => {
-        for (const fn of functions) {
-          space.db.add(Obj.make(FunctionType, fn));
-        }
+      types: [Tag.Tag, Operation.PersistentOperation, Trigger.Trigger, TestSchema.ContactType],
+      onCreateSpace: ({ space }) => {
+        // Tags.
+        ['Important', 'Investor', 'New'].forEach((label) => {
+          space.db.add(Tag.make({ label }));
+        });
+
+        // Functions.
+        functions.forEach((fn) => {
+          const { key, version, ...data } = fn;
+          space.db.add(
+            Obj.make(Operation.PersistentOperation, {
+              [Obj.Meta]: { key, version: version ?? '0.1.0' },
+              ...data,
+            }),
+          );
+        });
+
+        // Objects.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(ContactType, {
-              name: faker.person.fullName(),
+            Obj.make(TestSchema.ContactType, {
+              name: random.person.fullName(),
               identifiers: [],
             }),
           );
         });
       },
     }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),
-    withTheme,
   ],
   parameters: {
-    translations,
+    layout: 'fullscreen',
+    translations: [...formTranslations, ...translations],
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ReadonlySpec: Story = {
+  args: {
+    readonlySpec: true,
+  },
+};
+
+export const Spec: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const webhookText = await canvas.findByText('Webhook', {}, { timeout: 10_000 });
+    const combobox = webhookText.closest('[role="combobox"]') as HTMLElement;
+    await expect(combobox).not.toBeDisabled();
+
+    // Helper to switch to a kind via keyboard.
+    // TODO(wittjosiah): Radix Select in popper mode doesn't close on click.
+    //   Use keyboard navigation: open, type first letter to jump, Enter to select.
+    const selectKind = async (combobox: HTMLElement, firstLetter: string) => {
+      combobox.focus();
+      await userEvent.keyboard('{Enter}');
+      await userEvent.keyboard(firstLetter);
+      await userEvent.keyboard('{Enter}');
+    };
+
+    // Timer — should show "Cron" field.
+    await selectKind(combobox, 't');
+    await expect(canvas.findByLabelText('Cron')).resolves.toBeInTheDocument();
+
+    // Email — no extra fields; Cron should be gone.
+    await selectKind(combobox, 'e');
+    await expect(combobox).not.toBeDisabled();
+    await expect(canvas.queryByLabelText('Cron')).not.toBeInTheDocument();
+
+    // Webhook — should show "Method" field.
+    await selectKind(combobox, 'w');
+    await expect(canvas.findByLabelText('Method')).resolves.toBeInTheDocument();
+
+    // Subscription — should show query editor.
+    await selectKind(combobox, 's');
+    await expect(combobox).not.toBeDisabled();
+    await expect(canvas.queryByLabelText('Method')).not.toBeInTheDocument();
+
+    // Feed — should show DXN field (the queue address). DXN is a combobox, not an input, so use getByText.
+    await selectKind(combobox, 'f');
+    await expect(canvas.findByText('DXN')).resolves.toBeInTheDocument();
+  },
+};