@oneuptime/common 10.0.68 → 10.0.70

package/UI/Components/Filters/EntityFilter.tsx

@@ -2,8 +2,15 @@ import Dropdown, { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
 import FieldType from "../Types/FieldType";
 import Filter from "./Types/Filter";
 import FilterData from "./Types/FilterData";
+import FilterOperator from "./Types/FilterOperator";
+import OperatorSelector from "./OperatorSelector";
 import GenericObject from "../../../Types/GenericObject";
-import React, { ReactElement } from "react";
+import Includes from "../../../Types/BaseDatabase/Includes";
+import IncludesAll from "../../../Types/BaseDatabase/IncludesAll";
+import IncludesNone from "../../../Types/BaseDatabase/IncludesNone";
+import IsNull from "../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../Types/BaseDatabase/NotNull";
+import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
   filter: Filter<T>;
@@ -15,56 +22,222 @@ type EntityFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ) => ReactElement;
 
+const ENTITY_ARRAY_OPERATORS: Array<FilterOperator> = [
+  FilterOperator.HasAnyOf,
+  FilterOperator.HasAllOf,
+  FilterOperator.HasNoneOf,
+  FilterOperator.IsEmpty,
+  FilterOperator.IsNotEmpty,
+];
+
+const ENTITY_OPERATORS: Array<FilterOperator> = [
+  FilterOperator.Is,
+  FilterOperator.IsNot,
+  FilterOperator.IsEmpty,
+  FilterOperator.IsNotEmpty,
+];
+
+type EntityState = {
+  operator: FilterOperator;
+  values: Array<string>;
+};
+
+const detectArrayState = (rawValue: unknown): EntityState => {
+  if (rawValue instanceof IncludesAll) {
+    return {
+      operator: FilterOperator.HasAllOf,
+      values: (rawValue.values as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (rawValue instanceof IncludesNone) {
+    return {
+      operator: FilterOperator.HasNoneOf,
+      values: (rawValue.values as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (rawValue instanceof Includes) {
+    return {
+      operator: FilterOperator.HasAnyOf,
+      values: (rawValue.values as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (Array.isArray(rawValue)) {
+    return {
+      operator: FilterOperator.HasAnyOf,
+      values: (rawValue as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (rawValue instanceof IsNull) {
+    return { operator: FilterOperator.IsEmpty, values: [] };
+  }
+  if (rawValue instanceof NotNull) {
+    return { operator: FilterOperator.IsNotEmpty, values: [] };
+  }
+  return { operator: FilterOperator.HasAnyOf, values: [] };
+};
+
+const detectSingleState = (rawValue: unknown): EntityState => {
+  if (rawValue instanceof IsNull) {
+    return { operator: FilterOperator.IsEmpty, values: [] };
+  }
+  if (rawValue instanceof NotNull) {
+    return { operator: FilterOperator.IsNotEmpty, values: [] };
+  }
+  if (typeof rawValue === "string" && rawValue) {
+    return { operator: FilterOperator.Is, values: [rawValue] };
+  }
+  return { operator: FilterOperator.Is, values: [] };
+};
+
+const buildArrayValue = (state: EntityState): unknown => {
+  switch (state.operator) {
+    case FilterOperator.HasAllOf:
+      return state.values.length > 0 ? new IncludesAll(state.values) : undefined;
+    case FilterOperator.HasNoneOf:
+      return state.values.length > 0 ? new IncludesNone(state.values) : undefined;
+    case FilterOperator.HasAnyOf:
+      return state.values.length > 0 ? state.values : undefined;
+    case FilterOperator.IsEmpty:
+      return new IsNull();
+    case FilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return undefined;
+  }
+};
+
+const buildSingleValue = (state: EntityState): unknown => {
+  switch (state.operator) {
+    case FilterOperator.Is:
+      return state.values[0] || undefined;
+    case FilterOperator.IsNot:
+      // Use IncludesNone with single-item array to represent "is not".
+      return state.values[0]
+        ? new IncludesNone([state.values[0]])
+        : undefined;
+    case FilterOperator.IsEmpty:
+      return new IsNull();
+    case FilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return undefined;
+  }
+};
+
 const EntityFilter: EntityFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
   const filter: Filter<T> = props.filter;
-  const filterData: FilterData<T> = { ...props.filterData };
+
+  if (
+    filter.type !== FieldType.Entity &&
+    filter.type !== FieldType.EntityArray
+  ) {
+    return <></>;
+  }
+
+  if (!filter.filterDropdownOptions) {
+    return <></>;
+  }
+
+  const isArray: boolean = filter.type === FieldType.EntityArray;
+  const detectedState: EntityState = isArray
+    ? detectArrayState(props.filterData[filter.key])
+    : detectSingleState(props.filterData[filter.key]);
+
+  // Hold the operator locally so the user's choice persists even when no
+  // values are selected yet (otherwise `buildArrayValue` would return
+  // undefined, filterData wouldn't carry the operator, and the next render
+  // would reset back to the default).
+  const [localOperator, setLocalOperator] = useState<FilterOperator>(
+    detectedState.operator,
+  );
+
+  // When the external filter data changes and can unambiguously tell us
+  // which operator it represents, sync local state.
+  useEffect(() => {
+    const raw: unknown = props.filterData[filter.key];
+    if (raw !== undefined && raw !== null) {
+      setLocalOperator(detectedState.operator);
+    }
+    // Intentionally only re-run when the underlying filter data reference
+    // changes — not on every detectedState re-computation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.filterData[filter.key]]);
+
+  const operator: FilterOperator = localOperator;
+  const state: EntityState = { ...detectedState, operator };
+
+  const valuelessOperator: boolean =
+    operator === FilterOperator.IsEmpty ||
+    operator === FilterOperator.IsNotEmpty;
 
   const dropdownValues: Array<DropdownOption> =
-    props.filter.filterDropdownOptions?.filter((option: DropdownOption) => {
-      if (filterData[filter.key] instanceof Array) {
-        return (filterData[filter.key] as Array<string>)
-          .map((value: string) => {
-            return value.toString();
-          })
-          .includes(option.value.toString());
-      }
-
-      return option.value.toString() === filterData[filter.key]?.toString();
+    filter.filterDropdownOptions?.filter((option: DropdownOption) => {
+      return state.values.includes(option.value.toString());
     }) || [];
 
-  if (
-    (filter.type === FieldType.Entity ||
-      filter.type === FieldType.EntityArray) &&
-    filter.filterDropdownOptions
-  ) {
-    return (
-      <Dropdown
-        options={filter.filterDropdownOptions}
-        onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
-          if (!filter.key) {
-            return;
-          }
-
-          if (!value || (Array.isArray(value) && value.length === 0)) {
-            delete filterData[filter.key];
-          } else {
-            filterData[filter.key] = value;
-          }
-
-          if (props.onFilterChanged) {
-            props.onFilterChanged(filterData);
-          }
+  type ApplyFunction = (nextState: EntityState) => void;
+
+  const apply: ApplyFunction = (nextState: EntityState): void => {
+    if (!filter.key) {
+      return;
+    }
+    setLocalOperator(nextState.operator);
+    const next: FilterData<T> = { ...props.filterData };
+    const built: unknown = isArray
+      ? buildArrayValue(nextState)
+      : buildSingleValue(nextState);
+    if (built === undefined) {
+      delete next[filter.key];
+    } else {
+      next[filter.key] = built as any;
+    }
+    props.onFilterChanged?.(next);
+  };
+
+  return (
+    <div className="flex gap-2 items-start">
+      <OperatorSelector
+        value={operator}
+        options={isArray ? ENTITY_ARRAY_OPERATORS : ENTITY_OPERATORS}
+        onChange={(nextOperator: FilterOperator) => {
+          apply({ ...state, operator: nextOperator });
         }}
-        value={dropdownValues}
-        isMultiSelect={filter.type === FieldType.EntityArray}
-        placeholder={`Filter by ${filter.title}`}
       />
-    );
-  }
-
-  return <></>;
+      {!valuelessOperator && (
+        <div className="flex-1 min-w-0">
+          <Dropdown
+            options={filter.filterDropdownOptions}
+            onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
+              if (!value || (Array.isArray(value) && value.length === 0)) {
+                apply({ ...state, values: [] });
+                return;
+              }
+              const nextValues: Array<string> = Array.isArray(value)
+                ? (value as Array<DropdownValue>).map((v: DropdownValue) => {
+                    return v.toString();
+                  })
+                : [value.toString()];
+              apply({ ...state, values: nextValues });
+            }}
+            value={dropdownValues}
+            isMultiSelect={isArray}
+            placeholder={`Filter by ${filter.title}`}
+            className="relative rounded-md w-full overflow-visible"
+          />
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default EntityFilter;