@oneuptime/common 12.0.22 → 12.0.24

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

@@ -27,6 +27,7 @@ import Pill from "../Pill/Pill";
 import Table from "../Table/Table";
 import FieldType from "../Types/FieldType";
 import ColumnCustomizationModal from "./ColumnCustomizationModal";
+import { getAttributeColumns, getAttributeKeysFromColumnPreference, normalizeAttributeKeys, } from "./AttributeColumns";
 import { applyColumnPreference, buildColumnPreference, fromJSON as columnPreferenceFromJSON, getCustomizableColumns, isEmptyColumnPreference, sanitizeColumnPreference, getColumnIds, toJSON as columnPreferenceToJSON, } from "./ColumnPreference";
 import { CustomFieldsColumnKey } from "./CustomFieldColumns";
 import useCustomFieldColumns from "./useCustomFieldColumns";
@@ -79,7 +80,7 @@ export var ModalType;
     ModalType[ModalType["Edit"] = 1] = "Edit";
 })(ModalType || (ModalType = {}));
 const BaseModelTable = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { translateValue, translateString } = useTranslateValue();
     const tx = (value) => {
         var _a;
@@ -148,12 +149,6 @@ const BaseModelTable = (props) => {
     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;
@@ -165,6 +160,59 @@ const BaseModelTable = (props) => {
     };
     const [columnPreference, setColumnPreference] = useState(readStoredColumnPreference);
     const [showColumnCustomizationModal, setShowColumnCustomizationModal] = useState(false);
+    /*
+     * ---------------------------------------------------------------------
+     * Attribute columns
+     * ---------------------------------------------------------------------
+     *
+     * A column per viewer-chosen key inside the model's map column. There is no
+     * second store for "which keys did they pick": a column exists precisely
+     * when its id is in the stored layout, and the id encodes the key. That is
+     * what makes "Reset to default" take them away, a saved TableView bring its
+     * own, and the two halves of a layout impossible to desynchronize.
+     *
+     * Derived from the RAW preference, before sanitizing: sanitizing drops ids
+     * that name no current column, and these are only current columns *because*
+     * their ids are in there.
+     */
+    const attributeColumnKey = useMemo(() => {
+        var _a;
+        const columnKey = (_a = props.attributeColumnsProps) === null || _a === void 0 ? void 0 : _a.columnKey;
+        if (!columnKey || !isColumnCustomizationEnabled) {
+            return null;
+        }
+        /*
+         * A key that is not a column on the model would make getSelectFromColumns
+         * throw and blank the whole table. A misconfigured prop should cost the
+         * feature, not the page.
+         */
+        return model.hasColumn(columnKey) ? columnKey : null;
+    }, [(_b = props.attributeColumnsProps) === null || _b === void 0 ? void 0 : _b.columnKey, isColumnCustomizationEnabled]);
+    const declaredColumns = useMemo(() => {
+        if (customFieldColumns.columns.length === 0) {
+            return props.columns || [];
+        }
+        return [...(props.columns || []), ...customFieldColumns.columns];
+    }, [props.columns, customFieldColumns.columns]);
+    const attributeColumns = useMemo(() => {
+        if (!attributeColumnKey) {
+            return [];
+        }
+        return getAttributeColumns({
+            attributesColumnKey: attributeColumnKey,
+            attributeKeys: getAttributeKeysFromColumnPreference({
+                preference: columnPreference,
+                attributesColumnKey: attributeColumnKey,
+                reservedColumnIds: getColumnIds(declaredColumns),
+            }),
+        });
+    }, [attributeColumnKey, columnPreference, declaredColumns]);
+    const allColumns = useMemo(() => {
+        if (attributeColumns.length === 0) {
+            return declaredColumns;
+        }
+        return [...declaredColumns, ...attributeColumns];
+    }, [declaredColumns, attributeColumns]);
     /*
      * Ids are derived over the *whole* declared set, so a column dropping out
      * for lack of permission can never renumber the ones that remain.
@@ -204,6 +252,12 @@ const BaseModelTable = (props) => {
             value: json,
         });
     };
+    /*
+     * The pool of keys the picker offers. Fetched the first time the picker
+     * opens, never on mount: it is a wide scan over the analytics table, and a
+     * table nobody customizes should not pay for it on every page load.
+     */
+    const [attributeKeyPool, setAttributeKeyPool] = useState({ keys: [], isLoading: false, error: "", hasLoaded: false });
     const [classicTableFilters, setClassicTableFilters] = useState([]);
     const [cardButtons, setCardButtons] = useState([]);
     const [actionButtonSchema, setActionButtonSchema] = useState([]);
@@ -248,7 +302,7 @@ const BaseModelTable = (props) => {
     const urlStateKey = props.disableUrlState
         ? undefined
         : props.urlStateKey ||
-            ((_b = props.saveFilterProps) === null || _b === void 0 ? void 0 : _b.tableId) ||
+            ((_c = props.saveFilterProps) === null || _c === void 0 ? void 0 : _c.tableId) ||
             props.userPreferencesKey ||
             undefined;
     const initialUrlState = useMemo(() => {
@@ -1237,6 +1291,17 @@ const BaseModelTable = (props) => {
             hasPermissionToReadField(CustomFieldsColumnKey)) {
             selectFields[CustomFieldsColumnKey] = true;
         }
+        /*
+         * Same reasoning for the attribute map column: a column added from the
+         * picker appears without a refetch, so the map it reads has to have been
+         * on the wire since the first request or the new column renders blank
+         * until something else happens to reload the page.
+         */
+        if (attributeColumnKey &&
+            (hasPermissionToReadField(attributeColumnKey) ||
+                User.isMasterAdmin())) {
+            selectFields[attributeColumnKey] = true;
+        }
         const selectMoreFields = props.selectMoreFields
             ? Object.keys(props.selectMoreFields)
             : [];
@@ -1559,12 +1624,66 @@ const BaseModelTable = (props) => {
         serializeToTableColumns();
     }, [props.columns]);
     /*
-     * The viewer changed their layout, or the project's custom field
-     * definitions finally arrived.
+     * The viewer changed their layout, the project's custom field definitions
+     * finally arrived, or an attribute column was added or removed.
      */
     useEffect(() => {
         serializeToTableColumns();
-    }, [effectiveColumnPreference, customFieldColumns.columns]);
+    }, [effectiveColumnPreference, customFieldColumns.columns, attributeColumns]);
+    /*
+     * The attribute key pool is only ever needed by the picker, so it is fetched
+     * when the picker first opens and kept for the rest of the page's life.
+     * A failure costs the "add a column" search box and nothing else — the
+     * columns the viewer already added are rebuilt from their stored layout and
+     * do not depend on this at all.
+     */
+    useEffect(() => {
+        if (!showColumnCustomizationModal ||
+            !attributeColumnKey ||
+            !props.attributeColumnsProps ||
+            attributeKeyPool.hasLoaded ||
+            attributeKeyPool.isLoading) {
+            return;
+        }
+        const fetchAttributeKeys = props.attributeColumnsProps.fetchAttributeKeys;
+        let isCancelled = false;
+        setAttributeKeyPool({
+            keys: [],
+            isLoading: true,
+            error: "",
+            hasLoaded: false,
+        });
+        fetchAttributeKeys()
+            .then((keys) => {
+            if (isCancelled) {
+                return;
+            }
+            setAttributeKeyPool({
+                keys: normalizeAttributeKeys(keys),
+                isLoading: false,
+                error: "",
+                hasLoaded: true,
+            });
+        })
+            .catch((err) => {
+            if (isCancelled) {
+                return;
+            }
+            setAttributeKeyPool({
+                keys: [],
+                isLoading: false,
+                error: API.getFriendlyMessage(err),
+                /*
+                 * Not "loaded": closing and reopening the picker is the only retry
+                 * anyone would think to try, so let it be one.
+                 */
+                hasLoaded: false,
+            });
+        });
+        return () => {
+            isCancelled = true;
+        };
+    }, [showColumnCustomizationModal, attributeColumnKey]);
     const setActionSchema = () => {
         const permissions = PermissionUtil.getAllPermissions();
         const actionsSchema = [];
@@ -2455,9 +2574,9 @@ const BaseModelTable = (props) => {
         }
         return hasPermissionToReadColumn(column) || User.isMasterAdmin();
     };
-    const getPickerEntries = (preference) => {
+    const getPickerEntries = (preference, columns) => {
         return getCustomizableColumns({
-            columns: allColumns,
+            columns: columns || allColumns,
             preference: preference,
         }).filter((entry) => {
             return isPickableColumn(entry.column);
@@ -2481,7 +2600,13 @@ const BaseModelTable = (props) => {
          * 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));
+        /*
+         * Over the DECLARED columns only. An attribute column exists because the
+         * viewer added it, so the layout that has none of them is the default one
+         * — otherwise adding a column and then removing it again would leave the
+         * table pinned to a stored layout it no longer differs from.
+         */
+        const defaultPreference = buildColumnPreference(getPickerEntries(null, declaredColumns));
         const isBackToDefault = JSON.stringify(preference) === JSON.stringify(defaultPreference);
         /*
          * Sorting by a column that is no longer on screen leaves the viewer with
@@ -2503,11 +2628,48 @@ const BaseModelTable = (props) => {
         saveColumnPreference(isBackToDefault ? null : preference);
         setShowColumnCustomizationModal(false);
     };
+    /*
+     * The pool the picker offers, as picker entries rather than model columns,
+     * so the modal can stage one straight into its list. Every one starts
+     * removable — the whole point is that the viewer can take it away again.
+     */
+    const addableAttributeColumns = useMemo(() => {
+        if (!attributeColumnKey || attributeKeyPool.keys.length === 0) {
+            return [];
+        }
+        return getAttributeColumns({
+            attributesColumnKey: attributeColumnKey,
+            attributeKeys: attributeKeyPool.keys,
+        }).map((column, index) => {
+            return {
+                id: column.id || `${attributeColumnKey}.${index}`,
+                column: column,
+                isVisible: true,
+                isPinned: false,
+                isRemovable: true,
+            };
+        });
+    }, [attributeColumnKey, attributeKeyPool.keys]);
+    const getAddableColumnsConfig = () => {
+        if (!attributeColumnKey || !props.attributeColumnsProps) {
+            return undefined;
+        }
+        return {
+            title: props.attributeColumnsProps.title || tx("Add Attribute Column"),
+            description: props.attributeColumnsProps.description ||
+                tx("Attributes vary per event, so they are not listed above. Search for one to add it as a column."),
+            placeholder: props.attributeColumnsProps.placeholder || "Search...",
+            emptyMessage: props.attributeColumnsProps.emptyMessage,
+            isLoading: attributeKeyPool.isLoading,
+            errorMessage: attributeKeyPool.error,
+            columns: addableAttributeColumns,
+        };
+    };
     const getColumnCustomizationModal = () => {
         if (!showColumnCustomizationModal || !isColumnCustomizationEnabled) {
             return null;
         }
-        return (React.createElement(ColumnCustomizationModal, { columns: getPickerEntries(effectiveColumnPreference), isDefaultLayout: isEmptyColumnPreference(effectiveColumnPreference), title: tx("Customize Columns"), onSave: onColumnCustomizationSave, onReset: () => {
+        return (React.createElement(ColumnCustomizationModal, { columns: getPickerEntries(effectiveColumnPreference), addableColumns: getAddableColumnsConfig(), isDefaultLayout: isEmptyColumnPreference(effectiveColumnPreference), title: tx("Customize Columns"), onSave: onColumnCustomizationSave, onReset: () => {
                 saveColumnPreference(null);
                 setShowColumnCustomizationModal(false);
             }, onClose: () => {
@@ -2569,9 +2731,9 @@ const BaseModelTable = (props) => {
                 ? new ObjectID(currentEditableItem["_id"])
                 : undefined,
         })) : (React.createElement(React.Fragment, null)),
-        showDeleteConfirmModal && (React.createElement(ConfirmModal, { title: `Delete ${props.singularName || model.singularName}`, description: `Are you sure you want to delete this ${(_c = (props.singularName ||
+        showDeleteConfirmModal && (React.createElement(ConfirmModal, { title: `Delete ${props.singularName || model.singularName}`, description: `Are you sure you want to delete this ${(_d = (props.singularName ||
                 model.singularName ||
-                "item")) === null || _c === void 0 ? void 0 : _c.toLowerCase()}?`, onClose: () => {
+                "item")) === null || _d === void 0 ? void 0 : _d.toLowerCase()}?`, onClose: () => {
                 setShowDeleteConfirmModal(false);
             }, submitButtonText: "Delete", onSubmit: async () => {
                 if (currentDeleteableItem && currentDeleteableItem["_id"]) {