Workflow Widget - Create Element

Learn how to create the workflow widget and understand how it fits into the system.

When creating a new branch, updating a branch, or adding a node to an existing one, a sidebar will appear to collect the required information. This sidebar is called a widget, and we need to create the types for the widgets that the new element will use.

We'll create the types in the following file, as shown below:

// src/shared/kits/workflow/mvc/model/workflow/widget/element-type/parallel.ts

import type { ParallelFlow } from "../../flow";

export type ParallelWidget =
  | ParallelCreateBranchWidget
  | ParallelBranchInfoWidget
  | ParallelAddBranchWidget;

export interface ParallelCreateBranchWidget {
  type: "elementType";
  elementType: "parallel";
  widget: "createBranch";
  element: ParallelFlow;
}

export interface ParallelBranchInfoWidget {
  type: "elementType";
  elementType: "parallel";
  widget: "branchInfo";
  element: ParallelFlow;
  branch: number;
}

export interface ParallelAddBranchWidget {
  type: "elementType";
  elementType: "parallel";
  widget: "addBranch";
  element: ParallelFlow;
  branch: number;
}

Then, we'll update the following file to ensure that the ParallelWidget is properly added to the ElementTypeWidget union and the types are exported:

// src/shared/kits/workflow/mvc/model/workflow/widget/element-type/index.ts

import type { ActionWidget, ActionInfoWidget } from "./action";

import type {
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
} from "./condition";

import type {
  SwitchWidget,
  SwitchCreateBranchWidget,
  SwitchBranchInfoWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
} from "./switch";

import type { LoopWidget, LoopInfoWidget, LoopAddIntoWidget } from "./loop";

import type {
  ParallelWidget,
  ParallelCreateBranchWidget,
  ParallelBranchInfoWidget,
  ParallelAddBranchWidget,
} from "./parallel";

export type ElementTypeWidget =
  | ActionWidget
  | ConditionWidget
  | SwitchWidget
  | LoopWidget
  | ParallelWidget;

export type { ActionWidget, ActionInfoWidget };

export type {
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
};

export type {
  SwitchWidget,
  SwitchCreateBranchWidget,
  SwitchBranchInfoWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
};

export type { LoopWidget, LoopInfoWidget, LoopAddIntoWidget };

export type {
  ParallelWidget,
  ParallelCreateBranchWidget,
  ParallelBranchInfoWidget,
  ParallelAddBranchWidget,
};

We'll also update the following file to export the types we created:

// src/shared/kits/workflow/mvc/model/workflow/widget/index.ts

import type {
  GlobalWidget,
  StartInfoWidget,
  EndInfoWidget,
  AddTopWidget,
} from "./global";

import type { ElementWidget, ElementAddNextWidget } from "./element";

import type {
  ElementTypeWidget,
  ActionWidget,
  ActionInfoWidget,
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
  SwitchWidget,
  SwitchCreateBranchWidget,
  SwitchBranchInfoWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
  LoopWidget,
  LoopInfoWidget,
  LoopAddIntoWidget,
  ParallelWidget,
  ParallelCreateBranchWidget,
  ParallelBranchInfoWidget,
  ParallelAddBranchWidget,
} from "./element-type";

export type Widget = GlobalWidget | ElementWidget | ElementTypeWidget;

export type { GlobalWidget, StartInfoWidget, EndInfoWidget, AddTopWidget };

export type { ElementWidget, ElementAddNextWidget };

export type {
  ElementTypeWidget,
  ActionWidget,
  ActionInfoWidget,
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
  SwitchWidget,
  SwitchCreateBranchWidget,
  SwitchBranchInfoWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
  LoopWidget,
  LoopInfoWidget,
  LoopAddIntoWidget,
  ParallelWidget,
  ParallelCreateBranchWidget,
  ParallelBranchInfoWidget,
  ParallelAddBranchWidget,
};

We'll also update the following file to export the types we created:

// src/shared/kits/workflow/mvc/model/workflow/index.ts

import type {
  WorkflowFlow,
  ElementFlow,
  ActionFlow,
  ConditionFlow,
  SwitchFlow,
  LoopFlow,
  ParallelFlow,
} from "./flow";

import type {
  Widget,
  GlobalWidget,
  StartInfoWidget,
  EndInfoWidget,
  AddTopWidget,
  ElementWidget,
  ElementAddNextWidget,
  ElementTypeWidget,
  ActionWidget,
  ActionInfoWidget,
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
  SwitchWidget,
  SwitchBranchInfoWidget,
  SwitchCreateBranchWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
  LoopWidget,
  LoopInfoWidget,
  LoopAddIntoWidget,
  ParallelWidget,
  ParallelCreateBranchWidget,
  ParallelBranchInfoWidget,
  ParallelAddBranchWidget,
} from "./widget";

import type {
  Failure,
  StartFailure,
  AddTopFailure,
  EndFailure,
  ElementFailure,
  ActionFailure,
  ConditionFailure,
  SwitchFailure,
  LoopFailure,
} from "./failure";

export interface Workflow {
  flow: WorkflowFlow;
  widget: Widget | null;
  active: string | null; // String that identifies the active selection.
  failure: Failure | null; // Failure that occurred in the workflow.
}

export type {
  WorkflowFlow,
  ElementFlow,
  ActionFlow,
  ConditionFlow,
  SwitchFlow,
  LoopFlow,
  ParallelFlow,
};

export type {
  Widget,
  GlobalWidget,
  StartInfoWidget,
  EndInfoWidget,
  AddTopWidget,
  ElementWidget,
  ElementAddNextWidget,
  ElementTypeWidget,
  ActionWidget,
  ActionInfoWidget,
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
  SwitchWidget,
  SwitchBranchInfoWidget,
  SwitchCreateBranchWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
  LoopWidget,
  LoopInfoWidget,
  LoopAddIntoWidget,
  ParallelWidget,
  ParallelCreateBranchWidget,
  ParallelBranchInfoWidget,
  ParallelAddBranchWidget,
};

export type {
  Failure,
  StartFailure,
  AddTopFailure,
  EndFailure,
  ElementFailure,
  ActionFailure,
  ConditionFailure,
  SwitchFailure,
  LoopFailure,
};