@visns-studio/visns-components 6.21.0 → 6.23.1

package/package.json

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

package/src/components/DataGrid.jsx

@@ -37,10 +37,10 @@ import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
 import { saveAs } from 'file-saver';
 import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
-import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import NativeDateFilterEditor from './columns/NativeDateFilterEditor';
+import SelectFilterEditor from './columns/SelectFilterEditor';
 import { toast } from 'react-toastify';
 import fetchUtil from '../utils/fetchUtil';
 import { confirmDialog } from './utils/ConfirmDialog';
@@ -4387,7 +4387,11 @@ const DataGrid = forwardRef(
                                     filterEditor = NumberFilter;
                                     break;
                                 case 'select':
-                                    filterEditor = SelectFilter;
+                                    // The grid's own SelectFilter, wrapped so
+                                    // that opening a dropdown which already
+                                    // holds a value clears it — see
+                                    // SelectFilterEditor for the semantics.
+                                    filterEditor = SelectFilterEditor;
 
                                     // Inline options: `filter.options` as
                                     // [{ id, label }].
@@ -4424,6 +4428,15 @@ const DataGrid = forwardRef(
                                                 column.filter.searchable === false,
                                             // Explicitly enable clear icon
                                             clearIcon: true,
+                                            // Opening a filled dropdown clears
+                                            // it (see SelectFilterEditor). A
+                                            // column that must always carry a
+                                            // value opts out with
+                                            // `filter: { clearOnOpen: false }`;
+                                            // a multi-select, excluded by
+                                            // default, opts in with `true`.
+                                            clearOnOpen:
+                                                column.filter.clearOnOpen,
                                         };
                                     } else {
                                         // Show loading state for URL-based filters without data

package/src/components/JsonView.jsx

@@ -0,0 +1,299 @@
+import React, { useMemo, useState } from 'react';
+
+import styles from './styles/JsonView.module.scss';
+
+/**
+ * Where a string stops being a value and starts being a document.
+ *
+ * Exported because the truncation is observable — a caller that wants to know
+ * whether a field will be cut before it renders should ask the same number the
+ * component uses rather than restate it.
+ */
+export const STRING_PREVIEW_LIMIT = 200;
+
+/**
+ * Parse text that MIGHT be JSON, and answer only for the shapes worth drawing.
+ *
+ * `JSON.parse` is happy with `42`, `"a note"` and `true` — all three are valid
+ * JSON documents by the letter of the spec, and all three are also exactly what
+ * an ordinary hand-typed note looks like. Rendering "a note" as a one-row tree
+ * with a quoted string in it is worse than rendering the note, so a bare
+ * primitive is deliberately NOT JSON for this purpose: only an object or an
+ * array earns the tree.
+ *
+ * Returns the parsed value, or `null` for anything else — including the empty
+ * string, which parses as nothing at all.
+ *
+ * @param   {string} text  Raw text, leading and trailing space included.
+ * @returns {object|Array|null}
+ */
+export const parseJsonDocument = (text) => {
+    const trimmed = String(text ?? '').trim();
+
+    // Cheap gate before the parse. A 32KB note that is plainly prose should
+    // not cost a parse on every keystroke of the field above it.
+    if (trimmed === '' || !/^[{[]/.test(trimmed)) return null;
+
+    try {
+        const parsed = JSON.parse(trimmed);
+
+        return parsed !== null && typeof parsed === 'object' ? parsed : null;
+    } catch (error) {
+        // Not JSON, which is an answer rather than a failure.
+        return null;
+    }
+};
+
+/** An object or an array — the two things that get a collapse toggle. */
+const isContainer = (value) => value !== null && typeof value === 'object';
+
+const childEntries = (value) =>
+    Array.isArray(value)
+        ? value.map((item, index) => [index, item])
+        : Object.entries(value);
+
+/**
+ * What a collapsed node says about itself.
+ *
+ * The count is the whole point: `{…}` alone tells the reader nothing about
+ * whether opening it is worth the scroll, and `[…] 129 items` tells them
+ * everything.
+ */
+const summarise = (value) => {
+    const count = Array.isArray(value) ? value.length : Object.keys(value).length;
+    const noun = Array.isArray(value) ? 'item' : 'key';
+
+    return `${Array.isArray(value) ? '[…]' : '{…}'} ${count} ${noun}${
+        count === 1 ? '' : 's'
+    }`;
+};
+
+/** `{}` / `[]`, for a container with nothing in it to expand. */
+const emptyLiteral = (value) => (Array.isArray(value) ? '[]' : '{}');
+
+/**
+ * A string value, which is the only primitive that can be too big to print.
+ *
+ * TWO reasons a string gets a toggle, and they are the same reason:
+ *
+ *   It is long. 200 characters is about a line and a half here; past that the
+ *   value stops being something you read in passing and starts pushing the rest
+ *   of the document off the screen.
+ *
+ *   It has newlines in it. This is the case that matters for the vault: a
+ *   credentials backup keeps the actual credential in a `content` field with
+ *   embedded line breaks, so squashing it onto one line destroys the only
+ *   structure it has. A multi-line string is therefore treated as long even
+ *   when it is short, and the expanded form is `pre-wrap`.
+ *
+ * The collapsed form is deliberately one line — first line, cut to the limit —
+ * because a preview that reflows is not a preview.
+ */
+const JsonString = ({ value }) => {
+    const [open, setOpen] = useState(false);
+
+    const multiline = value.includes('\n');
+    const long = value.length > STRING_PREVIEW_LIMIT;
+
+    if (!multiline && !long) {
+        return <span className={styles.string}>"{value}"</span>;
+    }
+
+    if (open) {
+        return (
+            <span className={styles.valueCell}>
+                <span className={`${styles.string} ${styles.stringOpen}`}>
+                    "{value}"
+                </span>
+                <button
+                    type="button"
+                    className={styles.more}
+                    onClick={() => setOpen(false)}
+                >
+                    show less
+                </button>
+            </span>
+        );
+    }
+
+    const firstLine = value.split('\n', 1)[0];
+    const preview =
+        firstLine.length > STRING_PREVIEW_LIMIT
+            ? firstLine.slice(0, STRING_PREVIEW_LIMIT)
+            : firstLine;
+
+    return (
+        <span className={styles.valueCell}>
+            <span className={styles.string}>"{preview}…"</span>
+            <button
+                type="button"
+                className={styles.more}
+                onClick={() => setOpen(true)}
+                title={
+                    multiline
+                        ? `${value.split('\n').length} lines, ${value.length} characters`
+                        : `${value.length} characters`
+                }
+            >
+                show all
+            </button>
+        </span>
+    );
+};
+
+/** Everything that is not a container: tinted by type, so the type is readable. */
+const JsonPrimitive = ({ value }) => {
+    if (value === null) return <span className={styles.null}>null</span>;
+
+    switch (typeof value) {
+        case 'string':
+            return <JsonString value={value} />;
+        case 'number':
+            // `String()` rather than the raw number so NaN and Infinity print
+            // as themselves: neither can come out of JSON.parse, but this
+            // component takes an already-parsed value from anywhere.
+            return <span className={styles.number}>{String(value)}</span>;
+        case 'boolean':
+            return <span className={styles.boolean}>{value ? 'true' : 'false'}</span>;
+        case 'undefined':
+            return <span className={styles.null}>undefined</span>;
+        default:
+            // A function or a symbol, which only a hand-built value can carry.
+            return <span className={styles.null}>{String(value)}</span>;
+    }
+};
+
+/**
+ * One row: a key, and either a value or a subtree behind a toggle.
+ *
+ * The toggle is a real `<button>` wrapping the caret, the key AND the summary,
+ * so the hit target is the whole line and there is one tab stop per node rather
+ * than one per glyph. There is no `role="tree"` here on purpose: that role
+ * promises arrow-key navigation, and a tree that does not answer arrow keys is
+ * worse for a screen reader than the plain nested list this actually is.
+ */
+const JsonNode = ({ label, isIndex, value, depth, collapsedDepth }) => {
+    const container = isContainer(value);
+    const entries = useMemo(
+        () => (container ? childEntries(value) : []),
+        [container, value]
+    );
+
+    // The root is depth 0, so `collapsedDepth: 2` opens the root and its
+    // children and collapses everything from the grandchildren down. On the
+    // vault's backup payload that is exactly right: the document and its
+    // `credentials` array are open, and the 129 credentials inside it are 129
+    // one-line summaries rather than 129 open records.
+    const [open, setOpen] = useState(depth < collapsedDepth);
+
+    const key = label === null ? null : (
+        <span className={isIndex ? styles.index : styles.key}>
+            {String(label)}
+            <span className={styles.colon}>:</span>
+        </span>
+    );
+
+    if (!container || entries.length === 0) {
+        return (
+            <li className={styles.row}>
+                <div className={styles.line}>
+                    <span className={styles.spacer} aria-hidden="true" />
+                    {key}
+                    {container ? (
+                        <span className={styles.summary}>{emptyLiteral(value)}</span>
+                    ) : (
+                        <JsonPrimitive value={value} />
+                    )}
+                </div>
+            </li>
+        );
+    }
+
+    return (
+        <li className={styles.row}>
+            <div className={styles.line}>
+                <button
+                    type="button"
+                    className={styles.toggle}
+                    aria-expanded={open}
+                    onClick={() => setOpen((v) => !v)}
+                >
+                    <span className={styles.caret} aria-hidden="true">
+                        {open ? '▾' : '▸'}
+                    </span>
+                    {key}
+                    <span className={styles.summary}>
+                        {open ? (Array.isArray(value) ? '[' : '{') : summarise(value)}
+                    </span>
+                </button>
+            </div>
+
+            {open && (
+                <>
+                    <ul className={`${styles.list} ${styles.children}`}>
+                        {entries.map(([childLabel, childValue]) => (
+                            <JsonNode
+                                key={String(childLabel)}
+                                label={childLabel}
+                                isIndex={Array.isArray(value)}
+                                value={childValue}
+                                depth={depth + 1}
+                                collapsedDepth={collapsedDepth}
+                            />
+                        ))}
+                    </ul>
+                    {/* The closing bracket, so an open node reads as a pair
+                        rather than as a bracket somebody forgot to shut. */}
+                    <div className={styles.line}>
+                        <span className={styles.spacer} aria-hidden="true" />
+                        <span className={styles.summary}>
+                            {Array.isArray(value) ? ']' : '}'}
+                        </span>
+                    </div>
+                </>
+            )}
+        </li>
+    );
+};
+
+/**
+ * A parsed JSON value, as something a person can actually read.
+ *
+ * Written for the vault's notes, where `zoho:credentials-backup` leaves a
+ * 32KB machine-written blob — `{source, account_id, …, credentials: […]}` — in
+ * a field whose only previous rendering was a three-row textarea. Nothing in
+ * here knows that, and nothing should: it takes a value and draws it.
+ *
+ * READ-ONLY, and that is the design rather than an omission. Editing JSON as a
+ * tree means deciding what happens when a key is renamed to one that already
+ * exists, what a number that is being typed means halfway through, and what to
+ * do with a value the user has made syntactically impossible. The consumer
+ * keeps the raw text as the single source of truth and toggles between the two;
+ * see VaultEntryForm, where the notes VALUE is always the raw string and this
+ * view is presentation only.
+ *
+ * The value is passed ALREADY PARSED. A component that took text would have to
+ * decide what a parse failure looks like on screen, and the answer is always
+ * "show the text instead", which is a decision belonging to the screen and not
+ * to the viewer. `parseJsonDocument` above is the shared way to make that call.
+ *
+ * @param {*}      value           Any parsed JS value; objects and arrays get a tree.
+ * @param {number} collapsedDepth  Nodes at this depth or deeper start collapsed.
+ *                                 The root is depth 0. Default 2.
+ * @param {string} className       Added to the root, for sizing by the caller.
+ */
+const JsonView = ({ value, collapsedDepth = 2, className, ...rest }) => (
+    <div className={[styles.root, className].filter(Boolean).join(' ')} {...rest}>
+        <ul className={styles.list}>
+            <JsonNode
+                label={null}
+                isIndex={false}
+                value={value}
+                depth={0}
+                collapsedDepth={collapsedDepth}
+            />
+        </ul>
+    </div>
+);
+
+export default JsonView;

package/src/components/Navigation.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
+    AudioLines,
     BarChart3,
     Briefcase,
     Bug,
@@ -59,6 +60,12 @@ const NAV_ICONS = {
 // key. Module scope because two surfaces read it now: the header's action
 // chips and — when a project opts in — the sidebar's pinned action rows.
 const SETTING_ICONS = {
+    // A waveform, for recordings. `phone` is a handset and now belongs to the
+    // live Zoom Phone roster, which is a different question entirely — one chip
+    // is "listen to a call that happened", the other is "who is on a call right
+    // now", and two identical handsets in one header made them impossible to
+    // tell apart.
+    audioLines: AudioLines,
     bug: Bug,
     calendar: Calendar,
     key: KeyRound,
@@ -607,7 +614,9 @@ function Navigation({
                                             className={
                                                 cleanUrl(child.url) ===
                                                 bestMatchingUrl(
-                                                    n.children.map((one) => one.url),
+                                                    n.children.map(
+                                                        (one) => one.url
+                                                    ),
                                                     currentPage
                                                 )
                                                     ? styles.active