@oneuptime/common 11.7.2 → 11.7.3

package/build/dist/UI/Components/ModelTable/BaseModelTable.js

@@ -25,6 +25,10 @@ import OrderedStatesList from "../OrderedStatesList/OrderedStatesList";
 import Pill from "../Pill/Pill";
 import Table from "../Table/Table";
 import FieldType from "../Types/FieldType";
+import ColumnCustomizationModal from "./ColumnCustomizationModal";
+import { applyColumnPreference, buildColumnPreference, fromJSON as columnPreferenceFromJSON, getCustomizableColumns, isEmptyColumnPreference, sanitizeColumnPreference, getColumnIds, toJSON as columnPreferenceToJSON, } from "./ColumnPreference";
+import { CustomFieldsColumnKey } from "./CustomFieldColumns";
+import useCustomFieldColumns from "./useCustomFieldColumns";
 import { getExportKeysFromColumn } from "./ExportFromColumns";
 import { getRelationSelectFromColumns, getSelectFromColumns, } from "./SelectFromColumns";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
@@ -110,6 +114,83 @@ const BaseModelTable = (props) => {
     const [showHelpModal, setShowHelpModal] = useState(false);
     const [viewId, setViewId] = useState(null);
     const [tableColumns, setColumns] = useState([]);
+    /*
+     * ---------------------------------------------------------------------
+     * Viewer-customizable columns
+     * ---------------------------------------------------------------------
+     *
+     * The viewer's layout (which columns are on, and in what order) is a
+     * personal, presentational preference, so it lives in localStorage next to
+     * the page size rather than on the server: saved views are named, explicit,
+     * plan-gated and need write permission, none of which should stand between
+     * someone and hiding a column they don't care about. A saved view can still
+     * carry a layout of its own, and when one is active it wins.
+     *
+     * Custom fields are appended to the declared columns as additional,
+     * off-by-default columns; from here on they are ordinary columns.
+     */
+    const customFieldColumns = useCustomFieldColumns({
+        customFieldsModelType: props.customFieldsModelType,
+    });
+    const isColumnCustomizationEnabled = Boolean(!props.disableColumnCustomization &&
+        props.userPreferencesKey &&
+        showAs !== ShowAs.OrderedStatesList);
+    const allColumns = useMemo(() => {
+        if (customFieldColumns.columns.length === 0) {
+            return props.columns || [];
+        }
+        return [...(props.columns || []), ...customFieldColumns.columns];
+    }, [props.columns, customFieldColumns.columns]);
+    const readStoredColumnPreference = () => {
+        if (!props.userPreferencesKey) {
+            return null;
+        }
+        return columnPreferenceFromJSON(UserPreferences.getUserPreferenceByTypeAsJSON({
+            key: props.userPreferencesKey,
+            userPreferenceType: UserPreferenceType.BaseModelTableColumns,
+        }));
+    };
+    const [columnPreference, setColumnPreference] = useState(readStoredColumnPreference);
+    const [showColumnCustomizationModal, setShowColumnCustomizationModal] = useState(false);
+    /*
+     * Ids are derived over the *whole* declared set, so a column dropping out
+     * for lack of permission can never renumber the ones that remain.
+     */
+    const allColumnIds = useMemo(() => {
+        return getColumnIds(allColumns);
+    }, [allColumns]);
+    const effectiveColumnPreference = useMemo(() => {
+        if (!isColumnCustomizationEnabled) {
+            return null;
+        }
+        /*
+         * A stored layout outlives the release that wrote it, so anything naming
+         * a column this table no longer has is dropped before it is applied.
+         */
+        return sanitizeColumnPreference({
+            preference: columnPreference,
+            knownColumnIds: allColumnIds,
+        });
+    }, [columnPreference, allColumnIds, isColumnCustomizationEnabled]);
+    const saveColumnPreference = (preference) => {
+        setColumnPreference(preference);
+        if (!props.userPreferencesKey) {
+            return;
+        }
+        const json = columnPreferenceToJSON(preference);
+        if (!json) {
+            UserPreferences.removeUserPreferenceByType({
+                key: props.userPreferencesKey,
+                userPreferenceType: UserPreferenceType.BaseModelTableColumns,
+            });
+            return;
+        }
+        UserPreferences.saveUserPreferenceByTypeAsJSON({
+            key: props.userPreferencesKey,
+            userPreferenceType: UserPreferenceType.BaseModelTableColumns,
+            value: json,
+        });
+    };
     const [classicTableFilters, setClassicTableFilters] = useState([]);
     const [cardButtons, setCardButtons] = useState([]);
     const [actionButtonSchema, setActionButtonSchema] = useState([]);
@@ -496,8 +577,11 @@ const BaseModelTable = (props) => {
         }
     }, [tableColumns]);
     const getRelationSelect = () => {
+        /*
+         * Deliberately the *unfiltered* column set. See getSelect() below.
+         */
         return getRelationSelectFromColumns({
-            columns: props.columns || [],
+            columns: allColumns,
             model: model,
         });
     };
@@ -530,7 +614,21 @@ const BaseModelTable = (props) => {
         selectFields = props.callbacks.addSlugToSelect(selectFields);
         const userPermissions = getUserPermissions();
         const accessControl = model.getColumnAccessControlForAllColumns();
-        for (const column of props.columns || []) {
+        /*
+         * The viewer's layout is applied to the *input* of this loop, never to
+         * the finished array: the Actions column is appended below and has to
+         * stay last, and it is generated rather than declared, so it is not the
+         * viewer's to move or switch off.
+         */
+        const columnsToRender = applyColumnPreference({
+            columns: allColumns,
+            preference: effectiveColumnPreference,
+        });
+        const columnIdByColumn = new Map();
+        allColumns.forEach((column, index) => {
+            columnIdByColumn.set(column, allColumnIds[index]);
+        });
+        for (const column of columnsToRender) {
             const hasPermission = hasPermissionToReadColumn(column) || User.isMasterAdmin();
             const key = getColumnKey(column);
             if (hasPermission) {
@@ -550,7 +648,7 @@ const BaseModelTable = (props) => {
                         "." +
                         column.selectedProperty)
                     : key;
-                columns.push(Object.assign(Object.assign({}, column), { disableSort: column.disableSort || shouldDisableSort(key), key: columnKey, 
+                columns.push(Object.assign(Object.assign({}, column), { id: columnIdByColumn.get(column), disableSort: column.disableSort || shouldDisableSort(key), key: columnKey, 
                     /*
                      * `key` is only the first declared field, so a cell composed from
                      * several of them would export just that one. Hand the exporter
@@ -1065,13 +1163,35 @@ const BaseModelTable = (props) => {
         });
     }, []);
     const getSelect = () => {
+        /*
+         * Every declared column, including the ones the viewer has switched off.
+         *
+         * Hiding must not narrow the request. A column's `getElement` is arbitrary
+         * caller code that can read any field on the row — a "Status" cell that
+         * also reads `currentMonitorStatus`, say — so dropping a hidden column's
+         * fields from the select would silently blank a *different*, visible cell,
+         * and there is no way to detect that statically. The sort field is
+         * likewise independent of what is on screen. The cost is a few unused
+         * fields on the wire.
+         */
         const selectFields = getSelectFromColumns({
-            columns: props.columns || [],
+            columns: allColumns,
             model: model,
             hasPermissionToReadField: (field) => {
                 return hasPermissionToReadField(field);
             },
         });
+        /*
+         * Custom field columns arrive asynchronously, but the table does not
+         * refetch when its column set changes — so the JSON column that backs
+         * every one of them is selected up front, off the synchronous prop, and
+         * the values are there the moment the definitions land.
+         */
+        if (props.customFieldsModelType &&
+            model.hasColumn(CustomFieldsColumnKey) &&
+            hasPermissionToReadField(CustomFieldsColumnKey)) {
+            selectFields[CustomFieldsColumnKey] = true;
+        }
         const selectMoreFields = props.selectMoreFields
             ? Object.keys(props.selectMoreFields)
             : [];
@@ -1102,7 +1222,7 @@ const BaseModelTable = (props) => {
             return React.createElement(React.Fragment, null);
         }
         if (props.saveFilterProps && props.saveFilterProps.tableId) {
-            return (React.createElement(TableViewElement, { tableId: props.saveFilterProps.tableId, tableView: tableView, currentQuery: query, currentSortBy: sortBy, currentItemsOnPage: itemsOnPage, currentSortOrder: sortOrder, currentFacetState: props.currentFacetState, onViewChange: async (tableView) => {
+            return (React.createElement(TableViewElement, { tableId: props.saveFilterProps.tableId, tableView: tableView, currentQuery: query, currentSortBy: sortBy, currentItemsOnPage: itemsOnPage, currentSortOrder: sortOrder, currentFacetState: props.currentFacetState, currentColumns: columnPreferenceToJSON(effectiveColumnPreference) || undefined, onViewChange: async (tableView) => {
                     var _a;
                     setTableView(tableView);
                     if (tableView) {
@@ -1128,6 +1248,15 @@ const BaseModelTable = (props) => {
                         if (props.onFacetStateRestored) {
                             props.onFacetStateRestored(tableView.facets || null);
                         }
+                        /*
+                         * A saved view carries the columns it was saved with. Views
+                         * created before this existed have none, which restores the
+                         * table's default layout rather than leaving the previous
+                         * view's columns in place.
+                         */
+                        if (isColumnCustomizationEnabled) {
+                            saveColumnPreference(columnPreferenceFromJSON(tableView.columns || null));
+                        }
                     }
                     else {
                         setQuery({});
@@ -1145,6 +1274,12 @@ const BaseModelTable = (props) => {
                         if (props.onFacetStateRestored) {
                             props.onFacetStateRestored(null);
                         }
+                        /*
+                         * Columns are deliberately left alone here. Clearing a saved
+                         * view means "stop filtering like that", not "throw away the
+                         * column layout I built" - which the viewer may well have set
+                         * up long before this view existed.
+                         */
                     }
                 } }));
         }
@@ -1252,6 +1387,22 @@ const BaseModelTable = (props) => {
                 icon: IconProp.Filter,
             });
         }
+        /*
+         * Only worth offering once there is a choice to make. A single-column
+         * table has nothing to hide and nothing to reorder.
+         */
+        if (isColumnCustomizationEnabled && allColumns.length > 1) {
+            headerbuttons.push({
+                title: "",
+                buttonStyle: ButtonStyleType.ICON,
+                buttonSize: ButtonSize.Small,
+                className: "",
+                onClick: () => {
+                    setShowColumnCustomizationModal(true);
+                },
+                icon: IconProp.TableCells,
+            });
+        }
         setCardButtons(headerbuttons);
     };
     useEffect(() => {
@@ -1350,6 +1501,13 @@ const BaseModelTable = (props) => {
     useEffect(() => {
         serializeToTableColumns();
     }, [props.columns]);
+    /*
+     * The viewer changed their layout, or the project's custom field
+     * definitions finally arrived.
+     */
+    useEffect(() => {
+        serializeToTableColumns();
+    }, [effectiveColumnPreference, customFieldColumns.columns]);
     const setActionSchema = () => {
         const permissions = PermissionUtil.getAllPermissions();
         const actionsSchema = [];
@@ -2091,6 +2249,8 @@ const BaseModelTable = (props) => {
                 return "Watch Demo";
             case IconProp.Search:
                 return "Search";
+            case IconProp.TableCells:
+                return "Columns";
             default:
                 return "Action";
         }
@@ -2186,6 +2346,77 @@ const BaseModelTable = (props) => {
     const getCardHeaderTitle = (originalTitle) => {
         return originalTitle;
     };
+    /*
+     * A column the viewer cannot read is left out of the picker entirely.
+     * Listing it would advertise a field they have no access to, and switching
+     * it on would put that field in the select — which the API rejects for the
+     * whole request, blanking the table.
+     */
+    const isPickableColumn = (column) => {
+        if (column.isNotCustomizable) {
+            return false;
+        }
+        return hasPermissionToReadColumn(column) || User.isMasterAdmin();
+    };
+    const getPickerEntries = (preference) => {
+        return getCustomizableColumns({
+            columns: allColumns,
+            preference: preference,
+        }).filter((entry) => {
+            return isPickableColumn(entry.column);
+        });
+    };
+    // Mirrors how serializeToTableColumns derives the key the header sorts on.
+    const getColumnSortKey = (column) => {
+        const key = getColumnKey(column);
+        if (!key) {
+            return null;
+        }
+        return column.selectedProperty
+            ? `${String(key)}.${column.selectedProperty}`
+            : String(key);
+    };
+    const onColumnCustomizationSave = (entries) => {
+        const preference = buildColumnPreference(entries);
+        /*
+         * If the layout the viewer just saved matches what the table ships with,
+         * store nothing. Otherwise every table anyone ever opened the picker on
+         * would be pinned to the column set of the release they opened it in, and
+         * columns added later would arrive already stale.
+         */
+        const defaultPreference = buildColumnPreference(getPickerEntries(null));
+        const isBackToDefault = JSON.stringify(preference) === JSON.stringify(defaultPreference);
+        /*
+         * Sorting by a column that is no longer on screen leaves the viewer with
+         * an ordering they can neither see nor undo — there is no header left to
+         * click. Fall back to the table's own default sort.
+         */
+        if (sortBy) {
+            const hiddenIds = new Set(preference.hidden);
+            const isSortedColumnHidden = entries.some((entry) => {
+                return (hiddenIds.has(entry.id) &&
+                    getColumnSortKey(entry.column) === String(sortBy));
+            });
+            if (isSortedColumnHidden) {
+                setSortBy(props.sortBy || null);
+                setSortOrder(props.sortOrder || SortOrder.Ascending);
+                setCurrentPageNumber(1);
+            }
+        }
+        saveColumnPreference(isBackToDefault ? null : preference);
+        setShowColumnCustomizationModal(false);
+    };
+    const getColumnCustomizationModal = () => {
+        if (!showColumnCustomizationModal || !isColumnCustomizationEnabled) {
+            return null;
+        }
+        return (React.createElement(ColumnCustomizationModal, { columns: getPickerEntries(effectiveColumnPreference), isDefaultLayout: isEmptyColumnPreference(effectiveColumnPreference), title: tx("Customize Columns"), onSave: onColumnCustomizationSave, onReset: () => {
+                saveColumnPreference(null);
+                setShowColumnCustomizationModal(false);
+            }, onClose: () => {
+                setShowColumnCustomizationModal(false);
+            } }));
+    };
     const getCardComponent = () => {
         const headerButtons = getHeaderButtonsWithSearch();
         if (showAs === ShowAs.Table || showAs === ShowAs.List) {
@@ -2193,7 +2424,7 @@ const BaseModelTable = (props) => {
                 props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { buttons: headerButtons, bodyClassName: showAs === ShowAs.List
                         ? "-ml-6 -mr-6 bg-gray-50 border-top"
                         : "", title: getCardHeaderTitle(getCardTitle(props.cardProps.title || "")) }),
-                    tableColumns.length === 0 && props.columns.length > 0 ? (React.createElement(ErrorMessage, { message: `You are not authorized to view this table. You need any one of these permissions: ${PermissionHelper.getPermissionTitles(model.getReadPermissions()).join(", ")}` })) : (React.createElement(React.Fragment, null)),
+                    tableColumns.length === 0 && allColumns.length > 0 ? (React.createElement(ErrorMessage, { message: `You are not authorized to view this table. You need any one of these permissions: ${PermissionHelper.getPermissionTitles(model.getReadPermissions()).join(", ")}` })) : (React.createElement(React.Fragment, null)),
                     props.topContent || React.createElement(React.Fragment, null),
                     tableColumns.length > 0 && showAs === ShowAs.Table ? (getTable()) : (React.createElement(React.Fragment, null)),
                     tableColumns.length > 0 && showAs === ShowAs.List ? (getList()) : (React.createElement(React.Fragment, null)))),
@@ -2279,7 +2510,8 @@ const BaseModelTable = (props) => {
                 setShowHelpModal(false);
             } },
             React.createElement("div", { className: "p-2" },
-                React.createElement(MarkdownViewer, { text: props.helpContent.markdown }))))));
+                React.createElement(MarkdownViewer, { text: props.helpContent.markdown })))),
+        getColumnCustomizationModal()));
 };
 export default BaseModelTable;
 //# sourceMappingURL=BaseModelTable.js.map