From 0c555f21f101dfe97215b8291ea8dd6d4300b962 Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Thu, 9 Jul 2026 23:47:07 -0700
Subject: [PATCH 1/2] Timeline: add Dependabot assignment and Copilot work
timeline events
---
.../Timeline.dependabot.features.stories.tsx | 175 ++++++++++++++++++
1 file changed, 175 insertions(+)
diff --git a/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx b/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx
index a02d6b8a7c4..b1ed7f70549 100644
--- a/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx
@@ -5,7 +5,10 @@ import Timeline from './Timeline'
import {
CheckIcon,
CommentIcon,
+ GitBranchIcon,
NoteIcon,
+ PersonIcon,
+ RepoPushIcon,
ShieldCheckIcon,
ShieldIcon,
ShieldSlashIcon,
@@ -77,6 +80,12 @@ import {
// public dependabot[bot] avatar (square Dependabot logo) for Storybook.
const DEPENDABOT_AVATAR = 'https://avatars.githubusercontent.com/u/27347476?v=4'
+// User avatars for the assignment actor + assignee examples. `six7` / `hubot`
+// are the same public fixtures the Secret scanning assignment story uses, so the
+// two surfaces read consistently.
+const SIX7_AVATAR = 'https://avatars.githubusercontent.com/u/4548309?v=4'
+const HUBOT_AVATAR = 'https://avatars.githubusercontent.com/u/480938?v=4'
+
/**
* Dependabot actor — `DependabotAlerts::TimelineItems::ActorComponent` in
* `:dependabot` mode (`actor_component.html.erb`):
@@ -624,3 +633,169 @@ export const EventDismissalRequest = () => (
)
+
+/**
+ * The Assignment event group — `AssignmentComponent`
+ * (`assignment_items/assignment_component.{rb,html.erb}`).
+ *
+ * Source: `DependabotAlerts::TimelineItems::AssignmentComponent`. Badge:
+ * `person` icon on the PLAIN DEFAULT badge (subtle gray circle) — the ERB
+ * renders `with_badge(icon: :person)` with NO `bg:`/`color:` override. The actor
+ * AND the assignee are each rendered with an avatar via `ActorComponent` (our
+ * `UserActor`), matching the rest of this Dependabot surface (linked + muted).
+ *
+ * COPY: `action_text` keys off `self_assignment?` (`actor.id == assignee.id`):
+ * a self-action collapses to `self-assigned this` (assigned) / `removed their
+ * assignment` (unassigned) with NO trailing assignee; otherwise the body is the
+ * bare action word (`assigned` / `unassigned`) followed by the assignee actor.
+ * The five variants mirror the Secret scanning assignment story: self-assign,
+ * assign another, self-unassign, unassign another, and a combined assign +
+ * unassign example.
+ */
+export const EventAssignment = () => (
+
+ {/* Self-assigned — actor === assignee (`self_assignment?`) */}
+
+
+
+
+
+
+
+
+ {'self-assigned this '}
+
+
+
+
+
+
+ {/* Assigned someone else — both actor + assignee avatars */}
+
+
+
+
+
+
+
+
+ {'assigned '}
+ {' '}
+
+
+
+
+
+
+ {/* Self-unassigned — actor removed their own assignment */}
+
+
+
+
+
+
+
+
+ {'removed their assignment '}
+
+
+
+
+
+
+ {/* Unassigned someone else */}
+
+
+
+
+
+
+
+
+ {'unassigned '}
+ {' '}
+
+
+
+
+
+
+ {/* Assigned one user and unassigned another in a single event */}
+
+
+
+
+
+
+
+
+ {'assigned '}
+
+ {' and unassigned '}
+ {' '}
+
+
+
+
+
+
+)
+
+/**
+ * The Copilot work event group — `CopilotWorkStartedComponent` /
+ * `CopilotWorkFinishedComponent` (`copilot_work_started_component.{rb,html.erb}`
+ * and `copilot_work_finished_component.{rb,html.erb}`).
+ *
+ * These events surface when a Dependabot alert is assigned to Copilot. In both,
+ * `Copilot` is BOLD PLAIN TEXT (a ``, NOT a link or avatar), followed by
+ * `started`/`finished` `work on behalf of` the human {actor} (an `ActorComponent`
+ * → our linked + muted `UserActor`) and the past `RelativeTime`.
+ *
+ * - Work started (`with_badge(icon: "git-branch")`): default (gray) badge. When
+ * `session_url` is present the ERB also renders a right-floated small anchor
+ * `Button` ("View session"). We place that in the `Timeline.Actions` slot —
+ * the same right-controls convention as the Dismissal request "Review request"
+ * button above.
+ * - Work finished (`with_badge(icon: "repo-push")`): default (gray) badge, no
+ * right control.
+ */
+export const EventCopilotWork = () => (
+
+ {/* Work started — git-branch badge + optional "View session" right control */}
+
+
+
+
+
+
+
+ Copilot
+ {' started work on behalf of '}
+
+
+
+
+
+
+
+
+
+ {/* Work finished — repo-push badge, no right control */}
+
+
+
+
+
+
+
+ Copilot
+ {' finished work on behalf of '}
+
+
+
+
+
+
+)
From a634ea10b0bffe26bb23f0d73e52f2286ce5c59e Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Fri, 10 Jul 2026 00:16:03 -0700
Subject: [PATCH 2/2] Timeline: align assignment doc-comment source path with
timeline_items
---
.../react/src/Timeline/Timeline.dependabot.features.stories.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx b/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx
index b1ed7f70549..7768c168dff 100644
--- a/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx
@@ -636,7 +636,7 @@ export const EventDismissalRequest = () => (
/**
* The Assignment event group — `AssignmentComponent`
- * (`assignment_items/assignment_component.{rb,html.erb}`).
+ * (`timeline_items/assignment_component.{rb,html.erb}`).
*
* Source: `DependabotAlerts::TimelineItems::AssignmentComponent`. Badge:
* `person` icon on the PLAIN DEFAULT badge (subtle gray circle) — the ERB