@haiiro/docuflow 0.0.19 → 0.0.21

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

@@ -7,16 +7,14 @@ import { useTheme } from 'twenty-ui/theme';
 import {
   callAppRoute,
   countRecords,
-  createRecord,
-  deleteRecords,
   getErrorMessage,
   listRecords,
-  updateRecord,
 } from 'src/front/api';
 import {
   formatDate,
   formatDateTime,
   formatMemberName,
+  formatRunStarter,
   RUN_STATUS_COLORS,
   RUN_STATUS_LABELS,
   STEP_TYPE_LABELS,
@@ -24,6 +22,14 @@ import {
 import { useAsync, useDebouncedValue } from 'src/front/hooks/use-async';
 import { useBulkAction } from 'src/front/hooks/use-bulk-action';
 import { useWorkspaceMembers } from 'src/front/hooks/use-workspace-members';
+import {
+  createProcess,
+  type ProcessEditing,
+  publishProcess as publishProcessIn,
+  removeProcesses as removeProcessesIn,
+  renameProcess as renameProcessIn,
+  resolveProcessEditing,
+} from 'src/front/process-editing';
 import { type DocflowWorkflowRun, type WorkspaceMember } from 'src/front/types';
 import { ListSkeleton, TableSkeleton } from 'src/front/ui/skeleton';
 import {
@@ -40,10 +46,10 @@ import {
   useRowSelection,
 } from 'src/front/ui/components';
 import { FormFieldInputs } from 'src/front/ui/form-field-inputs';
+import { ProcessSettings, StandalonePageHint } from 'src/front/ui/process-settings';
 import { Button, type MenuAction, MenuButton, PromptDialog, QuickViews, StatusChip, ValueDialog } from 'src/front/ui/kit';
 import { Timeline } from 'src/front/ui/timeline';
 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';
@@ -59,8 +65,6 @@ import { getFormStepAssignment, getFormStepFields, isFormStep } from 'src/shared
 import { PROCESSES_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/universal-identifiers';
 
 const SEARCH_DEBOUNCE_MS = 300;
-const DRAFT_WAIT_ATTEMPTS = 10;
-const DRAFT_WAIT_MS = 400;
 const RECENT_RUNS_LIMIT = 5;
 const PROCESS_NOUN: [string, string, string] = ['процесс', 'процесса', 'процессов'];
 
@@ -68,14 +72,15 @@ type Panel = { kind: 'closed' } | { kind: 'process'; workflowId: string };
 type ProcessView = 'all' | 'active' | 'draft';
 type ParametersFilter = 'any' | 'with' | 'without';
 
-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;
+  draftVersionId?: string;
+  activeVersionId?: string;
+  deactivatedVersionId?: string;
   // The published version people launch; none while the process is a draft
   workflowVersionId: string | undefined;
   name: string;
@@ -122,6 +127,9 @@ const toDocflowProcess = (process: CatalogProcess): DocflowProcess => {
   return {
     workflowId: process.workflowId,
     workspaceWorkflowId: process.workspaceWorkflowId,
+    draftVersionId: draft?.id,
+    activeVersionId: active?.id,
+    deactivatedVersionId: deactivated?.id,
     workflowVersionId: isLaunchable ? active.id : undefined,
     name: process.name,
     isPublished: isLaunchable,
@@ -137,15 +145,19 @@ const toDocflowProcess = (process: CatalogProcess): DocflowProcess => {
 // 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 loadProcesses = async (searchQuery: string): Promise<{ processes: DocflowProcess[]; editing: ProcessEditing }> => {
+  const { processes, canAppEdit } = await callAppRoute<{ processes: CatalogProcess[]; canAppEdit: boolean }>(
+    '/docflow/processes/catalog',
+    { action: 'list' },
+  );
   const query = searchQuery.trim().toLowerCase();
 
-  return processes
-    .map(toDocflowProcess)
-    .filter((process) => query.length === 0 || process.name.toLowerCase().includes(query));
+  return {
+    processes: processes
+      .map(toDocflowProcess)
+      .filter((process) => query.length === 0 || process.name.toLowerCase().includes(query)),
+    editing: resolveProcessEditing(canAppEdit),
+  };
 };
 
 // Runs per process: all of them and the ones still going. A run names its
@@ -166,8 +178,6 @@ const loadRunCounts = async (workflowIds: string[]): Promise<Record<string, RunC
 
 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 });
@@ -203,7 +213,7 @@ const ProcessStages = ({ process, members }: { process: DocflowProcess; members:
   );
 };
 
-const RecentRuns = ({ workflowId }: { workflowId: string }) => {
+const RecentRuns = ({ workflowId, members }: { workflowId: string; members: WorkspaceMember[] }) => {
   const theme = useTheme();
   const { data: runs, loading } = useAsync(
     async () =>
@@ -250,7 +260,7 @@ const RecentRuns = ({ workflowId }: { workflowId: string }) => {
         >
           <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {formatDateTime(run.startedAt ?? run.createdAt)}
-            {run.createdBy?.name ? ` · ${run.createdBy.name}` : ''}
+            {formatRunStarter(run, members) ? ` · ${formatRunStarter(run, members)}` : ''}
           </span>
           <StatusChip color={RUN_STATUS_COLORS[run.status ?? ''] ?? 'gray'}>
             {RUN_STATUS_LABELS[run.status ?? ''] ?? run.status}
@@ -334,6 +344,7 @@ const ProcessPanel = ({
   onLaunched,
   onRename,
   onPublish,
+  onSettingsSaved,
 }: {
   process: DocflowProcess;
   members: WorkspaceMember[];
@@ -341,11 +352,13 @@ const ProcessPanel = ({
   onLaunched: () => void;
   onRename: (name: string) => Promise<void>;
   onPublish: (publish: boolean) => void;
+  onSettingsSaved: () => void;
 }) => {
   const theme = useTheme();
   const [values, setValues] = useState<FormValues>({});
   const [isLaunching, setIsLaunching] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | undefined>();
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   const handleLaunch = async () => {
     const parameters = buildLaunchParameters({ fields: process.launchFields, values });
@@ -423,13 +436,22 @@ const ProcessPanel = ({
             : 'Процесс ещё не опубликован: проверьте этапы и нажмите «Опубликовать».'}
         </Message>
       )}
+      <section style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
+        <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+          <SectionTitle>Параметры запуска и задания</SectionTitle>
+          <Button size="sm" icon={IconSettings} onClick={() => setIsSettingsOpen((current) => !current)}>
+            {isSettingsOpen ? 'Свернуть' : 'Настроить'}
+          </Button>
+        </div>
+        {isSettingsOpen && <ProcessSettings workflowId={process.workflowId} onLaunchSaved={onSettingsSaved} />}
+      </section>
       <section style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[3] }}>
         <SectionTitle>Этапы</SectionTitle>
         <ProcessStages process={process} members={members} />
       </section>
       <section style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[1] }}>
         <SectionTitle>Последние запуски</SectionTitle>
-        <RecentRuns workflowId={process.workflowId} />
+        <RecentRuns workflowId={process.workflowId} members={members} />
       </section>
     </div>
   );
@@ -499,23 +521,6 @@ const AddFromTwentyDialog = ({ onClose, onAdded }: { onClose: () => void; onAdde
   );
 };
 
-// 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) => {
-  for (let attempt = 0; attempt < DRAFT_WAIT_ATTEMPTS; attempt++) {
-    const { records } = await listRecords<{ id: string }>('workflowVersions', {
-      filter: restEq('workflowId', workflowId),
-      limit: 1,
-    });
-
-    if (records.length > 0) {
-      return;
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, DRAFT_WAIT_MS));
-  }
-};
-
 const DocflowProcesses = () => {
   const theme = useTheme();
   const { members } = useWorkspaceMembers();
@@ -529,7 +534,10 @@ const DocflowProcesses = () => {
   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 { data: catalog, loading, error, reload } = useAsync(() => loadProcesses(searchQuery), [searchQuery]);
+  const loaded = catalog?.processes;
+  // Until the list loads, changes go the app's way: it answers if it cannot
+  const editing: ProcessEditing = catalog?.editing ?? 'app';
   const workflowIdsKey = (loaded ?? []).map(({ workflowId }) => workflowId).join();
   const { data: runCounts, reload: reloadRunCounts } = useAsync(
     () => loadRunCounts(workflowIdsKey.length > 0 ? workflowIdsKey.split(',') : []),
@@ -577,26 +585,15 @@ 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;
-  };
+  const processesOf = (ids: string[]) =>
+    ids.flatMap((id) => processes.filter(({ workflowId }) => workflowId === id));
 
   // The processes go to the Twenty trash ("Рабочие процессы → Удалённые"),
   // their runs and tasks stay.
   const removeProcesses = (ids: string[]) =>
     bulk.run(
       async () => {
-        const recordIds = recordIdsOf(ids);
-
-        if (recordIds === undefined) {
-          throw new Error(EDITOR_ONLY_MESSAGE);
-        }
-
-        await deleteRecords('workflows', recordIds);
+        await removeProcessesIn(editing, processesOf(ids));
         setPanel((current) => (current.kind === 'process' && ids.includes(current.workflowId) ? { kind: 'closed' } : current));
       },
       ids.length === 1 ? 'Процесс удалён' : `Удалено процессов: ${ids.length}`,
@@ -614,21 +611,16 @@ const DocflowProcesses = () => {
       'Не удалось убрать',
     );
 
-  // Publishing goes through the app's route, one process at a time: the
-  // workflow engine takes a version per call.
+  // One process at a time: the workflow engine takes a version per call
   const publishProcesses = (ids: string[], publish: boolean) =>
-    bulk.runEach(ids, (workflowId) => callAppRoute('/docflow/processes/publish', { workflowId, publish }), {
+    bulk.runEach(ids, (workflowId) => publishProcessIn(editing, processesOf([workflowId])[0] ?? { workflowId, workspaceWorkflowId: null }, publish), {
       done: (count) => (publish ? `Опубликовано: ${count}` : `Снято с публикации: ${count}`),
       failed: publish ? 'Не опубликованы' : 'Не сняты с публикации',
     });
 
   const handleRenameProcess = async (process: DocflowProcess, name: string) => {
     try {
-      if (process.workspaceWorkflowId === null) {
-        throw new Error(EDITOR_ONLY_MESSAGE);
-      }
-
-      await updateRecord('workflows', process.workspaceWorkflowId, { name });
+      await renameProcessIn(editing, process, name);
       await enqueueSnackbar({ message: 'Процесс переименован', variant: 'success' });
       setRenaming(undefined);
       await reload();
@@ -638,45 +630,18 @@ const DocflowProcesses = () => {
   };
 
   // As "Создать" of the standard list: a process with a manual trigger in the
-  // docflow section, opened in the editor. Launch parameters are set later
-  // with the process's "Параметры запуска" command.
+  // docflow section, opened in the editor. Launch parameters are set in the
+  // process's panel ("Параметры запуска и задания").
   const handleCreate = async () => {
     setIsCreating(true);
-    logDocflow('process: create');
+    logDocflow('process: create', { editing });
 
     try {
-      const workflow = await createRecord<WorkflowRecord>('workflows', {
-        name: 'Новый процесс',
-        smbSection: DOCFLOW_SECTION,
-      });
-
-      if (workflow === undefined) {
-        throw new Error('процесс создан, но сервер его не вернул');
-      }
-
-      await waitForDraft(workflow.id);
-      await callAppRoute('/docflow/processes/launch-fields', { workflowId: workflow.id, fields: [] });
-      await navigate(AppPath.RecordShowPage, {
-        objectNameSingular: 'workflow',
-        objectRecordId: workflow.id,
-      });
+      await createProcess(editing, 'Новый процесс');
+      await reload();
     } catch (createError) {
       logDocflowError('process: create failed', createError);
-      // 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' });
+      await enqueueSnackbar({ message: getErrorMessage(createError, 'Не удалось создать процесс'), variant: 'error' });
     } finally {
       setIsCreating(false);
     }
@@ -740,6 +705,7 @@ const DocflowProcesses = () => {
               onLaunched={() => void reloadRunCounts()}
               onRename={(name) => handleRenameProcess(selectedProcess, name)}
               onPublish={(publish) => void publishProcesses([selectedProcess.workflowId], publish)}
+              onSettingsSaved={() => void reload()}
             />
           ) : undefined
         }
@@ -786,6 +752,11 @@ const DocflowProcesses = () => {
           onCreate={() => void handleCreate()}
           isCreating={isCreating}
         />
+        {editing === 'standalone' && (
+          <div style={{ padding: `0 ${theme.spacing[5]} ${theme.spacing[3]}` }}>
+            <StandalonePageHint />
+          </div>
+        )}
         {error !== undefined && (
           <div style={{ padding: theme.spacing[4] }}>
             <Message tone="danger">{getErrorMessage(error, 'Не удалось загрузить процессы')}</Message>