You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"I need to add to the design repo", start by asking the intake questions
7
7
below before editing files. Also use for "add a prototype", "register my
8
8
prototype", "update the hub", "update the manifest", "set up my branch",
9
-
"how do I contribute", or "open an MR" for this repository.
9
+
"how do I contribute", "create a prototype", "new prototype for [product]",
10
+
or "open an MR" for this repository.
10
11
---
11
12
12
13
# Prototype contributor
@@ -41,13 +42,13 @@ Then: locate the manifest entry (and code paths if any), apply edits, bump `upda
41
42
42
43
Ask (skip what they already answered):
43
44
44
-
2.**Product area** — which UX lane? (`teamId` must match an `id` in `teams`*or*`crossProducts` in the manifest, e.g. `rbac` for RBAC cross-lane listings; if missing, flag that a team or cross-product block may be needed first — coordinate maintainer / Matt per **When to ask for help**.)
45
+
2.**Product area** — pick from the table in **Product area → teamId mapping** below. This sets `teamId` in the manifest.
45
46
3.**Card title** — should match the linked Jira issue **`summary`** (hub cards mirror the ticket title).
46
-
4.**What they’re shipping** — e.g. PatternFly prototype under `hpux-prototypes/` (embed link), static/site URL, OME/OSAC-style embed route, or **manifest-only** until hosted (`prototypeUrl: null`).
47
-
5.**Jira**— real issue key and `https://redhat.atlassian.net/browse/…` or `https://issues.redhat.com/browse/…` (avoid using registry slugs as `jiraKey` when a real ticket exists).
48
-
6.**Persona**(optional) — one line for the card; use**admin** not **administrator** per team wording norms.
49
-
7.**Design doc** (optional) — `designDocUrl`: link to the UX spec / problem statement (Confluence, Google Doc, in-repo doc, etc.).
50
-
8.**Recording** (optional) — `prototypeRecordingUrl`: link to a short walkthrough (Loom, Meet recording, Drive, etc.).
47
+
4.**What they're shipping** — e.g. PatternFly prototype under `hpux-prototypes/` (embed link), static/site URL, OME/OSAC-style embed route, or **manifest-only** until hosted (`prototypeUrl: null`). If the answer is **hpux-prototypes**, continue to **hpux-prototypes scaffold flow** below.
48
+
5.**Jira ticket number**(e.g. `ACM-1234`) — run the Jira lookup in **Pulling Jira info** to auto-fill title, description, assignee, and status.
49
+
6.**Persona** — one line for the card (e.g. "Cluster admin", "SRE", "Developer"). Use**admin** not **administrator** per team wording norms.
50
+
7.**Design doc URL** (optional) — `designDocUrl`: link to the UX spec / problem statement (Confluence, Google Doc, in-repo doc, etc.).
51
+
8.**Recording URL** (optional) — `prototypeRecordingUrl`: link to a short walkthrough (Loom, Meet recording, Drive, YouTube, etc.).
51
52
9.**Author** — full name; **updatedAt** — `YYYY-MM-DD` for today or last meaningful change.
52
53
53
54
Then: add the `prototypes` entry (and register in hpux or wire URL/embed as needed), follow **Manifest structure** and repo layout, draft commit + MR.
@@ -58,6 +59,170 @@ Then: add the `prototypes` entry (and register in hpux or wire URL/embed as need
58
59
- For **hpux** screens: `hpux-prototypes/` app + registry; embed pattern `/embed/hpux-prototypes?prototype=<id>` when relevant.
59
60
- Point to **Contributor guide** in the hub (`/contributing`) for long-form context.
60
61
62
+
---
63
+
64
+
## Product area → teamId mapping
65
+
66
+
Use this table to resolve the designer's product area choice to the correct `teamId` for the manifest and the correct section in the hub.
| Upgrades (cross-product) |`upgrades`| Kevin Hatchoua |
81
+
| Agentic (cross-product) |`agentic`| Peter Kreuser |
82
+
| Install (cross-product) |`install`| Peter Kreuser |
83
+
84
+
> Cross-product `teamId` values come from the `crossProducts` array in the manifest — they route to `/cross-product/<id>` in the hub, not a team page. If the right area isn't listed, flag it: a new `teams` entry + icon in `hub/src/iconImports.tsx` is needed — coordinate with Matt.
85
+
86
+
---
87
+
88
+
## Pulling Jira info
89
+
90
+
When the designer provides a Jira ticket number, run this to auto-fill title, description, assignee, and status:
91
+
92
+
```bash
93
+
source /Users/matthew/jira/scripts/jira-api.sh
94
+
jira_get_issue "ACM-1234"| python3 -c "
95
+
import json, sys
96
+
d = json.load(sys.stdin)
97
+
f = d['fields']
98
+
print('summary:', f.get('summary',''))
99
+
print('assignee:', (f.get('assignee') or {}).get('displayName',''))
100
+
print('status:', f['status']['name'])
101
+
desc = f.get('description') or {}
102
+
# ADF description → plain text (best-effort)
103
+
texts = []
104
+
for b in desc.get('content', []):
105
+
for c in b.get('content', []):
106
+
if c.get('type') == 'text':
107
+
texts.append(c['text'])
108
+
print('description:', ' '.join(texts)[:300])
109
+
"
110
+
```
111
+
112
+
Map the returned `status` to `PrototypeStatus`:
113
+
114
+
| Jira status | prototype.config.ts status |
115
+
|---|---|
116
+
| To Do / New / Open |`draft`|
117
+
| In Progress |`in-progress`|
118
+
| In Review / Review |`in-review`|
119
+
| Done / Closed |`done`|
120
+
| Blocked / Paused |`paused`|
121
+
122
+
Use `summary` as the hub card `title` (and the `name` in `prototype.config.ts`). Use `assignee` for `owner.name` and the manifest `author` field. Use the cleaned `description` as the prototype's `description` field (trim to 2–3 sentences).
123
+
124
+
---
125
+
126
+
## hpux-prototypes scaffold flow
127
+
128
+
Use this when the designer confirms they are building a **React/PatternFly prototype** under `hpux-prototypes/`. Run after collecting all intake answers.
129
+
130
+
### 1. Collect remaining inputs (if not already answered)
131
+
132
+
Before scaffolding, ensure you have:
133
+
134
+
-**Prototype slug** (kebab-case, e.g. `anna-aaq-v2`) — validate: `^[a-z0-9]+(?:-[a-z0-9]+)*$`
135
+
-**Designer notes** — one paragraph: what this design explores, key decisions, open questions
136
+
-**First page to review** — path (e.g. `/observe/alerting`) + page name (e.g. "Alert List") + what to look for (optional)
137
+
-**Persona name + role** (e.g. name: "Alex", role: "Cluster Admin")
-**Design doc URL** and **recording URL** (optional)
140
+
141
+
### 2. Run the scaffold script
142
+
143
+
From `hpux-prototypes/`:
144
+
145
+
```bash
146
+
npm run create-prototype <prototype-slug>
147
+
```
148
+
149
+
The script copies `_template/`, patches `prototype.config.ts` with the slug and today's date, and interactively prompts for design notes (you can answer on their behalf or skip — we'll patch directly in the next step).
150
+
151
+
### 3. Patch prototype.config.ts
152
+
153
+
After scaffolding, directly edit `hpux-prototypes/src/app/prototypes/<slug>/prototype.config.ts` with all collected values. The full shape is:
154
+
155
+
```typescript
156
+
exportconst config:PrototypeConfig= {
157
+
id: '<slug>',
158
+
name: '<Jira summary or designer-provided title>',
159
+
description: '<2–3 sentence description from Jira or designer>',
160
+
version: '1.0.0',
161
+
status: 'in-progress', // from Jira status mapping above
162
+
owner: {
163
+
name: '<assignee from Jira>',
164
+
slack: '@<handle>', // ask if not provided
165
+
email: '<name>@redhat.com', // ask if not provided
> `perspectives` options: `'fleet-management'`, `'fleet-virtualization'`, `'core-platforms'`. Default to `'core-platforms'` unless the prototype is fleet-scoped.
192
+
193
+
### 4. Add to hub manifest
194
+
195
+
Append to the `prototypes` array in `hub/src/data/prototypes.manifest.json`:
**Common fields:**`teamId`, `title` (Jira summary), `author`, `updatedAt`, `jiraKey`, `jiraUrl` (browse URL for the same issue), `prototypeUrl`. Optional: `description`, `persona`, **`designDocUrl`** (UX / design doc), **`prototypeRecordingUrl`** (walkthrough or demo recording). Hub cards **always** show both slots; empty fields appear as “Not linked” until URLs are set. **Do not** add manual `status` / `release`; run **`npm run sync:jira-manifest`** to fill `jiraIssueStatus` and `jiraIssueRelease`. If `jiraKey` / `jiraUrl` are missing or invalid, the hub shows a **Jira ticket needed** warning on the card.
294
+
**Common fields:**`teamId`, `title` (Jira summary), `author`, `updatedAt`, `jiraKey`, `jiraUrl` (browse URL for the same issue), `prototypeUrl`. Optional: `description`, `persona`, **`designDocUrl`** (UX / design doc), **`prototypeRecordingUrl`** (walkthrough or demo recording). Hub cards **always** show both slots; empty fields appear as "Not linked" until URLs are set. **Do not** add manual `status` / `release`; run **`npm run sync:jira-manifest`** to fill `jiraIssueStatus` and `jiraIssueRelease`. If `jiraKey` / `jiraUrl` are missing or invalid, the hub shows a **Jira ticket needed** warning on the card.
130
295
131
296
Valid **`teamId`** values come from the manifest `teams` array (`acs`, `acm`, `virtualization`, …) **or** a `crossProducts``id` when the prototype belongs on a cross-lane listing (e.g. **`rbac`** for ACM RBAC fleet/tenant/empty-state builds). New product areas need a `teams` entry and icon from `hub/src/iconImports.tsx`; cross-lanes are already defined under `crossProducts` and use the hub route `/cross-product/<id>`.
132
297
@@ -138,9 +303,9 @@ All hub **fullscreen** prototype tabs (`/embed/…`) show a **version control**
138
303
139
304
1. Add or copy the prototype under `hpux-prototypes/src/app/prototypes/<id>/` and register it in the app registry (same as today).
140
305
2. In **`hub/src/App.tsx`**, find `HPUX_PROTOTYPE_VERSION_GROUPS`. Either:
141
-
-**Add a row** to an existing group’s `versions` array (put the newest first; label it with `(latest)`), or
306
+
-**Add a row** to an existing group's `versions` array (put the newest first; label it with `(latest)`), or
142
307
-**Create a new group** with `backTo`, `backLabel`, and `versions` if this is a new multi-build feature.
143
-
-*Existing groups:* Observability alerting (`shiri-alerting-ui-v2` / `shiri-alerting-ui`) and RBAC cross-lane (`fleet-admin-rbac`, `fleet-admin-rbac-v1.1`, `tenant-admin-access`, `acm-empty-states`) — embed “back” goes to `/cross-product/rbac`. Extend those lists when you add siblings; don’t duplicate the in-iframe toolbar (it was removed from `hpux-prototypes`).
308
+
-*Existing groups:* Observability alerting (`shiri-alerting-ui-v2` / `shiri-alerting-ui`) and RBAC cross-lane (`fleet-admin-rbac`, `fleet-admin-rbac-v1.1`, `tenant-admin-access`, `acm-empty-states`) — embed "back" goes to `/cross-product/rbac`. Extend those lists when you add siblings; don't duplicate the in-iframe toolbar (it was removed from `hpux-prototypes`).
144
309
3. Update **`hub/src/data/prototypes.manifest.json`**: one card per feature is preferred when versions are grouped — set `prototypeUrl` to `/embed/hpux-prototypes?prototype=<id>` using the **default (latest)** registry id, refresh title/description, bump `updatedAt`, adjust `jiraKey` / `jiraUrl` if needed, then run **`npm run sync:jira-manifest`**.
145
310
4. Run hub locally and confirm the embed: back link, dropdown labels, and iframe all match.
146
311
@@ -172,9 +337,10 @@ Coach them to include:
172
337
173
338
## Quick reference — decision tree
174
339
175
-
-**Intake phrase** (“I need to add to the design repo”) → run **Intake** questions first.
340
+
-**Intake phrase** ("I need to add to the design repo") → run **Intake** questions first.
176
341
-**Share before merge** → push branch → GitHub Actions publishes hub preview to GitHub Pages (see workflow) + optional draft PR link.
0 commit comments