@navikt/ds-react 8.5.0 → 8.5.2

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

@@ -0,0 +1,201 @@
+import { describe, expect, test } from "vitest";
+import type {
+  ParsedProperty,
+  QueryFilteringProperty,
+} from "../TokenFilter.types";
+import { parseQueryText } from "./parse-query-text";
+import type { ParsedText } from "./parse-query-text";
+
+const properties: QueryFilteringProperty[] = [
+  {
+    groupValuesLabel: "",
+    group: "testgroup",
+    key: "status",
+    propertyLabel: "Status",
+  },
+  {
+    groupValuesLabel: "",
+    group: "testgroup",
+    key: "hostname",
+    propertyLabel: "Hostname",
+  },
+  {
+    groupValuesLabel: "",
+    group: "testgroup",
+    key: "instance-id",
+    propertyLabel: "Instance ID",
+  },
+  {
+    groupValuesLabel: "",
+    group: "testgroup",
+    key: "region",
+    propertyLabel: "Region",
+  },
+  {
+    groupValuesLabel: "",
+    group: "testgroup",
+    key: "availability-zone",
+    propertyLabel: "Availability Zone",
+  },
+];
+
+const parsedProperties: ParsedProperty[] = properties.map((prop) => ({
+  propertyKey: prop.key,
+  propertyLabel: prop.propertyLabel,
+  groupValuesLabel: prop.groupValuesLabel ?? "",
+  propertyGroup: prop.group ?? "",
+  externalProperty: prop,
+  operators: prop.operators ?? [],
+}));
+
+describe("parseQueryText", () => {
+  describe("value extraction", () => {
+    test("should extract value after operator", () => {
+      const result = parseQueryText("Status=active", parsedProperties);
+      expect(result.step).toBe("property");
+      const propertyResult = result as Extract<
+        ParsedText,
+        { step: "property" }
+      >;
+      expect(propertyResult.value).toBe("active");
+    });
+
+    test("should trim whitespace after operator", () => {
+      const result = parseQueryText("Status=   active", parsedProperties);
+      expect(result.step).toBe("property");
+      const propertyResult = result as Extract<
+        ParsedText,
+        { step: "property" }
+      >;
+      expect(propertyResult.value).toBe("active");
+    });
+
+    test("should handle empty value", () => {
+      const result = parseQueryText("Status=", parsedProperties);
+      expect(result.step).toBe("property");
+      const propertyResult = result as Extract<
+        ParsedText,
+        { step: "property" }
+      >;
+      expect(propertyResult.value).toBe("");
+    });
+
+    test("should handle whitespace-only value", () => {
+      const result = parseQueryText("Status=   ", parsedProperties);
+      expect(result.step).toBe("property");
+      const propertyResult = result as Extract<
+        ParsedText,
+        { step: "property" }
+      >;
+      expect(propertyResult.value).toBe("");
+    });
+
+    test("should preserve value content including spaces", () => {
+      const result = parseQueryText(
+        "Status=active and running",
+        parsedProperties,
+      );
+      expect(result.step).toBe("property");
+      const propertyResult = result as Extract<
+        ParsedText,
+        { step: "property" }
+      >;
+      expect(propertyResult.value).toBe("active and running");
+    });
+
+    test("should extract multi-part property value", () => {
+      const result = parseQueryText("Instance ID=server-123", parsedProperties);
+      expect(result.step).toBe("property");
+      const propertyResult = result as Extract<
+        ParsedText,
+        { step: "property" }
+      >;
+      expect(propertyResult.value).toBe("server-123");
+    });
+  });
+
+  describe("whitespace handling", () => {
+    test("should handle whitespace between property and 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 handle whitespace after property but 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 trim operator prefix whitespace", () => {
+      const result = parseQueryText("Status   ", parsedProperties);
+      expect(result.step).toBe("operator");
+      const operatorResult = result as Extract<
+        ParsedText,
+        { step: "operator" }
+      >;
+      expect(operatorResult.operatorPrefix).toBe("");
+    });
+  });
+
+  describe("edge cases", () => {
+    test("should handle empty input", () => {
+      const result = parseQueryText("", parsedProperties);
+      expect(result.step).toBe("free-text");
+    });
+
+    test("should handle whitespace-only input", () => {
+      const result = parseQueryText("   ", parsedProperties);
+      expect(result.step).toBe("free-text");
+    });
+
+    test("should handle property-only input", () => {
+      const result = parseQueryText("Status", parsedProperties);
+      expect(result.step).toBe("operator");
+      const operatorResult = result as Extract<
+        ParsedText,
+        { step: "operator" }
+      >;
+      expect(operatorResult.operatorPrefix).toBe("");
+    });
+
+    test("should handle property with spaces", () => {
+      const result = parseQueryText("Instance ID:value", parsedProperties);
+      expect(result.step).toBe("property");
+      const propertyResult = result as Extract<
+        ParsedText,
+        { step: "property" }
+      >;
+      expect(propertyResult.property.propertyKey).toBe("instance-id");
+      expect(propertyResult.operator).toBe(":");
+      expect(propertyResult.value).toBe("value");
+    });
+  });
+
+  describe("free-text fallback", () => {
+    test("should fallback to free-text when no property is matched", () => {
+      const result = parseQueryText("Random text", parsedProperties);
+      expect(result.step).toBe("free-text");
+      const freeTextResult = result as Extract<
+        ParsedText,
+        { step: "free-text" }
+      >;
+      expect(freeTextResult.value).toBe("Random text");
+    });
+
+    test("should fallback to free-text with partial operator match that is invalid", () => {
+      const result = parseQueryText("Status@somevalue", parsedProperties);
+      expect(result.step).toBe("free-text");
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+import type { ParsedProperty, QueryFilterOperator } from "../TokenFilter.types";
+import {
+  QUERY_OPERATORS,
+  matchFilteringProperty,
+  matchOperator,
+  matchOperatorPrefix,
+} from "./operators";
+
+type ParsedText =
+  | {
+      /** User has typed property + complete operator + value (e.g., "Status != active") */
+      step: "property";
+      property: ParsedProperty;
+      operator: QueryFilterOperator;
+      value: string;
+    }
+  | {
+      /** User is typing the operator after property (e.g., "Status !") */
+      step: "operator";
+      property: ParsedProperty;
+      operatorPrefix: string;
+    }
+  | {
+      /** No property match; treat as free-text search */
+      step: "free-text";
+      value: string;
+      operator?: QueryFilterOperator;
+    };
+
+/**
+ * Parse user input text to extract property, operator, and value components.
+ * Handles partial input (e.g., user typing "Status !" to complete the operator).
+ */
+function parseQueryText(
+  filteringText: string,
+  filteringProperties: ParsedProperty[],
+): ParsedText {
+  const property = matchFilteringProperty(filteringProperties, filteringText);
+  if (!property) {
+    const freeTextOperator = matchOperator(QUERY_OPERATORS, filteringText);
+    if (freeTextOperator) {
+      return {
+        step: "free-text",
+        operator: freeTextOperator,
+        value: filteringText.substring(freeTextOperator.length).trimStart(),
+      };
+    }
+
+    return {
+      step: "free-text",
+      value: filteringText,
+    };
+  }
+
+  const textWithoutProperty = filteringText
+    .substring(property.propertyLabel.length)
+    .trimStart();
+
+  const operator = matchOperator(QUERY_OPERATORS, textWithoutProperty);
+
+  if (operator) {
+    return {
+      step: "property",
+      property,
+      operator,
+      value: textWithoutProperty.substring(operator.length).trimStart(),
+    };
+  }
+
+  const operatorPrefix = matchOperatorPrefix(
+    QUERY_OPERATORS,
+    textWithoutProperty,
+  );
+
+  if (operatorPrefix !== null) {
+    return { step: "operator", property, operatorPrefix };
+  }
+
+  return {
+    step: "free-text",
+    value: filteringText,
+  };
+}
+
+export { parseQueryText };
+export type { ParsedText };