@oneuptime/common 12.0.14 → 12.0.16

package/UI/Components/LogsViewer/components/ActiveFilterChips.tsx

@@ -3,6 +3,7 @@ import { ActiveFilter } from "../types";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Link from "../../Link/Link";
+import { formatDictionaryValueForDisplay } from "../../Dictionary/DictionaryFilterOperator";
 
 export interface ActiveFilterChipsProps {
   filters: Array<ActiveFilter>;
@@ -10,6 +11,26 @@ export interface ActiveFilterChipsProps {
   onClearAll: () => void;
 }
 
+/*
+ * `ActiveFilter.displayValue` is typed `string`, but chips are built from
+ * query objects that reach here through `as` casts, and an attribute filter
+ * carrying an operator (`contains`, `is any of`, ...) is an object, not a
+ * string. React answers an object child by throwing, which unmounts whatever
+ * renders the viewer — for the log monitor's criteria modal that meant a
+ * "Something went wrong" card in place of the form and no way to reach Save.
+ *
+ * Callers are expected to format their own text (see the log viewer's base
+ * chips); this is the backstop that keeps a mistyped value a bad-looking chip
+ * instead of a lost page.
+ */
+const chipText: (value: string) => string = (value: string): string => {
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return formatDictionaryValueForDisplay(value);
+};
+
 const renderOpenAffordance: (
   filter: ActiveFilter,
   colorClassName: string,
@@ -53,18 +74,18 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
   return (
     <div className="flex flex-wrap items-center gap-1.5 px-0.5">
       {readOnlyFilters.map((filter: ActiveFilter) => {
-        const chipKey: string = `readonly:${filter.facetKey}:${filter.value}`;
+        const chipKey: string = `readonly:${filter.facetKey}:${chipText(filter.value)}`;
         return (
           <span
             key={chipKey}
             className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700"
-            title={`${filter.displayKey}: ${filter.displayValue} (applied filter)`}
+            title={`${filter.displayKey}: ${chipText(filter.displayValue)} (applied filter)`}
           >
             <Icon icon={IconProp.Lock} className="h-2.5 w-2.5 text-gray-400" />
             <span className="font-medium text-gray-500">
               {filter.displayKey}:
             </span>
-            <span>{filter.displayValue}</span>
+            <span>{chipText(filter.displayValue)}</span>
             {renderOpenAffordance(
               filter,
               "text-gray-400 hover:bg-gray-200 hover:text-indigo-600",
@@ -73,7 +94,7 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
         );
       })}
       {removableFilters.map((filter: ActiveFilter) => {
-        const chipKey: string = `${filter.facetKey}:${filter.value}`;
+        const chipKey: string = `${filter.facetKey}:${chipText(filter.value)}`;
         return (
           <span
             key={chipKey}
@@ -82,7 +103,7 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
             <span className="font-medium text-indigo-500">
               {filter.displayKey}:
             </span>
-            <span>{filter.displayValue}</span>
+            <span>{chipText(filter.displayValue)}</span>
             {renderOpenAffordance(
               filter,
               "text-indigo-400 hover:bg-indigo-100 hover:text-indigo-600",
@@ -91,9 +112,15 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
               type="button"
               className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded text-indigo-400 transition-colors hover:bg-indigo-100 hover:text-indigo-600"
               onClick={() => {
-                props.onRemove(filter.facetKey, filter.value);
+                /*
+                 * The same coercion the chip's text gets. `value` is what the
+                 * viewer deletes out of its Set<string> of applied filters, so
+                 * handing the handler a raw object made the chip render fine
+                 * and then refuse to be removed.
+                 */
+                props.onRemove(filter.facetKey, chipText(filter.value));
               }}
-              title={`Remove ${filter.displayKey}: ${filter.displayValue}`}
+              title={`Remove ${filter.displayKey}: ${chipText(filter.displayValue)}`}
             >
               <Icon icon={IconProp.Close} className="h-2.5 w-2.5" />
             </button>

package/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx

@@ -6,6 +6,7 @@ import {
   LogsSavedViewOption,
 } from "../types";
 import FacetSection from "./FacetSection";
+import SavedViewsFacetSection from "../../SavedViews/SavedViewsFacetSection";
 import Service from "../../../../Models/DatabaseModels/Service";
 import Host from "../../../../Models/DatabaseModels/Host";
 import DockerHost from "../../../../Models/DatabaseModels/DockerHost";
@@ -266,46 +267,12 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
 
       <div className="flex-1 overflow-y-auto">
         {props.savedViews && props.savedViews.length > 0 && (
-          <div className="border-b border-gray-100 px-3 py-3">
-            <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400">
-              Saved Views
-            </p>
-
-            <div className="space-y-1.5">
-              {props.savedViews.map((view: LogsSavedViewOption) => {
-                const isSelected: boolean =
-                  view.id === props.selectedSavedViewId;
-
-                return (
-                  <button
-                    key={view.id}
-                    type="button"
-                    className={`flex w-full items-center justify-between rounded-md px-2.5 py-2 text-left text-sm transition-colors ${
-                      isSelected
-                        ? "bg-indigo-50 text-indigo-700"
-                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-800"
-                    }`}
-                    aria-pressed={isSelected}
-                    onClick={() => {
-                      if (isSelected && props.onClearSavedView) {
-                        props.onClearSavedView();
-                        return;
-                      }
-
-                      props.onSavedViewSelect?.(view.id);
-                    }}
-                  >
-                    <span className="truncate">{view.name}</span>
-                    {view.isDefault && (
-                      <span className="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700">
-                        Default
-                      </span>
-                    )}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
+          <SavedViewsFacetSection
+            savedViews={props.savedViews}
+            selectedSavedViewId={props.selectedSavedViewId}
+            onSelect={props.onSavedViewSelect}
+            onClear={props.onClearSavedView}
+          />
         )}
 
         {facetKeys.map((key: string) => {

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

@@ -1,6 +1,20 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { LogsSavedViewOption } from "../types";
 import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
+import SavedViewsSearchInput from "../../SavedViews/SavedViewsSearchInput";
+import SavedViewsShowMoreButton from "../../SavedViews/SavedViewsShowMoreButton";
+import {
+  VisibleSavedViews,
+  getVisibleSavedViews,
+  shouldShowSavedViewsSearch,
+} from "../../SavedViews/SavedViewsList";
 
 export interface SavedViewsDropdownProps {
   savedViews: Array<LogsSavedViewOption>;
@@ -28,6 +42,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: LogsSavedViewOption | undefined = props.savedViews.find(
     (view: LogsSavedViewOption) => {
       return view.id === props.selectedSavedViewId;
@@ -40,6 +77,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<LogsSavedViewOption> = useMemo(() => {
+    return getVisibleSavedViews<LogsSavedViewOption>({
+      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);
@@ -48,6 +148,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
   return (
     <div className="relative" ref={ref}>
       <button
+        ref={triggerRef}
         type="button"
         className={triggerButtonClassName}
         onClick={() => {
@@ -65,7 +166,17 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
       </button>
 
       {isComponentVisible && (
-        <div className="absolute left-0 z-20 mt-2 w-72 rounded-lg border border-gray-200 bg-white shadow-xl">
+        /*
+         * 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 the facet sidebar behind it.
+         */
+        <div
+          role="dialog"
+          aria-label="Saved views"
+          className="absolute left-0 z-20 mt-2 w-72 rounded-lg border border-gray-200 bg-white shadow-xl"
+        >
           {/*
            * Explicit way back to the unfiltered explorer. Clicking the
            * applied view also clears it, but that is only discoverable once
@@ -91,6 +202,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 && (
@@ -99,7 +226,13 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
               </div>
             )}
 
-            {props.savedViews.map((view: LogsSavedViewOption) => {
+            {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: LogsSavedViewOption) => {
               const isSelected: boolean = view.id === props.selectedSavedViewId;
 
               return (
@@ -216,6 +349,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/Components/ModelDelete/ModelDelete.tsx

@@ -1,5 +1,9 @@
 import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
 import Card from "../Card/Card";
 import ConfirmModal from "../Modal/ConfirmModal";
@@ -33,6 +37,16 @@ const ModelDelete: <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
   const model: TBaseModel = new props.modelType();
+  /*
+   * The delete card used to be rendered for everybody: a viewer got a live
+   * "Delete <X>" button, a confirmation dialog, and then a refusal from the
+   * API. It now stays visible but locked, and says which permission is
+   * missing.
+   */
+  const deleteGate: PermissionGateResult = PermissionGate.check(
+    model,
+    ModelAction.Delete,
+  );
   const [showModal, setShowModal] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
@@ -69,7 +83,13 @@ const ModelDelete: <TBaseModel extends BaseModel>(
           {
             title: `Delete ${model.singularName}`,
             buttonStyle: ButtonStyleType.DANGER,
+            disabled: !deleteGate.isAllowed,
+            tooltip: deleteGate.disabledReason,
             onClick: () => {
+              if (!deleteGate.isAllowed) {
+                return;
+              }
+
               setShowModal(true);
             },
             isLoading: isLoading,

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -1,6 +1,8 @@
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
-import PermissionUtil from "../../Utils/Permission";
-import User from "../../Utils/User";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import Navigation from "../../Utils/Navigation";
 import { ButtonStyleType } from "../Button/Button";
 import Card, {
@@ -17,11 +19,6 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import IconProp from "../../../Types/Icon/IconProp";
 import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
-import {
-  PermissionHelper,
-  UserPermission,
-  UserTenantAccessPermission,
-} from "../../../Types/Permission";
 import React, { ReactElement, useEffect, useRef, useState } from "react";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
@@ -67,20 +64,15 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
   }, [props.refresher]);
 
   useEffect(() => {
-    const userProjectPermissions: UserTenantAccessPermission | null =
-      PermissionUtil.getProjectPermissions();
-
-    const hasPermissionToEdit: boolean =
-      Boolean(
-        userProjectPermissions &&
-          userProjectPermissions.permissions &&
-          PermissionHelper.doesPermissionsIntersect(
-            model.updateRecordPermissions,
-            userProjectPermissions.permissions.map((item: UserPermission) => {
-              return item.permission;
-            }),
-          ),
-      ) || User.isMasterAdmin();
+    /*
+     * This used to look at project permissions only, so a permission granted
+     * globally did not count, and it read the raw updateRecordPermissions
+     * field rather than going through the model's own accessor.
+     */
+    const updateGate: PermissionGateResult = PermissionGate.check(
+      model,
+      ModelAction.Update,
+    );
 
     let cardButtons: Array<CardButtonSchema | ReactElement> = [];
 
@@ -114,11 +106,27 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
       });
     }
 
-    if (props.isEditable && hasPermissionToEdit) {
+    /*
+     * Without update permission the button stays where it is, locked, and the
+     * tooltip names the permission that is missing. Removing it made the page
+     * look like editing was not a thing rather than not allowed. It is only
+     * dropped entirely when there is nothing honest to say - the permission
+     * snapshot has not loaded, or the model declares no update permissions.
+     */
+    if (
+      props.isEditable &&
+      (updateGate.isAllowed || updateGate.disabledReason)
+    ) {
       cardButtons.push({
         title: props.editButtonText || `Edit ${model.singularName}`,
         buttonStyle: ButtonStyleType.NORMAL,
+        disabled: !updateGate.isAllowed,
+        tooltip: updateGate.disabledReason,
         onClick: () => {
+          if (!updateGate.isAllowed) {
+            return;
+          }
+
           if (onBeforeEditRef.current && onBeforeEditRef.current() === false) {
             return;
           }
@@ -133,7 +141,12 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
     }
 
     setCardButtons(cardButtons);
-  }, []);
+    /*
+     * props.refresher is the card's existing "something changed, look again"
+     * signal. The permission snapshot arrives on an API response header, so a
+     * one-shot read at mount could permanently show the wrong state.
+     */
+  }, [props.refresher, props.isEditable, props.editButtonText]);
 
   return (
     <>

package/UI/Components/ModelFormModal/ModelFormModal.tsx

@@ -7,6 +7,7 @@ import ModelForm, {
   ComponentProps as ModelFormComponentProps,
 } from "../Forms/ModelForm";
 import FormValues from "../Forms/Types/FormValues";
+import FormAnalyticsName from "../Forms/Utils/FormAnalyticsName";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import { JSONObject } from "../../../Types/JSON";
@@ -77,7 +78,11 @@ const ModelFormModal: <TBaseModel extends BaseModel>(
         <>
           <ModelForm<TBaseModel>
             {...props.formProps}
-            name={props.name}
+            name={FormAnalyticsName.resolve(
+              props.name,
+              props.formProps.name,
+              props.title,
+            )}
             modelAPI={props.modelAPI}
             modelType={props.modelType}
             onIsLastFormStep={(isLastFormStep: boolean) => {

package/UI/Components/ModelList/ModelList.tsx

@@ -1,5 +1,9 @@
 import API from "../../Utils/API/API";
 import Query from "../../../Types/BaseDatabase/Query";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import ModelAPI, {
   ListResult,
   RequestOptions,
@@ -51,6 +55,16 @@ const ModelList: <TBaseModel extends BaseModel>(
 ) => ReactElement = <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
+  /*
+   * The row Delete button used to appear for anybody the caller marked the
+   * list deleteable for, permission or not. It now stays visible but locked
+   * when the viewer cannot delete the model.
+   */
+  const deleteGate: PermissionGateResult = PermissionGate.check(
+    new props.modelType(),
+    ModelAction.Delete,
+  );
+
   const [selectedList, setSelectedList] = useState<Array<TBaseModel>>([]);
   const [modelList, setModalList] = useState<Array<TBaseModel>>([]);
   const [error, setError] = useState<string>("");
@@ -262,12 +276,17 @@ const ModelList: <TBaseModel extends BaseModel>(
             }}
             titleField={props.titleField}
             onDelete={
-              props.isDeleteable
+              props.isDeleteable && deleteGate.isAllowed
                 ? async (item: TBaseModel) => {
                     await deleteItem(item);
                   }
-                : undefined
+                : props.isDeleteable && deleteGate.disabledReason
+                  ? () => {
+                      // Locked - the tooltip below explains why.
+                    }
+                  : undefined
             }
+            deleteDisabledReason={deleteGate.disabledReason}
             selectedItems={selectedList}
             onClick={(model: TBaseModel) => {
               if (props.selectMultiple) {

package/UI/Components/ModelList/StaticModelList.tsx

@@ -22,6 +22,11 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   onClick: (item: TBaseModel) => void;
   titleField: string;
   onDelete?: ((item: TBaseModel) => void) | undefined;
+  /*
+   * When set, the row Delete buttons stay on screen but are locked, and say
+   * this on hover.
+   */
+  deleteDisabledReason?: string | undefined;
   customElement?: ((item: TBaseModel) => ReactElement) | undefined;
   enableDragAndDrop?: boolean | undefined;
   dragAndDropScope?: string | undefined;
@@ -103,7 +108,13 @@ const StaticModelList: <TBaseModel extends BaseModel>(
               icon={IconProp.Trash}
               buttonStyle={ButtonStyleType.OUTLINE}
               title="Delete"
+              disabled={Boolean(props.deleteDisabledReason)}
+              tooltip={props.deleteDisabledReason}
               onClick={() => {
+                if (props.deleteDisabledReason) {
+                  return;
+                }
+
                 props.onDelete?.(model);
               }}
             />