<base href="about:srcdoc"><script>(function(){function n(){parent.postMessage({t:'share:hash',h:location.hash},'*')}addEventListener('hashchange',n);addEventListener('message',function(e){if(e.source!==parent)return;var d=e.data||{};if(d.t==='share:setHash'&&typeof d.h==='string'&&d.h!==location.hash){location.hash=d.h}});addEventListener('DOMContentLoaded',function(){parent.postMessage({t:'share:ready',h:location.hash},'*')});})();</script><title>Form.io v5 Upgrade — Status Manifest</title>
<style>
:root {
--bg: #e7eaec;
--surface: #fbfcfc;
--surface-2: #eef1f2;
--ink: #131a1f;
--muted: #55636b;
--accent: #2f5d74;
--accent-ink: #ffffff;
--done: #3f7d52;
--done-bg: #e3ede5;
--pending: #b5541f;
--pending-bg: #f3e6dd;
--line: rgba(19, 26, 31, 0.14);
--line-soft: rgba(19, 26, 31, 0.08);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #12181b;
--surface: #1b2328;
--surface-2: #212b31;
--ink: #e7ecee;
--muted: #93a0a6;
--accent: #7cb2cb;
--accent-ink: #0d1417;
--done: #6fbe85;
--done-bg: #223229;
--pending: #e08a4e;
--pending-bg: #362720;
--line: rgba(231, 236, 238, 0.16);
--line-soft: rgba(231, 236, 238, 0.08);
}
}
:root[data-theme="dark"] {
--bg: #12181b;
--surface: #1b2328;
--surface-2: #212b31;
--ink: #e7ecee;
--muted: #93a0a6;
--accent: #7cb2cb;
--accent-ink: #0d1417;
--done: #6fbe85;
--done-bg: #223229;
--pending: #e08a4e;
--pending-bg: #362720;
--line: rgba(231, 236, 238, 0.16);
--line-soft: rgba(231, 236, 238, 0.08);
}
:root[data-theme="light"] {
--bg: #e7eaec;
--surface: #fbfcfc;
--surface-2: #eef1f2;
--ink: #131a1f;
--muted: #55636b;
--accent: #2f5d74;
--accent-ink: #ffffff;
--done: #3f7d52;
--done-bg: #e3ede5;
--pending: #b5541f;
--pending-bg: #f3e6dd;
--line: rgba(19, 26, 31, 0.14);
--line-soft: rgba(19, 26, 31, 0.08);
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 15.5px;
line-height: 1.55;
padding: 48px 20px 80px;
}
.sheet {
max-width: 760px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
/* ---- Letterhead ---- */
.letterhead {
padding: 34px 40px 26px;
border-bottom: 3px solid var(--accent);
}
.eyebrow {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 10px;
}
h1 {
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
font-weight: 600;
font-size: 29px;
line-height: 1.2;
margin: 0 0 8px;
text-wrap: balance;
letter-spacing: -0.005em;
}
.dek {
color: var(--muted);
font-size: 15px;
margin: 0 0 20px;
max-width: 60ch;
}
.meta-row {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 12px;
color: var(--muted);
}
.meta-row span b {
color: var(--ink);
font-weight: 600;
}
.meta-row a, .ws h3 a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.meta-row a:hover, .ws h3 a:hover { border-bottom-color: var(--accent); }
.meta-row a:focus-visible, .ws h3 a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---- Stat manifest strip ---- */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: 1px;
background: var(--line);
border-bottom: 1px solid var(--line);
}
.stat {
background: var(--surface-2);
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.stat .n {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-variant-numeric: tabular-nums;
font-size: 26px;
font-weight: 600;
color: var(--ink);
}
.stat .l {
font-size: 11.5px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ---- Why it matters ---- */
.why {
padding: 26px 40px 24px;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
}
.why h2 {
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
margin: 0 0 14px;
}
.why-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.why-list li {
position: relative;
padding-left: 19px;
font-size: 14.5px;
line-height: 1.55;
}
.why-list li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.why-list li b { color: var(--ink); }
/* ---- Body ---- */
.body { padding: 8px 40px 12px; }
.block { padding: 26px 0; border-bottom: 1px solid var(--line-soft); }
.block:last-child { border-bottom: none; }
.block-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.block-head h2 {
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
font-size: 17px;
font-weight: 600;
margin: 0;
}
.count-chip {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 11.5px;
font-variant-numeric: tabular-nums;
color: var(--muted);
white-space: nowrap;
}
ul.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
ul.items li {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 14.5px;
}
.mark {
flex: none;
width: 15px;
height: 15px;
border-radius: 3px;
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.mark.done { background: var(--done); }
.mark.done::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--done-bg); border-bottom: 2px solid var(--done-bg); transform: rotate(-45deg) translateY(-1px); }
.mark.pending { border: 2px solid var(--pending); background: transparent; }
li.is-done { color: var(--muted); }
li.is-done .txt { text-decoration: none; }
.txt b.tag {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 600;
color: var(--pending);
background: var(--pending-bg);
padding: 1px 6px;
border-radius: 3px;
margin-right: 8px;
white-space: nowrap;
}
/* Workstream section rule color */
.ws { border-left: 3px solid var(--pending); padding-left: 18px; margin-bottom: 22px; }
.ws:last-child { margin-bottom: 0; }
.ws h3 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink);
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
}
.ws h3 .n {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 500;
color: var(--muted);
text-transform: none;
letter-spacing: 0;
}
footer {
padding: 22px 40px 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
color: var(--muted);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (max-width: 560px) {
body { padding: 24px 12px 60px; }
.letterhead, .body, footer { padding-left: 22px; padding-right: 22px; }
h1 { font-size: 24px; }
}
</style>
<div class="sheet">
<div class="letterhead">
<p class="eyebrow">Status Manifest · Internal</p>
<h1>Form.io v5 Upgrade — Unification Across BPA-FE & DS-FE</h1>
<p class="dek">Consolidated pending list for the platform superior. Research, mapping, and the DS-FE proof-of-concept are complete; this tracks what remains.</p>
<div class="meta-row">
<span>Prepared <b>2026-07-08</b></span>
<span>Owner <b>Erick</b></span>
<span>Epic <b><a href="https://unctad.atlassian.net/browse/TOBE-17953" target="_blank" rel="noopener">TOBE-17953</a></b></span>
<span>Linked <b><a href="https://unctad.atlassian.net/browse/TOBE-13826" target="_blank" rel="noopener">TOBE-13826</a> · <a href="https://unctad.atlassian.net/browse/TOBE-15403" target="_blank" rel="noopener">15403</a> · <a href="https://unctad.atlassian.net/browse/TOBE-15402" target="_blank" rel="noopener">15402</a> · <a href="https://unctad.atlassian.net/browse/TOBE-16534" target="_blank" rel="noopener">16534</a></b></span>
</div>
</div>
<div class="stats">
<div class="stat"><span class="n">4</span><span class="l">Active tickets</span></div>
<div class="stat"><span class="n">2</span><span class="l">Frontends</span></div>
<div class="stat"><span class="n">3</span><span class="l">Forked libraries</span></div>
<div class="stat"><span class="n">4</span><span class="l">Widget forks</span></div>
<div class="stat"><span class="n">6</span><span class="l">Workstreams</span></div>
<div class="stat"><span class="n">15</span><span class="l">Pending items</span></div>
</div>
<div class="why">
<h2>Why this matters</h2>
<ul class="why-list">
<li><b>Unblocks BPA-FE's own Angular/Node upgrade.</b> BPA-FE has been stuck on Angular 15 and Node 14 specifically because of its old formio 3.x dependency — the Node/Angular upgrade ticket (TOBE-15402) is formally blocked by the formio upgrade (TOBE-15403).</li>
<li><b>Ends double maintenance across two divergent form stacks.</b> BPA-FE (formio 3.x) and DS-FE (formio 4.x) currently require every cross-cutting Form.io fix or feature to be built and tested twice; one shared v5 stack collapses that to once.</li>
<li><b>Cuts accumulating security debt.</b> Form.io's server-side dependency tree alone had carried dozens of unpatched CVEs before remediation; staying on old Angular/Node/formio versions keeps compounding the same exposure on the frontend side.</li>
<li><b>Gets both frontends back onto Form.io's maintained line.</b> 3.x and 4.x are behind upstream; v5 is where new features, plugins, and community fixes land going forward.</li>
<li><b>Fixes the architecture that caused the lag in the first place.</b> The investigation found that forking Form.io's core library to add customizations is what makes every upgrade hard; v5 moves customizations into proper extension modules instead, so future upgrades shouldn't repeat this multi-month effort.</li>
</ul>
</div>
<div class="body">
<div class="block">
<div class="block-head">
<h2>Done — research, mapping & consolidation</h2>
<span class="count-chip">7 / 7</span>
</div>
<ul class="items">
<li class="is-done"><span class="mark done"></span><span class="txt">Full Jira cluster mapped (4 active + 3 closed formio-server subtasks + 1 cancelled duplicate)</span></li>
<li class="is-done"><span class="mark done"></span><span class="txt">v5 library trio + 4 widget forks + 2 transitive deps verified installable off GitHub</span></li>
<li class="is-done"><span class="mark done"></span><span class="txt">Fork PR merged: formiojs-5.x Bitbucket→GitHub repoint</span></li>
<li class="is-done"><span class="mark done"></span><span class="txt">Architecture decision locked: unify both frontends on Angular 21</span></li>
<li class="is-done"><span class="mark done"></span><span class="txt">DS-FE recut branch built — Angular 17→21 + Form.io v5, full CI green (build + 1,347 tests + Docker image)</span></li>
<li class="is-done"><span class="mark done"></span><span class="txt">DS-FE runtime-verified on 4 core flows/components</span></li>
<li class="is-done"><span class="mark done"></span><span class="txt">2 latent bugs found inside the v5 fork itself, worked around locally</span></li>
</ul>
</div>
<div class="block">
<div class="block-head">
<h2>Pending</h2>
<span class="count-chip">15 items · 6 workstreams</span>
</div>
<div class="ws">
<h3>DS-FE — <a href="https://unctad.atlassian.net/browse/TOBE-13826" target="_blank" rel="noopener">TOBE-13826</a> <span class="n">3</span></h3>
<ul class="items">
<li><span class="mark pending"></span><span class="txt">Broader local runtime testing — datagrids, wizards, file upload, payment flow, Part B print/review, 3 unverified widgets</span></li>
<li><span class="mark pending"></span><span class="txt">Live computation check for custom jsonLogic ops on a real form</span></li>
<li><span class="mark pending"></span><span class="txt">Open PR and merge to develop (currently pushed only)</span></li>
</ul>
</div>
<div class="ws">
<h3>BPA-FE — <a href="https://unctad.atlassian.net/browse/TOBE-15403" target="_blank" rel="noopener">TOBE-15403</a> + <a href="https://unctad.atlassian.net/browse/TOBE-15402" target="_blank" rel="noopener">TOBE-15402</a> <span class="n">5</span></h3>
<ul class="items">
<li><span class="mark pending"></span><span class="txt">Angular upgrade 15→21</span></li>
<li><span class="mark pending"></span><span class="txt">Node upgrade 14→20/21</span></li>
<li><span class="mark pending"></span><span class="txt">Wire the same v5 stack (@formio/js 5 + @formio/angular 9)</span></li>
<li><span class="mark pending"></span><span class="txt">Remaining custom builder-component refactors still in QA</span></li>
<li><span class="mark pending"></span><span class="txt">Validate the Angular↔wrapper compile issue DS hit doesn't recur on BPA's build</span></li>
</ul>
</div>
<div class="ws">
<h3>Form.io fork hardening <span class="n">2</span></h3>
<ul class="items">
<li><span class="mark pending"></span><span class="txt">Fix missing <code>Components</code> import in the fork's EditGrid (search bug)</span></li>
<li><span class="mark pending"></span><span class="txt">Port sortable-columns feature into the fork itself (currently a DS-only override)</span></li>
</ul>
</div>
<div class="ws">
<h3>Platform tail — <a href="https://unctad.atlassian.net/browse/TOBE-16534" target="_blank" rel="noopener">TOBE-16534</a> <span class="n">2</span></h3>
<ul class="items">
<li><span class="mark pending"></span><span class="txt">DS-Backend print-bundle formio compatibility audit</span></li>
<li><span class="mark pending"></span><span class="txt">Stored form-JSON / bot-mapping schema-drift review + data-refresh scripts, platform-wide</span></li>
</ul>
</div>
<div class="ws">
<h3>Rollout <span class="n">2</span></h3>
<ul class="items">
<li><span class="mark pending"></span><span class="txt">Dev/test instance deploy + verification</span></li>
<li><span class="mark pending"></span><span class="txt">Production rollout across country instances, both stacks</span></li>
</ul>
</div>
<div class="ws">
<h3>Process <span class="n">1</span></h3>
<ul class="items">
<li><span class="mark pending"><b class="tag" style="display:none"></b></span><span class="txt">Jira tickets 13826 and 16534 still show "To Do" despite the code progress — needs status/comment sync</span></li>
</ul>
</div>
</div>
</div>
<footer>
<span>formio-v5-upgrade · project memory</span>
<span>DS-Frontend@83b8143a</span>
</footer>
</div>