Skip to content

Timeline: tag Secret Scanning event stories with taxonomy data-* attributes #8220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
janmaarten-a11y wants to merge 1 commit into from
+98 −25
Closed

Timeline: tag Secret Scanning event stories with taxonomy data-* attributes #8220

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 98 additions & 25 deletions packages/react/src/Timeline/Timeline.secret-scanning.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ import {
import {Button} from '../Button'
import Octicon from '../Octicon'
import {EventSubRow, MutedTime, RealisticTimeline, UserActor, VariantSection} from './internal/timelineStoryHelpers'
import {
actorTypeForLogin,
SECRET_SCANNING_TAXONOMY,
toEventDataAttributes,
type SecretScanningEventType,
} from './taxonomy'

/**
* Secret Scanning alert Timeline event examples (Phase 2 of github/primer#6663).
Expand Down Expand Up @@ -53,10 +59,18 @@ import {EventSubRow, MutedTime, RealisticTimeline, UserActor, VariantSection} fr
* base `Timeline` component's own stories, and any docs-site representation is a
* Phase 3 consideration via base-component story changes, out of scope here.
*
* FUTURE FILTERING (taxonomy still open — github/primer#6663): category
* `data-*` attributes (e.g. `data-event-category="created"`) will attach to each
* `Timeline.Item` below so stories can be filtered/grouped by event family. We
* intentionally do NOT add them yet to avoid baking in a taxonomy.
* EVENT TAXONOMY TAGGING (github/primer#6664, Phase 3): each cataloged
* `Timeline.Item` below carries the `data-*` event contract
* (`data-event-scope` / `data-event-type` / `data-event-category` /
* `data-event-visibility` / `data-actor-type`), projected from the shared
* `SECRET_SCANNING_TAXONOMY` catalog via `toEventDataAttributes`. This mirrors
* the License Compliance pilot (primer/react#8216) and consumes the merged
* taxonomy module (#8180) documented in github/primer#6888.
*
* The catalog was scoped to the five live `switch (event.type)` cases and is
* NARROWER than this story set, so MANY variants have no catalog leaf and are
* left UNTAGGED on purpose (each such item carries a comment explaining why).
* We tag ONLY the seven cataloged leaves and never invent a value.
*
* SLOT USAGE (Phase 1 slots — same convention as the Issues / Dependabot groups):
* - `Timeline.Avatar` (gutter slot, #6677): the 40px LEFT-GUTTER avatar.
Expand Down Expand Up @@ -97,6 +111,21 @@ import {EventSubRow, MutedTime, RealisticTimeline, UserActor, VariantSection} fr
const SIX7_AVATAR = 'https://avatars.githubusercontent.com/u/4548309?v=4'
const HUBOT_AVATAR = 'https://avatars.githubusercontent.com/u/480938?v=4'

// Projects a cataloged Secret Scanning leaf into the event `data-*` contract
// (github/primer#6664), same shape as the License Compliance pilot
// (primer/react#8216). `category` and `visibility` are read FROM the catalog so
// the story never re-declares the taxonomy; `login` is the actor rendered in the
// row, resolved to `data-actor-type` via `actorTypeForLogin`. Omit `login` for
// actor-less rows so no `data-actor-type` is emitted.
const secretScanningAttrs = (type: SecretScanningEventType, login?: string) =>
toEventDataAttributes({
scope: 'secret-scanning',
type,
category: SECRET_SCANNING_TAXONOMY[type].category,
visibility: SECRET_SCANNING_TAXONOMY[type].visibility,
actorType: login ? actorTypeForLogin(login) : undefined,
})

export default {
title: 'Components/Timeline/Events/Secret Scanning',
component: Timeline,
Expand Down Expand Up @@ -137,7 +166,12 @@ export const EventCreated = () => (
{/* Created — GitHub system actor, ShieldIcon on success (green) */}
<VariantSection label="Created">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `detected` leaf. Renders the GitHub SYSTEM-IDENTITY actor
(`<UserActor login="GitHub" …>`); GitHub is not in the bot set, so
actorTypeForLogin('GitHub') classifies it as 'user' -> data-actor-type='user'.
FLAGGED: whether a system identity should classify as user vs bot is
worth confirming (see report). */}
<Timeline.Item {...secretScanningAttrs('detected', 'GitHub')}>
<Timeline.Badge variant="success">
<Octicon icon={ShieldIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -177,7 +211,8 @@ export const EventResolution = () => (
badge. Shown WITH an optional resolution-comment sub-row. */}
<VariantSection label="Closed as revoked">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `closed` leaf (Resolution, any non-reopened resolution.type); user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge variant="done">
<Octicon icon={ShieldCheckIcon} />
</Timeline.Badge>
Expand All @@ -196,7 +231,8 @@ export const EventResolution = () => (
{/* Closed as false positive — gray (default) ShieldSlash badge. */}
<VariantSection label="Closed as false positive">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `closed` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={ShieldSlashIcon} />
</Timeline.Badge>
Expand All @@ -212,7 +248,8 @@ export const EventResolution = () => (
{/* Closed as won't fix */}
<VariantSection label="Closed as won't fix">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `closed` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={ShieldSlashIcon} />
</Timeline.Badge>
Expand All @@ -228,7 +265,8 @@ export const EventResolution = () => (
{/* Closed as used in tests */}
<VariantSection label="Closed as used in tests">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `closed` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={ShieldSlashIcon} />
</Timeline.Badge>
Expand All @@ -244,7 +282,8 @@ export const EventResolution = () => (
{/* Closed as pattern deleted */}
<VariantSection label="Closed as pattern deleted">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `closed` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={ShieldSlashIcon} />
</Timeline.Badge>
Expand All @@ -260,7 +299,8 @@ export const EventResolution = () => (
{/* Closed as pattern edited */}
<VariantSection label="Closed as pattern edited">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `closed` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={ShieldSlashIcon} />
</Timeline.Badge>
Expand All @@ -276,7 +316,8 @@ export const EventResolution = () => (
{/* Closed as ignored by configuration (resolution type `hidden_by_config`) */}
<VariantSection label="Closed as ignored by configuration">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `closed` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={ShieldSlashIcon} />
</Timeline.Badge>
Expand All @@ -297,7 +338,9 @@ export const EventResolution = () => (
placement rather than leaving the Break as a stray first child. */}
<VariantSection label="Reopened">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* Context row: a `closed` leaf preceding the reopen, tagged in place
like the seven dedicated "Closed as …" variants; user actor. */}
<Timeline.Item {...secretScanningAttrs('closed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={ShieldSlashIcon} />
</Timeline.Badge>
Expand All @@ -308,7 +351,8 @@ export const EventResolution = () => (
</Timeline.Body>
</Timeline.Item>
<Timeline.Break />
<Timeline.Item>
{/* `reopened` leaf (Resolution, resolution.type === 'reopened'); user actor. */}
<Timeline.Item {...secretScanningAttrs('reopened', 'monalisa')}>
<Timeline.Badge variant="success">
<Octicon icon={SyncIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -338,7 +382,8 @@ export const EventBypass = () => (
{/* Bypassed — AlertIcon, default (gray) badge */}
<VariantSection label="Bypassed push protection">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `bypassed` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('bypassed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={AlertIcon} />
</Timeline.Badge>
Expand All @@ -355,6 +400,9 @@ export const EventBypass = () => (
repo has delegated bypass enabled. */}
<VariantSection label="Bypass requested (delegated bypass enabled)">
<Timeline aria-label="Secret scanning alert timeline">
{/* UNTAGGED: the delegated-BYPASS request/approve flow has no catalog
leaf. The catalog's dismissal_requested / dismissal_reviewed cover the
delegated-CLOSURE flow, a different thing. No leaf -> no data-* tag. */}
<Timeline.Item>
<Timeline.Badge>
<Octicon icon={CommentIcon} />
Expand All @@ -371,6 +419,8 @@ export const EventBypass = () => (
{/* Bypass approved — CheckCircleIcon. Delegated bypass: gated as above. */}
<VariantSection label="Bypass approved (delegated bypass enabled)">
<Timeline aria-label="Secret scanning alert timeline">
{/* UNTAGGED: delegated-BYPASS flow, no catalog leaf (see the request
variant above). No leaf -> no data-* tag. */}
<Timeline.Item>
<Timeline.Badge>
<Octicon icon={CheckCircleIcon} />
Expand Down Expand Up @@ -403,7 +453,8 @@ export const EventValidityChange = () => (
{/* Active — automated (GitHub), AlertIcon on danger (red) */}
<VariantSection label="Validity: active (automated)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `validity_changed` leaf; automated -> GitHub system actor -> 'user'. */}
<Timeline.Item {...secretScanningAttrs('validity_changed', 'GitHub')}>
<Timeline.Badge variant="danger">
<Octicon icon={AlertIcon} />
</Timeline.Badge>
Expand All @@ -419,7 +470,8 @@ export const EventValidityChange = () => (
{/* Active — manual (user), same danger badge */}
<VariantSection label="Validity: active (manual)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `validity_changed` leaf; manual -> user actor. */}
<Timeline.Item {...secretScanningAttrs('validity_changed', 'monalisa')}>
<Timeline.Badge variant="danger">
<Octicon icon={AlertIcon} />
</Timeline.Badge>
Expand All @@ -435,7 +487,8 @@ export const EventValidityChange = () => (
{/* Inactive — automated (GitHub), SkipIcon on default (gray) */}
<VariantSection label="Validity: inactive (automated)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `validity_changed` leaf; automated -> GitHub system actor -> 'user'. */}
<Timeline.Item {...secretScanningAttrs('validity_changed', 'GitHub')}>
<Timeline.Badge>
<Octicon icon={SkipIcon} />
</Timeline.Badge>
Expand All @@ -451,7 +504,8 @@ export const EventValidityChange = () => (
{/* Inactive — manual (user) */}
<VariantSection label="Validity: inactive (manual)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `validity_changed` leaf; manual -> user actor. */}
<Timeline.Item {...secretScanningAttrs('validity_changed', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={SkipIcon} />
</Timeline.Badge>
Expand All @@ -467,7 +521,8 @@ export const EventValidityChange = () => (
{/* Unknown — automated (GitHub), AlertIcon on attention (amber) */}
<VariantSection label="Validity: unknown (automated)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `validity_changed` leaf; automated -> GitHub system actor -> 'user'. */}
<Timeline.Item {...secretScanningAttrs('validity_changed', 'GitHub')}>
<Timeline.Badge variant="attention">
<Octicon icon={AlertIcon} />
</Timeline.Badge>
Expand All @@ -483,7 +538,8 @@ export const EventValidityChange = () => (
{/* Unknown — manual (user) */}
<VariantSection label="Validity: unknown (manual)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `validity_changed` leaf; manual -> user actor. */}
<Timeline.Item {...secretScanningAttrs('validity_changed', 'monalisa')}>
<Timeline.Badge variant="attention">
<Octicon icon={AlertIcon} />
</Timeline.Badge>
Expand Down Expand Up @@ -511,6 +567,10 @@ export const EventReport = () => (
{/* Reported — ShieldCheckIcon, default (gray) badge, user actor */}
<VariantSection label="Reported">
<Timeline aria-label="Secret scanning alert timeline">
{/* UNTAGGED: the catalog maps Report -> validity_changed, but
github/primer#6888 lists that mapping as UNCONFIRMED (open item #2).
Emitting an unconfirmed value would bake in a guess, so leave untagged
until the docs confirm the leaf. */}
<Timeline.Item>
<Timeline.Badge>
<Octicon icon={ShieldCheckIcon} />
Expand Down Expand Up @@ -545,6 +605,8 @@ export const EventMetadata = () => (
{/* Metadata created — GitHub system actor, FileAddedIcon, default (gray) badge */}
<VariantSection label="Extended metadata found">
<Timeline aria-label="Secret scanning alert timeline">
{/* UNTAGGED: MetadataCreated is PARKED per github/primer#6888 ('Parked'
section), no catalog leaf. No leaf -> no data-* tag. */}
<Timeline.Item>
<Timeline.Badge>
<Octicon icon={FileAddedIcon} />
Expand All @@ -561,6 +623,8 @@ export const EventMetadata = () => (
{/* Metadata removed — GitHub system actor, FileRemovedIcon, default (gray) badge */}
<VariantSection label="Extended metadata removed">
<Timeline aria-label="Secret scanning alert timeline">
{/* UNTAGGED: MetadataRemoved is PARKED per github/primer#6888 ('Parked'
section), no catalog leaf. No leaf -> no data-* tag. */}
<Timeline.Item>
<Timeline.Badge>
<Octicon icon={FileRemovedIcon} />
Expand Down Expand Up @@ -606,7 +670,8 @@ export const EventClosureRequest = () => (
un-bolded `resolutionText(exemption_request.reason)`. */}
<VariantSection label="Dismissal requested (reviewer view)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `dismissal_requested` leaf (DelegatedClosureRequestOpened); user actor. */}
<Timeline.Item {...secretScanningAttrs('dismissal_requested', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={CommentIcon} />
</Timeline.Badge>
Expand All @@ -630,7 +695,8 @@ export const EventClosureRequest = () => (
{/* Requested — requester view: the invisible "Cancel request" button. */}
<VariantSection label="Dismissal requested (requester view)">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `dismissal_requested` leaf; user actor. */}
<Timeline.Item {...secretScanningAttrs('dismissal_requested', 'monalisa')}>
<Timeline.Badge>
<Octicon icon={CommentIcon} />
</Timeline.Badge>
Expand All @@ -651,7 +717,8 @@ export const EventClosureRequest = () => (
{/* Approved — CheckCircleIcon, with a reviewer comment sub-row. */}
<VariantSection label="Dismissal approved">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `dismissal_reviewed` leaf; reviewer user actor (six7). */}
<Timeline.Item {...secretScanningAttrs('dismissal_reviewed', 'six7')}>
<Timeline.Badge>
<Octicon icon={CheckCircleIcon} />
</Timeline.Badge>
Expand All @@ -670,7 +737,8 @@ export const EventClosureRequest = () => (
{/* Denied — XIcon */}
<VariantSection label="Dismissal denied">
<Timeline aria-label="Secret scanning alert timeline">
<Timeline.Item>
{/* `dismissal_reviewed` leaf; reviewer user actor (six7). */}
<Timeline.Item {...secretScanningAttrs('dismissal_reviewed', 'six7')}>
<Timeline.Badge>
<Octicon icon={XIcon} />
</Timeline.Badge>
Expand All @@ -689,6 +757,8 @@ export const EventClosureRequest = () => (
{/* Cancelled — SkipIcon */}
<VariantSection label="Dismissal request cancelled">
<Timeline aria-label="Secret scanning alert timeline">
{/* UNTAGGED: Secret Scanning has NO dismissal_cancelled leaf (unlike
Dependabot). No leaf -> no data-* tag. */}
<Timeline.Item>
<Timeline.Badge>
<Octicon icon={SkipIcon} />
Expand Down Expand Up @@ -717,6 +787,9 @@ export const EventClosureRequest = () => (
*/
export const EventAssignment = () => (
<RealisticTimeline>
{/* UNTAGGED (whole group): Assignment is a cross-surface SHARED event,
deliberately kept OUT of the per-surface Secret Scanning catalog. All five
variants below carry no data-* event tag. */}
{/* Self-assigned — actor === assignee */}
<VariantSection label="Self-assigned">
<Timeline aria-label="Secret scanning alert timeline">
Expand Down
Loading