Feat v0.3.7 package audit (#20)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #20.
This commit is contained in:
355
packages/workflow-demo/js/main.js
Normal file
355
packages/workflow-demo/js/main.js
Normal file
@@ -0,0 +1,355 @@
|
||||
// ==========================================
|
||||
// Switchboard Core — Workflow Demo Surface
|
||||
// ==========================================
|
||||
// Interactive walkthrough of the four example workflow packages.
|
||||
// Shows workflow cards with feature badges, stage flow diagrams,
|
||||
// Starlark code viewer, and API curl examples.
|
||||
// ==========================================
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const SURFACE_ID = 'workflow-demo';
|
||||
if (window.__SURFACE__ !== SURFACE_ID) return;
|
||||
|
||||
const base = window.__BASE__ || '';
|
||||
|
||||
// ── Workflow catalog ──────────────────────────
|
||||
|
||||
const WORKFLOWS = [
|
||||
{
|
||||
slug: 'bug-report-triage',
|
||||
title: 'Bug Report Triage',
|
||||
icon: '🐛',
|
||||
description: 'Public bug report submission with severity-based routing, team assignment, and SLA timers.',
|
||||
badges: ['Public Entry', 'Branch Rules', 'SLA Timer', 'Team Assignment'],
|
||||
tier: 'browser',
|
||||
stages: [
|
||||
{ name: 'submit', mode: 'form', audience: 'public' },
|
||||
{ name: 'classify', mode: 'form', audience: 'team', note: 'branch rules' },
|
||||
{ name: 'fix-critical', mode: 'form', audience: 'team', note: 'SLA 1h', branch: true },
|
||||
{ name: 'fix-normal', mode: 'form', audience: 'team', branch: true },
|
||||
{ name: 'verify', mode: 'review', audience: 'team' },
|
||||
],
|
||||
curl: [
|
||||
'# 1. Start public instance (no auth required)\ncurl -X POST $BASE/api/v1/public/workflows/$WF_ID/start \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"reporter_email": "user@example.com", "summary": "Login broken", "component": "ui", "severity": "critical", "steps": "1. Click login", "expected": "Login page", "actual": "500 error"}}\'',
|
||||
'# 2. Resume (check status)\ncurl $BASE/api/v1/public/workflows/resume/$TOKEN',
|
||||
'# 3. Team member claims classify assignment\ncurl -X POST $BASE/api/v1/teams/$TEAM/assignments/$ASSIGN_ID/claim \\\n -H "Authorization: Bearer $TOKEN"',
|
||||
'# 4. Advance classify (triggers branch rule)\ncurl -X POST $BASE/api/v1/teams/$TEAM/instances/$INST/advance \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"severity": "critical", "notes": "Confirmed production issue"}}\'',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'employee-onboarding',
|
||||
title: 'Employee Onboarding',
|
||||
icon: '🏢',
|
||||
description: 'Automated provisioning with Starlark hooks, manager signoff gate, and welcome notification.',
|
||||
badges: ['Starlark', 'Signoff Gate', 'Rejection Reroute', 'db.insert', 'notifications.send'],
|
||||
tier: 'starlark',
|
||||
stages: [
|
||||
{ name: 'new-hire-info', mode: 'form', audience: 'team' },
|
||||
{ name: 'provision-accounts', mode: 'automated', audience: 'system', note: 'Starlark' },
|
||||
{ name: 'manager-signoff', mode: 'review', audience: 'team', note: 'signoff gate' },
|
||||
{ name: 'it-setup', mode: 'form', audience: 'team' },
|
||||
{ name: 'welcome', mode: 'automated', audience: 'system', note: 'Starlark' },
|
||||
],
|
||||
starlark: 'on_provision(ctx): db.insert("provisions", ...), notifications.send(...)\non_welcome(ctx): db.insert("onboarding_log", ...), notifications.send(...)',
|
||||
curl: [
|
||||
'# 1. Start instance (team auth required)\ncurl -X POST $BASE/api/v1/teams/$TEAM/workflows/$WF_ID/start \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"full_name": "Alice Smith", "department": "engineering", "needs_vpn": "true", "needs_admin": "false", "equipment": "developer workstation"}}\'',
|
||||
'# 2. After auto-provision, submit manager signoff\ncurl -X POST $BASE/api/v1/instances/$INST/signoffs \\\n -H "Authorization: Bearer $MANAGER_TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"action": "approve"}\'',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'content-approval',
|
||||
title: 'Content Approval',
|
||||
icon: '📝',
|
||||
description: 'Multi-party review with quorum signoff (2 approvals) and revision cycle loop.',
|
||||
badges: ['Multi-party Signoff', 'Quorum', 'Rejection Reroute', 'Review Cycle'],
|
||||
tier: 'browser',
|
||||
stages: [
|
||||
{ name: 'draft', mode: 'form', audience: 'team' },
|
||||
{ name: 'review', mode: 'review', audience: 'team', note: '2 approvals' },
|
||||
{ name: 'revision', mode: 'form', audience: 'team', note: 'loops to review' },
|
||||
{ name: 'publish', mode: 'form', audience: 'team' },
|
||||
],
|
||||
curl: [
|
||||
'# 1. Submit draft\ncurl -X POST $BASE/api/v1/teams/$TEAM/workflows/$WF_ID/start \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"title": "Q1 Update", "body": "...", "category": "blog"}}\'',
|
||||
'# 2. Reviewer A approves\ncurl -X POST $BASE/api/v1/instances/$INST/signoffs \\\n -H "Authorization: Bearer $REVIEWER_A" \\\n -d \'{"action": "approve"}\'',
|
||||
'# 3. Reviewer B rejects -> routes to revision\ncurl -X POST $BASE/api/v1/instances/$INST/signoffs \\\n -H "Authorization: Bearer $REVIEWER_B" \\\n -d \'{"action": "reject"}\'',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'webhook-notifier',
|
||||
title: 'Webhook Notifier',
|
||||
icon: '🔔',
|
||||
description: 'Outbound HTTP delivery via Starlark with connection credentials and delivery logging.',
|
||||
badges: ['Starlark', 'http.post', 'connections.get', 'db.insert'],
|
||||
tier: 'starlark',
|
||||
stages: [
|
||||
{ name: 'configure', mode: 'form', audience: 'team' },
|
||||
{ name: 'fire-webhook', mode: 'automated', audience: 'system', note: 'http.post' },
|
||||
{ name: 'result', mode: 'review', audience: 'team' },
|
||||
],
|
||||
starlark: 'on_fire(ctx): http.post(url, body=payload), db.insert("webhook_log", ...)',
|
||||
curl: [
|
||||
'# 1. Configure and start\ncurl -X POST $BASE/api/v1/teams/$TEAM/workflows/$WF_ID/start \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"webhook_url": "https://webhook.site/test", "event_name": "deploy.complete", "payload": "{}"}}\'',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// ── Init ─────────────────────────────────────
|
||||
|
||||
async function _init() {
|
||||
const mount = document.getElementById('extension-mount');
|
||||
if (!mount) return;
|
||||
|
||||
const surface = document.createElement('div');
|
||||
surface.className = 'surface-workflow-demo';
|
||||
mount.appendChild(surface);
|
||||
|
||||
// Topbar with user menu
|
||||
const topbar = document.createElement('div');
|
||||
topbar.className = 'demo-topbar';
|
||||
topbar.innerHTML = '<h1>Workflow Demo</h1>';
|
||||
surface.appendChild(topbar);
|
||||
sw.userMenu(topbar, { flyout: 'down' });
|
||||
|
||||
// Subtitle
|
||||
const subtitle = document.createElement('p');
|
||||
subtitle.className = 'demo-subtitle';
|
||||
subtitle.textContent = 'Four example workflows that prove the engine works end-to-end. Install any package via Admin > Packages.';
|
||||
surface.appendChild(subtitle);
|
||||
|
||||
// Workflow cards
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'demo-grid';
|
||||
surface.appendChild(grid);
|
||||
|
||||
// Fetch installed workflows to check status
|
||||
// The API returns { data: [...], total, page } — _unwrap keeps the
|
||||
// full object when siblings exist, so extract .data ourselves.
|
||||
let installed = {};
|
||||
try {
|
||||
const resp = await sw.api.get('/api/v1/workflows');
|
||||
const list = Array.isArray(resp) ? resp : (resp && resp.data ? resp.data : []);
|
||||
for (const wf of list) {
|
||||
if (wf.slug) installed[wf.slug] = wf;
|
||||
}
|
||||
} catch (e) { /* ignore — show all as not-installed */ }
|
||||
|
||||
for (const wf of WORKFLOWS) {
|
||||
grid.appendChild(_buildCard(wf, installed[wf.slug]));
|
||||
}
|
||||
}
|
||||
|
||||
// ── Card builder ─────────────────────────────
|
||||
|
||||
function _buildCard(wf, installedWf) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'demo-card';
|
||||
|
||||
// Title row
|
||||
const titleRow = document.createElement('div');
|
||||
titleRow.className = 'card-title-row';
|
||||
titleRow.innerHTML = '<span class="card-icon">' + wf.icon + '</span>'
|
||||
+ '<h2>' + _esc(wf.title) + '</h2>'
|
||||
+ '<span class="card-tier badge-' + wf.tier + '">' + wf.tier + '</span>';
|
||||
card.appendChild(titleRow);
|
||||
|
||||
// Description
|
||||
const desc = document.createElement('p');
|
||||
desc.className = 'card-desc';
|
||||
desc.textContent = wf.description;
|
||||
card.appendChild(desc);
|
||||
|
||||
// Badges
|
||||
const badges = document.createElement('div');
|
||||
badges.className = 'card-badges';
|
||||
for (const b of wf.badges) {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'badge';
|
||||
span.textContent = b;
|
||||
badges.appendChild(span);
|
||||
}
|
||||
card.appendChild(badges);
|
||||
|
||||
// Stage flow diagram
|
||||
card.appendChild(_buildStageDiagram(wf));
|
||||
|
||||
// Starlark viewer (if applicable)
|
||||
if (wf.starlark) {
|
||||
card.appendChild(_buildCollapsible('Starlark Hooks', '<pre><code>' + _esc(wf.starlark) + '</code></pre>'));
|
||||
}
|
||||
|
||||
// API examples
|
||||
if (wf.curl && wf.curl.length) {
|
||||
const curlHtml = wf.curl.map(function (c) { return '<pre><code>' + _esc(c) + '</code></pre>'; }).join('');
|
||||
card.appendChild(_buildCollapsible('API Examples', curlHtml));
|
||||
}
|
||||
|
||||
// Status + action
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'card-actions';
|
||||
|
||||
if (installedWf) {
|
||||
const isActive = installedWf.is_active;
|
||||
const version = installedWf.version || 0;
|
||||
// version > 1 means published at least once (version increments on edit, publish snapshots it)
|
||||
const isPublished = version >= 2;
|
||||
const isReady = isActive && isPublished;
|
||||
|
||||
// Installed badge
|
||||
const status = document.createElement('span');
|
||||
status.className = 'badge badge-installed';
|
||||
status.textContent = 'Installed';
|
||||
actions.appendChild(status);
|
||||
|
||||
if (!isActive) {
|
||||
const hint = document.createElement('span');
|
||||
hint.className = 'badge badge-needs-publish';
|
||||
hint.textContent = 'Not Active';
|
||||
actions.appendChild(hint);
|
||||
} else if (!isPublished) {
|
||||
const hint = document.createElement('span');
|
||||
hint.className = 'badge badge-needs-publish';
|
||||
hint.textContent = 'Not Published';
|
||||
actions.appendChild(hint);
|
||||
}
|
||||
|
||||
const tryBtn = document.createElement('button');
|
||||
tryBtn.className = 'btn btn-primary';
|
||||
tryBtn.textContent = 'Try It';
|
||||
tryBtn.disabled = !isReady;
|
||||
if (!isReady) {
|
||||
tryBtn.title = 'Activate and publish this workflow in Team Admin first';
|
||||
}
|
||||
tryBtn.onclick = function () {
|
||||
if (!isReady) return;
|
||||
if (wf.slug === 'bug-report-triage') {
|
||||
window.open(base + '/api/v1/public/workflows/' + installedWf.id + '/form', '_blank');
|
||||
} else {
|
||||
sw.toast('Navigate to your team admin to start a ' + wf.title + ' instance.', 'info');
|
||||
}
|
||||
};
|
||||
actions.appendChild(tryBtn);
|
||||
|
||||
// Public link for public_link workflows
|
||||
if (installedWf.entry_mode === 'public_link' && isReady) {
|
||||
const linkRow = document.createElement('div');
|
||||
linkRow.className = 'public-link-row';
|
||||
const linkInput = document.createElement('input');
|
||||
linkInput.type = 'text';
|
||||
linkInput.readOnly = true;
|
||||
linkInput.value = window.location.origin + base + '/api/v1/public/workflows/' + installedWf.id + '/start';
|
||||
linkRow.appendChild(linkInput);
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.className = 'btn-copy';
|
||||
copyBtn.textContent = 'Copy';
|
||||
copyBtn.onclick = function () {
|
||||
navigator.clipboard.writeText(linkInput.value).then(function () {
|
||||
copyBtn.textContent = 'Copied!';
|
||||
setTimeout(function () { copyBtn.textContent = 'Copy'; }, 1500);
|
||||
});
|
||||
};
|
||||
linkRow.appendChild(copyBtn);
|
||||
card.appendChild(linkRow);
|
||||
}
|
||||
} else {
|
||||
const status = document.createElement('span');
|
||||
status.className = 'badge badge-not-installed';
|
||||
status.textContent = 'Not Installed';
|
||||
actions.appendChild(status);
|
||||
}
|
||||
|
||||
card.appendChild(actions);
|
||||
return card;
|
||||
}
|
||||
|
||||
// ── Stage flow diagram ───────────────────────
|
||||
|
||||
function _buildStageDiagram(wf) {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'stage-flow';
|
||||
|
||||
const stages = wf.stages;
|
||||
let hasBranch = false;
|
||||
|
||||
for (let i = 0; i < stages.length; i++) {
|
||||
const s = stages[i];
|
||||
|
||||
const node = document.createElement('div');
|
||||
node.className = 'stage-node stage-' + s.audience;
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'stage-label';
|
||||
label.textContent = s.name;
|
||||
node.appendChild(label);
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'stage-meta';
|
||||
meta.textContent = s.mode + (s.audience !== 'team' ? ' (' + s.audience + ')' : '');
|
||||
node.appendChild(meta);
|
||||
|
||||
if (s.note) {
|
||||
const note = document.createElement('div');
|
||||
note.className = 'stage-note';
|
||||
note.textContent = s.note;
|
||||
node.appendChild(note);
|
||||
}
|
||||
|
||||
container.appendChild(node);
|
||||
|
||||
// Arrow (except after last stage)
|
||||
if (i < stages.length - 1 && !stages[i + 1].branch) {
|
||||
const arrow = document.createElement('div');
|
||||
arrow.className = 'stage-arrow';
|
||||
arrow.textContent = '\u2192';
|
||||
container.appendChild(arrow);
|
||||
} else if (stages[i + 1] && stages[i + 1].branch) {
|
||||
if (!hasBranch) {
|
||||
const split = document.createElement('div');
|
||||
split.className = 'stage-arrow stage-branch';
|
||||
split.textContent = '\u2193\u2197';
|
||||
container.appendChild(split);
|
||||
hasBranch = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
// ── Collapsible section ──────────────────────
|
||||
|
||||
function _buildCollapsible(title, innerHtml) {
|
||||
const details = document.createElement('details');
|
||||
details.className = 'card-collapsible';
|
||||
|
||||
const summary = document.createElement('summary');
|
||||
summary.textContent = title;
|
||||
details.appendChild(summary);
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'collapsible-content';
|
||||
content.innerHTML = innerHtml;
|
||||
details.appendChild(content);
|
||||
|
||||
return details;
|
||||
}
|
||||
|
||||
// ── Helpers ───────────────────────────────────
|
||||
|
||||
function _esc(s) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
// ── Boot ──────────────────────────────────────
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', _init);
|
||||
} else {
|
||||
_init();
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user