@dxos/plugin-automation 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -1,171 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Schema } from 'effect';
-import React, { useState } from 'react';
-
-import { Filter, Obj } from '@dxos/echo';
-import {
-  FunctionTrigger,
-  FunctionTriggerSchema,
-  type FunctionTriggerType,
-  FunctionType,
-  ScriptType,
-  TriggerKind,
-} from '@dxos/functions';
-import { type Client, useClient } from '@dxos/react-client';
-import { type Space, getSpace, useQuery } 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 { ghostHover, mx } from '@dxos/react-ui-theme';
-
-import { AUTOMATION_PLUGIN } from '../../meta';
-import { TriggerEditor, type TriggerEditorProps } from '../TriggerEditor';
-
-const grid = 'grid grid-cols-[40px_1fr_32px] min-bs-[2.5rem]';
-
-export type AutomationPanelProps = {
-  space: Space;
-  object?: Obj.Any;
-  initialTrigger?: FunctionTriggerType;
-  onDone?: () => void;
-};
-
-// TODO(burdon): Factor out common layout with ViewEditor.
-export const AutomationPanel = ({ space, object, initialTrigger, onDone }: AutomationPanelProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  const client = useClient();
-  const triggers = useQuery(space, Filter.type(FunctionTrigger));
-  const functions = useQuery(space, Filter.type(FunctionType));
-  const scripts = useQuery(space, Filter.type(ScriptType));
-
-  const [trigger, setTrigger] = useState<FunctionTriggerType | undefined>(initialTrigger);
-  const [selected, setSelected] = useState<FunctionTrigger>();
-
-  const handleSelect = (trigger: FunctionTrigger) => {
-    const { id: _, ...values } = trigger;
-    setTrigger(values);
-    setSelected(trigger);
-  };
-
-  const handleAdd = () => {
-    setTrigger(Obj.make(FunctionTriggerSchema, {}));
-    setSelected(undefined);
-  };
-
-  const handleDelete = (trigger: FunctionTrigger) => {
-    space.db.remove(trigger);
-    setTrigger(undefined);
-    setSelected(undefined);
-  };
-
-  const handleSave: TriggerEditorProps['onSave'] = (trigger) => {
-    if (selected) {
-      Object.assign(selected, trigger);
-    } else {
-      space.db.add(Obj.make(FunctionTrigger, trigger));
-    }
-
-    setTrigger(undefined);
-    setSelected(undefined);
-    onDone?.();
-  };
-
-  const handleCancel: TriggerEditorProps['onCancel'] = () => {
-    setTrigger(undefined);
-    onDone?.();
-  };
-
-  if (trigger) {
-    return (
-      <ControlItem title={t('trigger editor title')}>
-        <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />
-      </ControlItem>
-    );
-  }
-
-  return (
-    <div className={controlItemClasses}>
-      {triggers.length > 0 && (
-        <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)}
-                      >
-                        {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>
-  );
-};
-
-const getCopyAction = (client: Client, trigger: FunctionTrigger | undefined) => {
-  if (trigger?.spec?.kind === TriggerKind.Email) {
-    return { translationKey: 'trigger copy email', contentProvider: () => `${getSpace(trigger)!.id}@dxos.network` };
-  }
-
-  if (trigger?.spec?.kind === TriggerKind.Webhook) {
-    return { translationKey: 'trigger copy url', contentProvider: () => getWebhookUrl(client, trigger) };
-  }
-
-  return undefined;
-};
-
-const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
-  const spaceId = getSpace(trigger)!.id;
-  const edgeUrl = new URL(client.config.values.runtime!.services!.edge!.url!);
-  const isSecure = edgeUrl.protocol.startsWith('https') || edgeUrl.protocol.startsWith('wss');
-  edgeUrl.protocol = isSecure ? 'https' : 'http';
-  return new URL(`/webhook/${spaceId}:${trigger.id}`, edgeUrl).toString();
-};
-
-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.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

@@ -1,9 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { AutomationPanel } from './AutomationPanel';
-
-export * from './AutomationPanel';
-
-export default AutomationPanel;

package/src/components/FunctionsContainer.tsx

@@ -1,32 +0,0 @@
-//
-// 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 { AUTOMATION_PLUGIN } from '../meta';
-
-import { FunctionsPanel } from './FunctionsPanel';
-
-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

@@ -1,97 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Schema } from 'effect';
-import React, { useCallback, useMemo } from 'react';
-
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { FunctionType, ScriptType } from '@dxos/functions';
-import { Filter, type Space, fullyQualifiedId, useQuery } 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.type(FunctionType));
-  const scripts = useQuery(space, Filter.type(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)}>
-      {functions.length > 0 && (
-        <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

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

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-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';
-
-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 (Ref.isRef(selectedFunctionValue)) {
-      return selectedFunctionValue.dxn.toString().split('dxn:echo:@:').at(1);
-    }
-  }, [selectedFunctionValue]);
-
-  const selectedFunction = useMemo(
-    () => functions.find((fn) => fn.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 ? Type.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}
-        onValuesChanged={handleValuesChanged}
-        onQueryRefOptions={onQueryRefOptions}
-        outerSpacing={false}
-      />
-    </>
-  );
-};

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -1,59 +0,0 @@
-//
-// 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 { type InputProps, SelectInput, 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,79 +0,0 @@
-//
-// 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 { FunctionTrigger, FunctionType, 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 { functions } from '../../testing';
-import { translations } from '../../translations';
-
-import { TriggerEditor } from './TriggerEditor';
-
-const DefaultStory = () => {
-  const spaces = useSpaces();
-  const space = spaces[1];
-  const [trigger, setTrigger] = useState<FunctionTrigger>();
-  useEffect(() => {
-    if (!space) {
-      return;
-    }
-
-    const trigger = space.db.add(Obj.make(FunctionTrigger, { spec: { kind: TriggerKind.Timer, cron: '' } }));
-    setTrigger(trigger);
-  }, [space]);
-
-  if (!space || !trigger) {
-    return <div />;
-  }
-
-  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>
-  );
-};
-
-const meta: Meta = {
-  title: 'plugins/plugin-automation/TriggerEditor',
-  component: TriggerEditor,
-  render: DefaultStory,
-  decorators: [
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [FunctionType, FunctionTrigger, ContactType],
-      onSpaceCreated: ({ space }) => {
-        for (const fn of functions) {
-          space.db.add(Obj.make(FunctionType, fn));
-        }
-        Array.from({ length: 10 }).map(() => {
-          return space.db.add(
-            Obj.make(ContactType, {
-              name: faker.person.fullName(),
-              identifiers: [],
-            }),
-          );
-        });
-      },
-    }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),
-    withTheme,
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-export const Default = {};

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -1,107 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { ComputeGraph } from '@dxos/conductor';
-import { Type } from '@dxos/echo';
-import {
-  type FunctionTrigger,
-  FunctionTriggerSchema,
-  type FunctionTriggerType,
-  FunctionType,
-  ScriptType,
-} from '@dxos/functions';
-import { Filter, Ref, type Space, useQuery } from '@dxos/react-client/echo';
-import { type CustomInputMap, Form, SelectInput, useRefQueryLookupHandler } from '@dxos/react-ui-form';
-
-import { FunctionInputEditor, type FunctionInputEditorProps } from './FunctionInputEditor';
-import { SpecSelector } from './SpecSelector';
-
-export type TriggerEditorProps = {
-  space: Space;
-  trigger: FunctionTriggerType;
-  onSave?: (trigger: Omit<FunctionTrigger, 'id'>) => void;
-  onCancel?: () => void;
-};
-
-export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEditorProps) => {
-  const handleSave = (values: FunctionTriggerType) => {
-    onSave?.(values);
-  };
-
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-  const Custom = useCustomInputs(space, handleRefQueryLookup);
-
-  return (
-    <Form
-      outerSpacing={false}
-      Custom={Custom}
-      schema={FunctionTriggerSchema}
-      values={trigger}
-      onSave={handleSave}
-      onCancel={onCancel}
-      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:echo:@:${fn.id}` }));
-};

package/src/components/TriggerEditor/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './TriggerEditor';