@navikt/ds-react 8.4.1 → 8.5.1

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

@@ -0,0 +1,244 @@
+import type { ParsedOption, ParsedProperty } from "../TokenFilter.types";
+import { type ParsedText, QUERY_OPERATORS } from "./parse-query-text";
+
+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:
+ *
+ * Step: "free-text" + empty value:
+ * - Group: "Properties" with all properties.
+ *
+ * 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"))
+ */
+
+/**
+ * TODO: Update based on instructions above.
+ */
+function generateAutoCompleteOptions(
+  queryState: ParsedText,
+  filteringProperties: ParsedProperty[] = [],
+  filteringOptions: ParsedOption[] = [],
+) {
+  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,
+    );
+
+    return {
+      value: queryState.value,
+      options: [
+        {
+          label: groupValuesLabel,
+          options: options.map(({ label, value, tags, filteringTags }) => ({
+            value: buildQueryString(propertyLabel, queryState.operator, value),
+            label,
+            tags,
+            filteringTags,
+          })),
+        },
+      ],
+    };
+  }
+  if (queryState.step === "operator") {
+    return {
+      value: buildQueryString(
+        queryState.property.propertyLabel,
+        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 === "!:"
+  );
+
+  return {
+    value: queryState.value,
+    options: [
+      ...(needsPropertySuggestions
+        ? generatePropertySuggestions(filteringProperties)
+        : []),
+      ...(needsValueSuggestions
+        ? generateAllValueSuggestions(filteringOptions)
+        : []),
+    ],
+  };
+}
+
+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,
+  };
+}
+
+function generateAllValueSuggestions(
+  filteringOptions: ParsedOption[] = [],
+): OptionGroup<AutoCompleteOption>[] {
+  const groups: Record<string, OptionGroup<AutoCompleteOption>> = {};
+
+  for (const option of filteringOptions) {
+    if (!option || !option.property) {
+      continue;
+    }
+
+    const groupLabel = option.property.groupValuesLabel || "Values";
+
+    if (!groups[groupLabel]) {
+      groups[groupLabel] = {
+        label: groupLabel,
+        options: [],
+      };
+    }
+
+    const { label, value, tags, filteringTags, property } = option;
+    const options = QUERY_OPERATORS.map((operator) =>
+      createAutoCompleteOption(
+        property.propertyLabel,
+        operator,
+        value,
+        label,
+        tags,
+        filteringTags,
+      ),
+    );
+
+    groups[groupLabel].options.push(...options);
+  }
+
+  return Object.values(groups);
+}
+
+function generatePropertySuggestions(
+  filteringProperties: ParsedProperty[] = [],
+): OptionGroup<ParsedProperty>[] {
+  const defaultGroup: OptionGroup<ParsedProperty> = {
+    label: "Properties",
+    options: [],
+  };
+  const customGroups: Record<string, OptionGroup<ParsedProperty>> = {};
+
+  for (const property of filteringProperties) {
+    if (!property) {
+      continue;
+    }
+    const groupLabel = property.propertyGroup?.trim();
+
+    if (groupLabel) {
+      if (!customGroups[groupLabel]) {
+        customGroups[groupLabel] = {
+          label: groupLabel,
+          options: [],
+        };
+      }
+      customGroups[groupLabel].options.push(property);
+      continue;
+    }
+
+    defaultGroup.options.push(property);
+  }
+
+  const groups: OptionGroup<ParsedProperty>[] = [
+    ...Object.values(customGroups),
+  ];
+
+  if (defaultGroup.options.length > 0) {
+    groups.push(defaultGroup);
+  }
+
+  return groups;
+}
+
+export { generateAutoCompleteOptions };

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

@@ -0,0 +1,410 @@
+import { describe, expect, test } from "vitest";
+import type {
+  ParsedProperty,
+  QueryFilteringProperty,
+} from "../TokenFilter.types";
+import { QUERY_OPERATORS, 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,
+}));
+
+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);
+      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("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);
+      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");
+    });
+  });
+});