@visns-studio/visns-components 6.1.0 → 6.1.1

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.1.0",
+    "version": "6.1.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -1823,6 +1823,23 @@ const DataGrid = forwardRef(
                 )
             );
 
+        /**
+         * A settings entry reserved for the platform owner.
+         *
+         * `roles` cannot express this: it matches Spatie role *names*, and
+         * super admin is deliberately not a role — roles are handed out from
+         * the console by the very administrators this privilege sits above.
+         * Navigation.jsx already reads `superAdminOnly` on menu entries the
+         * same way; this is the row-action twin of it.
+         *
+         * Presentation only, like every check in this file: it takes the icon
+         * away, it does not protect the endpoint behind it. A setting without
+         * the flag is unaffected, so this is dormant for every config that
+         * does not opt in.
+         */
+        const settingAllowedBySuperAdmin = (s) =>
+            s?.superAdminOnly !== true || Boolean(userProfile?.is_super_admin);
+
         const shouldShowGroupAction = (iconConfig, groupValue) => {
             // `showAll` is the every-row form of `show`: the icon appears only
             // when the condition holds for the whole group (e.g. close a tag
@@ -2934,6 +2951,12 @@ const DataGrid = forwardRef(
                 }
             }
 
+            // Owner-only actions (import a form template, etc.) — see
+            // settingAllowedBySuperAdmin
+            if (!settingAllowedBySuperAdmin(s)) {
+                allow = false;
+            }
+
             if (s.active) {
                 // Helper function to get nested values for main active condition (searches for target value)
                 const getNestedValueForMain = (data, path, targetValue) => {
@@ -4186,6 +4209,16 @@ const DataGrid = forwardRef(
                             if (actionColumnSettingIds.has(setting.id)) {
                                 return false;
                             }
+                            // Owner-only actions never render for anyone else,
+                            // so they must not reserve width either — a grid
+                            // whose only actions are super-admin ones gets no
+                            // Action column at all.
+                            if (
+                                setting.superAdminOnly === true &&
+                                !userProfile?.is_super_admin
+                            ) {
+                                return false;
+                            }
                             if (
                                 setting.roles &&
                                 Array.isArray(setting.roles) &&

package/src/components/generic/GenericFormBuilder.jsx

@@ -63,6 +63,72 @@ import {
 
 import styles from '../styles/GenericFormBuilder.module.scss'; // Import the CSS module
 
+/**
+ * Optimistic locking for the builder — opt-in, and dormant without it.
+ *
+ * The builder's PUT has always been a blind overwrite: whatever the tab holds
+ * wins, however old it is. That is survivable while the only way to change a
+ * template is the builder itself, and stops being survivable the moment
+ * something else can rewrite one — a spreadsheet import, say — because a tab
+ * left open across the import silently undoes it on the next Save.
+ *
+ * The handle is a content hash of `detail`, declared by the writer as "this is
+ * the version I believe I am overwriting". Backends that understand it refuse
+ * the write with 409 when the row has moved on; backends that do not simply
+ * ignore an unknown field, which is why this ships behind a config flag rather
+ * than on for everybody: a model with `$guarded = []` would try to write it as
+ * a column.
+ *
+ * @see FormTemplate::expectDetailHash() and FormTemplateEnvelope::hashDetail()
+ *      in the Prime backend — the canonical encoding below is that method's
+ *      twin and must not drift from it.
+ */
+const DEFAULT_LOCK_SCHEMA_VERSION = 1;
+
+/**
+ * The content hash of a template's `detail`, computed exactly as the server
+ * computes it.
+ *
+ * The server hashes `json_encode(['schema_version' => N, 'id' => id,
+ * 'detail' => detail], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)`.
+ * `JSON.stringify` of the same values is byte-identical to that: both leave
+ * slashes and non-ASCII raw, both use the same short escapes, and `detail`
+ * arrived here as JSON so its key order and value types are already whatever
+ * PHP encoded. Verified against all 35 live templates before this shipped —
+ * every hash matched.
+ *
+ * Returns null rather than guessing when it cannot be computed (no SubtleCrypto
+ * outside a secure context, no numeric id yet). A null hash is simply not sent,
+ * which leaves the save exactly as unguarded as it was before — the wrong
+ * hash would reject every save, and a missing one rejects none.
+ */
+const detailContentHash = async (templateId, detail, schemaVersion) => {
+    const subtle = globalThis.crypto?.subtle;
+
+    if (!subtle || typeof templateId !== 'number') {
+        return null;
+    }
+
+    const canonical = JSON.stringify({
+        schema_version: schemaVersion,
+        id: templateId,
+        detail: detail ?? [],
+    });
+
+    try {
+        const digest = await subtle.digest(
+            'SHA-256',
+            new TextEncoder().encode(canonical)
+        );
+
+        return [...new Uint8Array(digest)]
+            .map((byte) => byte.toString(16).padStart(2, '0'))
+            .join('');
+    } catch (error) {
+        return null;
+    }
+};
+
 function GenericFormBuilder({ setting, urlParam, userProfile }) {
     const editorRef = useRef(null);
     const routeParams = useParams();
@@ -79,10 +145,30 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
          * `outstanding_when` handling below does anything at all.
          */
         outstandingItems,
+        /**
+         * Opt-in collision guard. `true`, or `{ schemaVersion: n }` when the
+         * backend's envelope version is not 1. Absent for every app whose
+         * backend does not understand `expected_detail_hash`, in which case
+         * nothing below sends one and the save is unchanged.
+         */
+        optimisticLock,
     } = setting;
 
     const { dataId } = useParams();
     const [data, setData] = useState({});
+
+    /**
+     * The hash of the `detail` the server is believed to hold right now.
+     *
+     * Set from the load, and re-anchored after every save this tab makes — a
+     * hash describes one write, so leaving the load-time value in place would
+     * make the second save of a session compare against a version that this
+     * tab itself has already replaced.
+     */
+    const expectedDetailHashRef = useRef(null);
+    const lockEnabled = Boolean(optimisticLock);
+    const lockSchemaVersion =
+        optimisticLock?.schemaVersion ?? DEFAULT_LOCK_SCHEMA_VERSION;
     const [dataField, setDataField] = useState({
         id: '',
         label: '',
@@ -1707,6 +1793,49 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         }
     };
 
+    /**
+     * Re-anchor the collision guard on the version just written.
+     *
+     * Called after a save rather than after a re-fetch: the payload that was
+     * accepted IS what the row now holds, and asking the server again would
+     * cost a round trip to learn something already known.
+     */
+    const rememberDetailHash = async (templateId, detail) => {
+        if (!lockEnabled) {
+            return;
+        }
+
+        expectedDetailHashRef.current = await detailContentHash(
+            templateId,
+            detail,
+            lockSchemaVersion
+        );
+    };
+
+    /**
+     * "Somebody else got here first", in the only words that help.
+     *
+     * No silent retry, ever. A retry would re-send this tab's whole `detail`
+     * over the top of whatever arrived in the meantime, which is precisely the
+     * overwrite the guard exists to prevent.
+     */
+    const handleStaleTemplate = (payload) => {
+        const versions =
+            payload?.expected_version && payload?.current_version
+                ? ` (you have ${payload.expected_version}, the system now has ${payload.current_version})`
+                : '';
+
+        toast.error(
+            <div>
+                <strong>Nothing was saved.</strong> This template was changed
+                elsewhere — imported from a spreadsheet, or edited in another
+                tab — after you opened it{versions}. Reload the page before
+                saving, or your changes would undo theirs.
+            </div>,
+            { autoClose: false }
+        );
+    };
+
     const handleSubmit = async (e) => {
         try {
             if (e) {
@@ -1719,15 +1848,34 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 }
 
                 if (_error === '') {
+                    const savedDetail = data.detail;
+
+                    // The guard answers a 409 in its own words, so the shared
+                    // handler's toast is suppressed and replayed in the catch
+                    // for every other failure — same message, same behaviour,
+                    // just deferred until the status is known.
                     const res = await CustomFetch(
                         `${fetchUrl}/${dataId}`,
                         'PUT',
                         {
                             ...data,
-                        }
+                            // Only when the backend understands it, and only
+                            // when a hash could actually be computed. Absent,
+                            // the server saves exactly as it always has.
+                            ...(lockEnabled && expectedDetailHashRef.current
+                                ? {
+                                      expected_detail_hash:
+                                          expectedDetailHashRef.current,
+                                  }
+                                : {}),
+                        },
+                        null,
+                        lockEnabled ? () => {} : null
                     );
 
                     if (res.data.error === '') {
+                        await rememberDetailHash(data.id, savedDetail);
+
                         toast.success(
                             "You have successfully updated the form's detail."
                         );
@@ -1741,6 +1889,32 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 }
             }
         } catch (err) {
+            if (err?.response?.status === 409) {
+                handleStaleTemplate(err.response.data);
+
+                return;
+            }
+
+            if (lockEnabled) {
+                // Replay what the shared handler would have said, in the same
+                // order it would have said it — field errors before the
+                // envelope's generic message.
+                const payload = err?.response?.data;
+                const message = payload?.errors
+                    ? Object.values(payload.errors).flat().join('<br />')
+                    : payload?.message || null;
+
+                if (message && message !== 'Unauthenticated.') {
+                    toast.error(<div>{parse(String(message))}</div>);
+
+                    return;
+                }
+
+                if (err?.response) {
+                    return;
+                }
+            }
+
             toast.error(`Error: ${err}`);
         }
     };
@@ -1754,6 +1928,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             );
 
             setData(res.data);
+
+            // The version this tab is editing from. Everything the guard does
+            // is measured against this moment.
+            await rememberDetailHash(res.data?.id, res.data?.detail);
         } catch (err) {
             toast.error(`Error: ${err}`);
         }
@@ -1761,17 +1939,26 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
 
     const saveOnSort = async () => {
         try {
+            const savedDetail = data.detail;
             const res = await CustomFetch(
                 `${fetchUrl}/sort/${dataId}`,
                 'POST',
                 {
-                    detail: data.detail,
+                    detail: savedDetail,
                 }
             );
 
             if (res.data.error !== '') {
                 toast.error(String(res.data.error));
+
+                return;
             }
+
+            // Re-ordering writes `detail` too, so the guard has to follow it.
+            // The sort endpoint reads only `detail` and cannot be guarded from
+            // here — but leaving the hash behind would make the next Save
+            // report a collision this tab caused itself.
+            await rememberDetailHash(data.id, savedDetail);
         } catch (err) {
             toast.error(`Error: ${err}`);
         }

package/src/components/styles/Login.module.scss

@@ -52,6 +52,17 @@
     // A scrim anchored to the bottom-left, where the copy sits — not a flat
     // wash over the whole image, which would dull the dusk light that makes
     // the photograph worth using.
+    //
+    // The foot is a near-solid plate rather than a fade. The brand line has to
+    // hold against whatever the photograph is doing behind it, and this one is
+    // bright exactly where the type sits, which left "Prime Builders" washing
+    // into the render. Held high — 0.88 still at 18%, which is where the ink
+    // block ends — so the whole block reads on one ground, then released
+    // quickly to 0.06 at the top, so the sky above is still a photograph and
+    // not a tint.
+    //
+    // Shared verbatim with the supervisor PWA
+    // (prime-web-nextjs/app/login/Login.module.scss). If one moves, move both.
     &::after {
         content: '';
         position: absolute;
@@ -59,9 +70,11 @@
         background:
             linear-gradient(
                 to top,
-                rgba(16, 25, 42, 0.92) 0%,
-                rgba(16, 25, 42, 0.55) 32%,
-                rgba(16, 25, 42, 0.08) 62%
+                rgba(16, 25, 42, 0.94) 0%,
+                rgba(16, 25, 42, 0.88) 18%,
+                rgba(16, 25, 42, 0.62) 42%,
+                rgba(16, 25, 42, 0.22) 70%,
+                rgba(16, 25, 42, 0.06) 100%
             ),
             linear-gradient(
                 to right,
@@ -90,6 +103,11 @@
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.22em;
+    // Stated, not left to the cascade: global.css sets
+    // `p { line-height: var(--para-height) }`, which is 1.6 here. That put the
+    // kicker on a taller line than the same kicker in the PWA, so the red dash
+    // sat at a different height and the gap beneath it read as wider.
+    line-height: 1.4;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.75);
     // The single use of the logo's red in the whole screen.
@@ -114,6 +132,10 @@
     line-height: 1;
     // Tight tracking at display size — Barlow opens up as it scales.
     letter-spacing: -0.02em;
+    // Stated rather than inherited from .brandInk: this is the one line on the
+    // screen that has to be white, and finding that out should not mean
+    // reading the parent.
+    color: #fff;
     text-wrap: balance;
 }
 
@@ -123,6 +145,10 @@
     font-size: 1rem;
     font-weight: 300;
     line-height: 1.5;
+    // No-op against this app's globals, but the PWA's own `p` rule tracks body
+    // copy at 0.015rem, so the value is pinned in both files rather than left
+    // to whichever global layer the screen happens to be rendered under.
+    letter-spacing: 0;
     color: rgba(255, 255, 255, 0.82);
 }