@navikt/ds-react 8.5.1 → 8.6.0

package/src/data/token-filter/helpers/generate-autocomplete-options.ts

@@ -1,244 +1,299 @@
-import type { ParsedOption, ParsedProperty } from "../TokenFilter.types";
-import { type ParsedText, QUERY_OPERATORS } from "./parse-query-text";
+import type { AutoCompleteOption, OptionGroup } from "../AutoSuggest.types";
+import type {
+  ParsedOption,
+  ParsedProperty,
+  QueryFilterOperator,
+} from "../TokenFilter.types";
+import { createGroups } from "./grouping";
+import { QUERY_OPERATORS } from "./operators";
+import { type ParsedText } from "./parse-query-text";
+import { OPERATOR_LABELS, buildQueryString } from "./query-builder";
+import { matchesFilterText } from "./text-matching";
 
-interface OptionGroup<T> {
-  label: string;
-  options: T[];
-}
-
-interface AutoCompleteOption {
-  value: string;
-  label: string;
-  tags?: string[];
-  filteringTags?: string[];
-  description?: string;
-}
-
-function buildQueryString(
-  propertyLabel: string,
-  operator: string,
-  value: string,
-): string {
-  const parts = [propertyLabel, operator, value].filter(Boolean);
-  return parts.join(" ");
-}
-
-/* TODO: i18n */
-const OPERATOR_LABELS: Record<string, string> = {
-  ":": "contains",
-  "!:": "does not contain",
-  "=": "is",
-  "!=": "is not",
-  "^": "starts with",
-  "!^": "does not start with",
-  ">=": "is greater than or equal to",
-  "<=": "is less than or equal to",
-  ">": "is greater than",
-  "<": "is less than",
-};
 /**
- * Grouping option for autocomplete suggestions structures:
+ * Generates "options" to be used as autosuggest-ottion based on the current query state.
  *
- * Step: "free-text" + empty value:
- * - Group: "Properties" with all properties.
+ * The query parser recognizes three states:
+ * - "property": User has selected/matched a property and operator ("Status = active")
+ * - "operator": User has matched a property but is typing the operator ("Status" or "Status !")
+ * - "free-text": User is typing freely without a property match (e.g., "act" or "!: test")
  *
- * Step: "free-text" with non-empty value:
- * - Group: "Properties". All properties including the filter text in label or description or tags. String match.
- * - Group: "Values". All "property = value" combinations where either the property label or value label or description or tags include the filter text. String match.
- * - - Ignore all other operators than "=" for value suggestions.
- *
- * Step: "property" + empty value:
- * - Group: "Operators". All operators valid for the selected property.
- *
- * Step: "property" + non-empty value:
- * - Group: "Operators". All operators valid for the selected property with string match. Only relevant for multi letter operators like "!="
- *
- * Step: "operator" + empty value:
- * - Group: "<Property> values". All values valid for the selected property and operator. String match on value label, description and tags.
- *
- * Step: "operator" + non-empty value:
- * - Group: "<Property> values". All values valid for the selected property and operator with string match. String match on value label, description and tags.
- *
- *
- * TODO:
- * - Handle custom groups
- * - Multi vs single-select: Allow operators for each options where user can define type to be enum: { operator: "=", tokenType: "enum" }. Enum-type options allow selecting multiple values, i.e state = ("active", "pending"))
+ * @returns
+ * - value: The canonical query string representation for the current state.
+ *   Used by the UI to determine cursor position and input replacement.
+ * - options: Grouped suggestions to display (properties, operators, or values).
  */
+type AutoCompleteResult = {
+  value: string;
+  options: OptionGroup<AutoCompleteOption>[];
+};
 
-/**
- * TODO: Update based on instructions above.
- */
 function generateAutoCompleteOptions(
   queryState: ParsedText,
   filteringProperties: ParsedProperty[] = [],
   filteringOptions: ParsedOption[] = [],
-) {
+): AutoCompleteResult {
+  /* State: Property and operator are matched, suggest values */
   if (queryState.step === "property") {
-    if (!queryState.property) {
-      return {
-        value: queryState.value,
-        options: [],
-      };
-    }
-    const { propertyLabel, groupValuesLabel } = queryState.property;
-    const options = filteringOptions.filter(
-      (o) => o.property === queryState.property,
-    );
+    const filterText = queryState.value || "";
 
     return {
       value: queryState.value,
-      options: [
-        {
-          label: groupValuesLabel,
-          options: options.map(({ label, value, tags, filteringTags }) => ({
-            value: buildQueryString(propertyLabel, queryState.operator, value),
-            label,
-            tags,
-            filteringTags,
-          })),
-        },
-      ],
+      options: createValueSuggestions(
+        filteringOptions,
+        queryState.operator,
+        filterText,
+        queryState.property,
+      ),
     };
   }
+
+  /* State: Property matched, but operator is incomplete */
   if (queryState.step === "operator") {
+    const operators = filterOperatorsByPrefix(
+      getValidOperatorsForProperty(queryState.property),
+      queryState.operatorPrefix,
+    );
+
+    const partialQuery = buildQueryString(
+      queryState.property.propertyLabel,
+      queryState.operatorPrefix,
+      "",
+    );
+
+    /**
+     * Edge case: User typed an invalid operator prefix that doesn't match any operators.
+     * This can happen when typing characters that don't start any valid operator.
+     * Return empty suggestions gracefully - the UI will show "no results".
+     */
+    if (operators.length === 0) {
+      return {
+        value: partialQuery,
+        options: [],
+      };
+    }
+
     return {
-      value: buildQueryString(
-        queryState.property.propertyLabel,
+      value: partialQuery,
+      options: generateOperatorSuggestions(
+        queryState.property,
         queryState.operatorPrefix,
-        "",
       ),
-      options: [
-        ...generatePropertySuggestions(filteringProperties),
-        {
-          options: QUERY_OPERATORS.map((value) => ({
-            value: buildQueryString(
-              queryState.property.propertyLabel,
-              value,
-              "",
-            ),
-            label: buildQueryString(
-              queryState.property.propertyLabel,
-              value,
-              "",
-            ),
-            description: OPERATOR_LABELS[value] ?? "",
-          })),
-          /* TODO: i18n */
-          label: "Operator",
-        },
-      ],
     };
   }
 
-  const needsValueSuggestions = !!queryState.value;
-  const needsPropertySuggestions = !(
-    queryState.step === "free-text" && queryState.operator === "!:"
-  );
+  /*
+   * Edge case: Input starts with operator but has no value yet (user typed just "!=")
+   * Wait for value before showing suggestions
+   */
+  if (!queryState.value && queryState.operator) {
+    return {
+      value: "",
+      options: [],
+    };
+  }
 
+  /* Empty input: Show all properties */
+  if (!queryState.value) {
+    return {
+      value: "",
+      options: generatePropertySuggestions(filteringProperties),
+    };
+  }
+
+  /*
+   * Free-text search: Show matching values across all properties
+   * Use the detected operator if input started with one (e.g., "!= test"), otherwise default to "="
+   */
   return {
     value: queryState.value,
     options: [
-      ...(needsPropertySuggestions
-        ? generatePropertySuggestions(filteringProperties)
-        : []),
-      ...(needsValueSuggestions
-        ? generateAllValueSuggestions(filteringOptions)
-        : []),
+      ...generatePropertySuggestions(filteringProperties, queryState.value),
+      ...createValueSuggestions(
+        filteringOptions,
+        queryState.operator ?? "=",
+        queryState.value,
+      ),
     ],
   };
 }
 
-function createAutoCompleteOption(
-  propertyLabel: string,
-  operator: string,
-  value: string,
-  label: string,
-  tags?: string[],
-  filteringTags?: string[],
-): AutoCompleteOption {
-  return {
-    value: buildQueryString(propertyLabel, operator, value),
-    label: buildQueryString(propertyLabel, operator, label),
-    tags,
-    filteringTags,
-  };
+/**
+ * Returns the valid operators for a given property.
+ * Extracts operators from the property's custom operator configuration.
+ * If none are configured, falls back to all available operators.
+ *
+ * The QueryFilteringScopedOperator can be a simple string (e.g., "=")
+ * or an object with operator and tokenType (e.g., { operator: ":", tokenType: "single" }).
+ * This function normalizes both formats and returns just the operator strings.
+ *
+ * @returns Array of valid operators for the property
+ *
+ * TODO: We omit passing the tokenType for now since it's not currently used in the UI. But will be needed for single/multi-selection.
+ */
+function getValidOperatorsForProperty(
+  property: ParsedProperty,
+): QueryFilterOperator[] {
+  const { operators } = property;
+
+  /* If no operators configured, return all available operators */
+  if (!operators || operators.length === 0) {
+    return QUERY_OPERATORS;
+  }
+
+  /*
+   * Extract operator strings from QueryFilteringScopedOperator format
+   * Handle both simple strings and objects with operator property
+   */
+  const operatorStrings = operators.map((op) =>
+    typeof op === "string" ? op : op.operator,
+  );
+
+  /* Filter to only valid QUERY_OPERATORS to ensure type safety */
+  return operatorStrings.filter((op) =>
+    QUERY_OPERATORS.includes(op as QueryFilterOperator),
+  ) as QueryFilterOperator[];
 }
 
-function generateAllValueSuggestions(
-  filteringOptions: ParsedOption[] = [],
+/**
+ * Filters the list of operators based on the provided prefix.
+ * If the prefix is empty, all operators are returned.
+ */
+function filterOperatorsByPrefix(
+  operators: QueryFilterOperator[],
+  prefix: string,
+): QueryFilterOperator[] {
+  if (!prefix) {
+    return operators;
+  }
+
+  return operators.filter((operator) => operator.startsWith(prefix));
+}
+
+function generatePropertySuggestions(
+  filteringProperties: ParsedProperty[] = [],
+  filterText = "",
 ): OptionGroup<AutoCompleteOption>[] {
-  const groups: Record<string, OptionGroup<AutoCompleteOption>> = {};
+  const filteredProperties: ParsedProperty[] = [];
 
-  for (const option of filteringOptions) {
-    if (!option || !option.property) {
+  for (const property of filteringProperties) {
+    if (!property) {
       continue;
     }
 
-    const groupLabel = option.property.groupValuesLabel || "Values";
-
-    if (!groups[groupLabel]) {
-      groups[groupLabel] = {
-        label: groupLabel,
-        options: [],
-      };
+    if (
+      matchesFilterText(
+        [
+          property.propertyLabel,
+          property.groupValuesLabel,
+          property.propertyGroup,
+        ].filter(Boolean),
+        filterText,
+      )
+    ) {
+      filteredProperties.push(property);
     }
+  }
 
-    const { label, value, tags, filteringTags, property } = option;
-    const options = QUERY_OPERATORS.map((operator) =>
-      createAutoCompleteOption(
-        property.propertyLabel,
-        operator,
-        value,
-        label,
-        tags,
-        filteringTags,
-      ),
-    );
+  const groups = createGroups(
+    filteredProperties,
+    (property) => property.propertyGroup,
+    "Properties",
+  );
 
-    groups[groupLabel].options.push(...options);
+  return groups.map((group) => ({
+    label: group.label,
+    options: group.options.map((property) => ({
+      value: buildQueryString(property.propertyLabel, "", ""),
+      label: property.propertyLabel,
+    })),
+  }));
+}
+
+function generateOperatorSuggestions(
+  property: ParsedProperty,
+  operatorPrefix = "",
+): OptionGroup<AutoCompleteOption>[] {
+  const operators = filterOperatorsByPrefix(
+    getValidOperatorsForProperty(property),
+    operatorPrefix,
+  );
+
+  if (operators.length === 0) {
+    return [];
   }
 
-  return Object.values(groups);
+  return [
+    {
+      label: "Operators",
+      options: operators.map((operator) => ({
+        value: buildQueryString(property.propertyLabel, operator, ""),
+        label: buildQueryString(property.propertyLabel, operator, ""),
+        description: OPERATOR_LABELS[operator] ?? "",
+      })),
+    },
+  ];
 }
 
-function generatePropertySuggestions(
-  filteringProperties: ParsedProperty[] = [],
-): OptionGroup<ParsedProperty>[] {
-  const defaultGroup: OptionGroup<ParsedProperty> = {
-    label: "Properties",
-    options: [],
-  };
-  const customGroups: Record<string, OptionGroup<ParsedProperty>> = {};
+/**
+ * Creates value suggestions for autocomplete.
+ * When scopedProperty is provided, only shows values for that property (single group).
+ * When scopedProperty is omitted, searches across all properties (multiple groups).
+ * TODO: This could potentially contain an unlimited number of options if there are many values across properties.
+ * May need virtualization/async or other filtering mechanism.
+ */
+function createValueSuggestions(
+  filteringOptions: ParsedOption[] = [],
+  operator: QueryFilterOperator,
+  filterText = "",
+  scopedProperty?: ParsedProperty,
+): OptionGroup<AutoCompleteOption>[] {
+  const groups: Record<string, OptionGroup<AutoCompleteOption>> = {};
 
-  for (const property of filteringProperties) {
-    if (!property) {
+  for (const option of filteringOptions) {
+    if (!option?.property) {
       continue;
     }
-    const groupLabel = property.propertyGroup?.trim();
-
-    if (groupLabel) {
-      if (!customGroups[groupLabel]) {
-        customGroups[groupLabel] = {
-          label: groupLabel,
-          options: [],
-        };
-      }
-      customGroups[groupLabel].options.push(property);
+
+    /* If scoped to a property, filter to only that property's options */
+    if (scopedProperty && option.property !== scopedProperty) {
       continue;
     }
 
-    defaultGroup.options.push(property);
-  }
+    /* Build search fields */
+    const searchFields = [option.label, ...(option.tags ?? [])];
 
-  const groups: OptionGroup<ParsedProperty>[] = [
-    ...Object.values(customGroups),
-  ];
+    if (!scopedProperty) {
+      searchFields.push(option.property.propertyLabel);
+    }
+
+    const matches = matchesFilterText(searchFields.filter(Boolean), filterText);
 
-  if (defaultGroup.options.length > 0) {
-    groups.push(defaultGroup);
+    if (!matches) {
+      continue;
+    }
+
+    const groupLabel = option.property.groupValuesLabel || "Values";
+
+    if (!groups[groupLabel]) {
+      groups[groupLabel] = {
+        label: groupLabel,
+        options: [],
+      };
+    }
+
+    groups[groupLabel].options.push({
+      value: buildQueryString(
+        option.property.propertyLabel,
+        operator,
+        option.value,
+      ),
+      label: option.label,
+      tags: option.tags,
+    });
   }
 
-  return groups;
+  return Object.values(groups).filter((group) => group.options.length > 0);
 }
 
 export { generateAutoCompleteOptions };

package/src/data/token-filter/helpers/grouping.test.ts

@@ -0,0 +1,206 @@
+import { describe, expect, test } from "vitest";
+import { createGroups } from "./grouping";
+
+interface TestItem {
+  name: string;
+  group?: string;
+  value: string;
+}
+
+describe("createGroups", () => {
+  describe("basic grouping", () => {
+    test("groups items by label", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "Group B", value: "2" },
+        { name: "Item 3", group: "Group A", value: "3" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(2);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[0].options).toHaveLength(2);
+      expect(groups[1].label).toBe("Group B");
+      expect(groups[1].options).toHaveLength(1);
+    });
+
+    test("uses default group for items without group label", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[1].label).toBe("Default");
+      expect(groups[1].options).toHaveLength(1);
+    });
+
+    test("places default group last", () => {
+      const items: TestItem[] = [
+        { name: "No group", value: "0" },
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "Group B", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(3);
+      expect(groups[2].label).toBe("Default");
+    });
+
+    test("returns empty array when no items", () => {
+      const groups = createGroups([], (item: TestItem) => item.group);
+
+      expect(groups).toEqual([]);
+    });
+  });
+
+  describe("empty string handling", () => {
+    test("treats empty string as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Properties");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[1].label).toBe("Properties");
+      expect(groups[1].options).toHaveLength(1);
+    });
+
+    test("treats whitespace-only string as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "   ", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[1].label).toBe("Default");
+      expect(groups[1].options).toHaveLength(1);
+    });
+  });
+
+  describe("null/undefined handling", () => {
+    test("treats undefined group as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: undefined, value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[1].label).toBe("Default");
+    });
+
+    test("treats null group as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: null as any, value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[1].label).toBe("Default");
+    });
+
+    test("skips null/undefined items", () => {
+      const items = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        null as any,
+        undefined as any,
+        { name: "Item 2", group: "Group A", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].options).toHaveLength(2);
+    });
+  });
+
+  describe("edge cases", () => {
+    test("handles all items in default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", value: "1" },
+        { name: "Item 2", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "All");
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].label).toBe("All");
+      expect(groups[0].options).toHaveLength(2);
+    });
+
+    test("handles single item", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[0].options).toHaveLength(1);
+    });
+
+    test("preserves item order within groups", () => {
+      const items: TestItem[] = [
+        { name: "Item 3", group: "Group A", value: "3" },
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "Group A", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups[0].options[0].value).toBe("3");
+      expect(groups[0].options[1].value).toBe("1");
+      expect(groups[0].options[2].value).toBe("2");
+    });
+
+    test("trims group labels", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "  Group A  ", value: "1" },
+        { name: "Item 2", group: "Group A", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[0].options).toHaveLength(2);
+    });
+  });
+
+  describe("custom default group label", () => {
+    test("uses custom default group label", () => {
+      const items: TestItem[] = [{ name: "Item 1", value: "1" }];
+
+      const groups = createGroups(
+        items,
+        (item) => item.group,
+        "Custom Default",
+      );
+
+      expect(groups[0].label).toBe("Custom Default");
+    });
+
+    test("defaults to 'Default' when not provided", () => {
+      const items: TestItem[] = [{ name: "Item 1", value: "1" }];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups[0].label).toBe("Default");
+    });
+  });
+});