@oneuptime/common 11.6.1 → 11.6.2

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

@@ -1,11 +1,12 @@
 import Includes from "../../../Types/BaseDatabase/Includes";
-import QueryOperator from "../../../Types/BaseDatabase/QueryOperator";
 import { API_DOCS_URL, BILLING_ENABLED, getAllEnvVars } from "../../Config";
 import API from "../../Utils/API/API";
 import useTranslateValue from "../../Utils/Translation";
 import { Logger } from "../../Utils/Logger";
 import Navigation from "../../Utils/Navigation";
 import TableFilterUrlState from "../../Utils/TableFilterUrlState";
+import TableViewUrlState from "../../Utils/TableViewUrlState";
+import buildQueryFromFilterData, { sanitizeFilterData, } from "./FilterDataToQuery";
 import PermissionUtil from "../../Utils/Permission";
 import ProjectUtil from "../../Utils/Project";
 import User from "../../Utils/User";
@@ -29,8 +30,6 @@ import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseMod
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
-import InBetween from "../../../Types/BaseDatabase/InBetween";
-import Search from "../../../Types/BaseDatabase/Search";
 import MultiSearch from "../../../Types/BaseDatabase/MultiSearch";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import SubscriptionPlan from "../../../Types/Billing/SubscriptionPlan";
@@ -41,7 +40,6 @@ import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";
 import ObjectID from "../../../Types/ObjectID";
 import Permission, { PermissionHelper, } from "../../../Types/Permission";
-import Typeof from "../../../Types/Typeof";
 import React, { useEffect, useMemo, useState, } from "react";
 import TableViewElement from "./TableView";
 import UserPreferences, { UserPreferenceType, } from "../../../Utils/UserPreferences";
@@ -61,7 +59,7 @@ export var ModalType;
     ModalType[ModalType["Edit"] = 1] = "Edit";
 })(ModalType || (ModalType = {}));
 const BaseModelTable = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { translateValue, translateString } = useTranslateValue();
     const tx = (value) => {
         var _a;
@@ -106,11 +104,58 @@ const BaseModelTable = (props) => {
         }
         return props.initialItemsOnPage || 10;
     };
+    /*
+     * ---------------------------------------------------------------------
+     * URL-persisted view state
+     * ---------------------------------------------------------------------
+     *
+     * The table mirrors its filters, facets, search, sort and page into the URL
+     * query string so that (a) navigating into a row and pressing Back brings
+     * the same filtered view back, and (b) the URL can be pasted to a teammate.
+     *
+     * The snapshot is read *once, synchronously, during the first render* and
+     * fed to the `useState` initializers below. Restoring in an effect instead
+     * would fire the first fetch against the unfiltered defaults and then throw
+     * that response away — a visible flash of the wrong rows plus a wasted
+     * request.
+     */
+    const urlStateKey = props.disableUrlState
+        ? undefined
+        : props.urlStateKey ||
+            ((_b = props.saveFilterProps) === null || _b === void 0 ? void 0 : _b.tableId) ||
+            props.userPreferencesKey ||
+            undefined;
+    const initialUrlState = useMemo(() => {
+        const restoredFilter = TableFilterUrlState.read(urlStateKey, "filter");
+        /*
+         * Anything on the URL is user-editable, so keep only the fields this table
+         * actually offers a filter for before it reaches the outgoing query.
+         */
+        const sanitized = restoredFilter
+            ? sanitizeFilterData({
+                filterData: restoredFilter,
+                filters: props.filters,
+            })
+            : null;
+        return {
+            filter: sanitized && Object.keys(sanitized).length > 0 ? sanitized : null,
+            view: TableViewUrlState.fromJSON(TableFilterUrlState.read(urlStateKey, "view")),
+        };
+    }, []);
+    // Surfaces two tables on one page accidentally sharing a URL namespace.
+    useEffect(() => {
+        return TableFilterUrlState.claimKey(urlStateKey);
+    }, [urlStateKey]);
     const [orderedStatesListNewItemOrder, setOrderedStatesListNewItemOrder] = useState(null);
     const [onBeforeFetchData, setOnBeforeFetchData] = useState(undefined);
     const [data, setData] = useState([]);
-    const [query, setQuery] = useState({});
-    const [currentPageNumber, setCurrentPageNumber] = useState(1);
+    const [query, setQuery] = useState(() => {
+        return buildQueryFromFilterData({
+            filterData: initialUrlState.filter || props.initialFilterData || {},
+            filters: props.filters,
+        });
+    });
+    const [currentPageNumber, setCurrentPageNumber] = useState(initialUrlState.view.page || 1);
     const [totalItemsCount, setTotalItemsCount] = useState(0);
     /*
      * Analytics endpoints (Log/Span/Metric/...) skip COUNT(*) for
@@ -122,16 +167,37 @@ const BaseModelTable = (props) => {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState("");
     const [tableFilterError, setTableFilterError] = useState("");
-    const [searchText, setSearchText] = useState("");
-    const [debouncedSearchText, setDebouncedSearchText] = useState("");
+    const [searchText, setSearchText] = useState(initialUrlState.view.search || "");
+    const [debouncedSearchText, setDebouncedSearchText] = useState(initialUrlState.view.search || "");
     const [isSearchFocused, setIsSearchFocused] = useState(false);
-    const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+    const [isSearchExpanded, setIsSearchExpanded] = useState(Boolean(initialUrlState.view.search || (initialUrlState.view.labels || []).length));
     const searchInputRef = React.useRef(null);
     const [availableLabels, setAvailableLabels] = useState([]);
-    const [selectedLabels, setSelectedLabels] = useState([]);
+    /*
+     * Restored label chips start as bare IDs — the id is all the query needs, so
+     * rows are correct on the very first fetch. The human-readable name/colour
+     * are filled in by the hydration effect below once the label list loads.
+     */
+    const [selectedLabels, setSelectedLabels] = useState(() => {
+        return (initialUrlState.view.labels || []).map((id) => {
+            return { id: id, name: id, color: "#94a3b8" };
+        });
+    });
     const [isLabelsLoading, setIsLabelsLoading] = useState(false);
     const [labelsFetched, setLabelsFetched] = useState(false);
     const [labelDropdownIndex, setLabelDropdownIndex] = useState(0);
+    /*
+     * Only the *ids* affect the query, so effects key off this instead of the
+     * array itself. Without it, merely re-labelling a chip (which happens when
+     * URL-restored chips get their display name hydrated) would look like a
+     * filter change and trigger a refetch + a jump back to page 1.
+     */
+    const selectedLabelIds = useMemo(() => {
+        return selectedLabels.map((l) => {
+            return l.id;
+        });
+    }, [selectedLabels]);
+    const selectedLabelIdsKey = selectedLabelIds.join(",");
     useEffect(() => {
         const handle = setTimeout(() => {
             setDebouncedSearchText(searchText);
@@ -182,11 +248,20 @@ const BaseModelTable = (props) => {
             !isSearchExpanded) {
             setIsSearchExpanded(true);
         }
-    }, [debouncedSearchText, selectedLabels]);
+    }, [debouncedSearchText, selectedLabelIdsKey]);
+    /*
+     * Effects run on mount too, so without this guard the very first pass would
+     * stomp a page number restored from the URL back to 1.
+     */
+    const isFirstRenderRef = React.useRef(true);
     useEffect(() => {
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+            return;
+        }
         // reset to first page whenever the active search term or labels change
         setCurrentPageNumber(1);
-    }, [debouncedSearchText, selectedLabels]);
+    }, [debouncedSearchText, selectedLabelIdsKey]);
     const labelFilterConfig = useMemo(() => {
         const filter = props.filters.find((f) => {
             return (f.filterEntityType &&
@@ -268,15 +343,55 @@ const BaseModelTable = (props) => {
             cancelled = true;
         };
     }, [isSearchExpanded, labelFilterConfig, labelsFetched]);
+    /*
+     * Chips restored from the URL only carry an id. Once the label list lands,
+     * swap in the real name and colour so the chip reads "Production" rather
+     * than a raw ObjectID. Labels that no longer exist (deleted, or not visible
+     * to this user) keep their id — the filter still applies, it just isn't
+     * pretty, which beats silently dropping a constraint from a shared link.
+     */
+    useEffect(() => {
+        if (availableLabels.length === 0 || selectedLabels.length === 0) {
+            return;
+        }
+        let didHydrate = false;
+        const hydrated = selectedLabels.map((selected) => {
+            const match = availableLabels.find((available) => {
+                return available.id === selected.id;
+            });
+            if (!match || match.name === selected.name) {
+                return selected;
+            }
+            didHydrate = true;
+            return match;
+        });
+        if (didHydrate) {
+            setSelectedLabels(hydrated);
+        }
+    }, [availableLabels]);
     const [showModel, setShowModal] = useState(false);
     const [showFilterModal, setShowFilterModal] = useState(false);
     const [modalType, setModalType] = useState(ModalType.Create);
-    const [sortBy, setSortBy] = useState(props.sortBy || null);
-    const [sortOrder, setSortOrder] = useState(props.sortOrder || SortOrder.Ascending);
+    const [sortBy, setSortBy] = useState(initialUrlState.view.sortBy ||
+        props.sortBy ||
+        null);
+    const [sortOrder, setSortOrder] = useState(initialUrlState.view.sortOrder || props.sortOrder || SortOrder.Ascending);
     const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
     const [currentEditableItem, setCurrentEditableItem] = useState(null);
     const [currentDeleteableItem, setCurrentDeleteableItem] = useState(null);
-    const [itemsOnPage, setItemsOnPage] = useState(getItemsOnPage());
+    /*
+     * A page size that came in on the URL wins over the viewer's own stored
+     * preference — a shared link should render the same slice of rows for
+     * everyone who opens it.
+     */
+    const [itemsOnPage, setItemsOnPage] = useState(initialUrlState.view.itemsOnPage || getItemsOnPage());
+    /*
+     * Page size is a personal preference (it already lives in localStorage), so
+     * it is only put on the URL once it is explicitly part of *this* view —
+     * either it arrived on the link, or the viewer changed it here. Otherwise
+     * every table would carry a redundant `itemsOnPage` param.
+     */
+    const isItemsOnPageExplicitRef = React.useRef(Boolean(initialUrlState.view.itemsOnPage));
     useEffect(() => {
         // update items on page in localstorage.
         if (itemsOnPage && props.userPreferencesKey) {
@@ -296,6 +411,22 @@ const BaseModelTable = (props) => {
         // only update if the query has changed.
         if (JSON.stringify(currentQuery) !== JSON.stringify(newQuery)) {
             propsQueryRef.current = newQuery;
+            /*
+             * This is how facet-bar selections reach the API, so narrowing the
+             * result set has to send the user back to page 1 — exactly like the
+             * column-filter path does in `onFilterChanged`. Without it, changing a
+             * facet while on page 5 re-queries page 5 of a now-shorter list and
+             * lands on an empty page (and, since the page number is mirrored into
+             * the URL, shares that empty page too).
+             *
+             * When the page is already 1, `setCurrentPageNumber` is a no-op and the
+             * explicit fetch below is what refreshes the list; when it isn't, the
+             * state change re-runs the main fetch effect.
+             */
+            if (currentPageNumber !== 1) {
+                setCurrentPageNumber(1);
+                return;
+            }
             fetchItems().catch((err) => {
                 setError(API.getFriendlyMessage(err));
             });
@@ -700,6 +831,29 @@ const BaseModelTable = (props) => {
             });
         }
     }, [showFilterModal, props.filters]);
+    /*
+     * A table restored from the URL is already filtered, so its chips have to
+     * render immediately — and entity/dropdown chips can only resolve their
+     * labels from `filterDropdownOptions`, which are otherwise fetched lazily
+     * when the filter popup opens. Without this, a shared link (or a Back
+     * navigation) showed a filtered list with no visible indication of *why*,
+     * and no "Clear Filters" button to escape it.
+     */
+    useEffect(() => {
+        var _a;
+        if (!initialUrlState.filter) {
+            return;
+        }
+        /*
+         * Callers use this to render their own "filters active" affordance. It is
+         * otherwise only fired by the filter form, so a restored view would show a
+         * clean banner over a filtered table.
+         */
+        (_a = props.onFilterApplied) === null || _a === void 0 ? void 0 : _a.call(props, true);
+        getFilterDropdownItems().catch((err) => {
+            setTableFilterError(API.getFriendlyMessage(err));
+        });
+    }, []);
     const getSelect = () => {
         const selectFields = getSelectFromColumns({
             columns: props.columns || [],
@@ -739,6 +893,7 @@ const BaseModelTable = (props) => {
         }
         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) => {
+                    var _a;
                     setTableView(tableView);
                     if (tableView) {
                         const sortBy = Object.keys(tableView.sort || {})[0];
@@ -751,6 +906,8 @@ const BaseModelTable = (props) => {
                         // then set query, sort and items on the page
                         setQuery(tableView.query || {});
                         setFilterData(tableView.query || {});
+                        // a saved view pins its own page size, so it belongs on the URL
+                        isItemsOnPageExplicitRef.current = true;
                         setItemsOnPage(tableView.itemsOnPage || 10);
                         setSortBy(sortBy || null);
                         setSortOrder(sortOrder);
@@ -764,6 +921,13 @@ const BaseModelTable = (props) => {
                     }
                     else {
                         setQuery({});
+                        /*
+                         * Also clear the filter chips. Leaving `filterData` behind kept
+                         * the chips on screen and the `-filter` param in the URL, so the
+                         * next visit re-applied the very filters the user just cleared.
+                         */
+                        setFilterData({});
+                        (_a = props.onFilterApplied) === null || _a === void 0 ? void 0 : _a.call(props, false);
                         setSortBy(null);
                         setSortOrder(SortOrder.Descending);
                         setItemsOnPage(10);
@@ -865,7 +1029,13 @@ const BaseModelTable = (props) => {
                 buttonSize: ButtonSize.Small,
                 className: "",
                 onClick: () => {
-                    setQuery({});
+                    /*
+                     * Just open the popup. This used to `setQuery({})` first, which
+                     * dropped the active filters (and refetched everything) the moment
+                     * the user opened the filter UI — while the chips and the URL still
+                     * advertised them. Filters now change only when the form applies
+                     * them.
+                     */
                     setShowFilterModal(true);
                 },
                 disabled: isFilterFetchLoading,
@@ -885,7 +1055,7 @@ const BaseModelTable = (props) => {
         itemsOnPage,
         query,
         debouncedSearchText,
-        selectedLabels,
+        selectedLabelIdsKey,
         props.refreshToggle,
     ]);
     const shouldDisableSort = (columnName) => {
@@ -1084,79 +1254,51 @@ const BaseModelTable = (props) => {
         }
         setActionButtonSchema(actionsSchema);
     };
-    const [filterData, setFilterData] = useState(props.initialFilterData || {});
+    const [filterData, setFilterData] = useState(initialUrlState.filter || props.initialFilterData || {});
     const onFilterChanged = (filterData) => {
-        var _a;
-        const newQuery = {};
         setFilterData(filterData);
         setCurrentPageNumber(1);
-        for (const key in filterData) {
-            if (filterData[key] && typeof filterData[key] === Typeof.String) {
-                newQuery[key] = (filterData[key] || "").toString();
-            }
-            if (typeof filterData[key] === Typeof.Boolean) {
-                newQuery[key] = Boolean(filterData[key]);
-            }
-            if (typeof filterData[key] === Typeof.Number) {
-                newQuery[key] = filterData[key];
-            }
-            if (filterData[key] instanceof Date) {
-                newQuery[key] = filterData[key];
-            }
-            if (filterData[key] instanceof Search) {
-                newQuery[key] = filterData[key];
-            }
-            if (filterData[key] instanceof InBetween) {
-                newQuery[key] = filterData[key];
-            }
-            if (((_a = props.filters.find((f) => {
-                return f.field && f.field[key];
-            })) === null || _a === void 0 ? void 0 : _a.type) === FieldType.JSON &&
-                typeof filterData[key] === Typeof.Object) {
-                newQuery[key] = filterData[key];
-            }
-            if (Array.isArray(filterData[key])) {
-                newQuery[key] = new Includes(filterData[key]);
-            }
-            /*
-             * Pass any QueryOperator instance (IncludesAll, IncludesNone, StartsWith,
-             * EndsWith, NotContains, EqualTo, NotEqual, GreaterThan, LessThan,
-             * InBetween, IsNull, NotNull, ...) through to the query as-is.
-             */
-            if (filterData[key] instanceof QueryOperator) {
-                newQuery[key] = filterData[key];
-            }
-        }
-        setQuery(Object.assign({}, newQuery));
+        setQuery(buildQueryFromFilterData({
+            filterData: filterData,
+            filters: props.filters,
+        }));
     };
     /*
-     * URL persistence for classic (column) filters, keyed by the table's
-     * `saveFilterProps.tableId`. Mirrors the facet persistence in
-     * `useResourceOwners` so filters survive navigating to a detail page and
-     * back, and so a filtered view is shareable. `hasRestoredUrlFilters` is
-     * state (not a ref) so the persist effect only runs after the restore has
-     * been applied — never clobbering the snapshot with the empty default.
+     * Mirror the table's view into the URL so Back restores it and the link can
+     * be handed to a teammate. Restoring happens in the `useState` initializers
+     * above (synchronously, before the first fetch), so there is nothing to gate
+     * here: the first write after mount already carries the restored values.
+     *
+     * `replaceState` is used under the hood, so dragging a filter around doesn't
+     * flood the back stack.
      */
-    const [hasRestoredUrlFilters, setHasRestoredUrlFilters] = useState(false);
     useEffect(() => {
-        var _a;
-        const restored = TableFilterUrlState.read((_a = props.saveFilterProps) === null || _a === void 0 ? void 0 : _a.tableId, "filter");
-        if (restored) {
-            /*
-             * Re-run through onFilterChanged so the derived query is rebuilt and the
-             * first fetch uses the restored filters.
-             */
-            onFilterChanged(restored);
-        }
-        setHasRestoredUrlFilters(true);
-    }, []);
-    useEffect(() => {
-        var _a;
-        if (!hasRestoredUrlFilters) {
-            return;
-        }
-        TableFilterUrlState.write((_a = props.saveFilterProps) === null || _a === void 0 ? void 0 : _a.tableId, "filter", filterData);
-    }, [hasRestoredUrlFilters, filterData]);
+        TableFilterUrlState.writeMany(urlStateKey, {
+            filter: filterData,
+            view: TableViewUrlState.toJSON({
+                search: debouncedSearchText,
+                labels: selectedLabelIds,
+                sortBy: sortBy,
+                sortOrder: sortOrder,
+                page: currentPageNumber,
+                itemsOnPage: isItemsOnPageExplicitRef.current
+                    ? itemsOnPage
+                    : undefined,
+            }, {
+                sortBy: props.sortBy,
+                sortOrder: props.sortOrder,
+            }),
+        });
+    }, [
+        urlStateKey,
+        filterData,
+        debouncedSearchText,
+        selectedLabelIdsKey,
+        sortBy,
+        sortOrder,
+        currentPageNumber,
+        itemsOnPage,
+    ]);
     const getDeleteBulkAction = () => {
         return {
             title: "Delete",
@@ -1330,6 +1472,7 @@ const BaseModelTable = (props) => {
                 setCurrentPageNumber(pageNumber);
                 if (newItemsOnPage !== itemsOnPage) {
                     setTableView(null);
+                    isItemsOnPageExplicitRef.current = true;
                 }
                 setItemsOnPage(newItemsOnPage);
             }, noItemsMessage: props.noItemsMessage || "", onRefreshClick: async () => {
@@ -1367,7 +1510,7 @@ const BaseModelTable = (props) => {
                 onFilterChanged(filterData);
             }, onFilterRefreshClick: async () => {
                 await getFilterDropdownItems();
-            }, filters: classicTableFilters, filterError: tableFilterError, isFilterLoading: isFilterFetchLoading, showFilterModal: showFilterModal, onFilterModalClose: () => {
+            }, filters: classicTableFilters, filterData: filterData, filterError: tableFilterError, isFilterLoading: isFilterFetchLoading, showFilterModal: showFilterModal, onFilterModalClose: () => {
                 setShowFilterModal(false);
             }, onFilterModalOpen: () => {
                 setShowFilterModal(true);
@@ -1383,9 +1526,12 @@ const BaseModelTable = (props) => {
                     },
                 });
                 await fetchItems();
-            }, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, isLoading: getTableLoadingState(), totalItemsCount: totalItemsCount, hasMore: hasMore, data: data, id: props.id, fields: fields, itemsOnPage: itemsOnPage, disablePagination: props.disablePagination || false, onNavigateToPage: async (pageNumber, itemsOnPage) => {
+            }, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, isLoading: getTableLoadingState(), totalItemsCount: totalItemsCount, hasMore: hasMore, data: data, id: props.id, fields: fields, itemsOnPage: itemsOnPage, disablePagination: props.disablePagination || false, onNavigateToPage: async (pageNumber, newItemsOnPage) => {
                 setCurrentPageNumber(pageNumber);
-                setItemsOnPage(itemsOnPage);
+                if (newItemsOnPage !== itemsOnPage) {
+                    isItemsOnPageExplicitRef.current = true;
+                }
+                setItemsOnPage(newItemsOnPage);
             }, noItemsMessage: props.noItemsMessage || "", onRefreshClick: async () => {
                 await fetchItems();
             }, actionButtons: actionButtonSchema }));
@@ -1882,9 +2028,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 ${(_b = (props.singularName ||
+        showDeleteConfirmModal && (React.createElement(ConfirmModal, { title: `Delete ${props.singularName || model.singularName}`, description: `Are you sure you want to delete this ${(_c = (props.singularName ||
                 model.singularName ||
-                "item")) === null || _b === void 0 ? void 0 : _b.toLowerCase()}?`, onClose: () => {
+                "item")) === null || _c === void 0 ? void 0 : _c.toLowerCase()}?`, onClose: () => {
                 setShowDeleteConfirmModal(false);
             }, submitButtonText: "Delete", onSubmit: async () => {
                 if (currentDeleteableItem && currentDeleteableItem["_id"]) {