feat: workflows & plugins (#26727)

feat: plugins chore: better types feat: plugins
2026-05-22 07:32:32 -04:00 · 2026-05-18 11:09:33 -04:00
parent 7384799f19
commit 3d075f2bf8
144 changed files with 6099 additions and 7419 deletions
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import SchemaConfiguration from '$lib/components/SchemaConfiguration.svelte';
+  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
+  import PluginMethodPicker from '$lib/modals/PluginMethodPicker.svelte';
+  import { type JSONSchemaProperty, type SchemaConfig } from '$lib/types';
+  import { WorkflowTrigger, type WorkflowStepDto } from '@immich/sdk';
+  import { Button, FormModal, modalManager, Stack, Text, Textarea } from '@immich/ui';
+  import { mdiPencilOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    trigger: WorkflowTrigger;
+    step: WorkflowStepDto;
+    onClose: (step?: WorkflowStepDto) => void;
+  };
+
+  const { trigger, step, onClose }: Props = $props();
+
+  const onSubmit = () => onClose(method ? { method: method.key, config, enabled } : undefined);
+
+  let enabled = $state<boolean>(true);
+  let method = $state(pluginManager.getMethod(step.method));
+  let config = $state<SchemaConfig>(step.config);
+  let debug = $state(false);
+
+  const onPickMethod = async () => {
+    const selected = await modalManager.show(PluginMethodPicker, { trigger, selectedKey: method?.key });
+    if (!selected) {
+      return;
+    }
+
+    method = selected;
+    config = selected.schema ? {} : null;
+  };
+</script>
+
+{#if method}
+  <FormModal title={$t('step_details')} {onClose} {onSubmit} disabled={!method} size="small">
+    <div class="flex items-center justify-between gap-2">
+      <div class="grow text-start">
+        <Text fontWeight="medium">{method.title}</Text>
+        {#if method.description}
+          <Text size="small" color="muted">{method.description}</Text>
+        {/if}
+      </div>
+      <Button size="small" color="secondary" shape="round" onclick={onPickMethod} leadingIcon={mdiPencilOutline}
+        >{$t('change')}</Button
+      >
+    </div>
+
+    {#if method.schema}
+      <hr class="my-4" />
+      <div class="mt-4 grow text-start">
+        <Text fontWeight="medium">{$t('configuration')}</Text>
+        <Stack gap={4}>
+          <SchemaConfiguration schema={method.schema as JSONSchemaProperty} bind:config root />
+        </Stack>
+      </div>
+    {/if}
+
+    {#if debug}
+      <hr class="my-4" />
+      <Text fontWeight="medium">{$t('preview')}</Text>
+      <Textarea class="mt-2" readonly grow value={JSON.stringify({ method: method.key, config }, null, 2)} />
+    {/if}
+  </FormModal>
+{/if}