@oneuptime/common 11.7.1 → 11.7.3

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

@@ -25,6 +25,11 @@ 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";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
@@ -49,6 +54,20 @@ export var ShowAs;
     ShowAs[ShowAs["List"] = 1] = "List";
     ShowAs[ShowAs["OrderedStatesList"] = 2] = "OrderedStatesList";
 })(ShowAs || (ShowAs = {}));
+/*
+ * "Select All" loads the whole filtered result set - up to LIMIT_PER_PROJECT
+ * rows - with the same columns the table itself fetches. Asking for all of
+ * them in one request would mean a single wide, relation-joined query for up
+ * to 10,000 rows, which is exactly the kind of query the database statement
+ * timeout kills. It is paged instead: each request is comparable in cost to a
+ * large page load, so a big selection degrades in latency rather than failing.
+ *
+ * The page size trades those two costs off. Every list request also runs an
+ * unbounded count over the filtered set and pays a growing OFFSET, so smaller
+ * pages multiply that overhead; 1,000 keeps each query well inside the
+ * statement timeout while capping a maxed-out selection at ten round trips.
+ */
+export const BULK_SELECT_ALL_PAGE_SIZE = 1000;
 export var ModalTableBulkDefaultActions;
 (function (ModalTableBulkDefaultActions) {
     ModalTableBulkDefaultActions["Delete"] = "Delete";
@@ -69,6 +88,23 @@ const BaseModelTable = (props) => {
     const matchBulkSelectedItemByField = ((_a = props.bulkActions) === null || _a === void 0 ? void 0 : _a.matchBulkSelectedItemByField) || "_id";
     const model = new props.modelType();
     const [bulkSelectedItems, setBulkSelectedItems] = useState([]);
+    /*
+     * "Select All" gets its own loading / error state instead of sharing
+     * `isLoading` and `error` with fetchItems. They ran concurrently before, so
+     * a page refresh landing mid-selection flipped the spinner off and cleared
+     * the other's error - which is how a failed select-all could leave the user
+     * with only the current page selected and nothing on screen to say so.
+     */
+    const [isBulkSelectAllLoading, setIsBulkSelectAllLoading] = useState(false);
+    const [bulkSelectionError, setBulkSelectionError] = useState("");
+    const [bulkSelectionTotalCount, setBulkSelectionTotalCount] = useState(0);
+    const [isBulkSelectionTruncated, setIsBulkSelectionTruncated] = useState(false);
+    /*
+     * The paged select-all spans several round trips, so the user can clear the
+     * selection or start another one while it is still running. Every run takes
+     * a token and drops its results if a newer one has since started.
+     */
+    const bulkSelectAllToken = React.useRef(0);
     let showAs = props.showAs;
     if (!showAs) {
         showAs = ShowAs.Table;
@@ -78,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([]);
@@ -464,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,
         });
     };
@@ -498,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) {
@@ -518,7 +648,19 @@ const BaseModelTable = (props) => {
                         "." +
                         column.selectedProperty)
                     : key;
-                columns.push(Object.assign(Object.assign({}, column), { disableSort: column.disableSort || shouldDisableSort(key), key: columnKey, tooltipText, getElement: column.getElement }));
+                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
+                     * every field the column declares (and that we actually selected).
+                     */
+                    exportKeys: getExportKeysFromColumn({
+                        column: column,
+                        columnKey: columnKey ? String(columnKey) : null,
+                        hasPermissionToReadField: (field) => {
+                            return hasPermissionToReadField(field);
+                        },
+                    }), tooltipText, getElement: column.getElement }));
                 if (key) {
                     selectFields[key] = true;
                 }
@@ -760,28 +902,194 @@ const BaseModelTable = (props) => {
         }
         return fragment;
     };
+    /*
+     * Selects every row matching the table's current query, filters and search -
+     * not just the rows on screen - and returns whether it succeeded.
+     *
+     * It fetches the SAME columns as fetchItems. It used to ask for
+     * `select: { _id: true }`, which picked the right rows but stripped every
+     * field off them, so "Export CSV" over a select-all wrote one blank line per
+     * row and any bulk action that reads a field (or renders an item's name) saw
+     * undefined. Routing the projection through getSelect() also keeps
+     * `selectMoreFields` and per-field read permissions in play, which a
+     * hand-rolled column list would silently drop.
+     */
     const fetchAllBulkItems = async () => {
-        setError("");
-        setIsLoading(true);
+        var _a;
+        const token = ++bulkSelectAllToken.current;
+        setBulkSelectionError("");
+        setIsBulkSelectionTruncated(false);
+        setIsBulkSelectAllLoading(true);
+        const itemsSelected = [];
         try {
-            const listResult = await props.callbacks.getList({
-                modelType: props.modelType,
-                query: Object.assign(Object.assign(Object.assign({}, props.query), query), buildSearchQueryFragment()),
-                limit: LIMIT_PER_PROJECT,
-                skip: 0,
-                select: {
-                    _id: true,
-                },
-                sort: {},
-                requestOptions: props.fetchRequestOptions,
-            });
-            setBulkSelectedItems(listResult.data);
+            /*
+             * An unsorted table is served in the API's default order, so the
+             * selection has to ask for that order explicitly - once any sort is
+             * sent, the server stops applying its default. Without this the rows
+             * came back in random UUID order, which both scrambled the exported
+             * CSV and, on a table past the selection ceiling, kept an arbitrary
+             * slice of history instead of the newest rows the user was looking at.
+             */
+            const defaultSortColumn = model.defaultSortColumn || "createdAt";
+            const bulkSort = (sortBy
+                ? { [sortBy]: sortOrder }
+                : { [defaultSortColumn]: SortOrder.Descending });
+            /*
+             * skip/limit paging is only stable over a total order. The field that
+             * identifies a selected row (`_id` unless a table overrides it) is
+             * appended as a tiebreaker so rows sharing a sort value - 1,200 labels
+             * imported in one transaction all share a createdAt - cannot land on
+             * two pages while another row is never returned at all.
+             */
+            if (bulkSort[matchBulkSelectedItemByField] === undefined) {
+                bulkSort[matchBulkSelectedItemByField] = SortOrder.Ascending;
+            }
+            /*
+             * getSelect() throws on a misconfigured column, so it is built inside
+             * the try: otherwise the button would be left spinning forever with an
+             * unhandled rejection instead of a message.
+             */
+            const bulkSelect = Object.assign(Object.assign({}, getSelect()), getRelationSelect());
+            /*
+             * Every ordered column has to be selected for the database to order by
+             * it. `_id` always is; the default sort column usually is not, and a
+             * table matching its selection on some field other than `_id` would
+             * otherwise tick no row checkboxes at all.
+             */
+            for (const sortColumn of Object.keys(bulkSort)) {
+                if (bulkSelect[sortColumn] === undefined &&
+                    model.hasColumn(sortColumn)) {
+                    bulkSelect[sortColumn] = true;
+                }
+            }
+            let totalCount = 0;
+            let hasMore = false;
+            let rowsFetched = 0;
+            /*
+             * Offset paging over a table that is still receiving writes can hand
+             * back a row that an earlier page already returned. Selecting it twice
+             * would duplicate it in the export and inflate the selected count.
+             */
+            const seenItemIds = new Set();
+            while (itemsSelected.length < LIMIT_PER_PROJECT) {
+                const limit = Math.min(BULK_SELECT_ALL_PAGE_SIZE, LIMIT_PER_PROJECT - itemsSelected.length);
+                const listResult = await props.callbacks.getList({
+                    modelType: props.modelType,
+                    query: Object.assign(Object.assign(Object.assign({}, props.query), query), buildSearchQueryFragment()),
+                    groupBy: Object.assign({}, props.groupBy),
+                    limit: limit,
+                    skip: rowsFetched,
+                    select: bulkSelect,
+                    sort: bulkSort,
+                    requestOptions: props.fetchRequestOptions,
+                });
+                if (token !== bulkSelectAllToken.current) {
+                    // A newer select-all, or a cleared selection, superseded this run.
+                    return false;
+                }
+                totalCount = listResult.count || totalCount;
+                hasMore = Boolean(listResult.hasMore);
+                rowsFetched += listResult.data.length;
+                for (const item of listResult.data) {
+                    const itemId = ((_a = item[matchBulkSelectedItemByField]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
+                    if (itemId) {
+                        if (seenItemIds.has(itemId)) {
+                            continue;
+                        }
+                        seenItemIds.add(itemId);
+                    }
+                    itemsSelected.push(item);
+                }
+                if (listResult.data.length < limit) {
+                    // A short page is the last page.
+                    hasMore = false;
+                    break;
+                }
+                if (listResult.hasMore === false) {
+                    break;
+                }
+                if (totalCount > 0 && rowsFetched >= totalCount) {
+                    /*
+                     * Everything matching has been read. Stopping here saves the
+                     * empty round trip a result set that is an exact multiple of the
+                     * page size would otherwise cost - and each of those requests
+                     * runs a full count over the filtered set.
+                     */
+                    break;
+                }
+            }
+            setBulkSelectionTotalCount(Math.max(totalCount, itemsSelected.length));
+            setIsBulkSelectionTruncated(totalCount > rowsFetched || hasMore);
+            setBulkSelectedItems(itemsSelected);
+            return true;
         }
         catch (err) {
-            setError(API.getFriendlyMessage(err));
+            if (token === bulkSelectAllToken.current) {
+                /*
+                 * Leave the existing selection alone. A half-loaded selection that
+                 * claims to be everything is worse than a failed one, and the user
+                 * can retry because the Select All button stays on screen.
+                 */
+                setBulkSelectionError(API.getFriendlyMessage(err));
+            }
+            return false;
+        }
+        finally {
+            if (token === bulkSelectAllToken.current) {
+                setIsBulkSelectAllLoading(false);
+            }
         }
-        setIsLoading(false);
     };
+    const clearBulkSelectionState = () => {
+        // Supersede any select-all still in flight so it cannot repopulate this.
+        bulkSelectAllToken.current++;
+        setIsBulkSelectAllLoading(false);
+        setBulkSelectionError("");
+        setIsBulkSelectionTruncated(false);
+        setBulkSelectionTotalCount(0);
+        setBulkSelectedItems((existingItems) => {
+            /*
+             * Keep the same array when there is nothing to clear, so calling this on
+             * every query change (below) costs an idle table no re-render.
+             */
+            return existingItems.length === 0 ? existingItems : [];
+        });
+    };
+    /*
+     * Everything that decides *which rows match* - the caller's query, the
+     * column filters, the search term and the label chips. Serialised because
+     * callers routinely pass `query` as a fresh object literal on every render,
+     * and the label chips get their display names hydrated after mount without
+     * the set of ids ever changing.
+     *
+     * Sort and page are deliberately left out: they re-order or re-window the
+     * same matching set, so a selection made under them is still a selection of
+     * rows that match. Selecting rows across pages is a real workflow, and a
+     * truncated select-all keeps saying "selected N of M matching" after a
+     * re-sort, which stays true.
+     */
+    const effectiveQueryKey = JSON.stringify({
+        props: props.query || {},
+        filter: query,
+        search: debouncedSearchText.trim(),
+        labels: selectedLabelIdsKey,
+    });
+    /*
+     * A selection refers to the rows the *previous* query returned. Once the
+     * query changes, the table underneath the bulk bar is a different result
+     * set, so carrying the selection over leaves the bar claiming "6,000 Alerts
+     * Selected" above a filtered-down list of 12 - with the Select All button
+     * hidden, as though the selection matched what is on screen, and Delete
+     * still wired to all 6,000 rows the user can no longer see.
+     *
+     * Dropping it here also bumps `bulkSelectAllToken`, so a filter change that
+     * lands while a paged select-all is still running supersedes that run
+     * instead of letting it finish and repopulate the selection against the old
+     * query.
+     */
+    useEffect(() => {
+        clearBulkSelectionState();
+    }, [effectiveQueryKey]);
     const fetchItems = async () => {
         setError("");
         setIsLoading(true);
@@ -855,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)
             : [];
@@ -892,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) {
@@ -918,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({});
@@ -935,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.
+                         */
                     }
                 } }));
         }
@@ -1042,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(() => {
@@ -1140,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 = [];
@@ -1412,11 +1780,14 @@ const BaseModelTable = (props) => {
                     }),
                 };
             })(), onBulkActionEnd: async () => {
-                setBulkSelectedItems([]);
+                clearBulkSelectionState();
                 await fetchItems();
             }, onBulkActionStart: () => { }, bulkSelectedItems: bulkSelectedItems, onBulkSelectedItemAdded: (item) => {
+                // The user has moved on from the failed select-all.
+                setBulkSelectionError("");
                 setBulkSelectedItems([...bulkSelectedItems, item]);
             }, onBulkSelectedItemRemoved: (item) => {
+                setBulkSelectionError("");
                 setBulkSelectedItems(bulkSelectedItems.filter((i) => {
                     var _a, _b;
                     return (((_a = i[matchBulkSelectedItemByField]) === null || _a === void 0 ? void 0 : _a.toString()) !==
@@ -1435,10 +1806,10 @@ const BaseModelTable = (props) => {
                 });
                 setBulkSelectedItems(uniqueItems);
             }, onBulkClearAllItems: () => {
-                setBulkSelectedItems([]);
+                clearBulkSelectionState();
             }, onBulkSelectAllItems: async () => {
-                await fetchAllBulkItems();
-            }, matchBulkSelectedItemByField: matchBulkSelectedItemByField || "_id", bulkItemToString: (item) => {
+                return await fetchAllBulkItems();
+            }, bulkSelectionError: bulkSelectionError, isBulkSelectAllLoading: isBulkSelectAllLoading, isBulkSelectionTruncated: isBulkSelectionTruncated, bulkSelectionTotalCount: bulkSelectionTotalCount, matchBulkSelectedItemByField: matchBulkSelectedItemByField || "_id", bulkItemToString: (item) => {
                 var _a, _b;
                 const label = props.singularName || item.singularName || "";
                 const name = ((_a = item["name"]) === null || _a === void 0 ? void 0 : _a.toString()) ||
@@ -1878,6 +2249,8 @@ const BaseModelTable = (props) => {
                 return "Watch Demo";
             case IconProp.Search:
                 return "Search";
+            case IconProp.TableCells:
+                return "Columns";
             default:
                 return "Action";
         }
@@ -1973,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) {
@@ -1980,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)))),
@@ -2066,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