@oneuptime/common 11.7.4 → 12.0.1

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/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,131 @@ 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}
+              />
+            );
+          },
+        )}
+      </div>
+    );
+  };
+
+  /*
+   * Relation columns arrive as whole model instances. React throws (and takes
+   * the entire page down with it) when handed one as a child, so every object
+   * that reaches the renderer is reduced to a label with these keys, in order.
+   */
+  const entityLabelKeys: Array<string> = [
+    "name",
+    "title",
+    "label",
+    "email",
+    "slug",
+    "value",
+  ];
+
+  type GetEntityLabelFunction = (entity: unknown) => string;
+
+  const getEntityLabel: GetEntityLabelFunction = (entity: unknown): string => {
+    if (entity === null || entity === undefined) {
+      return "";
+    }
+
+    if (entity instanceof DatabaseProperty) {
+      return entity.toString();
+    }
+
+    if (typeof entity !== "object") {
+      return String(entity);
+    }
+
+    for (const key of entityLabelKeys) {
+      const value: unknown = (entity as Dictionary<unknown>)[key];
+
+      if (value === null || value === undefined || value === "") {
+        continue;
+      }
+
+      if (value instanceof DatabaseProperty) {
+        return value.toString();
+      }
+
+      if (typeof value !== "object") {
+        return String(value);
+      }
+    }
+
+    return "";
+  };
+
+  type GetEntityColorFunction = (entity: unknown) => Color | string | undefined;
+
+  const getEntityColor: GetEntityColorFunction = (
+    entity: unknown,
+  ): Color | string | undefined => {
+    if (!entity || typeof entity !== "object") {
+      return undefined;
+    }
+
+    const color: unknown = (entity as Dictionary<unknown>)["color"];
+
+    if (color instanceof Color || typeof color === "string") {
+      return color;
+    }
+
+    return undefined;
+  };
+
+  type GetEntityViewerFunction = (entity: unknown) => ReactElement | string;
+
+  const getEntityViewer: GetEntityViewerFunction = (
+    entity: unknown,
+  ): ReactElement | string => {
+    const label: string = getEntityLabel(entity);
+
+    if (!label) {
+      // Fall through to the placeholder the field already declares.
+      return "";
+    }
+
+    return <DropdownValueBadge label={label} color={getEntityColor(entity)} />;
+  };
+
+  type GetEntityArrayViewerFunction = (
+    entities: Array<unknown>,
+  ) => ReactElement | string;
+
+  const getEntityArrayViewer: GetEntityArrayViewerFunction = (
+    entities: Array<unknown>,
+  ): ReactElement | string => {
+    const labelled: Array<{ label: string; entity: unknown }> = entities
+      .map((entity: unknown) => {
+        return { label: getEntityLabel(entity), entity: entity };
+      })
+      .filter((item: { label: string; entity: unknown }) => {
+        return Boolean(item.label);
+      });
+
+    if (labelled.length === 0) {
+      return "";
+    }
+
+    return (
+      <div className="flex flex-wrap gap-1.5">
+        {labelled.map(
+          (
+            item: { label: string; entity: unknown },
+            index: number,
+          ): ReactElement => {
+            return (
+              <DropdownValueBadge
+                key={`${item.label}-${index}`}
+                label={item.label}
+                color={getEntityColor(item.entity)}
+              />
             );
           },
         )}
@@ -499,6 +606,16 @@ const Detail: DetailFunction = <T extends GenericObject>(
       );
     }
 
+    if (data && field.fieldType === FieldType.Entity) {
+      data = getEntityViewer(data);
+    }
+
+    if (data && field.fieldType === FieldType.EntityArray) {
+      data = getEntityArrayViewer(
+        Array.isArray(data) ? (data as Array<unknown>) : [data],
+      );
+    }
+
     if (data && field.fieldType === FieldType.HiddenText) {
       data = (
         <HiddenText
@@ -621,6 +738,31 @@ const Detail: DetailFunction = <T extends GenericObject>(
       data = data.toString();
     }
 
+    /*
+     * Last resort. Anything still an object here is something no field type
+     * claimed - usually a relation column declared without FieldType.Entity.
+     * Rendering it would throw "Objects are not valid as a React child" and
+     * blank the whole page, so label it instead and log the misconfiguration.
+     */
+    if (data && typeof data === "object" && !React.isValidElement(data)) {
+      Logger.error(
+        "Detail: no field type renders the value of '" +
+          fieldKeyStr +
+          "'. Set fieldType (FieldType.Entity for relations) or getElement on the field.",
+      );
+
+      data = Array.isArray(data)
+        ? (data as Array<unknown>)
+            .map((entity: unknown) => {
+              return getEntityLabel(entity);
+            })
+            .filter((label: string) => {
+              return Boolean(label);
+            })
+            .join(", ")
+        : getEntityLabel(data);
+    }
+
     // Determine style-based classes
     const styleType: DetailStyle = props.style || DetailStyle.Default;
     const isCardStyle: boolean = styleType === DetailStyle.Card;

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;