@dxos/plugin-automation 0.8.1 → 0.8.2-main.2f9c567

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import React, { useState } from 'react';
 
-import { S } from '@dxos/echo-schema';
 import {
   FunctionType,
   FunctionTrigger,
@@ -12,13 +12,12 @@ import {
   TriggerKind,
   type FunctionTriggerType,
   ScriptType,
-} from '@dxos/functions/types';
+} from '@dxos/functions';
 import { type Client, useClient } from '@dxos/react-client';
-import { create, Filter, useQuery, type Space, type ReactiveObject, getSpace } from '@dxos/react-client/echo';
+import { live, Filter, useQuery, type Space, type Live, getSpace } from '@dxos/react-client/echo';
 import { Clipboard, IconButton, Input, Separator, useTranslation } from '@dxos/react-ui';
 import { ControlItem, controlItemClasses } from '@dxos/react-ui-form';
 import { List } from '@dxos/react-ui-list';
-import { StackItem } from '@dxos/react-ui-stack';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
 
 import { AUTOMATION_PLUGIN } from '../../meta';
@@ -28,18 +27,20 @@ const grid = 'grid grid-cols-[40px_1fr_32px] min-bs-[2.5rem]';
 
 export type AutomationPanelProps = {
   space: Space;
-  object?: ReactiveObject<any>;
+  object?: Live<any>;
+  initialTrigger?: FunctionTriggerType;
+  onDone?: () => void;
 };
 
 // TODO(burdon): Factor out common layout with ViewEditor.
-export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
+export const AutomationPanel = ({ space, object, initialTrigger, onDone }: AutomationPanelProps) => {
   const { t } = useTranslation(AUTOMATION_PLUGIN);
   const client = useClient();
   const triggers = useQuery(space, Filter.schema(FunctionTrigger));
   const functions = useQuery(space, Filter.schema(FunctionType));
   const scripts = useQuery(space, Filter.schema(ScriptType));
 
-  const [trigger, setTrigger] = useState<FunctionTriggerType>();
+  const [trigger, setTrigger] = useState<FunctionTriggerType | undefined>(initialTrigger);
   const [selected, setSelected] = useState<FunctionTrigger>();
 
   const handleSelect = (trigger: FunctionTrigger) => {
@@ -49,7 +50,7 @@ export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
   };
 
   const handleAdd = () => {
-    setTrigger(create(FunctionTriggerSchema, {}));
+    setTrigger(live(FunctionTriggerSchema, {}));
     setSelected(undefined);
   };
 
@@ -63,76 +64,74 @@ export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
     if (selected) {
       Object.assign(selected, trigger);
     } else {
-      space.db.add(create(FunctionTrigger, trigger));
+      space.db.add(live(FunctionTrigger, trigger));
     }
 
     setTrigger(undefined);
     setSelected(undefined);
+    onDone?.();
   };
 
   const handleCancel: TriggerEditorProps['onCancel'] = () => {
     setTrigger(undefined);
+    onDone?.();
   };
 
   return (
-    <Clipboard.Provider>
-      <StackItem.Content classNames='block overflow-y-auto'>
-        <div className='flex flex-col w-full'>
-          {trigger ? (
-            <ControlItem title={t('trigger editor title')}>
-              <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />
-            </ControlItem>
-          ) : (
-            <div role='none' className={controlItemClasses}>
-              <List.Root<FunctionTrigger> items={triggers} isItem={S.is(FunctionTrigger)} getId={(field) => field.id}>
-                {({ items: triggers }) => (
-                  <div role='list' className='flex flex-col w-full'>
-                    {triggers?.map((trigger) => {
-                      const copyAction = getCopyAction(client, trigger);
-                      return (
-                        <List.Item<FunctionTrigger>
-                          key={trigger.id}
-                          item={trigger}
-                          classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+    <div className='flex flex-col w-full'>
+      {trigger ? (
+        <ControlItem title={t('trigger editor title')}>
+          <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />
+        </ControlItem>
+      ) : (
+        <div role='none' className={controlItemClasses}>
+          <List.Root<FunctionTrigger> items={triggers} isItem={Schema.is(FunctionTrigger)} getId={(field) => field.id}>
+            {({ items: triggers }) => (
+              <div role='list' className='flex flex-col w-full'>
+                {triggers?.map((trigger) => {
+                  const copyAction = getCopyAction(client, trigger);
+                  return (
+                    <List.Item<FunctionTrigger>
+                      key={trigger.id}
+                      item={trigger}
+                      classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+                    >
+                      <Input.Root>
+                        <Input.Switch
+                          checked={trigger.enabled}
+                          onCheckedChange={(checked) => (trigger.enabled = checked)}
+                        />
+                      </Input.Root>
+
+                      <div className={'flex'}>
+                        <List.ItemTitle
+                          classNames='px-1 cursor-pointer w-0 shrink truncate'
+                          onClick={() => handleSelect(trigger)}
                         >
-                          <Input.Root>
-                            <Input.Switch
-                              checked={trigger.enabled}
-                              onCheckedChange={(checked) => (trigger.enabled = checked)}
-                            />
-                          </Input.Root>
-
-                          <div className={'flex'}>
-                            <List.ItemTitle
-                              classNames='px-1 cursor-pointer w-0 shrink truncate'
-                              onClick={() => handleSelect(trigger)}
-                            >
-                              {getFunctionName(scripts, functions, trigger) ?? '∅'}
-                            </List.ItemTitle>
-
-                            {/* TODO: a better way to expose copy action */}
-                            {copyAction && (
-                              <Clipboard.IconButton
-                                label={t(copyAction.translationKey)}
-                                value={copyAction.contentProvider()}
-                              />
-                            )}
-                          </div>
-
-                          <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
-                        </List.Item>
-                      );
-                    })}
-                  </div>
-                )}
-              </List.Root>
-              {triggers.length > 0 && <Separator classNames='mlb-4' />}
-              <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
-            </div>
-          )}
+                          {getFunctionName(scripts, functions, trigger) ?? '∅'}
+                        </List.ItemTitle>
+
+                        {/* TODO: a better way to expose copy action */}
+                        {copyAction && (
+                          <Clipboard.IconButton
+                            label={t(copyAction.translationKey)}
+                            value={copyAction.contentProvider()}
+                          />
+                        )}
+                      </div>
+
+                      <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
+                    </List.Item>
+                  );
+                })}
+              </div>
+            )}
+          </List.Root>
+          {triggers.length > 0 && <Separator classNames='mlb-4' />}
+          <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
         </div>
-      </StackItem.Content>
-    </Clipboard.Provider>
+      )}
+    </div>
   );
 };
 
@@ -159,10 +158,11 @@ const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
 const getFunctionName = (scripts: ScriptType[], functions: FunctionType[], trigger: FunctionTriggerType) => {
   // TODO(wittjosiah): Truncation should be done in the UI.
   //   Warning that the List component is currently a can of worms.
-  const shortId = trigger.function && `${trigger.function?.slice(0, 16)}…`;
-  const functionObject = functions.find((fn) => `dxn:worker:${fn.name}` === trigger.function);
+  const shortId = trigger.function && `${trigger.function.dxn.toString().slice(0, 16)}…`;
+  const functionObject = functions.find((fn) => fn === trigger.function?.target);
   if (!functionObject) {
     return shortId;
   }
+
   return scripts.find((s) => functionObject.source?.target?.id === s.id)?.name ?? shortId;
 };

package/src/components/AutomationPanel/index.ts

@@ -4,4 +4,6 @@
 
 import { AutomationPanel } from './AutomationPanel';
 
+export * from './AutomationPanel';
+
 export default AutomationPanel;

package/src/components/FunctionsContainer.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Space } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { FunctionsPanel } from './FunctionsPanel';
+import { AUTOMATION_PLUGIN } from '../meta';
+
+export const FunctionsContainer = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  return (
+    <StackItem.Content classNames='block overflow-y-auto'>
+      <ControlPage>
+        <ControlSection
+          title={t('functions verbose label', { ns: AUTOMATION_PLUGIN })}
+          description={t('functions description', { ns: AUTOMATION_PLUGIN })}
+        >
+          <FunctionsPanel space={space} />
+        </ControlSection>
+      </ControlPage>
+    </StackItem.Content>
+  );
+};
+
+export default FunctionsContainer;

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Schema } from 'effect';
+import React, { useCallback, useMemo } from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { FunctionType, ScriptType } from '@dxos/functions';
+import { Filter, fullyQualifiedId, useQuery, type Space } from '@dxos/react-client/echo';
+import { Button, useTranslation } from '@dxos/react-ui';
+import { controlItemClasses } from '@dxos/react-ui-form';
+import { List } from '@dxos/react-ui-list';
+import { ghostHover, mx } from '@dxos/react-ui-theme';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+
+const grid = 'grid grid-cols-[1fr_auto] min-bs-[2.5rem]';
+
+export type FunctionsPanelProps = {
+  space: Space;
+};
+
+export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const functions = useQuery(space, Filter.schema(FunctionType));
+  const scripts = useQuery(space, Filter.schema(ScriptType));
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  const functionToScriptMap = useMemo(
+    () =>
+      functions.reduce(
+        (map, func) => {
+          const scriptId = func.source?.target?.id;
+          if (scriptId) {
+            const script = scripts.find((s) => s.id === scriptId);
+            if (script) {
+              map[func.id] = script;
+            }
+          }
+          return map;
+        },
+        {} as Record<string, ScriptType>,
+      ),
+    [functions, scripts],
+  );
+
+  const getScriptName = useCallback(
+    (func: FunctionType) => {
+      const script = functionToScriptMap[func.id];
+      return script?.name;
+    },
+    [functionToScriptMap],
+  );
+
+  const handleGoToScript = useCallback(
+    (func: FunctionType) => {
+      const script = functionToScriptMap[func.id];
+      if (script) {
+        void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(script)] }));
+      }
+    },
+    [functionToScriptMap, dispatch],
+  );
+
+  return (
+    <div role='none' className={mx(controlItemClasses)}>
+      <List.Root<FunctionType> items={functions} isItem={Schema.is(FunctionType)} getId={(func) => func.id}>
+        {({ items }) => (
+          <div role='list' className='flex flex-col w-full'>
+            {items?.map((func) => (
+              <List.Item<FunctionType>
+                key={func.id}
+                item={func}
+                classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[3rem]')}
+              >
+                <div className='flex flex-col truncate'>
+                  <List.ItemTitle classNames='truncate'>{func.name}</List.ItemTitle>
+                  {getScriptName(func) && (
+                    <div className='text-xs text-description truncate'>{getScriptName(func)}</div>
+                  )}
+                </div>
+                {functionToScriptMap[func.id] && (
+                  <Button onClick={() => handleGoToScript(func)}>{t('go to function source button label')}</Button>
+                )}
+              </List.Item>
+            ))}
+          </div>
+        )}
+      </List.Root>
+
+      {functions.length === 0 && <div className='text-center plb-4 text-gray-500'>{t('no functions found')}</div>}
+    </div>
+  );
+};

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/FunctionPayloadEditor.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 FunctionMetaEditorProps = {
+  functions: FunctionType[];
+  onQueryRefOptions: QueryRefOptions;
+} & FormInputStateProps;
+
+/**
+ * Editor component for function meta parameters.
+ */
+export const FunctionPayloadEditor = ({
+  functions,
+  getValue,
+  onValueChange,
+  onQueryRefOptions,
+}: FunctionMetaEditorProps) => {
+  const selectedFunctionValue = useFormValues(['function' as JsonPath]);
+  const selectedFunctionName = useMemo(() => {
+    if (selectedFunctionValue instanceof RefImpl) {
+      return selectedFunctionValue.dxn.toString().split('dxn:worker:').at(1);
+    }
+  }, [selectedFunctionValue]);
+
+  const selectedFunction = useMemo(
+    () => functions.find((f) => f.name === selectedFunctionName),
+    [functions, selectedFunctionName],
+  );
+
+  useOnTransition(
+    // Clear function parameter meta 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 { type: TriggerKind.Timer, cron: '' };
+          case TriggerKind.Subscription:
+            return { type: TriggerKind.Subscription, filter: {} };
+          case TriggerKind.Queue:
+            return { type: TriggerKind.Queue, queue: '' };
+          case TriggerKind.Email:
+            return { type: TriggerKind.Email };
+          case TriggerKind.Webhook:
+            return { type: TriggerKind.Webhook };
+          default:
+            return undefined;
+        }
+      };
+
+      const defaultSpec = getDefaultTriggerSpec(value);
+      if (!defaultSpec) {
+        return;
+      }
+
+      // Update the entire spec object, not just the `spec.type`.
+      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: { type: 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,11 +50,19 @@ 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' }),