@haiiro/docuflow 0.0.16 → 0.0.17

package/src/front-components/docflow-processes.front-component.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import { AppPath, enqueueSnackbar, navigate } from 'twenty-sdk/front-component';
-import { IconPencil, IconPlayerPlay, IconPlayerStop, IconRocket, IconSettings, IconTrash } from 'twenty-ui/icon';
+import { IconPencil, IconPlayerPlay, IconPlayerStop, IconPlus, IconRocket, IconSettings, IconTrash, IconX } from 'twenty-ui/icon';
 import { useTheme } from 'twenty-ui/theme';
 
 import {
@@ -40,27 +40,24 @@ import {
   useRowSelection,
 } from 'src/front/ui/components';
 import { FormFieldInputs } from 'src/front/ui/form-field-inputs';
-import { Button, type MenuAction, MenuButton, PromptDialog, QuickViews, StatusChip } from 'src/front/ui/kit';
+import { Button, type MenuAction, MenuButton, PromptDialog, QuickViews, StatusChip, ValueDialog } from 'src/front/ui/kit';
 import { Timeline } from 'src/front/ui/timeline';
-import { restAnd, restEq, restIlike, restIn } from 'src/shared/api/rest-filter.util';
+import { restAnd, restEq } from 'src/shared/api/rest-filter.util';
 import { DOCFLOW_SECTION } from 'src/shared/docflow.constants';
 import { type FormField, type FormValues } from 'src/shared/form/form-field.type';
 import { findMissingRequiredFields } from 'src/shared/form/form-fields.util';
 import { logDocflow, logDocflowError } from 'src/shared/log.util';
+import { buildLaunchParameters, isLaunchableTrigger, isLaunchParametersStep } from 'src/shared/workflow/launch-step.util';
 import {
-  buildLaunchParameters,
-  isLaunchableTrigger,
-  isLaunchParametersStep,
-  isLaunchTrigger,
-  parseLaunchFields,
-  parseLaunchObject,
-} from 'src/shared/workflow/launch-step.util';
+  type CatalogProcess,
+  type CatalogVersion,
+  type OtherProcess,
+} from 'src/shared/workflow/process-catalog.type';
 import { orderRunSteps } from 'src/shared/workflow/run-timeline.util';
-import { type WorkflowStep, type WorkflowTrigger } from 'src/shared/workflow/workflow-run.type';
+import { type WorkflowStep } from 'src/shared/workflow/workflow-run.type';
 import { getFormStepAssignment, getFormStepFields, isFormStep } from 'src/shared/workflow/workflow-run.util';
 import { PROCESSES_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/universal-identifiers';
 
-const PROCESSES_LIMIT = 200;
 const SEARCH_DEBOUNCE_MS = 300;
 const DRAFT_WAIT_ATTEMPTS = 10;
 const DRAFT_WAIT_MS = 400;
@@ -71,23 +68,14 @@ type Panel = { kind: 'closed' } | { kind: 'process'; workflowId: string };
 type ProcessView = 'all' | 'active' | 'draft';
 type ParametersFilter = 'any' | 'with' | 'without';
 
-type WorkflowRecord = {
-  id: string;
-  name?: string | null;
-  smbLaunchFields?: unknown;
-  smbLaunchObject?: string | null;
-  updatedAt?: string | null;
-};
-type WorkflowVersionRecord = {
-  id: string;
-  workflowId: string;
-  status?: string | null;
-  trigger?: WorkflowTrigger | null;
-  steps?: WorkflowStep[] | null;
-};
+type WorkflowRecord = { id: string };
 
 type DocflowProcess = {
+  // The process engine's id: the editor page, runs and launching take it
   workflowId: string;
+  // The process record of Twenty 2.45: renaming and deleting go through it.
+  // Twenty 2.50 has none, those are done in its editor.
+  workspaceWorkflowId: string | null;
   // The published version people launch; none while the process is a draft
   workflowVersionId: string | undefined;
   name: string;
@@ -124,66 +112,51 @@ const VIEWS: { value: ProcessView; label: string }[] = [
   { value: 'draft', label: 'Черновики' },
 ];
 
-const stagesOf = (version: WorkflowVersionRecord | undefined) =>
+const stagesOf = (version: CatalogVersion | undefined) =>
   orderRunSteps({ flow: { trigger: version?.trigger, steps: version?.steps } }).filter((step) => !isLaunchParametersStep(step));
 
-// Docflow processes are the standard workflows with the docflow section:
-// published ones started by hand are launched here, drafts are shown to be
-// finished in the editor. Both lists are filtered by the server.
-const loadProcesses = async (searchQuery: string): Promise<DocflowProcess[]> => {
-  const { records: workflows } = await listRecords<WorkflowRecord>('workflows', {
-    filter: restAnd(
-      restEq('smbSection', DOCFLOW_SECTION),
-      searchQuery.trim().length > 0 ? restIlike('name', searchQuery) : undefined,
-    ),
-    order_by: 'name[AscNullsLast]',
-    limit: PROCESSES_LIMIT,
-  });
-
-  if (workflows.length === 0) {
-    return [];
-  }
+const toDocflowProcess = (process: CatalogProcess): DocflowProcess => {
+  const { active, draft, deactivated } = process;
+  const isLaunchable = active !== undefined && isLaunchableTrigger(active.trigger);
+
+  return {
+    workflowId: process.workflowId,
+    workspaceWorkflowId: process.workspaceWorkflowId,
+    workflowVersionId: isLaunchable ? active.id : undefined,
+    name: process.name,
+    isPublished: isLaunchable,
+    isActive: active !== undefined,
+    hasUnpublishedChanges: active !== undefined && draft !== undefined,
+    launchFields: process.launchFields,
+    launchObject: process.launchObject,
+    stages: stagesOf(active ?? draft ?? deactivated),
+    updatedAt: process.updatedAt,
+  };
+};
 
-  const { records: versions } = await listRecords<WorkflowVersionRecord>('workflowVersions', {
-    filter: restAnd(
-      restIn('status', ['ACTIVE', 'DRAFT', 'DEACTIVATED']),
-      restIn('workflowId', workflows.map(({ id }) => id)),
-    ),
-    // Newest first: the latest of the versions taken off comes first
-    order_by: 'createdAt[DescNullsLast]',
-    limit: PROCESSES_LIMIT * 5,
+// Docflow processes come from the app's route, which reads them through the
+// Twenty process engine (2.50 keeps no process records) and knows which are
+// docflow ones. The list is short: searched here.
+const loadProcesses = async (searchQuery: string): Promise<DocflowProcess[]> => {
+  const { processes } = await callAppRoute<{ processes: CatalogProcess[] }>('/docflow/processes/catalog', {
+    action: 'list',
   });
+  const query = searchQuery.trim().toLowerCase();
 
-  return workflows.map((workflow) => {
-    const active = versions.find((version) => version.workflowId === workflow.id && version.status === 'ACTIVE');
-    const draft = versions.find((version) => version.workflowId === workflow.id && version.status === 'DRAFT');
-    // Taken off publishing: its steps still show
-    const deactivated = versions.find((version) => version.workflowId === workflow.id && version.status === 'DEACTIVATED');
-    const isLaunchable = active !== undefined && isLaunchableTrigger(active.trigger);
-
-    return {
-      workflowId: workflow.id,
-      workflowVersionId: isLaunchable ? active.id : undefined,
-      name: workflow.name?.trim() || 'Без названия',
-      isPublished: isLaunchable,
-      isActive: active !== undefined,
-      hasUnpublishedChanges: active !== undefined && draft !== undefined,
-      launchFields: parseLaunchFields(workflow.smbLaunchFields),
-      launchObject: isLaunchTrigger(active?.trigger) ? parseLaunchObject(workflow.smbLaunchObject) : undefined,
-      stages: stagesOf(active ?? draft ?? deactivated),
-      updatedAt: workflow.updatedAt,
-    };
-  });
+  return processes
+    .map(toDocflowProcess)
+    .filter((process) => query.length === 0 || process.name.toLowerCase().includes(query));
 };
 
-// Runs per process: all of them and the ones still going
+// Runs per process: all of them and the ones still going. A run names its
+// process by the engine's id on every Twenty version.
 const loadRunCounts = async (workflowIds: string[]): Promise<Record<string, RunCounts>> =>
   Object.fromEntries(
     await Promise.all(
       workflowIds.map(async (workflowId) => {
         const [total, running] = await Promise.all([
-          countRecords('workflowRuns', restEq('workflowId', workflowId)),
-          countRecords('workflowRuns', restAnd(restEq('workflowId', workflowId), restEq('status', 'RUNNING'))),
+          countRecords('workflowRuns', restEq('coreWorkflowId', workflowId)),
+          countRecords('workflowRuns', restAnd(restEq('coreWorkflowId', workflowId), restEq('status', 'RUNNING'))),
         ]);
 
         return [workflowId, { total, running }];
@@ -191,8 +164,10 @@ const loadRunCounts = async (workflowIds: string[]): Promise<Record<string, RunC
     ),
   );
 
-const openEditor = (workflowId: string) =>
-  navigate(AppPath.RecordShowPage, { objectNameSingular: 'workflow', objectRecordId: workflowId });
+const openEditor = (workflowId: string) => navigate(AppPath.WorkflowCoreShowPage, { coreWorkflowId: workflowId });
+
+// What Twenty 2.50 does only in its own editor
+const EDITOR_ONLY_MESSAGE = 'В этой версии Twenty это делается в редакторе процесса: «Открыть редактор»';
 
 const openRun = (runId: string) =>
   navigate(AppPath.RecordShowPage, { objectNameSingular: 'workflowRun', objectRecordId: runId });
@@ -234,7 +209,7 @@ const RecentRuns = ({ workflowId }: { workflowId: string }) => {
     async () =>
       (
         await listRecords<DocflowWorkflowRun>('workflowRuns', {
-          filter: restEq('workflowId', workflowId),
+          filter: restEq('coreWorkflowId', workflowId),
           order_by: 'createdAt[DescNullsLast]',
           limit: RECENT_RUNS_LIMIT,
         })
@@ -387,7 +362,7 @@ const ProcessPanel = ({
 
     try {
       await callAppRoute('/docflow/processes/launch', {
-        workflowVersionId: process.workflowVersionId ?? '',
+        workflowId: process.workflowId,
         values: parameters,
       });
       await enqueueSnackbar({ message: 'Процесс запущен', variant: 'success' });
@@ -460,6 +435,70 @@ const ProcessPanel = ({
   );
 };
 
+// Processes of the workspace made in the Twenty editor, added to docflow:
+// on Twenty 2.50 that is how a process gets here, the app cannot create one.
+const AddFromTwentyDialog = ({ onClose, onAdded }: { onClose: () => void; onAdded: () => void }) => {
+  const theme = useTheme();
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>();
+  const { data: others, loading, error } = useAsync(
+    async () =>
+      (await callAppRoute<{ processes: OtherProcess[] }>('/docflow/processes/catalog', { action: 'others' })).processes,
+    [],
+  );
+
+  const toggle = (workflowId: string) =>
+    setCheckedIds((current) =>
+      current.includes(workflowId) ? current.filter((id) => id !== workflowId) : [...current, workflowId],
+    );
+
+  return (
+    <ValueDialog
+      title="Добавить процессы Twenty"
+      hint="Процессы из «Рабочих процессов» Twenty станут процессами документооборота: их можно будет запускать отсюда, а их задания попадут в «Задания»."
+      confirmLabel="Добавить"
+      canSubmit={checkedIds.length > 0}
+      onClose={onClose}
+      onSubmit={async () => {
+        try {
+          await callAppRoute('/docflow/processes/catalog', { action: 'add', workflowIds: checkedIds });
+          await enqueueSnackbar({ message: `Добавлено: ${checkedIds.length}`, variant: 'success' });
+          onAdded();
+        } catch (addError) {
+          setErrorMessage(getErrorMessage(addError, 'Не удалось добавить'));
+        }
+      }}
+    >
+      {loading && others === undefined && <ListSkeleton rows={3} />}
+      {error !== undefined && <Message tone="danger">{getErrorMessage(error, 'Не удалось загрузить процессы')}</Message>}
+      {others !== undefined && others.length === 0 && <Message tone="hint">Других процессов нет.</Message>}
+      <div style={{ display: 'flex', flexDirection: 'column', maxHeight: '320px', overflowY: 'auto' }}>
+        {(others ?? []).map((other) => (
+          <label
+            key={other.workflowId}
+            style={{
+              alignItems: 'center',
+              cursor: 'pointer',
+              display: 'flex',
+              fontSize: theme.font.size.md,
+              gap: theme.spacing[2],
+              padding: `${theme.spacing[1]} 0`,
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={checkedIds.includes(other.workflowId)}
+              onChange={() => toggle(other.workflowId)}
+            />
+            {other.name}
+          </label>
+        ))}
+      </div>
+      {errorMessage !== undefined && <Message tone="danger">{errorMessage}</Message>}
+    </ValueDialog>
+  );
+};
+
 // The server gives a new workflow its first draft version right after the
 // record; the launch step can only be put into an existing draft.
 const waitForDraft = async (workflowId: string) => {
@@ -488,6 +527,7 @@ const DocflowProcesses = () => {
   const [panel, setPanel] = useState<Panel>({ kind: 'closed' });
   const [renaming, setRenaming] = useState<DocflowProcess | undefined>();
   const [isCreating, setIsCreating] = useState(false);
+  const [isAdding, setIsAdding] = useState(false);
   const [hiddenColumns, setHiddenColumns] = useHiddenColumns(['updatedAt']);
   const { data: loaded, loading, error, reload } = useAsync(() => loadProcesses(searchQuery), [searchQuery]);
   const workflowIdsKey = (loaded ?? []).map(({ workflowId }) => workflowId).join();
@@ -537,18 +577,43 @@ const DocflowProcesses = () => {
     },
   });
 
+  // The 2.45 process records of the given processes; none on Twenty 2.50,
+  // which renames and deletes processes only in its editor
+  const recordIdsOf = (ids: string[]): string[] | undefined => {
+    const recordIds = ids.map((id) => processes.find(({ workflowId }) => workflowId === id)?.workspaceWorkflowId);
+
+    return recordIds.every((recordId): recordId is string => typeof recordId === 'string') ? recordIds : undefined;
+  };
+
   // The processes go to the Twenty trash ("Рабочие процессы → Удалённые"),
   // their runs and tasks stay.
   const removeProcesses = (ids: string[]) =>
     bulk.run(
       async () => {
-        await deleteRecords('workflows', ids);
+        const recordIds = recordIdsOf(ids);
+
+        if (recordIds === undefined) {
+          throw new Error(EDITOR_ONLY_MESSAGE);
+        }
+
+        await deleteRecords('workflows', recordIds);
         setPanel((current) => (current.kind === 'process' && ids.includes(current.workflowId) ? { kind: 'closed' } : current));
       },
       ids.length === 1 ? 'Процесс удалён' : `Удалено процессов: ${ids.length}`,
       'Не удалось удалить',
     );
 
+  // Only the mark goes: the process stays in Twenty with its runs
+  const takeOutOfDocflow = (ids: string[]) =>
+    bulk.run(
+      async () => {
+        await callAppRoute('/docflow/processes/catalog', { action: 'remove', workflowIds: ids });
+        setPanel((current) => (current.kind === 'process' && ids.includes(current.workflowId) ? { kind: 'closed' } : current));
+      },
+      ids.length === 1 ? 'Процесс убран из документооборота' : `Убрано из документооборота: ${ids.length}`,
+      'Не удалось убрать',
+    );
+
   // Publishing goes through the app's route, one process at a time: the
   // workflow engine takes a version per call.
   const publishProcesses = (ids: string[], publish: boolean) =>
@@ -559,7 +624,11 @@ const DocflowProcesses = () => {
 
   const handleRenameProcess = async (process: DocflowProcess, name: string) => {
     try {
-      await updateRecord('workflows', process.workflowId, { name });
+      if (process.workspaceWorkflowId === null) {
+        throw new Error(EDITOR_ONLY_MESSAGE);
+      }
+
+      await updateRecord('workflows', process.workspaceWorkflowId, { name });
       await enqueueSnackbar({ message: 'Процесс переименован', variant: 'success' });
       setRenaming(undefined);
       await reload();
@@ -593,10 +662,21 @@ const DocflowProcesses = () => {
       });
     } catch (createError) {
       logDocflowError('process: create failed', createError);
-      await enqueueSnackbar({
-        message: getErrorMessage(createError, 'Не удалось создать процесс'),
-        variant: 'error',
-      });
+      // Twenty 2.50 lets no app create a process: it is made in the Twenty
+      // editor and added here
+      const message = getErrorMessage(createError, 'Не удалось создать процесс');
+
+      if (/Method not allowed/i.test(message)) {
+        await enqueueSnackbar({
+          message: 'В этой версии Twenty процесс создаётся в «Рабочих процессах» Twenty, затем — «Добавить из Twenty»',
+          variant: 'info',
+        });
+        await navigate(AppPath.RecordIndexPage, { objectNamePlural: 'workflows' });
+
+        return;
+      }
+
+      await enqueueSnackbar({ message, variant: 'error' });
     } finally {
       setIsCreating(false);
     }
@@ -628,6 +708,12 @@ const DocflowProcesses = () => {
         : []),
       { key: 'edit', label: 'Открыть редактор', icon: IconSettings, onSelect: () => void openEditor(workflowId) },
       { key: 'rename', label: 'Переименовать', icon: IconPencil, onSelect: () => setRenaming(process) },
+      {
+        key: 'take-out',
+        label: 'Убрать из документооборота',
+        icon: IconX,
+        onSelect: () => void takeOutOfDocflow([workflowId]),
+      },
       {
         key: 'delete',
         label: 'Удалить',
@@ -692,6 +778,11 @@ const DocflowProcesses = () => {
               }))}
             />
           }
+          actions={
+            <Button size="md" icon={IconPlus} onClick={() => setIsAdding(true)}>
+              Добавить из Twenty
+            </Button>
+          }
           onCreate={() => void handleCreate()}
           isCreating={isCreating}
         />
@@ -702,7 +793,9 @@ const DocflowProcesses = () => {
         )}
         {loading && loaded === undefined && <TableSkeleton />}
         {!loading && error === undefined && processes.length === 0 && (
-          <Message>Процессов нет. «Создать» добавит процесс в раздел «Документооборот».</Message>
+          <Message>
+            Процессов нет. «Создать» добавит новый процесс, «Добавить из Twenty» — уже настроенный в «Рабочих процессах».
+          </Message>
         )}
         {processes.length > 0 && (
           <DataTable
@@ -779,6 +872,15 @@ const DocflowProcesses = () => {
           />
         </SelectionBar>
       </SplitView>
+      {isAdding && (
+        <AddFromTwentyDialog
+          onClose={() => setIsAdding(false)}
+          onAdded={() => {
+            setIsAdding(false);
+            void reloadAll();
+          }}
+        />
+      )}
       {renaming !== undefined && (
         <PromptDialog
           title="Переименовать процесс"