@oneuptime/common 14.0.12 → 14.0.13

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

@@ -2,6 +2,9 @@ import Includes from "../../../Types/BaseDatabase/Includes";
 import { API_DOCS_URL, BILLING_ENABLED, getAllEnvVars } from "../../Config";
 import API from "../../Utils/API/API";
 import useTranslateValue from "../../Utils/Translation";
+import { translatableTerm, translateNamedAction, translationKey, } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import TranslatedSentence from "../TranslatedSentence/TranslatedSentence";
 import { Logger } from "../../Utils/Logger";
 import Navigation from "../../Utils/Navigation";
 import TableFilterUrlState from "../../Utils/TableFilterUrlState";
@@ -14,11 +17,10 @@ import User from "../../Utils/User";
 import { ActionButtonPlacement, } from "../ActionButton/ActionButtonSchema";
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import CopyTextButton from "../CopyTextButton/CopyTextButton";
-import MoreMenu from "../MoreMenu/MoreMenu";
+import CardMoreMenu from "../Card/CardMoreMenu";
 import MoreMenuItem from "../MoreMenu/MoreMenuItem";
 import Card from "../Card/Card";
 import { getRefreshButton } from "../Card/CardButtons/Refresh";
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import List from "../List/List";
 import ConfirmModal from "../Modal/ConfirmModal";
 import Modal, { ModalWidth } from "../Modal/Modal";
@@ -27,10 +29,11 @@ import DeleteItemNames from "../DeleteConfirmation/DeleteItemNames";
 import { getRecordDisplayName } from "../../Utils/ModelDisplayName";
 import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import Icon from "../Icon/Icon";
-import OrderedStatesList from "../OrderedStatesList/OrderedStatesList";
 import Pill from "../Pill/Pill";
 import Table from "../Table/Table";
-import { getEmptyTableMessage } from "../Table/EmptyTableMessage";
+import TableEmptyState from "../Table/TableEmptyState";
+import { hasFilterValues } from "../Table/TableEmptyStateBuilders";
+import { buildModelTableEmptyState, buildNoAccessState, } from "./ModelTableEmptyState";
 import FieldType from "../Types/FieldType";
 import ColumnCustomizationModal from "./ColumnCustomizationModal";
 import { getAttributeColumns, getAttributeKeysFromColumnPreference, normalizeAttributeKeys, } from "./AttributeColumns";
@@ -45,6 +48,8 @@ import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
 import MultiSearch from "../../../Types/BaseDatabase/MultiSearch";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+import { getDropTargetValue, moveListItem } from "../../../Utils/ListOrder";
+import Alert, { AlertType } from "../Alerts/Alert";
 import SubscriptionPlan from "../../../Types/Billing/SubscriptionPlan";
 import { Yellow } from "../../../Types/BrandColors";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
@@ -56,11 +61,20 @@ import Permission, { PermissionHelper, } from "../../../Types/Permission";
 import React, { useEffect, useMemo, useState, } from "react";
 import TableViewElement from "./TableView";
 import UserPreferences, { UserPreferenceType, } from "../../../Utils/UserPreferences";
+/*
+ * How many rows a drag-ordered table shows at once unless told otherwise.
+ * Rows can only be dragged within the page on screen, so it should hold the
+ * whole list - these are settings lists of a handful of rows to a few dozen.
+ */
+export const MANUALLY_ORDERED_ITEMS_ON_PAGE = 50;
+export const REORDER_OFF_WHILE_FILTERED = "Drag to reorder is off while a filter or search is on.";
+export const REORDER_SAVING = "Saving the new order...";
+export const REORDER_SAVED = "The new order is saved.";
+export const REORDER_FAILED = "The new order could not be saved.";
 export var ShowAs;
 (function (ShowAs) {
     ShowAs[ShowAs["Table"] = 0] = "Table";
     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
@@ -95,9 +109,72 @@ export var ModalType;
 const getDeleteLabel = (singularName, modelSingularName) => {
     return (singularName === null || singularName === void 0 ? void 0 : singularName.trim()) || (modelSingularName === null || modelSingularName === void 0 ? void 0 : modelSingularName.trim()) || "Item";
 };
+/*
+ * The create button for each verb a table uses, as a whole phrase a locale
+ * can reorder ("{{itemName}} erstellen"). A verb not listed here goes through
+ * the verb-and-noun template, which only reorders.
+ */
+const CREATE_BUTTON_TEMPLATES = {
+    Add: translationKey("Add {{itemName}}"),
+    Create: translationKey("Create {{itemName}}"),
+    Declare: translationKey("Declare {{itemName}}"),
+    Invite: translationKey("Invite {{itemName}}"),
+    Link: translationKey("Link {{itemName}}"),
+};
+/*
+ * "<verb> <noun>" on a create button - the table header's, and the create
+ * dialog's submit button. Translating the two words separately reads the
+ * verb out of context - "Link" comes back as the noun in many languages, and
+ * word order differs - so the whole phrase is looked up first ("Link Alert"),
+ * then the verb's template with the locale's word for the noun in it. In
+ * English all of them read the same.
+ */
+export const translateCreateAction = (translator, data) => {
+    const verb = data.verb || "Create";
+    const noun = data.itemName.trim();
+    // A table that keeps its button down to the verb ("Invite").
+    if (!noun) {
+        return translator.translateText(verb) || verb;
+    }
+    return translateNamedAction(translator, {
+        template: CREATE_BUTTON_TEMPLATES[verb] || "{{action}} {{itemName}}",
+        itemName: noun,
+        values: { action: translatableTerm(verb) },
+    });
+};
+export const BULK_DELETE_TITLE = {
+    one: "Delete {{count}} {{itemName}}",
+    other: "Delete {{count}} {{itemsName}}",
+};
+export const BULK_DELETE_QUESTION = {
+    one: "Are you sure you want to delete {{count}} {{itemName}}? This action cannot be undone.",
+    other: "Are you sure you want to delete {{count}} {{itemsName}}? This action cannot be undone.",
+};
+// A table that names its own verb ("Unlink") for the bulk action.
+export const BULK_ACTION_TITLE = {
+    one: "{{action}} {{count}} {{itemName}}",
+    other: "{{action}} {{count}} {{itemsName}}",
+};
+export const BULK_ACTION_QUESTION = {
+    one: "Are you sure you want to {{action}} {{count}} {{itemName}}?",
+    other: "Are you sure you want to {{action}} {{count}} {{itemsName}}?",
+};
+export const SEARCH_MATCH_COUNT = {
+    one: "{{count}} match",
+    other: "{{count}} matches",
+};
+export const SEARCH_RESULT_COUNT = {
+    one: "{{count}} result",
+    other: "{{count}} results",
+};
+export const SEARCH_RESULT_COUNT_ON_PAGE = {
+    one: "{{count}} result on this page",
+    other: "{{count}} results on this page",
+};
 const BaseModelTable = (props) => {
     var _a, _b, _c;
     const { translateValue, translateString } = useTranslateValue();
+    const translator = useTranslator();
     const tx = (value) => {
         var _a;
         return (_a = translateString(value)) !== null && _a !== void 0 ? _a : value;
@@ -120,24 +197,12 @@ const BaseModelTable = (props) => {
     const getItemLabel = (item) => {
         return getRecordDisplayName(item, { model: model });
     };
-    /*
-     * The header's create button, "<verb> <noun>". Translating the two words
-     * separately reads the verb out of context - "Link" comes back as the noun
-     * in many languages, and word order differs - so the whole phrase is looked
-     * up first ("Link Alert") and the word-by-word join is only the fallback
-     * for a phrase with no entry of its own. In English both are the same.
-     */
+    // The header's create button, "<verb> <noun>".
     const getCreateButtonTitle = () => {
-        const verb = props.createVerb || "Create";
-        const noun = props.singularName || model.singularName || "";
-        if (noun) {
-            const phrase = `${verb} ${noun}`;
-            const translatedPhrase = tx(phrase);
-            if (translatedPhrase && translatedPhrase !== phrase) {
-                return translatedPhrase;
-            }
-        }
-        return `${tx(verb)} ${tx(noun)}`;
+        return translateCreateAction(translator, {
+            verb: props.createVerb,
+            itemName: props.singularName || model.singularName || "",
+        });
     };
     const getActionGate = (action) => {
         var _a, _b;
@@ -206,9 +271,7 @@ const BaseModelTable = (props) => {
     const customFieldColumns = useCustomFieldColumns({
         customFieldsModelType: props.customFieldsModelType,
     });
-    const isColumnCustomizationEnabled = Boolean(!props.disableColumnCustomization &&
-        props.userPreferencesKey &&
-        showAs !== ShowAs.OrderedStatesList);
+    const isColumnCustomizationEnabled = Boolean(!props.disableColumnCustomization && props.userPreferencesKey);
     const readStoredColumnPreference = () => {
         if (!props.userPreferencesKey) {
             return null;
@@ -332,6 +395,26 @@ const BaseModelTable = (props) => {
             props.onShowFormType(modalType);
         }
     }, [props.modelType]);
+    /*
+     * A list people put in order by dragging its rows (enableDragAndDrop with
+     * the column that holds the order). Such a list is always shown in that
+     * order - sorting it by another column would make "drag it above that
+     * one" meaningless - and its order is never typed in: the server puts a
+     * new row at the end and keeps the numbers (@ListOrderColumn).
+     */
+    const isManuallyOrdered = Boolean(props.enableDragAndDrop && props.dragDropIndexField);
+    /*
+     * Which end of the numbers is the top: the model says so when it is a
+     * @ListOrderColumn list (site assignment rules count down), else the
+     * table's own sort order.
+     */
+    const getManualSortOrder = () => {
+        const listOrder = model instanceof BaseModel ? model.getListOrder() : null;
+        if (listOrder && listOrder.column === props.dragDropIndexField) {
+            return listOrder.sortOrder;
+        }
+        return props.sortOrder || SortOrder.Ascending;
+    };
     const getItemsOnPage = () => {
         if (props.userPreferencesKey) {
             const itemsOnPage = UserPreferences.getUserPreferenceByTypeAsNumber({
@@ -342,7 +425,8 @@ const BaseModelTable = (props) => {
                 return itemsOnPage;
             }
         }
-        return props.initialItemsOnPage || 10;
+        return (props.initialItemsOnPage ||
+            (isManuallyOrdered ? MANUALLY_ORDERED_ITEMS_ON_PAGE : 10));
     };
     /*
      * ---------------------------------------------------------------------
@@ -386,7 +470,6 @@ const BaseModelTable = (props) => {
     useEffect(() => {
         return TableFilterUrlState.claimKey(urlStateKey);
     }, [urlStateKey]);
-    const [orderedStatesListNewItemOrder, setOrderedStatesListNewItemOrder] = useState(null);
     const [onBeforeFetchData, setOnBeforeFetchData] = useState(undefined);
     const [data, setData] = useState([]);
     const [query, setQuery] = useState(() => {
@@ -407,6 +490,12 @@ const BaseModelTable = (props) => {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState("");
     const [tableFilterError, setTableFilterError] = useState("");
+    // A dropped row's new place is being saved.
+    const [isReordering, setIsReordering] = useState(false);
+    // Why the last drop could not be saved - the rows went back.
+    const [reorderError, setReorderError] = useState("");
+    // For screen readers: the last drop was saved.
+    const [isReorderSaved, setIsReorderSaved] = useState(false);
     const labelFilterConfig = useMemo(() => {
         const filter = props.filters.find((f) => {
             return (f.filterEntityType &&
@@ -1264,9 +1353,30 @@ const BaseModelTable = (props) => {
         var _a;
         (_a = props.onQueryChange) === null || _a === void 0 ? void 0 : _a.call(props, buildEffectiveQuery());
     }, [effectiveQueryKey]);
-    const fetchItems = async () => {
+    const getFetchSort = () => {
+        if (isManuallyOrdered) {
+            /*
+             * Always in the list's own order, ties broken the way the server
+             * breaks them (Common/Utils/ListOrder), so the row a drop lands on is
+             * the row the server moves it next to.
+             */
+            return {
+                [props.dragDropIndexField]: getManualSortOrder(),
+                createdAt: SortOrder.Ascending,
+            };
+        }
+        return (sortBy
+            ? {
+                [sortBy]: sortOrder,
+            }
+            : {});
+    };
+    const fetchItems = async (options) => {
+        const isQuiet = Boolean(options === null || options === void 0 ? void 0 : options.quiet);
         setError("");
-        setIsLoading(true);
+        if (!isQuiet) {
+            setIsLoading(true);
+        }
         if (props.onFetchInit) {
             props.onFetchInit(currentPageNumber, itemsOnPage);
         }
@@ -1282,11 +1392,7 @@ const BaseModelTable = (props) => {
                 limit: itemsOnPage,
                 skip: (currentPageNumber - 1) * itemsOnPage,
                 select: Object.assign(Object.assign({}, getSelect()), getRelationSelect()),
-                sort: sortBy
-                    ? {
-                        [sortBy]: sortOrder,
-                    }
-                    : {},
+                sort: getFetchSort(),
                 requestOptions: props.fetchRequestOptions,
             });
             setTotalItemsCount(listResult.count);
@@ -1304,7 +1410,9 @@ const BaseModelTable = (props) => {
         catch (err) {
             setError(API.getFriendlyMessage(err));
         }
-        setIsLoading(false);
+        if (!isQuiet) {
+            setIsLoading(false);
+        }
     };
     useEffect(() => {
         if (showFilterModal) {
@@ -1523,14 +1631,11 @@ const BaseModelTable = (props) => {
         const createGate = getActionGate(ModelAction.Create);
         const showFilterButton = props.filters.length > 0;
         /*
-         * because ordered list add button is inside the table and not on the card
-         * header. Without create permission the button is shown locked rather than
+         * Without create permission the button is shown locked rather than
          * removed, so the user can see the action exists and read why it is not
          * available to them.
          */
-        if (props.isCreateable &&
-            createGate.show &&
-            showAs !== ShowAs.OrderedStatesList) {
+        if (props.isCreateable && createGate.show) {
             headerbuttons.push({
                 title: getCreateButtonTitle(),
                 buttonStyle: ButtonStyleType.NORMAL,
@@ -1613,6 +1718,10 @@ const BaseModelTable = (props) => {
         if (!columnName) {
             return true;
         }
+        // A drag-ordered list is always shown in its own order.
+        if (isManuallyOrdered) {
+            return true;
+        }
         return model.isEntityColumn(columnName);
     };
     const getColumnKey = (column) => {
@@ -1773,6 +1882,13 @@ const BaseModelTable = (props) => {
         if (props.showViewIdButton) {
             actionsSchema.push({
                 title: tx("Show ID"),
+                /*
+                 * An ID card: the icon "Show ID" wears in every menu, the status
+                 * page's resource lists too. Not the info circle it once had there -
+                 * beside "View Status Message" and "View Error", whose circle holds
+                 * a "!", the two could not be told apart.
+                 */
+                icon: IconProp.Identification,
                 buttonStyleType: ButtonStyleType.OUTLINE,
                 hideOnMobile: true,
                 // A utility every row carries - it belongs in the ⋯ menu, not on the row.
@@ -1801,7 +1917,15 @@ const BaseModelTable = (props) => {
                 actionsSchema.push({
                     title: props.viewButtonText
                         ? tx(props.viewButtonText)
-                        : `${tx("View")} ${tx(props.singularName || model.singularName || "")}`,
+                        : translateNamedAction(translator, {
+                            template: "View {{itemName}}",
+                            itemName: props.singularName || model.singularName || "",
+                        }),
+                    /*
+                     * Drawn when View is in the ⋯ menu - on a table that marks one of
+                     * its own actions Primary. On the row it is a label (RowActions).
+                     */
+                    icon: IconProp.Eye,
                     buttonStyleType: ButtonStyleType.NORMAL,
                     /*
                      * Opening the record is what a row is for, so View is the row's one
@@ -1849,6 +1973,7 @@ const BaseModelTable = (props) => {
             if (props.isEditable && updateGate.show) {
                 actionsSchema.push({
                     title: tx(props.editButtonText || "Edit"),
+                    icon: IconProp.Edit,
                     buttonStyleType: ButtonStyleType.OUTLINE,
                     disabled: updateGate.disabled,
                     tooltip: updateGate.tooltip,
@@ -1880,6 +2005,7 @@ const BaseModelTable = (props) => {
                     buttonStyleType: ButtonStyleType.DANGER_OUTLINE,
                     disabled: deleteGate.disabled,
                     tooltip: deleteGate.tooltip,
+                    getDisabledReason: props.getDeleteDisabledReason,
                     onClick: async (item, onCompleteAction, onError) => {
                         try {
                             if (props.onBeforeDelete) {
@@ -1954,10 +2080,11 @@ const BaseModelTable = (props) => {
          * would say the opposite of the warning it usually appends.
          */
         const deleteVerb = ((_b = (_a = props.bulkActions) === null || _a === void 0 ? void 0 : _a.deleteVerb) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
-        const getTypeLabel = (items) => {
-            return items.length === 1
-                ? props.singularName || model.singularName || "item"
-                : props.pluralName || model.pluralName || "items";
+        const getNounValues = (inSentence) => {
+            return {
+                itemName: translatableTerm(props.singularName || model.singularName || "item", { inSentence: inSentence }),
+                itemsName: translatableTerm(props.pluralName || model.pluralName || "items", { inSentence: inSentence }),
+            };
         };
         return {
             title: deleteVerb || "Delete",
@@ -1965,17 +2092,19 @@ const BaseModelTable = (props) => {
             icon: (deleteVerb && ((_c = props.bulkActions) === null || _c === void 0 ? void 0 : _c.deleteIcon)) || IconProp.Trash,
             confirmMessage: (items) => {
                 var _a;
-                const itemLabel = getTypeLabel(items);
                 const warning = ((_a = props.bulkActions) === null || _a === void 0 ? void 0 : _a.deleteConfirmationWarning)
-                    ? ` ${props.bulkActions.deleteConfirmationWarning}`
+                    ? ` ${tx(props.bulkActions.deleteConfirmationWarning)}`
                     : "";
                 if (deleteVerb) {
-                    return `Are you sure you want to ${deleteVerb.toLowerCase()} ${items.length} ${itemLabel.toLowerCase()}?${warning}`;
+                    return `${translator.translatePlural(BULK_ACTION_QUESTION, items.length, Object.assign({ action: translatableTerm(deleteVerb, { inSentence: true }) }, getNounValues(true)))}${warning}`;
                 }
-                return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.${warning}`;
+                return `${translator.translatePlural(BULK_DELETE_QUESTION, items.length, getNounValues(false))}${warning}`;
             },
             confirmTitle: (items) => {
-                return `${deleteVerb || "Delete"} ${items.length} ${getTypeLabel(items)}`;
+                if (deleteVerb) {
+                    return translator.translatePlural(BULK_ACTION_TITLE, items.length, Object.assign({ action: translatableTerm(deleteVerb) }, getNounValues(false)));
+                }
+                return translator.translatePlural(BULK_DELETE_TITLE, items.length, getNounValues(false));
             },
             /*
              * "Are you sure you want to delete 12 monitors?" says how many, not
@@ -1998,7 +2127,18 @@ const BaseModelTable = (props) => {
                     const item = items[i];
                     // remove items from inProgressItems
                     inProgressItems.splice(inProgressItems.indexOf(item), 1);
+                    /*
+                     * A row the table says can never be deleted is not sent to the
+                     * server at all: it is listed with the reason, like a row the
+                     * server refused.
+                     */
+                    const deleteDisabledReason = props.getDeleteDisabledReason
+                        ? props.getDeleteDisabledReason(item)
+                        : undefined;
                     try {
+                        if (deleteDisabledReason) {
+                            throw new BadDataException(deleteDisabledReason);
+                        }
                         await props.callbacks.deleteItem(item);
                         successItems.push(item);
                     }
@@ -2042,67 +2182,32 @@ const BaseModelTable = (props) => {
     /*
      * Lifted out of the onFilterChanged callback below, which is where this test
      * used to live inline. Two definitions of "a filter is applied" in one
-     * component is exactly the kind of thing that drifts apart.
+     * component is exactly the kind of thing that drifts apart - so it is the
+     * plain Table's own test (hasFilterValues). It used to be truthiness, which
+     * missed a yes/no filter set to "No" (false): the list was filtered, but
+     * the table called itself unfiltered, offered "No X yet" and a Create
+     * button under it, and let rows be dragged while some were hidden.
      */
     const hasFilterApplied = (dataToCheck) => {
-        for (const key in dataToCheck) {
-            if (dataToCheck[key]) {
-                return true;
-            }
-        }
-        return false;
-    };
-    /*
-     * An empty table has two quite different causes and used to have one
-     * sentence for both. A monitors table with nothing in it said "No monitor"
-     * - ungrammatical, and worse, it said the same thing after a search that
-     * matched nothing, so a typo in the search box looked exactly like an empty
-     * project. A caller's own noItemsMessage is deliberately overridden while a
-     * search or filter is active: those are usually "create your first X"
-     * panels, and offering one to someone whose search just missed is wrong.
-     */
-    const getNoItemsMessage = () => {
-        const pluralLabel = props.pluralName || model.pluralName || "items";
-        if (isSearchActive() || hasFilterApplied(filterData)) {
-            return getEmptyTableMessage({
-                pluralLabel: pluralLabel,
-                isFiltered: true,
-                translate: tx,
-            });
-        }
-        return (props.noItemsMessage ||
-            getEmptyTableMessage({
-                pluralLabel: pluralLabel,
-                isFiltered: false,
-                translate: tx,
-            }));
+        return hasFilterValues(dataToCheck);
     };
     /*
      * The way forward from an empty table: the "Create X" button the card's
      * header already shows - same handler, same permission gate, same label -
-     * repeated under "No X yet.", where a new user is looking. It is drawn the
-     * way the header's is, as a NORMAL button: a filled indigo one in the
-     * middle of an otherwise quiet empty card shouted, and made the two
-     * buttons that do the same thing look like different actions.
+     * repeated in the empty state, where a new user is looking. It is drawn
+     * the way the header's is, as a plain button: a filled indigo one in the
+     * middle of an otherwise quiet card shouted, and made two buttons that do
+     * the same thing look like different actions.
      *
-     * Only under the table's own "No X yet.". A page that words its empty
-     * state itself is describing a slice of the list ("Nice work! No Active
-     * Incidents so far.", "No monitors are reporting a problem."), where a big
-     * "Create" button answers a question nobody asked. And never when a
-     * search or filter emptied the table: creating one is the wrong answer to
-     * a search that missed.
+     * A header button counts as "create" when it carries the Add icon and is
+     * drawn NORMAL or PRIMARY - an OUTLINE Add is an import or a template
+     * picker, not the way to make the first one.
      */
-    const getNoItemsAction = () => {
+    const getMirroredCreateButton = () => {
         if (!props.cardProps) {
             return undefined;
         }
-        if (isSearchActive() || hasFilterApplied(filterData)) {
-            return undefined;
-        }
-        if (props.noItemsMessage) {
-            return undefined;
-        }
-        const createButton = cardButtons.find((button) => {
+        return cardButtons.find((button) => {
             if (React.isValidElement(button)) {
                 return false;
             }
@@ -2111,19 +2216,167 @@ const BaseModelTable = (props) => {
                 (schema.buttonStyle === ButtonStyleType.NORMAL ||
                     schema.buttonStyle === ButtonStyleType.PRIMARY));
         });
-        if (!createButton) {
-            return undefined;
-        }
-        return (React.createElement(Button, { title: createButton.title, icon: createButton.icon, buttonStyle: ButtonStyleType.NORMAL, disabled: createButton.disabled, tooltip: createButton.tooltip, dataTestId: "empty-table-create-button", onClick: () => {
-                var _a;
-                if (createButton.disabled) {
-                    return;
+    };
+    /*
+     * What the table shows when a load comes back with no rows. An empty table
+     * has quite different causes and used to have one grey sentence for all of
+     * them: a typo in the search box looked exactly like an empty project, and
+     * neither said what the list was for. buildModelTableEmptyState decides
+     * between "nothing here yet", "nothing matches" and "all clear", and what
+     * each offers.
+     */
+    const getEmptyState = () => {
+        var _a;
+        const isSearchOn = isSearchActive();
+        const isFilterOn = hasFilterApplied(filterData);
+        const createCheck = PermissionGate.check(model, ModelAction.Create);
+        return buildModelTableEmptyState({
+            pluralLabel: props.pluralName || model.pluralName || "items",
+            options: props.emptyState,
+            noItemsMessage: typeof props.noItemsMessage === "string"
+                ? props.noItemsMessage
+                : undefined,
+            hasCustomElement: React.isValidElement(props.noItemsMessage),
+            cardDescription: (_a = props.cardProps) === null || _a === void 0 ? void 0 : _a.description,
+            modelIcon: model.icon,
+            isSearchActive: isSearchOn,
+            isFilterActive: isFilterOn,
+            onClearSearchAndFilters: () => {
+                clearSearchAndFilters({ isFilterOn: isFilterOn });
+            },
+            createButton: getMirroredCreateButton(),
+            isCreateDeniedByPermission: !createCheck.isAllowed && Boolean(createCheck.disabledReason),
+            help: props.helpContent
+                ? {
+                    title: props.helpContent.title,
+                    onClick: () => {
+                        setShowHelpModal(true);
+                    },
                 }
-                (_a = createButton.onClick) === null || _a === void 0 ? void 0 : _a.call(createButton);
-            } }));
+                : undefined,
+            onDocumentationClick: props.documentationLink
+                ? () => {
+                    Navigation.navigate(props.documentationLink, {
+                        openInNewTab: true,
+                    });
+                }
+                : undefined,
+            translate: tx,
+            translator: translator,
+        });
+    };
+    /*
+     * The empty state's way out of a search or filter that hides every row:
+     * the search box and its label chips are emptied at once (not after the
+     * search debounce), and the filters go the way the filter form clears them.
+     */
+    const clearSearchAndFilters = (data) => {
+        var _a;
+        setSearchText("");
+        setDebouncedSearchText("");
+        setSelectedLabels([]);
+        setIsSearchExpanded(false);
+        if (data.isFilterOn) {
+            onFilterChanged({});
+            setTableView(null);
+            (_a = props.onFilterApplied) === null || _a === void 0 ? void 0 : _a.call(props, false);
+        }
+    };
+    const emptyState = getEmptyState();
+    /*
+     * Drag-and-drop reordering, for both the table and the list layout.
+     *
+     * A drop moves the row on screen at once and saves it in the background:
+     * the row is given the number of the row it was dropped on, and the server
+     * gives it that place and moves the rows in the way one place along
+     * (@ListOrderColumn). The list is then refreshed quietly to pick up their
+     * new numbers. If the save fails, the rows go back where they were and say
+     * why.
+     *
+     * While a filter or search narrows the list, dragging is off - the rows in
+     * between are not on screen, so "drop it above this one" would mean
+     * something the person cannot see. The grips stay, greyed out, and a line
+     * above the list says why.
+     */
+    const isReorderBlockedByFilter = isManuallyOrdered && (isSearchActive() || hasFilterApplied(filterData));
+    const isDragDisabled = isReorderBlockedByFilter || isReordering;
+    const dragDisabledReason = isReorderBlockedByFilter
+        ? REORDER_OFF_WHILE_FILTERED
+        : isReordering
+            ? REORDER_SAVING
+            : undefined;
+    const onRowDropped = async (id, destinationIndex, sourceIndex) => {
+        const orderField = props.dragDropIndexField;
+        if (!orderField || isDragDisabled || destinationIndex === sourceIndex) {
+            return;
+        }
+        const rowsBeforeDrop = data;
+        let value = getDropTargetValue({
+            items: rowsBeforeDrop,
+            sourceIndex: sourceIndex,
+            destinationIndex: destinationIndex,
+            getValue: (item) => {
+                return item[orderField];
+            },
+        });
+        if (value === null) {
+            /*
+             * The row it landed on has no number yet - a list saved before the
+             * server kept them. Its place on screen is the best there is.
+             */
+            const position = (currentPageNumber - 1) * itemsOnPage + destinationIndex + 1;
+            value =
+                getManualSortOrder() === SortOrder.Descending
+                    ? Math.max(totalItemsCount - position + 1, 1)
+                    : position;
+        }
+        setReorderError("");
+        setIsReorderSaved(false);
+        setData(moveListItem(rowsBeforeDrop, sourceIndex, destinationIndex));
+        setIsReordering(true);
+        try {
+            await props.callbacks.updateById({
+                id: new ObjectID(id),
+                data: {
+                    [orderField]: value,
+                },
+            });
+        }
+        catch (err) {
+            setData(rowsBeforeDrop);
+            setReorderError(API.getFriendlyMessage(err));
+            setIsReordering(false);
+            return;
+        }
+        setIsReordering(false);
+        setIsReorderSaved(true);
+        await fetchItems({ quiet: true });
+    };
+    const getReorderMessages = () => {
+        if (!isManuallyOrdered) {
+            return null;
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "sr-only", role: "status", "aria-live": "polite" }, isReordering
+                ? tx(REORDER_SAVING)
+                : isReorderSaved
+                    ? tx(REORDER_SAVED)
+                    : ""),
+            reorderError ? (React.createElement(Alert, { type: AlertType.DANGER, strongTitle: REORDER_FAILED, title: reorderError, onClose: () => {
+                    setReorderError("");
+                }, className: "mb-4", dataTestId: "reorder-error" })) : null,
+            isReorderBlockedByFilter && data.length > 1 ? (React.createElement("div", { className: "mb-3 flex items-center gap-1.5 text-xs text-gray-500", "data-testid": "reorder-off-while-filtered" },
+                React.createElement(Icon, { icon: IconProp.GripVertical, className: "h-4 w-4" }),
+                React.createElement("span", null, tx(REORDER_OFF_WHILE_FILTERED)))) : null));
+    };
+    // A reorderable list with its messages - saving, failed, paused - above it.
+    const withReorderMessages = (element) => {
+        return (React.createElement(React.Fragment, null,
+            getReorderMessages(),
+            element));
     };
     const getTable = () => {
-        return (React.createElement(Table, { onFilterChanged: (filterData) => {
+        return withReorderMessages(React.createElement(Table, { onFilterChanged: (filterData) => {
                 onFilterChanged(filterData);
                 setTableView(null);
                 // check if there's anything in the filter data and update the isFilterApplied prop.
@@ -2269,57 +2522,21 @@ const BaseModelTable = (props) => {
                 setSortBy(sortBy);
                 setSortOrder(sortOrder);
                 setTableView(null);
-            }, singularLabel: props.singularName || model.singularName || "Item", pluralLabel: props.pluralName || model.pluralName || "Items", error: error, currentPageNumber: currentPageNumber, isLoading: getTableLoadingState(), enableDragAndDrop: props.enableDragAndDrop, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, totalItemsCount: totalItemsCount, hasMore: hasMore, data: data, id: props.id, columns: tableColumns, itemsOnPage: itemsOnPage, onDragDrop: async (id, newOrder) => {
-                if (!props.dragDropIndexField) {
-                    return;
-                }
-                setIsLoading(true);
-                await props.callbacks.updateById({
-                    id: new ObjectID(id),
-                    data: {
-                        [props.dragDropIndexField]: newOrder,
-                    },
-                });
-                await fetchItems();
-            }, disablePagination: props.disablePagination || false, onNavigateToPage: async (pageNumber, newItemsOnPage) => {
+            }, singularLabel: props.singularName || model.singularName || "Item", pluralLabel: props.pluralName || model.pluralName || "Items", error: error, currentPageNumber: currentPageNumber, isLoading: getTableLoadingState(), enableDragAndDrop: props.enableDragAndDrop, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, isDragDisabled: isDragDisabled, dragDisabledReason: dragDisabledReason, totalItemsCount: totalItemsCount, hasMore: hasMore, data: data, id: props.id, columns: tableColumns, itemsOnPage: itemsOnPage, onDragDrop: onRowDropped, disablePagination: props.disablePagination || false, onNavigateToPage: async (pageNumber, newItemsOnPage) => {
                 setCurrentPageNumber(pageNumber);
                 if (newItemsOnPage !== itemsOnPage) {
                     setTableView(null);
                     isItemsOnPageExplicitRef.current = true;
                 }
                 setItemsOnPage(newItemsOnPage);
-            }, noItemsMessage: getNoItemsMessage(), noItemsAction: getNoItemsAction(), onRefreshClick: async () => {
+            }, noItemsMessage: React.isValidElement(props.noItemsMessage)
+                ? props.noItemsMessage
+                : undefined, emptyStateProps: emptyState.emptyStateProps, onRefreshClick: async () => {
                 await fetchItems();
             }, actionButtons: actionButtonSchema }));
     };
-    const getOrderedStatesList = () => {
-        var _a, _b, _c;
-        if (!props.orderedStatesListProps) {
-            throw new BadDataException("props.orderedStatesListProps required when showAs === ShowAs.OrderedStatesList");
-        }
-        let getTitleElement = undefined;
-        let getDescriptionElement = undefined;
-        for (const column of props.columns) {
-            const key = Object.keys(column.field)[0];
-            if (key === props.orderedStatesListProps.titleField) {
-                getTitleElement = column.getElement;
-            }
-            if (key === props.orderedStatesListProps.descriptionField) {
-                getDescriptionElement = column.getElement;
-            }
-        }
-        return (React.createElement(OrderedStatesList, { error: error, isLoading: isLoading, data: data, id: props.id, titleField: (_a = props.orderedStatesListProps) === null || _a === void 0 ? void 0 : _a.titleField, descriptionField: (_b = props.orderedStatesListProps) === null || _b === void 0 ? void 0 : _b.descriptionField, orderField: (_c = props.orderedStatesListProps) === null || _c === void 0 ? void 0 : _c.orderField, shouldAddItemInTheBeginning: props.orderedStatesListProps.shouldAddItemInTheBeginning, shouldAddItemInTheEnd: props.orderedStatesListProps.shouldAddItemInTheEnd, noItemsMessage: getNoItemsMessage(), onRefreshClick: async () => {
-                await fetchItems();
-            }, onCreateNewItem: props.isCreateable && getActionGate(ModelAction.Create).show
-                ? (order) => {
-                    setOrderedStatesListNewItemOrder(order);
-                    setModalType(ModalType.Create);
-                    setShowModal(true);
-                }
-                : undefined, createDisabledReason: getActionGate(ModelAction.Create).tooltip, singularLabel: props.singularName || model.singularName || "Item", actionButtons: actionButtonSchema, getTitleElement: getTitleElement, getDescriptionElement: getDescriptionElement }));
-    };
     const getList = () => {
-        return (React.createElement(List, { onFilterChanged: (filterData) => {
+        return withReorderMessages(React.createElement(List, { onFilterChanged: (filterData) => {
                 onFilterChanged(filterData);
             }, onFilterRefreshClick: async () => {
                 await getFilterDropdownItems();
@@ -2327,25 +2544,19 @@ const BaseModelTable = (props) => {
                 setShowFilterModal(false);
             }, onFilterModalOpen: () => {
                 setShowFilterModal(true);
-            }, onAdvancedFiltersToggle: props.onAdvancedFiltersToggle, singularLabel: props.singularName || model.singularName || "Item", pluralLabel: props.pluralName || model.pluralName || "Items", error: error, currentPageNumber: currentPageNumber, listDetailOptions: props.listDetailOptions, enableDragAndDrop: props.enableDragAndDrop, onDragDrop: async (id, newOrder) => {
-                if (!props.dragDropIndexField) {
-                    return;
-                }
-                setIsLoading(true);
-                await props.callbacks.updateById({
-                    id: new ObjectID(id),
-                    data: {
-                        [props.dragDropIndexField]: newOrder,
-                    },
-                });
-                await fetchItems();
+            }, onAdvancedFiltersToggle: props.onAdvancedFiltersToggle, singularLabel: props.singularName || model.singularName || "Item", pluralLabel: props.pluralName || model.pluralName || "Items", error: error, currentPageNumber: currentPageNumber, listDetailOptions: props.listDetailOptions, enableDragAndDrop: props.enableDragAndDrop, onDragDrop: onRowDropped, isDragDisabled: isDragDisabled, dragDisabledReason: dragDisabledReason, itemToString: (item) => {
+                const label = props.singularName || item.singularName || "";
+                const name = getItemLabel(item);
+                return name && label ? `${label}: ${name}` : name || label;
             }, 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);
                 if (newItemsOnPage !== itemsOnPage) {
                     isItemsOnPageExplicitRef.current = true;
                 }
                 setItemsOnPage(newItemsOnPage);
-            }, noItemsMessage: getNoItemsMessage(), onRefreshClick: async () => {
+            }, noItemsMessage: React.isValidElement(props.noItemsMessage)
+                ? props.noItemsMessage
+                : undefined, emptyStateProps: emptyState.emptyStateProps, onRefreshClick: async () => {
                 await fetchItems();
             }, actionButtons: actionButtonSchema }));
     };
@@ -2373,7 +2584,9 @@ const BaseModelTable = (props) => {
             showPlan && (React.createElement("span", { style: {
                     marginLeft: "5px",
                 } },
-                React.createElement(Pill, { text: `${planName} Plan`, color: Yellow })))));
+                React.createElement(Pill, { text: translator.translateTemplate("{{planName}} Plan", {
+                        planName: planName,
+                    }), color: Yellow })))));
     };
     const collapseSearch = () => {
         setSearchText("");
@@ -2425,14 +2638,16 @@ const BaseModelTable = (props) => {
         if (!props.searchableFields || props.searchableFields.length === 0) {
             return React.createElement(React.Fragment, null);
         }
-        const pluralLabel = (props.pluralName ||
-            model.pluralName ||
-            "items").toLowerCase();
+        const pluralTerm = translatableTerm(props.pluralName || model.pluralName || "items", { inSentence: true });
         const hasLabelSupport = Boolean(labelFilterConfig);
         const defaultPlaceholder = hasLabelSupport
-            ? `Search ${pluralLabel}… (try @ for labels)`
-            : `Search ${pluralLabel} by name, description…`;
-        const placeholder = props.searchPlaceholder || defaultPlaceholder;
+            ? translator.translateTemplate("Search {{itemsName}}… (try @ for labels)", {
+                itemsName: pluralTerm,
+            })
+            : translator.translateTemplate("Search {{itemsName}} by name, description…", { itemsName: pluralTerm });
+        const placeholder = props.searchPlaceholder
+            ? tx(props.searchPlaceholder)
+            : defaultPlaceholder;
         /*
          * Effective search = input minus the trailing @<prefix> mention. The pill
          * + result-count UI should reflect this so typing "@bug" doesn't claim
@@ -2494,14 +2709,16 @@ const BaseModelTable = (props) => {
                     React.createElement("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5" },
                         hasLabelSupport &&
                             selectedLabels.map((label) => {
-                                return (React.createElement("span", { key: label.id, className: "inline-flex items-center gap-1 rounded-full bg-gray-50 py-0.5 pl-2 pr-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-all hover:bg-gray-100", title: `Label: ${label.name}` },
+                                return (React.createElement("span", { key: label.id, className: "inline-flex items-center gap-1 rounded-full bg-gray-50 py-0.5 pl-2 pr-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-all hover:bg-gray-100", title: translator.translateTemplate("Label: {{name}}", {
+                                        name: label.name,
+                                    }) },
                                     React.createElement("span", { className: "h-2 w-2 flex-none rounded-full", style: { backgroundColor: label.color }, "aria-hidden": "true" }),
                                     React.createElement("span", { className: "max-w-[8rem] truncate" }, label.name),
                                     React.createElement("button", { type: "button", onMouseDown: (e) => {
                                             e.preventDefault();
                                         }, onClick: () => {
                                             removeLabel(label.id);
-                                        }, title: "Remove label", "aria-label": `Remove ${label.name}`, className: "ml-0.5 flex-none rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700" },
+                                        }, title: tx("Remove label"), "aria-label": translator.translateTemplate("Remove {{name}}", { name: label.name }), className: "ml-0.5 flex-none rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700" },
                                         React.createElement(Icon, { icon: IconProp.Close, className: "h-3 w-3" }))));
                             }),
                         React.createElement("input", { ref: searchInputRef, type: "text", value: searchText, onChange: (e) => {
@@ -2574,41 +2791,43 @@ const BaseModelTable = (props) => {
                                         (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
                                     }
                                 }
-                            }, placeholder: selectedLabels.length === 0 ? placeholder : "Refine search…", spellCheck: false, autoComplete: "off", tabIndex: expanded ? 0 : -1, className: "min-w-[6rem] flex-1 bg-transparent text-sm leading-5 text-gray-900 placeholder-gray-400 outline-none" })),
-                    isSearching && (React.createElement("div", { className: "flex-none text-gray-400", title: "Searching\u2026" },
+                            }, placeholder: selectedLabels.length === 0
+                                ? placeholder
+                                : tx("Refine search…"), spellCheck: false, autoComplete: "off", tabIndex: expanded ? 0 : -1, className: "min-w-[6rem] flex-1 bg-transparent text-sm leading-5 text-gray-900 placeholder-gray-400 outline-none" })),
+                    isSearching && (React.createElement("div", { className: "flex-none text-gray-400", title: tx("Searching…") },
                         React.createElement(Icon, { icon: IconProp.Spinner, className: "h-4 w-4 animate-spin" }))),
-                    showMatchPill && totalItemsCount >= 0 && hasMore === undefined && (React.createElement("span", { className: "flex-none whitespace-nowrap rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700", title: `${totalItemsCount} ${totalItemsCount === 1 ? "result" : "results"}` },
-                        totalItemsCount,
-                        " ",
-                        totalItemsCount === 1 ? "match" : "matches")),
-                    showMatchPill && hasMore !== undefined && data.length > 0 && (React.createElement("span", { className: "flex-none whitespace-nowrap rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700", title: `${data.length}${hasMore ? "+" : ""} ${data.length === 1 ? "result" : "results"} on this page` },
-                        data.length,
-                        hasMore ? "+" : "",
-                        " ",
-                        data.length === 1 ? "match" : "matches")),
+                    showMatchPill && totalItemsCount >= 0 && hasMore === undefined && (React.createElement("span", { className: "flex-none whitespace-nowrap rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700", title: translator.translatePlural(SEARCH_RESULT_COUNT, totalItemsCount) }, translator.translatePlural(SEARCH_MATCH_COUNT, totalItemsCount))),
+                    showMatchPill && hasMore !== undefined && data.length > 0 && (React.createElement("span", { className: "flex-none whitespace-nowrap rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700", title: translator.translatePlural(SEARCH_RESULT_COUNT_ON_PAGE, data.length, {
+                            count: `${translator.formatNumber(data.length)}${hasMore ? "+" : ""}`,
+                        }) }, translator.translatePlural(SEARCH_MATCH_COUNT, data.length, {
+                        count: `${translator.formatNumber(data.length)}${hasMore ? "+" : ""}`,
+                    }))),
                     searchText.length > 0 || selectedLabels.length > 0 ? (React.createElement("button", { type: "button", onMouseDown: (e) => {
                             e.preventDefault();
                         }, onClick: () => {
                             collapseSearch();
-                        }, title: "Clear search (Esc Esc)", "aria-label": "Clear search", className: "flex-none rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600" },
-                        React.createElement(Icon, { icon: IconProp.Close, className: "h-3.5 w-3.5" }))) : (React.createElement("kbd", { className: "max-sm:hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex", title: "Press / to focus search" }, "/"))),
+                        }, title: tx("Clear search (Esc Esc)"), "aria-label": tx("Clear search"), className: "flex-none rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600" },
+                        React.createElement(Icon, { icon: IconProp.Close, className: "h-3.5 w-3.5" }))) : (React.createElement("kbd", { className: "max-sm:hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex", title: tx("Press / to focus search") }, "/"))),
                 showLabelDropdown && (React.createElement("div", { className: "absolute left-0 right-0 top-full z-20 mt-1.5 origin-top overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg ring-1 ring-black/5 transition-all duration-150 animate-in fade-in slide-in-from-top-1", onMouseDown: (e) => {
                         // Prevent input blur on dropdown clicks.
                         e.preventDefault();
                     } },
                     React.createElement("div", { className: "flex items-center justify-between border-b border-gray-100 px-3 py-2" },
-                        React.createElement("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-gray-500" }, isLabelsLoading ? "Loading labels…" : "Filter by label"),
+                        React.createElement("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-gray-500" }, tx(isLabelsLoading ? "Loading labels…" : "Filter by label")),
                         React.createElement("span", { className: "text-[10px] text-gray-400" },
-                            React.createElement("kbd", { className: "font-mono" }, "\u2191"),
-                            React.createElement("kbd", { className: "ml-0.5 font-mono" }, "\u2193"),
-                            React.createElement("span", { className: "ml-1" }, "to navigate"),
+                            React.createElement(TranslatedSentence, { template: "{{arrowKeys}} to navigate", slots: {
+                                    arrowKeys: (React.createElement(React.Fragment, null,
+                                        React.createElement("kbd", { className: "font-mono" }, "\u2191"),
+                                        React.createElement("kbd", { className: "ml-0.5 font-mono" }, "\u2193"))),
+                                } }),
                             React.createElement("span", { className: "mx-1.5" }, "\u00B7"),
-                            React.createElement("kbd", { className: "font-mono" }, "\u21B5"),
-                            React.createElement("span", { className: "ml-1" }, "to select"))),
+                            React.createElement(TranslatedSentence, { template: "{{enterKey}} to select", slots: {
+                                    enterKey: React.createElement("kbd", { className: "font-mono" }, "\u21B5"),
+                                } }))),
                     React.createElement("div", { className: "max-h-64 overflow-y-auto py-1" },
                         !isLabelsLoading && dropdownLabels.length === 0 && (React.createElement("div", { className: "px-3 py-3 text-sm text-gray-500" }, availableLabels.length === 0
-                            ? "No labels available for this resource."
-                            : `No labels matching "${mention.prefix}"`)),
+                            ? tx("No labels available for this resource.")
+                            : translator.translateTemplate('No labels matching "{{prefix}}"', { prefix: mention.prefix }))),
                         dropdownLabels.map((label, idx) => {
                             const isActive = idx === labelDropdownIndex;
                             return (React.createElement("button", { key: label.id, type: "button", onMouseEnter: () => {
@@ -2718,7 +2937,8 @@ const BaseModelTable = (props) => {
                     }
                 }, isDisabled: b.disabled, tooltip: b.tooltip }));
         });
-        return (React.createElement(MoreMenu, { key: "model-table-more-menu", menuIcon: IconProp.EllipsisHorizontal, text: "" }, children));
+        // The same ⋯ every card header has: a feed's, too.
+        return React.createElement(CardMoreMenu, { key: "model-table-more-menu" }, children);
     };
     /*
      * Builds the right-hand side of the card header. All slots — search
@@ -2772,11 +2992,11 @@ const BaseModelTable = (props) => {
                             var _a;
                             (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                         });
-                    }, title: "Search (/)", "aria-label": "Open search", tabIndex: isExpanded ? -1 : 0, className: `absolute inset-0 inline-flex items-center gap-2 rounded-md border bg-white px-3 text-sm shadow-sm transition-all duration-200 ease-out ${isExpanded
+                    }, title: tx("Search (/)"), "aria-label": tx("Open search"), tabIndex: isExpanded ? -1 : 0, className: `absolute inset-0 inline-flex items-center gap-2 rounded-md border bg-white px-3 text-sm shadow-sm transition-all duration-200 ease-out ${isExpanded
                         ? "pointer-events-none border-gray-200 opacity-0"
                         : "border-gray-200 opacity-100 hover:border-gray-300 hover:bg-gray-50"}` },
                     React.createElement(Icon, { icon: IconProp.Search, className: "h-4 w-4 flex-none text-gray-400" }),
-                    React.createElement("span", { className: "flex-1 truncate text-left text-gray-400" }, "Search\u2026"),
+                    React.createElement("span", { className: "flex-1 truncate text-left text-gray-400" }, tx("Search…")),
                     React.createElement("kbd", { className: "max-sm:hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex" }, "/")),
                 React.createElement("div", { className: `transition-opacity duration-200 ease-out ${isExpanded
                         ? "opacity-100 delay-150"
@@ -2907,13 +3127,30 @@ const BaseModelTable = (props) => {
             } }));
     };
     const getCardComponent = () => {
+        var _a;
         const headerButtons = getHeaderButtonsWithSearch();
+        /*
+         * While the empty state is on screen and says what the list is for in
+         * the card's own words, the card leaves its description out of the
+         * header - the same sentence twice, a few lines apart, read as a bug.
+         */
+        const isEmptyStateShown = !getTableLoadingState() &&
+            !error &&
+            data.length === 0 &&
+            tableColumns.length > 0;
+        const cardDescription = isEmptyStateShown && emptyState.usesCardDescription
+            ? undefined
+            : (_a = props.cardProps) === null || _a === void 0 ? void 0 : _a.description;
         if (showAs === ShowAs.Table || showAs === ShowAs.List) {
             return (React.createElement("div", null,
-                props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { buttons: headerButtons, bodyClassName: showAs === ShowAs.List
+                props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { description: cardDescription, buttons: headerButtons, bodyClassName: showAs === ShowAs.List
                         ? "-ml-6 -mr-6 bg-gray-50 border-top"
                         : "", title: getCardHeaderTitle(getCardTitle(props.cardProps.title || "")) }),
-                    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: ${PermissionGate.getPermissionTitles(model.getReadPermissions()).join(", ")}` })) : (React.createElement(React.Fragment, null)),
+                    tableColumns.length === 0 && allColumns.length > 0 ? (React.createElement("div", { "data-testid": `${props.id}-no-access` },
+                        React.createElement(TableEmptyState, Object.assign({}, buildNoAccessState({
+                            permissionTitles: PermissionGate.getPermissionTitles(model.getReadPermissions()),
+                            translate: tx,
+                        }))))) : (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)))),
@@ -2925,9 +3162,7 @@ const BaseModelTable = (props) => {
                 !props.cardProps && showAs === ShowAs.Table ? getTable() : React.createElement(React.Fragment, null),
                 !props.cardProps && showAs === ShowAs.List ? getList() : React.createElement(React.Fragment, null)));
         }
-        return (React.createElement("div", null,
-            props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { buttons: headerButtons, title: getCardTitle(props.cardProps.title || "") }), getOrderedStatesList())),
-            !props.cardProps && getOrderedStatesList()));
+        return React.createElement(React.Fragment, null);
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "" }, getCardComponent()),
@@ -2937,12 +3172,6 @@ const BaseModelTable = (props) => {
             },
             modalType: modalType,
             onBeforeCreate: async (item, miscDataProps, formValues) => {
-                var _a;
-                if (showAs === ShowAs.OrderedStatesList &&
-                    ((_a = props.orderedStatesListProps) === null || _a === void 0 ? void 0 : _a.orderField) &&
-                    orderedStatesListNewItemOrder) {
-                    item.setColumnValue(props.orderedStatesListProps.orderField, orderedStatesListNewItemOrder);
-                }
                 if (props.onBeforeCreate) {
                     item = await props.onBeforeCreate(item, miscDataProps, formValues);
                 }
@@ -2975,7 +3204,10 @@ const BaseModelTable = (props) => {
                 : undefined,
         })) : (React.createElement(React.Fragment, null)),
         showDeleteConfirmModal && (React.createElement(ConfirmModal, { title: (deleteConfirmation === null || deleteConfirmation === void 0 ? void 0 : deleteConfirmation.title) ||
-                `Delete ${getDeleteLabel(props.singularName, model.singularName)}`, description: (deleteConfirmation === null || deleteConfirmation === void 0 ? void 0 : deleteConfirmation.description) || (React.createElement(DeleteConfirmationMessage, { kind: "question", name: getItemLabel(currentDeleteableItem), typeLabel: getDeleteLabel(props.singularName, model.singularName) })), onClose: () => {
+                translateNamedAction(translator, {
+                    template: "Delete {{itemName}}",
+                    itemName: getDeleteLabel(props.singularName, model.singularName),
+                }), description: (deleteConfirmation === null || deleteConfirmation === void 0 ? void 0 : deleteConfirmation.description) || (React.createElement(DeleteConfirmationMessage, { kind: "question", name: getItemLabel(currentDeleteableItem), typeLabel: getDeleteLabel(props.singularName, model.singularName) })), onClose: () => {
                 setShowDeleteConfirmModal(false);
             }, submitButtonText: (deleteConfirmation === null || deleteConfirmation === void 0 ? void 0 : deleteConfirmation.submitButtonText) || "Delete", onSubmit: async () => {
                 if (currentDeleteableItem && currentDeleteableItem["_id"]) {
@@ -2986,20 +3218,19 @@ const BaseModelTable = (props) => {
         errorModalText && (React.createElement(ConfirmModal, { title: `Error`, description: `${errorModalText}`, submitButtonText: "Close", onSubmit: () => {
                 setErrorModalText("");
             }, submitButtonType: ButtonStyleType.NORMAL })),
-        showViewIdModal && (React.createElement(ConfirmModal, { title: `${props.singularName || model.singularName || ""} ID`, description: React.createElement("div", null,
-                React.createElement("span", null,
-                    "ID of this ",
-                    props.singularName || model.singularName || "",
-                    ":"),
+        showViewIdModal && (React.createElement(ConfirmModal, { title: translator.translateTemplate("{{itemName}} ID", {
+                itemName: translatableTerm(props.singularName || model.singularName || ""),
+            }), description: React.createElement("div", null,
+                React.createElement("span", null, translator.translateTemplate("ID of this {{itemName}}:", {
+                    itemName: translatableTerm(props.singularName || model.singularName || ""),
+                })),
                 React.createElement("div", { className: "mt-2 flex items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2" },
                     React.createElement("code", { className: "flex-1 break-all font-mono text-xs text-gray-800" }, viewId),
-                    React.createElement(CopyTextButton, { textToBeCopied: viewId || "", size: "sm", title: "Copy ID to clipboard" })),
+                    React.createElement(CopyTextButton, { textToBeCopied: viewId || "", size: "sm", title: tx("Copy ID to clipboard") })),
                 React.createElement("br", null),
-                React.createElement("span", null,
-                    "You can use this ID to interact with",
-                    " ",
-                    props.singularName || model.singularName || "",
-                    " via the OneUptime API. Click the button below to go to API Reference.")), onClose: () => {
+                React.createElement("span", null, translator.translateTemplate("You can use this ID to interact with {{itemName}} via the OneUptime API. Click the button below to go to API Reference.", {
+                    itemName: translatableTerm(props.singularName || model.singularName || ""),
+                }))), onClose: () => {
                 setShowViewIdModal(false);
             }, closeButtonText: "Close", submitButtonText: "Go to API Docs", onSubmit: () => {
                 setShowViewIdModal(false);