@haiiro/docuflow 0.0.19 → 0.0.21

package/src/front-components/process-steps.front-component.tsx

@@ -1,59 +1,14 @@
-import { useEffect, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
-import {
-  AppPath,
-  closeSidePanel,
-  enqueueSnackbar,
-  navigate,
-  useSelectedRecordIds,
-} from 'twenty-sdk/front-component';
-import { Button } from 'src/front/ui/kit';
+import { AppPath, closeSidePanel, navigate, useSelectedRecordIds } from 'twenty-sdk/front-component';
 import { useTheme } from 'twenty-ui/theme';
 
-import { callAppRoute, getErrorMessage, getRecord, listRecords } from 'src/front/api';
-import { formatMemberName } from 'src/front/format';
-import { useAsync } from 'src/front/hooks/use-async';
-import { useWorkspaceMembers } from 'src/front/hooks/use-workspace-members';
-import {
-  CheckboxField,
-  DocflowRoot,
-  Message,
-  SectionTitle,
-  SelectField,
-  TextField,
-  VariableChip,
-} from 'src/front/ui/components';
-import { FormFieldsBuilder } from 'src/front/ui/form-fields-builder';
-import { ListSkeleton } from 'src/front/ui/skeleton';
-import { listLaunchObjects } from 'src/shared/api/object-summaries';
-import { restAnd, restEq } from 'src/shared/api/rest-filter.util';
-import { LAUNCH_RECORD_KEY, LAUNCH_TRIGGER_NAME, TRIGGER_STEP_ID } from 'src/shared/docflow.constants';
-import { type FormField } from 'src/shared/form/form-field.type';
-import { getFillableFormFields, getFormFieldsError, parseFormFields } from 'src/shared/form/form-fields.util';
-import { readStepSettings, type StepSettings } from 'src/shared/form/step-settings.util';
-import { parseLaunchFields, parseLaunchObject } from 'src/shared/workflow/launch-step.util';
-import { type WorkflowStep } from 'src/shared/workflow/workflow-run.type';
-import { getFormStepFields, isFormStep } from 'src/shared/workflow/workflow-run.util';
-import { logDocflow, logDocflowError } from 'src/shared/log.util';
+import { type ProcessEditing } from 'src/front/process-editing';
+import { DocflowRoot } from 'src/front/ui/components';
+import { ProcessSettings } from 'src/front/ui/process-settings';
+import { logDocflowError } from 'src/shared/log.util';
+import { type CatalogProcess } from 'src/shared/workflow/process-catalog.type';
 import { PROCESS_STEPS_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/universal-identifiers';
 
-const NO_ASSIGNEE = '';
-const NO_LAUNCH_OBJECT = '';
-// Objects of the workflows themselves: a process is not launched on them
-const WORKFLOW_OBJECTS = ['workflow', 'workflowVersion', 'workflowRun', 'workflowAutomatedTrigger'];
-
-type DraftVersion = { id: string; steps?: WorkflowStep[] | null };
-type ProcessRecord = { id: string; smbLaunchFields?: unknown; smbLaunchObject?: string | null };
-type LaunchObjectOption = { value: string; label: string };
-
-const loadLaunchObjectOptions = async (): Promise<LaunchObjectOption[]> =>
-  (await listLaunchObjects())
-    .filter(({ nameSingular }) => !WORKFLOW_OBJECTS.includes(nameSingular))
-    .map(({ nameSingular, labelSingular }) => ({ value: nameSingular, label: labelSingular }))
-    .sort((left, right) => left.label.localeCompare(right.label, 'ru'));
-
-const sectionStyle = { display: 'flex', flexDirection: 'column' as const };
-
 // The workflow editor reads a version once when it opens and keeps it: it is
 // not told that the server changed the trigger, so the new parameters would
 // show up as variables only after a reload. Opening the process again (out
@@ -73,281 +28,25 @@ const reopenWorkflowEditor = async (workflowId: string) => {
   }
 };
 
-const LaunchParametersEditor = ({
-  workflowId,
-  initialFields,
-  initialLaunchObject,
-  onSaved,
-}: {
-  workflowId: string;
-  initialFields: FormField[];
-  initialLaunchObject: string | undefined;
-  onSaved: () => void;
-}) => {
-  const theme = useTheme();
-  const [fields, setFields] = useState(initialFields);
-  const [launchObject, setLaunchObject] = useState(initialLaunchObject ?? NO_LAUNCH_OBJECT);
-  const { data: objectOptions, error: objectsError } = useAsync(loadLaunchObjectOptions, []);
-  const [isSaving, setIsSaving] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | undefined>();
-
-  const save = async () => {
-    const fieldsError = getFormFieldsError(fields);
-
-    if (fieldsError !== undefined) {
-      setErrorMessage(fieldsError);
-
-      return;
-    }
-
-    setIsSaving(true);
-    setErrorMessage(undefined);
-    logDocflow('process: save launch fields', { workflowId, fields, launchObject });
-
-    try {
-      const result = await callAppRoute('/docflow/processes/launch-fields', {
-        workflowId,
-        fields,
-        launchObject: launchObject === NO_LAUNCH_OBJECT ? null : launchObject,
-      });
-
-      logDocflow('process: launch fields saved', result);
-      await enqueueSnackbar({
-        message:
-          fields.length > 0 || launchObject !== NO_LAUNCH_OBJECT
-            ? `Параметры сохранены: процесс начинается с «${LAUNCH_TRIGGER_NAME}», опубликуйте его`
-            : 'Параметры убраны',
-        variant: 'success',
-      });
-      onSaved();
-      await reopenWorkflowEditor(workflowId);
-    } catch (error) {
-      logDocflowError('process: save launch fields failed', error, { workflowId });
-      setErrorMessage(getErrorMessage(error, 'Не удалось сохранить параметры'));
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return (
-    <section style={{ ...sectionStyle, gap: theme.spacing[2] }} aria-label="Параметры запуска">
-      <SectionTitle>Параметры запуска</SectionTitle>
-      <Message tone="hint">
-        Что человек заполняет перед запуском и на какой записи запускает процесс. Первым блоком процесса
-        становится «{LAUNCH_TRIGGER_NAME}»: в следующих шагах значения и запись выбираются как его
-        переменные, например сотрудник — в поле «Исполнитель». Запускают процесс командой «Запустить
-        процесс» в меню (Cmd+K) или на выбранных записях. Без параметров и записи процесс начинается с
-        обычного «Запуск вручную».
-      </Message>
-      <SelectField
-        label="Где запускать"
-        value={launchObject}
-        disabled={isSaving}
-        options={[
-          { value: NO_LAUNCH_OBJECT, label: 'Откуда угодно, без записи' },
-          // The saved object stays offered while the list loads
-          ...(objectOptions ??
-            (launchObject !== NO_LAUNCH_OBJECT ? [{ value: launchObject, label: launchObject }] : [])),
-        ].map((option) =>
-          option.value === NO_LAUNCH_OBJECT ? option : { ...option, label: `На записи: ${option.label}` },
-        )}
-        onChange={setLaunchObject}
-      />
-      {objectsError !== undefined && (
-        <Message tone="danger">{getErrorMessage(objectsError, 'Не удалось прочитать объекты')}</Message>
-      )}
-      {launchObject !== NO_LAUNCH_OBJECT && (
-        <div style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: theme.spacing[2] }}>
-          <Message tone="hint">Запись, на которой запустили процесс:</Message>
-          <VariableChip>{`{{${TRIGGER_STEP_ID}.${LAUNCH_RECORD_KEY}}}`}</VariableChip>
-        </div>
-      )}
-      <FormFieldsBuilder
-        fields={fields}
-        onChange={setFields}
-        variablePrefix={TRIGGER_STEP_ID}
-        disabled={isSaving}
-      />
-      {errorMessage !== undefined && <Message tone="danger">{errorMessage}</Message>}
-      <div>
-        <Button variant="solid" tone="accent" size="sm" loading={isSaving} onClick={() => void save()}>
-          Сохранить параметры
-        </Button>
-      </div>
-    </section>
-  );
-};
-
-const StepSettingsEditor = ({
-  workflowVersionId,
-  step,
-}: {
-  workflowVersionId: string;
-  step: WorkflowStep;
-}) => {
-  const theme = useTheme();
-  const { members } = useWorkspaceMembers();
-  const fields = parseFormFields(getFormStepFields(step));
-  const [settings, setSettings] = useState<StepSettings>(readStepSettings(fields));
-  const [isSaving, setIsSaving] = useState(false);
-
-  const save = async () => {
-    setIsSaving(true);
-
-    try {
-      await callAppRoute('/docflow/processes/step-settings', {
-        workflowVersionId,
-        stepId: step.id,
-        settings,
-      });
-      await enqueueSnackbar({ message: 'Настройки шага сохранены', variant: 'success' });
-    } catch (error) {
-      await enqueueSnackbar({
-        message: getErrorMessage(error, 'Не удалось сохранить настройки шага'),
-        variant: 'error',
-      });
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const toggleRequired = (fieldId: string, isRequired: boolean) =>
-    setSettings((current) => ({
-      ...current,
-      requiredFieldIds: isRequired
-        ? [...current.requiredFieldIds, fieldId]
-        : current.requiredFieldIds.filter((id) => id !== fieldId),
-    }));
-
-  return (
-    <div
-      style={{
-        background: theme.background.transparent.lighter,
-        borderRadius: theme.border.radius.md,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing[2],
-        padding: theme.spacing[3],
-      }}
-    >
-      <strong>{step.name}</strong>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: theme.spacing[2] }}>
-        <div style={{ flex: '2 1 200px' }}>
-          <SelectField
-            label="Кто выполняет задание"
-            value={settings.assignee ?? NO_ASSIGNEE}
-            options={[
-              { value: NO_ASSIGNEE, label: 'Запустивший процесс' },
-              ...members.map((member) => ({ value: member.id, label: formatMemberName(member) || member.id })),
-            ]}
-            onChange={(assignee) =>
-              setSettings((current) => ({ ...current, assignee: assignee === NO_ASSIGNEE ? null : assignee }))
-            }
-          />
-        </div>
-        <div style={{ flex: '1 1 120px' }}>
-          <TextField
-            label="Срок в днях"
-            type="number"
-            value={settings.dueInDays === null ? '' : String(settings.dueInDays)}
-            onChange={(value) =>
-              setSettings((current) => ({ ...current, dueInDays: value === '' ? null : Number(value) }))
-            }
-          />
-        </div>
-      </div>
-      {getFillableFormFields(fields).map((field) => (
-        <div key={field.id} style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: theme.spacing[2] }}>
-          <CheckboxField
-            label={`${field.label} обязательное`}
-            checked={settings.requiredFieldIds.includes(field.id)}
-            onChange={(isRequired) => toggleRequired(field.id, isRequired)}
-          />
-          <VariableChip>{`{{${step.id}.${field.name}}}`}</VariableChip>
-        </div>
-      ))}
-      <div>
-        <Button variant="outline" size="sm" loading={isSaving} onClick={() => void save()}>
-          Сохранить шаг
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-// Tab of a workflow's record page: the parameters asked before the launch and
-// who fills each "Human input" step of the draft, by when, which fields are
-// required. The standard editor has no place for either.
+// Side panel of a workflow's page ("Параметры запуска"): the launch
+// parameters and the tasks of the steps of this process.
 const ProcessSteps = () => {
   const theme = useTheme();
   const [workflowId] = useSelectedRecordIds();
-  const [launchEditorKey, setLaunchEditorKey] = useState(0);
-  const { data, error, loading, reload } = useAsync(async () => {
-    if (workflowId === undefined) {
-      return undefined;
-    }
-
-    const [process, drafts] = await Promise.all([
-      getRecord<ProcessRecord>('workflows', workflowId),
-      listRecords<DraftVersion>('workflowVersions', {
-        filter: restAnd(restEq('workflowId', workflowId), restEq('status', 'DRAFT')),
-        limit: 1,
-      }),
-    ]);
-
-    return { process, draft: drafts.records[0] };
-  }, [workflowId]);
-  const draft = data?.draft;
-  const formSteps = draft?.steps?.filter(isFormStep) ?? [];
-
-  // The steps are edited in the diagram next to this tab, so what was loaded
-  // goes stale; read the draft again whenever the tab gets the focus back.
-  useEffect(() => {
-    const handleVisible = () => {
-      if (document.visibilityState === 'visible') {
-        void reload();
-      }
-    };
-
-    window.addEventListener('focus', handleVisible);
-    document.addEventListener('visibilitychange', handleVisible);
-
-    return () => {
-      window.removeEventListener('focus', handleVisible);
-      document.removeEventListener('visibilitychange', handleVisible);
-    };
-  }, [reload]);
 
   return (
     <DocflowRoot>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: theme.spacing[6], padding: theme.spacing[3] }}>
-        {loading && data === undefined && <ListSkeleton rows={4} />}
-        {error !== undefined && (
-          <Message tone="danger">{getErrorMessage(error, 'Не удалось прочитать процесс')}</Message>
-        )}
-        {workflowId !== undefined && data?.process !== undefined && (
-          <LaunchParametersEditor
-            key={`${workflowId}:${launchEditorKey}`}
+      <div style={{ padding: theme.spacing[3] }}>
+        {workflowId !== undefined && (
+          <ProcessSettings
             workflowId={workflowId}
-            initialFields={parseLaunchFields(data.process.smbLaunchFields)}
-            initialLaunchObject={parseLaunchObject(data.process.smbLaunchObject)}
-            onSaved={() => {
-              void reload().then(() => setLaunchEditorKey((current) => current + 1));
+            onLaunchSaved={(process: CatalogProcess, editing: ProcessEditing) => {
+              if (editing === 'app' && process.workspaceWorkflowId !== null) {
+                void reopenWorkflowEditor(process.workspaceWorkflowId);
+              }
             }}
           />
         )}
-        {draft !== undefined && formSteps.length > 0 && (
-          <section style={{ ...sectionStyle, gap: theme.spacing[2] }} aria-label="Задания шагов">
-            <SectionTitle>Задания шагов «Человеческий ввод»</SectionTitle>
-            <Message tone="hint">
-              Каждый такой шаг становится заданием. Поля шага задаются в редакторе процесса; заполненные
-              значения следующие шаги читают переменными, показанными рядом с полем.
-            </Message>
-            {formSteps.map((step) => (
-              <StepSettingsEditor key={`${draft.id}:${step.id}`} workflowVersionId={draft.id} step={step} />
-            ))}
-          </section>
-        )}
       </div>
     </DocflowRoot>
   );