@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/vault/VaultManager.jsx

@@ -3,6 +3,7 @@ import { toast } from 'react-toastify';
 import {
     ArrowDown,
     ArrowUp,
+    Building2,
     Check,
     ExternalLink,
     History,
@@ -13,6 +14,7 @@ import {
     Plus,
     RotateCcw,
     Search,
+    Share2,
     ShieldCheck,
     Trash2,
     User,
@@ -25,6 +27,7 @@ import OtpChip from './OtpChip';
 import VaultAccessLog from './VaultAccessLog';
 import VaultConfirmPanel from './VaultConfirmPanel';
 import VaultEntryForm from './VaultEntryForm';
+import VaultShareModal from './VaultShareModal';
 import useDebouncedValue from './useDebouncedValue';
 import useVaultReveal from './useVaultReveal';
 import withVaultNavigation from './vaultNavigation';
@@ -144,16 +147,48 @@ const VaultManagerInner = ({
     // what this user may see, so nothing here reads it.
     userProfile: _userProfile,
     canManage = false,
+    // `null` drops the title and its intro, for a host that already printed a
+    // heading above this one — a settings panel, a customer's tab.
     pageTitle = 'Password manager',
     locationSearch = '',
     // A fixed page size, for a consumer that wants one. Passing it turns off
     // the measurement below entirely — the two must not fight over `per_page`.
     perPage: perPageProp = null,
+    /**
+     * Scope every entry on this page to one client.
+     *
+     * Used by a customer's Credentials tab, which is the whole vault filtered
+     * to that customer. It narrows the LIST and prefills a new entry, so an
+     * entry created on a customer's page belongs to that customer without
+     * anyone having to remember to pick them.
+     *
+     * Filtering happens on the SERVER (`client_id` on the list endpoint) and is
+     * applied after the visibility scope, never instead of it — narrowing to a
+     * client must not widen what this user is allowed to see.
+     */
+    clientId = null,
+    clientLabel = null,
 }) => {
     const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
 
     const [query, setQuery] = useState('');
     const [visibility, setVisibility] = useState('');
+    /**
+     * The client the user has narrowed the list to, as `{ id, label }`.
+     *
+     * Held as the pair rather than as an id so the control can name the client
+     * the moment it is picked — including from a row's chip, which happens
+     * before (or instead of) the options ever being read.
+     *
+     * Only ever set when this page is NOT already locked to a client: with
+     * `clientId` passed in, every row is that client's by definition and a
+     * filter over one value is furniture.
+     */
+    const [clientFilter, setClientFilter] = useState(null);
+    // The clients that have entries, from the server. NOT derived from `rows`:
+    // the list is paginated, so those are the clients on this page, which in
+    // production is one page in eight.
+    const [clientOptions, setClientOptions] = useState([]);
     const [includeDeleted, setIncludeDeleted] = useState(false);
     const [sort, setSort] = useState('updated_at');
     const [direction, setDirection] = useState('desc');
@@ -169,6 +204,8 @@ const VaultManagerInner = ({
 
     const [editing, setEditing] = useState(null); // entry | {} for a new one
     const [logFor, setLogFor] = useState(null); // entry | 'global'
+    // The entry whose external share links are open, if any.
+    const [sharingFor, setSharingFor] = useState(null);
     const [fallback, setFallback] = useState(null);
     // `${entryId}:${what}` for the button currently showing a tick.
     const [copied, setCopied] = useState(null);
@@ -200,6 +237,28 @@ const VaultManagerInner = ({
         };
     }, []);
 
+    /* ------------------------------------------------------ client filter */
+
+    // A page locked to one client (a customer's Credentials tab) owns the
+    // scope; the in-page filter only exists on the vault's own page.
+    const canFilterByClient = !clientId;
+
+    // What actually goes on the request. The prop wins: it is the host saying
+    // "this page is one client's", which the user cannot widen from here.
+    const effectiveClientId = clientId || clientFilter?.id || null;
+
+    const filterByClient = useCallback(
+        (entry) => {
+            if (!canFilterByClient || !entry?.client_id) return;
+
+            setClientFilter({
+                id: entry.client_id,
+                label: entry.client_label || `Client #${entry.client_id}`,
+            });
+        },
+        [canFilterByClient]
+    );
+
     /* ----------------------------------------------------------- loading */
 
     const load = useCallback(() => {
@@ -217,6 +276,11 @@ const VaultManagerInner = ({
         };
 
         if (includeDeleted) params.include_deleted = 1;
+        // Filtered on the SERVER, after the visibility scope and never instead
+        // of it — narrowing to a client must not widen what this user may see,
+        // and the pages have to be counted against the filtered set or the
+        // pager lies.
+        if (effectiveClientId) params.client_id = effectiveClientId;
 
         CustomFetch(
             routes.list,
@@ -255,17 +319,76 @@ const VaultManagerInner = ({
         direction,
         includeDeleted,
         visibility,
+        // Without this, navigating from one customer's Credentials tab to
+        // another's keeps showing the first customer's entries: the callback
+        // closes over the old id and `useEffect([load])` never re-fires. The
+        // same applies to the in-page filter.
+        effectiveClientId,
     ]);
 
     useEffect(() => {
         load();
     }, [load]);
 
+    /**
+     * The clients worth offering in the filter.
+     *
+     * Follows "Show deleted": with it on, a client whose entries have all been
+     * deleted is still worth being able to reach.
+     */
+    const loadClients = useCallback(() => {
+        if (!canFilterByClient) return;
+
+        CustomFetch(
+            routes.entryClients,
+            'GET',
+            includeDeleted ? { include_deleted: 1 } : {},
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setClientOptions(Array.isArray(result?.data) ? result.data : []);
+            },
+            null
+        ).catch(() => {
+            // A filter that cannot reach the server offers nothing rather than
+            // a toast — the list itself has already said if the vault is down,
+            // and an active filter survives this (see `clientChoices`).
+            if (mountedRef.current) setClientOptions([]);
+        });
+    }, [routes, canFilterByClient, includeDeleted]);
+
+    useEffect(() => {
+        loadClients();
+    }, [loadClients]);
+
     // A new search starts at the first page; staying on page 4 of the previous
-    // result set is how a search appears to return nothing.
+    // result set is how a search appears to return nothing. A change of client
+    // is the same thing.
     useEffect(() => {
         setPage(1);
-    }, [debouncedQuery, visibility, includeDeleted, sort, direction]);
+    }, [debouncedQuery, visibility, includeDeleted, sort, direction, effectiveClientId]);
+
+    /**
+     * The options the select draws, with the active client folded in.
+     *
+     * The merge is what makes the chip on a row safe to click: that client is
+     * always in the list the server sent, but the two arrive independently,
+     * and an option list that has not landed yet — or that a failed request
+     * emptied — must not leave the user holding a filter with no way to
+     * clear it.
+     */
+    const clientChoices = useMemo(() => {
+        const options = clientOptions.filter((option) => option?.id != null);
+
+        if (
+            clientFilter &&
+            !options.some((option) => Number(option.id) === Number(clientFilter.id))
+        ) {
+            return [...options, { id: clientFilter.id, label: clientFilter.label }];
+        }
+
+        return options;
+    }, [clientOptions, clientFilter]);
 
     /* ------------------------------------------------ fitting the window */
 
@@ -527,11 +650,14 @@ const VaultManagerInner = ({
                     CustomFetch(routes.destroy(entry.id), 'DELETE', {}, () => {
                         toast.success('Deleted');
                         load();
+                        // The last entry a client had can go with it, and an
+                        // option that returns nothing is worse than no option.
+                        loadClients();
                     }).catch(() => {});
                 },
             });
         },
-        [routes, load]
+        [routes, load, loadClients]
     );
 
     const restore = useCallback(
@@ -539,9 +665,10 @@ const VaultManagerInner = ({
             CustomFetch(routes.restore(entry.id), 'POST', {}, () => {
                 toast.success('Restored');
                 load();
+                loadClients();
             }).catch(() => {});
         },
-        [routes, load]
+        [routes, load, loadClients]
     );
 
     const toggleSort = (key) => {
@@ -557,28 +684,33 @@ const VaultManagerInner = ({
 
     return (
         <div className={styles.manager}>
-            <div className={styles.managerHead}>
-                <div>
-                    <h1 className={styles.pageTitle}>{pageTitle}</h1>
-                    <p className={styles.pageIntro}>
-                        Shared logins for the team, and your own private ones.
-                        Passwords and 2FA secrets are only ever revealed one at
-                        a time, and every reveal is logged.
-                    </p>
-                </div>
+            {/* Embedded (`pageTitle={null}`): no head row at all — the New
+                entry button joins the toolbar so the panel starts at the
+                search row instead of a mostly-empty band. */}
+            {pageTitle !== null && (
+                <div className={styles.managerHead}>
+                    <div>
+                        <h1 className={styles.pageTitle}>{pageTitle}</h1>
+                        <p className={styles.pageIntro}>
+                            Shared logins for the team, and your own private
+                            ones. Passwords and 2FA secrets are only ever
+                            revealed one at a time, and every reveal is logged.
+                        </p>
+                    </div>
 
-                <button
-                    type="button"
-                    className={styles.primaryButton}
-                    onClick={() => {
-                        setPrefill(null);
-                        setEditing({});
-                    }}
-                >
-                    <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
-                    New entry
-                </button>
-            </div>
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={() => {
+                            setPrefill(null);
+                            setEditing({});
+                        }}
+                    >
+                        <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
+                        New entry
+                    </button>
+                </div>
+            )}
 
             <div className={styles.toolbar}>
                 <div className={styles.searchBar}>
@@ -604,6 +736,50 @@ const VaultManagerInner = ({
                     <option value="private">Private only</option>
                 </select>
 
+                {/* Drawn only when there is something to choose between: an
+                    application with no client model configured, or a vault
+                    where nothing has been assigned yet, gets no control at
+                    all rather than a select with one option in it. */}
+                {canFilterByClient && clientChoices.length > 0 && (
+                    <select
+                        className={`${styles.select} ${
+                            clientFilter ? styles.selectActive : ''
+                        }`}
+                        value={clientFilter ? String(clientFilter.id) : ''}
+                        aria-label="Filter by client"
+                        onChange={(e) => {
+                            const value = e.target.value;
+
+                            if (value === '') {
+                                setClientFilter(null);
+
+                                return;
+                            }
+
+                            const chosen = clientChoices.find(
+                                (option) => String(option.id) === value
+                            );
+
+                            setClientFilter({
+                                id: chosen?.id ?? value,
+                                label: chosen?.label || `Client #${value}`,
+                            });
+                        }}
+                    >
+                        <option value="">All clients</option>
+                        {clientChoices.map((option) => (
+                            <option key={option.id} value={String(option.id)}>
+                                {/* The count is what makes the list worth
+                                    reading — a name alone does not say which
+                                    of these is worth filtering to. */}
+                                {option.entries > 0
+                                    ? `${option.label} (${option.entries})`
+                                    : option.label}
+                            </option>
+                        ))}
+                    </select>
+                )}
+
                 {canManage && (
                     <label className={styles.inlineCheck}>
                         <input
@@ -626,6 +802,20 @@ const VaultManagerInner = ({
                         Access log
                     </button>
                 )}
+
+                {pageTitle === null && (
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={() => {
+                            setPrefill(null);
+                            setEditing({});
+                        }}
+                    >
+                        <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
+                        New entry
+                    </button>
+                )}
             </div>
 
             {confirmRequired && (
@@ -732,6 +922,103 @@ const VaultManagerInner = ({
                                                 {host}
                                             </span>
                                         )}
+                                        {/* Which client this credential
+                                            belongs to. Linked when the host
+                                            app supplied a URL for the record;
+                                            plain text when it did not.
+
+                                            A chip, and once the importer's
+                                            duplicated "Client — Title" prefix
+                                            has been stripped it is the only
+                                            place the client is named on the
+                                            row — hence the title attribute,
+                                            because a long name ellipsises. */}
+                                        {entry.client_label && (
+                                            <span
+                                                className={`${styles.clientUnderTitle} ${
+                                                    Number(effectiveClientId) ===
+                                                    Number(entry.client_id)
+                                                        ? styles.clientUnderTitleActive
+                                                        : ''
+                                                }`}
+                                                title={entry.client_label}
+                                            >
+                                                <Building2
+                                                    size={11}
+                                                    strokeWidth={2.2}
+                                                    aria-hidden="true"
+                                                />
+                                                {/* On the vault's own page the
+                                                    name filters the list to
+                                                    that client — the question
+                                                    a chip on a row actually
+                                                    provokes ("what else does
+                                                    this client have?").
+
+                                                    The link to the client
+                                                    record is kept, moved onto
+                                                    its own small anchor beside
+                                                    the name: a button wrapping
+                                                    an anchor is neither valid
+                                                    markup nor operable, and
+                                                    both destinations are worth
+                                                    reaching.
+
+                                                    Where the page is already
+                                                    scoped to one client the
+                                                    filter would be a no-op, so
+                                                    the chip stays exactly what
+                                                    it was. */}
+                                                {canFilterByClient && entry.client_id ? (
+                                                    <>
+                                                        <button
+                                                            type="button"
+                                                            className={styles.clientChipButton}
+                                                            onClick={() => filterByClient(entry)}
+                                                            aria-pressed={
+                                                                Number(effectiveClientId) ===
+                                                                Number(entry.client_id)
+                                                            }
+                                                            aria-label={`Show only entries for ${entry.client_label}`}
+                                                            data-tooltip-id="system-tooltip"
+                                                            data-tooltip-content={`Filter to ${entry.client_label}`}
+                                                        >
+                                                            <span
+                                                                className={styles.clientChipLabel}
+                                                            >
+                                                                {entry.client_label}
+                                                            </span>
+                                                        </button>
+
+                                                        {entry.client_url && (
+                                                            <a
+                                                                href={entry.client_url}
+                                                                className={styles.clientChipLink}
+                                                                aria-label={`Open ${entry.client_label}`}
+                                                                data-tooltip-id="system-tooltip"
+                                                                data-tooltip-content="Open client"
+                                                            >
+                                                                <ExternalLink
+                                                                    size={10}
+                                                                    strokeWidth={2.4}
+                                                                    aria-hidden="true"
+                                                                />
+                                                            </a>
+                                                        )}
+                                                    </>
+                                                ) : (
+                                                    <span className={styles.clientChipLabel}>
+                                                        {entry.client_url ? (
+                                                            <a href={entry.client_url}>
+                                                                {entry.client_label}
+                                                            </a>
+                                                        ) : (
+                                                            entry.client_label
+                                                        )}
+                                                    </span>
+                                                )}
+                                            </span>
+                                        )}
                                         {Array.isArray(entry.tags) &&
                                             entry.tags.length > 0 && (
                                                 <span className={styles.tagRow}>
@@ -850,16 +1137,35 @@ const VaultManagerInner = ({
                                                     label={`Copy the 2FA code for ${entry.title}`}
                                                 />
 
-                                                {(entry.can_edit || canManage) && (
-                                                    <span
-                                                        className={styles.actionDivider}
-                                                        aria-hidden="true"
-                                                    />
-                                                )}
+                                                {/* Always drawn now: Share sits
+                                                    past the hairline and is
+                                                    open to anyone who can see
+                                                    the entry, so there is
+                                                    always something on the
+                                                    far side of it. */}
+                                                <span
+                                                    className={styles.actionDivider}
+                                                    aria-hidden="true"
+                                                />
 
                                                 {/* Icon-only past the hairline,
                                                     each with a tooltip: one row
-                                                    of actions is the point. */}
+                                                    of actions is the point.
+
+                                                    Share sends a credential OUT
+                                                    of the CRM, and is gated on
+                                                    being able to see the entry
+                                                    and nothing more — the same
+                                                    rule the reveal button
+                                                    follows, since a share is a
+                                                    reveal with a delay on it. */}
+                                                <RowAction
+                                                    icon={Share2}
+                                                    label={`Share ${entry.title} externally`}
+                                                    tooltip="Share by link"
+                                                    onClick={() => setSharingFor(entry)}
+                                                />
+
                                                 {entry.can_edit && (
                                                     <RowAction
                                                         icon={Pencil}
@@ -900,7 +1206,22 @@ const VaultManagerInner = ({
                         {rows.length === 0 && !loading && (
                             <tr>
                                 <td colSpan={6} className={styles.tableEmpty}>
-                                    {query.trim() === '' ? (
+                                    {query.trim() === '' && clientFilter ? (
+                                        // An empty vault and an empty filter
+                                        // look identical, and "add your first
+                                        // password" is the wrong advice for
+                                        // the second one.
+                                        <>
+                                            <p>No entries for {clientFilter.label}.</p>
+                                            <button
+                                                type="button"
+                                                className={styles.ghostButton}
+                                                onClick={() => setClientFilter(null)}
+                                            >
+                                                Show all clients
+                                            </button>
+                                        </>
+                                    ) : query.trim() === '' ? (
                                         <>
                                             <p>No passwords saved yet.</p>
                                             <button
@@ -941,6 +1262,10 @@ const VaultManagerInner = ({
             <div ref={pagerRef} className={styles.pager}>
                 <span className={styles.muted}>
                     {total} {total === 1 ? 'entry' : 'entries'}
+                    {/* The client filter is counted by the server, so this
+                        total IS the filtered total — unlike the visibility
+                        filter below it, which narrows the page only. */}
+                    {clientFilter && ` for ${clientFilter.label}`}
                     {visibility && ' (filtered on this page)'}
                 </span>
                 <div className={styles.pagerButtons}>
@@ -971,7 +1296,16 @@ const VaultManagerInner = ({
                     entry={editing.id ? editing : null}
                     endpoints={routes}
                     canManage={canManage}
-                    prefill={prefill || {}}
+                    prefill={{
+                        ...(prefill || {}),
+                        // On a customer's Credentials tab a new entry belongs
+                        // to that customer by definition. Prefilled rather
+                        // than forced, so it is still visible and still
+                        // changeable in the form.
+                        ...(clientId
+                            ? { client_id: clientId, client_label: clientLabel }
+                            : {}),
+                    }}
                     onClose={() => {
                         setEditing(null);
                         setPrefill(null);
@@ -980,6 +1314,9 @@ const VaultManagerInner = ({
                         setEditing(null);
                         setPrefill(null);
                         load();
+                        // A save can be the first entry a client has ever had,
+                        // which is the moment they become filterable.
+                        loadClients();
                     }}
                 />
             )}
@@ -991,6 +1328,17 @@ const VaultManagerInner = ({
                     onClose={() => setLogFor(null)}
                 />
             )}
+
+            {/* Unmounted on close rather than hidden: the one copy of a freshly
+                created link lives in this component's state, and closing the
+                dialog is what is supposed to destroy it. */}
+            {sharingFor && (
+                <VaultShareModal
+                    entry={sharingFor}
+                    endpoints={routes}
+                    onClose={() => setSharingFor(null)}
+                />
+            )}
         </div>
     );
 };