@oneuptime/common 12.0.14 → 12.0.16

package/UI/Components/SavedViews/SavedViewsShowMoreButton.tsx

@@ -0,0 +1,44 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface SavedViewsShowMoreButtonProps {
+  /*
+   * Whether the toggle has anything to do in either direction. Taken straight
+   * from getVisibleSavedViews, which answers it from the list rather than from
+   * the expanded flag — otherwise a list that shrinks while expanded leaves a
+   * "Show less" behind that collapses nothing.
+   */
+  hasMore: boolean;
+  isShowingAll: boolean;
+  // Matching views the collapsed list holds back. Zero while expanded.
+  hiddenCount: number;
+  onToggle: () => void;
+  className?: string | undefined;
+}
+
+/*
+ * The "+N more" / "Show less" toggle the facet sections use, lifted out so the
+ * saved-views lists read the same way. Renders nothing when the list is
+ * already whole — a "Show less" with nothing to collapse is a dead control.
+ */
+const SavedViewsShowMoreButton: FunctionComponent<
+  SavedViewsShowMoreButtonProps
+> = (props: SavedViewsShowMoreButtonProps): ReactElement | null => {
+  if (!props.hasMore) {
+    return null;
+  }
+
+  return (
+    <button
+      type="button"
+      className={
+        props.className ||
+        "mt-1 px-1 text-[11px] font-medium text-indigo-500 hover:text-indigo-600"
+      }
+      onClick={props.onToggle}
+    >
+      {props.isShowingAll ? "Show less" : `+${props.hiddenCount} more`}
+    </button>
+  );
+};
+
+export default SavedViewsShowMoreButton;

package/UI/Components/Table/TableRow.tsx

@@ -213,7 +213,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                               icon={button.icon}
                               buttonStyle={button.buttonStyleType}
                               isLoading={isButtonLoading[actionIndex]}
+                              disabled={button.disabled}
+                              tooltip={button.tooltip}
                               onClick={() => {
+                                if (button.disabled) {
+                                  return;
+                                }
+
                                 if (button.onClick) {
                                   isButtonLoading[actionIndex] = true;
                                   setIsButtonLoading(isButtonLoading);
@@ -526,7 +532,13 @@ const TableRow: TableRowFunction = <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);

package/UI/Components/TelemetryViewer/components/SavedViewsDropdown.tsx

@@ -1,8 +1,22 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { SavedViewOption } from "../types";
 import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
+import SavedViewsSearchInput from "../../SavedViews/SavedViewsSearchInput";
+import SavedViewsShowMoreButton from "../../SavedViews/SavedViewsShowMoreButton";
+import {
+  VisibleSavedViews,
+  getVisibleSavedViews,
+  shouldShowSavedViewsSearch,
+} from "../../SavedViews/SavedViewsList";
 
 export interface SavedViewsDropdownProps {
   savedViews: Array<SavedViewOption>;
@@ -33,6 +47,29 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
   const { ref, isComponentVisible, setIsComponentVisible } =
     useComponentOutsideClick(false);
 
+  const [searchText, setSearchText] = useState<string>("");
+  const [showAll, setShowAll] = useState<boolean>(false);
+
+  /*
+   * Escape has to put focus back where it came from. Without this the panel
+   * closes out from under the caret and focus falls to <body>, which for a
+   * keyboard user is the same as being dropped at the top of the page.
+   */
+  const triggerRef: React.MutableRefObject<HTMLButtonElement | null> =
+    useRef<HTMLButtonElement | null>(null);
+
+  /*
+   * A search is scoped to the visit that typed it. Leaving it behind means
+   * the next open shows a filtered list with no obvious reason why — the
+   * dropdown has no persistent chrome to remind anyone a filter is on.
+   */
+  useEffect(() => {
+    if (!isComponentVisible) {
+      setSearchText("");
+      setShowAll(false);
+    }
+  }, [isComponentVisible]);
+
   const selectedView: SavedViewOption | undefined = props.savedViews.find(
     (view: SavedViewOption) => {
       return view.id === props.selectedSavedViewId;
@@ -45,6 +82,69 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
    */
   const canClear: boolean = Boolean(props.onClear && selectedView);
 
+  const showSearch: boolean = shouldShowSavedViewsSearch(
+    props.savedViews.length,
+  );
+
+  /*
+   * A filter the user cannot see is a filter the user cannot cancel. Hosts
+   * replace this list in place after a create, rename or delete, and once it
+   * drops below the threshold the search box unmounts — so the query is read
+   * through the box's own visibility, and cleared with it.
+   */
+  const activeSearchText: string = showSearch ? searchText : "";
+
+  useEffect(() => {
+    if (!showSearch) {
+      setSearchText("");
+    }
+  }, [showSearch]);
+
+  const visible: VisibleSavedViews<SavedViewOption> = useMemo(() => {
+    return getVisibleSavedViews<SavedViewOption>({
+      savedViews: props.savedViews,
+      searchText: activeSearchText,
+      showAll: showAll,
+      selectedSavedViewId: props.selectedSavedViewId,
+    });
+  }, [props.savedViews, props.selectedSavedViewId, activeSearchText, showAll]);
+
+  /*
+   * Escape closes the panel, from anywhere. Deliberately a document listener
+   * rather than a handler on the wrapper: clicking the panel's own padding
+   * leaves focus on <body> (as does opening it by mouse at all, on Safari and
+   * Firefox), and a wrapper handler never sees a keydown whose target is
+   * outside its subtree. The page has its own Escape handling — the logs
+   * explorer closes the log detail panel with it — so a missed Escape here is
+   * not a no-op, it closes the wrong thing.
+   *
+   * Registered only while open, and in the capture phase ahead of those page
+   * handlers, so a closed dropdown never eats the page's Escape.
+   */
+  useEffect(() => {
+    if (!isComponentVisible) {
+      return undefined;
+    }
+
+    const handleEscape: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      if (event.key !== "Escape") {
+        return;
+      }
+
+      event.stopPropagation();
+      setIsComponentVisible(false);
+      triggerRef.current?.focus();
+    };
+
+    document.addEventListener("keydown", handleEscape, true);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape, true);
+    };
+  }, [isComponentVisible, setIsComponentVisible]);
+
   const clearSelection: () => void = (): void => {
     props.onClear?.();
     setIsComponentVisible(false);
@@ -53,6 +153,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
   return (
     <div className="relative" ref={ref}>
       <button
+        ref={triggerRef}
         type="button"
         className={`${triggerButtonClassName} ${props.triggerClassName || ""}`}
         onClick={() => {
@@ -90,7 +191,15 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
       </button>
 
       {isComponentVisible && (
+        /*
+         * The trigger has always advertised aria-haspopup="dialog"; now that
+         * the panel holds a text field, saying so on the panel too is what
+         * lets assistive tech tell this search box apart from the identically
+         * named one in a facet sidebar behind it.
+         */
         <div
+          role="dialog"
+          aria-label="Saved views"
           className={`absolute z-20 mt-2 w-72 rounded-lg border border-gray-200 bg-white shadow-xl ${
             props.dropdownAlignment === "right" ? "right-0" : "left-0"
           }`}
@@ -120,6 +229,22 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
             </div>
           )}
 
+          {/*
+           * Search once the list is long enough that reading it is slower
+           * than typing — issue 3319. Same threshold the facet sections use.
+           */}
+          {showSearch && (
+            <div className="border-b border-gray-100 px-3 py-2">
+              <SavedViewsSearchInput
+                value={searchText}
+                className="w-full rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs text-gray-700 placeholder-gray-400 outline-none focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200"
+                onChange={(text: string) => {
+                  setSearchText(text);
+                }}
+              />
+            </div>
+          )}
+
           {/* View list */}
           <div className="max-h-72 overflow-y-auto py-1">
             {props.savedViews.length === 0 && (
@@ -128,7 +253,13 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
               </div>
             )}
 
-            {props.savedViews.map((view: SavedViewOption) => {
+            {props.savedViews.length > 0 && visible.views.length === 0 && (
+              <div className="px-3 py-6 text-center text-xs text-gray-400">
+                No matches found
+              </div>
+            )}
+
+            {visible.views.map((view: SavedViewOption) => {
               const isSelected: boolean = view.id === props.selectedSavedViewId;
 
               return (
@@ -245,6 +376,25 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
             })}
           </div>
 
+          {/*
+           * The toggle sits outside the scrolling list on purpose. Inside it,
+           * expanding pushed "Show less" off the bottom of the scroll box and
+           * slid a view row under the cursor, so a second click in the same
+           * spot applied whichever view had taken its place.
+           */}
+          {visible.hasMore && (
+            <div className="border-t border-gray-100 px-3 py-1.5">
+              <SavedViewsShowMoreButton
+                hasMore={visible.hasMore}
+                hiddenCount={visible.hiddenCount}
+                isShowingAll={showAll}
+                onToggle={() => {
+                  setShowAll(!showAll);
+                }}
+              />
+            </div>
+          )}
+
           {/* Footer action */}
           {props.onCreate && (
             <div className="border-t border-gray-100 px-3 py-2">

package/UI/Types/UseComponentOutsideClick.ts

@@ -23,15 +23,62 @@ const useComponentOutsideClick: UseComponentOutsideClickFunction = (
     useState<boolean>(isVisible);
   const ref: any = useRef<any>(null);
 
+  /*
+   * Whether the gesture that is about to produce a click STARTED inside the
+   * component. A drag that begins inside and ends outside — selecting the text
+   * in a menu's search box and overshooting the panel, most obviously — fires
+   * its click on the common ancestor of the two, which is outside. Dismissing
+   * on that throws away whatever the user was in the middle of doing.
+   *
+   * Only a primary-button press arms it. The other buttons fire mousedown and
+   * then never produce a click at all — right-click goes to contextmenu, middle
+   * click to auxclick — so arming on those would leave the flag set with no
+   * click coming to spend it.
+   */
+  const didPointerDownInside: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  const handlePointerDown: MouseEventHandler = (event: MouseEvent) => {
+    if (event.button !== 0) {
+      didPointerDownInside.current = false;
+      return;
+    }
+
+    didPointerDownInside.current = Boolean(
+      ref.current && ref.current.contains(event.target),
+    );
+  };
+
   const handleClickOutside: MouseEventHandler = (event: MouseEvent) => {
+    /*
+     * Spend the flag on the very next click whatever happens to it, so a press
+     * whose release never became a click — dragged into a native drag, target
+     * unmounted mid-gesture — cannot leave it armed for someone else's.
+     */
+    const didStartInside: boolean = didPointerDownInside.current;
+    didPointerDownInside.current = false;
+
+    /*
+     * ...and only let it suppress a click that a pointer could actually have
+     * produced. Keyboard activation and element.click() both arrive with a
+     * detail of 0 and no mousedown of their own, so without this a stale flag
+     * would eat a dismissal that no press was ever responsible for — which is
+     * exactly the keyboard user's Enter on a control elsewhere on the page.
+     */
+    if (didStartInside && event.detail > 0) {
+      return;
+    }
+
     if (ref.current && !ref.current.contains(event.target)) {
       setIsComponentVisible(false);
     }
   };
 
   useEffect(() => {
+    document.addEventListener("mousedown", handlePointerDown as any, true);
     document.addEventListener("click", handleClickOutside as any, true);
     return () => {
+      document.removeEventListener("mousedown", handlePointerDown as any, true);
       document.removeEventListener("click", handleClickOutside as any, true);
     };
   }, []);

package/UI/Utils/PermissionGate.ts

@@ -0,0 +1,277 @@
+import { CardButtonSchema } from "../Components/Card/Card";
+import Dictionary from "../../Types/Dictionary";
+import Permission, {
+  PermissionHelper,
+  PermissionProps,
+} from "../../Types/Permission";
+import PermissionUtil from "./Permission";
+import User from "./User";
+
+/*
+ * The four record-level operations a user can be gated on. Deliberately not the
+ * column-level equivalents: field access control stays hidden rather than
+ * disabled, because selecting an unreadable column makes the whole list request
+ * fail (see the comment on isPickableColumn in BaseModelTable).
+ */
+export enum ModelAction {
+  Create = "create",
+  Read = "read",
+  Update = "update",
+  Delete = "delete",
+}
+
+export interface PermissionGateResult {
+  /* Whether the user may perform the operation. */
+  isAllowed: boolean;
+  /*
+   * Why the button is disabled, ready to be shown in a tooltip - or undefined
+   * when there is nothing useful to say. `undefined` with `isAllowed: false` is
+   * the "do not accuse the user" case: the permission snapshot has not loaded
+   * yet, or the model declares no permissions for this operation at all. The
+   * caller must HIDE the affordance in that case rather than show a disabled
+   * button with an empty reason.
+   */
+  disabledReason?: string | undefined;
+}
+
+/*
+ * Structurally typed so that both DatabaseBaseModel and AnalyticsBaseModel
+ * satisfy it without a union - the two class hierarchies are unrelated but
+ * expose an identical permission API. (Same trick as canCreate in
+ * DashboardCommandPaletteHelpers.)
+ */
+export interface PermissionCheckableModel {
+  singularName: string | null;
+  hasCreatePermissions: (permissions: Array<Permission>) => boolean;
+  hasReadPermissions: (permissions: Array<Permission>) => boolean;
+  hasUpdatePermissions: (permissions: Array<Permission>) => boolean;
+  hasDeletePermissions: (permissions: Array<Permission>) => boolean;
+  getCreatePermissions: () => Array<Permission>;
+  getReadPermissions: () => Array<Permission>;
+  getUpdatePermissions: () => Array<Permission>;
+  getDeletePermissions: () => Array<Permission>;
+}
+
+export interface PermissionGateOptions {
+  /*
+   * Overrides the permissions read from storage. Only used by tests and by
+   * callers that already hold a snapshot they want every gate on the screen to
+   * agree with.
+   */
+  permissions?: Array<Permission> | undefined;
+  /*
+   * The noun to use in the message when the model's own singularName is not
+   * what the user sees on screen ("Monitor" vs "Monitor Template").
+   */
+  singularName?: string | undefined;
+}
+
+/*
+ * PermissionHelper.getAllPermissionProps() rebuilds a ~2000 entry array literal
+ * on every call, and a gate runs once per action button per render of every
+ * table. Build the lookup once per page load instead.
+ */
+let permissionPropsCache: Dictionary<PermissionProps> | null = null;
+
+type GetPermissionPropsFunction = () => Dictionary<PermissionProps>;
+
+const getPermissionProps: GetPermissionPropsFunction =
+  (): Dictionary<PermissionProps> => {
+    if (!permissionPropsCache) {
+      permissionPropsCache =
+        PermissionHelper.getAllPermissionPropsAsDictionary();
+    }
+
+    return permissionPropsCache;
+  };
+
+/*
+ * Decides whether a create / update / delete affordance should be offered, and
+ * when it should not, produces the sentence that explains why.
+ *
+ * Before this existed, every gate in the UI was `if (allowed) { render() }`, so
+ * a user without permission saw the button simply not be there - or, worse,
+ * saw a fully working create page that only failed at submit with a validation
+ * error about a field they never got to fill in (issue #3306). The button now
+ * stays on screen, disabled, and says which permission is missing.
+ */
+export default class PermissionGate {
+  public static check(
+    model: PermissionCheckableModel,
+    action: ModelAction,
+    options?: PermissionGateOptions | undefined,
+  ): PermissionGateResult {
+    /*
+     * A master admin is allowed everything, everywhere. Every gate in the UI
+     * already ORs this in - except the bulk delete one, which is why that gate
+     * used to disagree with the per-row Delete button next to it.
+     */
+    if (User.isMasterAdmin()) {
+      return { isAllowed: true };
+    }
+
+    const userPermissions: Array<Permission> =
+      options?.permissions ?? PermissionUtil.getAllPermissions();
+
+    const modelPermissions: Array<Permission> = this.getModelPermissions(
+      model,
+      action,
+    );
+
+    /*
+     * The model does not support this operation at all (an analytics model with
+     * no declared access control reports exactly this). There is no permission
+     * the user could be granted to make the button work, so there is nothing
+     * worth showing them - hide it, as before.
+     */
+    if (modelPermissions.length === 0) {
+      return { isAllowed: false };
+    }
+
+    /*
+     * The permission snapshot arrives on a response header, so it is empty for
+     * the first paint after a fresh login and for a moment after the project is
+     * switched. Telling somebody they need a permission they actually hold is
+     * worse than briefly not offering the button, so this case stays hidden.
+     */
+    if (userPermissions.length === 0) {
+      return { isAllowed: false };
+    }
+
+    if (this.hasPermission(model, action, userPermissions)) {
+      return { isAllowed: true };
+    }
+
+    return {
+      isAllowed: false,
+      disabledReason: this.getMissingPermissionMessage(model, action, options),
+    };
+  }
+
+  /*
+   * The sentence shown in the tooltip. Deliberately the same phrasing the API
+   * returns when it refuses the same operation (see TablePermission on the
+   * server) so that the two do not read like different products.
+   */
+  public static getMissingPermissionMessage(
+    model: PermissionCheckableModel,
+    action: ModelAction,
+    options?: PermissionGateOptions | undefined,
+  ): string {
+    const singularName: string =
+      options?.singularName || model.singularName || "item";
+
+    const titles: Array<string> = this.getPermissionTitles(
+      this.getModelPermissions(model, action),
+    );
+
+    if (titles.length === 0) {
+      return `You do not have permission to ${action} this ${singularName}.`;
+    }
+
+    return `You do not have permission to ${action} this ${singularName}. You need one of these permissions: ${titles.join(
+      ", ",
+    )}.`;
+  }
+
+  public static getModelPermissions(
+    model: PermissionCheckableModel,
+    action: ModelAction,
+  ): Array<Permission> {
+    switch (action) {
+      case ModelAction.Create:
+        return model.getCreatePermissions() || [];
+      case ModelAction.Read:
+        return model.getReadPermissions() || [];
+      case ModelAction.Update:
+        return model.getUpdatePermissions() || [];
+      case ModelAction.Delete:
+        return model.getDeletePermissions() || [];
+      default:
+        return [];
+    }
+  }
+
+  /*
+   * Human titles for a permission list, skipping anything the props table does
+   * not know about. PermissionHelper.getTitle throws on an unknown permission,
+   * which would take down the whole table for one stale enum value.
+   */
+  public static getPermissionTitles(
+    permissions: Array<Permission>,
+  ): Array<string> {
+    const props: Dictionary<PermissionProps> = getPermissionProps();
+    const titles: Array<string> = [];
+
+    for (const permission of permissions) {
+      const permissionProp: PermissionProps | undefined = props[permission];
+
+      if (permissionProp && !titles.includes(permissionProp.title)) {
+        titles.push(permissionProp.title);
+      }
+    }
+
+    return titles;
+  }
+
+  private static hasPermission(
+    model: PermissionCheckableModel,
+    action: ModelAction,
+    userPermissions: Array<Permission>,
+  ): boolean {
+    switch (action) {
+      case ModelAction.Create:
+        return model.hasCreatePermissions(userPermissions);
+      case ModelAction.Read:
+        return model.hasReadPermissions(userPermissions);
+      case ModelAction.Update:
+        return model.hasUpdatePermissions(userPermissions);
+      case ModelAction.Delete:
+        return model.hasDeletePermissions(userPermissions);
+      default:
+        return false;
+    }
+  }
+
+  /*
+   * Applies a gate to a card button in one line. Several tables replace the
+   * built in create modal with a button that routes to a dedicated create
+   * page - those bypass ModelTable's own gate entirely, which is how a viewer
+   * ended up walking through the whole "Create New Monitor" wizard before
+   * being refused (issue #3306).
+   *
+   * Returns null when the button should not be rendered at all, which is only
+   * the "nothing honest to say" case: the permission snapshot has not landed,
+   * or the model declares no permissions for the operation.
+   */
+  public static gateCardButton(
+    button: CardButtonSchema,
+    model: PermissionCheckableModel,
+    action: ModelAction,
+    options?: PermissionGateOptions | undefined,
+  ): CardButtonSchema | null {
+    const result: PermissionGateResult = this.check(model, action, options);
+
+    if (result.isAllowed) {
+      return button;
+    }
+
+    if (!result.disabledReason) {
+      return null;
+    }
+
+    return {
+      ...button,
+      disabled: true,
+      tooltip: result.disabledReason,
+      onClick: () => {
+        // Locked. The tooltip says which permission is missing.
+      },
+    };
+  }
+
+  /* Test seam - the props lookup is memoized for the lifetime of the page. */
+  public static clearPermissionPropsCache(): void {
+    permissionPropsCache = null;
+  }
+}