@navikt/ds-react 8.5.1 → 8.6.0

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

@@ -0,0 +1,73 @@
+import type { OptionGroup } from "../AutoSuggest.types";
+
+/**
+ * Groups items into labeled groups with support for a default group.
+ * Empty or whitespace-only group labels are treated as belonging to the default group.
+ *
+ * @returns Array of groups with non-empty options
+ *
+ * @example
+ * const properties = [
+ *   { name: "Status", group: "Metadata" },
+ *   { name: "Region", group: "Location" },
+ *   { name: "Type", group: "" },
+ * ];
+ * const groups = createGroups(
+ *   properties,
+ *   (p) => p.group,
+ *   "Properties"
+ * );
+ *
+ * Returns:
+ * [
+ *   { label: "Metadata", options: [{ name: "Status", group: "Metadata" }] },
+ *   { label: "Location", options: [{ name: "Region", group: "Location" }] },
+ *   { label: "Properties", options: [{ name: "Type", group: "" }] }
+ * ]
+ */
+function createGroups<T>(
+  items: T[],
+  getGroupLabel: (item: T) => string | undefined | null,
+  defaultGroupLabel = "Default",
+): OptionGroup<T>[] {
+  const defaultGroup: OptionGroup<T> = {
+    label: defaultGroupLabel,
+    options: [],
+  };
+  const customGroups: Record<string, OptionGroup<T>> = {};
+
+  for (const item of items) {
+    if (!item) {
+      continue;
+    }
+
+    const rawLabel = getGroupLabel(item);
+    const groupLabel = rawLabel?.trim();
+
+    /* Empty string after trim or falsy values go to default group */
+    if (!groupLabel) {
+      defaultGroup.options.push(item);
+      continue;
+    }
+
+    if (!customGroups[groupLabel]) {
+      customGroups[groupLabel] = {
+        label: groupLabel,
+        options: [],
+      };
+    }
+
+    customGroups[groupLabel].options.push(item);
+  }
+
+  /* Custom groups first, then default group if it has items */
+  const groups: OptionGroup<T>[] = [...Object.values(customGroups)];
+
+  if (defaultGroup.options.length > 0) {
+    groups.push(defaultGroup);
+  }
+
+  return groups;
+}
+
+export { createGroups };

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

@@ -0,0 +1,281 @@
+import { describe, expect, test } from "vitest";
+import type { ParsedProperty } from "../TokenFilter.types";
+import {
+  QUERY_OPERATORS,
+  matchFilteringProperty,
+  matchOperator,
+  matchOperatorPrefix,
+} from "./operators";
+
+describe("QUERY_OPERATORS", () => {
+  test("should return QUERY_OPERATORS in specificity order", () => {
+    expect(QUERY_OPERATORS[0]).toBe(">=");
+    expect(QUERY_OPERATORS[1]).toBe("<=");
+    expect(QUERY_OPERATORS[2]).toBe("!=");
+    expect(QUERY_OPERATORS[3]).toBe("!:");
+    expect(QUERY_OPERATORS[4]).toBe("!^");
+  });
+
+  test("should have all required QUERY_OPERATORS", () => {
+    const requiredOperators = [
+      "=",
+      "!=",
+      ":",
+      "!:",
+      "^",
+      "!^",
+      ">=",
+      "<=",
+      "<",
+      ">",
+    ];
+    requiredOperators.forEach((op) => {
+      expect(QUERY_OPERATORS).toContain(op);
+    });
+  });
+});
+
+describe("matchOperator", () => {
+  test("should match exact operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, "=value");
+    expect(result).toBe("=");
+  });
+
+  test("should match >= operator before > operator (specificity)", () => {
+    const result = matchOperator(QUERY_OPERATORS, ">=value");
+    expect(result).toBe(">=");
+  });
+
+  test("should match <= operator before < operator (specificity)", () => {
+    const result = matchOperator(QUERY_OPERATORS, "<=value");
+    expect(result).toBe("<=");
+  });
+
+  test("should match != operator before = operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, "!=value");
+    expect(result).toBe("!=");
+  });
+
+  test("should match !: operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, "!:value");
+    expect(result).toBe("!:");
+  });
+
+  test("should match !^ operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, "!^value");
+    expect(result).toBe("!^");
+  });
+
+  test("should match : operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, ":value");
+    expect(result).toBe(":");
+  });
+
+  test("should match ^ operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, "^value");
+    expect(result).toBe("^");
+  });
+
+  test("should match > operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, ">value");
+    expect(result).toBe(">");
+  });
+
+  test("should match < operator", () => {
+    const result = matchOperator(QUERY_OPERATORS, "<value");
+    expect(result).toBe("<");
+  });
+
+  test("should match operator case-insensitively", () => {
+    const result = matchOperator(QUERY_OPERATORS, "=value");
+    expect(result).toBe("=");
+  });
+
+  test("should return undefined when no operator matches", () => {
+    const result = matchOperator(QUERY_OPERATORS, "somevalue");
+    expect(result).toBeUndefined();
+  });
+
+  test("should return undefined for empty input", () => {
+    const result = matchOperator(QUERY_OPERATORS, "");
+    expect(result).toBeUndefined();
+  });
+
+  test("should match operator from custom operator list", () => {
+    const customOperators = ["=", "!="] as const;
+    const result = matchOperator(customOperators as any, "!=value");
+    expect(result).toBe("!=");
+  });
+});
+
+describe("matchFilteringProperty", () => {
+  const properties: ParsedProperty[] = [
+    {
+      propertyKey: "status",
+      propertyLabel: "Status",
+      groupValuesLabel: "",
+      propertyGroup: "testgroup",
+      externalProperty: {} as any,
+      operators: [],
+    },
+    {
+      propertyKey: "hostname",
+      propertyLabel: "Hostname",
+      groupValuesLabel: "",
+      propertyGroup: "testgroup",
+      externalProperty: {} as any,
+      operators: [],
+    },
+    {
+      propertyKey: "instance-id",
+      propertyLabel: "Instance ID",
+      groupValuesLabel: "",
+      propertyGroup: "testgroup",
+      externalProperty: {} as any,
+      operators: [],
+    },
+    {
+      propertyKey: "region",
+      propertyLabel: "Region",
+      groupValuesLabel: "",
+      propertyGroup: "testgroup",
+      externalProperty: {} as any,
+      operators: [],
+    },
+    {
+      propertyKey: "availability-zone",
+      propertyLabel: "Availability Zone",
+      groupValuesLabel: "",
+      propertyGroup: "testgroup",
+      externalProperty: {} as any,
+      operators: [],
+    },
+  ];
+
+  test("should match a basic property", () => {
+    const result = matchFilteringProperty(properties, "Status");
+    expect(result?.propertyKey).toBe("status");
+  });
+
+  test("should match property case-insensitively", () => {
+    const result = matchFilteringProperty(properties, "status");
+    expect(result?.propertyKey).toBe("status");
+  });
+
+  test("should match property with mixed casing", () => {
+    const result = matchFilteringProperty(properties, "sTaTuS");
+    expect(result?.propertyKey).toBe("status");
+  });
+
+  test("should use longest matching property when properties overlap", () => {
+    const result = matchFilteringProperty(properties, "Instance ID");
+    expect(result?.propertyKey).toBe("instance-id");
+  });
+
+  test("should prefer longest property: Availability Zone vs Zone", () => {
+    const result = matchFilteringProperty(properties, "Availability Zone");
+    expect(result?.propertyKey).toBe("availability-zone");
+  });
+
+  test("should return undefined when no property matches", () => {
+    const result = matchFilteringProperty(properties, "NonExistentProperty");
+    expect(result).toBeUndefined();
+  });
+
+  test("should return undefined for empty input", () => {
+    const result = matchFilteringProperty(properties, "");
+    expect(result).toBeUndefined();
+  });
+
+  test("should match property from partial input", () => {
+    const result = matchFilteringProperty(properties, "Status=value");
+    expect(result?.propertyKey).toBe("status");
+  });
+
+  test("should match property with spaces in label", () => {
+    const result = matchFilteringProperty(properties, "Instance ID:value");
+    expect(result?.propertyKey).toBe("instance-id");
+  });
+});
+
+describe("matchOperatorPrefix", () => {
+  test("should return empty string when input is empty", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "");
+    expect(result).toBe("");
+  });
+
+  test("should return empty string when input is whitespace only", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "   ");
+    expect(result).toBe("");
+  });
+
+  test("should match exact operator as prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "=");
+    expect(result).toBe("=");
+  });
+
+  test("should match incomplete >= operator as <  prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "<");
+    expect(result).toBe("<");
+  });
+
+  test("should match incomplete >= operator as = prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, ">");
+    expect(result).toBe(">");
+  });
+
+  test("should match !: operator prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "!");
+    expect(result).toBe("!");
+  });
+
+  test("should match !: as operator prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "!:");
+    expect(result).toBe("!:");
+  });
+
+  test("should match !^ as operator prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "!^");
+    expect(result).toBe("!^");
+  });
+
+  test("should match : operator prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, ":");
+    expect(result).toBe(":");
+  });
+
+  test("should match ^ operator prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "^");
+    expect(result).toBe("^");
+  });
+
+  test("should return null for invalid operator prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "@");
+    expect(result).toBeNull();
+  });
+
+  test("should return null for completely invalid prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "xyz");
+    expect(result).toBeNull();
+  });
+
+  test("should trim whitespace before checking prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "   =");
+    expect(result).toBe("=");
+  });
+
+  test("should handle case-insensitive prefix matching", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, "!");
+    expect(result).toBe("!");
+  });
+
+  test("should match >= as valid prefix", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, ">");
+    expect(result).toBe(">");
+  });
+
+  test("should match >= as valid prefix (incomplete)", () => {
+    const result = matchOperatorPrefix(QUERY_OPERATORS, ">");
+    expect(result).toBe(">");
+  });
+});

package/src/data/token-filter/helpers/operators.ts

@@ -0,0 +1,91 @@
+import type { ParsedProperty, QueryFilterOperator } from "../TokenFilter.types";
+
+/**
+ * Operators ordered by specificity (longest/most specific first)
+ * This ensures longer operators like ">=" and "<=" are matched
+ * before shorter ones like ">" and "<"
+ */
+const Operators: Record<QueryFilterOperator, null> = {
+  ">=": null,
+  "<=": null,
+  "!=": null,
+  "!:": null,
+  "!^": null,
+  "=": null,
+  ":": null,
+  "^": null,
+  ">": null,
+  "<": null,
+};
+
+const QUERY_OPERATORS: QueryFilterOperator[] = Object.keys(Operators);
+
+/**
+ * Match an operator from the input text.
+ * Operators are already sorted by specificity, so no re-sorting needed.
+ */
+function matchOperator(
+  allowedOperators: QueryFilterOperator[],
+  text: string,
+): QueryFilterOperator | undefined {
+  return allowedOperators.find((operator) =>
+    text.toLowerCase().startsWith(operator.toLowerCase()),
+  );
+}
+
+/**
+ * Match a property from the input text by longest property label.
+ *
+ * properties: [{ propertyLabel: "Instance" }, { propertyLabel: "Instance ID" }]
+ * text = "Instance ID:"
+ *
+ * Result: { propertyLabel: "Instance ID" }
+ */
+function matchFilteringProperty(
+  filteringProperties: ParsedProperty[],
+  text: string,
+): ParsedProperty | undefined {
+  const lowerText = text.toLowerCase();
+  let bestMatch: ParsedProperty | undefined;
+
+  for (const prop of filteringProperties) {
+    if (lowerText.startsWith(prop.propertyLabel.toLowerCase())) {
+      if (
+        !bestMatch ||
+        prop.propertyLabel.length > bestMatch.propertyLabel.length
+      ) {
+        bestMatch = prop;
+      }
+    }
+  }
+
+  return bestMatch;
+}
+
+/**
+ * Check if the input text is a valid prefix of any allowed operator.
+ * Returns the prefix if valid, null otherwise.
+ */
+function matchOperatorPrefix(
+  allowedOperators: QueryFilterOperator[],
+  filteringText: string,
+): string | null {
+  const trimmedText = filteringText.trim();
+
+  if (trimmedText.length === 0) {
+    return "";
+  }
+
+  const isValidPrefix = allowedOperators.some((operator) =>
+    operator.toLowerCase().startsWith(trimmedText.toLowerCase()),
+  );
+
+  return isValidPrefix ? trimmedText : null;
+}
+
+export {
+  QUERY_OPERATORS,
+  matchOperator,
+  matchFilteringProperty,
+  matchOperatorPrefix,
+};

package/src/data/token-filter/helpers/parse-query-text.test.ts

@@ -3,7 +3,7 @@ import type {
   ParsedProperty,
   QueryFilteringProperty,
 } from "../TokenFilter.types";
-import { QUERY_OPERATORS, parseQueryText } from "./parse-query-text";
+import { parseQueryText } from "./parse-query-text";
 import type { ParsedText } from "./parse-query-text";
 
 const properties: QueryFilteringProperty[] = [
@@ -42,192 +42,13 @@ const properties: QueryFilteringProperty[] = [
 const parsedProperties: ParsedProperty[] = properties.map((prop) => ({
   propertyKey: prop.key,
   propertyLabel: prop.propertyLabel,
-  groupValuesLabel: prop.groupValuesLabel,
-  propertyGroup: prop.group,
+  groupValuesLabel: prop.groupValuesLabel ?? "",
+  propertyGroup: prop.group ?? "",
   externalProperty: prop,
+  operators: prop.operators ?? [],
 }));
 
 describe("parseQueryText", () => {
-  describe("property matching", () => {
-    test("should match a basic property", () => {
-      const result = parseQueryText("Status", parsedProperties);
-      expect(result.step).toBe("operator");
-      const operatorResult = result as Extract<
-        ParsedText,
-        { step: "operator" }
-      >;
-      expect(operatorResult.property.propertyKey).toBe("status");
-    });
-
-    test("should match property case-insensitively", () => {
-      const result = parseQueryText("status", parsedProperties);
-      expect(result.step).toBe("operator");
-      const operatorResult = result as Extract<
-        ParsedText,
-        { step: "operator" }
-      >;
-      expect(operatorResult.property.propertyKey).toBe("status");
-    });
-
-    test("should match property with mixed casing", () => {
-      const result = parseQueryText("sTaTuS", parsedProperties);
-      expect(result.step).toBe("operator");
-      const operatorResult = result as Extract<
-        ParsedText,
-        { step: "operator" }
-      >;
-      expect(operatorResult.property.propertyKey).toBe("status");
-    });
-
-    test("should use longest matching property when properties overlap", () => {
-      const result = parseQueryText("Instance ID", parsedProperties);
-      expect(result.step).toBe("operator");
-      const operatorResult = result as Extract<
-        ParsedText,
-        { step: "operator" }
-      >;
-      expect(operatorResult.property.propertyKey).toBe("instance-id");
-    });
-
-    test("should use longest matching property: Availability Zone vs Zone", () => {
-      const result = parseQueryText("Availability Zone", parsedProperties);
-      expect(result.step).toBe("operator");
-      const operatorResult = result as Extract<
-        ParsedText,
-        { step: "operator" }
-      >;
-      expect(operatorResult.property.propertyKey).toBe("availability-zone");
-    });
-
-    test("should return free-text when no property matches", () => {
-      const result = parseQueryText("NonExistentProperty", parsedProperties);
-      expect(result.step).toBe("free-text");
-    });
-  });
-
-  describe("operator matching", () => {
-    test("should match exact operator", () => {
-      const result = parseQueryText("Status=value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe("=");
-      expect(propertyResult.value).toBe("value");
-    });
-
-    test("should match >= operator before > operator (specificity)", () => {
-      const result = parseQueryText("Status>=value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe(">=");
-      expect(propertyResult.value).toBe("value");
-    });
-
-    test("should match <= operator before < operator (specificity)", () => {
-      const result = parseQueryText("Status<=value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe("<=");
-      expect(propertyResult.value).toBe("value");
-    });
-
-    test("should match != operator before = operator", () => {
-      const result = parseQueryText("Status!=value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe("!=");
-      expect(propertyResult.value).toBe("value");
-    });
-
-    test("should match !: operator", () => {
-      const result = parseQueryText("Status!:value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe("!:");
-    });
-
-    test("should match !^ operator", () => {
-      const result = parseQueryText("Status!^value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe("!^");
-    });
-
-    test("should match : operator", () => {
-      const result = parseQueryText("Status:value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe(":");
-    });
-
-    test("should match ^ operator", () => {
-      const result = parseQueryText("Status^value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe("^");
-    });
-
-    test("should match operator case-insensitively", () => {
-      const result = parseQueryText("Status=value", parsedProperties);
-      expect(result.step).toBe("property");
-      const propertyResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(propertyResult.operator).toBe("=");
-    });
-  });
-
-  describe("operator prefix matching", () => {
-    test("should recognize incomplete <= operator as < operator", () => {
-      const result = parseQueryText("Status<", parsedProperties);
-      expect(result.step).toBe("property");
-      const operatorResult = result as Extract<
-        ParsedText,
-        { step: "property" }
-      >;
-      expect(operatorResult.operator).toBe("<");
-    });
-
-    test("should recognize empty string after property as operator prefix", () => {
-      const result = parseQueryText("Status", parsedProperties);
-      expect(result.step).toBe("operator");
-      const operatorResult = result as Extract<
-        ParsedText,
-        { step: "operator" }
-      >;
-      expect(operatorResult.operatorPrefix).toBe("");
-    });
-
-    test("should return free-text when invalid operator character is used", () => {
-      const result = parseQueryText("Status@value", parsedProperties);
-      expect(result.step).toBe("free-text");
-    });
-  });
-
   describe("value extraction", () => {
     test("should extract value after operator", () => {
       const result = parseQueryText("Status=active", parsedProperties);
@@ -361,36 +182,6 @@ describe("parseQueryText", () => {
     });
   });
 
-  describe("QUERY_OPERATORS", () => {
-    test("should return qUERY_OPERATORS in specificity order", () => {
-      const qUERY_OPERATORS = QUERY_OPERATORS;
-      expect(qUERY_OPERATORS[0]).toBe(">=");
-      expect(qUERY_OPERATORS[1]).toBe("<=");
-      expect(qUERY_OPERATORS[2]).toBe("!=");
-      expect(qUERY_OPERATORS[3]).toBe("!:");
-      expect(qUERY_OPERATORS[4]).toBe("!^");
-    });
-
-    test("should have all required qUERY_OPERATORS", () => {
-      const qUERY_OPERATORS = QUERY_OPERATORS;
-      const requiredQUERY_OPERATORS = [
-        "=",
-        "!=",
-        ":",
-        "!:",
-        "^",
-        "!^",
-        ">=",
-        "<=",
-        "<",
-        ">",
-      ];
-      requiredQUERY_OPERATORS.forEach((op) => {
-        expect(qUERY_OPERATORS).toContain(op);
-      });
-    });
-  });
-
   describe("free-text fallback", () => {
     test("should fallback to free-text when no property is matched", () => {
       const result = parseQueryText("Random text", parsedProperties);