Dev - #1138
Conversation
https://ui.contentstack.com/contentstack.min.css now returns HTTP 402 (DEPLOYMENT_DISABLED), so the app lost its grid, utility and brand styles at runtime. - drop the three dead CDN tags from index.html - add bootstrap@^5.3.6 and import bootstrap-grid + bootstrap-utilities, covering the grid/utility half of the old stylesheet - add scss/legacy-cdn-shim.scss for the non-utility brand rules that had no other source (link colour, .btn base, .pt-6, .card headings, .body-4/.body-6, .link-basic-icon with its arrow inlined as a data URI) All imports stay above the venus stylesheet, where the CDN <link> used to sit, so venus keeps winning the same conflicts it won before.
fix(ui): replace dead ui.contentstack.com CDN styles with local sources
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
🔒 Security Scan Results
⏱️ SLA Breach Summary
ℹ️ Vulnerabilities Without Available Fixes (Informational Only)The following vulnerabilities were detected but do not have fixes available (no upgrade or patch). These are excluded from failure thresholds:
✅ BUILD PASSED - All security checks passed |
umesh-more-cstk
left a comment
umesh-more-cstk
left a comment
There was a problem hiding this comment.
Review — dev → pre-stage promotion of the legacy CDN shim
The diff is 5 files in ui/, replacing the dead ui.contentstack.com stylesheet (HTTP 402) with a local bootstrap@5.3.6 grid/utilities pair plus a hand-written shim. No api / upload-api / connector code, so none of the archive-ingestion security surface is in play. All 9 CI checks green on 85b1049.
What I verified, and cleared
To test the claim that the swap is visual-neutral I pulled bootstrap@5.1.3 (what the CDN served), bootstrap@5.3.6 and @contentstack/venus-components@3.0.5, and diffed them against every class name used in ui/src:
- Class coverage — every Bootstrap class the app actually uses (
d-flex,vh-100,row,col-*,justify-content-*,h-100,pt-6,pb-0,mt-3,stretched-link, …) resolves inbootstrap-grid+bootstrap-utilities5.3.6, local SCSS, or venus. Nothing the CDN provided is left without a source.stretched-linkin particular is a helper, and helpers ship in thebootstrap-utilitiesbuild — soRegionalLogin's card overlay still works. - 5.1.3 → 5.3.6 drift — the only rule-text delta on a class this app uses is
.container:padding: var(--bs-gutter-x, .75rem)becamecalc(var(--bs-gutter-x) * .5)with--bs-gutter-x: 1.5rem. Identical computed 0.75rem. - Removed
<script>tags — nodata-bs-*/data-toggleattribute and nowindow.bootstrapreference anywhere inui/src, so droppingbootstrap.min.jsandcontentstack.min.jsis safe. box-sizing— venus shipshtml{box-sizing:border-box}+*,:after,:before{box-sizing:inherit}, so losing Reboot does not regress the box model.- Lockfile — one clean
bootstrapentry,@popperjs/core(its peer dep) already in the tree, no unrelated churn. $color-font-blackresolves via@import 'variables'(_variables.scss:26,#253143).
That is careful work, and the recovered rules match what the classes need. One gap survived the check, plus two questions — inline.
Findings
| # | Severity | Where |
|---|---|---|
| 1 | blocker | legacy-cdn-shim.scss:4 — Bootstrap Reboot dropped with no replacement; raw <button>/<input> lose font inheritance |
| 2 | question | App.tsx:21 — shim sits mid-bundle, not ahead of all CSS like the old <head> link |
| 3 | question | legacy-cdn-shim.scss:37 — .primary-btn not restored alongside .btn |
Housekeeping (non-blocking)
The PR template is entirely unfilled: title is Dev, the Jira link is still the MIGRATION-XXXX placeholder, and no PR Type or Affected Areas box is ticked. For a promotion PR that's mostly ceremony, but Affected Areas is the field a reviewer diffs the change against — ticking ui would help.
Generated by Claude Code
| // Rules recovered from https://ui.contentstack.com/contentstack.min.css, the stylesheet | ||
| // index.html used to load until that host was taken down (now HTTP 402, DEPLOYMENT_DISABLED). | ||
| // It was Bootstrap v5.1.3 plus Contentstack's brand layer; the grid/utility half is covered by | ||
| // the local `bootstrap` dependency, but these non-utility rules had no other source. Declarations |
There was a problem hiding this comment.
blocker: Bootstrap Reboot is a third thing the CDN file provided, and it has no replacement here.
The CDN served full Bootstrap 5.1.3 = Reboot + grid + utilities + components. This PR replaces it with bootstrap-grid.min.css + bootstrap-utilities.min.css, and neither contains a single bare-element rule — I checked both 5.3.6 dist files: zero button{}, input{}, select{}, textarea{}, svg{}. The two Reboot declarations that matter here:
button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
img,svg{vertical-align:middle}Nothing else supplies them:
- venus
main.csshas no barebutton/input/select/svgrule (onlytextarea{overflow:auto;resize:none}), and its Meyer-style reset element list excludes form controls andsvg. - Every bare-element rule in
ui/src/**/*.scssis nested inside a class, so none is global.
Failure scenario: ui/src/components/ContentMapper/index.tsx:3320,3355,3391 and entryMapper.tsx:539,573,609 render raw <button className="iconsholder list-button"> / className="list-button schema-preview". .list-button (ui/src/scss/App.scss:433) sets only background, border, width; .iconsholder and .schema-preview set no font either. Those buttons inherit Inter from html, body (App.scss:284-287) only because Reboot said font-family: inherit — browsers do not inherit font into form controls by default. After this change they fall back to the UA default (~400 13.3px Arial in Chrome), so the ContentMapper field list changes typeface and size. Same for the raw <input> at components/Modal/index.tsx:131 and the two SchemaModal buttons; inline <svg> additionally picks up baseline descender space without vertical-align: middle.
Suggested fix — append to this file. It loads before venus, exactly where the CDN <link> sat, so the original cascade is reproduced:
// Bootstrap Reboot: form controls don't inherit font by default, and the CDN's
// full-Bootstrap build was the only thing making them do so.
button,
input,
optgroup,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
img,
svg {
vertical-align: middle;
}Generated by Claude Code
| // venus import so venus's own px-scale classes (.mb-3, .ml-8 ...) keep winning. | ||
| import 'bootstrap/dist/css/bootstrap-grid.min.css'; | ||
| import 'bootstrap/dist/css/bootstrap-utilities.min.css'; | ||
| import './scss/legacy-cdn-shim.scss'; |
There was a problem hiding this comment.
question: The shim's cascade position isn't the same as the CDN <link>'s, and the comment above only reasons about venus.
The <link> lived in ui/index.html's <head>, ahead of every stylesheet Vite injects. This import sits partway through the bundle: the imports at App.tsx:7-13 (./store, ./components/Common/router, ErrorBoundary, AppLayout → MainHeader/SideBar) execute first, so their .scss is emitted before this line. Relative order vs. venus is preserved — that part of the comment is correct — but relative order vs. component CSS is inverted: shim rules that used to lose to a component rule at equal specificity now win.
I went looking for a live collision and couldn't find one. The shim's global-ish selectors (a, .link, small, .small, .card h1-h6) only meet nested, higher-specificity rules in MainHeader/index.scss:40, RegionalLogin/index.scss:42 and App.scss:135, so nothing flips today. Hence a question, not a bug — but the ordering is load-bearing and one new top-level a {} or .link {} in a component stylesheet would silently break it.
Suggested fix: either note the constraint in the comment, or move these three imports into ui/src/index.tsx between import './index.css' (line 5) and import App from './App' (line 6), where they genuinely precede all component CSS and match the old <head> position.
Generated by Claude Code
| // Only one element uses it: the <Link className="btn primary-btn"> on the home page, which | ||
| // wraps a venus <Button>. It contributes nothing but padding around that button and is a | ||
| // reasonable thing to delete from Home separately - restored here so the fix stays visual-neutral. | ||
| .btn { |
There was a problem hiding this comment.
question: .primary-btn isn't restored alongside .btn.
ui/src/pages/Home/index.tsx:46 is <Link to={...} className="btn primary-btn pb-0 mt-3">. This block brings .btn back, but .primary-btn has no definition in ui/src/**/*.scss, in venus main.css, or in Bootstrap 5.1.3 / 5.3.6 — so it came from the CDN's brand layer and is now a dead class. The host returns 402, so I can't recover what it declared.
If it supplied the purple background, note this block hands the element color: #fff with background-color: transparent, which is white-on-white for any text directly inside the <Link>. In practice the visible control is the nested venus <Button version="v2">, which carries its own colours, so I'd expect no visible change — but worth confirming against a before/after of Home. If it is genuinely dead, dropping primary-btn from the className (and then the .btn block along with it, as the comment above suggests) is cleaner than carrying a shim for it.
Generated by Claude Code
2 participants
🔗 Jira Ticket
MIGRATION-XXXX
📋 PR Type
📝 Description
What changed?
Why?
🧩 Affected Areas
api— Node.js backendui— React frontendupload-api— Upload API serverdocker/docker-compose🧪 How to Test
Expected result:
📸 Screenshots / Recordings
🔗 Related PRs / Dependencies
✅ Author Checklist
feature/,bugfix/, orhotfix/+ 5–30 lowercase chars.env/example.envupdated if new environment variables were addednpm test)README.md/ docs updated if behaviour changed👀 Reviewer Notes