@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/generic/GenericDashboard.jsx

@@ -3,6 +3,35 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsiveLine } from '@nivo/line';
+
+// Shared Nivo defaults so every chart on a dashboard reads the same way:
+// room for the axis legends, a recessive grid, and point sizing that thins
+// out as series are added. `widget.props` is spread after these, so any
+// individual widget can still override a default from its JSON config.
+const defaultsFor = (type, seriesCount = 1) => {
+    const base = {
+        margin: { top: 20, right: 24, bottom: 56, left: 56 },
+        colors: { scheme: 'nivo' },
+        animate: true,
+        theme: {
+            axis: { ticks: { text: { fontSize: 11 } } },
+            grid: { line: { strokeOpacity: 0.25 } },
+        },
+    };
+
+    if (type === 'line') {
+        return {
+            ...base,
+            curve: 'monotoneX',
+            enableGridX: false,
+            useMesh: true,
+            pointSize: seriesCount > 3 ? 4 : 8,
+            pointBorderWidth: 2,
+        };
+    }
+
+    return base;
+};
 import { ResponsivePie } from '@nivo/pie';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
@@ -1281,7 +1310,10 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 widgetData !== null &&
                 widgetData !== undefined);
 
-        if (hasData || widget.type === 'bar') {
+        // `list` widgets render their own empty state (`emptyMessage`), so they
+        // must reach the switch even with zero rows — gating them out here made
+        // that message dead code and painted an empty widget instead.
+        if (hasData || widget.type === 'bar' || widget.type === 'list') {
             // Always try to render bar charts for debugging
             switch (widget.type) {
                 case 'counter':
@@ -1622,44 +1654,70 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 case 'line':
                     if (widgetData.length > 0) {
                         return (
-                            <ResponsiveLine
-                                key={`${widget.id}-${widget.size}`}
-                                data={widgetData}
-                                {...widget.props}
-                            />
+                            <div
+                                style={{ height: widget.height || '320px' }}
+                            >
+                                <ResponsiveLine
+                                    key={`${widget.id}-${widget.size}`}
+                                    data={widgetData}
+                                    {...defaultsFor('line', widgetData.length)}
+                                    {...widget.props}
+                                />
+                            </div>
                         );
                     }
                     break;
-                case 'list':
+                case 'list': {
+                    // A `url` supplied by the API row wins; otherwise build the
+                    // href from `link.base`/`link.key`. A widget with neither
+                    // still renders, it just isn't clickable — a missing `link`
+                    // used to throw and blank the entire dashboard.
+                    const listRows = Array.isArray(widgetData)
+                        ? widgetData
+                        : [];
+                    const rowHref = (item) => {
+                        if (item?.url) return item.url;
+                        if (widget.link?.base && widget.link?.key) {
+                            return `${widget.link.base}/${
+                                item[widget.link.key]
+                            }`;
+                        }
+                        return null;
+                    };
+                    const rowBody = (item) => (
+                        <button>
+                            <strong>
+                                {(widget?.item?.label &&
+                                    item[widget.item.label]) ||
+                                    ''}
+                            </strong>
+                            {widget.showDate && <span>{item.date}</span>}
+                        </button>
+                    );
+
                     return (
                         <ul className={styles.dashList}>
-                            {widgetData.length > 0 ? (
-                                widgetData
+                            {listRows.length > 0 ? (
+                                listRows
                                     .slice(0, widget.limit || 4)
-                                    .map((item) => (
-                                        <li key={`${widget.id}-${item.id}`}>
-                                            <Link
-                                                to={`${widget.link.base}/$${
-                                                    item[widget.link.key]
+                                    .map((item, i) => {
+                                        const href = rowHref(item);
+                                        return (
+                                            <li
+                                                key={`${widget.id}-${
+                                                    item.id ?? i
                                                 }`}
                                             >
-                                                <button>
-                                                    <strong>
-                                                        {widget?.item?.label &&
-                                                        item[widget.item.label]
-                                                            ? item[
-                                                                  widget.item
-                                                                      .label
-                                                              ]
-                                                            : ''}
-                                                    </strong>
-                                                    {widget.showDate && (
-                                                        <span>{item.date}</span>
-                                                    )}
-                                                </button>
-                                            </Link>
-                                        </li>
-                                    ))
+                                                {href ? (
+                                                    <Link to={href}>
+                                                        {rowBody(item)}
+                                                    </Link>
+                                                ) : (
+                                                    rowBody(item)
+                                                )}
+                                            </li>
+                                        );
+                                    })
                             ) : (
                                 <li>
                                     <button>
@@ -1669,6 +1727,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                             )}
                         </ul>
                     );
+                }
                 case 'table': {
                     const tableData = widgetData.data || widgetData;
                     const tableKeys = widgetData.keys || [];
@@ -2050,11 +2109,9 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
             <div
                 key={widget.id}
                 className={`${getGridClass(widget.size)} ${
-                    widget.type !== 'list'
-                        ? widget.highlight
-                            ? styles['dashwidget--highlight']
-                            : styles.dashwidget
-                        : ''
+                    widget.highlight
+                        ? styles['dashwidget--highlight']
+                        : styles.dashwidget
                 } ${
                     editMode
                         ? widget.highlight

package/src/components/generic/GenericDetail.jsx

@@ -84,7 +84,7 @@ import QrCode from '../QrCode';
 import StagePopupModal from './StagePopupModal';
 import StandardModal from './StandardModal';
 import Table from '../DataGrid';
-import TableFilter from '../TableFilter';
+import TableFilter, { isFlatFilterList } from '../TableFilter';
 import CategorizedDropZone from '../CategorizedDropZone';
 import VisnsDropZone from '../DropZone';
 
@@ -238,8 +238,26 @@ function GenericDetail({
     urlParam = 'dataId',
     userProfile,
     actions = null,
+    /**
+     * Host-supplied components for `type: "custom"` tabs, keyed by the tab's
+     * `renderer`.
+     *
+     * Same shape as Navigation's `renderers` slot, deliberately — that is
+     * already how VaultQuickSearch mounts into the app chrome, so there is one
+     * pattern for "the library lays this out, the app decides what goes in it"
+     * rather than two.
+     *
+     * Every tab type before this had to be a type the library knew about, so a
+     * page that wanted to show something the library had no case for (a vault,
+     * a map, a live feed) had no way in short of a new `case` here. Each
+     * renderer is called with { data, tab, routeParams, reload }.
+     */
+    renderers = {},
 }) {
     const gridRef = useRef(null);
+
+    /** The open form's guarded close — see the note in DataGrid.jsx. */
+    const formCloseRef = useRef(null);
     const currentConfigRef = useRef(null);
     const routeParams = useParams();
 
@@ -1720,6 +1738,62 @@ function GenericDetail({
         }
     };
 
+    /**
+     * The built-in `type: "custom"` components, addressed by `tab.component`.
+     *
+     * Extracted so the single `case 'custom'` above can serve both this and
+     * the host-supplied `renderers` slot. Previously these lived in a second
+     * `case 'custom'` in the same switch, which JavaScript never reaches.
+     */
+    const renderCustomComponentTab = (activeTabConfig) => {
+        if (
+            activeTabConfig.component === 'AssociationManager' ||
+            activeTabConfig.component === 'ClientAssociationManager'
+        ) {
+            return (
+                <AssociationManager
+                    endpoints={activeTabConfig.endpoints}
+                    config={activeTabConfig.config}
+                    dataId={routeParams[urlParam]}
+                    onUpdate={handleReload}
+                />
+            );
+        }
+
+        if (activeTabConfig.component === 'MergeEntity') {
+            return (
+                <MergeEntity
+                    endpoints={activeTabConfig.endpoints}
+                    config={activeTabConfig.config}
+                    dataId={routeParams[urlParam]}
+                    onUpdate={handleReload}
+                />
+            );
+        }
+
+        if (activeTabConfig.component === 'ProposalTemplateSectionManager') {
+            return (
+                <ProposalTemplateSectionManager
+                    {...activeTabConfig.props}
+                    templateId={routeParams[urlParam]}
+                    onUpdate={handleReload}
+                />
+            );
+        }
+
+        if (activeTabConfig.component === 'ProposalTemplatePreview') {
+            return (
+                <ProposalTemplatePreview
+                    {...activeTabConfig.props}
+                    templateId={routeParams[urlParam]}
+                    onUpdate={handleReload}
+                />
+            );
+        }
+
+        return null;
+    };
+
     const renderContent = () => {
         if (subnav && subnav.length > 0) {
             const activeTab = subnav.find((s) => s.show === true);
@@ -1730,6 +1804,52 @@ function GenericDetail({
 
                 if (activeTabConfig && activeTabConfig.type) {
                     switch (activeTabConfig.type) {
+                        case 'custom': {
+                            // A tab naming a `component` is the ORIGINAL
+                            // built-in form of this case — AssociationManager,
+                            // MergeEntity, the proposal panels. Both cases
+                            // live in this one switch, so adding a second
+                            // `case 'custom'` above made the built-in one
+                            // unreachable and silently emptied the Customer
+                            // Assignments tab. Hand those straight over.
+                            if (activeTabConfig.component) {
+                                return renderCustomComponentTab(activeTabConfig);
+                            }
+
+                            const render =
+                                renderers[activeTabConfig.renderer];
+
+                            if (typeof render !== 'function') {
+                                // A named renderer the host did not supply is
+                                // a config error, and a blank panel is the one
+                                // outcome that makes it invisible. Say which
+                                // name is missing.
+                                if (
+                                    process.env.NODE_ENV !== 'production' &&
+                                    activeTabConfig.renderer
+                                ) {
+                                    console.warn(
+                                        `[GenericDetail] Tab "${activeTabConfig.id}" asks for renderer "${activeTabConfig.renderer}", which was not passed in the \`renderers\` prop.`
+                                    );
+                                }
+
+                                return null;
+                            }
+
+                            // `data` can be null on the first paint, before the
+                            // record has loaded. Renderers that key off a
+                            // record id must not be mounted with undefined.
+                            if (!data) {
+                                return null;
+                            }
+
+                            return render({
+                                data,
+                                tab: activeTabConfig,
+                                routeParams,
+                                reload: handleReload,
+                            });
+                        }
                         case 'calendar': {
                             // Prepare events from your data, converting moment objects to Date objects
                             const events =
@@ -3577,58 +3697,6 @@ function GenericDetail({
                                     userProfile={userProfile}
                                 />
                             );
-                        case 'custom':
-                            // Handle custom components
-                            if (
-                                activeTabConfig.component ===
-                                    'AssociationManager' ||
-                                activeTabConfig.component ===
-                                    'ClientAssociationManager'
-                            ) {
-                                return (
-                                    <AssociationManager
-                                        endpoints={activeTabConfig.endpoints}
-                                        config={activeTabConfig.config}
-                                        dataId={routeParams[urlParam]}
-                                        onUpdate={handleReload}
-                                    />
-                                );
-                            }
-                            if (activeTabConfig.component === 'MergeEntity') {
-                                return (
-                                    <MergeEntity
-                                        endpoints={activeTabConfig.endpoints}
-                                        config={activeTabConfig.config}
-                                        dataId={routeParams[urlParam]}
-                                        onUpdate={handleReload}
-                                    />
-                                );
-                            }
-                            if (
-                                activeTabConfig.component ===
-                                'ProposalTemplateSectionManager'
-                            ) {
-                                return (
-                                    <ProposalTemplateSectionManager
-                                        {...activeTabConfig.props}
-                                        templateId={routeParams[urlParam]}
-                                        onUpdate={handleReload}
-                                    />
-                                );
-                            }
-                            if (
-                                activeTabConfig.component ===
-                                'ProposalTemplatePreview'
-                            ) {
-                                return (
-                                    <ProposalTemplatePreview
-                                        {...activeTabConfig.props}
-                                        templateId={routeParams[urlParam]}
-                                        onUpdate={handleReload}
-                                    />
-                                );
-                            }
-                            return null;
                         case 'proposalSectionManager':
                             return (
                                 <ProposalTemplateSectionManager
@@ -3955,15 +4023,27 @@ function GenericDetail({
     };
 
     /**
-     * `page.tabLayout: "underline"` lays the tabs out as a horizontal strip
-     * above the content instead of a rail down its left edge.
+     * Detail tabs are a horizontal strip above the content panel.
+     *
+     * They were a vertical rail down the left edge, and this was an opt-in
+     * (`page.tabLayout: "underline"`) that almost nothing opted into. The rail
+     * costs a fifth of the page width on every detail page in every project,
+     * permanently, to show six words — and it is the CONTENT panel beside it,
+     * the thing people opened the page to read, that pays for it. A strip
+     * under the breadcrumb costs one row of height and gives the panel the
+     * whole width back.
+     *
+     * The rail survives for the one shape a single row cannot express: tabs
+     * with expandable children, which are a two-level menu rather than a tab
+     * bar. `isFlatFilterList` is TableFilter's own test, imported rather than
+     * repeated, so the container laid out here always agrees with the markup
+     * TableFilter actually renders into it.
      *
-     * The rail costs a fifth of the page width, which is worth paying when
-     * there are seven tabs to keep in view and is not when there are two — a
-     * two-item rail beside a wide panel reads as an empty column. Opt-in, so
-     * every existing page keeps the rail it was designed against.
+     * No opt-out: this is the detail-page layout now, not a mode. `page` keeps
+     * its shape either way, so no config has to change and `tabLayout` in an
+     * existing config is simply redundant.
      */
-    const tabsUnderlined = page?.tabLayout === 'underline';
+    const tabsUnderlined = isFlatFilterList(filters);
 
     return (
         <>
@@ -4183,12 +4263,17 @@ function GenericDetail({
 
             <StandardModal
                 isOpen={modalShow}
-                onClose={modalClose}
+                onClose={() => (formCloseRef.current ?? modalClose)()}
                 title={formData.title || 'Edit Details'}
                 closeOnDocumentClick={false}
                 verticalAlign={formData.verticalAlign || 'center'}
+                variant={formData.layout === 'modal' ? 'modal' : 'sheet'}
+                size={formData.modalSize || 'medium'}
             >
                 <Form
+                    registerClose={(fn) => {
+                        formCloseRef.current = fn;
+                    }}
                     closeModal={modalClose}
                     columnId={formId}
                     fetchTable={handleReload}

package/src/components/generic/GenericIndex.jsx

@@ -13,6 +13,7 @@ import Download from '../Download';
 import Form from '../Form';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
+import { shouldUnderlineTabs } from './shared/indexLayout';
 import GenericGrid from './GenericGrid';
 import GenericReportForm from './GenericReportForm';
 import StandardModal from './StandardModal';
@@ -267,12 +268,40 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
     return { config, setConfig, subnav, setSubnav };
 }
 
+/**
+ * An index page: a title bar, an optional filter rail, and the grid.
+ *
+ * EMBEDDING. An index is normally the whole route, so it prints its own page
+ * title and puts its filters in a rail down the left. Both of those are wrong
+ * when the index is one panel inside another page that has already drawn a
+ * header and a rail of its own — the settings hub, for one, which stacked a
+ * second `<h1>` and a second vertical rail inside a panel that already had
+ * both. `showTitle` and `tabLayout` are the two opt-outs, and they are opt-ins:
+ * with neither passed this renders exactly what it rendered before, which is
+ * what every existing index page relies on.
+ *
+ * @param {boolean} [showTitle=true]  Print the page-title bar (`page.title`
+ *   plus the record count). `false` suppresses the bar only — the count moves
+ *   to the tab strip, or to its own quiet row above the grid when there is no
+ *   strip, because "how many rows am I looking at" is still a question an
+ *   embedded index has to answer.
+ * @param {'rail'|'underline'} [tabLayout='rail']  Where the filter menu goes.
+ *   `'underline'` asks for TableFilter's horizontal tab strip above the grid
+ *   instead of the rail beside it, which gives the grid the full width back.
+ *   Honoured only for a FLAT filter list, and only outside the `simple`
+ *   layout — see `shouldUnderlineTabs`, which reuses TableFilter's own gate 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 falls back to the rail.
+ */
 function GenericIndex({
     layout = 'full',
     setting,
     setActiveNav = null,
     themeType,
     userProfile,
+    showTitle = true,
+    tabLayout = 'rail',
 }) {
     const gridRef = useRef(null);
     useParams(); // Using router params if needed in the future
@@ -739,8 +768,91 @@ function GenericIndex({
         [setSubnav, setConfig]
     );
 
+    /**
+     * The record count and any `tableInfo` headings, as one node.
+     *
+     * It normally lives in the page-title bar. With `showTitle={false}` there
+     * is no bar to live in, so the same node is rendered against the grid
+     * instead — at the right-hand end of the tab strip when there is one, in
+     * its own row above the grid when there is not. Dropping it was not an
+     * option: it is the only place the total row count is printed above the
+     * fold.
+     */
+    const headings = setting.page?.tableInfo?.heading;
+    const hasHeadings = headings?.length > 0;
+
+    // Memoised because in embedded mode this node is a dependency of
+    // `renderContent`, and a fresh element every render would rebuild the grid
+    // on every render with it.
+    const titleInfo = useMemo(
+        () => (
+            <div className={styles.titleInfo}>
+                {hasHeadings &&
+                    headings.map((h) => (
+                        <span key={h.id}>
+                            <strong>{tableInfo[h.id]}</strong> {h.label}
+                        </span>
+                    ))}
+                {/* Square brackets round a count is a convention from a
+                    spreadsheet, not an interface — and it repeated the page
+                    title back at you. The count alone is what anyone actually
+                    reads. */}
+                {total > 0 && (
+                    <span>
+                        {/* Grouped, matching the pager's own "of 32,134" — the
+                            same figure was printing two different ways on one
+                            screen. */}
+                        <strong>{Number(total).toLocaleString()}</strong> total
+                    </span>
+                )}
+            </div>
+        ),
+        [hasHeadings, headings, tableInfo, total]
+    );
+
+    // An empty box is worth printing inside the title bar (it holds the bar's
+    // right-hand column open) and not worth printing anywhere else.
+    const embeddedInfo =
+        !showTitle && (total > 0 || hasHeadings) ? titleInfo : null;
+
+    // Lay the filter menu out as a horizontal strip rather than a rail. The
+    // conditions are written out in `shouldUnderlineTabs`, which is where they
+    // are also tested.
+    const tabsUnderlined = shouldUnderlineTabs({
+        tabLayout,
+        layout,
+        filters: subnav,
+    });
+
     const renderContent = useCallback(() => {
         if (subnav?.length > 0) {
+            if (tabsUnderlined) {
+                return (
+                    <div
+                        className={`${styles.grid__subrow} ${styles['grid__subrow--stacked']}`}
+                    >
+                        <div
+                            className={`${styles.grid__subnav} ${styles['grid__subnav--underline']}`}
+                        >
+                            <TableFilter
+                                filters={subnav}
+                                setFilters={setSubnav}
+                                setSettings={setConfig}
+                                settings={config}
+                                type={layout}
+                                onFilterChange={handleFilterChange}
+                                tabs={setting.tabs}
+                                variant="underline"
+                            />
+                            {embeddedInfo}
+                        </div>
+                        <div className={styles.grid__subcontent}>
+                            {renderContentBasedOnType()}
+                        </div>
+                    </div>
+                );
+            }
+
             return (
                 <div className={styles.grid__subrow}>
                     {layout === 'simple' ? (
@@ -801,6 +913,8 @@ function GenericIndex({
         renderContentBasedOnType,
         handleFilterChange,
         setting.tabs,
+        tabsUnderlined,
+        embeddedInfo,
     ]);
 
     useEffect(() => {
@@ -912,47 +1026,29 @@ function GenericIndex({
 
     return (
         <>
-            <div className={styles.grid}>
-                <div className={styles.grid__row}>
-                    <div
-                        className={`${styles.grid__full} ${
-                            layout === 'full'
-                                ? styles.crmtitle
-                                : styles.crmtitleSimple
-                        }`}
-                    >
-                        <h1>{parse(setting.page?.title || '')}</h1>
-                        <div className={styles.titleInfo}>
-                            {setting.page?.tableInfo?.hasOwnProperty(
-                                'heading'
-                            ) &&
-                                setting.page.tableInfo.heading.length > 0 &&
-                                setting.page.tableInfo.heading.map((h) => (
-                                    <span key={h.id}>
-                                        <strong>{tableInfo[h.id]}</strong>{' '}
-                                        {h.label}
-                                    </span>
-                                ))}
-                            {/* Square brackets round a count is a convention
-                                from a spreadsheet, not an interface — and it
-                                repeated the page title back at you. The count
-                                alone is what anyone actually reads. */}
-                            {total > 0 && (
-                                <span>
-                                    {/* Grouped, matching the pager's own
-                                        "of 32,134" — the same figure was
-                                        printing two different ways on one
-                                        screen. */}
-                                    <strong>
-                                        {Number(total).toLocaleString()}
-                                    </strong>{' '}
-                                    total
-                                </span>
-                            )}
+            {showTitle && (
+                <div className={styles.grid}>
+                    <div className={styles.grid__row}>
+                        <div
+                            className={`${styles.grid__full} ${
+                                layout === 'full'
+                                    ? styles.crmtitle
+                                    : styles.crmtitleSimple
+                            }`}
+                        >
+                            <h1>{parse(setting.page?.title || '')}</h1>
+                            {titleInfo}
                         </div>
                     </div>
                 </div>
-            </div>
+            )}
+
+            {/* The count without a title bar and without a strip to sit in.
+                Its own quiet, right-aligned row above the grid — the host page
+                has already drawn the heading this belongs under. */}
+            {!tabsUnderlined && embeddedInfo && (
+                <div className={styles.embeddedInfoRow}>{embeddedInfo}</div>
+            )}
 
             <div className={styles.grid}>{renderContent()}</div>
             <Outlet />