create-pmos 0.123.0 → 0.125.0

package/workspace/public/pm/releases-view.js

@@ -0,0 +1,248 @@
+/* pm/releases-view.js — the Releases view of Initiatives (console3 wave A4, read side; R4b: on the console3 mockup's own markup and CSS).
+ *
+ * Lifted from console3.html (the Releases view, lines 4867 to 4945): the lens header `.lh` (iniInfo, line 4941), `.brief.sbb > .bcols`, the list
+ * `section.card.sect > .sh2 + ul.list` with a "New release" row (`.ki` with the soft accent and the plus) and one `li.nrow`
+ * per release (`.ki`, `.nb > .tt + .chips` with initiative chips, `.tag` tags, date chips and `.st` flags, `.xp > .xi` with the
+ * case file: `.case > .sit + .c3rel`), the create form as `.c3rel` (initiative pills, date and time `.c3dt` labels), the
+ * tag detection line, the gap flags as `.chgl` rows and the summary lines with their source `.tag`. Styles: pm/console3.css.
+ *
+ * What is real: GET /api/releases (releases, their tags, gap flags, summary lines, acceptance) and the writes through pmPost
+ * (/api/releases/create, /edit, /delete, /summary). A refused summary line is shown, not stored. There is no freeze warning here
+ * until a rule exists, and a release never creates a Jira tag: the PM's acceptance comes first, and that is recorded, not
+ * acted on. Not lifted: the mockup's invented releases and tags (C3.REL, C3.JV), the ticket table (the payload has no tickets),
+ * "shipped" (acceptance is not shipping), the ready-to-ship checks, the freeze chip and its example rule, the sync-from-Jira
+ * chips and demo buttons, the outward options (tag in Jira, update to a person, calendar hold: each needs the slide and the
+ * outbox, and none exists for a release), the promises card and the "Jira release tags" bars (no ticket counts per tag).
+ * Self-registers as the 'releases' Initiatives view, like Timeline. */
+import { el } from './dom.js';
+import { ensureComponentsCss } from './primitives.js';
+import { pmGet, pmPost } from './http.js';
+import { registerInitiativesView } from './registry.js';
+import { ensureC3Css, c3ic, c3ring, c3Phone } from './pm-work-view.js';
+import { card, hBars } from './c3-init-extras.js';
+
+const views = new WeakMap();
+const TYPES = [{ value: 'deploy', label: 'Deploy' }, { value: 'customer', label: 'Customer' }, { value: 'both', label: 'Deploy and customer' }];
+const SOURCES = ['fact', 'estimate', 'assumption', 'reported'];
+const FLAG_TEXT = { initiative_ticket_without_tag: 'Ticket without a release tag', tagged_ticket_without_initiative: 'Tagged ticket with no initiative' };
+const iso = (d, t) => (d ? new Date(d + 'T' + (t || '00:00')).toISOString() : null);
+const dim = (t, extra) => el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' + (extra || '') }, t);
+const when = (v) => (v ? v.replace('T', ' ').replace(/:\d\dZ$/, 'Z') : 'not set');
+const DOW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** The mockup's c3dfmt: "Thu 1 Oct, 12:00" in the viewer's time. */
+const dfmt = (v) => { const d = v ? new Date(v) : null; if (!d || isNaN(d)) return 'no date'; return DOW[d.getDay()] + ' ' + d.getDate() + ' ' + MON[d.getMonth()] + ', ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0'); };
+const nameOfRel = (V, r) => r.name || (r.initiative_ids.length ? r.initiative_ids.map((id) => titleOf(V, id)).join(' and ') : r.id);
+
+function scopeIds(ctx) { return (ctx.rows || []).map((r) => r.id).filter(Boolean); }
+const shown = (V, r) => !r.initiative_ids.length || r.initiative_ids.some((id) => V.ids.includes(id));
+const titleOf = (V, id) => { const r = (V.ctx.rows || []).find((x) => x.id === id); return (r && r.title) || id; };
+
+function summaryEditor(V, r) {
+  const lines = (r.summary && r.summary.length ? r.summary : [{ text: '', source: 'estimate' }]).map((l) => ({ ...l }));
+  const box = el('div', { class: 'c3rel', 'data-rel-summary': r.id });
+  const note = el('div', { class: 'fold w', 'data-rel-refused': '' });
+  note.hidden = true;
+  const draw = (refused = []) => {
+    box.replaceChildren(...lines.map((l, i) => {
+      const input = el('input', { type: 'text', value: l.text || '', 'aria-label': 'Line ' + (i + 1), autocomplete: 'off' });
+      input.addEventListener('change', () => { l.text = input.value; });
+      const sel = el('select', { 'aria-label': 'Source of line ' + (i + 1) },
+        [{ value: '', label: 'Source needed' }, ...SOURCES.map((s) => ({ value: s, label: s })), ...(l.source && !SOURCES.includes(l.source) ? [{ value: l.source, label: l.source }] : [])].map((o) => el('option', { value: o.value }, o.label)));
+      sel.value = l.source || '';
+      sel.addEventListener('change', () => { l.source = sel.value || undefined; });
+      return el('div', { class: 'form row', 'data-rel-line': i, 'data-refused': refused.includes(i) ? 'true' : null }, input, sel);
+    }));
+    note.hidden = !refused.length;
+    if (refused.length) note.replaceChildren(c3ic('alert', 'sm'), 'Not saved. Line ' + refused.map((i) => i + 1).join(', ') + ' needs a source: fact, estimate, assumption, reported or a ticket key.');
+  };
+  draw();
+  const save = async () => {
+    const a = await pmPost('/api/releases/summary', { id: r.id, lines });
+    if (a && a.ok) { await load(V); return; }
+    draw(a && a.refused ? a.refused : []);
+    if (!(a && a.refused)) { note.hidden = false; note.replaceChildren(c3ic('alert', 'sm'), (a && a.error) || 'Not saved.'); }
+  };
+  return el('div', { class: 'c3rel' },
+    el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'Summary: each line cites a source'), box, note,
+    el('div', { class: 'chips2' },
+      el('button', { type: 'button', class: 'pill', onClick: () => { lines.push({ text: '', source: 'estimate' }); draw(); } }, c3ic('plus', 'sm'), 'Add line'),
+      el('button', { type: 'button', class: 'pill', 'data-rel-save-summary': r.id, onClick: save }, c3ic('check', 'sm'), 'Save summary')));
+}
+
+/** The release's case file (the mockup's C3.cases.rl): what the release is, the tag, the gaps, the summary, and the presses. */
+function caseFile(V, r) {
+  const flags = r.gapFlags || [];
+  const t = r.tags || { detected: [], reason: 'board not set' };
+  return el('div', { class: 'case', style: '--tc:var(--acc)' },
+    el('p', { class: 'sit' }, 'Deploy ' + when(r.deploy_at) + '. Release ' + when(r.release_at) + '. Initiatives: ' + (r.initiative_ids.map((id) => titleOf(V, id)).join(', ') || 'none') + '.'),
+    el('div', { class: 'c3rel' },
+      el('div', { class: 'chips2', 'data-rel-tags': r.id }, dim('Jira tag'), t.detected.length ? t.detected.map((x) => el('span', { class: 'tag', title: 'Jira release tag' }, x)) : dim(t.reason)),
+      el('div', { 'data-rel-flags': r.id }, flags.length
+        ? el('ul', { class: 'chgl' }, flags.map((f) => el('li', { class: 'warn' }, c3ic('alert', 'sm'), el('span', null, (FLAG_TEXT[f.flag] || f.flag) + ': ' + f.ticket), el('span', { class: 'tag' }, 'gap'))))
+        : el('div', { class: 'fold' }, c3ic('check', 'sm'), 'No gaps between tickets and tags.')),
+      summaryEditor(V, r),
+      el('div', { class: 'chips2' },
+        el('button', { type: 'button', class: 'pill', 'data-rel-accept': r.id,
+          onClick: async () => { await pmPost('/api/releases/edit', { id: r.id, fields: { accepted: !r.accepted_at } }); await load(V); } }, c3ic(r.accepted_at ? 'undo' : 'check', 'sm'), r.accepted_at ? 'Withdraw acceptance' : 'Record acceptance'),
+        !r.initiative_ids.length ? el('button', { type: 'button', class: 'pill', 'data-rel-delete': r.id,
+          onClick: async () => { await pmPost('/api/releases/delete', { id: r.id }); await load(V); } }, c3ic('trash', 'sm'), 'Delete') : null)),
+    el('div', { class: 'cft' }, el('span', null, c3ic('shield', 'sm'), 'A release never creates a Jira tag. The PM’s acceptance comes first, and that is recorded, not acted on.')));
+}
+
+function toggler(V, id, li, xp) {
+  const flip = () => { V.open[id] = !V.open[id]; li.setAttribute('aria-expanded', String(!!V.open[id])); xp.classList.toggle('open', !!V.open[id]); };
+  li.addEventListener('click', (e) => { if (!e.target.closest('.xi')) flip(); });
+  li.addEventListener('keydown', (e) => { if (e.target === li && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); flip(); } });
+}
+
+function relRow(V, r) {
+  const flags = r.gapFlags || [];
+  const t = r.tags || { detected: [] };
+  const op = !!V.open[r.id];
+  const li = el('li', { class: 'nrow', 'data-row': '', 'data-rel': r.id, tabindex: '0', 'aria-expanded': String(op) });
+  const xp = el('div', { class: 'xp' + (op ? ' open' : '') }, el('div', { class: 'xi' }, caseFile(V, r)));
+  toggler(V, r.id, li, xp);
+  li.append(
+    el('span', { class: 'ki', style: r.accepted_at ? 'color:var(--success)' : null }, c3ic(r.accepted_at ? 'check' : 'out')),
+    el('div', { class: 'nb' },
+      el('span', { class: 'tt' }, nameOfRel(V, r)),
+      el('div', { class: 'chips' },
+        r.initiative_ids.map((id) => el('span', { class: 'chip2' }, c3ic('init', 'sm'), titleOf(V, id))),
+        (t.detected || []).map((x) => el('span', { class: 'tag', title: 'Jira release tag' }, x)),
+        el('span', { class: 'chip2' }, c3ic('cal', 'sm'), dfmt(r.release_at)),
+        r.accepted_at ? el('span', { class: 'st ok' }, c3ic('check', 'sm'), 'accepted by the PM') : (t.detected || []).length ? null : el('span', { class: 'st warn' }, c3ic('alert', 'sm'), 'not accepted: no Jira tag yet'),
+        flags.length ? el('span', { class: 'st warn' }, c3ic('alert', 'sm'), flags.length + ' gap' + (flags.length === 1 ? '' : 's')) : null,
+        r.progress && r.progress.total ? [el('div', { class: 'pbar', style: 'width:70px' }, el('i', { style: 'width:' + Math.round(r.progress.done / r.progress.total * 100) + '%' })), el('span', { class: 'mono dim', style: 'font-size:var(--fs-2)' }, r.progress.done + ' of ' + r.progress.total)] : null),
+      xp));
+  return li;
+}
+
+/** The mockup's "New release" row and its wizard (c3wizard, line 4903) as a form: initiatives, type, deploy and release times. */
+function newRow(V) {
+  const F = V.form;
+  const op = !!V.open.__new;
+  const li = el('li', { class: 'nrow', 'data-row': '', tabindex: '0', 'aria-expanded': String(op), 'data-rel-new': '' });
+  const err = el('div', { class: 'fold w', 'data-rel-error': '' });
+  err.hidden = true;
+  const pickRow = el('div', { class: 'chips2', role: 'group', 'aria-label': 'Initiatives' }, dim('initiatives'), V.ctx.rows.map((r) => {
+    const b = el('button', { type: 'button', class: 'pill', 'aria-pressed': String(F.picked.has(r.id)), 'data-rel-pick': r.id, onClick: () => { F.picked.has(r.id) ? F.picked.delete(r.id) : F.picked.add(r.id); b.setAttribute('aria-pressed', String(F.picked.has(r.id))); } }, r.title || r.id);
+    return b;
+  }));
+  const typeRow = el('div', { class: 'chips2', role: 'group', 'aria-label': 'Type' }, dim('type'), TYPES.map((t) => {
+    const b = el('button', { type: 'button', class: 'pill', 'aria-pressed': String(F.type === t.value), 'data-rel-type': t.value, onClick: () => { F.type = t.value; typeRow.querySelectorAll('button').forEach((x) => x.setAttribute('aria-pressed', String(x === b))); } }, t.label);
+    return b;
+  }));
+  const dt = (label, key, note) => {
+    const d = el('input', { type: 'date', value: F[key][0], 'aria-label': label + ' date' }); d.addEventListener('change', () => { F[key][0] = d.value; });
+    const t = el('input', { type: 'time', value: F[key][1], 'aria-label': label + ' time' }); t.addEventListener('change', () => { F[key][1] = t.value; });
+    return el('label', { class: 'c3dt' }, el('span', { class: 'dim mono' }, label), d, t, el('span', { class: 'dim mono' }, note));
+  };
+  const create = el('button', { type: 'button', class: 'pill', 'data-rel-create-go': '', onClick: async () => {
+    const a = await pmPost('/api/releases/create', { initiative_ids: [...F.picked], type: F.type, deploy_at: iso(F.deploy[0], F.deploy[1]), release_at: iso(F.rel[0], F.rel[1]) });
+    if (a && a.ok) { V.form = newForm(); V.open.__new = false; await load(V); } else { err.hidden = false; err.replaceChildren(c3ic('alert', 'sm'), (a && a.error) || 'Not created.'); }
+  } }, c3ic('plus', 'sm'), 'Create release');
+  const xp = el('div', { class: 'xp' + (op ? ' open' : '') }, el('div', { class: 'xi' }, el('div', { class: 'case', 'data-rel-create': '', style: '--tc:var(--acc)' },
+    el('p', { class: 'sit' }, 'Which initiatives ship together? Pick one, or several. The release is recorded here only; nothing changes in Jira.'),
+    el('div', { class: 'c3rel' }, pickRow, typeRow, dt('Deploy', 'deploy', 'engineering ships it'), dt('Release', 'rel', 'customers see it'), err, el('div', { class: 'chips2' }, create)))));
+  toggler(V, '__new', li, xp);
+  li.append(el('span', { class: 'ki', style: 'background:var(--accw);color:var(--acc)' }, c3ic('plus')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, 'New release'), el('div', { class: 'chips' }, dim('pick initiatives, a type and the deploy and release times')), xp));
+  return li;
+}
+
+const newForm = () => ({ picked: new Set(), type: 'deploy', deploy: ['', ''], rel: ['', ''] });
+
+/** The mockup's Releases list (c3relList): the New release row and one row per release. */
+function listCard(V) {
+  const list = V.releases.filter((r) => shown(V, r));
+  const rows = [newRow(V), ...(list.length ? list.map((r) => relRow(V, r)) : [el('li', { class: 'fold', 'data-rel-empty': '' }, c3ic('check', 'sm'), 'No releases yet.')])];
+  return el('section', { class: 'card sect', 'data-rel-list': '' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('out', 'sm'), 'Releases ', el('span', { class: 'bdg g' }, String(list.length))), el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'tied to initiatives and a Jira tag')),
+    el('ul', { class: 'list' }, rows));
+}
+const TAG_COLORS = ['var(--acc)', 'var(--success)', 'var(--purple)', 'var(--warning)'];
+/** The mockup's "Jira release tags: tickets per tag". The ticket counts come from `tag_tickets` where the server sends them (the demo does); otherwise the tags
+ * the releases carry are listed with no count, and with no board set the card says so. Nothing is counted here. */
+function tagsCard(V) {
+  const tt = V.tagTickets;
+  let body;
+  if (tt && tt.length) body = hBars(tt.map((v, i) => [v.tag, v.total ? v.done / v.total || 0.03 : 0.03, TAG_COLORS[i % 4], v.done + ' of ' + v.total + ' done' + (v.date ? ' · ' + v.date : '')]));
+  else {
+    const tags = [...new Set(V.releases.flatMap((r) => (r.tags && r.tags.detected) || []))];
+    body = tags.length ? el('div', { class: 'chips2', 'data-rel-tag-list': '' }, tags.map((t) => el('span', { class: 'tag', title: 'Jira release tag' }, t)))
+      : el('div', { class: 'fold', 'data-rel-tags-empty': '' }, c3ic('moon', 'sm'), V.board ? 'No release tag is detected on the board yet.' : 'Jira board: not set, so no release tag is read.');
+  }
+  const s = card('out', 'Jira release tags', 'tickets per tag', body, el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, tt && tt.length ? 'Read from Jira. Fact.' : 'Ticket counts per tag are not read here.'));
+  s.setAttribute('data-rel-tags-card', '');
+  return s;
+}
+function rulesCard(V) {
+  const demo = V.rules;
+  const rows = demo
+    ? [['clock', 'Change freeze: ' + demo.freeze, 'example'], ['doc', 'Tag name: ' + demo.tag, 'example'], ['shield', 'Acceptance before a tag is created: not decided', 'open']]
+    : [['clock', 'Change freeze: no rule is set, so none is checked', 'open'], ['doc', 'Tag name: no rule is set, and no tag is created from here', 'open'], ['shield', 'Acceptance before a tag is created: the PM’s acceptance is recorded, and no tag is created from here', 'recorded']];
+  const s = card('lock', 'Open rules', demo ? 'example values, yours to set' : 'yours to set', el('ul', { class: 'chgl' }, rows.map((r) => el('li', { class: 'warn' }, c3ic(r[0], 'sm'), el('span', null, r[1]), el('span', { class: 'tag' }, r[2])))));
+  s.setAttribute('data-rel-rules', '');
+  return s;
+}
+
+function render(V) {
+  if (V.redraw) { V.redraw(); return; }
+  const list = V.releases.filter((r) => shown(V, r));
+  const accepted = list.filter((r) => r.accepted_at).length;
+  const head = el('div', { class: 'lh' },
+    el('span', { class: 'ki' }, c3ic('out')),
+    el('div', { style: 'min-width:0' },
+      el('b', null, list.length + ' release' + (list.length === 1 ? '' : 's') + ', ' + accepted + ' accepted by the PM'),
+      el('div', { class: 'dim', 'data-rel-board': '' }, V.board ? 'Jira board: ' + V.board.name : 'Jira board: not set')),
+    c3ring(accepted, Math.max(1, list.length), 44, accepted + '/' + list.length));
+  V.root.replaceChildren(el('div', { class: 'calwrap' }, el('div', { class: 'calbody' },
+    head,
+    V.error ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), V.error) : null,
+    el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, listCard(V)), el('div', { class: 'bcol r' }, tagsCard(V), rulesCard(V)))))));
+}
+
+async function load(V) {
+  const fx = window.__c3demo && window.__c3planfx && window.__c3planfx.releases;
+  const a = fx ? JSON.parse(JSON.stringify(fx)) : await pmGet('/api/releases');
+  if (V.disposed) return;
+  if (a && a.ok) { V.releases = a.releases || []; V.board = a.board || null; V.tagTickets = a.tag_tickets || null; V.rules = fx ? fx.rules : null; V.error = null; V.ready = true; } else V.error = (a && a.error) || 'Releases could not be read.';
+  render(V);
+}
+
+/** The Lifecycle Deliver stage: the same list, tags and rules, drawn inside that lens (c3-lifecycle-panels.js). `host` is the lens's V; `scope` an initiative id or null.
+ * The state lives on host.__rel, so a write (create, summary, acceptance) reloads and asks the lens to draw again. */
+export function releasePanels(host, scope) {
+  let V = host.__rel;
+  if (!V) {
+    V = host.__rel = { ctx: host.ctx, ids: scopeIds(host.ctx), releases: [], board: null, tagTickets: null, rules: null, error: null, ready: false, disposed: false, open: {}, form: newForm(), redraw: () => { if (!host.disposed && host.render) host.render(); } };
+    load(V);
+  }
+  V.ctx = host.ctx; V.ids = scope ? [scope] : scopeIds(host.ctx);
+  if (!V.ready && !V.error) return { left: [el('section', { class: 'card sect' }, el('div', { class: 'fold', 'data-rel-loading': '' }, c3ic('clock', 'sm'), 'Reading the releases…'))], right: [] };
+  return { left: [listCard(V)], right: [tagsCard(V), rulesCard(V)] };
+}
+
+export function mountReleases(host, ctx) {
+  let V = views.get(host);
+  if (V && V.ctx.ws !== ctx.ws) { disposeReleases(host); V = null; }
+  if (V) { V.ctx = ctx; V.ids = scopeIds(ctx); if (host.firstChild !== V.root) host.replaceChildren(V.root); return; }
+  ensureComponentsCss();
+  ensureC3Css();
+  V = { ctx, ids: scopeIds(ctx), root: el('div', { class: 'c3', 'data-in-view': 'releases' }), releases: [], board: null, error: null, disposed: false, open: {}, form: newForm() };
+  V.stopPhone = c3Phone(V.root);
+  views.set(host, V);
+  host.replaceChildren(V.root);
+  load(V);
+}
+
+export function disposeReleases(host) {
+  const V = views.get(host);
+  if (!V) return;
+  V.disposed = true;
+  if (V.stopPhone) V.stopPhone();
+  views.delete(host);
+  if (V.root.parentNode === host) V.root.remove();
+}
+
+registerInitiativesView('releases', { label: 'Releases', mount: mountReleases, dispose: disposeReleases });