@antelopejs/dms 0.11.1 → 0.12.0

package/frontend-vue/layers/dms-ui/app/build/composables/actions/useActionTargets.ts

@@ -1,117 +1,20 @@
 import { useClipboard } from "@vueuse/core";
-import {
-  type ActionConfirm,
-  isConfirmFrom,
-} from "#dms-core/app/types/confirm-dialog";
-import { get } from "@nuxt/ui/runtime/utils/index.js";
-import { type Component, getCurrentScope, onScopeDispose } from "vue";
-import type { ActionTarget } from "../../../composables/table-view/types/action-target";
-import type { CustomButton } from "../../../composables/table-view/types/custom-button";
-import type { CustomRowAction } from "../../../types/row-action";
-import type {
-  ConfirmOptions,
-  ConfirmValues,
-} from "../../../composables/confirm/types";
-import { resolveResponseToast } from "../../utils/responseWarning";
-import type {
-  ContainerInstance,
-  DrawerOptions,
-} from "../../../composables/containers/types";
-import DmsRowHeader from "../../components/containers/row/RowHeader.vue";
-import { drawerRowHeaderProps } from "../../components/containers/row/drawerRowHeader";
-import DmsRowNotFound from "../../components/containers/row/RowNotFound.vue";
-import {
-  type BulkSelection,
-  bulkSelectionQuery,
-  isBulkAction,
-  isUrlTarget,
-  targetForRow,
-  targetWithSelection,
-  withQuery,
-} from "./bulkSelection";
-import {
-  listenRowSteps,
-  type RowNavigationSource,
-  type ShowRow,
-  trackRowNavigation,
-} from "./rowNavigation";
-import type { RowNavigation } from "../../../types/row-navigation";
-import {
-  clearWrittenRecord,
-  hasMissingRowState,
-  isDeepLinkAction,
-  resolveDeepLinkedRow,
-  writeRecordId,
-  type WrittenRecord,
-} from "../table-view/utils/recordLink";
-import {
-  closeRowSidePanel,
-  closeRowSidePanelOf,
-  openRowSidePanel,
-  rowSidePanelOwnerKey,
-  useRowSidePanelContent,
-} from "#dms-layout/app/build/composables/layout/rowSidePanel";
+import type { RowNavigationSource } from "./rowNavigation";
 import type { TableUrlScope } from "../table-view/utils/views";
 import { useActionConfirm } from "../confirm/useActionConfirm";
 import {
-  type ConfirmTranslate,
-  resolveConfirmText,
-} from "../confirm/confirmDialogTexts";
-import {
-  dispatchQuickActionTarget,
-  findServedQuickAction,
-} from "../../utils/dispatchQuickActionTarget";
-import {
-  namesPageValue,
-  resolveLinkVariables,
-  resolveTextVariables,
-} from "../../utils/urlVariables";
-import { currentPageUrlValues } from "../page/pageUrlValues";
-import { readBulkCount } from "../table-view/utils/bulkActions";
-import { type DownloadFetch, saveDownload } from "../../utils/fileDownload";
+  createActionRequests,
+  createExportJobHandler,
+} from "./actionTargetRequests";
+import { createTargetRows, createRowTexts } from "./actionTargetRows";
+import { createContainerOpener } from "./actionTargetContainers";
+import { createSidePanelHandler } from "./actionTargetSidePanel";
+import { createTargetHandlers } from "./actionTargetHandlers";
+import { createActionTargetRunner } from "./actionTargetConfirmation";
 import {
-  interpolateRowText,
-  namesRowField,
-} from "#dms-core/app/utils/url-interpolation";
-import { dropRowTokens } from "../../utils/urlVariables";
-import { fillRowChildren, fillRowOptions } from "./rowComponentOptions";
-import { resolveComponentChildren } from "../../../utils/componentTree";
-import TargetComponentTree from "../../components/containers/TargetComponentTree.vue";
-import { dmsOwnDrawer } from "../containers/context";
-
-/** Runs a confirmed action from inside its dialog (see `onConfirm`). */
-type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
-
-/**
- * A target's URL with the page's `{{params.X}}` / `{{query.X}}` filled (a
- * query pair without a value left out), then the row's `{{row.field}}`: an
- * action keeps the page's context (`?website={{query.website}}`) as a page
- * header button does, whatever its type and wherever it sits. Read when the
- * action runs, so it carries the URL as it is then.
- */
-function targetUrl(url: string, rowData?: Data): string {
-  const withPageValues = namesPageValue(url)
-    ? resolveLinkVariables(url, currentPageUrlValues())
-    : url;
-  return rowData ? interpolateUrl(withPageValues, rowData) : withPageValues;
-}
-
-/**
- * A download target's file name with the row's `{{row.field}}` and the
- * page's tokens filled as they are (a name, not a URL: nothing is encoded). A
- * token without a value leaves no name: the server's one is used.
- */
-function downloadTargetFilename(
-  filename: string | undefined,
-  rowData?: Data,
-): string | undefined {
-  if (!filename) return undefined;
-  const withRow = rowData ? interpolateRowText(filename, rowData) : filename;
-  return resolveTextVariables(withRow, currentPageUrlValues());
-}
-
-// The id an export job's start answered, in its `statusUrl` / `downloadUrl`.
-const JOB_ID_TOKEN = /\{\{\s*job\.id\s*\}\}/g;
+  createCustomActions,
+  createMissingRowHandler,
+} from "./actionTargetActions";
 
 /** Where the buttons run: the requests they send, what they refresh. */
 export interface ActionTargetsConfig {
@@ -122,7 +25,10 @@ export interface ActionTargetsConfig {
   /** Called once a target changed something (an API call, a closed form). */
   refreshCallback?: () => void;
   /** Toasts a failure no dialog shows. */
-  handleApiError: (error: unknown, title?: string) => void;
+  handleApiError: (
+    error: Parameters<typeof useApiError>[0],
+    title?: string,
+  ) => void;
   /** The rows a drawer or modal opened on a row steps through (J / K). */
   rowNavigation?: RowNavigationSource;
   /** Where a `deepLink` action writes the row it has open in the URL. */
@@ -139,71 +45,6 @@ export interface ActionTargetsConfig {
   rowIdKey?: string;
 }
 
-const DEFAULT_ROW_ID_KEY = "_id";
-
-/** How a target runs beyond its row. */
-interface TargetRunExtras {
-  /** The rows of a bulk action, handed to a drawer or modal. */
-  selection?: BulkSelection;
-  /** The open row is reflected in the URL. */
-  deepLink?: boolean;
-  /** Fill-ins of the confirmation's texts besides the row's: `{ count }`. */
-  textParams?: Data;
-  /** A bulk action run from a row: its drawer, modal or panel gets the row too. */
-  keepsRow?: boolean;
-}
-
-type SidePanelTarget = ActionTarget & { type: "sidePanel" };
-type DrawerTarget = ActionTarget & { type: "drawer" };
-type DownloadTarget = ActionTarget & { type: "download" };
-/** A target opening a row with the DMS's row header and not-found state. */
-type RowTarget = SidePanelTarget | DrawerTarget;
-
-/** A side panel to open, and on what. */
-interface SidePanelTargetRun extends TargetRunExtras {
-  target: SidePanelTarget;
-  title: string;
-  containerId: string;
-  rowData?: Data;
-  /** Id of a row the link names but the route answered 404 for. */
-  missingId?: string;
-}
-
-/**
- * `show`, run only while the row side panel still shows `session`: a row read
- * after the panel closed, or moved to another run, leaves it alone.
- */
-function whileShown<V>(session: symbol, show: (value: V) => void) {
-  return (value: V): void => {
-    if (useRowSidePanelContent().value?.session === session) show(value);
-  };
-}
-
-const NO_ROW_ROUTE = async (): Promise<undefined> => undefined;
-
-const NOT_FOUND_TITLE_KEY = "side_panel.not_found.title";
-const NOT_FOUND_DESCRIPTION_KEY = "side_panel.not_found.description";
-
-/** A drawer or modal to open, and on what. */
-interface ComponentTargetRun extends TargetRunExtras {
-  target: ActionTarget & { type: "modal" | "drawer" };
-  title: string;
-  description: string;
-  containerId: string;
-  rowData?: Data;
-  /** Id of a row the link names but the route answered 404 for (a drawer). */
-  missingId?: string;
-}
-
-/**
- * Whether a drawer draws the DMS's row header (the title naming the row, its
- * position, previous / next): asked for, or implied by the texts it words.
- */
-function hasRowHeader(target: ComponentTargetRun["target"]): boolean {
-  if (target.type !== "drawer") return false;
-  return target.rowHeader ?? !!(target.rowTitle || target.positionLabel);
-}
-
 /**
  * Runs the target of a button or a row action (`ActionTarget`), after the
  * confirmation the action declares: a table's toolbar buttons and row
@@ -219,713 +60,47 @@ export function useActionTargets(config: ActionTargetsConfig) {
   const { copy: copyToClipboard } = useClipboard({ legacy: true });
   const { confirmAction } = useActionConfirm();
   const { handleApiError } = config;
-  const fetchRaw = useAuthFetch().$authFetch.raw as unknown as DownloadFetch;
-
-  /**
-   * Calls an `api` target and tells how it went (rejects on a failure). On a
-   * selection, the toast counts the rows the route says it changed, or every
-   * selected row when it does not say.
-   */
-  const requestApiTarget = async (
-    target: ActionTarget & { type: "api" },
-    url: string,
-    rowData?: Data,
-    values: ConfirmValues = {},
-    selection?: BulkSelection,
-  ) => {
-    // The confirmation's values join the declared body, the input winning.
-    const body = { ...target.body, ...values };
-    const response = await config.api<Record<string, unknown> | undefined>(
-      url,
-      {
-        method: target.method || HttpMethod.post,
-        ...(Object.keys(body).length > 0 ? { body } : {}),
-      },
-    );
-    if (target.copy) {
-      await copyToClipboard(String(response?.[target.copy] ?? ""));
-    }
-    const toastParams = selection
-      ? { ...rowData, count: readBulkCount(response) ?? selection.count }
-      : (rowData ?? {});
-    toast.add(
-      resolveResponseToast(
-        response,
-        {
-          color: Color.success,
-          // Pluralized on a bulk action's `{ count }`, like its dialog.
-          title: resolveConfirmText(
-            target.successMessage,
-            toastParams,
-            t as ConfirmTranslate,
-          ),
-        },
-        { processI18n, processApiMessage },
-      ),
-    );
-    // A read-only call (a link to copy) changes no row.
-    if (target.method !== "GET") config.refreshCallback?.();
-  };
-
-  // A direct call toasts a refusal; a confirmed one runs inside its dialog
-  // (see `confirmedRuns`).
-  const handleApiTarget = async (
-    target: ActionTarget & { type: "api" },
-    url: string,
-    label: string,
-    rowData?: Data,
-    selection?: BulkSelection,
-  ) => {
-    try {
-      await requestApiTarget(target, url, rowData, {}, selection);
-    } catch (error: unknown) {
-      handleApiError(error, label ? processI18n(label, rowData) : undefined);
-    }
-  };
-
-  const handleExportJobTarget = async (
-    target: ActionTarget & { type: "exportJob" },
-    url: string,
-    rowData?: Data,
-  ) => {
-    const labels = target.labels
-      ? {
-          title: target.labels.title
-            ? processI18n(target.labels.title)
-            : undefined,
-          exporting: target.labels.exporting
-            ? processI18n(target.labels.exporting)
-            : undefined,
-          downloading: target.labels.downloading
-            ? processI18n(target.labels.downloading)
-            : undefined,
-          successTitle: target.labels.successTitle
-            ? processI18n(target.labels.successTitle)
-            : undefined,
-          successMessage: target.labels.successMessage
-            ? processI18n(target.labels.successMessage)
-            : undefined,
-          errorTitle: target.labels.errorTitle
-            ? processI18n(target.labels.errorTitle)
-            : undefined,
-          retry: target.labels.retry
-            ? processI18n(target.labels.retry)
-            : undefined,
-        }
-      : undefined;
-    const statusUrlTemplate = target.statusUrl;
-    const downloadUrlTemplate = target.downloadUrl;
-    const interpolate = (template: string, ticket: ExportJobTicket): string =>
-      targetUrl(
-        template.replace(JOB_ID_TOKEN, encodeURIComponent(ticket.jobId)),
-        rowData,
-      );
-    await runExportJob({
-      startUrl: url,
-      startMethod: target.method ?? "POST",
-      statusUrl: statusUrlTemplate
-        ? (ticket) => interpolate(statusUrlTemplate, ticket)
-        : undefined,
-      downloadUrl: downloadUrlTemplate
-        ? (ticket) => interpolate(downloadUrlTemplate, ticket)
-        : undefined,
-      labels,
-    });
-  };
-
-  // Fetched with the user's session, as a confirmation's download is; a
-  // refusal is toasted like a failed API call.
-  const handleDownloadTarget = async (
-    target: DownloadTarget,
-    label: string,
-    rowData?: Data,
-  ) => {
-    try {
-      await saveDownload(
-        {
-          url: targetUrl(target.url, rowData),
-          filename: downloadTargetFilename(target.filename, rowData),
-        },
-        fetchRaw,
-      );
-    } catch (error: unknown) {
-      handleApiError(error, label ? processI18n(label, rowData) : undefined);
-    }
-  };
-
-  // A drawer remembers the size the user gives it per action: per table and
-  // component, whatever row it opens on.
-  const openContainer = (
-    run: ComponentTargetRun,
-    component: Component,
-    options: Pick<
-      DrawerOptions,
-      "title" | "componentOptions" | "headerComponentOptions"
-    >,
-  ): ContainerInstance => {
-    const containerOptions = {
-      ...options,
-      description: run.description,
-      containerId: run.containerId,
-      component,
-    };
-    if (run.target.type === "modal") {
-      return openModal({ ...containerOptions, size: run.target.size });
-    }
-    return openDrawer(
-      dmsOwnDrawer({
-        ...containerOptions,
-        direction: run.target.direction,
-        size: run.target.size,
-        sizeKey: `${config.pageId}-${config.componentId}-${run.target.component?.componentName}`,
-        ...(options.headerComponentOptions && {
-          headerComponent: DmsRowHeader,
-        }),
-      }),
-    );
-  };
-
-  const resolveTargetComponent = (componentName: string): Component =>
-    (resolveDmsComponent(componentName) || componentName) as Component;
-
-  // A container block (a Card, a VStack, a Tab) mounts its children as a
-  // page does; a single block is mounted as it is.
-  const targetComponentOf = (
-    componentName: string,
-    info: ComponentInfo,
-  ): Component =>
-    info.children?.length
-      ? TargetComponentTree
-      : resolveTargetComponent(componentName);
-
-  const rowIdOf = (row?: Data): string | undefined => {
-    if (!row) return undefined;
-    const idKey =
-      config.rowNavigation?.rowIdKey ?? config.rowIdKey ?? DEFAULT_ROW_ID_KEY;
-    const id = get(row, idKey);
-    return id === undefined || id === null ? undefined : String(id);
-  };
-
-  // A deep-linked action keeps the row it has open in the URL, by id;
-  // `undefined` removes it, but only the row this run wrote, on the page it
-  // wrote it: closing as the user navigates leaves the next page's
-  // `?record=` alone.
-  const recordRecorder = (deepLink?: boolean) => {
-    let written: WrittenRecord | undefined;
-    return (id?: string): void => {
-      if (!deepLink || !config.recordScope || !config.rowNavigation) return;
-      if (!id) {
-        if (clearWrittenRecord(written)) config.onRecordShown?.(undefined);
-        written = undefined;
-        return;
-      }
-      written = writeRecordId(config.recordScope, id);
-      config.onRecordShown?.(id);
-    };
-  };
-  // `showRow` given an id: the listed row, else the one the table's route
-  // reads. A row its route answered 404 for goes to `showMissing` when the
-  // container has a state for it; any other row not found rejects. Only the
-  // latest call applies: a read that resolves after a later call is dropped.
-  const rowShower = (
-    show: (row: Data) => void,
-    showMissing?: (id: string) => void,
-  ): ShowRow => {
-    let latest = 0;
-    return async (rowOrId) => {
-      const call = ++latest;
-      if (typeof rowOrId !== "string") return show(rowOrId);
-      const source = config.rowNavigation;
-      const found = await resolveDeepLinkedRow(rowOrId, {
-        listed: source?.rows(),
-        idOf: rowIdOf,
-        getRow: source?.getRow ?? NO_ROW_ROUTE,
-      });
-      if (call !== latest) return;
-      if (found.row) return show(found.row);
-      if (found.isMissing && showMissing) return showMissing(rowOrId);
-      throw new Error(`The row "${rowOrId}" could not be read`);
-    };
-  };
-
-  // The target's component options for the row shown, its `{{row.X}}`
-  // tokens filled (`{{row.id}}` being the row's id); without a row (a bulk
-  // selection, a toolbar button) they are handed as declared.
-  const targetOptionsFor = (target: ActionTarget, row?: Data): Data => {
-    const { component } = target as { component?: ComponentInfo<Data> };
-    const id = rowIdOf(row);
-    const tokens = row && id !== undefined ? { ...row, id } : row;
-    const declared = component?.options ?? {};
-    const options = tokens ? fillRowOptions(declared, tokens) : declared;
-    const children = component?.children;
-    if (!component?.componentName || !children?.length) return options;
-    // The container's children read the row through the same tokens.
-    const targetTree: ResolvedComponentInfo = {
-      id: component.componentName,
-      component: resolveTargetComponent(component.componentName),
-      componentName: component.componentName,
-      children: resolveComponentChildren(
-        tokens ? fillRowChildren(children, tokens) : children,
-      ),
-    };
-    return { ...options, targetTree };
-  };
-
-  const rowRecorder = (deepLink?: boolean) => {
-    const recordId = recordRecorder(deepLink);
-    return (row?: Data): void => recordId(rowIdOf(row));
-  };
-
-  // The header names the open row when the target words it from its fields.
-  const rowTitleOf = (target: RowTarget, row?: Data) =>
-    row && target.rowTitle
-      ? resolveConfirmText(target.rowTitle, row, t as ConfirmTranslate)
-      : undefined;
-
-  const notFoundOf = (target: RowTarget) => ({
-    title: processI18n(target.notFound?.title || `$${NOT_FOUND_TITLE_KEY}`),
-    description: processI18n(
-      target.notFound?.description || `$${NOT_FOUND_DESCRIPTION_KEY}`,
-    ),
+  const fetchRaw = useAuthFetch().$authFetch.raw;
+  const requests = createActionRequests(config, {
+    toast,
+    processI18n,
+    processApiMessage,
+    handleApiError,
+    t,
+    copyToClipboard,
+    fetchRaw,
   });
-
-  const ownerKey = rowSidePanelOwnerKey(config.pageId, config.componentId);
-
-  // The panel belongs to the table that opened it: it closes with it.
-  if (getCurrentScope()) onScopeDispose(() => closeRowSidePanelOf(ownerKey));
-
-  // A side panel opened on a listed row steps through the rows shown in place
-  // (the panel computes its position); a deep-linked one keeps the row in the
-  // URL while it is open. A bulk action's panel receives the selection.
-  const handleSidePanelTarget = (run: SidePanelTargetRun) => {
-    const componentName = run.target.component?.componentName;
-    if (!componentName) return;
-    const session = Symbol(componentName);
-    const recordId = recordRecorder(
-      run.deepLink && (!run.selection || run.keepsRow),
-    );
-    const panel = {
-      session,
-      ownerKey,
-      title: run.title,
-      positionLabel: run.target.positionLabel,
-      component: targetComponentOf(componentName, run.target.component),
-      componentOptions: {
-        pageId: config.pageId,
-        componentId: config.componentId,
-        containerId: run.containerId,
-        selection: run.selection,
-        showRow: rowShower(
-          whileShown(session, showRow),
-          whileShown(session, showMissing),
-        ),
-        onSuccessCallback: () => {
-          closeRowSidePanel(session);
-          config.refreshCallback?.();
-        },
-      },
-      onClose: () => recordId(undefined),
-    };
-    function showRow(row?: Data) {
-      openRowSidePanel({
-        ...panel,
-        componentOptions: {
-          ...targetOptionsFor(run.target, row),
-          ...panel.componentOptions,
-        },
-        rowTitle: rowTitleOf(run.target, row),
-        row,
-        rowKey: rowIdOf(row),
-        source: row ? config.rowNavigation : undefined,
-        // A step that loads a page first lands after it: not on a panel
-        // closed or replaced meanwhile.
-        showRow: whileShown(session, showRow),
-      });
-      recordId(rowIdOf(row));
-    }
-    function showMissing(id: string) {
-      openRowSidePanel({
-        ...panel,
-        componentOptions: {
-          ...targetOptionsFor(run.target),
-          ...panel.componentOptions,
-        },
-        notFound: notFoundOf(run.target),
-        showRow,
-      });
-      recordId(id);
-    }
-    if (run.missingId) return showMissing(run.missingId);
-    showRow(run.rowData);
-  };
-
-  // A container opened on a listed row steps through the rows shown (its
-  // `navigation` prop, J and K), mounting its component anew on each; a
-  // deep-linked one keeps the row in the URL while it is open.
-  const handleComponentTarget = (run: ComponentTargetRun) => {
-    const componentName = run.target.component?.componentName;
-    if (!componentName) return;
-    if (run.missingId) return showMissingInDrawer(run, run.missingId);
-    const component = targetComponentOf(componentName, run.target.component);
-    const source = config.rowNavigation;
-    const drawerTarget = run.target.type === "drawer" ? run.target : undefined;
-    const withRowHeader = hasRowHeader(run.target) && !run.selection;
-    let instance: ContainerInstance | undefined;
-    let navigation: RowNavigation | undefined;
-    let stopNavigation: (() => void) | undefined;
-    // Set once the container closes: a row read that resolves later neither
-    // writes `?record=` back nor patches the closed container.
-    let closed = false;
-    const showRowOpen = (row: Data) => {
-      if (!closed) showRow(row);
-    };
-    const showRowById = rowShower(showRowOpen);
-    // The position and the steps follow the table (a reload, live rows, the
-    // row located past the page loaded): the open container is patched with
-    // them.
-    const trackNavigation = (row?: Data) => {
-      stopNavigation?.();
-      stopNavigation = undefined;
-      navigation = undefined;
-      if (!row || !source) return;
-      // The first navigation goes out with the row's own options.
-      let isShowing = true;
-      // A step that loads a page first lands after it, maybe closed by then.
-      stopNavigation = trackRowNavigation(source, row, showRowOpen, (next) => {
-        navigation = next;
-        if (isShowing || !instance || closed) return;
-        instance.patch({
-          componentOptions: optionsOf(row),
-          ...(withRowHeader && { headerComponentOptions: headerFor(row) }),
-        });
-      });
-      isShowing = false;
-    };
-    const optionsFor = (row?: Data) => {
-      trackNavigation(row);
-      return optionsOf(row);
-    };
-    const optionsOf = (row?: Data) => {
-      return {
-        ...targetOptionsFor(run.target, row),
-        pageId: config.pageId,
-        componentId: config.componentId,
-        containerId: run.containerId,
-        rowData: row,
-        navigation,
-        showRow: showRowById,
-        selection: run.selection,
-        onSuccessCallback: () => {
-          instance?.close();
-          config.refreshCallback?.();
-        },
-      };
-    };
-    // A drawer words its title from the row (`rowTitle`); with the row
-    // header, the DMS draws it with the position and previous / next. Read
-    // after `optionsFor`, which sets the row's navigation.
-    const titleFor = (row?: Data) =>
-      (drawerTarget && rowTitleOf(drawerTarget, row)) || run.title;
-    const headerFor = (row?: Data) =>
-      withRowHeader
-        ? drawerRowHeaderProps(
-            { positionLabel: drawerTarget?.positionLabel, navigation },
-            titleFor(row),
-          )
-        : undefined;
-    const recordRow = rowRecorder(run.deepLink);
-    function showRow(row: Data) {
-      const componentOptions = optionsFor(row);
-      instance?.patch({
-        title: titleFor(row),
-        componentOptions,
-        componentKey: rowIdOf(row),
-        ...(withRowHeader && { headerComponentOptions: headerFor(row) }),
-      });
-      recordRow(row);
-    }
-    const componentOptions = optionsFor(run.rowData);
-    instance = openContainer(run, component, {
-      title: titleFor(run.rowData),
-      componentOptions,
-      headerComponentOptions: headerFor(run.rowData),
-    });
-    recordRow(run.rowData);
-    // `showRow` may move an unlisted row's container onto a listed one.
-    const stopSteps = source ? listenRowSteps(() => navigation) : undefined;
-    const settle = () => {
-      closed = true;
-      stopSteps?.();
-      stopNavigation?.();
-      recordRow(undefined);
-    };
-    instance.result.then(settle, settle);
-  };
-
-  // A drawer opened on a row its link names but its route answered 404 for:
-  // under its title, the state in place of the component, a close button.
-  // Closing it removes the link, as closing it on a row does.
-  function showMissingInDrawer(run: ComponentTargetRun, id: string): void {
-    if (run.target.type !== "drawer") return;
-    const recordId = recordRecorder(run.deepLink);
-    let instance: ContainerInstance | undefined;
-    const notFound = notFoundOf(run.target);
-    instance = openContainer(run, DmsRowNotFound, {
-      title: run.title,
-      componentOptions: { ...notFound, onClose: () => instance?.close() },
-    });
-    recordId(id);
-    const settle = () => recordId(undefined);
-    instance.result.then(settle, settle);
-  }
-
-  type TargetHandler = (
-    target: ActionTarget,
-    label: string,
-    rowData?: Data,
-    extras?: TargetRunExtras,
-  ) => Promise<void> | void;
-
-  // A drawer or modal: a bulk action hands it the selection, not a row.
-  const componentHandler: TargetHandler = (target, label, rowData, extras) =>
-    handleComponentTarget({
-      target: target as ActionTarget & { type: "modal" | "drawer" },
-      title: processI18n((target as { title?: string }).title || label),
-      description: processI18n(
-        (target as { description?: string }).description || "",
-      ),
-      containerId: `${config.pageId}-${config.componentId}-${target.type}`,
-      rowData: extras?.selection && !extras.keepsRow ? undefined : rowData,
-      ...extras,
-    });
-
-  const sidePanelHandler: TargetHandler = (target, label, rowData, extras) =>
-    handleSidePanelTarget({
-      target: target as SidePanelTarget,
-      title: processI18n((target as SidePanelTarget).title || label),
-      containerId: `${config.pageId}-${config.componentId}-${target.type}`,
-      rowData: extras?.selection && !extras.keepsRow ? undefined : rowData,
-      ...extras,
-    });
-
-  const targetHandlers: Record<string, TargetHandler> = {
-    page: (target, _label, rowData) => {
-      const pageTarget = target as ActionTarget & { type: "page" };
-      navigateDms(targetUrl(pageTarget.url, rowData));
-    },
-    external: (target, _label, rowData) => {
-      const externalTarget = target as ActionTarget & { type: "external" };
-      const url = targetUrl(externalTarget.url, rowData);
-      if (typeof window === "undefined" || !url) return;
-      if (externalTarget.newTab) {
-        window.open(url, "_blank", "noopener,noreferrer");
-        return;
-      }
-      window.location.href = url;
-    },
-    api: async (target, label, rowData, extras) => {
-      const apiTarget = target as ActionTarget & { type: "api" };
-      const url = targetUrl(apiTarget.url, rowData);
-      await handleApiTarget(apiTarget, url, label, rowData, extras?.selection);
-    },
-    exportJob: async (target, _label, rowData) => {
-      const jobTarget = target as ActionTarget & { type: "exportJob" };
-      const url = targetUrl(jobTarget.url, rowData);
-      await handleExportJobTarget(jobTarget, url, rowData);
-    },
-    download: (target, label, rowData) =>
-      handleDownloadTarget(target as DownloadTarget, label, rowData),
-    modal: componentHandler,
-    // Runs the quick action as the command palette does; one the user is not
-    // served runs nothing.
-    quickAction: (target) => {
-      const { id } = target as ActionTarget & { type: "quickAction" };
-      const quickAction = findServedQuickAction(
-        useSiteLayout().quickActions.value?.actions,
-        id,
-      );
-      if (quickAction) dispatchQuickActionTarget(quickAction.target);
-    },
-    drawer: componentHandler,
-    sidePanel: sidePanelHandler,
-  };
-
-  // A target making a request runs it from inside its confirmation, which
-  // shows a refusal (under its field when it names one) and stays open; any
-  // other runs once confirmed.
-  const confirmedRuns: Partial<
-    Record<
-      ActionTarget["type"],
-      (
-        target: ActionTarget,
-        rowData?: Data,
-        extras?: TargetRunExtras,
-      ) => ConfirmedRun
-    >
-  > = {
-    api: (target, rowData, extras) => (values) => {
-      const apiTarget = target as ActionTarget & { type: "api" };
-      return requestApiTarget(
-        apiTarget,
-        targetUrl(apiTarget.url, rowData),
-        rowData,
-        values,
-        extras?.selection,
-      );
-    },
-  };
-
-  // `{{row.id}}` of a confirmation's `from` URL, when the row carries an id.
-  const rowUrlParams = (rowData?: Data) => {
-    const id = rowData
-      ? get(rowData, config.rowIdKey ?? DEFAULT_ROW_ID_KEY)
-      : undefined;
-    return id === undefined || id === null ? undefined : { id };
-  };
-
-  /**
-   * Runs an action's target, after its confirmation when it declares one.
-   * On a row action, the dialog's texts take the row's fields as parameters
-   * ("Make {name} an owner?").
-   */
-  const handleActionTarget = async (
-    target: ActionTarget,
-    label: string,
-    rowData?: Data,
-    declared?: ActionConfirm,
-    extras?: TargetRunExtras,
-  ) => {
-    const handler = targetHandlers[target.type];
-    if (!handler) return;
-    if (!declared) {
-      await handler(target, label, rowData, extras);
-      return;
-    }
-    const runInside = confirmedRuns[target.type]?.(target, rowData, extras);
-    const isConfirmed = await confirmAction(declared, {
-      row: extras?.textParams ? { ...rowData, ...extras.textParams } : rowData,
-      urlParams: rowUrlParams(rowData),
-      run: runInside,
-    });
-    if (isConfirmed && !runInside) {
-      await handler(target, label, rowData, extras);
-    }
-  };
-
-  // Reached for a disabled button only through a quick action, which presses
-  // it by id: the reason is told instead of the target being opened.
-  const handleCustomButton = (button: CustomButton) => {
-    if (button.disabled) {
-      toast.add({
-        color: Color.warning,
-        title: processI18n(button.label),
-        description: button.disabledReason
-          ? processI18n(button.disabledReason)
-          : undefined,
-      });
-      return;
-    }
-    void handleActionTarget(
-      button.target,
-      button.label,
-      undefined,
-      button.confirm,
-    );
-  };
-
-  // A bulk action offered on a row runs on that row as the selection bar runs
-  // on several: a URL target, and a `from` confirmation, carry `?ids=<id>` —
-  // unless the URL names the row itself (`{{row._id}}`), which fills it.
-  const rowRun = (action: CustomRowAction, rowData?: Data) => {
-    const id = rowIdOf(rowData);
-    if (!isBulkAction(action) || id === undefined) {
-      return { target: action.target, confirm: action.confirm, row: rowData };
-    }
-    const selection: BulkSelection = { ids: [id], count: 1 };
-    const query = bulkSelectionQuery(selection);
-    const { confirm } = action;
-    // Its texts count one row, as the bar's count the selection ("Resolve
-    // this ticket?"): its dialog, and the toast of a URL target. A drawer,
-    // modal or side panel receives the row as it is, and the selection of
-    // that row as from the bar.
-    const textParams = { count: selection.count };
-    return {
-      target: targetForRow(action.target, query),
-      textParams,
-      selection: isUrlTarget(action.target) ? undefined : selection,
-      row: isUrlTarget(action.target) ? { ...rowData, ...textParams } : rowData,
-      confirm:
-        confirm && isConfirmFrom(confirm) && !namesRowField(confirm.from)
-          ? { from: withQuery(confirm.from, query) }
-          : confirm,
-    };
-  };
-
-  const handleCustomRowAction = (action: CustomRowAction, rowData?: Data) => {
-    const { target, confirm, row, textParams, selection } = rowRun(
-      action,
-      rowData,
-    );
-    void handleActionTarget(target, action.label, row, confirm, {
-      deepLink: isDeepLinkAction(action),
-      textParams,
-      selection,
-      keepsRow: !!selection,
-    });
-  };
-
-  /**
-   * Runs a bulk custom action on the selection: a URL target carries the
-   * ids (or the filters of "Select all N matching") in its query, a drawer
-   * or modal receives `selection`, and the texts receive `{ count }`.
-   */
-  const handleBulkCustomAction = (
-    action: CustomRowAction,
-    selection: BulkSelection,
-  ) => {
-    const query = bulkSelectionQuery(selection);
-    const declared =
-      action.confirm && isConfirmFrom(action.confirm)
-        ? { from: withQuery(dropRowTokens(action.confirm.from), query) }
-        : action.confirm;
-    void handleActionTarget(
-      targetWithSelection(action.target, query),
-      action.label,
-      { count: selection.count },
-      declared,
-      { selection },
-    );
-  };
-
-  /**
-   * Opens a side panel action, or a drawer wording its `notFound` state, on a
-   * row its link names but its route answered 404 for: the container says the
-   * row is gone, and closing it removes the link. Another target opens
-   * nothing: no row, no container.
-   */
-  const handleMissingRow = (action: CustomRowAction, id: string) => {
-    if (!hasMissingRowState(action)) return;
-    if (action.target.type === "drawer") {
-      handleComponentTarget({
-        target: action.target,
-        title: processI18n(action.target.title || action.label),
-        description: processI18n(action.target.description || ""),
-        containerId: `${config.pageId}-${config.componentId}-${action.target.type}`,
-        deepLink: isDeepLinkAction(action),
-        missingId: id,
-      });
-      return;
-    }
-    if (action.target.type !== "sidePanel") return;
-    handleSidePanelTarget({
-      target: action.target,
-      title: processI18n(action.target.title || action.label),
-      containerId: `${config.pageId}-${config.componentId}-${action.target.type}`,
-      deepLink: isDeepLinkAction(action),
-      missingId: id,
-    });
-  };
-
+  const handleExportJobTarget = createExportJobHandler(
+    runExportJob,
+    processI18n,
+  );
+  const rows = createTargetRows(config);
+  const texts = createRowTexts(processI18n, t);
+  const openContainer = createContainerOpener(config, openModal, openDrawer);
+  const componentContext = { config, rows, texts, openContainer };
+  const handleSidePanelTarget = createSidePanelHandler(config, rows, texts);
+  const targetHandlers = createTargetHandlers({
+    config,
+    processI18n,
+    componentContext,
+    handleSidePanelTarget,
+    requests,
+    handleExportJobTarget,
+  });
+  const handleActionTarget = createActionTargetRunner(
+    targetHandlers,
+    requests.requestApiTarget,
+    confirmAction,
+    rows.rowUrlParams,
+  );
+  const { handleCustomButton, handleCustomRowAction, handleBulkCustomAction } =
+    createCustomActions(handleActionTarget, rows.rowIdOf, toast, processI18n);
+  const handleMissingRow = createMissingRowHandler(
+    config,
+    processI18n,
+    componentContext,
+    handleSidePanelTarget,
+  );
   return {
     handleCustomButton,
     handleCustomRowAction,