@oneuptime/common 10.0.68 → 10.0.70

package/UI/Components/Filters/FiltersForm.tsx

@@ -1,8 +1,8 @@
-import Button, { ButtonStyleType } from "../Button/Button";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
-import FieldLabelElement from "../Forms/Fields/FieldLabel";
 import FieldType from "../Types/FieldType";
+import IconProp from "../../../Types/Icon/IconProp";
 import BooleanFilter from "./BooleanFilter";
 import DateFilter from "./DateFilter";
 import DropdownFilter from "./DropdownFilter";
@@ -61,109 +61,160 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
     props.showAdvancedFiltersByDefault ?? false,
   );
 
+  type ClearFilterFunction = (key: keyof T) => void;
+
+  const clearFilter: ClearFilterFunction = (key: keyof T): void => {
+    const next: FilterData<T> = { ...props.filterData };
+    delete next[key];
+    changeFilterData(next);
+  };
+
+  const visibleFilters: Array<Filter<T>> = props.filters.filter(
+    (filter: Filter<T>) => {
+      if (filter.isAdvancedFilter) {
+        return (
+          showMoreFilters && !props.isFilterLoading && !props.filterError
+        );
+      }
+      return true;
+    },
+  );
+
   return (
     <div id={props.id}>
-      <div className="pt-3 pb-5">
-        <div className="space-y-5">
-          {props.showFilter &&
-            props.filters &&
-            props.filters
-              .filter((filter: Filter<T>) => {
-                if (filter.isAdvancedFilter) {
-                  // Hide advanced filters if not toggled on, or if they are still loading/errored
-                  return (
-                    showMoreFilters &&
-                    !props.isFilterLoading &&
-                    !props.filterError
-                  );
-                }
-                return true;
-              })
-              .map((filter: Filter<T>, i: number) => {
-                return (
-                  <div key={i} className="col-span-3 sm:col-span-3 ">
-                    <FieldLabelElement required={true} title={filter.title} />
-
-                    <DropdownFilter
-                      filter={filter}
-                      filterData={props.filterData}
-                      onFilterChanged={changeFilterData}
-                      isMultiSelect={
-                        filter.type === FieldType.MultiSelectDropdown
-                      }
-                    />
-
-                    <EntityFilter
-                      filter={filter}
-                      filterData={props.filterData}
-                      onFilterChanged={changeFilterData}
-                    />
-
-                    <BooleanFilter
-                      filter={filter}
-                      filterData={props.filterData}
-                      onFilterChanged={changeFilterData}
-                    />
-
-                    <DateFilter
-                      filter={filter}
-                      filterData={props.filterData}
-                      onFilterChanged={changeFilterData}
-                    />
-
-                    <TextFilter
-                      filter={filter}
-                      filterData={props.filterData}
-                      onFilterChanged={changeFilterData}
-                    />
-
-                    <NumberFilter
-                      filter={filter}
-                      filterData={props.filterData}
-                      onFilterChanged={changeFilterData}
-                    />
-
-                    <JSONFilter
-                      filter={filter}
-                      filterData={props.filterData}
-                      onFilterChanged={changeFilterData}
-                      jsonKeys={filter.jsonKeys}
-                      jsonValueSuggestions={filter.jsonValueSuggestions}
-                      onJsonKeySelected={filter.onJsonKeySelected}
-                    />
-                  </div>
-                );
-              })}
-        </div>
-        {props.showFilter && props.isFilterLoading && !props.filterError && (
+      <div className="space-y-3">
+        {visibleFilters.map((filter: Filter<T>, i: number) => {
+          const hasValue: boolean =
+            filter.key !== undefined &&
+            props.filterData[filter.key] !== undefined &&
+            props.filterData[filter.key] !== null;
+
+          return (
+            <div
+              key={i}
+              className="grid grid-cols-[140px_1fr_auto] items-center gap-3"
+            >
+              {/* Label column */}
+              <div className="flex items-center min-w-0">
+                <label className="text-sm font-medium text-gray-700 truncate">
+                  {filter.title}
+                </label>
+              </div>
+
+              {/* Controls column */}
+              <div className="min-w-0">
+                <DropdownFilter
+                  filter={filter}
+                  filterData={props.filterData}
+                  onFilterChanged={changeFilterData}
+                  isMultiSelect={filter.type === FieldType.MultiSelectDropdown}
+                />
+
+                <EntityFilter
+                  filter={filter}
+                  filterData={props.filterData}
+                  onFilterChanged={changeFilterData}
+                />
+
+                <BooleanFilter
+                  filter={filter}
+                  filterData={props.filterData}
+                  onFilterChanged={changeFilterData}
+                />
+
+                <DateFilter
+                  filter={filter}
+                  filterData={props.filterData}
+                  onFilterChanged={changeFilterData}
+                />
+
+                <TextFilter
+                  filter={filter}
+                  filterData={props.filterData}
+                  onFilterChanged={changeFilterData}
+                />
+
+                <NumberFilter
+                  filter={filter}
+                  filterData={props.filterData}
+                  onFilterChanged={changeFilterData}
+                />
+
+                <JSONFilter
+                  filter={filter}
+                  filterData={props.filterData}
+                  onFilterChanged={changeFilterData}
+                  jsonKeys={filter.jsonKeys}
+                  jsonValueSuggestions={filter.jsonValueSuggestions}
+                  onJsonKeySelected={filter.onJsonKeySelected}
+                />
+              </div>
+
+              {/* Clear column */}
+              <div className="flex items-center">
+                {hasValue && filter.key ? (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      return clearFilter(filter.key as keyof T);
+                    }}
+                    className="p-1.5 rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+                    aria-label={`Clear ${filter.title} filter`}
+                    title={`Clear ${filter.title}`}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      className="w-4 h-4"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                ) : (
+                  <div className="w-7" aria-hidden="true" />
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {props.showFilter && props.isFilterLoading && !props.filterError && (
+        <div className="py-4">
           <ComponentLoader />
-        )}
+        </div>
+      )}
 
-        {props.showFilter && props.filterError && (
+      {props.showFilter && props.filterError && (
+        <div className="py-4">
           <ErrorMessage
             message={props.filterError}
             onRefreshClick={props.onFilterRefreshClick}
           />
-        )}
-        {showAdvancedFilterButton && (
-          <Button
-            className="-ml-3 mt-1"
-            buttonStyle={ButtonStyleType.SECONDARY_LINK}
-            title={
-              showMoreFilters
-                ? "Hide Advanced Filters"
-                : "Show Advanced Filters"
-            }
-            onClick={() => {
-              setShowMoreFilters((currentValue: boolean) => {
-                const newValue: boolean = !currentValue;
-                props.onAdvancedFiltersToggle?.(newValue);
-                return newValue;
-              });
-            }}
-          />
-        )}
-      </div>
+        </div>
+      )}
+      {showAdvancedFilterButton && (
+        <Button
+          className="-ml-3 mt-3"
+          buttonSize={ButtonSize.Small}
+          buttonStyle={ButtonStyleType.SECONDARY_LINK}
+          icon={showMoreFilters ? IconProp.ChevronUp : IconProp.ChevronDown}
+          title={
+            showMoreFilters ? "Hide Advanced Filters" : "Show Advanced Filters"
+          }
+          onClick={() => {
+            setShowMoreFilters((currentValue: boolean) => {
+              const newValue: boolean = !currentValue;
+              props.onAdvancedFiltersToggle?.(newValue);
+              return newValue;
+            });
+          }}
+        />
+      )}
     </div>
   );
 };

package/UI/Components/Filters/NumberFilter.tsx

@@ -1,9 +1,19 @@
-import Input, { InputType } from "../Input/Input";
 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 EqualTo from "../../../Types/BaseDatabase/EqualTo";
+import NotEqual from "../../../Types/BaseDatabase/NotEqual";
+import GreaterThan from "../../../Types/BaseDatabase/GreaterThan";
+import LessThan from "../../../Types/BaseDatabase/LessThan";
+import GreaterThanOrEqual from "../../../Types/BaseDatabase/GreaterThanOrEqual";
+import LessThanOrEqual from "../../../Types/BaseDatabase/LessThanOrEqual";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import IsNull from "../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../Types/BaseDatabase/NotNull";
 import GenericObject from "../../../Types/GenericObject";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
   filter: Filter<T>;
@@ -15,44 +25,219 @@ type NumberFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ) => ReactElement;
 
+const NUMBER_OPERATORS: Array<FilterOperator> = [
+  FilterOperator.EqualTo,
+  FilterOperator.NotEqualTo,
+  FilterOperator.GreaterThan,
+  FilterOperator.LessThan,
+  FilterOperator.GreaterThanOrEqualTo,
+  FilterOperator.LessThanOrEqualTo,
+  FilterOperator.Between,
+  FilterOperator.IsEmpty,
+  FilterOperator.IsNotEmpty,
+];
+
+type NumberState = {
+  operator: FilterOperator;
+  value: string;
+  endValue: string;
+};
+
+type DetectStateFunction = (rawValue: unknown) => NumberState;
+
+const detectState: DetectStateFunction = (rawValue: unknown): NumberState => {
+  if (rawValue instanceof InBetween) {
+    return {
+      operator: FilterOperator.Between,
+      value: (rawValue.startValue ?? "").toString(),
+      endValue: (rawValue.endValue ?? "").toString(),
+    };
+  }
+  if (rawValue instanceof EqualTo) {
+    return {
+      operator: FilterOperator.EqualTo,
+      value: rawValue.toString(),
+      endValue: "",
+    };
+  }
+  if (rawValue instanceof NotEqual) {
+    return {
+      operator: FilterOperator.NotEqualTo,
+      value: rawValue.toString(),
+      endValue: "",
+    };
+  }
+  if (rawValue instanceof GreaterThan) {
+    return {
+      operator: FilterOperator.GreaterThan,
+      value: rawValue.toString(),
+      endValue: "",
+    };
+  }
+  if (rawValue instanceof LessThan) {
+    return {
+      operator: FilterOperator.LessThan,
+      value: rawValue.toString(),
+      endValue: "",
+    };
+  }
+  if (rawValue instanceof GreaterThanOrEqual) {
+    return {
+      operator: FilterOperator.GreaterThanOrEqualTo,
+      value: rawValue.toString(),
+      endValue: "",
+    };
+  }
+  if (rawValue instanceof LessThanOrEqual) {
+    return {
+      operator: FilterOperator.LessThanOrEqualTo,
+      value: rawValue.toString(),
+      endValue: "",
+    };
+  }
+  if (rawValue instanceof IsNull) {
+    return { operator: FilterOperator.IsEmpty, value: "", endValue: "" };
+  }
+  if (rawValue instanceof NotNull) {
+    return { operator: FilterOperator.IsNotEmpty, value: "", endValue: "" };
+  }
+  if (typeof rawValue === "number") {
+    return {
+      operator: FilterOperator.EqualTo,
+      value: rawValue.toString(),
+      endValue: "",
+    };
+  }
+  return { operator: FilterOperator.EqualTo, value: "", endValue: "" };
+};
+
+type BuildValueFunction = (state: NumberState) => unknown;
+
+const buildValue: BuildValueFunction = (state: NumberState): unknown => {
+  const startNum: number = parseFloat(state.value);
+  const endNum: number = parseFloat(state.endValue);
+
+  const hasStart: boolean = !Number.isNaN(startNum) && state.value !== "";
+  const hasEnd: boolean = !Number.isNaN(endNum) && state.endValue !== "";
+
+  switch (state.operator) {
+    case FilterOperator.EqualTo:
+      return hasStart ? new EqualTo(startNum as any) : undefined;
+    case FilterOperator.NotEqualTo:
+      return hasStart ? new NotEqual(startNum as any) : undefined;
+    case FilterOperator.GreaterThan:
+      return hasStart ? new GreaterThan(startNum) : undefined;
+    case FilterOperator.LessThan:
+      return hasStart ? new LessThan(startNum) : undefined;
+    case FilterOperator.GreaterThanOrEqualTo:
+      return hasStart ? new GreaterThanOrEqual(startNum) : undefined;
+    case FilterOperator.LessThanOrEqualTo:
+      return hasStart ? new LessThanOrEqual(startNum) : undefined;
+    case FilterOperator.Between:
+      return hasStart && hasEnd ? new InBetween(startNum, endNum) : undefined;
+    case FilterOperator.IsEmpty:
+      return new IsNull();
+    case FilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return undefined;
+  }
+};
+
 const NumberFilter: NumberFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
   const filter: Filter<T> = props.filter;
-  const filterData: FilterData<T> = { ...props.filterData };
-
-  const inputType: InputType = InputType.NUMBER;
-
-  if (!filter.filterDropdownOptions && filter.type === FieldType.Number) {
-    return (
-      <Input
-        onChange={(changedValue: string | number) => {
-          if (filter.key) {
-            if (!changedValue) {
-              delete filterData[filter.key];
-            }
-
-            if (changedValue && filter.type === FieldType.Number) {
-              if (typeof changedValue === "string") {
-                changedValue = parseInt(changedValue);
-              }
-
-              filterData[filter.key] = changedValue;
-            }
-
-            if (props.onFilterChanged) {
-              props.onFilterChanged(filterData);
-            }
-          }
-        }}
-        initialValue={filterData[filter.key]! as string}
-        placeholder={`Filter by ${filter.title}`}
-        type={inputType}
-      />
-    );
+
+  if (filter.filterDropdownOptions) {
+    return <></>;
   }
 
-  return <></>;
+  if (filter.type !== FieldType.Number) {
+    return <></>;
+  }
+
+  const detected: NumberState = detectState(props.filterData[filter.key]);
+
+  const [localOperator, setLocalOperator] = useState<FilterOperator>(
+    detected.operator,
+  );
+
+  useEffect(() => {
+    const raw: unknown = props.filterData[filter.key];
+    if (raw !== undefined && raw !== null) {
+      setLocalOperator(detected.operator);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.filterData[filter.key]]);
+
+  const state: NumberState = { ...detected, operator: localOperator };
+
+  const valuelessOperator: boolean =
+    state.operator === FilterOperator.IsEmpty ||
+    state.operator === FilterOperator.IsNotEmpty;
+  const isBetween: boolean = state.operator === FilterOperator.Between;
+
+  type ApplyFunction = (nextState: NumberState) => void;
+
+  const apply: ApplyFunction = (nextState: NumberState): void => {
+    if (!filter.key) {
+      return;
+    }
+
+    setLocalOperator(nextState.operator);
+
+    const next: FilterData<T> = { ...props.filterData };
+    const built: unknown = buildValue(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={state.operator}
+        options={NUMBER_OPERATORS}
+        onChange={(nextOperator: FilterOperator) => {
+          apply({ ...state, operator: nextOperator });
+        }}
+      />
+      {!valuelessOperator && (
+        <div className={isBetween ? "flex-1 flex gap-2 min-w-0" : "flex-1 min-w-0"}>
+          <div className="flex-1 min-w-0">
+            <input
+              type="number"
+              value={state.value}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                apply({ ...state, value: e.target.value });
+              }}
+              placeholder={isBetween ? "From" : `Filter by ${filter.title}`}
+              className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+            />
+          </div>
+          {isBetween && (
+            <div className="flex-1 min-w-0">
+              <input
+                type="number"
+                value={state.endValue}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  apply({ ...state, endValue: e.target.value });
+                }}
+                placeholder="To"
+                className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default NumberFilter;

package/UI/Components/Filters/OperatorSelector.tsx

@@ -0,0 +1,91 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import Icon, { SizeProp } from "../Icon/Icon";
+import FilterOperator, { FilterOperatorLabel } from "./Types/FilterOperator";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
+
+export interface ComponentProps {
+  value: FilterOperator;
+  options: Array<FilterOperator>;
+  onChange: (value: FilterOperator) => void;
+}
+
+const OperatorSelector: React.FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const containerRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    type HandleClickOutsideFunction = (event: MouseEvent) => void;
+    const handleClickOutside: HandleClickOutsideFunction = (
+      event: MouseEvent,
+    ): void => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative inline-block shrink-0" ref={containerRef}>
+      <button
+        type="button"
+        onClick={() => {
+          setIsOpen((prev: boolean) => {
+            return !prev;
+          });
+        }}
+        className="inline-flex items-center justify-between gap-1.5 h-9 px-3 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 border border-gray-300 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 min-w-[130px]"
+      >
+        <span className="truncate">{FilterOperatorLabel[props.value]}</span>
+        <Icon
+          icon={IconProp.ChevronDown}
+          size={SizeProp.Smaller}
+          className="text-gray-400 shrink-0"
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute z-20 mt-1 w-56 bg-white rounded-md shadow-lg border border-gray-200 py-1 max-h-60 overflow-auto">
+          {props.options.map((option: FilterOperator) => {
+            const isSelected: boolean = option === props.value;
+            return (
+              <button
+                key={option}
+                type="button"
+                onClick={() => {
+                  props.onChange(option);
+                  setIsOpen(false);
+                }}
+                className={
+                  isSelected
+                    ? "w-full text-left px-3 py-2 text-sm text-indigo-700 bg-indigo-50 hover:bg-indigo-100 flex items-center justify-between"
+                    : "w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center justify-between"
+                }
+              >
+                <span>{FilterOperatorLabel[option]}</span>
+                {isSelected && (
+                  <Icon
+                    icon={IconProp.Check}
+                    size={SizeProp.Smaller}
+                    className="text-indigo-600"
+                  />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OperatorSelector;