@orchestrator-ui/orchestrator-ui-components 8.4.4 → 8.5.0

package/src/icons/WfoTrashFilled.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoTrashFilled: FC<WfoIconProps> = ({ color = '#000000' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill={color}>
+    <path
+      fillRule="evenodd"
+      d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/icons/WfoXMarkSmall.tsx

@@ -2,11 +2,11 @@ import React, { FC } from 'react';
 
 import { WfoIconProps } from './WfoIconProps';
 
-export const WfoXMarkSmall: FC<WfoIconProps> = ({ width = 20, height = 20 }) => (
+export const WfoXMarkSmall: FC<WfoIconProps> = ({ width = 20, height = 20, color = '#000' }) => (
   <svg width={width} height={height} viewBox="0 -2 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <title>icon/x-mark</title>
     <g id="Symbols" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-      <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+      <g xmlns="http://www.w3.org/2000/svg" fill={color}>
         <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
       </g>
     </g>

package/src/icons/index.ts

@@ -41,3 +41,4 @@ export * from './WfoPlannedWork';
 export * from './WfoCubeFill';
 export * from './WfoExclamationTriangle';
 export * from './WfoChartBar';
+export * from './WfoTrashFilled';

package/src/messages/en-GB.json

@@ -19,7 +19,7 @@
     "workflows": "Workflows",
     "darkMode": "Dark mode",
     "lightMode": "Light mode",
-    "websocketConnected": "This page receives live updates from the server",
+    "websocketConnected": "This page recexives live updates from the server",
     "websocketDisconnected": "The connection to the server is lost, click the icon or refresh the page",
     "websocketDisconnectedShort": "WebSocket disconnected, click the icon to reconnect",
     "resetToDefault": "Reset to default",
@@ -50,7 +50,16 @@
     "insyncFalse": "out-of-sync",
     "searchModalTitle": "Search string options",
     "searchModalText": "<p>Different options are available from free text search covering all data columns, or column specific filtering. Note that: <p></p><ul><li>Hidden columns are included</li> <li>Searching is case-insensitive</li> <li>Ordering of words does not matter (unless it is a Phrase)</li> <li>TSV (text search vector) search only available for subscriptions table</li></ul></p> <p>For example:</p> <li><b>\"l2vpn\"</b> – free text search</li> <li><b>tag:l2vpn</b> – search in a specific column</li><li><b>tag:lp description:test</b> – search in multiple columns</li><li><b>tag:(lp|lr)</b> – multiselect within 1 column</li><li><b>-tag:lp</b> – negated filter</li><li><b>test*</b> – prefix filter</li> <p></p><p><b>Note:</b> Search words containing characters `|-*():\"` may not be valid, as they are part of the search query grammar</p><p>Invalid search strings are for example:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(planned)\"</li> <li>\"node123|planned\"</li></ul>",
-    "showAllColumnsInDetailView": "Show all columns in detail view"
+    "retrieval": "Retrieval",
+    "retrieverAuto": "Auto",
+    "retrieverFuzzy": "Fuzzy",
+    "retrieverSemantic": "Semantic",
+    "retrieverHybrid": "Hybrid",
+    "createFilter": "Create a filter",
+    "applyFilter": "Apply filter",
+    "removeFilter": "Remove filter",
+    "cancel": "Cancel",
+    "loadMore": "Load more"
   },
   "confirmationDialog": {
     "title": "Please confirm",
@@ -85,7 +94,9 @@
       "startWorkflow": "Start workflow",
       "resumeTask": "Resume task",
       "resumeWorkflow": "Resume workflow",
-      "inputFieldsHaveValidationErrors": "{nrOfValidationErrors} input field(s) have validation errors"
+      "inputFieldsHaveValidationErrors": "{nrOfValidationErrors} input field(s) have validation errors",
+      "preconditionFailedTitle": "This task cannot be started right now",
+      "preconditionFailedFallback": "A precondition for starting this task was not met."
     },
     "widgets": {
       "customer": {
@@ -234,6 +245,12 @@
       "createScheduleButton": "Create schedule"
     }
   },
+  "workflowGuide": {
+    "title": "User guide of {workflowName}",
+    "noGuideAvailable": "No user guide is available for this workflow/task",
+    "show": "Show user guide",
+    "hide": "Hide user guide"
+  },
   "processes": {
     "index": {
       "workflowName": "Workflow",
@@ -358,14 +375,14 @@
         "validateSubscription": "Validate subscription",
         "subscription": {
           "no_modify_deleted_related_objects": "This subscription can not be modified because it contains references to other systems that are deleted.",
-          "no_modify_in_use_by_subscription": "This subscription can not be {action} as it is used in other subscriptions: {unterminated_in_use_by_subscriptions}",
+          "no_modify_in_use_by_subscription": "This subscription can not be {action} as it is used in other subscriptions:",
           "no_modify_invalid_status": "This subscription can not be modified because of the status: {status}. Only subscriptions with status {usable_when} can be {action}.",
           "no_modify_workflow": "This subscription can not be modified as the product has no modify workflows.",
           "no_termination_workflow": "This subscription can not be terminated as the product has no termination workflows.",
           "no_validate_workflow": "This subscription can not be validated as the product has no validate workflows.",
           "not_in_sync": "This subscription can not be modified because it is not in-sync. This means there is some error in the registration of the subscription or that it is being modified by another workflow.",
-          "relations_not_in_sync": "This subscription can not be modified because some related subscriptions are not in-sync. Locked subscriptions: {locked_relations}",
-          "no_modify_subscription_in_use_by_others": "This subscription can not be modified because it is in use by one or more other subscriptions: {unterminated_parents}",
+          "relations_not_in_sync": "This subscription can not be modified because some related subscriptions are not in-sync.\n\nLocked subscriptions:",
+          "no_modify_subscription_in_use_by_others": "This subscription can not be modified because it is in use by one or more other subscriptions.\n\nSubscriptions:",
           "insufficient_workflow_permissions": "Insufficient user permissions to run this workflow",
           "running_process": "This action cannot be started because this subscription already has a running process or task."
         }
@@ -513,6 +530,68 @@
     "logout": "Logout",
     "aoStatusPage": "A&O application status page"
   },
+  "agent": {
+    "title": "Wfo Agent",
+    "availability": {
+      "unavailable": {
+        "title": "Agent Service Not Available",
+        "instructions": {
+          "setAgentEnvironment": {
+            "before": "Set ",
+            "after": " in your service environment variables"
+          },
+          "setSearchEnvironment": {
+            "before": "Set ",
+            "after": " (agent functionality requires search)"
+          },
+          "checkVersion": "Ensure your orchestrator-core version supports agent functionality",
+          "configureOpenAI": "Configure your OpenAI API key if using OpenAI models",
+          "restartService": "Restart your service",
+          "checkDockerConfig": "If using Docker, make sure the environment variables are set in docker-compose.yml"
+        },
+        "documentation": "Please refer to the orchestrator documentation for detailed setup instructions.",
+        "retryButton": "Retry Connection"
+      }
+    },
+    "page": {
+      "filledParameters": "Filled parameters",
+      "emptyGroup": "Empty group",
+      "searchQuery": "Search query",
+      "activeFilters": "Active filters",
+      "noFiltersApplied": "No filters applied",
+      "entityType": "Entity type",
+      "action": "Action",
+      "copilot": {
+        "title": "Database assistant",
+        "initial": "What can I help you with?"
+      },
+      "suggestions": {
+        "findActiveSubscriptions": "Find active subscriptions",
+        "showTerminatedWorkflows": "Show terminated workflows",
+        "listAllSubscriptionsAndExport": "List all subscriptions and export them",
+        "showActiveSubscriptionsPerMonth": "Show the number of active subscriptions per month"
+      },
+      "tools": {
+        "set_filter_tree": "I'm setting up filters",
+        "start_new_search": "I'm starting a new search",
+        "run_search": "I'm executing a search",
+        "discover_filter_paths": "I'm discovering available filters",
+        "run_aggregation": "I'm running aggregations",
+        "prepare_export": "I'm preparing the export",
+        "get_valid_operators": "I'm getting valid operators",
+        "set_temporal_grouping": "I'm setting temporal grouping"
+      },
+      "planProgress": {
+        "planning": "Planning...",
+        "completed": "Plan completed",
+        "executing": "Executing plan ({completed}/{total})"
+      },
+      "visualization": {
+        "noDataAvailable": "No data available for visualization.",
+        "invalidDataStructure": "Invalid data structure."
+      }
+    }
+  },
   "search": {
     "availability": {
       "unavailable": {
@@ -534,7 +613,7 @@
       "selectFieldFirst": "Select a field first",
       "maxNestingDepth": "Maximum nesting depth reached",
       "addNestedGroup": "Add nested group",
-      "addCondition": "Add condition",
+      "addRule": "Add rule",
       "addGroup": "Add group",
       "removeGroup": "Remove group",
       "emptyGroupDescription": "Add conditions or nested groups to build your filter.",
@@ -581,7 +660,14 @@
       "valueLabel": "Value",
       "fieldsGroupLabel": "Fields",
       "componentsGroupLabel": "Components",
-      "pathsCount": "{count} paths"
+      "pathsCount": "{count} paths",
+      "id": "Id",
+      "type": "Entity type",
+      "title": "Title",
+      "score": "Score",
+      "matchingField": "Matching field",
+      "perfectMatch": "Perfect match",
+      "removeRule": "Remove rule"
     },
     "tabs": {
       "subscriptions": "Subscriptions",

package/src/messages/nl-NL.json

@@ -50,7 +50,17 @@
     "insyncFalse": "out-of-sync",
     "showAllColumnsInDetailView": "Toon alle kolommen in detailweergave",
     "searchModalTitle": "Zoekwoorden opties",
-    "searchModalText": "<p>Er zijn verschillende opties beschikbaar: zoeken in vrije tekst voor alle datakolommen en specifiek per kolom te filteren. Houd er rekening mee dat: </p><p></p><ul><li>Verborgen kolommen zijn inbegrepen</li> <li>Zoeken is niet hoofdlettergevoelig</li> <li>De volgorde van woorden doet er niet toe (tenzij het een quote)</li> <li>TSV (text search vector) zoekactie alleen beschikbaar voor subscription tabel</li></ul><p>Bijvoorbeeld:</p> <li><b>\"l2vpn\"</b> – vrije tekst search</li> <li><b>tag:l2vpn</b> – zoeken in een specifieke kolom</li> <li><b>tag:lp beschrijving: test</b> – zoeken in meerdere kolommen</li><li><b>tag:(lp|lr)</b> – multi select binnen 1 kolom</li> <li><b>-tag:lp</b> – omgekeerd filteren</li> <li><b>test*</b> – prefix filter</li> <p></p><p><b>Opmerking:</b> Zoeken op woorden die tekens `|-*():\"` bevatten, zijn mogelijk niet geldig, omdat ze deel uitmaken van de grammatica van de zoekfunctie</p><p>Ongeldige zoekwoorden zijn bijvoorbeeld:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(gepland)\"</li> <li>\"node123|gepland\"</li></ul>"
+    "searchModalText": "<p>Er zijn verschillende opties beschikbaar: zoeken in vrije tekst voor alle datakolommen en specifiek per kolom te filteren. Houd er rekening mee dat: </p><p></p><ul><li>Verborgen kolommen zijn inbegrepen</li> <li>Zoeken is niet hoofdlettergevoelig</li> <li>De volgorde van woorden doet er niet toe (tenzij het een quote)</li> <li>TSV (text search vector) zoekactie alleen beschikbaar voor subscription tabel</li></ul><p>Bijvoorbeeld:</p> <li><b>\"l2vpn\"</b> – vrije tekst search</li> <li><b>tag:l2vpn</b> – zoeken in een specifieke kolom</li> <li><b>tag:lp beschrijving: test</b> – zoeken in meerdere kolommen</li><li><b>tag:(lp|lr)</b> – multi select binnen 1 kolom</li> <li><b>-tag:lp</b> – omgekeerd filteren</li> <li><b>test*</b> – prefix filter</li> <p></p><p><b>Opmerking:</b> Zoeken op woorden die tekens `|-*():\"` bevatten, zijn mogelijk niet geldig, omdat ze deel uitmaken van de grammatica van de zoekfunctie</p><p>Ongeldige zoekwoorden zijn bijvoorbeeld:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(gepland)\"</li> <li>\"node123|gepland\"</li></ul>",
+    "retrieval": "Retrieval",
+    "retrieverAuto": "Auto",
+    "retrieverFuzzy": "Fuzzy",
+    "retrieverSemantic": "Semantic",
+    "retrieverHybrid": "Hybride",
+    "createFilter": "Filter",
+    "applyFilter": "Pas filter tpe",
+    "removeFilter": "Verwijder filter",
+    "cancel": "Cancel",
+    "loadMore": "Meer laden"
   },
   "confirmationDialog": {
     "title": "Graag bevestigen",
@@ -85,7 +95,9 @@
       "startWorkflow": "Start workflow",
       "resumeTask": "Hervat task",
       "resumeWorkflow": "Hervat workflow",
-      "inputFieldsHaveValidationErrors": "{nrOfValidationErrors} input veld(en) hebben validatiefouten"
+      "inputFieldsHaveValidationErrors": "{nrOfValidationErrors} input veld(en) hebben validatiefouten",
+      "preconditionFailedTitle": "Deze workflow kan op dit moment niet worden gestart",
+      "preconditionFailedFallback": "Aan een voorwaarde voor het starten van deze workflow is niet voldaan."
     },
     "widgets": {
       "customer": {
@@ -233,6 +245,12 @@
       "createScheduleButton": "Maak schema"
     }
   },
+  "workflowGuide": {
+    "title": "Gebruikershandleiding van {workflowName}",
+    "noGuideAvailable": "Er is geen gebruikershandleiding beschikbaar voor deze workflow/taak",
+    "show": "Toon gebruikershandleiding",
+    "hide": "Verberg gebruikershandleiding"
+  },
   "processes": {
     "index": {
       "workflowName": "Workflow naam",
@@ -357,14 +375,14 @@
         "lockedBySubscriptions": "Deze actie is geblokkeerd door de volgende subscriptions:",
         "subscription": {
           "no_modify_deleted_related_objects": "Deze subscription kan niet worden gewijzigd omdat het verwijzingen bevat naar andere systemen die zijn verwijderd.",
-          "no_modify_in_use_by_subscription": "Deze subscription kan niet worden {gewijzigd} omdat het wordt gebruikt in andere subscriptions: {unterminated_in_use_by_subscriptions}",
+          "no_modify_in_use_by_subscription": "Deze subscription kan niet worden {gewijzigd} omdat het wordt gebruikt in andere subscriptions:",
           "no_modify_invalid_status": "Deze subscription kan niet worden gewijzigd vanwege de status: {status}. Alleen abonnementen met de status {usable_when} kunnen worden {action}.",
           "no_modify_workflow": "Deze subscription kan niet worden gewijzigd omdat het product geen modify workflows heeft.",
           "no_termination_workflow": "Deze subscription kan niet worden beëindigd omdat het product geen termination workflows heeft.",
           "no_validate_workflow": "Deze subscription kan niet worden gevalideerd omdat het product geen validate workflows heeft.",
           "not_in_sync": "Deze subscription kan niet worden gewijzigd omdat het niet in-sync is. Dit betekent dat er een fout zit in de registratie van de subscription of dat het wordt gewijzigd door een andere workflow.",
-          "relations_not_in_sync": "Deze subscription kan niet worden gewijzigd omdat sommige gerelateerde subscriptions niet in-sync zijn. Geblokkeerde subscriptions: {locked_relations}",
-          "no_modify_subscription_in_use_by_others": "Deze subscription kan niet worden gewijzigd omdat het in gebruik is door een of meer andere subscriptions: {unterminated_parents}",
+          "relations_not_in_sync": "Deze subscription kan niet worden gewijzigd omdat sommige gerelateerde subscriptions niet in-sync zijn.\n\nGeblokkeerde subscriptions:",
+          "no_modify_subscription_in_use_by_others": "Deze subscription kan niet worden gewijzigd omdat het in gebruik is door een of meer andere subscriptions.\n\nSubscriptions:",
           "insufficient_workflow_permissions": "Onvoldoende rechten om deze actie uit te kunnen voeren",
           "running_process": "Deze actie kan niet worden gestart omdat deze subscription al een lopend proces of taak heeft."
         }

package/src/pages/WfoSearchPocPage.tsx

@@ -0,0 +1,402 @@
+import React, { ReactNode, useEffect, useMemo, useState } from 'react';
+import type { RuleGroupType } from 'react-querybuilder';
+import { formatQuery } from 'react-querybuilder/formatQuery';
+import { parseCEL } from 'react-querybuilder/parseCEL';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+
+import { EuiSpacer } from '@elastic/eui';
+
+import { SearchParams, combineSearchFilters } from '@/components';
+import {
+  DEFAULT_PAGE_SIZE,
+  StoredTableConfig,
+  SubscriptionListItem,
+  WfoContentHeader,
+  WfoDataSorting,
+  WfoDateTime,
+  WfoExpandingSearchRow,
+  WfoFilterTabs,
+  WfoFirstPartUUID,
+  WfoInlineJson,
+  WfoInsyncIcon,
+  WfoJsonCodeBlock,
+  WfoStructuredSearchTable,
+  WfoStructuredSearchTableColumnConfig,
+  WfoSubscriptionActions,
+  WfoSubscriptionListTab,
+  WfoSubscriptionNoteEdit,
+  WfoSubscriptionStatusBadge,
+  WfoTableColumnConfig,
+  subscriptionListTabs,
+} from '@/components';
+import { ColumnType, WfoTableProps } from '@/components/WfoTable/WfoTable';
+import { useStoredTableConfig } from '@/hooks';
+import { SearchPayload, useSearchQuery } from '@/rtk';
+import { EntityKind, PaginatedSearchResults, RetrieverType, SortOrder } from '@/types';
+import { parseDateToLocaleDateTimeString } from '@/utils';
+
+const SEARCH_TABLE_LOCAL_STORAGE_KEY = 'SEARCH_TABLE_LOCAL_STORAGE_KEY';
+
+type ResultColumToPropertyMap<T> = Map<string, keyof T>;
+
+const getKeyByValueFromMap = <T,>(resultColumToPropertyMap: ResultColumToPropertyMap<T>, field: keyof T) => {
+  return [...resultColumToPropertyMap.entries()].find(([, v]) => v === field)?.[0] || '';
+};
+
+const getDataFromResponse = <T extends object>(
+  data: PaginatedSearchResults,
+  resultColumToPropertyMap: ResultColumToPropertyMap<T>,
+  uniqueRowId: keyof T,
+): {
+  items: T[];
+  rowExpandingConfiguration?: WfoTableProps<T>['rowExpandingConfiguration'];
+} => {
+  const searchResult = data?.data;
+  if (!searchResult)
+    return {
+      items: [],
+    };
+
+  const responseColumns: Record<string, string | number | null>[] =
+    searchResult.map(({ response_columns }) => response_columns) || [];
+
+  const rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'] = {
+    uniqueRowId: uniqueRowId as keyof WfoTableColumnConfig<T>,
+    uniqueRowIdToExpandedRowMap: searchResult.reduce(
+      (rowMap, { response_columns, score, perfect_match, matching_field }) => {
+        const idColumnInResponseColumn = getKeyByValueFromMap<T>(resultColumToPropertyMap, uniqueRowId);
+        const rowId = response_columns[idColumnInResponseColumn];
+        if (rowId) {
+          rowMap[rowId] = (
+            <WfoExpandingSearchRow score={score} matchingField={matching_field} perfectMatch={perfect_match} />
+          );
+        }
+        return rowMap;
+      },
+      {} as Record<string, ReactNode>,
+    ),
+  };
+
+  const items: T[] = responseColumns.map((responseColumn) => {
+    const item = Object.entries(responseColumn).reduce((acc, [key, value]) => {
+      const itemKey = resultColumToPropertyMap.get(key);
+      if (itemKey) {
+        acc[itemKey] = value as unknown as T[keyof T];
+      }
+      return acc;
+    }, {} as T);
+    return item;
+  });
+
+  return {
+    items,
+    rowExpandingConfiguration,
+  };
+};
+
+const getTotalItemsFromResponse = (data: PaginatedSearchResults | undefined): number | false => {
+  return data?.cursor?.total_items || false;
+};
+
+const resultColumToPropertyMap: ResultColumToPropertyMap<SubscriptionListItem> = new Map([
+  ['subscription.subscription_id', 'subscriptionId'],
+  ['subscription.description', 'description'],
+  ['subscription.status', 'status'],
+  ['subscription.insync', 'insync'],
+  ['subscription.product.name', 'productName'],
+  ['subscription.product.tag', 'tag'],
+  ['subscription.customer_name', 'customerFullname'],
+  ['subscription.customer_abbreviation', 'customerShortcode'],
+  ['subscription.start_date', 'startDate'],
+  ['subscription.end_date', 'endDate'],
+  ['subscription.note', 'note'],
+  ['subscription.metadata', 'metadata'],
+]);
+
+export const WfoSearchPocPage = () => {
+  const t = useTranslations('subscriptions.index');
+  const [activeTab, setActiveTab] = useQueryParam('activeTab', withDefault(StringParam, WfoSubscriptionListTab.ACTIVE));
+  const selectedTab = subscriptionListTabs.find(({ id }) => id === activeTab)?.id ?? WfoSubscriptionListTab.ACTIVE;
+  const getStoredTableConfig = useStoredTableConfig<SubscriptionListItem>(SEARCH_TABLE_LOCAL_STORAGE_KEY);
+  const [retrieverType, setRetrieverType] = useState<RetrieverType>(RetrieverType.Auto);
+
+  // Part of the search endpoint payload that is passed in the q parameter
+  const [queryText, setQueryText] = useState<string>('');
+  const [committedSearchQuery, setCommittedSearchQuery] = useState<string>('');
+
+  // String that is displayed in the filter textarea. This is transformed and if valid passed to the search endpoint in the filter parameter
+  const [filterString, setFilterString] = useState<string>();
+  const [queryBuilderRuleGroup, setQueryBuilderRuleGroup] = useState<RuleGroupType | undefined>();
+  const [committedRuleGroup, setCommittedRuleGroup] = useState<RuleGroupType | undefined>();
+  const [isValidFilterString, setIsValidFilterString] = useState<boolean>(true);
+  const [tableDefaults, setTableDefaults] = useState<StoredTableConfig<SubscriptionListItem>>();
+  const [pageSize, setPageSize] = useState<number>(tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE);
+  const [limit, setLimit] = useState<number>(pageSize);
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [dataSorting, setDataSorting] = useState<WfoDataSorting<SubscriptionListItem>>({
+    field: 'subscriptionId',
+    sortOrder: SortOrder.DESC,
+  });
+
+  // The search payload is derived entirely from the committed search state. Changing any of these
+  // values — including the active tab, whether via a tab click or a browser back/forward that
+  // updates the activeTab URL param — produces a new payload and RTK Query re-runs the search
+  // automatically. No imperative trigger or effect (and no eslint-disable) is needed.
+  // Cursor is stripped from the RTK cache key, so a cursor change appends to the accumulated
+  // result set instead of creating a new cache entry — see search endpoint's merge() logic.
+  const searchPayload: SearchPayload = useMemo(() => {
+    const filters = combineSearchFilters(committedRuleGroup, selectedTab);
+    const order_by = {
+      element: getKeyByValueFromMap(resultColumToPropertyMap, dataSorting.field),
+      direction: dataSorting.sortOrder.toLowerCase(),
+    };
+    return {
+      query: committedSearchQuery,
+      limit,
+      entity_type: EntityKind.SUBSCRIPTION,
+      response_columns: Array.from(resultColumToPropertyMap.keys()),
+      order_by,
+      ...(retrieverType !== RetrieverType.Auto && { retriever: retrieverType }),
+      ...(filters && { filters }),
+      ...(cursor && { cursor }),
+    };
+  }, [committedSearchQuery, committedRuleGroup, selectedTab, retrieverType, limit, dataSorting, cursor]);
+
+  const { data, isFetching } = useSearchQuery(searchPayload);
+
+  useEffect(() => {
+    const storedConfig = getStoredTableConfig();
+    if (storedConfig) {
+      setTableDefaults(storedConfig);
+    }
+  }, [getStoredTableConfig]);
+
+  const tableColumnConfig: WfoStructuredSearchTableColumnConfig<SubscriptionListItem> = {
+    actions: {
+      columnType: ColumnType.CONTROL,
+      width: '50px',
+      renderControl: (row) => <WfoSubscriptionActions compactMode={true} subscriptionId={row.subscriptionId} />,
+    },
+    subscriptionId: {
+      columnType: ColumnType.DATA,
+      label: t('id'),
+      width: '100px',
+      renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+      renderDetails: (value) => value,
+      renderTooltip: (value) => value,
+      isSortable: true,
+    },
+    description: {
+      columnType: ColumnType.DATA,
+      label: t('description'),
+      width: '500px',
+      renderData: (value, record) => <Link href={`/subscriptions/${record.subscriptionId}`}>{value}</Link>,
+      renderTooltip: (value) => value,
+    },
+    status: {
+      columnType: ColumnType.DATA,
+      label: t('status'),
+      width: '120px',
+      renderData: (value) => <WfoSubscriptionStatusBadge status={value} />,
+    },
+    insync: {
+      columnType: ColumnType.DATA,
+      label: t('insync'),
+      width: '75px',
+      renderData: (value) => <WfoInsyncIcon inSync={value} />,
+    },
+    productName: {
+      columnType: ColumnType.DATA,
+      width: '260px',
+      label: t('product'),
+    },
+    tag: {
+      columnType: ColumnType.DATA,
+      label: t('tag'),
+      width: '100px',
+    },
+    customerFullname: {
+      columnType: ColumnType.DATA,
+      label: t('customerFullname'),
+    },
+    customerShortcode: {
+      columnType: ColumnType.DATA,
+      label: t('customerShortcode'),
+      width: '150px',
+    },
+    startDate: {
+      columnType: ColumnType.DATA,
+      label: t('startDate'),
+      width: '100px',
+      renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+      renderDetails: parseDateToLocaleDateTimeString,
+      clipboardText: parseDateToLocaleDateTimeString,
+      renderTooltip: (cellValue) => cellValue?.toString(),
+    },
+    endDate: {
+      columnType: ColumnType.DATA,
+      label: t('endDate'),
+      width: '100px',
+      renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+      renderDetails: parseDateToLocaleDateTimeString,
+      clipboardText: parseDateToLocaleDateTimeString,
+      renderTooltip: (cellValue) => cellValue?.toString(),
+    },
+    note: {
+      columnType: ColumnType.DATA,
+      label: t('note'),
+      width: '300px',
+      renderData: (cellValue, row) => {
+        return (
+          <WfoSubscriptionNoteEdit
+            onlyShowOnHover={true}
+            endpointName={''}
+            queryVariables={{}}
+            subscriptionId={row.subscriptionId}
+            note={cellValue}
+          />
+        );
+      },
+    },
+    metadata: {
+      columnType: ColumnType.DATA,
+      label: t('metadata'),
+      width: '100px',
+      renderData: (value) => <WfoInlineJson data={value} />,
+      renderDetails: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle />,
+      renderTooltip: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle={false} />,
+    },
+  };
+
+  const handleApplyFilter = (searchParams?: SearchParams) => {
+    setCommittedRuleGroup(searchParams?.ruleGroup === false ? undefined : queryBuilderRuleGroup);
+    setCursor(undefined);
+  };
+
+  const onChangeQueryText = (queryText: string) => {
+    setQueryText(queryText);
+  };
+
+  const onSearchQueryText = (queryText: string) => {
+    setQueryText(queryText);
+    setCommittedSearchQuery(queryText);
+    setCursor(undefined);
+  };
+
+  const onUpdateRetrieverType = (retrieverType: RetrieverType) => {
+    setRetrieverType(retrieverType);
+    setCursor(undefined);
+  };
+
+  const handleChangeTab = (updatedTab: WfoSubscriptionListTab) => {
+    setActiveTab(updatedTab);
+    setLimit(pageSize);
+    setCursor(undefined);
+  };
+
+  const safeCelParse = (celString: string) => {
+    try {
+      const ruleGroup = parseCEL(celString);
+      if (celString === '') {
+        setIsValidFilterString(true);
+      } else if (ruleGroup?.rules?.length > 0) {
+        // parseCEL returns a query object — check if it has any rules
+        setIsValidFilterString(true);
+        setQueryBuilderRuleGroup(ruleGroup);
+      } else {
+        // If there are no rules created based on this string then
+        // we assume the string is not valid. In any case it will not do anything
+        // to the search results
+        setIsValidFilterString(false);
+      }
+    } catch {
+      setIsValidFilterString(false);
+    }
+  };
+
+  const onUpdateQueryBuilder = (ruleGroup: RuleGroupType | false) => {
+    if (ruleGroup === false) {
+      setQueryBuilderRuleGroup(undefined);
+      setFilterString('');
+      setIsValidFilterString(true);
+    } else {
+      setQueryBuilderRuleGroup({ ...ruleGroup });
+      const celQuery = formatQuery({ ...ruleGroup }, { format: 'cel', fallbackExpression: '' });
+      // 1 == 1 indicates the query can't be parsed. This is a fallback to allow it to still be used as
+      // part of other queries.
+      if (!celQuery || celQuery === '1 == 1') {
+        setFilterString('');
+        setIsValidFilterString(true);
+      } else {
+        setFilterString(celQuery);
+        setIsValidFilterString(true);
+      }
+    }
+  };
+
+  const onUpdateFilterString = (filterString: string) => {
+    setFilterString(filterString);
+    safeCelParse(filterString);
+  };
+
+  const { items: subscriptionListItems, rowExpandingConfiguration } =
+    data ? getDataFromResponse<SubscriptionListItem>(data, resultColumToPropertyMap, 'subscriptionId') : { items: [] };
+
+  const totalItems = getTotalItemsFromResponse(data);
+  const hasNextPage = data?.page_info?.has_next_page ?? false;
+  const nextPageCursor = data?.page_info?.next_page_cursor ?? undefined;
+
+  const onShowMore = () => {
+    if (!isFetching && nextPageCursor) {
+      setCursor(nextPageCursor);
+    }
+  };
+
+  const onUpdateDataSorting = ({ field, sortOrder }: WfoDataSorting<SubscriptionListItem>) => {
+    setDataSorting({ field, sortOrder });
+    setLimit(pageSize);
+    setCursor(undefined);
+  };
+
+  return (
+    <>
+      <WfoContentHeader title="Subscriptions (POC)" />
+      <WfoFilterTabs
+        tabs={subscriptionListTabs}
+        selectedTab={selectedTab}
+        translationNamespace="subscriptions.tabs"
+        onChangeTab={handleChangeTab}
+      />
+      <EuiSpacer size="l" />
+      <WfoStructuredSearchTable<SubscriptionListItem>
+        data={subscriptionListItems}
+        rowExpandingConfiguration={rowExpandingConfiguration}
+        defaultHiddenColumns={tableDefaults?.hiddenColumns}
+        filterString={filterString}
+        handleSearch={handleApplyFilter}
+        isLoading={isFetching}
+        dataSorting={[dataSorting]}
+        isValidFilterString={isValidFilterString}
+        localStorageKey={SEARCH_TABLE_LOCAL_STORAGE_KEY}
+        onUpdateFilterString={onUpdateFilterString}
+        onUpdateQueryBuilder={onUpdateQueryBuilder}
+        onChangeQueryText={onChangeQueryText}
+        onSearchQueryText={onSearchQueryText}
+        onShowMore={onShowMore}
+        onUpdateRetrieverType={onUpdateRetrieverType}
+        queryBuilderRuleGroup={queryBuilderRuleGroup}
+        queryText={queryText}
+        retrieverType={retrieverType}
+        tableColumnConfig={tableColumnConfig}
+        pageSize={pageSize}
+        onUpdateDataSorting={onUpdateDataSorting}
+        setPageSize={setPageSize}
+        totalItems={totalItems}
+        hasNextPage={hasNextPage}
+      />
+    </>
+  );
+};