@oneuptime/common 12.0.14 → 12.0.16

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/FormModal/BasicFormModal.tsx

@@ -5,12 +5,19 @@ import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm, {
   BaseComponentProps as BasicFormComponentProps,
 } from "../Forms/BasicForm";
+import FormAnalyticsName from "../Forms/Utils/FormAnalyticsName";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement, useEffect, useRef, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
   title: string;
+  /*
+   * Identifies this form in the "FORM SUBMIT" analytics event. Falls back to
+   * formProps.name and then to the modal title, so every modal reports a
+   * distinguishable conversion without each caller having to name it.
+   */
+  name?: string | undefined;
   isLoading?: boolean | undefined;
   error?: string | undefined;
   onClose?: undefined | (() => void);
@@ -51,6 +58,11 @@ const BasicFormModal: <T extends GenericObject>(
         {!isLoading && (
           <BasicForm
             {...props.formProps}
+            name={FormAnalyticsName.resolve(
+              props.name,
+              props.formProps.name,
+              props.title,
+            )}
             hideSubmitButton={true}
             ref={formRef}
             onLoadingChange={(isFormLoading: boolean) => {

package/UI/Components/Forms/BasicForm.tsx

@@ -20,6 +20,7 @@ import FormFieldSchemaType from "./Types/FormFieldSchemaType";
 import { FormStep } from "./Types/FormStep";
 import FormValues from "./Types/FormValues";
 import Validation from "./Validation";
+import FormAnalyticsName from "./Utils/FormAnalyticsName";
 import OneUptimeDate from "../../../Types/Date";
 import Dictionary from "../../../Types/Dictionary";
 import { VoidFunction } from "../../../Types/FunctionTypes";
@@ -447,7 +448,18 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           }
         }
 
-        UiAnalytics.capture("FORM SUBMIT: " + props.name);
+        const analyticsName: string | undefined = FormAnalyticsName.resolve(
+          props.name,
+        );
+
+        /*
+         * Unnamed forms are embedded sub-forms (filter builders, argument
+         * editors) rather than conversions. Skip them instead of reporting an
+         * event named after a missing prop.
+         */
+        if (analyticsName) {
+          UiAnalytics.capture("FORM SUBMIT: " + analyticsName);
+        }
 
         props.onSubmit(values, () => {
           setDidSomethingChange(false);

package/UI/Components/Forms/BasicModelForm.tsx

@@ -8,6 +8,7 @@ import BasicForm, {
 import Fields from "./Types/Fields";
 import { FormStep } from "./Types/FormStep";
 import FormValues from "./Types/FormValues";
+import FormAnalyticsName from "./Utils/FormAnalyticsName";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import React, {
   MutableRefObject,
@@ -113,7 +114,7 @@ const BasicModelForm: <TBaseModel extends BaseModel>(
       onValidate={props.onValidate ? props.onValidate : DefaultValidateFunction}
       disableAutofocus={props.disableAutofocus}
       steps={props.steps}
-      name={props.name}
+      name={FormAnalyticsName.resolve(props.name, props.title)}
       onFormStepChange={props.onFormStepChange}
       submitButtonStyleType={props.submitButtonStyleType}
       onSubmit={props.onSubmit}

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 {
@@ -21,6 +26,7 @@ import Field from "./Types/Field";
 import Fields from "./Types/Fields";
 import { FormStep } from "./Types/FormStep";
 import FormValues from "./Types/FormValues";
+import FormAnalyticsName from "./Utils/FormAnalyticsName";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
 import AccessControlModel from "../../../Models/DatabaseModels/DatabaseBaseModel/AccessControlModel";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
@@ -179,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 &&
@@ -845,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>
@@ -854,7 +907,15 @@ const ModelForm: <TBaseModel extends BaseModel>(
         disableAutofocus={props.disableAutofocus}
         model={model}
         id={props.id}
-        name={props.name}
+        name={FormAnalyticsName.resolve(
+          props.name,
+          props.title,
+          model.singularName
+            ? `${
+                props.formType === FormType.Create ? "Create" : "Update"
+              } ${model.singularName}`
+            : undefined,
+        )}
         onFormStepChange={props.onFormStepChange}
         onIsLastFormStep={props.onIsLastFormStep}
         fields={fields}

package/UI/Components/Forms/Utils/FormAnalyticsName.ts

@@ -0,0 +1,39 @@
+/*
+ * Matches "undefined" / "null" as a whole word, which is what a missing value
+ * turns into once it is interpolated into a title (`Duplicate ${undefined}`).
+ * Case sensitive on purpose: titles are written in Title Case, so a real word
+ * like "Null" in a form title is left alone.
+ */
+const STRINGIFIED_EMPTY_VALUE: RegExp = /\b(undefined|null)\b/;
+
+/*
+ * Resolves the human readable name that identifies a form in the
+ * "FORM SUBMIT" analytics event.
+ *
+ * Wrappers around BasicForm pass a chain of candidates - the explicit name
+ * first, then whatever title they already render - and the first usable one
+ * wins. When no candidate is usable the caller is expected to skip the capture
+ * altogether, because an event named after a missing value collapses distinct
+ * conversions into one indistinguishable event.
+ */
+export default class FormAnalyticsName {
+  public static resolve(
+    ...candidates: Array<string | undefined | null>
+  ): string | undefined {
+    for (const candidate of candidates) {
+      if (typeof candidate !== "string") {
+        continue;
+      }
+
+      const name: string = candidate.trim();
+
+      if (!name || STRINGIFIED_EMPTY_VALUE.test(name)) {
+        continue;
+      }
+
+      return name;
+    }
+
+    return undefined;
+  }
+}

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);