@oneuptime/common 12.0.15 → 12.0.17

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -19,6 +19,10 @@ import buildQueryFromFilterData, {
   sanitizeFilterData,
 } from "./FilterDataToQuery";
 import PermissionUtil from "../../Utils/Permission";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import ProjectUtil from "../../Utils/Project";
 import User from "../../Utils/User";
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
@@ -389,6 +393,45 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   const model: TBaseModel = new props.modelType();
 
+  /*
+   * How a create / update / delete affordance should be rendered for this
+   * viewer. A user without the permission used to simply not see the button,
+   * which reads as "this feature does not exist" - and on the flows that route
+   * to a dedicated create page it did not even do that: the page opened, the
+   * form submitted, and the API refused it with a validation error about a
+   * field the user was never shown (issue #3306). The button now stays put and
+   * says which permission is missing.
+   *
+   * `show: false` is reserved for the two cases where there is nothing honest
+   * to say - the permission snapshot has not arrived yet, or the model has no
+   * permissions declared for the operation at all.
+   */
+  interface ActionGate {
+    show: boolean;
+    disabled: boolean;
+    tooltip: string | undefined;
+  }
+
+  type GetActionGateFunction = (action: ModelAction) => ActionGate;
+
+  const getActionGate: GetActionGateFunction = (
+    action: ModelAction,
+  ): ActionGate => {
+    const result: PermissionGateResult = PermissionGate.check(model, action, {
+      singularName: props.singularName || model.singularName || undefined,
+    });
+
+    if (result.isAllowed) {
+      return { show: true, disabled: false, tooltip: undefined };
+    }
+
+    if (result.disabledReason) {
+      return { show: true, disabled: true, tooltip: result.disabledReason };
+    }
+
+    return { show: false, disabled: false, tooltip: undefined };
+  };
+
   const [bulkSelectedItems, setBulkSelectedItems] = useState<Array<TBaseModel>>(
     [],
   );
@@ -1247,30 +1290,22 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       }
     }
 
-    const permissions: Array<Permission> | null =
-      PermissionUtil.getAllPermissions();
-
-    let showActionsColumn: boolean = Boolean(
-      (permissions &&
-        ((props.isDeleteable && model.hasDeletePermissions(permissions)) ||
-          (props.isEditable && model.hasUpdatePermissions(permissions)) ||
-          (props.isViewable && model.hasReadPermissions(permissions)))) ||
+    /*
+     * The column has to exist for a locked Edit / Delete button to have
+     * somewhere to live, so it follows what the table author asked for rather
+     * than what this particular viewer is allowed to do. View is the exception
+     * - a disabled "View X" on a row would confirm a record the viewer is not
+     * allowed to know about - so it still disappears without read permission.
+     */
+    const showActionsColumn: boolean = Boolean(
+      (props.isDeleteable && getActionGate(ModelAction.Delete).show) ||
+        (props.isEditable && getActionGate(ModelAction.Update).show) ||
+        (props.isViewable &&
+          PermissionGate.check(model, ModelAction.Read).isAllowed) ||
         (props.actionButtons && props.actionButtons.length > 0) ||
         props.showViewIdButton,
     );
 
-    if (User.isMasterAdmin()) {
-      if (
-        (props.actionButtons && props.actionButtons.length > 0) ||
-        props.showViewIdButton ||
-        props.isDeleteable ||
-        props.isEditable ||
-        props.isViewable
-      ) {
-        showActionsColumn = true;
-      }
-    }
-
     if (showActionsColumn) {
       columns.push({
         title: tx("Actions"),
@@ -2126,22 +2161,19 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       headerbuttons = [...headerbuttons, ...props.cardProps.buttons];
     }
 
-    const permissions: Array<Permission> | null =
-      PermissionUtil.getAllPermissions();
-
-    let hasPermissionToCreate: boolean = false;
-
-    if (permissions) {
-      hasPermissionToCreate =
-        model.hasCreatePermissions(permissions) || User.isMasterAdmin();
-    }
+    const createGate: ActionGate = getActionGate(ModelAction.Create);
 
     const showFilterButton: boolean = props.filters.length > 0;
 
-    // because ordered list add button is inside the table and not on the card header.
+    /*
+     * 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
+     * removed, so the user can see the action exists and read why it is not
+     * available to them.
+     */
     if (
       props.isCreateable &&
-      hasPermissionToCreate &&
+      createGate.show &&
       showAs !== ShowAs.OrderedStatesList
     ) {
       headerbuttons.push({
@@ -2151,7 +2183,13 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         buttonStyle: ButtonStyleType.NORMAL,
         buttonSize: ButtonSize.Normal,
         className: "",
+        disabled: createGate.disabled,
+        tooltip: createGate.tooltip,
         onClick: () => {
+          if (createGate.disabled) {
+            return;
+          }
+
           if (props.onCreateClick) {
             props.onCreateClick();
             return;
@@ -2346,8 +2384,14 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   const getUserPermissions: GetUserPermissionsFunction =
     (): Array<Permission> => {
-      let userPermissions: Array<Permission> =
-        PermissionUtil.getGlobalPermissions()?.globalPermissions || [];
+      /*
+       * A copy - Public is appended below, and pushing into the array the util
+       * handed back mutates the snapshot every other permission check on the
+       * page reads from.
+       */
+      let userPermissions: Array<Permission> = [
+        ...(PermissionUtil.getGlobalPermissions()?.globalPermissions || []),
+      ];
       if (
         PermissionUtil.getProjectPermissions() &&
         PermissionUtil.getProjectPermissions()?.permissions &&
@@ -2490,13 +2534,14 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         });
       }
 
-      if (
-        props.isEditable &&
-        (model.hasUpdatePermissions(permissions) || User.isMasterAdmin())
-      ) {
+      const updateGate: ActionGate = getActionGate(ModelAction.Update);
+
+      if (props.isEditable && updateGate.show) {
         actionsSchema.push({
           title: tx(props.editButtonText || "Edit"),
           buttonStyleType: ButtonStyleType.OUTLINE,
+          disabled: updateGate.disabled,
+          tooltip: updateGate.tooltip,
           onClick: async (
             item: TBaseModel,
             onCompleteAction: VoidFunction,
@@ -2519,14 +2564,15 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         });
       }
 
-      if (
-        props.isDeleteable &&
-        (model.hasDeletePermissions(permissions) || User.isMasterAdmin())
-      ) {
+      const deleteGate: ActionGate = getActionGate(ModelAction.Delete);
+
+      if (props.isDeleteable && deleteGate.show) {
         actionsSchema.push({
           title: tx(props.deleteButtonText || "Delete"),
           icon: IconProp.Trash,
           buttonStyleType: ButtonStyleType.DANGER_OUTLINE,
+          disabled: deleteGate.disabled,
+          tooltip: deleteGate.tooltip,
           onClick: async (
             item: TBaseModel,
             onCompleteAction: VoidFunction,
@@ -2723,10 +2769,20 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           await getFilterDropdownItems();
         }}
         bulkActions={(() => {
-          const permissions: Array<Permission> =
-            PermissionUtil.getAllPermissions();
-          const userCanDelete: boolean =
-            model.hasDeletePermissions(permissions);
+          const bulkDeleteGate: ActionGate = getActionGate(ModelAction.Delete);
+
+          /*
+           * Whether to auto-add the default Delete still follows the model
+           * check alone, exactly as it did before. Folding the master-admin
+           * short circuit in here would grow a row-selection column onto every
+           * table a master admin opens without project permissions - Table
+           * derives those checkboxes from this array being non-empty - which is
+           * a layout change nobody asked for. The gate above still decides
+           * whether the action, once present, is locked and what it says.
+           */
+          const userCanDelete: boolean = model.hasDeletePermissions(
+            PermissionUtil.getAllPermissions(),
+          );
 
           const sourceButtons: Array<
             BulkActionButtonSchema<TBaseModel> | ModalTableBulkDefaultActions
@@ -2740,6 +2796,11 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
            * per-row Delete button in the Actions column, not bulk operations.
            * The confirmation modal is wired up via the schema's confirmMessage
            * / confirmTitle below. Skip if the table author already added it.
+           *
+           * Only auto-inject it when the table already offers bulk actions.
+           * Table derives the row checkboxes from this array being non-empty,
+           * so injecting a locked Delete into an otherwise empty array would
+           * grow a selection column onto tables that have never had one.
            */
           const alreadyHasDeleteAction: boolean = sourceButtons.some(
             (
@@ -2762,26 +2823,64 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               return false;
             },
           );
-          if (userCanDelete && !alreadyHasDeleteAction) {
+
+          const canAutoInjectDelete: boolean =
+            userCanDelete ||
+            (bulkDeleteGate.disabled && sourceButtons.length > 0);
+
+          if (canAutoInjectDelete && !alreadyHasDeleteAction) {
             sourceButtons.push(ModalTableBulkDefaultActions.Delete);
           }
 
           return {
-            buttons: sourceButtons.map(
-              (
-                action:
+            buttons: sourceButtons
+              .map(
+                (
+                  action:
+                    | BulkActionButtonSchema<TBaseModel>
+                    | ModalTableBulkDefaultActions,
+                ):
                   | BulkActionButtonSchema<TBaseModel>
-                  | ModalTableBulkDefaultActions,
-              ) => {
-                if (
-                  action === ModalTableBulkDefaultActions.Delete &&
-                  userCanDelete
-                ) {
-                  return getDeleteBulkAction();
-                }
-                return action;
-              },
-            ) as Array<BulkActionButtonSchema<TBaseModel>>,
+                  | ModalTableBulkDefaultActions
+                  | null => {
+                  if (action !== ModalTableBulkDefaultActions.Delete) {
+                    return action;
+                  }
+
+                  /*
+                   * A table author who asked for the default Delete but whose
+                   * viewer cannot delete used to leave the raw enum string in
+                   * the array, which then reached BulkUpdateForm as if it were
+                   * a button schema. Resolve it here, in every branch.
+                   */
+                  if (!bulkDeleteGate.show) {
+                    return null;
+                  }
+
+                  const deleteAction: BulkActionButtonSchema<TBaseModel> =
+                    getDeleteBulkAction();
+
+                  if (bulkDeleteGate.disabled) {
+                    return {
+                      ...deleteAction,
+                      disabled: true,
+                      tooltip: bulkDeleteGate.tooltip,
+                    };
+                  }
+
+                  return deleteAction;
+                },
+              )
+              .filter(
+                (
+                  action:
+                    | BulkActionButtonSchema<TBaseModel>
+                    | ModalTableBulkDefaultActions
+                    | null,
+                ): boolean => {
+                  return action !== null;
+                },
+              ) as Array<BulkActionButtonSchema<TBaseModel>>,
           };
         })()}
         onBulkActionEnd={async () => {
@@ -2976,7 +3075,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           await fetchItems();
         }}
         onCreateNewItem={
-          props.isCreateable
+          props.isCreateable && getActionGate(ModelAction.Create).show
             ? (order: number) => {
                 setOrderedStatesListNewItemOrder(order);
                 setModalType(ModalType.Create);
@@ -2984,6 +3083,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               }
             : undefined
         }
+        createDisabledReason={getActionGate(ModelAction.Create).tooltip}
         singularLabel={props.singularName || model.singularName || "Item"}
         actionButtons={actionButtonSchema}
         getTitleElement={getTitleElement}
@@ -3637,9 +3737,14 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         buttonSize={b.buttonSize}
         className={b.className}
         onClick={() => {
+          if (b.disabled) {
+            return;
+          }
+
           b.onClick?.();
         }}
         disabled={b.disabled}
+        tooltip={b.tooltip}
         icon={b.icon}
         shortcutKey={b.shortcutKey}
         dataTestId="card-button"
@@ -3708,6 +3813,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               }
             }}
             isDisabled={b.disabled}
+            tooltip={b.tooltip}
           />
         );
       },
@@ -4033,7 +4139,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                */}
               {tableColumns.length === 0 && allColumns.length > 0 ? (
                 <ErrorMessage
-                  message={`You are not authorized to view this table. You need any one of these permissions: ${PermissionHelper.getPermissionTitles(
+                  message={`You are not authorized to view this table. You need any one of these permissions: ${PermissionGate.getPermissionTitles(
                     model.getReadPermissions(),
                   ).join(", ")}`}
                 />

package/UI/Components/ModelTable/ModelTable.tsx

@@ -3,8 +3,10 @@ import API from "../../Utils/API/API";
 import ModelImportExportUtil, {
   ImportResult,
 } from "../../Utils/ModelImportExport";
-import PermissionUtil from "../../Utils/Permission";
-import User from "../../Utils/User";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import { FormType, ModelField } from "../Forms/ModelForm";
 import ModelFormModal from "../ModelFormModal/ModelFormModal";
 import BaseModelTable, {
@@ -28,7 +30,6 @@ import Dictionary from "../../../Types/Dictionary";
 import IconProp from "../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
-import Permission from "../../../Types/Permission";
 import React, { ReactElement, useState } from "react";
 import Query from "../../../Types/BaseDatabase/Query";
 import GroupBy from "../../../Types/BaseDatabase/GroupBy";
@@ -129,14 +130,13 @@ const ModelTable: <TBaseModel extends BaseModel>(
       buttons: [...(props.bulkActions?.buttons || []), getExportBulkAction()],
     };
 
-    const permissions: Array<Permission> | null =
-      PermissionUtil.getAllPermissions();
+    /* Importing writes new records, so it is gated on create permission. */
+    const createGate: PermissionGateResult = PermissionGate.check(
+      model,
+      ModelAction.Create,
+    );
 
-    const hasPermissionToCreate: boolean = permissions
-      ? model.hasCreatePermissions(permissions) || User.isMasterAdmin()
-      : false;
-
-    if (hasPermissionToCreate) {
+    if (createGate.isAllowed || createGate.disabledReason) {
       cardProps = {
         ...(props.cardProps || {}),
         buttons: [
@@ -145,7 +145,13 @@ const ModelTable: <TBaseModel extends BaseModel>(
             title: "Import JSON",
             buttonStyle: ButtonStyleType.OUTLINE,
             icon: IconProp.Upload,
+            disabled: !createGate.isAllowed,
+            tooltip: createGate.disabledReason,
             onClick: () => {
+              if (!createGate.isAllowed) {
+                return;
+              }
+
               setShowImportModal(true);
             },
           },

package/UI/Components/ModelTable/TableView.tsx

@@ -56,6 +56,19 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
   props: ComponentProps<T>,
 ): ReactElement => {
   const [error, setError] = useState<string>("");
+  /*
+   * Kept apart from `error` because the two deserve different treatment.
+   * `error` is the result of something the user asked for - deleting a view -
+   * and is worth a modal. This one is the mount-time list fetch, which every
+   * table in the product runs whether or not anybody went looking for a saved
+   * view, so it must not put a dialog over a page the user came to read.
+   *
+   * Issue #3305 was that dialog: one permission list that a domain-scoped role
+   * could not satisfy, and every table in the dashboard opened onto
+   * "Something went wrong...". The permission list is fixed; this makes the
+   * next such gap cost the control rather than the page.
+   */
+  const [loadError, setLoadError] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [allTableViews, setAllTableViews] = useState<Array<TableView>>([]);
   const [tableViewToDelete, setTableViewToDelete] = useState<
@@ -79,7 +92,7 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
   // load all the filters for this user and for this project.
   const fetchTableViews: PromiseVoidFunction = async (): Promise<void> => {
     try {
-      setError("");
+      setLoadError("");
       setIsLoading(true);
 
       const tableViews: ListResult<TableView> = await ModelAPI.getList({
@@ -106,7 +119,8 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
 
       setAllTableViews(tableViews.data);
     } catch (err) {
-      setError(API.getFriendlyErrorMessage(err as Error));
+      setAllTableViews([]);
+      setLoadError(API.getFriendlyErrorMessage(err as Error));
     }
 
     setIsLoading(false);
@@ -138,7 +152,7 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
 
   useEffect(() => {
     fetchTableViews().catch((err: Error) => {
-      setError(API.getFriendlyErrorMessage(err as Error));
+      setLoadError(API.getFriendlyErrorMessage(err as Error));
     });
   }, []);
 
@@ -250,9 +264,22 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
 
       const elements: Array<ReactElement> = [];
 
+      /*
+       * Say why the list is empty rather than showing an empty menu. The reason
+       * lives inside the control it belongs to, so the rest of the page is
+       * untouched.
+       */
+      if (loadError) {
+        elements.push(
+          <MoreMenuSection title="Saved Views" key={"saved-views-error"}>
+            <div className="px-3 pb-2 text-sm text-red-600">{loadError}</div>
+          </MoreMenuSection>,
+        );
+      }
+
       if (allTableViews.length > 0) {
         elements.push(
-          <MoreMenuSection title="Saved Views">
+          <MoreMenuSection title="Saved Views" key={"saved-views"}>
             {getViewItems()}
           </MoreMenuSection>,
         );
@@ -495,6 +522,11 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
     }
   };
 
+  /*
+   * Nothing to offer and nothing to say: no saved views, nothing worth saving,
+   * and no view applied. A failed load is deliberately not a reason to render -
+   * a user who never opens the menu should not be told the menu is broken.
+   */
   if (
     !isLoading &&
     allTableViews.length === 0 &&

package/UI/Components/MoreMenu/MoreMenuItem.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import IconProp from "../../../Types/Icon/IconProp";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 
 export interface ComponentProps {
   icon?: IconProp | undefined;
@@ -10,12 +11,18 @@ export interface ComponentProps {
   className?: string | undefined;
   iconClassName?: string | undefined;
   isDisabled?: boolean | undefined;
+  /*
+   * Shown on hover - the place a locked menu item says why it is locked.
+   */
+  tooltip?: string | undefined;
 }
 
 const MoreMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  return (
+  const isDisabled: boolean = Boolean(props.isDisabled);
+
+  const menuItem: ReactElement = (
     /*
      * A button shrink-wraps its content whatever its display type, so the width
      * has to be set explicitly or the hover background stops at the end of the
@@ -23,11 +30,13 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
      */
     <button
       type="button"
-      className={`group mx-1 flex w-[calc(100%-0.5rem)] items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 transition-colors duration-100 enabled:cursor-pointer enabled:hover:bg-indigo-50 enabled:hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 ${props.className || ""}`}
+      className={`group mx-1 flex w-[calc(100%-0.5rem)] items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 transition-colors duration-100 enabled:cursor-pointer enabled:hover:bg-indigo-50 enabled:hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 ${
+        isDisabled && props.tooltip ? "pointer-events-none " : ""
+      }${props.className || ""}`}
       role="menuitem"
       tabIndex={-1}
-      disabled={props.isDisabled}
-      aria-disabled={Boolean(props.isDisabled)}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
       onClick={() => {
         props.onClick();
       }}
@@ -44,6 +53,29 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
       </div>
     </button>
   );
+
+  if (!props.tooltip) {
+    return menuItem;
+  }
+
+  /*
+   * A disabled control dispatches no pointer events, so the tooltip has to
+   * hang off a wrapper that still receives them. Matches what Button does for
+   * the same reason - but tabIndex stays -1 here, because MoreMenu drives
+   * focus itself with a roving tabindex and a tabbable wrapper would add a
+   * stop it does not know about.
+   */
+  if (isDisabled) {
+    return (
+      <Tooltip text={props.tooltip}>
+        <span className="flex w-full" tabIndex={-1}>
+          {menuItem}
+        </span>
+      </Tooltip>
+    );
+  }
+
+  return <Tooltip text={props.tooltip}>{menuItem}</Tooltip>;
 };
 
 export default MoreMenuItem;

package/UI/Components/OrderedStatesList/Item.tsx

@@ -103,7 +103,13 @@ const Item: ItemFunction = <T extends GenericObject>(
                   icon={button.icon}
                   buttonStyle={button.buttonStyleType}
                   isLoading={isButtonLoading[i]}
+                  disabled={button.disabled}
+                  tooltip={button.tooltip}
                   onClick={() => {
+                    if (button.disabled) {
+                      return;
+                    }
+
                     if (button.onClick) {
                       isButtonLoading[i] = true;
                       setIsButtonLoading(isButtonLoading);