@oneuptime/common 12.0.15 → 12.0.17

package/UI/Components/BulkUpdate/BulkArchiveActions.tsx

@@ -4,6 +4,10 @@ import IconProp from "../../../Types/Icon/IconProp";
 import ObjectID from "../../../Types/ObjectID";
 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 {
   BulkActionButtonSchema,
@@ -103,6 +107,35 @@ function useBulkArchiveActions<T extends BaseModel>(
     onBulkActionEnd();
   };
 
+  /*
+   * Bulk actions are handed straight to the table's action bar, which never
+   * looks at permissions - so a viewer on an otherwise gated table could still
+   * relabel, reassign or archive every row they had selected. Each of these
+   * actions is an update of the records it touches.
+   */
+  const updateGate: PermissionGateResult = PermissionGate.check(
+    new config.modelType(),
+    ModelAction.Update,
+  );
+
+  type GateActionFunction = (
+    action: BulkActionButtonSchema<T>,
+  ) => BulkActionButtonSchema<T>;
+
+  const gateAction: GateActionFunction = (
+    action: BulkActionButtonSchema<T>,
+  ): BulkActionButtonSchema<T> => {
+    if (updateGate.isAllowed || !updateGate.disabledReason) {
+      return action;
+    }
+
+    return {
+      ...action,
+      disabled: true,
+      tooltip: updateGate.disabledReason,
+    };
+  };
+
   const archiveAction: BulkActionButtonSchema<T> = {
     title: "Archive",
     icon: IconProp.Archive,
@@ -142,8 +175,8 @@ function useBulkArchiveActions<T extends BaseModel>(
   };
 
   return {
-    archiveBulkActions: [archiveAction],
-    unarchiveBulkActions: [unarchiveAction],
+    archiveBulkActions: [gateAction(archiveAction)],
+    unarchiveBulkActions: [gateAction(unarchiveAction)],
   };
 }
 

package/UI/Components/BulkUpdate/BulkLabelActions.tsx

@@ -18,6 +18,10 @@ import ObjectID from "../../../Types/ObjectID";
 import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import ProjectUtil from "../../Utils/Project";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
 import BasicFormModal from "../FormModal/BasicFormModal";
 import Modal from "../Modal/Modal";
@@ -381,6 +385,35 @@ function useBulkLabelActions<T extends BaseModel>(
     },
   );
 
+  /*
+   * Bulk actions are handed straight to the table's action bar, which never
+   * looks at permissions - so a viewer on an otherwise gated table could still
+   * relabel, reassign or archive every row they had selected. Each of these
+   * actions is an update of the records it touches.
+   */
+  const updateGate: PermissionGateResult = PermissionGate.check(
+    new config.modelType(),
+    ModelAction.Update,
+  );
+
+  type GateActionFunction = (
+    action: BulkActionButtonSchema<T>,
+  ) => BulkActionButtonSchema<T>;
+
+  const gateAction: GateActionFunction = (
+    action: BulkActionButtonSchema<T>,
+  ): BulkActionButtonSchema<T> => {
+    if (updateGate.isAllowed || !updateGate.disabledReason) {
+      return action;
+    }
+
+    return {
+      ...action,
+      disabled: true,
+      tooltip: updateGate.disabledReason,
+    };
+  };
+
   const addLabelsAction: BulkActionButtonSchema<T> = {
     title: "Add Labels",
     buttonStyleType: ButtonStyleType.NORMAL,
@@ -496,7 +529,7 @@ function useBulkLabelActions<T extends BaseModel>(
   );
 
   return {
-    bulkActions: [addLabelsAction, removeLabelsAction],
+    bulkActions: [gateAction(addLabelsAction), gateAction(removeLabelsAction)],
     modals: modals,
   };
 }

package/UI/Components/BulkUpdate/BulkOwnerActions.tsx

@@ -14,6 +14,10 @@ import ObjectID from "../../../Types/ObjectID";
 import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import ProjectUtil from "../../Utils/Project";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
 import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import BasicFormModal from "../FormModal/BasicFormModal";
@@ -411,6 +415,43 @@ function useBulkOwnerActions<T extends BaseModel>(
       return groups;
     }, [userOptions, teamOptions]);
 
+  /*
+   * Bulk actions are handed straight to the table's action bar, which never
+   * looks at permissions - so a viewer on an otherwise gated table could still
+   * reassign every row they had selected. Ownership is stored as rows in the
+   * owner junction tables, so adding an owner is a create there and removing
+   * one is a delete.
+   */
+  const addGate: PermissionGateResult = PermissionGate.check(
+    new config.ownerUserModelType(),
+    ModelAction.Create,
+  );
+
+  const removeGate: PermissionGateResult = PermissionGate.check(
+    new config.ownerUserModelType(),
+    ModelAction.Delete,
+  );
+
+  type GateActionFunction = (
+    action: BulkActionButtonSchema<T>,
+    gate: PermissionGateResult,
+  ) => BulkActionButtonSchema<T>;
+
+  const gateAction: GateActionFunction = (
+    action: BulkActionButtonSchema<T>,
+    gate: PermissionGateResult,
+  ): BulkActionButtonSchema<T> => {
+    if (gate.isAllowed || !gate.disabledReason) {
+      return action;
+    }
+
+    return {
+      ...action,
+      disabled: true,
+      tooltip: gate.disabledReason,
+    };
+  };
+
   const addOwnerAction: BulkActionButtonSchema<T> = {
     title: "Add Owner",
     buttonStyleType: ButtonStyleType.NORMAL,
@@ -507,7 +548,10 @@ function useBulkOwnerActions<T extends BaseModel>(
   );
 
   return {
-    bulkActions: [addOwnerAction, removeOwnerAction],
+    bulkActions: [
+      gateAction(addOwnerAction, addGate),
+      gateAction(removeOwnerAction, removeGate),
+    ],
     modals: modals,
   };
 }

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -50,6 +50,8 @@ export interface BulkActionButtonSchema<T extends GenericObject> {
   className?: string | undefined;
   onClick: (props: BulkActionOnClickProps<T>) => Promise<void>;
   disabled?: boolean | undefined;
+  /* Why the action is unavailable - shown on hover of the locked menu item. */
+  tooltip?: string | undefined;
   shortcutKey?: undefined | ShortcutKey;
   confirmMessage?: ((items: Array<T>) => string) | undefined;
   confirmTitle?: ((items: Array<T>) => string) | undefined;
@@ -214,6 +216,7 @@ const BulkUpdateForm: <T extends GenericObject>(
         className={itemClassName}
         iconClassName={iconClassName}
         isDisabled={isDisabled}
+        tooltip={button.tooltip}
         onClick={() => {
           triggerButtonClick(button);
         }}

package/UI/Components/Button/Button.tsx

@@ -254,6 +254,18 @@ const Button: FunctionComponent<ComponentProps> = ({
 
   buttonStyleCssClass += ` ` + buttonSize;
 
+  const isDisabled: boolean = Boolean(disabled || isLoading);
+
+  /*
+   * A disabled <button> swallows the pointer without dispatching anything, so
+   * the hover never reaches the wrapper that carries the tooltip. Taking the
+   * button out of hit-testing hands the pointer to that wrapper instead. Only
+   * applied when there is a tooltip to show, so nothing else changes.
+   */
+  if (isDisabled && translatedTooltip) {
+    buttonStyleCssClass += ` pointer-events-none`;
+  }
+
   if (className) {
     buttonStyleCssClass += ` ` + className;
   }
@@ -278,10 +290,10 @@ const Button: FunctionComponent<ComponentProps> = ({
         }}
         data-testid={dataTestId}
         type={type}
-        disabled={disabled || isLoading}
+        disabled={isDisabled}
         className={buttonStyleCssClass}
         aria-label={computedAriaLabel}
-        aria-disabled={disabled || isLoading}
+        aria-disabled={isDisabled}
         aria-expanded={ariaExpanded}
         aria-haspopup={ariaHaspopup}
         aria-controls={ariaControls}
@@ -314,6 +326,29 @@ const Button: FunctionComponent<ComponentProps> = ({
   };
 
   if (translatedTooltip) {
+    /*
+     * Tippy makes its child the trigger element, and a disabled control is
+     * both unhoverable and unfocusable - tippy.js even bails out of show()
+     * when the trigger has a `disabled` attribute. Explaining WHY a button is
+     * disabled is exactly when the tooltip matters most, so wrap the disabled
+     * button in an element that can still be hovered and tabbed to.
+     */
+    if (isDisabled) {
+      return (
+        <Tooltip text={translatedTooltip}>
+          <span
+            className="inline-flex"
+            tabIndex={0}
+            data-testid={
+              dataTestId ? `${dataTestId}-disabled-wrapper` : undefined
+            }
+          >
+            {getButton()}
+          </span>
+        </Tooltip>
+      );
+    }
+
     return <Tooltip text={translatedTooltip}>{getButton()}</Tooltip>;
   }
   return getButton();

package/UI/Components/Card/Card.tsx

@@ -9,6 +9,11 @@ export interface CardButtonSchema {
   buttonStyle?: ButtonStyleType | undefined;
   onClick: () => void;
   disabled?: boolean | undefined;
+  /*
+   * Shown on hover. The reason a disabled button is disabled belongs here -
+   * Button keeps a disabled button hoverable precisely so this can be read.
+   */
+  tooltip?: string | undefined;
   icon: IconProp;
   isLoading?: undefined | boolean;
   className?: string | undefined;
@@ -104,6 +109,7 @@ const Card: FunctionComponent<ComponentProps> = (
                                   disabled={
                                     (button as CardButtonSchema).disabled
                                   }
+                                  tooltip={(button as CardButtonSchema).tooltip}
                                   icon={(button as CardButtonSchema).icon}
                                   shortcutKey={
                                     (button as CardButtonSchema).shortcutKey

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -1,5 +1,9 @@
 import API from "../../Utils/API/API";
 import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
 import Card from "../Card/Card";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
@@ -194,17 +198,36 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   const canEdit: boolean =
     isEditable && !isLoading && schemaList.length > 0 && Boolean(model);
 
+  /*
+   * Custom field values live on the record itself, so editing them is an
+   * update of that record. Without the permission the button stays put and
+   * explains itself instead of disappearing.
+   */
+  const updateGate: PermissionGateResult = PermissionGate.check(
+    new props.modelType(),
+    ModelAction.Update,
+  );
+
+  const showEditButton: boolean =
+    canEdit && (updateGate.isAllowed || Boolean(updateGate.disabledReason));
+
   return (
     <Card
       title={props.title}
       description={props.description}
       buttons={
-        canEdit
+        showEditButton
           ? [
               {
                 title: "Edit Fields",
                 buttonStyle: ButtonStyleType.NORMAL,
+                disabled: !updateGate.isAllowed,
+                tooltip: updateGate.disabledReason,
                 onClick: () => {
+                  if (!updateGate.isAllowed) {
+                    return;
+                  }
+
                   setShowModelForm(true);
                 },
                 icon: IconProp.Edit,

package/UI/Components/Dictionary/DictionaryFilterOperator.ts

@@ -450,3 +450,60 @@ export const buildDictionaryValue: (input: {
       return trimmed;
   }
 };
+
+/**
+ * Render a stored dictionary entry value as plain text, for the places that
+ * show a filter rather than edit it (the log viewer's filter chips, tooltips,
+ * summaries).
+ *
+ * Every operator other than `EqualTo` is stored as an operator *instance*
+ * (`Includes`, `Search`, `NotEqual`, ...) — see `buildDictionaryValue`. Those
+ * are objects, and handing one to React as a child throws "Objects are not
+ * valid as a React child (found: object with keys {_values})", which took the
+ * whole monitoring-criteria modal down with it and left no way to reach Save.
+ * Anything that renders an attribute filter as a React child has to come
+ * through here.
+ *
+ * Equality renders bare (`web`) because that is the implicit operator and how
+ * these filters have always read; every other operator is prefixed with its
+ * label so the chip says what it actually matches (`contains web`,
+ * `is any of web, api`, `is not empty`).
+ */
+export const formatDictionaryValueForDisplay: (value: unknown) => string = (
+  value: unknown,
+): string => {
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  const detected: RawValueAndOperator = detectOperatorFromValue(value);
+  const option: DictionaryFilterOperatorOption = getOperatorOption(
+    detected.operator,
+  );
+
+  // IsEmpty / IsNotEmpty carry no value — the label is the whole filter.
+  if (option.hidesValueInput) {
+    return option.label;
+  }
+
+  if (option.expectsMultiValue) {
+    const values: Array<string> = detected.rawValues ?? [];
+
+    /*
+     * An empty membership list is a no-op downstream (StatementGenerator
+     * skips the predicate rather than emitting `IN ()`), so there are no
+     * values to name — show the operator alone rather than a dangling label.
+     */
+    return values.length > 0
+      ? `${option.label} ${values.join(", ")}`
+      : option.label;
+  }
+
+  if (detected.operator === DictionaryFilterOperator.EqualTo) {
+    return detected.rawValue;
+  }
+
+  return detected.rawValue === ""
+    ? option.label
+    : `${option.label} ${detected.rawValue}`;
+};

package/UI/Components/DuplicateModel/DuplicateModel.tsx

@@ -2,6 +2,10 @@ import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import Navigation from "../../Utils/Navigation";
 import { ButtonStyleType } from "../Button/Button";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import Card from "../Card/Card";
 import BasicFormModal from "../FormModal/BasicFormModal";
 import { ModelField } from "../Forms/ModelForm";
@@ -29,6 +33,12 @@ const DuplicateModel: <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
   const model: TBaseModel = new props.modelType();
+
+  /* Duplicating writes a brand new record, so it needs create permission. */
+  const createGate: PermissionGateResult = PermissionGate.check(
+    model,
+    ModelAction.Create,
+  );
   const [showModal, setShowModal] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
@@ -109,7 +119,13 @@ const DuplicateModel: <TBaseModel extends BaseModel>(
           {
             title: `Duplicate ${model.singularName}`,
             buttonStyle: ButtonStyleType.NORMAL,
+            disabled: !createGate.isAllowed,
+            tooltip: createGate.disabledReason,
             onClick: () => {
+              if (!createGate.isAllowed) {
+                return;
+              }
+
               setShowModal(true);
             },
             isLoading: isLoading,

package/UI/Components/Forms/ModelForm.tsx

@@ -5,7 +5,12 @@ import ModelAPI, {
   ModelAPIHttpResponse,
   RequestOptions,
 } from "../../Utils/ModelAPI/ModelAPI";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import PermissionUtil from "../../Utils/Permission";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
 import User from "../../Utils/User";
 import { ButtonStyleType } from "../Button/Button";
 import {
@@ -180,8 +185,14 @@ const ModelForm: <TBaseModel extends BaseModel>(
       return true; // master admin can do anything.
     }
 
-    let userPermissions: Array<Permission> =
-      PermissionUtil.getGlobalPermissions()?.globalPermissions || [];
+    /*
+     * A copy. The Public permission 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 &&
@@ -846,6 +857,47 @@ const ModelForm: <TBaseModel extends BaseModel>(
     );
   }
 
+  /*
+   * A create form for a model the viewer cannot create is worse than no form:
+   * the per-field access control above strips every column, so the wizard
+   * renders empty steps that all read as complete, and the submit fails with
+   * whatever the server happens to validate first - which is how creating a
+   * monitor as a Viewer produced "Monitor type required to create monitor"
+   * with not a word about permissions (issue #3306). Say the real reason.
+   *
+   * Deliberately narrow, because a false positive here blanks a page:
+   *
+   *  - create only. An update form is reached through an Edit button that is
+   *    gated already, and gating the form as well only risks a dead end.
+   *  - only when the form posts to the model's own CRUD endpoint. Sign-in,
+   *    sign-up, password reset and status page subscribe are all ModelForms
+   *    with formType Create that submit somewhere else entirely; the model's
+   *    create permission has nothing to do with whether the visitor may use
+   *    them, and a signed-in user opening a status page in the same browser
+   *    would otherwise be locked out of its login form by an unrelated
+   *    project permission.
+   *  - never for a model Public may create, which is the marker for "anybody
+   *    may do this".
+   */
+  const isModelCrudCreate: boolean =
+    props.formType === FormType.Create && !props.createOrUpdateApiUrl;
+
+  const isPublicCreate: boolean = PermissionGate.getModelPermissions(
+    model,
+    ModelAction.Create,
+  ).includes(Permission.Public);
+
+  if (isModelCrudCreate && !isPublicCreate) {
+    const createGate: PermissionGateResult = PermissionGate.check(
+      model,
+      ModelAction.Create,
+    );
+
+    if (!createGate.isAllowed && createGate.disabledReason) {
+      return <ErrorMessage message={createGate.disabledReason} />;
+    }
+  }
+
   return (
     <div>
       <BasicModelForm<TBaseModel>

package/UI/Components/List/ListRow.tsx

@@ -120,7 +120,13 @@ const ListRow: ListRowFunction = <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/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) => {