@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/Fetch.jsx

@@ -4,6 +4,9 @@ import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
 
+// import.meta.env is Vite-only; this reads it safely under any bundler.
+import { readBuildEnv } from './utils/buildEnv';
+
 // Create a singleton QueryClient instance for the entire visns-components ecosystem
 const createQueryClient = () => {
     return new QueryClient({
@@ -165,7 +168,8 @@ const originalCustomFetch = (
     method,
     formData,
     successCallback = null,
-    errorCallback = null
+    errorCallback = null,
+    options = {}
 ) => {
     const baseUrl = '';
 
@@ -191,7 +195,7 @@ const originalCustomFetch = (
         headers['X-XSRF-TOKEN'] = csrfToken;
     }
     const MAX_PAYLOAD_SIZE_MB =
-        parseFloat(import.meta.env.VITE_MAX_PAYLOAD_SIZE_MB) || 4.5;
+        parseFloat(readBuildEnv('VITE_MAX_PAYLOAD_SIZE_MB')) || 4.5;
     const MAX_PAYLOAD_SIZE = MAX_PAYLOAD_SIZE_MB * 1024 * 1024; // Convert MB to bytes
 
     // Estimate headers size
@@ -304,6 +308,40 @@ const originalCustomFetch = (
                 resolve(responseObj);
             })
             .catch((error) => {
+                /*
+                 * `options.silentStatuses` — an opt-in list of HTTP statuses
+                 * that are part of a flow rather than a failure, and so must
+                 * not be announced.
+                 *
+                 * The vault's reveal endpoint answers 423 to mean "confirm
+                 * your password first", which the caller handles by drawing a
+                 * confirm panel. Without this, that perfectly ordinary step
+                 * either toasts an error at the user or forces the caller to
+                 * pass an errorCallback that can only see a message string —
+                 * never the status it needs to branch on.
+                 *
+                 * A listed status skips the toast AND the errorCallback, and
+                 * rejects with the status and parsed body hung directly off
+                 * the error so `catch (e) { e.status; e.data }` works. Opt-in,
+                 * so every existing caller behaves exactly as before.
+                 */
+                const silentStatuses = Array.isArray(options.silentStatuses)
+                    ? options.silentStatuses
+                    : [];
+                const responseStatus = error.response
+                    ? error.response.status
+                    : undefined;
+
+                if (
+                    responseStatus !== undefined &&
+                    silentStatuses.includes(responseStatus)
+                ) {
+                    error.status = responseStatus;
+                    error.data = error.response.data;
+                    reject(error);
+                    return;
+                }
+
                 let errorMessage = '';
 
                 if (error.response && error.response.data) {
@@ -323,6 +361,21 @@ const originalCustomFetch = (
                             errorMessage = data.message;
                         }
                     }
+
+                    // Last resort, and only when nothing above found anything:
+                    // this library's own backends answer a rejected auth
+                    // attempt with `{error: '…'}` and no `message` at all, and
+                    // on a non-200 that body used to be dropped entirely — the
+                    // caller got an empty toast and no idea why it failed.
+                    // Ordered after `message` so nothing that already surfaced
+                    // changes.
+                    if (
+                        !errorMessage &&
+                        typeof data.error === 'string' &&
+                        data.error !== ''
+                    ) {
+                        errorMessage = data.error;
+                    }
                 } else {
                     errorMessage = error.message;
                 }
@@ -386,6 +439,15 @@ const CustomFetch = (
                         } else if (data.message) {
                             errorMessage = data.message;
                         }
+                        // Same last-resort `{error}` fallback as the
+                        // uncached path above.
+                        if (
+                            !errorMessage &&
+                            typeof data.error === 'string' &&
+                            data.error !== ''
+                        ) {
+                            errorMessage = data.error;
+                        }
                     } else {
                         errorMessage = error.message;
                     }
@@ -408,6 +470,14 @@ const CustomFetch = (
                                 errorMessage = data.message;
                             }
                         }
+                        // Same last-resort `{error}` fallback as above.
+                        if (
+                            !errorMessage &&
+                            typeof data.error === 'string' &&
+                            data.error !== ''
+                        ) {
+                            errorMessage = data.error;
+                        }
                     } else {
                         errorMessage = error.message;
                     }
@@ -424,7 +494,14 @@ const CustomFetch = (
     } else {
         // Use original implementation for non-cacheable requests (mutations)
         const result = trackPromise(
-            originalCustomFetch(url, method, formData, successCallback, errorCallback)
+            originalCustomFetch(
+                url,
+                method,
+                formData,
+                successCallback,
+                errorCallback,
+                options
+            )
         );
         
         // Auto-invalidate related caches after mutations

package/src/components/Form.jsx

@@ -23,6 +23,7 @@ import SumEqualsSummary, {
     sumEqualsHintFor,
 } from './SumEqualsSummary';
 import Table from './DataGrid';
+import { SECONDARY_GRID_HEIGHT } from './utils/useDensity';
 
 import styles from './styles/Form.module.scss';
 
@@ -3195,6 +3196,14 @@ function Form({
                                             mapbox={mapbox}
                                             paramValue={paramValue}
                                             settings={item.settings}
+                                            /* A form is almost always inside
+                                               a modal, so this grid must not
+                                               take the room between itself and
+                                               the bottom of the window — that
+                                               is measured from a box that is
+                                               already centred, and pushes the
+                                               pager below the fold. */
+                                            gridHeight={SECONDARY_GRID_HEIGHT}
                                             style={
                                                 userProfile?.settings?.style ||
                                                 {}

package/src/components/Navigation.jsx

@@ -21,11 +21,16 @@ import {
     Shield,
     Image,
     Phone,
+    KeyRound,
+    Lock,
+    MessageSquare,
+    MessagesSquare,
 } from 'lucide-react';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
+import { isNavActive } from './navActive';
 import styles from './styles/Navigation.module.scss';
 
 // Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
@@ -56,6 +61,10 @@ const NAV_ICONS = {
 const SETTING_ICONS = {
     bug: Bug,
     calendar: Calendar,
+    key: KeyRound,
+    lock: Lock,
+    message: MessageSquare,
+    messages: MessagesSquare,
     draft: FileText,
     image: Image,
     peopleGroup: Users,
@@ -76,6 +85,31 @@ const RAIL_ACTION_LABELS = {
     notifications: 'Notifications',
 };
 
+/**
+ * A chip is an icon and nothing else, so its name has to come from somewhere:
+ * it is the tooltip, and it is the only thing a screen reader has to go on.
+ * A config entry that forgot its `label` used to produce a nameless button —
+ * so the id, which is always there, is humanised as the last resort
+ * (`callRecordings` -> `Call Recordings`).
+ */
+const actionLabel = (n) => {
+    if (n.label) {
+        return n.label;
+    }
+    if (RAIL_ACTION_LABELS[n.id]) {
+        return RAIL_ACTION_LABELS[n.id];
+    }
+    if (!n.id) {
+        return '';
+    }
+    return n.id
+        .replace(/[-_]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/^./, (c) => c.toUpperCase());
+};
+
 const SearchComponent = ({
     navigate,
     search,
@@ -242,6 +276,22 @@ function Navigation({
     themeType,
     userProfile,
     debugIcons = false, // Add debug flag
+    /*
+     * Per-id renderers for account actions: `{ [setting.id]: ({ setting,
+     * userProfile, setSystemAuth }) => node }`.
+     *
+     * The chain below is hard-coded because every action it knows about ships
+     * with this library. An action that lives in a consuming app — or in a
+     * module the library carries but the header should not import eagerly —
+     * has nowhere to go. This is that slot: a matching id renders the
+     * supplied node inside the same row wrapper the built-in branches use,
+     * on both the header chips and the sidebar rail.
+     *
+     * Checked before the built-in chain, so a project can also override a
+     * shipped action. Empty by default, so nothing changes for anyone who
+     * does not pass it.
+     */
+    renderers = {},
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -304,6 +354,19 @@ function Navigation({
         // Add active class if the setting is active
         const activeClass = isActive ? styles.active : '';
 
+        // A consumer-supplied renderer wins over the built-in chain.
+        if (typeof renderers[n.id] === 'function') {
+            return (
+                <li>
+                    {renderers[n.id]({
+                        setting: n,
+                        userProfile,
+                        setSystemAuth,
+                    })}
+                </li>
+            );
+        }
+
         if (n.id === 'notifications') {
             return (
                 <li>
@@ -314,8 +377,11 @@ function Navigation({
             return (
                 <li>
                     <button
+                        type="button"
                         data-tooltip-id="system-tooltip"
+                        data-tooltip-place="bottom"
                         data-tooltip-content="Scan Business Card"
+                        aria-label="Scan Business Card"
                         onClick={() => setShowBusinessCardOcr(true)}
                         className={activeClass}
                     >
@@ -335,11 +401,15 @@ function Navigation({
             );
         } else if (n.id === 'logout') {
             const IconComponent = iconComponents[n.icon];
+            const label = actionLabel(n);
             return (
                 <li>
                     <button
+                        type="button"
                         data-tooltip-id="system-tooltip"
-                        data-tooltip-content={n.label}
+                        data-tooltip-place="bottom"
+                        data-tooltip-content={label}
+                        aria-label={label}
                         onClick={handleLogout}
                         className={activeClass} // Add active class to the logout button
                     >
@@ -349,13 +419,16 @@ function Navigation({
             );
         } else {
             const IconComponent = iconComponents[n.icon];
+            const label = actionLabel(n);
 
             return (
                 <li>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"
-                        data-tooltip-content={n.label}
+                        data-tooltip-place="bottom"
+                        data-tooltip-content={label}
+                        aria-label={label}
                         className={`${activeClass}`}
                         target={n.target ? n.target : '_self'}
                     >
@@ -385,11 +458,25 @@ function Navigation({
     const renderRailSetting = (n) => {
         const isActive = n.url && n.url === `/${currentPage}`;
         const activeClass = isActive ? styles.active : '';
-        const label = n.label || RAIL_ACTION_LABELS[n.id] || '';
+        const label = actionLabel(n);
         // A CSS string, quoted and escaped, for `content`.
         const labelVar = { '--nav-action-label': JSON.stringify(label) };
         const IconComponent = SETTING_ICONS[n.icon];
 
+        // Same slot as the header's, publishing the row label the same way a
+        // mounted component gets one (see the note above renderRailSetting).
+        if (typeof renderers[n.id] === 'function') {
+            return (
+                <li style={labelVar}>
+                    {renderers[n.id]({
+                        setting: n,
+                        userProfile,
+                        setSystemAuth,
+                    })}
+                </li>
+            );
+        }
+
         if (n.id === 'notifications') {
             return (
                 <li style={labelVar}>
@@ -510,9 +597,8 @@ function Navigation({
                                     <li key={`nav-child-${childKey}`}>
                                         <Link
                                             to={child.url}
-                                            title={child.label}
                                             className={
-                                                location.pathname === child.url
+                                                isNavActive(child.url, [], currentPage)
                                                     ? styles.active
                                                     : ''
                                             }
@@ -543,7 +629,7 @@ function Navigation({
                         {n.label}
                     </Link>
                 ) : (
-                    <span title={n.label}>{n.label}</span>
+                    <span>{n.label}</span>
                 )}
                 {renderChildren()}
             </li>
@@ -685,52 +771,25 @@ function Navigation({
 
     useEffect(() => {
         setNavData((prevNavData) => {
+            /**
+             * One rule at every depth — see navActive.js, which holds it and
+             * is tested directly. This used to branch on how many segments the
+             * URL happened to have, only consulted an item's children in one
+             * of those branches, and compared paths with `String.includes`.
+             * The visible cost: standing on `/reports`, which Admin owns as a
+             * child, nothing in the bar was marked at all.
+             */
             const updateNavItems = (nav) => {
-                const cleanUrl = (url) => {
-                    if (url) {
-                        // Ensure the URL starts with a slash. If it doesn't, prepend it.
-                        return url.startsWith('/') ? url : `/${url}`;
-                    }
-                    return '';
-                };
-
-                // Ensure both URLs have the leading slash for consistent comparison
-                const currentUrl = cleanUrl(currentPage);
-                const navUrl = nav.url ? cleanUrl(nav.url) : 'dashboard';
-
-                // Split current URL into segments
-                const currentUrlSegments = currentUrl
-                    .split('/')
-                    .filter(Boolean);
-
-                // Handle the case where navUrl is just '/'
-                if (
-                    navUrl === '/' &&
-                    (currentUrl === '/dashboard' || currentUrl === '/')
-                ) {
-                    return { ...nav, class: 'nav-item active' }; // Mark as active for dashboard if navUrl is '/'
-                }
-
-                // If current URL has 2 or fewer segments, check if navUrl is contained in currentUrl
-                if (currentUrlSegments.length <= 2) {
-                    if (currentUrl.includes(navUrl) && nav.id !== 'dashboard') {
-                        return { ...nav, class: 'nav-item active' }; // Mark as active if contained
-                    }
-                } else {
-                    // If more than 2 segments, use exact match logic
-                    if (
-                        navUrl === currentUrl ||
-                        (nav.children &&
-                            nav.children.some(
-                                (child) =>
-                                    cleanUrl(child.url) === `/${currentPage}`
-                            ))
-                    ) {
-                        return { ...nav, class: 'nav-item active' }; // Mark as active
-                    }
-                }
+                const childUrls = (nav.children || []).map(
+                    (child) => child.url
+                );
 
-                return { ...nav, class: 'nav-item' }; // Default class
+                return {
+                    ...nav,
+                    class: isNavActive(nav.url, childUrls, currentPage)
+                        ? 'nav-item active'
+                        : 'nav-item',
+                };
             };
 
             return {