@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/generic/shared/indexLayout.js

@@ -0,0 +1,38 @@
+import { isFlatFilterList } from '../../TableFilter';
+
+/**
+ * Should this index lay its filter menu out as a horizontal tab strip?
+ *
+ * Split out of GenericIndex rather than written inline because it is the one
+ * decision in the embedded-index work that can be wrong silently: get it
+ * wrong and the page builds a strip-shaped container around a vertical rail,
+ * which no test of the rendered page would catch either — GenericIndex pulls
+ * in the datagrid and cannot be imported by the test runner at all.
+ *
+ * Three conditions, all necessary:
+ *
+ *   - the caller asked for it (`tabLayout === 'underline'`; the default,
+ *     `'rail'`, is what every index page has always rendered);
+ *   - the layout is not `simple`, which builds its own `tabcontent` frame that
+ *     a strip has no place in;
+ *   - the filters are a FLAT list. `isFlatFilterList` is TableFilter's own
+ *     gate for the strip, imported rather than repeated so the container built
+ *     here can never disagree with the markup TableFilter puts inside it. A
+ *     rail with expandable parents is a two-level menu with no single row to
+ *     lay out, and keeps the rail.
+ *
+ * @param {object}   options
+ * @param {string}   [options.tabLayout]  'rail' (default) or 'underline'.
+ * @param {string}   [options.layout]     GenericIndex's `layout` prop.
+ * @param {Array}    [options.filters]    The live subnav items.
+ * @returns {boolean}
+ */
+export function shouldUnderlineTabs({ tabLayout, layout, filters } = {}) {
+    return (
+        tabLayout === 'underline' &&
+        layout !== 'simple' &&
+        isFlatFilterList(filters)
+    );
+}
+
+export default shouldUnderlineTabs;

package/src/components/settings/IntegrationsManager.jsx

@@ -0,0 +1,474 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import {
+    AlertTriangle,
+    Check,
+    ExternalLink,
+    Link2,
+    Loader2,
+    Plug,
+    RefreshCw,
+    Trash2,
+    X,
+} from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/Integrations.module.scss';
+
+const DEFAULT_BASE = '/ajax/integrations';
+
+/**
+ * Settings → Integrations.
+ *
+ * One card per connected system. Two kinds, and the card shape is the same for
+ * both because to the person configuring them they are the same job:
+ *
+ *   oauth2   — fill in the client id/secret, then Connect, which sends the
+ *              browser to the provider's consent screen.
+ *   api_key  — fill in the fields and save.
+ *
+ * A SECRET IS NEVER SENT BACK TO THIS PAGE. The API reports which fields hold
+ * a value, not what they hold, so a secret field renders empty with a "Set"
+ * badge beside it. Leaving it empty on save means "leave it alone" — that is
+ * the whole reason the API treats an absent key as unchanged. Clearing one
+ * takes a deliberate press of the field's clear button, which sends an
+ * explicit empty string.
+ */
+const IntegrationsManager = ({ base = DEFAULT_BASE, canManage = true }) => {
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [busy, setBusy] = useState(null);
+    const [drafts, setDrafts] = useState({});
+    const mountedRef = useRef(true);
+
+    useEffect(() => () => {
+        mountedRef.current = false;
+    }, []);
+
+    const load = useCallback(() => {
+        setLoading(true);
+
+        CustomFetch(base, 'GET', {}, (result) => {
+            if (!mountedRef.current) return;
+
+            setItems(Array.isArray(result?.data) ? result.data : []);
+            setLoading(false);
+        }, null, { cache: false }).catch(() => {
+            if (!mountedRef.current) return;
+
+            setItems([]);
+            setLoading(false);
+        });
+    }, [base]);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    const draftFor = (provider) => drafts[provider] ?? {};
+
+    const setDraft = (provider, key, value) =>
+        setDrafts((prev) => ({
+            ...prev,
+            [provider]: { ...(prev[provider] ?? {}), [key]: value },
+        }));
+
+    const save = (item) => {
+        const draft = draftFor(item.provider);
+
+        if (Object.keys(draft).length === 0) {
+            toast.info('Nothing changed.');
+
+            return;
+        }
+
+        setBusy(item.provider);
+
+        CustomFetch(
+            `${base}/${item.provider}`,
+            'PUT',
+            { credentials: draft },
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setBusy(null);
+                setDrafts((prev) => ({ ...prev, [item.provider]: {} }));
+                toast.success(`${item.name} saved`);
+
+                if (result?.data) {
+                    setItems((prev) =>
+                        prev.map((i) =>
+                            i.provider === item.provider ? result.data : i
+                        )
+                    );
+                }
+            },
+            null
+        ).catch(() => {
+            if (!mountedRef.current) return;
+
+            setBusy(null);
+            toast.error(`Could not save ${item.name}`);
+        });
+    };
+
+    const test = (item) => {
+        setBusy(item.provider);
+
+        CustomFetch(
+            `${base}/${item.provider}/test`,
+            'POST',
+            {},
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setBusy(null);
+                toast.success(result?.data?.message || 'Connected');
+                load();
+            },
+            null
+        ).catch((error) => {
+            if (!mountedRef.current) return;
+
+            setBusy(null);
+            // The probe answers 422 with the reason it failed, and that reason
+            // is the entire value of the button.
+            toast.error(error?.data?.data?.message || `${item.name} refused the credentials`);
+            load();
+        });
+    };
+
+    const connect = (item) => {
+        setBusy(item.provider);
+
+        CustomFetch(
+            `${base}/${item.provider}/authorize-url`,
+            'GET',
+            {},
+            (result) => {
+                const url = result?.data?.url;
+
+                if (!url) {
+                    setBusy(null);
+                    toast.error('Could not build the consent URL.');
+
+                    return;
+                }
+
+                // A full navigation, not a fetch: the consent screen is the
+                // provider's own page and cannot be loaded cross-origin.
+                window.location.href = url;
+            },
+            null
+        ).catch((error) => {
+            if (!mountedRef.current) return;
+
+            setBusy(null);
+            toast.error(error?.data?.message || 'Could not start the connection.');
+        });
+    };
+
+    const disconnect = (item) => {
+        setBusy(item.provider);
+
+        CustomFetch(
+            `${base}/${item.provider}`,
+            'DELETE',
+            {},
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setBusy(null);
+
+                // Clearing the database does not clear the server's .env, and
+                // saying "disconnected" when a key is still resolving from
+                // there would be a lie the user cannot see through.
+                toast.success(
+                    result?.still_configured_from_env
+                        ? `${item.name} cleared — it is still configured from the server environment.`
+                        : `${item.name} disconnected`
+                );
+                load();
+            },
+            null
+        ).catch(() => {
+            if (!mountedRef.current) return;
+
+            setBusy(null);
+            toast.error('Could not disconnect.');
+        });
+    };
+
+    const grouped = useMemo(() => {
+        const out = new Map();
+
+        items.forEach((item) => {
+            const key = item.category || 'Other';
+
+            if (!out.has(key)) out.set(key, []);
+            out.get(key).push(item);
+        });
+
+        return [...out.entries()];
+    }, [items]);
+
+    if (loading) {
+        return (
+            <div className={styles.loading}>
+                <Loader2 size={18} className={styles.spin} />
+                Loading integrations…
+            </div>
+        );
+    }
+
+    if (items.length === 0) {
+        return (
+            <p className={styles.empty}>
+                No integrations are configured for this application.
+            </p>
+        );
+    }
+
+    return (
+        <div className={styles.wrap}>
+            {grouped.map(([category, group]) => (
+                <section key={category} className={styles.group}>
+                    <h3 className={styles.groupTitle}>{category}</h3>
+
+                    {group.map((item) => (
+                        <IntegrationCard
+                            key={item.provider}
+                            item={item}
+                            busy={busy === item.provider}
+                            canManage={canManage}
+                            draft={draftFor(item.provider)}
+                            onChange={(k, v) => setDraft(item.provider, k, v)}
+                            onSave={() => save(item)}
+                            onTest={() => test(item)}
+                            onConnect={() => connect(item)}
+                            onDisconnect={() => disconnect(item)}
+                        />
+                    ))}
+                </section>
+            ))}
+        </div>
+    );
+};
+
+const STATUS_TONE = {
+    connected: 'ok',
+    configured: 'ready',
+    incomplete: 'warn',
+    expired: 'bad',
+    disabled: 'muted',
+};
+
+const IntegrationCard = ({
+    item,
+    busy,
+    canManage,
+    draft,
+    onChange,
+    onSave,
+    onTest,
+    onConnect,
+    onDisconnect,
+}) => {
+    const tone = STATUS_TONE[item.status?.state] || 'muted';
+    const isOAuth = item.driver === 'oauth2';
+    const connected = item.status?.state === 'connected';
+    const dirty = Object.keys(draft).length > 0;
+
+    return (
+        <article className={styles.card}>
+            <header className={styles.cardHead}>
+                <span className={styles.cardIcon} aria-hidden="true">
+                    <Plug size={16} strokeWidth={2} />
+                </span>
+
+                <div className={styles.cardTitle}>
+                    <h4>{item.name}</h4>
+                    {item.description && <p>{item.description}</p>}
+                    {item.services?.length > 0 && (
+                        <p className={styles.services}>
+                            {item.services.join(' · ')}
+                        </p>
+                    )}
+                </div>
+
+                {/* Never colour alone: the badge carries a word as well. */}
+                <span className={`${styles.badge} ${styles[tone]}`}>
+                    {tone === 'ok' && <Check size={12} strokeWidth={3} />}
+                    {tone === 'warn' && <AlertTriangle size={12} strokeWidth={2.5} />}
+                    {tone === 'bad' && <X size={12} strokeWidth={3} />}
+                    {item.status?.label}
+                </span>
+            </header>
+
+            {item.fields?.length > 0 && (
+                <div className={styles.fields}>
+                    {item.fields.map((field) => (
+                        <CredentialField
+                            key={field.key}
+                            field={field}
+                            value={draft[field.key]}
+                            disabled={!canManage || busy}
+                            onChange={(v) => onChange(field.key, v)}
+                        />
+                    ))}
+                </div>
+            )}
+
+            {isOAuth && item.redirect_uri && (
+                <p className={styles.redirect}>
+                    <strong>Redirect URI</strong> — paste this into the provider’s
+                    console exactly as shown:
+                    <code>{item.redirect_uri}</code>
+                </p>
+            )}
+
+            {item.last_test && (
+                <p
+                    className={
+                        item.last_test.status === 'ok'
+                            ? styles.testOk
+                            : styles.testBad
+                    }
+                >
+                    Last test {new Date(item.last_test.at).toLocaleString()} —{' '}
+                    {item.last_test.message}
+                </p>
+            )}
+
+            <footer className={styles.cardFoot}>
+                {item.docs_url && (
+                    <a
+                        className={styles.docs}
+                        href={item.docs_url}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                    >
+                        Provider console <ExternalLink size={12} />
+                    </a>
+                )}
+
+                <span className={styles.spacer} />
+
+                {canManage && (connected || item.fields?.some((f) => f.source === 'database')) && (
+                    <button
+                        type="button"
+                        className={styles.ghost}
+                        onClick={onDisconnect}
+                        disabled={busy}
+                    >
+                        <Trash2 size={13} /> Clear
+                    </button>
+                )}
+
+                {item.can_test && (
+                    <button
+                        type="button"
+                        className={styles.secondary}
+                        onClick={onTest}
+                        disabled={busy}
+                    >
+                        {busy ? (
+                            <Loader2 size={13} className={styles.spin} />
+                        ) : (
+                            <RefreshCw size={13} />
+                        )}
+                        Test connection
+                    </button>
+                )}
+
+                {canManage && (
+                    <button
+                        type="button"
+                        className={styles.primary}
+                        onClick={onSave}
+                        disabled={busy || !dirty}
+                    >
+                        Save
+                    </button>
+                )}
+
+                {canManage && isOAuth && (
+                    <button
+                        type="button"
+                        className={styles.primary}
+                        onClick={onConnect}
+                        disabled={busy || item.status?.state === 'incomplete'}
+                        title={
+                            item.status?.state === 'incomplete'
+                                ? 'Fill in the required fields first'
+                                : undefined
+                        }
+                    >
+                        <Link2 size={13} />
+                        {connected ? 'Reconnect' : 'Connect'}
+                    </button>
+                )}
+            </footer>
+        </article>
+    );
+};
+
+/**
+ * One credential field.
+ *
+ * A secret renders EMPTY even when it holds a value, because the value never
+ * left the server. "Set" beside the label is the only thing said about it, and
+ * `source` says where it came from — the difference between "I still need to
+ * type this" and "this is already in the server's .env".
+ */
+const CredentialField = ({ field, value, disabled, onChange }) => {
+    const id = `integration-${field.key}`;
+    const isSelect = field.type === 'select' && Array.isArray(field.options);
+
+    return (
+        <div className={styles.field}>
+            <label htmlFor={id}>
+                {field.label}
+                {field.required && <span aria-hidden="true"> *</span>}
+                {field.is_set && (
+                    <span className={styles.setTag}>
+                        Set{field.source === 'env' ? ' · from .env' : ''}
+                    </span>
+                )}
+            </label>
+
+            {isSelect ? (
+                <select
+                    id={id}
+                    disabled={disabled}
+                    value={value ?? field.value ?? ''}
+                    onChange={(e) => onChange(e.target.value)}
+                >
+                    {field.options.map((option) => (
+                        <option key={option} value={option}>
+                            {option}
+                        </option>
+                    ))}
+                </select>
+            ) : (
+                <input
+                    id={id}
+                    type={field.secret ? 'password' : 'text'}
+                    autoComplete={field.secret ? 'new-password' : 'off'}
+                    disabled={disabled}
+                    placeholder={
+                        field.secret && field.is_set
+                            ? '•••••••• (leave blank to keep)'
+                            : field.placeholder || ''
+                    }
+                    value={value ?? (field.secret ? '' : field.value ?? '')}
+                    onChange={(e) => onChange(e.target.value)}
+                />
+            )}
+
+            {field.help && <p className={styles.help}>{field.help}</p>}
+        </div>
+    );
+};
+
+export default IntegrationsManager;

package/src/components/sms/SmsLineSettings.jsx

@@ -44,6 +44,8 @@ const SmsLineSettings = ({
     // Accepted for consistency with the CRM's other settings screens.
     userProfile: _userProfile = null,
     staffOptions = [],
+    // `null` drops the header, for a host that already printed a heading above
+    // this one — the settings hub prints the section title and description.
     pageTitle = 'Messaging',
 }) => {
     const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
@@ -259,19 +261,21 @@ const SmsLineSettings = ({
 
     return (
         <div className={styles.settings}>
-            <div className={styles.settingsHead}>
-                <div>
-                    <h1 className={styles.pageTitle}>
-                        <MessageSquare size={22} strokeWidth={2.2} aria-hidden="true" />
-                        {pageTitle}
-                    </h1>
-                    <p className={styles.pageIntro}>
-                        A line is one Zoom Phone number and the staff who can see its
-                        conversations. Everything staff send goes out from the line they
-                        are replying on.
-                    </p>
+            {pageTitle !== null && (
+                <div className={styles.settingsHead}>
+                    <div>
+                        <h1 className={styles.pageTitle}>
+                            <MessageSquare size={22} strokeWidth={2.2} aria-hidden="true" />
+                            {pageTitle}
+                        </h1>
+                        <p className={styles.pageIntro}>
+                            A line is one Zoom Phone number and the staff who can see its
+                            conversations. Everything staff send goes out from the line they
+                            are replying on.
+                        </p>
+                    </div>
                 </div>
-            </div>
+            )}
 
             <div className={styles.statusCard}>
                 <div className={styles.statusItem}>