@dxos/plugin-automation 0.8.4-main.fffef41 → 0.9.0

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -1,223 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Array from 'effect/Array';
-import * as EFn from 'effect/Function';
-import * as Match from 'effect/Match';
-import * as Schema from 'effect/Schema';
-import React, { useMemo, useState } from 'react';
-
-import { Filter, Obj, Tag } from '@dxos/echo';
-import { Function, Script, Trigger } from '@dxos/functions';
-import { useTypeOptions } from '@dxos/plugin-space';
-import { type Client, useClient } from '@dxos/react-client';
-import { type Space, getSpace, useQuery } from '@dxos/react-client/echo';
-import { Clipboard, IconButton, Input, Separator, type ThemedClassName, 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 { View } from '@dxos/schema';
-import { Project } from '@dxos/types';
-
-import { meta } from '../../meta';
-import { TriggerEditor, type TriggerEditorProps } from '../TriggerEditor';
-
-const grid = 'grid grid-cols-[40px_1fr_32px] min-bs-[2.5rem]';
-
-export type AutomationPanelProps = ThemedClassName<{
-  space: Space;
-  object?: Obj.Any;
-  initialTrigger?: Trigger.Trigger;
-  onDone?: () => void;
-}>;
-
-// TODO(burdon): Factor out common layout with ViewEditor.
-export const AutomationPanel = ({ classNames, space, object, initialTrigger, onDone }: AutomationPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const client = useClient();
-  const functions = useQuery(space, Filter.type(Function.Function));
-  const triggers = useQuery(space, Filter.type(Trigger.Trigger));
-  const filteredTriggers = useMemo(() => {
-    return object ? triggers.filter(triggerMatch(object)) : triggers;
-  }, [object, triggers]);
-  const tags = useQuery(space, Filter.type(Tag.Tag));
-  const types = useTypeOptions({ space, annotation: ['dynamic', 'limited-static', 'object-form'] });
-
-  const [trigger, setTrigger] = useState<Trigger.Trigger | undefined>(initialTrigger);
-  const [selected, setSelected] = useState<Trigger.Trigger>();
-
-  const handleSelect = (trigger: Trigger.Trigger) => {
-    setTrigger(trigger);
-    setSelected(trigger);
-  };
-
-  const handleAdd = () => {
-    setTrigger(Trigger.make({}));
-    setSelected(undefined);
-  };
-
-  const handleDelete = (trigger: Trigger.Trigger) => {
-    space.db.remove(trigger);
-    setTrigger(undefined);
-    setSelected(undefined);
-  };
-
-  const handleSave: TriggerEditorProps['onSave'] = (trigger) => {
-    if (selected) {
-      Object.assign(selected, trigger);
-    } else {
-      space.db.add(Trigger.make(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}
-          readonlySpec={Boolean(object)}
-          tags={tags}
-          types={types}
-          onSave={handleSave}
-          onCancel={handleCancel}
-        />
-      </ControlItem>
-    );
-  }
-
-  return (
-    <div className={mx(controlItemClasses, classNames)}>
-      {filteredTriggers.length > 0 && (
-        <List.Root<Trigger.Trigger>
-          items={filteredTriggers}
-          isItem={Schema.is(Trigger.Trigger)}
-          getId={(field) => field.id}
-        >
-          {({ items: filteredTriggers }) => (
-            <div role='list' className='flex flex-col is-full'>
-              {filteredTriggers?.map((trigger) => {
-                const copyAction = getCopyAction(client, trigger);
-                return (
-                  <List.Item<Trigger.Trigger>
-                    key={trigger.id}
-                    item={trigger}
-                    classNames={mx(grid, ghostHover, 'items-center', 'pli-2')}
-                  >
-                    <Input.Root>
-                      <Input.Switch
-                        checked={trigger.enabled}
-                        onCheckedChange={(checked) => (trigger.enabled = checked)}
-                      />
-                    </Input.Root>
-
-                    <div className={'flex'}>
-                      <List.ItemTitle
-                        classNames='pli-1 cursor-pointer is-0 shrink truncate'
-                        onClick={() => handleSelect(trigger)}
-                      >
-                        {getFunctionName(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>
-      )}
-      {filteredTriggers.length > 0 && <Separator classNames='mlb-4' />}
-      <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
-    </div>
-  );
-};
-
-const getCopyAction = (client: Client, trigger: Trigger.Trigger | undefined) => {
-  if (trigger?.spec?.kind === 'email') {
-    return { translationKey: 'trigger copy email', contentProvider: () => `${getSpace(trigger)!.id}@dxos.network` };
-  }
-
-  if (trigger?.spec?.kind === 'webhook') {
-    return { translationKey: 'trigger copy url', contentProvider: () => getWebhookUrl(client, trigger) };
-  }
-
-  return undefined;
-};
-
-const getWebhookUrl = (client: Client, trigger: Trigger.Trigger) => {
-  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 = (functions: Function.Function[], trigger: Trigger.Trigger) => {
-  // 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);
-  return functionObject?.name ?? shortId;
-};
-
-const scriptMatch = (script: Script.Script) => (trigger: Trigger.Trigger) => {
-  const fn = trigger.function?.target;
-  if (!Obj.instanceOf(Function.Function, fn)) {
-    return false;
-  }
-
-  return fn.source?.target === script;
-};
-
-const projectMatch = (project: Project.Project) => {
-  const viewQueries = EFn.pipe(
-    project.collections,
-    Array.map((collection) => collection.target),
-    Array.filter(Schema.is(View.View)),
-    Array.map((view) => Obj.getSnapshot(view).query.ast),
-    Array.map((ast) => JSON.stringify(ast)),
-  );
-
-  return (trigger: Trigger.Trigger) => {
-    const spec = Obj.getSnapshot(trigger).spec;
-    if (spec?.kind !== 'subscription') {
-      return false;
-    }
-
-    // TODO(wittjosiah): Implement better way of comparing query ASTs.
-    return viewQueries.some((query) => JSON.stringify(spec.query) === query);
-  };
-};
-
-const triggerMatch = Match.type<Obj.Any>().pipe(
-  Match.withReturnType<(trigger: Trigger.Trigger) => boolean>(),
-  Match.when(
-    (obj) => Obj.instanceOf(Script.Script, obj),
-    (obj) => scriptMatch(obj),
-  ),
-  Match.when(
-    (obj) => Obj.instanceOf(Project.Project, obj),
-    (obj) => projectMatch(obj),
-  ),
-  Match.orElse((_obj) => () => true),
-);

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/AutomationSettings.tsx

@@ -1,30 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { useTranslation } from '@dxos/react-ui';
-import { ControlPage, ControlSection } from '@dxos/react-ui-form';
-
-import { meta } from '../meta';
-
-import { AutomationPanel, type AutomationPanelProps } from './AutomationPanel';
-import { TriggersSettings } from './TriggerSettings';
-
-export const AutomationSettings = (props: AutomationPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  return (
-    <ControlPage>
-      <ControlSection
-        title={t('automation verbose label', { ns: meta.id })}
-        description={t('automation description', { ns: meta.id })}
-      >
-        <AutomationPanel {...props} />
-        <TriggersSettings space={props.space} />
-      </ControlSection>
-    </ControlPage>
-  );
-};
-
-export default AutomationSettings;

package/src/components/FunctionsContainer.tsx

@@ -1,36 +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 { meta } from '../meta';
-
-import { FunctionsPanel } from './FunctionsPanel';
-import { FunctionsRegistry } from './FunctionsRegistry';
-
-export const FunctionsContainer = ({ space }: { space: Space }) => {
-  const { t } = useTranslation(meta.id);
-  return (
-    <ControlPage>
-      <ControlSection
-        title={t('functions verbose label', { ns: meta.id })}
-        description={t('functions description', { ns: meta.id })}
-      >
-        <FunctionsPanel space={space} />
-      </ControlSection>
-      <ControlSection
-        title={t('functions registry verbose label', { ns: meta.id })}
-        description={t('functions registry description', { ns: meta.id })}
-      >
-        <FunctionsRegistry space={space} />
-      </ControlSection>
-    </ControlPage>
-  );
-};
-
-export default FunctionsContainer;

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -1,116 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-import React, { useCallback, useMemo } from 'react';
-
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { Obj } from '@dxos/echo';
-import { Function, Script } from '@dxos/functions';
-import { SpaceAction } from '@dxos/plugin-space/types';
-import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
-import { Button, IconButton, 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 { meta } 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(meta.id);
-  const functions = useQuery(space, Filter.type(Function.Function));
-  const scripts = useQuery(space, Filter.type(Script.Script));
-  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, Script.Script>,
-      ),
-    [functions, scripts],
-  );
-
-  const getScriptName = useCallback(
-    (func: Function.Function) => {
-      const script = functionToScriptMap[func.id];
-      return script?.name;
-    },
-    [functionToScriptMap],
-  );
-
-  const handleGoToScript = useCallback(
-    (func: Function.Function) => {
-      const script = functionToScriptMap[func.id];
-      if (script) {
-        void dispatch(
-          createIntent(LayoutAction.Open, {
-            part: 'main',
-            subject: [Obj.getDXN(script).toString()],
-          }),
-        );
-      }
-    },
-    [functionToScriptMap, dispatch],
-  );
-
-  const handleDelete = useCallback(
-    (func: Function.Function) => dispatch(createIntent(SpaceAction.RemoveObjects, { objects: [func] })),
-    [dispatch],
-  );
-
-  return (
-    <div role='none' className={mx(controlItemClasses)}>
-      {functions.length > 0 && (
-        <List.Root<Function.Function> items={functions} isItem={Schema.is(Function.Function)} getId={(func) => func.id}>
-          {({ items }) => (
-            <div role='list' className='flex flex-col is-full'>
-              {items?.map((func) => (
-                <List.Item<Function.Function>
-                  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>
-                  )}
-                  <IconButton
-                    iconOnly
-                    icon='ph--trash--regular'
-                    label={t('delete function button label')}
-                    onClick={() => handleDelete(func)}
-                  />
-                </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/FunctionsRegistry/FunctionsRegistry.tsx

@@ -1,135 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Array from 'effect/Array';
-import * as EffectFunction from 'effect/Function';
-import * as Order from 'effect/Order';
-import * as Schema from 'effect/Schema';
-import { useState } from 'react';
-import React, { useCallback } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { Function } from '@dxos/functions';
-import { getDeployedFunctions } from '@dxos/functions-runtime/edge';
-import { useClient } from '@dxos/react-client';
-import { Filter, Query, type Space, useQuery } from '@dxos/react-client/echo';
-import { useAsyncEffect } from '@dxos/react-ui';
-import { IconButton, 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 { meta } from '../../meta';
-
-const grid = 'grid grid-cols-[1fr_1fr_auto] min-bs-[2.5rem]';
-
-type FunctionsRegistryProps = {
-  space: Space;
-};
-
-export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
-  const client = useClient();
-  const [loading, setLoading] = useState(true);
-  const [functions, setFunctions] = useState<Function.Function[]>([]);
-  const { t } = useTranslation(meta.id);
-
-  const dbFunctions = useQuery(space, Filter.type(Function.Function));
-
-  const state = (func: Function.Function) => {
-    const dbFunction = dbFunctions.find((f) => f.key === func.key);
-    if (!dbFunction) {
-      return 'import';
-    }
-    if (dbFunction.version === func.version && dbFunction.updated === func.updated) {
-      return 'none';
-    }
-    return 'update';
-  };
-
-  useAsyncEffect(async () => {
-    setLoading(true);
-    const functions = await getDeployedFunctions(client);
-    setFunctions(functions);
-    setLoading(false);
-  }, []);
-
-  const dedupedFunctions = EffectFunction.pipe(
-    functions,
-    Array.filter((_) => _.key !== undefined),
-    Array.sort(Order.reverse(Order.mapInput(Order.string, (_: Function.Function) => _.updated ?? ''))),
-    Array.dedupeWith((self, that) => self.key === that.key),
-    Array.sort(Order.mapInput(Order.string, (_: Function.Function) => _.key ?? '')),
-  );
-
-  const hanleImportOrUpdate = useCallback(
-    async (func: Function.Function) => {
-      const {
-        objects: [existingFunc],
-      } = await space.db.query(Query.type(Function.Function, { key: func.key })).run();
-      if (!existingFunc) {
-        space.db.add(func);
-        return;
-      }
-      existingFunc.version = func.version;
-      existingFunc.updated = func.updated;
-      existingFunc.name = func.name;
-      existingFunc.description = func.description;
-      // TODO(dmaretskyi): A workaround for an ECHO bug.
-      existingFunc.inputSchema = JSON.parse(JSON.stringify(func.inputSchema));
-      existingFunc.outputSchema = JSON.parse(JSON.stringify(func.outputSchema));
-      Obj.getMeta(existingFunc).keys = JSON.parse(JSON.stringify(Obj.getMeta(func).keys));
-    },
-    [space],
-  );
-
-  return (
-    <div role='none' className={mx(controlItemClasses)}>
-      {dedupedFunctions.length > 0 && (
-        <List.Root<Function.Function>
-          items={dedupedFunctions}
-          isItem={Schema.is(Function.Function)}
-          getId={(func) => func.id}
-        >
-          {({ items }) => (
-            <div role='list' className='flex flex-col is-full'>
-              {items?.map((func) => (
-                <List.Item<Function.Function>
-                  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>
-                    <div className='text-xs text-description truncate'>{func.key}</div>
-                  </div>
-                  <div className='flex flex-col truncate'>
-                    <div className='text-xs text-description truncate'>{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>
-      )}
-
-      {dedupedFunctions.length === 0 && !loading && (
-        <div className='text-center plb-4 text-gray-500'>{t('no functions found')}</div>
-      )}
-      {loading && <div className='text-center plb-4 text-gray-500'>{t('loading functions')}</div>}
-    </div>
-  );
-};

package/src/components/FunctionsRegistry/index.ts

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

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -1,84 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { Ref, Type } from '@dxos/echo';
-import { type JsonPath } from '@dxos/echo/internal';
-import { type Function } 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: Function.Function[];
-  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) => {
-      if (!Ref.isRef(prevValue) || !Ref.isRef(selectedFunctionValue)) {
-        return false;
-      }
-
-      return prevValue.dxn.toString() !== selectedFunctionValue.dxn.toString();
-    },
-    (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}
-      />
-    </>
-  );
-};