feat: entry and exit action icons

src/components/flow-graph/flow-item-list/index.tsx

@@ -1,11 +1,11 @@
 import {
   DrawableFlow,
   FlowItemIdentifier,
+  FlowItem,
   getMetadata,
 } from "../../../flow-utils";
 import { FlowItemIcon } from "../../flow-items";
 import styles from "./flow-item-list.module.css";
-import { FlowItem } from "../../../transformers/types";
 import { RiAddCircleLine, RiDeleteBinLine } from "react-icons/ri";
 import { IconButton } from "../../icon-button";
 import { useModal } from "../../../hooks/use-modal";

src/components/flow-graph/index.tsx

@@ -21,7 +21,7 @@ import { usePanAndZoom } from "./use-pan-and-zoom";
 import { TransitionNode } from "./transition-node";
 import { TransitionsView } from "./transitions-view";
 import { usePosition } from "../../hooks/use-position";
-import { FlowItem } from "../../transformers/types";
+import { FlowItem } from "../../flow-utils";
 
 const getElk = (() => {
   let elk: iELK | undefined;

src/components/flow-graph/state-node/index.tsx

@@ -113,13 +113,20 @@ export const StateNode = ({
   );
 
   const flowItems = state.entryActions
-    .concat(state.exitActions)
     .map(
       (action): FlowItemIdentifier => ({
         flowItemId: action,
-        flowItemType: "action",
+        flowItemType: "entry-action",
       })
     )
+    .concat(
+      state.exitActions.map(
+        (action): FlowItemIdentifier => ({
+          flowItemId: action,
+          flowItemType: "exit-action",
+        })
+      )
+    )
     .concat(
       state.assertions.map((assertion) => ({
         flowItemId: assertion,

src/components/flow-graph/types.ts

@@ -1,6 +1,5 @@
 import * as schema from "../../schema";
-import { FlowItem } from "../../transformers/types";
-import { DrawableFlow, FlowItemIdentifier } from "../../flow-utils";
+import { DrawableFlow, FlowItemIdentifier, FlowItem } from "../../flow-utils";
 
 export type Editable = {
   getAvailableStates: () => Array<{ id: schema.StateId; name: string }>;

src/components/flow-items/flow-icon.module.css

@@ -27,6 +27,38 @@
   border: none;
 }
 
+.entryAction {
+  composes: flowItemIcon;
+  background-color: var(--action-background-color);
+  border: 1px solid var(--action-border-color);
+  background-image: url(./entry-action.svg);
+}
+
+.entryAction.filled {
+  background-image: url(./entry-action.svg);
+}
+
+.entryAction.transparent {
+  background-color: transparent;
+  border: none;
+}
+
+.exitAction {
+  composes: flowItemIcon;
+  background-color: var(--action-background-color);
+  border: 1px solid var(--action-border-color);
+  background-image: url(./exit-action.svg);
+}
+
+.exitAction.filled {
+  background-image: url(./exit-action.svg);
+}
+
+.exitAction.transparent {
+  background-color: transparent;
+  border: none;
+}
+
 .assertion {
   composes: flowItemIcon;
   background-color: var(--expectation-background-color);

src/components/flow-items/index.tsx

@@ -29,6 +29,10 @@ export const flowItemIconComponentForType = (
   switch (flowItemType) {
     case "action":
       return ActionIcon;
+    case "entry-action":
+      return EntryActionIcon;
+    case "exit-action":
+      return ExitActionIcon;
     case "assertion":
       return AssertionIcon;
     case "condition":
@@ -64,6 +68,36 @@ export const ActionIcon = ({ className, transparent, filled }: IconProps) => {
   );
 };
 
+export const EntryActionIcon = ({
+  className,
+  transparent,
+  filled,
+}: IconProps) => {
+  return (
+    <span
+      title={flowItemTypePresentation.action.title}
+      className={`${styles.entryAction} ${
+        transparent ? styles.transparent : ""
+      } ${className ?? ""} ${filled ? styles.filled : ""}`}
+    ></span>
+  );
+};
+
+export const ExitActionIcon = ({
+  className,
+  transparent,
+  filled,
+}: IconProps) => {
+  return (
+    <span
+      title={flowItemTypePresentation.action.title}
+      className={`${styles.exitAction} ${
+        transparent ? styles.transparent : ""
+      } ${className ?? ""} ${filled ? styles.filled : ""}`}
+    ></span>
+  );
+};
+
 export const AssertionIcon = ({
   className,
   transparent,

src/data/flows.ts

@@ -19,6 +19,14 @@ export const flowItemTypePresentation: Record<
     title: "Action",
     groupTitle: "Actions",
   },
+  "entry-action": {
+    title: "Entry action",
+    groupTitle: "Entry actions",
+  },
+  "exit-action": {
+    title: "Exit action",
+    groupTitle: "Exit actions",
+  },
   assertion: {
     title: "Expectation",
     groupTitle: "Expectations",

src/flow-utils/index.ts

@@ -22,6 +22,16 @@ export const flowItemSchema = z.discriminatedUnion("flowItemType", [
     flowItemId: schema.actionIdSchema,
     flowItemName: z.string(),
   }),
+  z.object({
+    flowItemType: z.literal("entry-action"),
+    flowItemId: schema.actionIdSchema,
+    flowItemName: z.string(),
+  }),
+  z.object({
+    flowItemType: z.literal("exit-action"),
+    flowItemId: schema.actionIdSchema,
+    flowItemName: z.string(),
+  }),
   z.object({
     flowItemType: z.literal("assertion"),
     flowItemId: schema.assertionIdSchema,
@@ -190,6 +200,8 @@ export const getMetadata = (
 ) => {
   switch (flowItem.flowItemType) {
     case "action":
+    case "entry-action":
+    case "exit-action":
       return flow.metadata.actions[flowItem.flowItemId];
     case "assertion":
       return flow.metadata.assertions[flowItem.flowItemId];

src/schema.ts

@@ -86,6 +86,8 @@ export const flowItemTypeSchema = z.enum([
   "event",
   "condition",
   "action",
+  "entry-action",
+  "exit-action",
   "assertion",
 ]);
 export type FlowItemType = z.infer<typeof flowItemTypeSchema>;
@@ -107,6 +109,14 @@ export const flowItemRefSchema = z.discriminatedUnion("type", [
     type: z.literal("action"),
     id: actionIdSchema,
   }),
+  z.object({
+    type: z.literal("entry-action"),
+    id: actionIdSchema,
+  }),
+  z.object({
+    type: z.literal("exit-action"),
+    id: actionIdSchema,
+  }),
   z.object({
     type: z.literal("assertion"),
     id: assertionIdSchema,