@oneuptime/common 12.0.14 → 12.0.16

package/UI/Components/OrderedStatesList/OrderedStatesList.tsx

@@ -2,6 +2,7 @@ import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon, { SizeProp } from "../Icon/Icon";
 import Item from "./Item";
+import Tooltip from "../Tooltip/Tooltip";
 import Skeleton from "../Skeleton/Skeleton";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -10,6 +11,12 @@ import React, { ReactElement } from "react";
 export interface ComponentProps<T extends GenericObject> {
   data: Array<T>;
   onCreateNewItem?: ((order: number) => void) | undefined;
+  /*
+   * When set, the "Add New" affordances stay on screen but do nothing, and
+   * hovering one explains why - the same treatment a locked Create button
+   * gets on every other table.
+   */
+  createDisabledReason?: string | undefined;
   noItemsMessage?: string | ReactElement | undefined;
   error?: string | undefined;
   isLoading?: boolean | undefined;
@@ -40,6 +47,58 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
   const isRefetchingWithData: boolean =
     Boolean(props.isLoading) && props.data.length > 0;
 
+  const isCreateDisabled: boolean = Boolean(props.createDisabledReason);
+
+  type RenderAddNewFunction = (
+    label: string,
+    order: number,
+    className: string,
+    contentClassName: string,
+  ) => ReactElement;
+
+  /*
+   * These are clickable <div>s rather than buttons, so "disabled" has to be
+   * built by hand: drop the pointer cursor and the hover colours, ignore the
+   * click, and hang the reason off a tooltip wrapper.
+   */
+  const renderAddNew: RenderAddNewFunction = (
+    label: string,
+    order: number,
+    className: string,
+    contentClassName: string,
+  ): ReactElement => {
+    const affordance: ReactElement = (
+      <div
+        className={`${className} ${
+          isCreateDisabled
+            ? "cursor-not-allowed opacity-50"
+            : "cursor-pointer hover:bg-gray-50 hover:text-gray-600"
+        }`}
+        aria-disabled={isCreateDisabled}
+        onClick={() => {
+          if (isCreateDisabled) {
+            return;
+          }
+
+          if (props.onCreateNewItem) {
+            props.onCreateNewItem(order);
+          }
+        }}
+      >
+        <div className={contentClassName}>
+          <Icon icon={IconProp.Add} className="m-auto h-5 w-5" />
+          <span className="text-sm ml-2">{label}</span>
+        </div>
+      </div>
+    );
+
+    if (!props.createDisabledReason) {
+      return affordance;
+    }
+
+    return <Tooltip text={props.createDisabledReason}>{affordance}</Tooltip>;
+  };
+
   if (props.isLoading && props.data.length === 0) {
     /*
      * Three card-shaped placeholders where the ordered state cards will
@@ -100,19 +159,12 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
         )}
         {props.onCreateNewItem && (
           <div className="my-10">
-            <div
-              className="m-auto inline-flex items-center cursor-pointer text-gray-400 hover:bg-gray-50 border hover:text-gray-600 rounded-full border-gray-300 p-5"
-              onClick={() => {
-                if (props.onCreateNewItem) {
-                  props.onCreateNewItem(1);
-                }
-              }}
-            >
-              <Icon icon={IconProp.Add} className="h-5 w-5" />
-              <span className="text-sm ml-2">
-                Add New {props.singularLabel}
-              </span>
-            </div>
+            {renderAddNew(
+              `Add New ${props.singularLabel}`,
+              1,
+              "m-auto inline-flex items-center text-gray-400 border rounded-full border-gray-300 p-5",
+              "flex items-center",
+            )}
           </div>
         )}
       </div>
@@ -142,23 +194,14 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
                 isBeginning &&
                 props.shouldAddItemInTheBeginning && (
                   <div className="text-center">
-                    <div
-                      className="m-auto rounded-full items-center cursor-pointer text-gray-400 hover:bg-gray-50 hover:text-gray-600 items-center border border-gray-300 p-5 w-fit"
-                      onClick={() => {
-                        if (props.onCreateNewItem) {
-                          props.onCreateNewItem(
-                            item[props.orderField]
-                              ? (item[props.orderField] as number) + 1
-                              : 0,
-                          );
-                        }
-                      }}
-                    >
-                      <div className="flex text-center">
-                        <Icon icon={IconProp.Add} className="m-auto h-5 w-5" />{" "}
-                        <span className="text-sm ml-2">Add New Item</span>
-                      </div>
-                    </div>
+                    {renderAddNew(
+                      "Add New Item",
+                      item[props.orderField]
+                        ? (item[props.orderField] as number) + 1
+                        : 0,
+                      "m-auto rounded-full items-center text-gray-400 border border-gray-300 p-5 w-fit",
+                      "flex text-center",
+                    )}
 
                     <div className="items-center m-10 ">
                       <Icon
@@ -189,23 +232,14 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
               {props.onCreateNewItem &&
                 ((isEnd && props.shouldAddItemInTheEnd) || !isEnd) && (
                   <div className="text-center">
-                    <div
-                      className="m-auto items-center cursor-pointer text-gray-400 hover:bg-gray-50 border hover:text-gray-600 rounded-full border-gray-300 p-5 w-fit"
-                      onClick={() => {
-                        if (props.onCreateNewItem) {
-                          props.onCreateNewItem(
-                            item[props.orderField]
-                              ? (item[props.orderField] as number) + 1
-                              : 0,
-                          );
-                        }
-                      }}
-                    >
-                      <div className="flex items-center ">
-                        <Icon icon={IconProp.Add} className="m-auto h-5 w-5" />{" "}
-                        <span className="text-sm ml-2">Add New Item</span>
-                      </div>
-                    </div>
+                    {renderAddNew(
+                      "Add New Item",
+                      item[props.orderField]
+                        ? (item[props.orderField] as number) + 1
+                        : 0,
+                      "m-auto items-center text-gray-400 border rounded-full border-gray-300 p-5 w-fit",
+                      "flex items-center",
+                    )}
                     {!isEnd && (
                       <div className="items-center m-10">
                         <Icon

package/UI/Components/ResetObjectID/ResetObjectID.tsx

@@ -1,6 +1,10 @@
 import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import { ButtonStyleType } from "../Button/Button";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import Card from "../Card/Card";
 import ConfirmModal from "../Modal/ConfirmModal";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
@@ -62,6 +66,12 @@ const ResetObjectID: <TBaseModel extends BaseModel>(
   const tableColumnName: string =
     tableColumn?.title || (props.fieldName as string);
 
+  /* Resetting the id writes to the record, so it is an update. */
+  const updateGate: PermissionGateResult = PermissionGate.check(
+    model,
+    ModelAction.Update,
+  );
+
   return (
     <>
       <Card
@@ -71,7 +81,13 @@ const ResetObjectID: <TBaseModel extends BaseModel>(
           {
             title: `${props.title}`,
             buttonStyle: ButtonStyleType.NORMAL,
+            disabled: !updateGate.isAllowed,
+            tooltip: updateGate.disabledReason,
             onClick: () => {
+              if (!updateGate.isAllowed) {
+                return;
+              }
+
               setShowModal(true);
             },
             isLoading: isLoading,

package/UI/Components/SavedViews/SavedViewsFacetSection.tsx

@@ -0,0 +1,242 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import SavedViewsSearchInput from "./SavedViewsSearchInput";
+import SavedViewsShowMoreButton from "./SavedViewsShowMoreButton";
+import {
+  SavedViewListItem,
+  VisibleSavedViews,
+  getVisibleSavedViews,
+  shouldShowSavedViewsSearch,
+} from "./SavedViewsList";
+
+export interface SavedViewsFacetSectionProps {
+  savedViews: Array<SavedViewListItem>;
+  selectedSavedViewId?: string | null | undefined;
+  onSelect?: ((viewId: string) => void) | undefined;
+  /*
+   * Toggling the applied view off has to clear it, not re-apply it. Sidebars
+   * whose host cannot express "no view" omit this, and clicking the applied
+   * row falls back to re-applying it, as it did before.
+   */
+  onClear?: (() => void) | undefined;
+  title?: string | undefined;
+  initialVisibleCount?: number | undefined;
+}
+
+const DEFAULT_TITLE: string = "Saved Views";
+
+/*
+ * Issue 3319: the sidebar's saved views were a bare list with no search and no
+ * limit, sitting directly above facet sections that have both. Ten views in,
+ * the panel is a scroll. This gives the list the same chrome as the facets it
+ * lives with — collapse, search, "+N more" — so the sidebar reads as one thing
+ * rather than one special case followed by the real controls.
+ */
+const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
+  props: SavedViewsFacetSectionProps,
+): ReactElement => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+  const [showAll, setShowAll] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState<string>("");
+
+  const title: string = props.title || DEFAULT_TITLE;
+
+  const showSearch: boolean = shouldShowSavedViewsSearch(
+    props.savedViews.length,
+  );
+
+  /*
+   * A filter the user cannot see is a filter the user cannot cancel. The list
+   * can shrink under a live search — deleting a saved view refetches and
+   * re-renders this section in place — and once it drops below the threshold
+   * the search box unmounts. Reading the query through the box's own
+   * visibility means the surviving views come straight back instead of the
+   * section reporting "No matches found" over a list nothing on screen can
+   * clear.
+   */
+  const activeSearchText: string = showSearch ? searchText : "";
+
+  // ...and the query itself goes, so re-growing the list cannot resurrect it.
+  useEffect(() => {
+    if (!showSearch) {
+      setSearchText("");
+    }
+  }, [showSearch]);
+
+  const visible: VisibleSavedViews<SavedViewListItem> = useMemo(() => {
+    return getVisibleSavedViews<SavedViewListItem>({
+      savedViews: props.savedViews,
+      searchText: activeSearchText,
+      showAll: showAll,
+      visibleCount: props.initialVisibleCount,
+      selectedSavedViewId: props.selectedSavedViewId,
+    });
+  }, [
+    props.savedViews,
+    props.initialVisibleCount,
+    props.selectedSavedViewId,
+    activeSearchText,
+    showAll,
+  ]);
+
+  const appliedCount: number = props.savedViews.some(
+    (view: SavedViewListItem): boolean => {
+      return view.id === props.selectedSavedViewId;
+    },
+  )
+    ? 1
+    : 0;
+
+  return (
+    <div className="border-b border-gray-100 py-2">
+      <button
+        type="button"
+        className="flex w-full items-center justify-between px-2 py-1 text-left"
+        aria-expanded={isExpanded}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
+      >
+        <div className="flex items-center gap-1.5">
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">
+            {title}
+          </span>
+          {appliedCount > 0 && (
+            <span className="inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600">
+              {appliedCount}
+            </span>
+          )}
+        </div>
+        <Icon
+          icon={isExpanded ? IconProp.ChevronDown : IconProp.ChevronRight}
+          className="h-3 w-3 text-gray-400"
+        />
+      </button>
+
+      {isExpanded && (
+        <div className="mt-1 px-1">
+          {showSearch && (
+            <div className="mb-1 px-1">
+              <SavedViewsSearchInput
+                value={searchText}
+                label={`Search ${title.toLowerCase()}...`}
+                onChange={(text: string) => {
+                  setSearchText(text);
+                }}
+              />
+            </div>
+          )}
+
+          {visible.views.map((view: SavedViewListItem) => {
+            const isSelected: boolean = view.id === props.selectedSavedViewId;
+
+            return (
+              <div
+                key={view.id}
+                className="group flex items-center gap-2 py-0.5"
+              >
+                <button
+                  type="button"
+                  className={`flex min-w-0 flex-1 items-center gap-2 rounded px-1.5 py-0.5 text-left transition-colors ${
+                    isSelected
+                      ? "bg-indigo-50 ring-1 ring-indigo-200"
+                      : "hover:bg-gray-50"
+                  }`}
+                  /*
+                   * Spelled out so the row announces as its own name — the
+                   * "Default" pill beside it is decoration, and a screen
+                   * reader should hear the word, not a stray badge.
+                   */
+                  aria-label={
+                    view.isDefault ? `${view.name} (default)` : view.name
+                  }
+                  /*
+                   * The row behaves like a checkbox: clicking the applied
+                   * view takes it off again rather than silently re-applying
+                   * what is already on.
+                   */
+                  aria-pressed={isSelected}
+                  title={
+                    isSelected
+                      ? `Clear saved view: ${view.name}`
+                      : `Apply saved view: ${view.name}`
+                  }
+                  onClick={() => {
+                    if (isSelected && props.onClear) {
+                      props.onClear();
+                      return;
+                    }
+
+                    props.onSelect?.(view.id);
+                  }}
+                >
+                  {isSelected ? (
+                    <span className="flex h-3.5 w-3.5 flex-none items-center justify-center rounded bg-indigo-500">
+                      <Icon
+                        icon={IconProp.Check}
+                        className="h-2.5 w-2.5 text-white"
+                      />
+                    </span>
+                  ) : (
+                    <Icon
+                      icon={IconProp.Bookmark}
+                      className="h-3.5 w-3.5 flex-none text-gray-400"
+                    />
+                  )}
+                  <span
+                    className={`min-w-0 truncate text-[12px] ${
+                      isSelected
+                        ? "font-medium text-indigo-700"
+                        : "text-gray-700"
+                    }`}
+                  >
+                    {view.name}
+                  </span>
+                </button>
+
+                {view.isDefault && (
+                  <span
+                    aria-hidden="true"
+                    className="flex-none rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-700"
+                  >
+                    Default
+                  </span>
+                )}
+              </div>
+            );
+          })}
+
+          {visible.views.length === 0 && (
+            <p className="px-1 py-2 text-[11px] text-gray-400">
+              {visible.isSearching ? "No matches found" : "No saved views yet."}
+            </p>
+          )}
+
+          {/*
+           * A search result is already the whole answer, so neither half of
+           * the toggle belongs beside it — "Show less" would collapse rows
+           * the user explicitly asked to see. hasMore says so on the list's
+           * behalf, and says the same when the list has shrunk to fit.
+           */}
+          <SavedViewsShowMoreButton
+            hasMore={visible.hasMore}
+            hiddenCount={visible.hiddenCount}
+            isShowingAll={showAll}
+            onToggle={() => {
+              setShowAll(!showAll);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SavedViewsFacetSection;

package/UI/Components/SavedViews/SavedViewsList.ts

@@ -0,0 +1,168 @@
+/*
+ * Saved views are listed on more than one surface — the logs facet sidebar,
+ * the logs toolbar dropdown, and the shared telemetry dropdown that traces and
+ * metrics mount. Issue 3319: every one of them rendered the whole list with no
+ * way to narrow it, which is fine at two views and unusable at twenty.
+ *
+ * The facet sections next to them already solved this: search once the list is
+ * long enough to need it, and collapse the tail behind "+N more". Those rules
+ * live here so all three surfaces behave identically and the behaviour can be
+ * tested once, on its own, instead of three times through three renderers.
+ */
+
+// The minimum shape every saved-view surface hands to this module.
+export interface SavedViewListItem {
+  id: string;
+  name: string;
+  isDefault?: boolean;
+}
+
+/*
+ * Below this many views the search box is noise — it costs a row of chrome to
+ * filter a list you can already read at a glance. Matches the facet sections'
+ * threshold so the two never disagree about when a list is "long".
+ */
+export const SAVED_VIEWS_SEARCH_THRESHOLD: number = 6;
+
+// How many rows a collapsed list shows before the "+N more" toggle.
+export const SAVED_VIEWS_DEFAULT_VISIBLE_COUNT: number = 5;
+
+export function shouldShowSavedViewsSearch(totalViews: number): boolean {
+  return totalViews >= SAVED_VIEWS_SEARCH_THRESHOLD;
+}
+
+/*
+ * Case-insensitive substring match on the view's name, same as the facet
+ * search. Whitespace-only input is not a search: it filters nothing rather
+ * than matching nothing.
+ */
+export function filterSavedViewsByName<T extends SavedViewListItem>(
+  savedViews: Array<T>,
+  searchText: string,
+): Array<T> {
+  const query: string = searchText.trim().toLowerCase();
+
+  if (!query) {
+    return savedViews;
+  }
+
+  return savedViews.filter((view: T): boolean => {
+    return (view.name || "").toLowerCase().includes(query);
+  });
+}
+
+export interface GetVisibleSavedViewsInput<T extends SavedViewListItem> {
+  savedViews: Array<T>;
+  searchText: string;
+  showAll: boolean;
+  visibleCount?: number | undefined;
+  /*
+   * The currently applied view, if any. It is pinned into the collapsed slice
+   * even when it sorts past the cut, so a user who applied their twentieth
+   * view still sees which one is on without expanding the list first.
+   */
+  selectedSavedViewId?: string | null | undefined;
+}
+
+export interface VisibleSavedViews<T extends SavedViewListItem> {
+  // The rows to render, in list order.
+  views: Array<T>;
+  // Everything matching the search, whether or not it is currently shown.
+  matchedViews: Array<T>;
+  // True while a non-empty search is applied.
+  isSearching: boolean;
+  // Matching views the list is holding back right now — zero while expanded.
+  hiddenCount: number;
+  /*
+   * Whether the toggle has anything to do at all, in either direction: true
+   * when collapsing would hide rows, which is the same question as whether
+   * expanding revealed any. Unlike hiddenCount it does not go quiet once the
+   * list is expanded, so a consumer can render "Show less" from it and have
+   * that control disappear the moment the list is short enough to fit.
+   */
+  hasMore: boolean;
+}
+
+export function getVisibleSavedViews<T extends SavedViewListItem>(
+  input: GetVisibleSavedViewsInput<T>,
+): VisibleSavedViews<T> {
+  const isSearching: boolean = input.searchText.trim().length > 0;
+  const matchedViews: Array<T> = filterSavedViewsByName(
+    input.savedViews,
+    input.searchText,
+  );
+
+  /*
+   * A search is its own filter — collapsing its results behind "+N more"
+   * would hide the very rows the user just asked for. Same call the facet
+   * sections make, and with nothing held back there is no toggle to offer.
+   */
+  if (isSearching) {
+    return {
+      views: matchedViews,
+      matchedViews: matchedViews,
+      isSearching: true,
+      hiddenCount: 0,
+      hasMore: false,
+    };
+  }
+
+  const visibleCount: number = Math.max(
+    0,
+    input.visibleCount ?? SAVED_VIEWS_DEFAULT_VISIBLE_COUNT,
+  );
+
+  const collapsedViews: Array<T> = matchedViews.slice(0, visibleCount);
+
+  if (input.selectedSavedViewId) {
+    const isSelectedVisible: boolean = collapsedViews.some(
+      (view: T): boolean => {
+        return view.id === input.selectedSavedViewId;
+      },
+    );
+
+    if (!isSelectedVisible) {
+      const selectedView: T | undefined = matchedViews.find(
+        (view: T): boolean => {
+          return view.id === input.selectedSavedViewId;
+        },
+      );
+
+      if (selectedView) {
+        collapsedViews.push(selectedView);
+      }
+    }
+  }
+
+  /*
+   * How much the collapsed list holds back — computed whether or not the list
+   * is currently expanded, because that is the only honest answer to "would
+   * the toggle change anything". Reading it off the expanded state instead is
+   * what leaves a "Show less" sitting under a list that already fits: expand a
+   * twelve-view list, delete down to four, and the control has nothing left to
+   * collapse. Note it counts what a collapse would hide, so a pinned applied
+   * view — already on screen — is not counted, and a six-view list whose sixth
+   * is applied correctly offers no toggle at all.
+   */
+  const hiddenWhenCollapsed: number =
+    matchedViews.length - collapsedViews.length;
+  const hasMore: boolean = hiddenWhenCollapsed > 0;
+
+  if (input.showAll) {
+    return {
+      views: matchedViews,
+      matchedViews: matchedViews,
+      isSearching: false,
+      hiddenCount: 0,
+      hasMore: hasMore,
+    };
+  }
+
+  return {
+    views: collapsedViews,
+    matchedViews: matchedViews,
+    isSearching: false,
+    hiddenCount: hiddenWhenCollapsed,
+    hasMore: hasMore,
+  };
+}

package/UI/Components/SavedViews/SavedViewsSearchInput.tsx

@@ -0,0 +1,46 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface SavedViewsSearchInputProps {
+  value: string;
+  onChange: (searchText: string) => void;
+  // Overrides the default placeholder/accessible name, e.g. per surface.
+  label?: string | undefined;
+  className?: string | undefined;
+}
+
+const DEFAULT_LABEL: string = "Search saved views...";
+
+/*
+ * One search box, shared by every saved-views surface, so the logs sidebar,
+ * the logs dropdown and the telemetry dropdown cannot drift apart in look or
+ * in accessible name. Styling deliberately matches the facet sections' search
+ * input — the sidebar renders the two side by side.
+ */
+const SavedViewsSearchInput: FunctionComponent<SavedViewsSearchInputProps> = (
+  props: SavedViewsSearchInputProps,
+): ReactElement => {
+  const label: string = props.label || DEFAULT_LABEL;
+
+  return (
+    <input
+      type="text"
+      /*
+       * A placeholder is not a label: it disappears the moment the user
+       * types, taking the field's only description with it. The aria-label
+       * carries it for anyone who cannot see the box.
+       */
+      aria-label={label}
+      placeholder={label}
+      value={props.value}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+        props.onChange(event.target.value);
+      }}
+      className={
+        props.className ||
+        "w-full rounded border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700 placeholder-gray-400 outline-none focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200"
+      }
+    />
+  );
+};
+
+export default SavedViewsSearchInput;