@navikt/ds-react 8.5.2 → 8.7.0

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

@@ -1,12 +1,12 @@
 import type { AutoCompleteOption, OptionGroup } from "../AutoSuggest.types";
 import type {
-  ParsedOption,
-  ParsedProperty,
-  QueryFilterOperator,
+  InternalParsedTextState,
+  InternalPropertyDefinition,
+  InternalPropertyOption,
+  OperatorT,
 } 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";
 
@@ -23,11 +23,16 @@ import { matchesFilterText } from "./text-matching";
  *   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>[];
+};
+
 function generateAutoCompleteOptions(
-  queryState: ParsedText,
-  filteringProperties: ParsedProperty[] = [],
-  filteringOptions: ParsedOption[] = [],
-) {
+  queryState: InternalParsedTextState,
+  filteringProperties: InternalPropertyDefinition[] = [],
+  filteringOptions: InternalPropertyOption[] = [],
+): AutoCompleteResult {
   /* State: Property and operator are matched, suggest values */
   if (queryState.step === "property") {
     const filterText = queryState.value || "";
@@ -51,7 +56,7 @@ function generateAutoCompleteOptions(
     );
 
     const partialQuery = buildQueryString(
-      queryState.property.propertyLabel,
+      queryState.property.label,
       queryState.operatorPrefix,
       "",
     );
@@ -60,9 +65,6 @@ function generateAutoCompleteOptions(
      * 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".
-     *
-     * TODO: When per-property operator configuration is implemented,
-     * this could also occur when a property restricts which operators are valid.
      */
     if (operators.length === 0) {
       return {
@@ -105,11 +107,14 @@ function generateAutoCompleteOptions(
    */
   return {
     value: queryState.value,
-    options: createValueSuggestions(
-      filteringOptions,
-      queryState.operator ?? "=",
-      queryState.value,
-    ),
+    options: [
+      ...generatePropertySuggestions(filteringProperties, queryState.value),
+      ...createValueSuggestions(
+        filteringOptions,
+        queryState.operator ?? "=",
+        queryState.value,
+      ),
+    ],
   };
 }
 
@@ -127,8 +132,8 @@ function generateAutoCompleteOptions(
  * 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[] {
+  property: InternalPropertyDefinition,
+): OperatorT[] {
   const { operators } = property;
 
   /* If no operators configured, return all available operators */
@@ -146,8 +151,8 @@ function getValidOperatorsForProperty(
 
   /* Filter to only valid QUERY_OPERATORS to ensure type safety */
   return operatorStrings.filter((op) =>
-    QUERY_OPERATORS.includes(op as QueryFilterOperator),
-  ) as QueryFilterOperator[];
+    QUERY_OPERATORS.includes(op as OperatorT),
+  ) as OperatorT[];
 }
 
 /**
@@ -155,9 +160,9 @@ function getValidOperatorsForProperty(
  * If the prefix is empty, all operators are returned.
  */
 function filterOperatorsByPrefix(
-  operators: QueryFilterOperator[],
+  operators: OperatorT[],
   prefix: string,
-): QueryFilterOperator[] {
+): OperatorT[] {
   if (!prefix) {
     return operators;
   }
@@ -166,10 +171,10 @@ function filterOperatorsByPrefix(
 }
 
 function generatePropertySuggestions(
-  filteringProperties: ParsedProperty[] = [],
+  filteringProperties: InternalPropertyDefinition[] = [],
   filterText = "",
-): OptionGroup<ParsedProperty>[] {
-  const filteredProperties: ParsedProperty[] = [];
+): OptionGroup<AutoCompleteOption>[] {
+  const filteredProperties: InternalPropertyDefinition[] = [];
 
   for (const property of filteringProperties) {
     if (!property) {
@@ -178,11 +183,7 @@ function generatePropertySuggestions(
 
     if (
       matchesFilterText(
-        [
-          property.propertyLabel,
-          property.groupValuesLabel,
-          property.propertyGroup,
-        ].filter(Boolean),
+        [property.label, property.groupLabel, property.group].filter(Boolean),
         filterText,
       )
     ) {
@@ -190,15 +191,23 @@ function generatePropertySuggestions(
     }
   }
 
-  return createGroups(
+  const groups = createGroups(
     filteredProperties,
-    (property) => property.propertyGroup,
+    (property) => property.group,
     "Properties",
   );
+
+  return groups.map((group) => ({
+    label: group.label,
+    options: group.options.map((property) => ({
+      value: buildQueryString(property.label, "", ""),
+      label: property.label,
+    })),
+  }));
 }
 
 function generateOperatorSuggestions(
-  property: ParsedProperty,
+  property: InternalPropertyDefinition,
   operatorPrefix = "",
 ): OptionGroup<AutoCompleteOption>[] {
   const operators = filterOperatorsByPrefix(
@@ -214,8 +223,8 @@ function generateOperatorSuggestions(
     {
       label: "Operators",
       options: operators.map((operator) => ({
-        value: buildQueryString(property.propertyLabel, operator, ""),
-        label: buildQueryString(property.propertyLabel, operator, ""),
+        value: buildQueryString(property.label, operator, ""),
+        label: buildQueryString(property.label, operator, ""),
         description: OPERATOR_LABELS[operator] ?? "",
       })),
     },
@@ -226,12 +235,15 @@ function generateOperatorSuggestions(
  * 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,
+  filteringOptions: InternalPropertyOption[] = [],
+  operator: OperatorT,
   filterText = "",
-  scopedProperty?: ParsedProperty,
+  scopedProperty?: InternalPropertyDefinition,
 ): OptionGroup<AutoCompleteOption>[] {
   const groups: Record<string, OptionGroup<AutoCompleteOption>> = {};
 
@@ -246,14 +258,10 @@ function createValueSuggestions(
     }
 
     /* Build search fields */
-    const searchFields = [
-      option.label,
-      ...(option.tags ?? []),
-      ...(option.filteringTags ?? []),
-    ];
+    const searchFields = [option.label, ...(option.tags ?? [])];
 
     if (!scopedProperty) {
-      searchFields.push(option.property.propertyLabel);
+      searchFields.push(option.property.label);
     }
 
     const matches = matchesFilterText(searchFields.filter(Boolean), filterText);
@@ -262,7 +270,7 @@ function createValueSuggestions(
       continue;
     }
 
-    const groupLabel = option.property.groupValuesLabel || "Values";
+    const groupLabel = option.property.groupLabel || "Values";
 
     if (!groups[groupLabel]) {
       groups[groupLabel] = {
@@ -272,14 +280,9 @@ function createValueSuggestions(
     }
 
     groups[groupLabel].options.push({
-      value: buildQueryString(
-        option.property.propertyLabel,
-        operator,
-        option.value,
-      ),
-      label: option.label,
+      value: buildQueryString(option.property.label, operator, option.value),
+      label: buildQueryString(option.property.label, operator, option.value),
       tags: option.tags,
-      filteringTags: option.filteringTags,
     });
   }
 

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import type { ParsedProperty } from "../TokenFilter.types";
+import type { InternalPropertyDefinition } from "../TokenFilter.types";
 import {
   QUERY_OPERATORS,
   matchFilteringProperty,
@@ -109,44 +109,44 @@ describe("matchOperator", () => {
 });
 
 describe("matchFilteringProperty", () => {
-  const properties: ParsedProperty[] = [
+  const properties: InternalPropertyDefinition[] = [
     {
-      propertyKey: "status",
-      propertyLabel: "Status",
-      groupValuesLabel: "",
-      propertyGroup: "testgroup",
+      key: "status",
+      label: "Status",
+      groupLabel: "",
+      group: "testgroup",
       externalProperty: {} as any,
       operators: [],
     },
     {
-      propertyKey: "hostname",
-      propertyLabel: "Hostname",
-      groupValuesLabel: "",
-      propertyGroup: "testgroup",
+      key: "hostname",
+      label: "Hostname",
+      groupLabel: "",
+      group: "testgroup",
       externalProperty: {} as any,
       operators: [],
     },
     {
-      propertyKey: "instance-id",
-      propertyLabel: "Instance ID",
-      groupValuesLabel: "",
-      propertyGroup: "testgroup",
+      key: "instance-id",
+      label: "Instance ID",
+      groupLabel: "",
+      group: "testgroup",
       externalProperty: {} as any,
       operators: [],
     },
     {
-      propertyKey: "region",
-      propertyLabel: "Region",
-      groupValuesLabel: "",
-      propertyGroup: "testgroup",
+      key: "region",
+      label: "Region",
+      groupLabel: "",
+      group: "testgroup",
       externalProperty: {} as any,
       operators: [],
     },
     {
-      propertyKey: "availability-zone",
-      propertyLabel: "Availability Zone",
-      groupValuesLabel: "",
-      propertyGroup: "testgroup",
+      key: "availability-zone",
+      label: "Availability Zone",
+      groupLabel: "",
+      group: "testgroup",
       externalProperty: {} as any,
       operators: [],
     },
@@ -154,27 +154,27 @@ describe("matchFilteringProperty", () => {
 
   test("should match a basic property", () => {
     const result = matchFilteringProperty(properties, "Status");
-    expect(result?.propertyKey).toBe("status");
+    expect(result?.key).toBe("status");
   });
 
   test("should match property case-insensitively", () => {
     const result = matchFilteringProperty(properties, "status");
-    expect(result?.propertyKey).toBe("status");
+    expect(result?.key).toBe("status");
   });
 
   test("should match property with mixed casing", () => {
     const result = matchFilteringProperty(properties, "sTaTuS");
-    expect(result?.propertyKey).toBe("status");
+    expect(result?.key).toBe("status");
   });
 
   test("should use longest matching property when properties overlap", () => {
     const result = matchFilteringProperty(properties, "Instance ID");
-    expect(result?.propertyKey).toBe("instance-id");
+    expect(result?.key).toBe("instance-id");
   });
 
   test("should prefer longest property: Availability Zone vs Zone", () => {
     const result = matchFilteringProperty(properties, "Availability Zone");
-    expect(result?.propertyKey).toBe("availability-zone");
+    expect(result?.key).toBe("availability-zone");
   });
 
   test("should return undefined when no property matches", () => {
@@ -189,12 +189,12 @@ describe("matchFilteringProperty", () => {
 
   test("should match property from partial input", () => {
     const result = matchFilteringProperty(properties, "Status=value");
-    expect(result?.propertyKey).toBe("status");
+    expect(result?.key).toBe("status");
   });
 
   test("should match property with spaces in label", () => {
     const result = matchFilteringProperty(properties, "Instance ID:value");
-    expect(result?.propertyKey).toBe("instance-id");
+    expect(result?.key).toBe("instance-id");
   });
 });
 

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

@@ -1,11 +1,14 @@
-import type { ParsedProperty, QueryFilterOperator } from "../TokenFilter.types";
+import type {
+  InternalPropertyDefinition,
+  OperatorT,
+} 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> = {
+const Operators: Record<OperatorT, null> = {
   ">=": null,
   "<=": null,
   "!=": null,
@@ -18,16 +21,16 @@ const Operators: Record<QueryFilterOperator, null> = {
   "<": null,
 };
 
-const QUERY_OPERATORS: QueryFilterOperator[] = Object.keys(Operators);
+const QUERY_OPERATORS: OperatorT[] = 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[],
+  allowedOperators: OperatorT[],
   text: string,
-): QueryFilterOperator | undefined {
+): OperatorT | undefined {
   return allowedOperators.find((operator) =>
     text.toLowerCase().startsWith(operator.toLowerCase()),
   );
@@ -42,18 +45,15 @@ function matchOperator(
  * Result: { propertyLabel: "Instance ID" }
  */
 function matchFilteringProperty(
-  filteringProperties: ParsedProperty[],
+  filteringProperties: InternalPropertyDefinition[],
   text: string,
-): ParsedProperty | undefined {
+): InternalPropertyDefinition | undefined {
   const lowerText = text.toLowerCase();
-  let bestMatch: ParsedProperty | undefined;
+  let bestMatch: InternalPropertyDefinition | undefined;
 
   for (const prop of filteringProperties) {
-    if (lowerText.startsWith(prop.propertyLabel.toLowerCase())) {
-      if (
-        !bestMatch ||
-        prop.propertyLabel.length > bestMatch.propertyLabel.length
-      ) {
+    if (lowerText.startsWith(prop.label.toLowerCase())) {
+      if (!bestMatch || prop.label.length > bestMatch.label.length) {
         bestMatch = prop;
       }
     }
@@ -67,7 +67,7 @@ function matchFilteringProperty(
  * Returns the prefix if valid, null otherwise.
  */
 function matchOperatorPrefix(
-  allowedOperators: QueryFilterOperator[],
+  allowedOperators: OperatorT[],
   filteringText: string,
 ): string | null {
   const trimmedText = filteringText.trim();
@@ -84,8 +84,8 @@ function matchOperatorPrefix(
 }
 
 export {
-  QUERY_OPERATORS,
-  matchOperator,
   matchFilteringProperty,
+  matchOperator,
   matchOperatorPrefix,
+  QUERY_OPERATORS,
 };

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

@@ -1,52 +1,54 @@
 import { describe, expect, test } from "vitest";
 import type {
-  ParsedProperty,
-  QueryFilteringProperty,
+  ExternalPropertyDefinition,
+  InternalParsedTextState,
+  InternalPropertyDefinition,
 } from "../TokenFilter.types";
 import { parseQueryText } from "./parse-query-text";
-import type { ParsedText } from "./parse-query-text";
 
-const properties: QueryFilteringProperty[] = [
+const properties: ExternalPropertyDefinition[] = [
   {
-    groupValuesLabel: "",
+    groupLabel: "",
     group: "testgroup",
     key: "status",
-    propertyLabel: "Status",
+    label: "Status",
   },
   {
-    groupValuesLabel: "",
+    groupLabel: "",
     group: "testgroup",
     key: "hostname",
-    propertyLabel: "Hostname",
+    label: "Hostname",
   },
   {
-    groupValuesLabel: "",
+    groupLabel: "",
     group: "testgroup",
     key: "instance-id",
-    propertyLabel: "Instance ID",
+    label: "Instance ID",
   },
   {
-    groupValuesLabel: "",
+    groupLabel: "",
     group: "testgroup",
     key: "region",
-    propertyLabel: "Region",
+    label: "Region",
   },
   {
-    groupValuesLabel: "",
+    groupLabel: "",
     group: "testgroup",
     key: "availability-zone",
-    propertyLabel: "Availability Zone",
+    label: "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 ?? [],
-}));
+const parsedProperties: InternalPropertyDefinition[] = properties.map(
+  (prop) => ({
+    key: prop.key,
+    label: prop.label,
+    groupLabel: prop.groupLabel ?? "",
+    group: prop.group ?? "",
+    externalProperty: prop,
+    operators: prop.operators ?? [],
+  }),
+);
 
 describe("parseQueryText", () => {
   describe("value extraction", () => {
@@ -54,7 +56,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status=active", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.value).toBe("active");
@@ -64,7 +66,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status=   active", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.value).toBe("active");
@@ -74,7 +76,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status=", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.value).toBe("");
@@ -84,7 +86,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status=   ", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.value).toBe("");
@@ -97,7 +99,7 @@ describe("parseQueryText", () => {
       );
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.value).toBe("active and running");
@@ -107,7 +109,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Instance ID=server-123", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.value).toBe("server-123");
@@ -119,7 +121,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status   =value", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.operator).toBe("=");
@@ -130,7 +132,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status >value", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
       expect(propertyResult.operator).toBe(">");
@@ -141,7 +143,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status   ", parsedProperties);
       expect(result.step).toBe("operator");
       const operatorResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "operator" }
       >;
       expect(operatorResult.operatorPrefix).toBe("");
@@ -163,7 +165,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Status", parsedProperties);
       expect(result.step).toBe("operator");
       const operatorResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "operator" }
       >;
       expect(operatorResult.operatorPrefix).toBe("");
@@ -173,10 +175,10 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Instance ID:value", parsedProperties);
       expect(result.step).toBe("property");
       const propertyResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "property" }
       >;
-      expect(propertyResult.property.propertyKey).toBe("instance-id");
+      expect(propertyResult.property.key).toBe("instance-id");
       expect(propertyResult.operator).toBe(":");
       expect(propertyResult.value).toBe("value");
     });
@@ -187,7 +189,7 @@ describe("parseQueryText", () => {
       const result = parseQueryText("Random text", parsedProperties);
       expect(result.step).toBe("free-text");
       const freeTextResult = result as Extract<
-        ParsedText,
+        InternalParsedTextState,
         { step: "free-text" }
       >;
       expect(freeTextResult.value).toBe("Random text");

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

@@ -1,4 +1,7 @@
-import type { ParsedProperty, QueryFilterOperator } from "../TokenFilter.types";
+import type {
+  InternalParsedTextState,
+  InternalPropertyDefinition,
+} from "../TokenFilter.types";
 import {
   QUERY_OPERATORS,
   matchFilteringProperty,
@@ -6,35 +9,14 @@ import {
   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 {
+  filteringProperties: InternalPropertyDefinition[],
+): InternalParsedTextState {
   const property = matchFilteringProperty(filteringProperties, filteringText);
   if (!property) {
     const freeTextOperator = matchOperator(QUERY_OPERATORS, filteringText);
@@ -53,7 +35,7 @@ function parseQueryText(
   }
 
   const textWithoutProperty = filteringText
-    .substring(property.propertyLabel.length)
+    .substring(property.label.length)
     .trimStart();
 
   const operator = matchOperator(QUERY_OPERATORS, textWithoutProperty);
@@ -83,4 +65,3 @@ function parseQueryText(
 }
 
 export { parseQueryText };
-export type { ParsedText };