@oneuptime/common 10.0.85 → 10.0.88

package/UI/Components/Dictionary/Dictionary.tsx

@@ -11,6 +11,15 @@ import React, {
 } from "react";
 import AutocompleteTextInput from "../AutocompleteTextInput/AutocompleteTextInput";
 import FieldLabelElement from "../Forms/Fields/FieldLabel";
+import {
+  DICTIONARY_FILTER_OPERATOR_OPTIONS,
+  DictionaryEntryValue,
+  DictionaryFilterOperator,
+  DictionaryFilterOperatorOption,
+  buildDictionaryValue,
+  detectOperatorFromValue,
+  getOperatorOption,
+} from "./DictionaryFilterOperator";
 
 export enum ValueType {
   Text = "Text",
@@ -19,10 +28,8 @@ export enum ValueType {
 }
 
 export interface ComponentProps {
-  onChange?:
-    | undefined
-    | ((value: Dictionary<string | boolean | number>) => void);
-  initialValue?: Dictionary<string | boolean | number>;
+  onChange?: undefined | ((value: Dictionary<DictionaryEntryValue>) => void);
+  initialValue?: Dictionary<DictionaryEntryValue>;
   keyPlaceholder?: string;
   valuePlaceholder?: string;
   addButtonSuffix?: string | undefined;
@@ -30,12 +37,21 @@ export interface ComponentProps {
   keys?: Array<string> | undefined;
   valueSuggestions?: Record<string, Array<string>> | undefined;
   onKeySelected?: ((key: string) => void) | undefined;
+  isLoadingKeys?: boolean | undefined;
+  loadingValueKeys?: Array<string> | undefined;
+  /*
+   * When true, render an operator dropdown (=, !=, contains, etc.)
+   * between the key and value inputs. Defaults to false for backwards
+   * compatibility with simple key/value forms.
+   */
+  enableOperators?: boolean | undefined;
 }
 
 interface Item {
   key: string;
   value: string | number | boolean;
   type: ValueType;
+  operator: DictionaryFilterOperator;
 }
 
 const DictionaryForm: FunctionComponent<ComponentProps> = (
@@ -57,12 +73,10 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
   const [data, setData] = useState<Array<Item>>([]);
   const [isInitialValueSet, setIsInitialValueSet] = useState<boolean>(false);
 
-  type UpdateDataFunction = (
-    json: Dictionary<string | number | boolean>,
-  ) => void;
+  type UpdateDataFunction = (json: Dictionary<DictionaryEntryValue>) => void;
 
   const updateData: UpdateDataFunction = (
-    json: Dictionary<string | number | boolean>,
+    json: Dictionary<DictionaryEntryValue>,
   ): void => {
     const newData: Array<Item> = Object.keys(json).map((key: string) => {
       // check if the value type is in data
@@ -73,22 +87,46 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
 
       let valueType: ValueType = valueTypeInData || ValueType.Text;
 
+      const rawEntry: DictionaryEntryValue | undefined = json[key];
+
       if (!valueTypeInData) {
-        if (typeof json[key] === "number") {
+        if (typeof rawEntry === "number") {
           valueType = ValueType.Number;
         }
 
-        if (typeof json[key] === "boolean") {
+        if (typeof rawEntry === "boolean") {
           valueType = ValueType.Boolean;
         }
       }
 
-      const value: string | number | boolean | undefined = json[key];
+      const detected: {
+        operator: DictionaryFilterOperator;
+        rawValue: string;
+      } = detectOperatorFromValue(rawEntry);
+
+      /*
+       * Restore typed values (number/boolean) for the form input from
+       * the stringified raw representation when the column type allows.
+       */
+      let restoredValue: string | number | boolean = detected.rawValue;
+      if (valueType === ValueType.Number && detected.rawValue !== "") {
+        const parsed: number = Number(detected.rawValue);
+        restoredValue = isNaN(parsed) ? detected.rawValue : parsed;
+      } else if (valueType === ValueType.Boolean) {
+        if (typeof rawEntry === "boolean") {
+          restoredValue = rawEntry;
+        } else if (detected.rawValue.toLowerCase() === "true") {
+          restoredValue = true;
+        } else if (detected.rawValue.toLowerCase() === "false") {
+          restoredValue = false;
+        }
+      }
 
       return {
         key: key,
-        value: value === undefined || value === null ? "" : value,
+        value: restoredValue,
         type: valueType,
+        operator: detected.operator,
       };
     });
 
@@ -109,9 +147,35 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
   type OnDataChangeFunction = (data: Array<Item>) => void;
 
   const onDataChange: OnDataChangeFunction = (data: Array<Item>): void => {
-    const result: Dictionary<string | number | boolean> = {};
+    const result: Dictionary<DictionaryEntryValue> = {};
     data.forEach((item: Item) => {
-      result[item.key] = item.value;
+      /*
+       * Non-text types skip the operator system — the existing
+       * numeric/boolean inputs always represent equality.
+       */
+      if (item.type === ValueType.Number) {
+        result[item.key] = item.value as number;
+        return;
+      }
+      if (item.type === ValueType.Boolean) {
+        result[item.key] = item.value as boolean;
+        return;
+      }
+
+      const operatorOption: DictionaryFilterOperatorOption = getOperatorOption(
+        item.operator,
+      );
+      if (operatorOption.hidesValueInput) {
+        result[item.key] = buildDictionaryValue({
+          operator: item.operator,
+          rawValue: "",
+        });
+        return;
+      }
+      result[item.key] = buildDictionaryValue({
+        operator: item.operator,
+        rawValue: String(item.value ?? ""),
+      });
     });
     if (props.onChange) {
       props.onChange(result);
@@ -138,13 +202,36 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
     return "";
   };
 
+  const operatorDropdownOptions: Array<DropdownOption> =
+    DICTIONARY_FILTER_OPERATOR_OPTIONS.map(
+      (option: DictionaryFilterOperatorOption) => {
+        return {
+          label: option.symbol,
+          value: option.operator,
+        };
+      },
+    );
+
   return (
     <div>
       <div>
         {data.map((item: Item, index: number) => {
+          const operatorOption: DictionaryFilterOperatorOption =
+            getOperatorOption(item.operator);
+          const showOperatorSelector: boolean = Boolean(props.enableOperators);
+          const hideValueInput: boolean = Boolean(
+            showOperatorSelector && operatorOption.hidesValueInput,
+          );
+          const valueColumnClass: string = showOperatorSelector
+            ? "ml-1 w-2/5"
+            : "ml-1 w-1/2";
+          const keyColumnClass: string = showOperatorSelector
+            ? "mr-1 w-2/5"
+            : "mr-1 w-1/2";
+
           return (
             <div key={index} className="flex items-start mb-4 last:mb-0">
-              <div className="mr-1 w-1/2">
+              <div className={keyColumnClass}>
                 <div className="mb-1">
                   <FieldLabelElement
                     title="Key"
@@ -157,6 +244,8 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   value={item.key}
                   placeholder={props.keyPlaceholder}
                   suggestions={props.keys}
+                  isLoadingSuggestions={props.isLoadingKeys}
+                  loadingMessage="Loading attributes..."
                   onChange={(value: string) => {
                     const newData: Array<Item> = [...data];
                     newData[index]!.key = value;
@@ -171,9 +260,56 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                 />
               </div>
 
-              <div className="mr-1 ml-1 flex items-center justify-center pt-8">
-                <span className="text-slate-500 text-2xl leading-none">=</span>
-              </div>
+              {showOperatorSelector ? (
+                <div className="mr-1 ml-1 w-1/5 min-w-[120px]">
+                  <div className="mb-1">
+                    <FieldLabelElement
+                      title="Operator"
+                      required={true}
+                      hideOptionalLabel={true}
+                      className="block text-xs text-gray-500 font-normal flex justify-between"
+                    />
+                  </div>
+                  <Dropdown
+                    value={operatorDropdownOptions.find(
+                      (option: DropdownOption) => {
+                        return option.value === item.operator;
+                      },
+                    )}
+                    options={operatorDropdownOptions}
+                    isMultiSelect={false}
+                    onChange={(
+                      selectedOption:
+                        | DropdownValue
+                        | Array<DropdownValue>
+                        | null,
+                    ) => {
+                      const newOperator: DictionaryFilterOperator =
+                        (selectedOption as DictionaryFilterOperator) ||
+                        DictionaryFilterOperator.EqualTo;
+                      const newOperatorOption: DictionaryFilterOperatorOption =
+                        getOperatorOption(newOperator);
+                      const newData: Array<Item> = [...data];
+                      newData[index]!.operator = newOperator;
+                      /*
+                       * Reset the value when switching to a value-less
+                       * operator so we don't ship stale text downstream.
+                       */
+                      if (newOperatorOption.hidesValueInput) {
+                        newData[index]!.value = "";
+                      }
+                      setData(newData);
+                      onDataChange(newData);
+                    }}
+                  />
+                </div>
+              ) : (
+                <div className="mr-1 ml-1 flex items-center justify-center pt-8">
+                  <span className="text-slate-500 text-2xl leading-none">
+                    =
+                  </span>
+                </div>
+              )}
               {valueTypes.length > 1 && (
                 <div className="ml-1 w-1/2">
                   <div className="mb-1">
@@ -209,7 +345,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   />
                 </div>
               )}
-              <div className="ml-1 w-1/2">
+              <div className={valueColumnClass}>
                 <div className="mb-1">
                   <FieldLabelElement
                     title="Value"
@@ -218,15 +354,40 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                     className="block text-xs text-gray-500 font-normal flex justify-between"
                   />
                 </div>
-                {item.type === ValueType.Text && (
+                {hideValueInput && (
+                  <Input
+                    value=""
+                    placeholder={operatorOption.label}
+                    disabled={true}
+                    onChange={() => {
+                      // no-op — IsEmpty/IsNotEmpty have no value
+                    }}
+                  />
+                )}
+                {!hideValueInput && item.type === ValueType.Text && (
                   <AutocompleteTextInput
                     value={item.value.toString()}
-                    placeholder={props.valuePlaceholder}
+                    placeholder={
+                      operatorOption.expectsNumericValue
+                        ? "Number"
+                        : props.valuePlaceholder
+                    }
                     suggestions={
-                      item.key && props.valueSuggestions?.[item.key]
-                        ? props.valueSuggestions[item.key]
-                        : undefined
+                      operatorOption.expectsNumericValue
+                        ? undefined
+                        : item.key && props.valueSuggestions?.[item.key]
+                          ? props.valueSuggestions[item.key]
+                          : undefined
+                    }
+                    isLoadingSuggestions={
+                      operatorOption.expectsNumericValue
+                        ? false
+                        : Boolean(
+                            item.key &&
+                              props.loadingValueKeys?.includes(item.key),
+                          )
                     }
+                    loadingMessage="Loading values..."
                     onChange={(value: string) => {
                       const newData: Array<Item> = [...data];
                       newData[index]!.value = value;
@@ -236,7 +397,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   />
                 )}
 
-                {item.type === ValueType.Number && (
+                {!hideValueInput && item.type === ValueType.Number && (
                   <Input
                     value={item.value.toString()}
                     placeholder={props.valuePlaceholder}
@@ -256,7 +417,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   />
                 )}
 
-                {item.type === ValueType.Boolean && (
+                {!hideValueInput && item.type === ValueType.Boolean && (
                   <Dropdown
                     value={
                       item.value === true
@@ -315,6 +476,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   key: "",
                   value: getDefaultValueForType(valueTypes[0] as ValueType),
                   type: valueTypes[0] as ValueType,
+                  operator: DictionaryFilterOperator.EqualTo,
                 },
               ]);
             }}

package/UI/Components/Dictionary/DictionaryFilterOperator.ts

@@ -0,0 +1,357 @@
+import EqualTo from "../../../Types/BaseDatabase/EqualTo";
+import NotEqual from "../../../Types/BaseDatabase/NotEqual";
+import Search from "../../../Types/BaseDatabase/Search";
+import NotContains from "../../../Types/BaseDatabase/NotContains";
+import StartsWith from "../../../Types/BaseDatabase/StartsWith";
+import EndsWith from "../../../Types/BaseDatabase/EndsWith";
+import GreaterThan from "../../../Types/BaseDatabase/GreaterThan";
+import GreaterThanOrEqual from "../../../Types/BaseDatabase/GreaterThanOrEqual";
+import LessThan from "../../../Types/BaseDatabase/LessThan";
+import LessThanOrEqual from "../../../Types/BaseDatabase/LessThanOrEqual";
+import IsNull from "../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../Types/BaseDatabase/NotNull";
+import { ObjectType } from "../../../Types/JSON";
+
+/*
+ * UI-facing operator identifiers. We store these in the Dictionary form
+ * state and translate to the corresponding backend operator wrapper at
+ * the API boundary so the existing serialization pipeline works.
+ */
+export enum DictionaryFilterOperator {
+  EqualTo = "EqualTo",
+  NotEqual = "NotEqual",
+  Contains = "Contains",
+  NotContains = "NotContains",
+  StartsWith = "StartsWith",
+  EndsWith = "EndsWith",
+  GreaterThan = "GreaterThan",
+  LessThan = "LessThan",
+  GreaterThanOrEqual = "GreaterThanOrEqual",
+  LessThanOrEqual = "LessThanOrEqual",
+  IsEmpty = "IsEmpty",
+  IsNotEmpty = "IsNotEmpty",
+}
+
+export interface DictionaryFilterOperatorOption {
+  operator: DictionaryFilterOperator;
+  label: string;
+  symbol: string;
+  // Operators like IsEmpty/IsNotEmpty don't take a user-supplied value.
+  hidesValueInput?: boolean | undefined;
+  // Numeric operators force a numeric value input.
+  expectsNumericValue?: boolean | undefined;
+}
+
+export const DICTIONARY_FILTER_OPERATOR_OPTIONS: ReadonlyArray<DictionaryFilterOperatorOption> =
+  [
+    {
+      operator: DictionaryFilterOperator.EqualTo,
+      label: "equals",
+      symbol: "=",
+    },
+    {
+      operator: DictionaryFilterOperator.NotEqual,
+      label: "does not equal",
+      symbol: "!=",
+    },
+    {
+      operator: DictionaryFilterOperator.Contains,
+      label: "contains",
+      symbol: "contains",
+    },
+    {
+      operator: DictionaryFilterOperator.NotContains,
+      label: "does not contain",
+      symbol: "does not contain",
+    },
+    {
+      operator: DictionaryFilterOperator.StartsWith,
+      label: "starts with",
+      symbol: "starts with",
+    },
+    {
+      operator: DictionaryFilterOperator.EndsWith,
+      label: "ends with",
+      symbol: "ends with",
+    },
+    {
+      operator: DictionaryFilterOperator.GreaterThan,
+      label: "greater than",
+      symbol: ">",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.GreaterThanOrEqual,
+      label: "greater than or equal",
+      symbol: ">=",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.LessThan,
+      label: "less than",
+      symbol: "<",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.LessThanOrEqual,
+      label: "less than or equal",
+      symbol: "<=",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.IsEmpty,
+      label: "is empty",
+      symbol: "is empty",
+      hidesValueInput: true,
+    },
+    {
+      operator: DictionaryFilterOperator.IsNotEmpty,
+      label: "is not empty",
+      symbol: "is not empty",
+      hidesValueInput: true,
+    },
+  ];
+
+export type DictionaryEntryValue =
+  | string
+  | number
+  | boolean
+  | EqualTo<string>
+  | NotEqual<string>
+  | Search<string>
+  | NotContains<string>
+  | StartsWith<string>
+  | EndsWith<string>
+  | GreaterThan<number>
+  | GreaterThanOrEqual<number>
+  | LessThan<number>
+  | LessThanOrEqual<number>
+  | IsNull
+  | NotNull;
+
+export const getOperatorOption: (
+  operator: DictionaryFilterOperator,
+) => DictionaryFilterOperatorOption = (
+  operator: DictionaryFilterOperator,
+): DictionaryFilterOperatorOption => {
+  return (
+    DICTIONARY_FILTER_OPERATOR_OPTIONS.find(
+      (option: DictionaryFilterOperatorOption) => {
+        return option.operator === operator;
+      },
+    ) ?? DICTIONARY_FILTER_OPERATOR_OPTIONS[0]!
+  );
+};
+
+/*
+ * Detect operator wrapper instances or `_type`-tagged plain objects
+ * (already-deserialized vs raw-from-storage).
+ */
+type ObjectTypeLike = { _type?: string };
+
+const matchesObjectType: (value: unknown, type: ObjectType) => boolean = (
+  value: unknown,
+  type: ObjectType,
+): boolean => {
+  return Boolean(
+    value &&
+      typeof value === "object" &&
+      (value as ObjectTypeLike)._type === type,
+  );
+};
+
+interface RawValueAndOperator {
+  operator: DictionaryFilterOperator;
+  rawValue: string;
+}
+
+/**
+ * Inspect a stored dictionary entry value (which may be a plain string,
+ * a hydrated operator instance, or a raw `{_type, value}` JSON shape)
+ * and recover the operator + display value used to populate the form.
+ */
+export const detectOperatorFromValue: (
+  value: unknown,
+) => RawValueAndOperator = (value: unknown): RawValueAndOperator => {
+  if (value === null || value === undefined) {
+    return {
+      operator: DictionaryFilterOperator.EqualTo,
+      rawValue: "",
+    };
+  }
+
+  if (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return {
+      operator: DictionaryFilterOperator.EqualTo,
+      rawValue: String(value),
+    };
+  }
+
+  if (value instanceof IsNull || matchesObjectType(value, ObjectType.IsNull)) {
+    return { operator: DictionaryFilterOperator.IsEmpty, rawValue: "" };
+  }
+  if (
+    value instanceof NotNull ||
+    matchesObjectType(value, ObjectType.NotNull)
+  ) {
+    return { operator: DictionaryFilterOperator.IsNotEmpty, rawValue: "" };
+  }
+
+  const wrapperValue: string =
+    value instanceof Object && "value" in value
+      ? String(
+          (value as { value?: unknown }).value === undefined ||
+            (value as { value?: unknown }).value === null
+            ? ""
+            : (value as { value?: unknown }).value,
+        )
+      : "";
+
+  if (
+    value instanceof NotEqual ||
+    matchesObjectType(value, ObjectType.NotEqual)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.NotEqual,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof EqualTo ||
+    matchesObjectType(value, ObjectType.EqualTo)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.EqualTo,
+      rawValue: wrapperValue,
+    };
+  }
+  if (value instanceof Search || matchesObjectType(value, ObjectType.Search)) {
+    return {
+      operator: DictionaryFilterOperator.Contains,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof NotContains ||
+    matchesObjectType(value, ObjectType.NotContains)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.NotContains,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof StartsWith ||
+    matchesObjectType(value, ObjectType.StartsWith)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.StartsWith,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof EndsWith ||
+    matchesObjectType(value, ObjectType.EndsWith)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.EndsWith,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof GreaterThan ||
+    matchesObjectType(value, ObjectType.GreaterThan)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.GreaterThan,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof GreaterThanOrEqual ||
+    matchesObjectType(value, ObjectType.GreaterThanOrEqual)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.GreaterThanOrEqual,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof LessThan ||
+    matchesObjectType(value, ObjectType.LessThan)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.LessThan,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof LessThanOrEqual ||
+    matchesObjectType(value, ObjectType.LessThanOrEqual)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.LessThanOrEqual,
+      rawValue: wrapperValue,
+    };
+  }
+
+  // Unknown structure — fall back to bare equality with stringified value.
+  return {
+    operator: DictionaryFilterOperator.EqualTo,
+    rawValue: wrapperValue,
+  };
+};
+
+/**
+ * Build the actual stored dictionary value for an operator + raw value.
+ * `EqualTo` produces a bare string for backwards compatibility with
+ * existing saved filters; everything else produces an operator wrapper
+ * instance.
+ */
+export const buildDictionaryValue: (input: {
+  operator: DictionaryFilterOperator;
+  rawValue: string;
+}) => DictionaryEntryValue = (input: {
+  operator: DictionaryFilterOperator;
+  rawValue: string;
+}): DictionaryEntryValue => {
+  const { operator, rawValue } = input;
+  const trimmed: string = rawValue ?? "";
+
+  switch (operator) {
+    case DictionaryFilterOperator.EqualTo:
+      return trimmed;
+    case DictionaryFilterOperator.NotEqual:
+      return new NotEqual<string>(trimmed);
+    case DictionaryFilterOperator.Contains:
+      /*
+       * Statement.serialize already wraps Search instances with `%...%`,
+       * so pass the bare needle here.
+       */
+      return new Search<string>(trimmed);
+    case DictionaryFilterOperator.NotContains:
+      return new NotContains<string>(trimmed);
+    case DictionaryFilterOperator.StartsWith:
+      return new StartsWith<string>(trimmed);
+    case DictionaryFilterOperator.EndsWith:
+      return new EndsWith<string>(trimmed);
+    case DictionaryFilterOperator.GreaterThan:
+      return new GreaterThan<number>(Number(trimmed));
+    case DictionaryFilterOperator.GreaterThanOrEqual:
+      return new GreaterThanOrEqual<number>(Number(trimmed));
+    case DictionaryFilterOperator.LessThan:
+      return new LessThan<number>(Number(trimmed));
+    case DictionaryFilterOperator.LessThanOrEqual:
+      return new LessThanOrEqual<number>(Number(trimmed));
+    case DictionaryFilterOperator.IsEmpty:
+      return new IsNull();
+    case DictionaryFilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return trimmed;
+  }
+};