Release 0.11.1: keep configurator errors visible across tabs

Author: O2eg

README.md

@@ -889,7 +889,7 @@ const result = pgc.generate({ cpu_cores: 8, ram_value: '16Gi', pg_version: '18'
 
 result.config.shared_buffers;                    // '3622MB'
 result.advisories.filter((a) => a.severity === 'warning');
-renderConf(result, { version: '0.11.0', host: 'db-1' });
+renderConf(result, { version: '0.11.1', host: 'db-1' });
 ```
 
 `createConfigurator()` reads the bundled rule data from disk, which needs Node.
@@ -959,7 +959,7 @@ python -m twine check dist/*
 ```
 
 Tagged releases are built and published through PyPI Trusted Publishing. A tag
-must match the package version, for example `v0.11.0`.
+must match the package version, for example `v0.11.1`.
 
 ## License and provenance
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pg-configurator-web",
   "private": true,
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Browser and Node port of the pg-configurator calculation; the Python package in this repository is the reference implementation",
   "type": "module",
   "license": "MIT",

src/pg_configurator/version.py

@@ -1,3 +1,3 @@
 """pg_configurator version information."""
 
-__version__ = "0.11.0"
+__version__ = "0.11.1"

web/configurator.template.html

@@ -13,6 +13,7 @@
 </head>
 <body class="pv">
 <div class="pc-wrap">
+  <div class="pc-error pc-error-quiet" id="error" role="alert"></div>
   <div class="pc-top">
     <div>
       <h1 class="pc-title">pg-configurator<small>Explainable, hardware-aware PostgreSQL configuration</small></h1>
@@ -57,9 +58,6 @@ <h1 class="pc-title">pg-configurator<small>Explainable, hardware-aware PostgreSQ
     <div class="pc-actions" id="actions"></div>
   </div>
   <div id="panels"></div>
-  <!-- The form moves this into the Main panel, between the fields and the
-       settings they produce; it lives here only so the markup stays declarative. -->
-  <div class="pc-error pc-error-quiet" id="error" role="alert"></div>
 </div>
 
 <script type="application/json" id="pgc-rules">{}</script><!--PC:DATA-RULES-->

web/css/pgc.css

@@ -591,11 +591,7 @@ body {
 /* ---------------------------------------------------------------- output */
 
 .pc-error {
-  /* The message sits between the fields and the settings, so it needs air on
-     both sides. `.pc-form` ends flush with its last group, contributing no
-     bottom margin of its own, and the gap below collapses to the section's
-     own top margin — so both sides are set to the same step here. */
-  margin: var(--pc-sp-6) 0 var(--pc-sp-4);
+  margin: 0 0 var(--pc-sp-4);
   padding: 10px 14px;
   border: 1px solid var(--vw-border-strong);
   border-radius: 10px;
@@ -605,14 +601,10 @@ body {
   font-size: var(--pv-fs-sm);
   line-height: 1.5;
   white-space: pre-wrap;
-  /* One line of text plus the padding and border above and below it. The slot
-     is held open whether or not there is a message, so the panels below do not
-     move as input goes in and out of range. Box-sizing is border-box here. */
-  min-height: calc(1.5em + 22px);
 }
 
 .pc-error-quiet {
-  visibility: hidden;
+  display: none;
 }
 
 .pc-code {

web/data/input-schema.json

@@ -1,6 +1,6 @@
 {
   "generator": "tools/export_web_data.py",
-  "package_version": "0.11.0",
+  "package_version": "0.11.1",
   "payload": {
     "counts": {
       "calculation": 35,

web/data/pg_settings.json

@@ -1,6 +1,6 @@
 {
   "generator": "tools/export_web_data.py",
-  "package_version": "0.11.0",
+  "package_version": "0.11.1",
   "payload": {
     "base": {
       "DateStyle": [

web/data/rules.json

@@ -1,6 +1,6 @@
 {
   "generator": "tools/export_web_data.py",
-  "package_version": "0.11.0",
+  "package_version": "0.11.1",
   "payload": {
     "counts": {
       "deprecated_sentinels": 3,

web/src/render.js

@@ -198,7 +198,7 @@ const MAIN_OUTPUT_TABS = [
  */
 const HIDES_STALE_OUTPUT = new Set(['conf', 'settings', 'patroni', 'diff']);
 
-const STALE_NOTICE = 'Not shown while the input is invalid — see the message on the Main tab.';
+const STALE_NOTICE = 'Not shown while the input is invalid — see the message above.';
 
 const el = (tag, className, text) => {
   const node = document.createElement(tag);
@@ -429,11 +429,6 @@ export class ConfiguratorPage {
     this.syncGroups();
     panel.append(form);
 
-    // The message belongs with the fields that cause it, not above the tab row:
-    // it reports on the values just entered, and it sits directly over the
-    // settings it is suppressing.
-    panel.append(this.errorBox);
-
     // Deployable output sits right below the form. These views share the same
     // calculation and stay inside Main so changing an input and copying its
     // result no longer requires a trip through the page-wide navigation.
@@ -833,9 +828,7 @@ export class ConfiguratorPage {
   }
 
   renderError() {
-    // The box keeps its place whether or not it says anything: hiding it
-    // outright made every panel below jump on each keystroke that fixed or
-    // broke the input.
+    // The shared banner stays visible when switching between tabs.
     this.errorBox.textContent = this.error ?? '';
     this.errorBox.classList.toggle('pc-error-quiet', this.error === null);
     for (const [, node] of this.fieldNodes) node.wrap.classList.remove('pc-invalid');

web/tools/browser-smoke.py

@@ -760,30 +760,22 @@ def drag(dest, position):
         # --- invalid input reports without blanking the page ---------------
         page.click("#tab-main")
 
-        def form_top():
-            return page.evaluate(
-                "() => Math.round("
-                "document.querySelector('#panel-main .pc-section').getBoundingClientRect().top)"
-            )
-
-        settled = form_top()
         fill("#readout-db_ram", "32Zi")
         check(page.locator("#error").is_visible(), "an invalid size produced no error")
-        # The slot is reserved: a message may not shove the page around.
         check(
-            form_top() == settled,
-            f"the settings moved by {form_top() - settled}px when the message appeared",
+            page.locator("#error").evaluate("el => el.closest('[role=tabpanel]') === null"),
+            "the shared error banner is inside a tab panel",
         )
         error_text = page.locator("#error").inner_text()
         check("Unknown size unit" in error_text, f"unexpected error text: {error_text}")
         check(
             page.evaluate(
                 "() => Math.round("
-                "document.querySelector('#panel-main .pc-section').getBoundingClientRect().top"
+                "document.querySelector('.pc-top').getBoundingClientRect().top"
                 " - document.querySelector('#error').getBoundingClientRect().bottom)"
             )
             >= 8,
-            "the message sits flush against the settings below it",
+            "the error banner is not above the page header with a gap",
         )
         # A result the current input did not produce must not stay on offer.
         check(
@@ -806,14 +798,16 @@ def form_top():
             page.locator("#panel-calculation tbody tr").count() > 0,
             "the calculation was blanked as well",
         )
+        for tab in ("calculation", "advisories", "overrides", "diff", "main"):
+            page.click(f"#tab-{tab}")
+            check(page.locator("#error").is_visible(), f"the error disappeared on {tab}")
+            check(
+                page.locator("[role=alert]:visible").count() == 1,
+                f"the error banner is duplicated on {tab}",
+            )
 
-        page.click("#tab-main")
         fill("#readout-db_ram", "32Gi")
         check(not page.locator("#error").is_visible(), "the error stayed after a fix")
-        check(
-            form_top() == settled,
-            f"the settings moved by {form_top() - settled}px when the message went away",
-        )
         check(
             page.locator("#main-output-panel-settings tbody tr").count() > 100,
             "the settings table did not come back after a fix",