@oneuptime/common 11.7.3 → 12.0.0

package/UI/Components/BulkUpdate/BulkOwnerActions.tsx

@@ -415,8 +415,18 @@ function useBulkOwnerActions<T extends BaseModel>(
     title: "Add Owner",
     buttonStyleType: ButtonStyleType.NORMAL,
     icon: IconProp.UserPlus,
+    /*
+     * The two modals are independent booleans rendered as sibling
+     * branches, so nothing in the hook keeps them mutually exclusive —
+     * only the modal backdrop covering the action bar does, which is a
+     * property of a different component. Resetting the sibling here makes
+     * the invariant local: two stacked dialogs would share one
+     * bulkActionProps, and whichever submitted first would null it and
+     * leave the other silently inert.
+     */
     onClick: async (actionProps: BulkActionOnClickProps<T>): Promise<void> => {
       setBulkActionProps(actionProps);
+      setShowRemoveModal(false);
       setShowAddModal(true);
     },
   };
@@ -427,6 +437,7 @@ function useBulkOwnerActions<T extends BaseModel>(
     icon: IconProp.UserMinus,
     onClick: async (actionProps: BulkActionOnClickProps<T>): Promise<void> => {
       setBulkActionProps(actionProps);
+      setShowAddModal(false);
       setShowRemoveModal(true);
     },
   };

package/UI/Components/CodeEditor/CodeEditor.tsx

@@ -32,6 +32,22 @@ export interface ComponentProps {
   ariaLabelledby?: string | undefined;
 }
 
+/*
+ * Callers hand us `any` through Form's currentValues, so a non-string can
+ * still reach a prop typed as string.
+ */
+function toEditorText(value: string | undefined): string {
+  if (value === undefined || value === null) {
+    return "";
+  }
+
+  if (typeof value !== "string") {
+    return JSON.stringify(value, null, 4);
+  }
+
+  return value;
+}
+
 const CodeEditor: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -42,15 +58,25 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
   const editorRef: React.MutableRefObject<any> = useRef<any>(null);
   const theme: Theme = useTheme();
 
-  useEffect(() => {
-    let value: string | undefined = props.value;
-
-    if (value && typeof value !== "string") {
-      value = JSON.stringify(value, null, 4);
-    }
+  /*
+   * `value` is the controlled prop; `initialValue` only seeds an uncontrolled
+   * editor. Both used to be synced from their own useEffect, and because
+   * effects run in declaration order the `initialValue` one ran last on mount
+   * and reset the state to "" - so a caller that passed only `value` mounted
+   * an empty editor even though it had text to show. Seed the state on the
+   * first render and keep the precedence in a single effect.
+   */
+  const [value, setValue] = useState<string>(() => {
+    return toEditorText(props.value ?? props.initialValue);
+  });
 
-    setValue(value || "");
-  }, [props.value]);
+  useEffect(() => {
+    setValue(
+      toEditorText(
+        props.value === undefined ? props.initialValue : props.value,
+      ),
+    );
+  }, [props.value, props.initialValue]);
 
   useEffect(() => {
     if (props.placeholder) {
@@ -95,8 +121,6 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
       "block w-full rounded-md border bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-red-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 sm:text-sm border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500";
   }
 
-  const [value, setValue] = useState<string>("");
-
   // Handle spell check configuration for Monaco Editor
   useEffect(() => {
     if (editorRef.current && props.type === CodeType.Markdown) {
@@ -112,16 +136,6 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
     }
   }, [props.disableSpellCheck, props.type]);
 
-  useEffect(() => {
-    let initialValue: string | undefined = props.initialValue;
-
-    if (initialValue && typeof initialValue !== "string") {
-      initialValue = JSON.stringify(initialValue, null, 4);
-    }
-
-    setValue(initialValue || "");
-  }, [props.initialValue]);
-
   return (
     <div
       data-testid={props.dataTestId}

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -11,6 +11,11 @@ import BaseModel, {
   DatabaseBaseModelType,
 } from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
+import {
+  CustomFieldDropdownOption,
+  parseCustomFieldDropdownOptions,
+} from "../../../Types/CustomField/CustomFieldDropdownOption";
+import Color from "../../../Types/Color";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -22,20 +27,20 @@ import useAsyncEffect from "use-async-effect";
 const parseDropdownOptions: (value: unknown) => Array<DropdownOption> = (
   value: unknown,
 ): Array<DropdownOption> => {
-  if (typeof value !== "string" || !value) {
-    return [];
-  }
-  return value
-    .split("\n")
-    .map((line: string) => {
-      return line.trim();
-    })
-    .filter((line: string) => {
-      return line.length > 0;
-    })
-    .map((line: string) => {
-      return { label: line, value: line };
-    });
+  return parseCustomFieldDropdownOptions(value).map(
+    (option: CustomFieldDropdownOption): DropdownOption => {
+      const dropdownOption: DropdownOption = {
+        label: option.value,
+        value: option.value,
+      };
+
+      if (option.color) {
+        dropdownOption.color = Color.fromString(option.color);
+      }
+
+      return dropdownOption;
+    },
+  );
 };
 
 export interface ComponentProps {

package/UI/Components/CustomFields/DropdownOptionsInput.tsx

@@ -1,5 +1,12 @@
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import ColorPicker from "../Forms/Fields/ColorPicker";
 import Input, { InputType } from "../Input/Input";
+import Color from "../../../Types/Color";
+import {
+  CustomFieldDropdownOption,
+  parseCustomFieldDropdownOptions,
+  serializeCustomFieldDropdownOptions,
+} from "../../../Types/CustomField/CustomFieldDropdownOption";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, {
   FunctionComponent,
@@ -18,49 +25,51 @@ export interface ComponentProps {
   onBlur?: (() => void) | undefined;
 }
 
-const parseValue: (value: string | undefined) => Array<string> = (
-  value: string | undefined,
-): Array<string> => {
-  if (!value) {
-    return [];
-  }
-  return value
-    .split("\n")
-    .map((line: string) => {
-      return line.trim();
-    })
-    .filter((line: string) => {
-      return line.length > 0;
-    });
-};
-
-const serializeValue: (options: Array<string>) => string = (
-  options: Array<string>,
-): string => {
-  return options
-    .map((option: string) => {
-      return option.trim();
-    })
-    .filter((option: string) => {
-      return option.length > 0;
-    })
-    .join("\n");
-};
+interface EditableDropdownOption extends CustomFieldDropdownOption {
+  id: number;
+}
 
 const DropdownOptionsInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [options, setOptions] = useState<Array<string>>(() => {
-    const parsed: Array<string> = parseValue(props.initialValue);
-    return parsed.length > 0 ? parsed : [""];
+  const nextIdRef: MutableRefObject<number> = useRef<number>(0);
+
+  const createEditableOption: (
+    option?: CustomFieldDropdownOption,
+  ) => EditableDropdownOption = (
+    option?: CustomFieldDropdownOption,
+  ): EditableDropdownOption => {
+    const editableOption: EditableDropdownOption = {
+      id: nextIdRef.current,
+      value: option?.value || "",
+    };
+    nextIdRef.current += 1;
+
+    if (option?.color) {
+      editableOption.color = option.color;
+    }
+
+    return editableOption;
+  };
+
+  const [options, setOptions] = useState<Array<EditableDropdownOption>>(() => {
+    const parsed: Array<CustomFieldDropdownOption> =
+      parseCustomFieldDropdownOptions(props.initialValue);
+    return parsed.length > 0
+      ? parsed.map((option: CustomFieldDropdownOption) => {
+          return createEditableOption(option);
+        })
+      : [createEditableOption()];
   });
 
   const lastEmittedRef: MutableRefObject<string> = useRef<string>(
-    serializeValue(parseValue(props.initialValue)),
+    serializeCustomFieldDropdownOptions(
+      parseCustomFieldDropdownOptions(props.initialValue),
+    ),
   );
 
   useEffect(() => {
-    const serialized: string = serializeValue(options);
+    const serialized: string = serializeCustomFieldDropdownOptions(options);
     if (serialized !== lastEmittedRef.current) {
       lastEmittedRef.current = serialized;
       if (props.onChange) {
@@ -69,47 +78,102 @@ const DropdownOptionsInput: FunctionComponent<ComponentProps> = (
     }
   }, [options]);
 
-  type UpdateAtFn = (index: number, value: string) => void;
-  const updateAt: UpdateAtFn = (index: number, value: string): void => {
-    setOptions((prev: Array<string>) => {
-      const next: Array<string> = [...prev];
-      next[index] = value;
+  type UpdateAtFunction = (
+    id: number,
+    update: Partial<CustomFieldDropdownOption>,
+  ) => void;
+  const updateAt: UpdateAtFunction = (
+    id: number,
+    update: Partial<CustomFieldDropdownOption>,
+  ): void => {
+    setOptions((previousOptions: Array<EditableDropdownOption>) => {
+      return previousOptions.map((option: EditableDropdownOption) => {
+        if (option.id !== id) {
+          return option;
+        }
+
+        return {
+          ...option,
+          ...update,
+        };
+      });
+    });
+  };
+
+  type UpdateColorAtFunction = (id: number, color: Color | null) => void;
+  const updateColorAt: UpdateColorAtFunction = (
+    id: number,
+    color: Color | null,
+  ): void => {
+    setOptions((previousOptions: Array<EditableDropdownOption>) => {
+      const next: Array<EditableDropdownOption> = previousOptions.map(
+        (option: EditableDropdownOption) => {
+          if (option.id !== id) {
+            return option;
+          }
+
+          const updatedOption: EditableDropdownOption = {
+            id: option.id,
+            value: option.value,
+          };
+
+          if (color) {
+            updatedOption.color = color.toString();
+          }
+
+          return updatedOption;
+        },
+      );
+
       return next;
     });
   };
 
-  type RemoveAtFn = (index: number) => void;
-  const removeAt: RemoveAtFn = (index: number): void => {
-    setOptions((prev: Array<string>) => {
-      const next: Array<string> = prev.filter((_: string, i: number) => {
-        return i !== index;
-      });
-      return next.length > 0 ? next : [""];
+  type RemoveAtFn = (id: number) => void;
+  const removeAt: RemoveAtFn = (id: number): void => {
+    setOptions((previousOptions: Array<EditableDropdownOption>) => {
+      const next: Array<EditableDropdownOption> = previousOptions.filter(
+        (option: EditableDropdownOption) => {
+          return option.id !== id;
+        },
+      );
+      return next.length > 0 ? next : [createEditableOption()];
     });
   };
 
   type AddOptionFn = () => void;
   const addOption: AddOptionFn = (): void => {
-    setOptions((prev: Array<string>) => {
-      return [...prev, ""];
+    setOptions((previousOptions: Array<EditableDropdownOption>) => {
+      return [...previousOptions, createEditableOption()];
     });
   };
 
   return (
     <div>
-      <div className="space-y-2">
-        {options.map((value: string, index: number) => {
+      <div className="space-y-3">
+        {options.map((option: EditableDropdownOption, index: number) => {
           return (
-            <div key={index} className="flex items-center gap-2">
+            <div
+              key={option.id}
+              className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 sm:grid-cols-[auto_minmax(0,1fr)_minmax(9rem,12rem)_auto]"
+            >
               <div className="flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-xs font-medium text-gray-500">
                 {index + 1}
               </div>
-              <div className="flex-1">
+              <div className="min-w-0">
+                <span
+                  id={`dropdown-option-value-${option.id}-label`}
+                  className="sr-only"
+                >
+                  Dropdown option {index + 1}
+                </span>
                 <Input
-                  value={value}
+                  value={option.value}
+                  dataTestId={`dropdown-option-value-${index}`}
+                  ariaLabelledby={`dropdown-option-value-${option.id}-label`}
                   placeholder={props.placeholder || `Option ${index + 1}`}
                   onChange={(newValue: string) => {
-                    updateAt(index, newValue);
+                    updateAt(option.id, { value: newValue });
                   }}
                   onBlur={() => {
                     if (props.onBlur) {
@@ -119,12 +183,38 @@ const DropdownOptionsInput: FunctionComponent<ComponentProps> = (
                   type={InputType.TEXT}
                 />
               </div>
+              <div className="col-span-2 col-start-2 row-start-2 sm:col-span-1 sm:col-start-3 sm:row-start-1">
+                <span
+                  id={`dropdown-option-color-${option.id}-label`}
+                  className="sr-only"
+                >
+                  Color for {option.value || `option ${index + 1}`}
+                </span>
+                <ColorPicker
+                  dataTestId={`dropdown-option-color-${index}`}
+                  ariaLabelledby={`dropdown-option-color-${option.id}-label`}
+                  placeholder="No color"
+                  value={option.color}
+                  initialValue={
+                    option.color ? Color.fromString(option.color) : undefined
+                  }
+                  onChange={(color: Color | null) => {
+                    updateColorAt(option.id, color);
+                  }}
+                  onBlur={() => {
+                    if (props.onBlur) {
+                      props.onBlur();
+                    }
+                  }}
+                />
+              </div>
               <Button
                 title="Remove"
+                className="col-start-3 row-start-1 sm:col-start-4"
                 buttonStyle={ButtonStyleType.ICON}
                 icon={IconProp.Trash}
                 onClick={() => {
-                  removeAt(index);
+                  removeAt(option.id);
                 }}
               />
             </div>

package/UI/Components/Date/RangeStartAndEndDateView.tsx

@@ -103,7 +103,6 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
           <Modal
             title="Select Time Range"
             description="Choose a quick range or set an exact start and end date & time."
-            icon={IconProp.Clock}
             modalWidth={ModalWidth.Medium}
             submitButtonText="Apply"
             disableSubmitButton={!isSelectionValid(tempStartAndEndDate)}

package/UI/Components/Detail/Detail.tsx

@@ -6,6 +6,7 @@ import ColorViewer from "../ColorViewer/ColorViewer";
 import CopyableButton from "../CopyableButton/CopyableButton";
 import DictionaryOfStringsViewer from "../Dictionary/DictionaryOfStingsViewer";
 import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
+import DropdownValueBadge from "../Dropdown/DropdownValueBadge";
 import HiddenText from "../HiddenText/HiddenText";
 import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import ObjectIDView from "../ObjectID/ObjectIDView";
@@ -113,16 +114,10 @@ const Detail: DetailFunction = <T extends GenericObject>(
     }
 
     return (
-      <span className="inline-flex items-center gap-x-1.5 px-2 py-1 rounded-md bg-indigo-50 text-indigo-700 text-xs font-medium ring-1 ring-inset ring-indigo-700/10">
-        <svg
-          className="h-1.5 w-1.5 fill-indigo-500"
-          viewBox="0 0 6 6"
-          aria-hidden="true"
-        >
-          <circle cx={3} cy={3} r={3} />
-        </svg>
-        {selectedOption.label as string}
-      </span>
+      <DropdownValueBadge
+        label={selectedOption.label as string}
+        color={selectedOption.color}
+      />
     );
   };
 
@@ -171,19 +166,11 @@ const Detail: DetailFunction = <T extends GenericObject>(
               ? (matched.label as string)
               : String(value);
             return (
-              <span
+              <DropdownValueBadge
                 key={`${String(value)}-${index}`}
-                className="inline-flex items-center gap-x-1.5 px-2 py-1 rounded-md bg-indigo-50 text-indigo-700 text-xs font-medium ring-1 ring-inset ring-indigo-700/10"
-              >
-                <svg
-                  className="h-1.5 w-1.5 fill-indigo-500"
-                  viewBox="0 0 6 6"
-                  aria-hidden="true"
-                >
-                  <circle cx={3} cy={3} r={3} />
-                </svg>
-                {label}
-              </span>
+                label={label}
+                color={matched?.color}
+              />
             );
           },
         )}

package/UI/Components/Dropdown/Dropdown.tsx

@@ -1,4 +1,5 @@
 import ObjectID from "../../../Types/ObjectID";
+import DROPDOWN_MENU_Z_INDEX from "./DropdownMenuZIndex";
 import useTranslateValue from "../../Utils/Translation";
 import React, {
   FunctionComponent,
@@ -41,11 +42,7 @@ export interface DropdownOptionGroup {
   options: Array<DropdownOption>;
 }
 
-/*
- * Modal surfaces use z-50. The portalled menu must sit above that stacking
- * context so options are not painted underneath an anchored modal footer.
- */
-export const DROPDOWN_MENU_Z_INDEX: number = 60;
+export { DROPDOWN_MENU_Z_INDEX };
 
 export interface ComponentProps {
   options: Array<DropdownOption | DropdownOptionGroup>;

package/UI/Components/Dropdown/DropdownMenuZIndex.ts

@@ -0,0 +1,7 @@
+/*
+ * Modal surfaces use z-50. Portalled menus and field popups must sit above that
+ * stacking context so they are not painted underneath an anchored modal footer.
+ */
+const DROPDOWN_MENU_Z_INDEX: number = 60;
+
+export default DROPDOWN_MENU_Z_INDEX;

package/UI/Components/Dropdown/DropdownValueBadge.tsx

@@ -0,0 +1,61 @@
+import Color from "../../../Types/Color";
+import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  label: string;
+  color?: Color | string | undefined;
+}
+
+const getColor: (color: Color | string | undefined) => Color | undefined = (
+  color: Color | string | undefined,
+): Color | undefined => {
+  if (!color) {
+    return undefined;
+  }
+
+  const normalizedColor: Color =
+    color instanceof Color ? color : Color.fromString(color);
+
+  try {
+    Color.colorToRgb(normalizedColor);
+    return normalizedColor;
+  } catch {
+    return undefined;
+  }
+};
+
+const DropdownValueBadge: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const color: Color | undefined = getColor(props.color);
+  const style: CSSProperties | undefined = color
+    ? {
+        backgroundColor: color.toString(),
+        borderColor: color.toString(),
+        color: Color.shouldUseDarkText(color) ? "#111827" : "#f9fafb",
+      }
+    : undefined;
+
+  return (
+    <span
+      data-dropdown-value-badge="true"
+      data-dropdown-value-color={color?.toString()}
+      className={`inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ${
+        color
+          ? "border border-solid"
+          : "bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-700/10"
+      }`}
+      style={style}
+    >
+      <span
+        aria-hidden="true"
+        className={`h-1.5 w-1.5 rounded-full ${
+          color ? "bg-current" : "bg-indigo-500"
+        }`}
+      ></span>
+      {props.label}
+    </span>
+  );
+};
+
+export default DropdownValueBadge;

package/UI/Components/EditionLabel/EditionLabel.tsx

@@ -1,5 +1,5 @@
 import Modal, { ModalWidth } from "../Modal/Modal";
-import Icon, { IconType } from "../Icon/Icon";
+import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import Input from "../Input/Input";
 import Button, { ButtonStyleType } from "../Button/Button";
@@ -759,30 +759,6 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
     globalConfig?.enterpriseLicenseKey,
   ]);
 
-  const modalIcon: IconProp = useMemo(() => {
-    if (!IS_ENTERPRISE_EDITION || isConfigLoading) {
-      return IconProp.Cube;
-    }
-
-    if (!licenseValid || isUserLimitBreached) {
-      return IconProp.Alert;
-    }
-
-    return IconProp.ShieldCheck;
-  }, [isConfigLoading, licenseValid, isUserLimitBreached]);
-
-  const modalIconType: IconType = useMemo(() => {
-    if (!IS_ENTERPRISE_EDITION || isConfigLoading) {
-      return IconType.Info;
-    }
-
-    if (!licenseValid || isUserLimitBreached) {
-      return IconType.Danger;
-    }
-
-    return IconType.Success;
-  }, [isConfigLoading, licenseValid, isUserLimitBreached]);
-
   const modalDescription: string = useMemo(() => {
     if (!IS_ENTERPRISE_EDITION) {
       return "You are running the free, open-source build of OneUptime.";
@@ -1326,8 +1302,6 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
         <Modal
           title={editionName}
           description={modalDescription}
-          icon={modalIcon}
-          iconType={modalIconType}
           rightElement={modalRightElement}
           submitButtonText={modalSubmitButtonText}
           closeButtonText="Close"

package/UI/Components/Error/PageError.tsx

@@ -1,8 +1,6 @@
 import Navigation from "../../Utils/Navigation";
 import { ButtonStyleType } from "../Button/Button";
-import { IconType } from "../Icon/Icon";
 import Modal from "../Modal/Modal";
-import IconProp from "../../../Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -22,8 +20,6 @@ const PageError: FunctionComponent<ComponentProps> = (
   return (
     <Modal
       title={props.title || "Oops, something went wrong."}
-      icon={IconProp.Alert}
-      iconType={IconType.Danger}
       onSubmit={() => {
         Navigation.reload();
       }}