@orchestrator-ui/orchestrator-ui-components 5.1.0 → 5.2.0

package/dist/index.js

@@ -4922,10 +4922,10 @@ var require_markup = __commonJS({
 var require_css = __commonJS({
   "../../node_modules/refractor/lang/css.js"(exports, module) {
     "use strict";
-    module.exports = css47;
-    css47.displayName = "css";
-    css47.aliases = [];
-    function css47(Prism) {
+    module.exports = css48;
+    css48.displayName = "css";
+    css48.aliases = [];
+    function css48(Prism) {
       ;
       (function(Prism2) {
         var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
@@ -5192,7 +5192,7 @@ var require_core = __commonJS({
     var decode = require_parse_entities();
     var Prism = require_prism_core();
     var markup = require_markup();
-    var css47 = require_css();
+    var css48 = require_css();
     var clike = require_clike();
     var js = require_javascript();
     restore();
@@ -5208,7 +5208,7 @@ var require_core = __commonJS({
     refract.registered = registered;
     refract.listLanguages = listLanguages;
     register(markup);
-    register(css47);
+    register(css48);
     register(clike);
     register(js);
     refract.util.encode = encode;
@@ -15304,10 +15304,10 @@ var require_jsstacktrace = __commonJS({
 var require_jsx = __commonJS({
   "../../node_modules/refractor/lang/jsx.js"(exports, module) {
     "use strict";
-    module.exports = jsx258;
-    jsx258.displayName = "jsx";
-    jsx258.aliases = [];
-    function jsx258(Prism) {
+    module.exports = jsx259;
+    jsx259.displayName = "jsx";
+    jsx259.aliases = [];
+    function jsx259(Prism) {
       ;
       (function(Prism2) {
         var javascript = Prism2.util.clone(Prism2.languages.javascript);
@@ -26766,6 +26766,7 @@ var IPAM_PREFIX_FILTERS_ENDPOINT = `${IPAM_ENDPOINT}/prefix_filters`;
 var IPAM_IP_BLOCKS_ENDPOINT = `${IPAM_ENDPOINT}/ip_blocks`;
 var IPAM_FREE_SUBNETS_ENDPOINT = `${IPAM_ENDPOINT}/free_subnets`;
 var SUBSCRIPTION_ACTIONS_ENDPOINT = "subscriptions/workflows";
+var SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT = "surf/subscriptions/dropdown-options";
 var CUSTOMER_DESCRIPTION_ENDPOINT = "/subscription_customer_descriptions";
 var METADATA_PRODUCT_ENDPOINT = "products";
 var METADATA_PRODUCT_BLOCK_ENDPOINT = "product_blocks";
@@ -26798,7 +26799,7 @@ var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
 })(PolicyResource || {});
 
 // src/configuration/version.ts
-var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.1.0";
+var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.2.0";
 
 // src/types/types.ts
 var EngineStatus = /* @__PURE__ */ ((EngineStatus3) => {
@@ -33261,7 +33262,7 @@ var catchErrorResponse = async (response, authActive) => {
 var orchestratorApi = createApi2({
   reducerPath: "orchestratorApi",
   baseQuery: (args, api, extraOptions) => {
-    const { baseQueryType, apiName } = extraOptions || {};
+    const { baseQueryType, apiName, paramsSerializer } = extraOptions || {};
     const state = api.getState();
     const { orchestratorApiBaseUrl, graphqlEndpointCore, authActive } = state.orchestratorConfig;
     const customApi = state.customApis?.find(
@@ -33272,6 +33273,7 @@ var orchestratorApi = createApi2({
         const fetchFn = fetchBaseQuery({
           baseUrl: customApi ? customApi.apiBaseUrl : orchestratorApiBaseUrl,
           prepareHeaders,
+          paramsSerializer,
           responseHandler: (response) => catchErrorResponse(response, authActive)
         });
         return fetchFn(args, api, {});
@@ -35207,57 +35209,6 @@ var subscriptionListSummaryApi = orchestratorApi.injectEndpoints({
 });
 var { useGetSubscriptionSummaryListQuery } = subscriptionListSummaryApi;
 
-// src/rtk/endpoints/subscriptionsDropdownOptions.ts
-var subscriptionsDropdownOptionsQuery = `
-    query SubscriptionDropdownOptions(
-        $filterBy: [GraphqlFilter!]
-        $first: Int!
-    ) {
-        subscriptions(filterBy: $filterBy, first: $first, after: 0) {
-            page {
-                description
-                subscriptionId
-                product {
-                    tag
-                    productId
-                }
-                customer {
-                    fullname
-                    customerId
-                }
-                productBlockInstances {
-                    id
-                    ownerSubscriptionId
-                    parent
-                    productBlockInstanceValues
-                    subscriptionInstanceId
-                }
-                fixedInputs
-            }
-        }
-    }
-`;
-var subscriptionsDropdownOptionsApi = orchestratorApi.injectEndpoints({
-  endpoints: (builder) => ({
-    getSubscriptionsDropdownOptions: builder.query({
-      query: (variables) => ({
-        document: subscriptionsDropdownOptionsQuery,
-        variables: {
-          ...variables,
-          first: NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS
-        }
-      }),
-      transformResponse: (response) => {
-        const subscriptionDropdownOptions = response.subscriptions.page || [];
-        return {
-          subscriptionDropdownOptions
-        };
-      }
-    })
-  })
-});
-var { useGetSubscriptionsDropdownOptionsQuery } = subscriptionsDropdownOptionsApi;
-
 // src/rtk/endpoints/forms.ts
 var PROCESS_ENDPOINT = "processes";
 var RESUME_ENDPOINT = "resume";
@@ -35311,6 +35262,39 @@ var {
   useStartFormMutation
 } = formsApi;
 
+// src/rtk/endpoints/deprecated/surfSubscriptionDropdownOptions.ts
+function toUrlParams(params) {
+  const urlParams = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((v) => {
+        urlParams.append(key, String(v));
+      });
+    } else if (value !== void 0) {
+      urlParams.append(key, String(value));
+    }
+  });
+  return urlParams.toString();
+}
+var surfSubscriptionDropdownOptionsApi = orchestratorApi.injectEndpoints({
+  endpoints: (build) => ({
+    getSurfSubscriptionDropdownOptions: build.query({
+      query: ({ params }) => ({
+        url: SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT,
+        params
+      }),
+      extraOptions: {
+        baseQueryType: "fetch" /* fetch */,
+        paramsSerializer: toUrlParams
+      }
+    })
+  })
+});
+var {
+  useGetSurfSubscriptionDropdownOptionsQuery,
+  useLazyGetSurfSubscriptionDropdownOptionsQuery
+} = surfSubscriptionDropdownOptionsApi;
+
 // src/rtk/endpoints/formFields.ts
 var LOCATION_CODES_ENDPOINT = "surf/crm/location_codes";
 var CONTACT_PERSONS_ENDPOINT = "surf/crm/contacts";
@@ -38964,7 +38948,7 @@ var WfoHeaderBadge = ({
   children,
   ...restProps
 }) => {
-  const css47 = restProps.iconType ? {
+  const css48 = restProps.iconType ? {
     height: 24,
     display: "flex",
     paddingLeft: 0
@@ -38972,7 +38956,7 @@ var WfoHeaderBadge = ({
     height: 24,
     display: "flex"
   };
-  return /* @__PURE__ */ jsx72(WfoBadge, { ...restProps, css: css47, children });
+  return /* @__PURE__ */ jsx72(WfoBadge, { ...restProps, css: css48, children });
 };
 
 // src/components/WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.tsx
@@ -44879,7 +44863,11 @@ var getCommonFormFieldStyles = ({ theme }) => {
       flexDirection: "column"
     }
   });
+  const errorStyle = css25({
+    color: theme.colors.dangerText
+  });
   return {
+    errorStyle,
     formRowStyle
   };
 };
@@ -47236,164 +47224,49 @@ var ProductTag = /* @__PURE__ */ ((ProductTag2) => {
 // src/components/WfoForms/formFields/deprecated/utils.ts
 var ipamStates = ["Free", "Allocated", null, "Planned", null, null];
 
-// src/components/WfoForms/formFields/NestField.tsx
-import { connectField as connectField24, filterDOMProps as filterDOMProps24, joinName as joinName8 } from "uniforms";
-import { AutoField as AutoField3 } from "uniforms-unstyled";
-import {
-  EuiDescribedFormGroup,
-  EuiFlexGroup as EuiFlexGroup16,
-  EuiFlexItem as EuiFlexItem20,
-  EuiText as EuiText31
-} from "@elastic/eui";
-import { Fragment as Fragment36, jsx as jsx177, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
-filterDOMProps24.register("properties", "wrap");
-function Nest({
-  children,
-  fields,
-  itemProps,
-  label,
-  description,
-  name,
-  className = "",
-  ...props
-}) {
-  const nameArray = joinName8(null, name);
-  const lastNamePart = nameArray[nameArray.length - 1];
-  const isInList = !isNaN(parseInt(lastNamePart));
-  const itemIndex = isInList ? parseInt(lastNamePart) : 0;
-  if (isInList) {
-    return /* @__PURE__ */ jsxs95(
-      EuiFlexGroup16,
-      {
-        ...filterDOMProps24(props),
-        className: `${className} nest-field`,
-        children: [
-          label && /* @__PURE__ */ jsxs95(Fragment36, { children: [
-            /* @__PURE__ */ jsx177("label", { className: "euiFormLabel euiFormRow__label", children: label }),
-            /* @__PURE__ */ jsx177(EuiText31, { size: "m", children: description })
-          ] }),
-          children || fields?.map((field) => /* @__PURE__ */ jsx177(EuiFlexItem20, { children: /* @__PURE__ */ jsx177(
-            AutoField3,
-            {
-              name: field,
-              ...itemProps,
-              label: itemIndex === 0 ? void 0 : false
-            }
-          ) }, field))
-        ]
-      }
-    );
-  } else {
-    return /* @__PURE__ */ jsx177(
-      EuiDescribedFormGroup,
-      {
-        ...filterDOMProps24(props),
-        title: /* @__PURE__ */ jsx177("span", { children: label }),
-        description,
-        className: `${className} nest-field`,
-        children: children || fields?.map((field) => /* @__PURE__ */ jsx177(
-          AutoField3,
-          {
-            name: field,
-            ...itemProps,
-            label: itemIndex === 0 ? void 0 : false
-          },
-          field
-        ))
-      }
-    );
-  }
-}
-var NestField = connectField24(Nest);
-
-// src/components/WfoForms/formFields/OptGroupField.tsx
-import { useTranslations as useTranslations47 } from "next-intl";
-import { connectField as connectField25, filterDOMProps as filterDOMProps25, useField as useField7 } from "uniforms";
-import { AutoField as AutoField4 } from "uniforms-unstyled";
-import { EuiDescribedFormGroup as EuiDescribedFormGroup2, EuiFlexItem as EuiFlexItem21, EuiFormRow as EuiFormRow18 } from "@elastic/eui";
-import { Fragment as Fragment37, jsx as jsx178, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
-filterDOMProps25.register("properties");
-function OptGroup({
-  fields,
-  itemProps,
-  name,
-  readOnly,
-  className = "",
-  ...props
-}) {
-  const t = useTranslations47("pydanticForms.backendTranslations");
-  const enabled = useField7("enabled", {})[0].value;
-  return /* @__PURE__ */ jsx178(
-    EuiDescribedFormGroup2,
-    {
-      ...filterDOMProps25(props),
-      title: /* @__PURE__ */ jsx178("span", { children: t(`${name}.title`) }),
-      description: t(`${name}.description`),
-      className: `${className} optgroup-field`,
-      children: /* @__PURE__ */ jsxs96(Fragment37, { children: [
-        /* @__PURE__ */ jsx178(EuiFlexItem21, { children: /* @__PURE__ */ jsx178(
-          EuiFormRow18,
-          {
-            error: false,
-            isInvalid: false,
-            id: name,
-            children: /* @__PURE__ */ jsx178(BoolField, { name: "enabled", readOnly })
-          }
-        ) }),
-        enabled && fields?.filter((field) => field !== "enabled").map((field) => /* @__PURE__ */ jsx178(EuiFlexItem21, { children: /* @__PURE__ */ jsx178(AutoField4, { name: field, ...itemProps }) }, field))
-      ] })
-    }
-  );
-}
-var OptGroupField = connectField25(OptGroup);
-
-// src/components/WfoForms/formFields/SubscriptionField.tsx
+// src/components/WfoForms/formFields/deprecated/SubscriptionField.tsx
 import ReactSelect4 from "react-select";
 import get7 from "lodash/get";
-import { useTranslations as useTranslations48 } from "next-intl";
+import { useTranslations as useTranslations47 } from "next-intl";
 import {
-  connectField as connectField26,
-  filterDOMProps as filterDOMProps26,
-  joinName as joinName9,
-  useField as useField8,
+  connectField as connectField24,
+  filterDOMProps as filterDOMProps24,
+  joinName as joinName8,
+  useField as useField7,
   useForm as useForm8
 } from "uniforms";
 import {
   EuiButtonIcon as EuiButtonIcon10,
-  EuiFlexGroup as EuiFlexGroup17,
-  EuiFlexItem as EuiFlexItem22,
-  EuiFormRow as EuiFormRow19,
-  EuiText as EuiText32
+  EuiFlexGroup as EuiFlexGroup16,
+  EuiFlexItem as EuiFlexItem20,
+  EuiFormRow as EuiFormRow18,
+  EuiText as EuiText31
 } from "@elastic/eui";
 
-// src/hooks/deprecated/useGetSubscriptionDropdownOptions.ts
-var useGetSubscriptionDropdownOptions = (tags = [], statuses = ["active"]) => {
-  const tagValue = tags.join("|");
-  const statusValue = statuses.join("|");
-  const filters = [];
-  if (tagValue) {
-    filters.push({
-      field: "tag",
-      value: tagValue
-    });
-  }
-  if (statusValue) {
-    filters.push({
-      field: "status",
-      value: statusValue
-    });
-  }
-  const { data, isFetching, refetch, isError: isError2 } = useGetSubscriptionsDropdownOptionsQuery({ filterBy: filters });
-  const subscriptions = (() => {
+// src/hooks/deprecated/useGetSurfSubcriptionDropdownOptions.ts
+var useGetSurfSubscriptionDropdownOptions = (tags = [], statuses = ["active"], productIds = [], excludeSubscriptionIds = [], customerId, portModes = [], bandwidth) => {
+  const filter_params = {
+    product_tags: tags,
+    statuses,
+    product_ids: productIds,
+    exclude_subscription_ids: excludeSubscriptionIds,
+    port_modes: portModes,
+    bandwidth
+  };
+  if (customerId) {
+    filter_params.customer_ids = [customerId];
+  }
+  const { data, isFetching, refetch, isError: isError2 } = useGetSurfSubscriptionDropdownOptionsQuery({ params: filter_params });
+  const options = (() => {
     if (!isFetching && !isError2 && data) {
-      return data.subscriptionDropdownOptions;
+      return data;
     }
     return [];
   })();
-  return { isFetching, refetch, subscriptions };
+  return { isFetching, refetch, options };
 };
 
-// src/components/WfoForms/formFields/SubscriptionFieldStyling.ts
+// src/components/WfoForms/formFields/deprecated/SubscriptionFieldStyling.ts
 import { css as css32 } from "@emotion/react";
 var subscriptionFieldStyling = css32`
     .subscription-field {
@@ -47427,9 +47300,9 @@ var subscriptionFieldStyling = css32`
     }
 `;
 
-// src/components/WfoForms/formFields/SubscriptionField.tsx
-import { jsx as jsx179, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
-filterDOMProps26.register(
+// src/components/WfoForms/formFields/deprecated/SubscriptionField.tsx
+import { jsx as jsx177, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
+filterDOMProps24.register(
   "excludedSubscriptionIds",
   "customerId",
   "customerKey",
@@ -47439,6 +47312,15 @@ filterDOMProps26.register(
   "tags",
   "statuses"
 );
+function toPortModes(visiblePortMode) {
+  if (visiblePortMode === "all") {
+    return [];
+  }
+  if (visiblePortMode === "normal") {
+    return ["tagged", "untagged"];
+  }
+  return [visiblePortMode];
+}
 function SubscriptionFieldDefinition({
   disabled,
   id,
@@ -47463,133 +47345,75 @@ function SubscriptionFieldDefinition({
   statuses,
   ...props
 }) {
-  const t = useTranslations48("pydanticForms");
+  const t = useTranslations47("pydanticForms");
   const { reactSelectInnerComponentStyles } = useWithOrchestratorTheme(getSelectFieldStyles);
-  const { refetch, subscriptions, isFetching } = useGetSubscriptionDropdownOptions(tags, statuses);
-  const nameArray = joinName9(null, name);
-  let parentName = joinName9(nameArray.slice(0, -1));
+  const nameArray = joinName8(null, name);
+  let parentName = joinName8(nameArray.slice(0, -1));
   if (parentName === "") {
     parentName = name;
   }
-  const parent = useField8(parentName, {}, { absoluteName: true })[0];
+  const parent = useField7(parentName, {}, { absoluteName: true })[0];
   const { model, schema } = useForm8();
   const bandWithFromField = bandwidthKey ? get7(model, bandwidthKey) || schema.getInitialValue(bandwidthKey, {}) : void 0;
   const usedBandwidth = bandwidth || bandWithFromField;
   const usedCustomerId = customerKey ? get7(model, customerKey, "nonExistingOrgToFilterEverything") : customerId;
-  const makeLabel = (subscription) => {
-    const description2 = subscription.description || t("widgets.subscription.missingDescription");
-    const subscriptionSubstring = subscription.subscriptionId.substring(
-      0,
-      8
-    );
-    if (["Node"].includes(subscription.product.tag)) {
-      const description3 = subscription.description || t("widgets.subscription.missingDescription");
-      return `${subscription.subscriptionId.substring(
-        0,
-        8
-      )} ${description3.trim()}`;
-    } else if ([
-      "SP" /* SP */,
-      "SPNL" /* SPNL */,
-      "AGGSP" /* AGGSP */,
-      "AGGSPNL" /* AGGSPNL */,
-      "MSC" /* MSC */,
-      "MSCNL" /* MSCNL */,
-      "IRBSP" /* IRBSP */
-    ].includes(subscription.product.tag)) {
-      const portMode = getPortMode(subscription.productBlockInstances);
-      const subscriptionTitle = subscription.productBlockInstances[0].productBlockInstanceValues.find(
-        (item) => item.field === "title"
+  const getFilteredOptions = (optionsInput) => {
+    if (parentName !== name && parent.fieldType === Array && // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
+    // TODO: Figure out why this is so
+    parent.uniqueItems) {
+      const allValues = get7(model, parentName, []);
+      const chosenValues = allValues.filter(
+        (_item, index) => index.toString() !== nameArray[nameArray.length - 1]
+      );
+      return optionsInput.filter(
+        (option) => chosenValues.includes(option.value)
       );
-      if (subscriptionTitle) {
-        return `${subscriptionSubstring} - ${description2.trim()} - ${subscriptionTitle.value}`;
-      }
-      return `${subscriptionSubstring} ${portMode?.toUpperCase()} ${description2.trim()} ${subscription.customer?.fullname}`;
     } else {
-      return description2.trim();
+      return optionsInput;
     }
   };
-  const getSubscriptionOptions = () => {
-    const filteredSubscriptions = subscriptions?.filter((subscription) => {
-      if (usedBandwidth) {
-        const portSpeedInput = subscription.fixedInputs.find(
-          (fixedInput) => fixedInput.field === "port_speed"
-        );
-        if (portSpeedInput?.value && parseInt(portSpeedInput.value.toString(), 10) < parseInt(usedBandwidth.toString(), 10)) {
-          return false;
-        }
-      }
-      if (!usedBandwidth && productIds && productIds.length > 0 && !productIds.includes(subscription.product.productId)) {
-        return false;
-      }
-      if (!usedBandwidth && !productIds && tags && tags?.length > 0 && !tags.includes(subscription.product.tag)) {
-        return false;
-      }
-      if (excludedSubscriptionIds && excludedSubscriptionIds.length > 0 && excludedSubscriptionIds.includes(subscription.subscriptionId)) {
-        return false;
-      }
-      if (visiblePortMode !== "all") {
-        const portMode = getPortMode(
-          subscription.productBlockInstances
-        );
-        if (visiblePortMode === "normal" && !["tagged" /* TAGGED */, "untagged" /* UNTAGGED */, void 0].includes(
-          portMode
-        )) {
-          return false;
-        } else if (portMode !== visiblePortMode && visiblePortMode !== "normal") {
-          return false;
-        }
-      }
-      if (usedCustomerId && subscription.customer?.customerId !== usedCustomerId) {
-        return false;
-      }
-      if (parentName !== name) {
-        if (parent.fieldType === Array && // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
-        // TODO: Figure out why this is so
-        parent.uniqueItems) {
-          const allValues = get7(model, parentName, []);
-          const chosenValues = allValues.filter(
-            (_item, index) => index.toString() !== nameArray[nameArray.length - 1]
-          );
-          if (!chosenValues.includes(subscription.subscriptionId)) {
-            return false;
-          }
-        }
-      }
-      return true;
-    });
-    return filteredSubscriptions ? filteredSubscriptions.map((subscription) => ({
-      label: makeLabel(subscription),
-      value: subscription.subscriptionId
-    })) : [];
-  };
-  const options = getSubscriptionOptions();
+  const excludeSubscriptionIds = excludedSubscriptionIds;
+  const portModes = toPortModes(visiblePortMode);
+  const {
+    refetch,
+    options: unfilteredOptions,
+    isFetching
+  } = useGetSurfSubscriptionDropdownOptions(
+    tags,
+    statuses,
+    productIds,
+    excludeSubscriptionIds,
+    usedCustomerId,
+    portModes,
+    usedBandwidth
+  );
+  const options = getFilteredOptions(unfilteredOptions);
   const selectedValue = options.find(
     (option) => option.value === value
   );
   const isDisabled = disabled || readOnly || isFetching;
-  return /* @__PURE__ */ jsx179(EuiFlexItem22, { css: subscriptionFieldStyling, grow: 1, children: /* @__PURE__ */ jsx179(
+  return /* @__PURE__ */ jsx177(EuiFlexItem20, { css: subscriptionFieldStyling, grow: 1, children: /* @__PURE__ */ jsx177(
     "section",
     {
-      ...filterDOMProps26(props),
+      ...filterDOMProps24(props),
       className: `${className} subscription-field${disabled ? "-disabled" : ""}`,
-      children: /* @__PURE__ */ jsx179(
-        EuiFormRow19,
+      children: /* @__PURE__ */ jsx177(
+        EuiFormRow18,
         {
           label,
-          labelAppend: /* @__PURE__ */ jsx179(EuiText32, { size: "m", children: description }),
+          labelAppend: /* @__PURE__ */ jsx177(EuiText31, { size: "m", children: description }),
           error: showInlineError ? errorMessage : false,
           isInvalid: error,
           id,
           fullWidth: true,
-          children: /* @__PURE__ */ jsxs97("div", { children: [
-            !disabled && /* @__PURE__ */ jsx179(
-              EuiFlexGroup17,
+          children: /* @__PURE__ */ jsxs95("div", { children: [
+            !disabled && /* @__PURE__ */ jsx177(
+              EuiFlexGroup16,
               {
                 alignItems: "center",
                 gutterSize: "none",
                 responsive: false,
-                children: /* @__PURE__ */ jsx179(
+                children: /* @__PURE__ */ jsx177(
                   EuiButtonIcon10,
                   {
                     className: "reload-subscriptions-icon-button",
@@ -47607,7 +47431,7 @@ function SubscriptionFieldDefinition({
                 )
               }
             ),
-            /* @__PURE__ */ jsx179(
+            /* @__PURE__ */ jsx177(
               ReactSelect4,
               {
                 id,
@@ -47632,10 +47456,121 @@ function SubscriptionFieldDefinition({
     }
   ) });
 }
-var SubscriptionField = connectField26(SubscriptionFieldDefinition, {
+var SubscriptionField = connectField24(SubscriptionFieldDefinition, {
   kind: "leaf"
 });
 
+// src/components/WfoForms/formFields/NestField.tsx
+import { connectField as connectField25, filterDOMProps as filterDOMProps25, joinName as joinName9 } from "uniforms";
+import { AutoField as AutoField3 } from "uniforms-unstyled";
+import {
+  EuiDescribedFormGroup,
+  EuiFlexGroup as EuiFlexGroup17,
+  EuiFlexItem as EuiFlexItem21,
+  EuiText as EuiText32
+} from "@elastic/eui";
+import { Fragment as Fragment36, jsx as jsx178, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
+filterDOMProps25.register("properties", "wrap");
+function Nest({
+  children,
+  fields,
+  itemProps,
+  label,
+  description,
+  name,
+  className = "",
+  ...props
+}) {
+  const nameArray = joinName9(null, name);
+  const lastNamePart = nameArray[nameArray.length - 1];
+  const isInList = !isNaN(parseInt(lastNamePart));
+  const itemIndex = isInList ? parseInt(lastNamePart) : 0;
+  if (isInList) {
+    return /* @__PURE__ */ jsxs96(
+      EuiFlexGroup17,
+      {
+        ...filterDOMProps25(props),
+        className: `${className} nest-field`,
+        children: [
+          label && /* @__PURE__ */ jsxs96(Fragment36, { children: [
+            /* @__PURE__ */ jsx178("label", { className: "euiFormLabel euiFormRow__label", children: label }),
+            /* @__PURE__ */ jsx178(EuiText32, { size: "m", children: description })
+          ] }),
+          children || fields?.map((field) => /* @__PURE__ */ jsx178(EuiFlexItem21, { children: /* @__PURE__ */ jsx178(
+            AutoField3,
+            {
+              name: field,
+              ...itemProps,
+              label: itemIndex === 0 ? void 0 : false
+            }
+          ) }, field))
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx178(
+      EuiDescribedFormGroup,
+      {
+        ...filterDOMProps25(props),
+        title: /* @__PURE__ */ jsx178("span", { children: label }),
+        description,
+        className: `${className} nest-field`,
+        children: children || fields?.map((field) => /* @__PURE__ */ jsx178(
+          AutoField3,
+          {
+            name: field,
+            ...itemProps,
+            label: itemIndex === 0 ? void 0 : false
+          },
+          field
+        ))
+      }
+    );
+  }
+}
+var NestField = connectField25(Nest);
+
+// src/components/WfoForms/formFields/OptGroupField.tsx
+import { useTranslations as useTranslations48 } from "next-intl";
+import { connectField as connectField26, filterDOMProps as filterDOMProps26, useField as useField8 } from "uniforms";
+import { AutoField as AutoField4 } from "uniforms-unstyled";
+import { EuiDescribedFormGroup as EuiDescribedFormGroup2, EuiFlexItem as EuiFlexItem22, EuiFormRow as EuiFormRow19 } from "@elastic/eui";
+import { Fragment as Fragment37, jsx as jsx179, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
+filterDOMProps26.register("properties");
+function OptGroup({
+  fields,
+  itemProps,
+  name,
+  readOnly,
+  className = "",
+  ...props
+}) {
+  const t = useTranslations48("pydanticForms.backendTranslations");
+  const enabled = useField8("enabled", {})[0].value;
+  return /* @__PURE__ */ jsx179(
+    EuiDescribedFormGroup2,
+    {
+      ...filterDOMProps26(props),
+      title: /* @__PURE__ */ jsx179("span", { children: t(`${name}.title`) }),
+      description: t(`${name}.description`),
+      className: `${className} optgroup-field`,
+      children: /* @__PURE__ */ jsxs97(Fragment37, { children: [
+        /* @__PURE__ */ jsx179(EuiFlexItem22, { children: /* @__PURE__ */ jsx179(
+          EuiFormRow19,
+          {
+            error: false,
+            isInvalid: false,
+            id: name,
+            children: /* @__PURE__ */ jsx179(BoolField, { name: "enabled", readOnly })
+          }
+        ) }),
+        enabled && fields?.filter((field) => field !== "enabled").map((field) => /* @__PURE__ */ jsx179(EuiFlexItem22, { children: /* @__PURE__ */ jsx179(AutoField4, { name: field, ...itemProps }) }, field))
+      ] })
+    }
+  );
+}
+var OptGroupField = connectField26(OptGroup);
+
 // src/components/WfoForms/formFields/SummaryField.tsx
 import { connectField as connectField27, filterDOMProps as filterDOMProps27 } from "uniforms";
 import { EuiFlexItem as EuiFlexItem23, EuiFormRow as EuiFormRow20, EuiText as EuiText33 } from "@elastic/eui";
@@ -50354,41 +50289,66 @@ var Footer = () => {
   ] });
 };
 
+// src/components/WfoPydanticForm/Header.tsx
+import { usePydanticFormContext as usePydanticFormContext2 } from "pydantic-forms";
+import { css as css35 } from "@emotion/react";
+import { jsx as jsx203 } from "@emotion/react/jsx-runtime";
+var headerStyling = css35`
+    padding: 20px 0;
+    font-size: larger;
+    font-weight: bold;
+    margin-bottom: 15px;
+`;
+var Header = () => {
+  const { pydanticFormSchema } = usePydanticFormContext2();
+  return /* @__PURE__ */ jsx203("h3", { css: headerStyling, children: pydanticFormSchema?.title });
+};
+
 // src/components/WfoPydanticForm/Row.tsx
 import { EuiFormRow as EuiFormRow21, EuiText as EuiText35 } from "@elastic/eui";
-import { jsx as jsx203 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment49, jsx as jsx204, jsxs as jsxs109 } from "@emotion/react/jsx-runtime";
 var Row = ({
   title,
   description,
   error,
   isInvalid,
+  required,
   children
 }) => {
-  const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-  return /* @__PURE__ */ jsx203(
+  const { formRowStyle, errorStyle } = useWithOrchestratorTheme(
+    getCommonFormFieldStyles
+  );
+  const Label3 = () => {
+    return title ? /* @__PURE__ */ jsxs109("div", { css: error && errorStyle, children: [
+      title,
+      " ",
+      required && "*"
+    ] }) : void 0;
+  };
+  return /* @__PURE__ */ jsx204(
     EuiFormRow21,
     {
       css: formRowStyle,
-      label: title,
-      labelAppend: /* @__PURE__ */ jsx203(EuiText35, { size: "m", children: description }),
+      label: /* @__PURE__ */ jsx204(Label3, {}),
+      labelAppend: /* @__PURE__ */ jsx204(EuiText35, { size: "m", children: description }),
       error,
       isInvalid,
       fullWidth: true,
-      children: /* @__PURE__ */ jsx203("div", { children })
+      children: /* @__PURE__ */ jsx204(Fragment49, { children })
     }
   );
 };
 
 // src/components/WfoPydanticForm/fields/TextArea.tsx
 import { EuiTextArea as EuiTextArea2 } from "@elastic/eui";
-import { jsx as jsx204 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx205 } from "@emotion/react/jsx-runtime";
 var TextArea = ({
   pydanticFormField,
   onChange,
   value,
   disabled
 }) => {
-  return /* @__PURE__ */ jsx204(
+  return /* @__PURE__ */ jsx205(
     EuiTextArea2,
     {
       disabled,
@@ -50403,7 +50363,7 @@ var TextArea = ({
 
 // src/components/WfoPydanticForm/fields/Text.tsx
 import { EuiFieldText as EuiFieldText4 } from "@elastic/eui";
-import { jsx as jsx205 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx206 } from "@emotion/react/jsx-runtime";
 var Text2 = ({
   onChange,
   value,
@@ -50412,7 +50372,7 @@ var Text2 = ({
   const { formFieldBaseStyle } = useWithOrchestratorTheme(
     getFormFieldsBaseStyle
   );
-  return /* @__PURE__ */ jsx205(
+  return /* @__PURE__ */ jsx206(
     EuiFieldText4,
     {
       css: formFieldBaseStyle,
@@ -50425,10 +50385,10 @@ var Text2 = ({
 };
 
 // src/components/WfoPydanticForm/fields/Label.tsx
-import { jsx as jsx206 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx207 } from "@emotion/react/jsx-runtime";
 var Label2 = ({ pydanticFormField }) => {
   const { theme } = useOrchestratorTheme();
-  return /* @__PURE__ */ jsx206("div", { children: /* @__PURE__ */ jsx206(
+  return /* @__PURE__ */ jsx207("div", { children: /* @__PURE__ */ jsx207(
     "label",
     {
       css: {
@@ -50443,10 +50403,10 @@ var Label2 = ({ pydanticFormField }) => {
 
 // src/components/WfoPydanticForm/fields/Divider.tsx
 import { EuiHorizontalRule as EuiHorizontalRule7 } from "@elastic/eui";
-import { jsx as jsx207 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx208 } from "@emotion/react/jsx-runtime";
 var Divider2 = ({ pydanticFormField }) => {
   const { theme } = useOrchestratorTheme();
-  return /* @__PURE__ */ jsx207(
+  return /* @__PURE__ */ jsx208(
     EuiHorizontalRule7,
     {
       style: { marginTop: theme.base },
@@ -50457,20 +50417,20 @@ var Divider2 = ({ pydanticFormField }) => {
 
 // src/components/WfoPydanticForm/fields/Checkbox.tsx
 import { EuiCheckbox as EuiCheckbox3 } from "@elastic/eui";
-import { jsx as jsx208 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx209 } from "@emotion/react/jsx-runtime";
 var Checkbox = ({
   pydanticFormField,
   onChange,
   value,
   disabled
 }) => {
-  return /* @__PURE__ */ jsx208(
+  return /* @__PURE__ */ jsx209(
     EuiCheckbox3,
     {
       checked: value || false,
       disabled,
       id: pydanticFormField.id,
-      label: pydanticFormField.title || /* @__PURE__ */ jsx208("div", { children: "\xA0" }),
+      label: pydanticFormField.title || /* @__PURE__ */ jsx209("div", { children: "\xA0" }),
       onChange: () => !disabled && onChange(!value)
     }
   );
@@ -50479,11 +50439,11 @@ var Checkbox = ({
 // src/components/WfoPydanticForm/fields/Summary.tsx
 import { EuiFlexItem as EuiFlexItem24, EuiFormRow as EuiFormRow22, EuiText as EuiText36 } from "@elastic/eui";
 import { tint as tint4 } from "@elastic/eui";
-import { css as css35 } from "@emotion/react";
-import { jsx as jsx209, jsxs as jsxs109 } from "@emotion/react/jsx-runtime";
+import { css as css36 } from "@emotion/react";
+import { jsx as jsx210, jsxs as jsxs110 } from "@emotion/react/jsx-runtime";
 var getStyles13 = ({ theme }) => {
   const toShadeColor = (color) => tint4(color, 0.9);
-  const summaryFieldStyle = css35({
+  const summaryFieldStyle = css36({
     "div.emailMessage": {
       td: {
         color: theme.colors.text
@@ -50532,38 +50492,38 @@ var Summary2 = ({ pydanticFormField }) => {
   const labels = summaryData?.labels;
   const columns = summaryData?.columns || [];
   const extraColumnsData = columns.filter((_2, index) => index !== 0);
-  const rows = columns[0].map((row, index) => /* @__PURE__ */ jsxs109("tr", { children: [
-    labels && /* @__PURE__ */ jsx209("td", { className: `label`, children: labels[index] }),
-    /* @__PURE__ */ jsx209("td", { className: `value`, children: typeof row === "string" && row.includes("<!doctype html>") ? /* @__PURE__ */ jsx209(
+  const rows = columns[0].map((row, index) => /* @__PURE__ */ jsxs110("tr", { children: [
+    labels && /* @__PURE__ */ jsx210("td", { className: `label`, children: labels[index] }),
+    /* @__PURE__ */ jsx210("td", { className: `value`, children: typeof row === "string" && row.includes("<!doctype html>") ? /* @__PURE__ */ jsx210(
       "div",
       {
         className: "emailMessage",
         dangerouslySetInnerHTML: { __html: row }
       }
     ) : row }),
-    extraColumnsData && extraColumnsData.map((_2, idx) => /* @__PURE__ */ jsx209("td", { className: `value`, children: extraColumnsData[idx][index] }, idx))
+    extraColumnsData && extraColumnsData.map((_2, idx) => /* @__PURE__ */ jsx210("td", { className: `value`, children: extraColumnsData[idx][index] }, idx))
   ] }, index));
-  const tableHeader = !headers || headers.length === 0 ? null : /* @__PURE__ */ jsxs109("tr", { children: [
-    labels && /* @__PURE__ */ jsx209("th", {}),
-    headers.map((header, idx) => /* @__PURE__ */ jsx209("th", { children: header }, idx))
+  const tableHeader = !headers || headers.length === 0 ? null : /* @__PURE__ */ jsxs110("tr", { children: [
+    labels && /* @__PURE__ */ jsx210("th", {}),
+    headers.map((header, idx) => /* @__PURE__ */ jsx210("th", { children: header }, idx))
   ] });
-  return /* @__PURE__ */ jsx209(EuiFlexItem24, { css: [summaryFieldStyle, formRowStyle], children: /* @__PURE__ */ jsx209("section", { children: /* @__PURE__ */ jsx209(
+  return /* @__PURE__ */ jsx210(EuiFlexItem24, { css: [summaryFieldStyle, formRowStyle], children: /* @__PURE__ */ jsx210("section", { children: /* @__PURE__ */ jsx210(
     EuiFormRow22,
     {
       label: description,
-      labelAppend: /* @__PURE__ */ jsx209(EuiText36, { size: "m", children: title }),
+      labelAppend: /* @__PURE__ */ jsx210(EuiText36, { size: "m", children: title }),
       id,
       fullWidth: true,
-      children: /* @__PURE__ */ jsx209("section", { className: "table-summary", children: /* @__PURE__ */ jsxs109("table", { id: `${id}-table`, children: [
-        /* @__PURE__ */ jsx209("thead", { children: tableHeader }),
-        /* @__PURE__ */ jsx209("tbody", { children: rows })
+      children: /* @__PURE__ */ jsx210("section", { className: "table-summary", children: /* @__PURE__ */ jsxs110("table", { id: `${id}-table`, children: [
+        /* @__PURE__ */ jsx210("thead", { children: tableHeader }),
+        /* @__PURE__ */ jsx210("tbody", { children: rows })
       ] }) })
     }
   ) }) });
 };
 
 // src/components/WfoPydanticForm/WfoPydanticForm.tsx
-import { jsx as jsx210 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx211 } from "@emotion/react/jsx-runtime";
 var WfoPydanticForm = ({
   processName,
   startProcessPayload,
@@ -50713,18 +50673,18 @@ var WfoPydanticForm = ({
     const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
     router.replace(pfBasePath);
   };
-  return /* @__PURE__ */ jsx210(
+  return /* @__PURE__ */ jsx211(
     PydanticForm2,
     {
-      title: "",
       id: processName,
       onSuccess,
       onCancel: handleCancel,
-      loadingComponent: /* @__PURE__ */ jsx210(WfoLoading, {}),
+      loadingComponent: /* @__PURE__ */ jsx211(WfoLoading, {}),
       config: {
         apiProvider: getPydanticFormProvider(),
         allowUntouchedSubmit: true,
         footerRenderer: Footer,
+        headerRenderer: Header,
         skipSuccessNotice: true,
         componentMatcher: wfoComponentMatcher,
         labelProvider: pydanticLabelProvider,
@@ -50757,36 +50717,36 @@ import {
 import { EuiFlexItem as EuiFlexItem25 } from "@elastic/eui";
 
 // src/components/WfoWorkflowSteps/styles.ts
-import { css as css36 } from "@emotion/react";
+import { css as css37 } from "@emotion/react";
 var getWorkflowStepsStyles = ({
   theme,
   toSecondaryColor
 }) => {
   const SPACE_BETWEEN_STEPS = theme.base * 1.5;
-  const stepSpacerStyle = css36({
+  const stepSpacerStyle = css37({
     borderLeft: `1px solid ${theme.colors.darkShade}`,
     height: `${SPACE_BETWEEN_STEPS}px`,
     marginLeft: "36px"
   });
-  const stepRowStyle = css36({
+  const stepRowStyle = css37({
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "flex-end"
   });
-  const stepListHeaderStyle = css36({
+  const stepListHeaderStyle = css37({
     marginBottom: "24px",
     marginTop: "60px",
     alignItems: "flex-end"
   });
-  const stepListContentStyle = css36({
+  const stepListContentStyle = css37({
     flexDirection: "row",
     alignItems: "center"
   });
-  const stepListContentBoldTextStyle = css36({
+  const stepListContentBoldTextStyle = css37({
     fontSize: theme.size.base,
     fontWeight: theme.font.weight.bold
   });
-  const stepListContentAnchorStyle = css36({
+  const stepListContentAnchorStyle = css37({
     marginTop: 2,
     marginLeft: 0,
     fontSize: theme.size.m,
@@ -50794,7 +50754,7 @@ var getWorkflowStepsStyles = ({
     color: theme.colors.link,
     cursor: "pointer"
   });
-  const stepListOptionsContainerStyle = css36({
+  const stepListOptionsContainerStyle = css37({
     flexGrow: 0
   });
   const stepStateIcon = {
@@ -50810,36 +50770,36 @@ var getWorkflowStepsStyles = ({
     color: theme.colors.disabled,
     fontWeight: theme.font.weight.semiBold
   };
-  const stepStateSuccessIconStyle = css36({
+  const stepStateSuccessIconStyle = css37({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.primary)
   });
-  const stepStateSuspendIconStyle = css36({
+  const stepStateSuspendIconStyle = css37({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.warning)
   });
-  const stepStatePendingIconStyle = css36({
+  const stepStatePendingIconStyle = css37({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.darkShade)
   });
-  const stepStateFailedIconStyle = css36({
+  const stepStateFailedIconStyle = css37({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.danger)
   });
-  const stepHeaderRightStyle = css36({
+  const stepHeaderRightStyle = css37({
     alignItems: "center"
   });
-  const stepEmailContainerStyle = css36({
+  const stepEmailContainerStyle = css37({
     paddingLeft: 24,
     width: 600,
     marginTop: 0
   });
-  const getStepHeaderStyle = (isClickable) => css36({
+  const getStepHeaderStyle = (isClickable) => css37({
     gap: 0,
     alignItems: "center",
     cursor: isClickable ? "pointer" : "default"
   });
-  const getStepToggleExpandStyle = (isVisible) => css36({
+  const getStepToggleExpandStyle = (isVisible) => css37({
     marginRight: theme.base / 2,
     visibility: isVisible ? "visible" : "hidden"
   });
@@ -50865,26 +50825,26 @@ var getWorkflowStepsStyles = ({
 };
 
 // src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx
-import { jsx as jsx211, jsxs as jsxs110 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx212, jsxs as jsxs111 } from "@emotion/react/jsx-runtime";
 var SubIcon = ({ stepStatus, color = "" }) => {
   switch (stepStatus) {
     case "suspend" /* SUSPEND */:
-      return /* @__PURE__ */ jsx211(WfoMinusCircleFill, { color });
+      return /* @__PURE__ */ jsx212(WfoMinusCircleFill, { color });
     case "failed" /* FAILED */:
-      return /* @__PURE__ */ jsx211(WfoXCircleFill, { color });
+      return /* @__PURE__ */ jsx212(WfoXCircleFill, { color });
     default:
-      return /* @__PURE__ */ jsx211(WfoCheckmarkCircleFill, { color });
+      return /* @__PURE__ */ jsx212(WfoCheckmarkCircleFill, { color });
   }
 };
 var MainIcon = ({ stepStatus, color = "", isStartStep }) => {
   if (isStartStep) {
-    return /* @__PURE__ */ jsx211(WfoPlayFill, { color });
+    return /* @__PURE__ */ jsx212(WfoPlayFill, { color });
   }
   switch (stepStatus) {
     case "form" /* FORM */:
-      return /* @__PURE__ */ jsx211(WfoPencilAlt, { color });
+      return /* @__PURE__ */ jsx212(WfoPencilAlt, { color });
     default:
-      return /* @__PURE__ */ jsx211(WfoCogFill, { color, width: 16, height: 16 });
+      return /* @__PURE__ */ jsx212(WfoCogFill, { color, width: 16, height: 16 });
   }
 };
 var WfoStepStatusIcon = ({
@@ -50939,8 +50899,8 @@ var WfoStepStatusIcon = ({
         ];
     }
   })();
-  return /* @__PURE__ */ jsxs110(EuiFlexItem25, { css: { flexDirection: "row" }, grow: 0, children: [
-    /* @__PURE__ */ jsx211("div", { css: stepStateStyle, children: /* @__PURE__ */ jsx211(
+  return /* @__PURE__ */ jsxs111(EuiFlexItem25, { css: { flexDirection: "row" }, grow: 0, children: [
+    /* @__PURE__ */ jsx212("div", { css: stepStateStyle, children: /* @__PURE__ */ jsx212(
       MainIcon,
       {
         color: mainIconColor,
@@ -50948,7 +50908,7 @@ var WfoStepStatusIcon = ({
         isStartStep
       }
     ) }),
-    /* @__PURE__ */ jsx211(
+    /* @__PURE__ */ jsx212(
       "div",
       {
         css: {
@@ -50956,7 +50916,7 @@ var WfoStepStatusIcon = ({
           width: `${theme.base}`,
           visibility: hasSubIcon ? "visible" : "hidden"
         },
-        children: /* @__PURE__ */ jsx211(SubIcon, { color: subIconColor, stepStatus })
+        children: /* @__PURE__ */ jsx212(SubIcon, { color: subIconColor, stepStatus })
       }
     )
   ] });
@@ -50987,7 +50947,7 @@ var getStepContent = (stepDelta, showHiddenKeys) => {
 // src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx
 import { useState as useState44 } from "react";
 import { EuiFlexItem as EuiFlexItem26 } from "@elastic/eui";
-import { jsx as jsx212 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx213 } from "@emotion/react/jsx-runtime";
 var WfoStepForm = ({
   userInputForm,
   isTask,
@@ -51015,7 +50975,7 @@ var WfoStepForm = ({
       }
     });
   };
-  return /* @__PURE__ */ jsx212(EuiFlexItem26, { css: { margin: theme.size.m }, children: hasError && /* @__PURE__ */ jsx212(WfoError, {}) || isProcessing && /* @__PURE__ */ jsx212(WfoLoading, {}) || /* @__PURE__ */ jsx212(
+  return /* @__PURE__ */ jsx213(EuiFlexItem26, { css: { margin: theme.size.m }, children: hasError && /* @__PURE__ */ jsx213(WfoError, {}) || isProcessing && /* @__PURE__ */ jsx213(WfoLoading, {}) || /* @__PURE__ */ jsx213(
     UserInputFormWizard,
     {
       stepUserInput: userInputForm,
@@ -51028,7 +50988,7 @@ var WfoStepForm = ({
 };
 
 // src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
-import { Fragment as Fragment49, jsx as jsx213, jsxs as jsxs111 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment50, jsx as jsx214, jsxs as jsxs112 } from "@emotion/react/jsx-runtime";
 var WfoStep = React67.forwardRef(
   ({
     stepListItem,
@@ -51062,29 +51022,29 @@ var WfoStep = React67.forwardRef(
       if (!value) {
         return "";
       }
-      return /* @__PURE__ */ jsxs111(EuiText37, { size: "s", children: [
-        /* @__PURE__ */ jsx213("h4", { children: "To" }),
-        /* @__PURE__ */ jsx213("p", { children: value.to.map(
-          (v, i) => /* @__PURE__ */ jsxs111("div", { children: [
+      return /* @__PURE__ */ jsxs112(EuiText37, { size: "s", children: [
+        /* @__PURE__ */ jsx214("h4", { children: "To" }),
+        /* @__PURE__ */ jsx214("p", { children: value.to.map(
+          (v, i) => /* @__PURE__ */ jsxs112("div", { children: [
             v.name,
             " <",
-            /* @__PURE__ */ jsx213("a", { href: `mailto: ${v.email}`, children: v.email }),
+            /* @__PURE__ */ jsx214("a", { href: `mailto: ${v.email}`, children: v.email }),
             ">"
           ] }, `to-${i}`)
         ) }),
-        /* @__PURE__ */ jsx213("h4", { children: "CC" }),
-        /* @__PURE__ */ jsx213("p", { children: value.cc.map(
-          (v, i) => /* @__PURE__ */ jsxs111("div", { children: [
+        /* @__PURE__ */ jsx214("h4", { children: "CC" }),
+        /* @__PURE__ */ jsx214("p", { children: value.cc.map(
+          (v, i) => /* @__PURE__ */ jsxs112("div", { children: [
             v.name,
             " <",
-            /* @__PURE__ */ jsx213("a", { href: `mailto: ${v.email}`, children: v.email }),
+            /* @__PURE__ */ jsx214("a", { href: `mailto: ${v.email}`, children: v.email }),
             ">"
           ] }, `cc-${i}`)
         ) }),
-        /* @__PURE__ */ jsx213("h4", { children: "Subject" }),
-        /* @__PURE__ */ jsx213("p", { children: value.subject }),
-        /* @__PURE__ */ jsx213("h4", { children: "Message" }),
-        /* @__PURE__ */ jsx213(
+        /* @__PURE__ */ jsx214("h4", { children: "Subject" }),
+        /* @__PURE__ */ jsx214("p", { children: value.subject }),
+        /* @__PURE__ */ jsx214("h4", { children: "Message" }),
+        /* @__PURE__ */ jsx214(
           "div",
           {
             className: "emailMessage",
@@ -51093,30 +51053,30 @@ var WfoStep = React67.forwardRef(
         )
       ] });
     };
-    return /* @__PURE__ */ jsx213("div", { ref, children: /* @__PURE__ */ jsxs111(EuiPanel4, { children: [
-      /* @__PURE__ */ jsxs111(
+    return /* @__PURE__ */ jsx214("div", { ref, children: /* @__PURE__ */ jsxs112(EuiPanel4, { children: [
+      /* @__PURE__ */ jsxs112(
         EuiFlexGroup21,
         {
           css: getStepHeaderStyle(hasStepContent),
           onClick: () => hasStepContent && onToggleStepDetail(),
           children: [
-            /* @__PURE__ */ jsx213(
+            /* @__PURE__ */ jsx214(
               WfoStepStatusIcon,
               {
                 stepStatus: step.status,
                 isStartStep
               }
             ),
-            /* @__PURE__ */ jsxs111(EuiFlexItem27, { grow: 0, children: [
-              /* @__PURE__ */ jsx213(EuiText37, { css: stepListContentBoldTextStyle, children: step.name }),
-              /* @__PURE__ */ jsxs111(EuiText37, { children: [
+            /* @__PURE__ */ jsxs112(EuiFlexItem27, { grow: 0, children: [
+              /* @__PURE__ */ jsx214(EuiText37, { css: stepListContentBoldTextStyle, children: step.name }),
+              /* @__PURE__ */ jsxs112(EuiText37, { children: [
                 step.status,
                 " ",
                 step.executed && `- ${formatDate(step.executed)}`
               ] })
             ] }),
-            /* @__PURE__ */ jsx213(EuiFlexGroup21, { css: stepRowStyle, children: step.executed && /* @__PURE__ */ jsxs111(Fragment49, { children: [
-              isExpanded && /* @__PURE__ */ jsx213(
+            /* @__PURE__ */ jsx214(EuiFlexGroup21, { css: stepRowStyle, children: step.executed && /* @__PURE__ */ jsxs112(Fragment50, { children: [
+              isExpanded && /* @__PURE__ */ jsx214(
                 EuiButton12,
                 {
                   onClick: (event) => {
@@ -51129,33 +51089,33 @@ var WfoStep = React67.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs111(
+              /* @__PURE__ */ jsxs112(
                 EuiFlexItem27,
                 {
                   grow: 0,
                   css: stepHeaderRightStyle,
                   children: [
-                    /* @__PURE__ */ jsx213(EuiText37, { css: stepDurationStyle, children: t("duration") }),
-                    /* @__PURE__ */ jsx213(EuiText37, { size: "m", children: calculateTimeDifference(
+                    /* @__PURE__ */ jsx214(EuiText37, { css: stepDurationStyle, children: t("duration") }),
+                    /* @__PURE__ */ jsx214(EuiText37, { size: "m", children: calculateTimeDifference(
                       startedAt,
                       step.executed
                     ) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx213(
+              /* @__PURE__ */ jsx214(
                 EuiFlexItem27,
                 {
                   grow: 0,
                   css: getStepToggleExpandStyle(
                     hasStepContent
                   ),
-                  children: isExpanded && /* @__PURE__ */ jsx213(
+                  children: isExpanded && /* @__PURE__ */ jsx214(
                     WfoChevronUp,
                     {
                       color: theme.colors.text
                     }
-                  ) || /* @__PURE__ */ jsx213(
+                  ) || /* @__PURE__ */ jsx214(
                     WfoChevronDown,
                     {
                       color: theme.colors.text
@@ -51167,11 +51127,11 @@ var WfoStep = React67.forwardRef(
           ]
         }
       ),
-      hasStepContent && !hasHtmlMail && isExpanded && (tableView ? /* @__PURE__ */ jsx213(WfoTableCodeBlock, { stepState: stepContent }) : /* @__PURE__ */ jsx213(WfoJsonCodeBlock, { data: stepContent })),
-      isExpanded && hasHtmlMail && /* @__PURE__ */ jsx213("div", { css: stepEmailContainerStyle, children: displayMailConfirmation(
+      hasStepContent && !hasHtmlMail && isExpanded && (tableView ? /* @__PURE__ */ jsx214(WfoTableCodeBlock, { stepState: stepContent }) : /* @__PURE__ */ jsx214(WfoJsonCodeBlock, { data: stepContent })),
+      isExpanded && hasHtmlMail && /* @__PURE__ */ jsx214("div", { css: stepEmailContainerStyle, children: displayMailConfirmation(
         step.stateDelta.confirmation_mail
       ) }),
-      step.status === "suspend" /* SUSPEND */ && userInputForm && /* @__PURE__ */ jsx213(
+      step.status === "suspend" /* SUSPEND */ && userInputForm && /* @__PURE__ */ jsx214(
         WfoStepForm,
         {
           userInputForm,
@@ -51186,7 +51146,7 @@ WfoStep.displayName = "WfoStep";
 
 // src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx
 import React68, { useImperativeHandle as useImperativeHandle2, useRef as useRef12 } from "react";
-import { Fragment as Fragment50, jsx as jsx214, jsxs as jsxs112 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx215, jsxs as jsxs113 } from "@emotion/react/jsx-runtime";
 var WfoStepList = React68.forwardRef(
   ({
     stepListItems,
@@ -51243,10 +51203,10 @@ var WfoStepList = React68.forwardRef(
         stepReferences.current.delete(stepId);
       }
     };
-    return /* @__PURE__ */ jsx214(Fragment50, { children: stepListItems.map((stepListItem, index) => {
-      const stepComponent = /* @__PURE__ */ jsxs112("div", { children: [
-        index !== 0 && /* @__PURE__ */ jsx214("div", { css: stepSpacerStyle }),
-        /* @__PURE__ */ jsx214(
+    return /* @__PURE__ */ jsx215(Fragment51, { children: stepListItems.map((stepListItem, index) => {
+      const stepComponent = /* @__PURE__ */ jsxs113("div", { children: [
+        index !== 0 && /* @__PURE__ */ jsx215("div", { css: stepSpacerStyle }),
+        /* @__PURE__ */ jsx215(
           WfoStep,
           {
             ref: getReferenceCallbackForStepId(
@@ -51293,7 +51253,7 @@ import {
 
 // src/components/WfoDiff/styles.ts
 import { shade as shade2, tint as tint5 } from "@elastic/eui";
-import { css as css37 } from "@emotion/react";
+import { css as css38 } from "@emotion/react";
 var getWfoDiffStyles = ({
   theme,
   toSecondaryColor,
@@ -51305,7 +51265,7 @@ var getWfoDiffStyles = ({
   const insertCodeColor = isDarkThemeActive ? shade2(insertGutterColor, SHADE_FACTOR) : tint5(insertGutterColor, TINT_FACTOR);
   const deleteColor = toSecondaryColor(theme.colors.danger);
   const deleteSecondaryColor = isDarkThemeActive ? shade2(deleteColor, SHADE_FACTOR) : tint5(deleteColor, TINT_FACTOR);
-  const diffStyle = css37({
+  const diffStyle = css38({
     ".diff-code-insert": {
       backgroundColor: insertCodeColor
     },
@@ -51328,7 +51288,7 @@ var getWfoDiffStyles = ({
 };
 
 // src/components/WfoDiff/WfoDiff.tsx
-import { jsx as jsx215, jsxs as jsxs113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx216, jsxs as jsxs114 } from "@emotion/react/jsx-runtime";
 var EMPTY_HUNKS = [];
 var SMALL_CONTEXT = 3;
 var FULL_CONTEXT = 1e6;
@@ -51366,10 +51326,10 @@ var WfoDiff = ({ oldText, newText, syntax }) => {
   useEffect29(() => {
     updateDiffText();
   }, [updateDiffText, showFull]);
-  return /* @__PURE__ */ jsxs113("div", { children: [
-    /* @__PURE__ */ jsxs113(EuiFlexGroup22, { gutterSize: "xs", children: [
-      /* @__PURE__ */ jsx215(EuiFlexItem28, { grow: false, children: /* @__PURE__ */ jsx215(EuiText38, { children: /* @__PURE__ */ jsx215("h3", { children: t("title") }) }) }),
-      /* @__PURE__ */ jsx215(EuiFlexItem28, { grow: false, children: /* @__PURE__ */ jsx215(
+  return /* @__PURE__ */ jsxs114("div", { children: [
+    /* @__PURE__ */ jsxs114(EuiFlexGroup22, { gutterSize: "xs", children: [
+      /* @__PURE__ */ jsx216(EuiFlexItem28, { grow: false, children: /* @__PURE__ */ jsx216(EuiText38, { children: /* @__PURE__ */ jsx216("h3", { children: t("title") }) }) }),
+      /* @__PURE__ */ jsx216(EuiFlexItem28, { grow: false, children: /* @__PURE__ */ jsx216(
         EuiButtonIcon11,
         {
           size: "s",
@@ -51380,7 +51340,7 @@ var WfoDiff = ({ oldText, newText, syntax }) => {
           )
         }
       ) }),
-      /* @__PURE__ */ jsx215(EuiFlexItem28, { grow: false, children: /* @__PURE__ */ jsx215(
+      /* @__PURE__ */ jsx216(EuiFlexItem28, { grow: false, children: /* @__PURE__ */ jsx216(
         EuiButtonIcon11,
         {
           size: "s",
@@ -51392,8 +51352,8 @@ var WfoDiff = ({ oldText, newText, syntax }) => {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx215(EuiSpacer20, {}),
-    /* @__PURE__ */ jsx215(
+    /* @__PURE__ */ jsx216(EuiSpacer20, {}),
+    /* @__PURE__ */ jsx216(
       Diff,
       {
         css: diffStyle,
@@ -51401,7 +51361,7 @@ var WfoDiff = ({ oldText, newText, syntax }) => {
         diffType: type,
         hunks: hunks || EMPTY_HUNKS,
         tokens,
-        children: (hunks2) => hunks2.map((hunk) => /* @__PURE__ */ jsx215(Hunk, { hunk }, hunk.content))
+        children: (hunks2) => hunks2.map((hunk) => /* @__PURE__ */ jsx216(Hunk, { hunk }, hunk.content))
       }
     )
   ] });
@@ -51413,9 +51373,9 @@ import { useTranslations as useTranslations64 } from "next-intl";
 import { EuiCodeBlock, EuiText as EuiText39 } from "@elastic/eui";
 
 // src/components/WfoWorkflowSteps/WfoTraceback/styles.ts
-import { css as css38 } from "@emotion/react";
+import { css as css39 } from "@emotion/react";
 var getStyles14 = ({ theme }) => {
-  const codeBlockStyle = css38({
+  const codeBlockStyle = css39({
     marginTop: theme.size.m,
     marginBottom: theme.size.l,
     borderRadius: theme.border.radius.medium
@@ -51426,21 +51386,21 @@ var getStyles14 = ({ theme }) => {
 };
 
 // src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
-import { Fragment as Fragment51, jsx as jsx216, jsxs as jsxs114 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx217, jsxs as jsxs115 } from "@emotion/react/jsx-runtime";
 var WfoTraceback = ({ children }) => {
   const { codeBlockStyle } = useWithOrchestratorTheme(getStyles14);
   const t = useTranslations64("processes.steps");
-  return /* @__PURE__ */ jsxs114(Fragment51, { children: [
-    /* @__PURE__ */ jsx216(EuiText39, { children: /* @__PURE__ */ jsx216("h3", { children: t("traceback") }) }),
-    /* @__PURE__ */ jsx216(EuiCodeBlock, { css: codeBlockStyle, children })
+  return /* @__PURE__ */ jsxs115(Fragment52, { children: [
+    /* @__PURE__ */ jsx217(EuiText39, { children: /* @__PURE__ */ jsx217("h3", { children: t("traceback") }) }),
+    /* @__PURE__ */ jsx217(EuiCodeBlock, { css: codeBlockStyle, children })
   ] });
 };
 
 // src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
-import { Fragment as Fragment52, jsx as jsx217, jsxs as jsxs115 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx218, jsxs as jsxs116 } from "@emotion/react/jsx-runtime";
 var WfoProcessRawData = ({ processId }) => {
   const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
-  return isFetching ? /* @__PURE__ */ jsx217(WfoLoading, {}) : /* @__PURE__ */ jsx217(WfoJsonCodeBlock, { data: data || {} });
+  return isFetching ? /* @__PURE__ */ jsx218(WfoLoading, {}) : /* @__PURE__ */ jsx218(WfoJsonCodeBlock, { data: data || {} });
 };
 var WfoProcessSubscriptionDelta = ({
   processId
@@ -51451,7 +51411,7 @@ var WfoProcessSubscriptionDelta = ({
   const oldSubscriptions = data?.current_state?.__old_subscriptions__ || {};
   const oldSubscription = subscriptionId in oldSubscriptions;
   const oldText = oldSubscription || null;
-  return isFetching ? /* @__PURE__ */ jsx217(WfoLoading, {}) : /* @__PURE__ */ jsx217(
+  return isFetching ? /* @__PURE__ */ jsx218(WfoLoading, {}) : /* @__PURE__ */ jsx218(
     WfoDiff_default,
     {
       oldText: oldText ? JSON.stringify(oldText, null, 2) : "",
@@ -51534,8 +51494,8 @@ var WfoWorkflowStepList = React70.forwardRef(
       "aborted" /* ABORTED */,
       "completed" /* COMPLETED */
     ].map((status) => status.toLowerCase()).includes(lastStatus.toLowerCase());
-    return /* @__PURE__ */ jsxs115(Fragment52, { children: [
-      /* @__PURE__ */ jsx217(
+    return /* @__PURE__ */ jsxs116(Fragment53, { children: [
+      /* @__PURE__ */ jsx218(
         WfoStepListHeader,
         {
           showHiddenKeys,
@@ -51553,10 +51513,10 @@ var WfoWorkflowStepList = React70.forwardRef(
           isRunningWorkflow
         }
       ),
-      showTraceback && /* @__PURE__ */ jsx217(WfoTraceback, { children: traceBack }),
-      showRaw && /* @__PURE__ */ jsx217(WfoProcessRawData, { processId }),
-      showDelta && /* @__PURE__ */ jsx217(WfoProcessSubscriptionDelta, { processId }),
-      !showRaw && !showDelta && /* @__PURE__ */ jsx217(
+      showTraceback && /* @__PURE__ */ jsx218(WfoTraceback, { children: traceBack }),
+      showRaw && /* @__PURE__ */ jsx218(WfoProcessRawData, { processId }),
+      showDelta && /* @__PURE__ */ jsx218(WfoProcessSubscriptionDelta, { processId }),
+      !showRaw && !showDelta && /* @__PURE__ */ jsx218(
         WfoStepList,
         {
           ref: reference,
@@ -51591,9 +51551,9 @@ import {
 import { EuiText as EuiText40 } from "@elastic/eui";
 
 // src/components/WfoTextAnchor/styles.ts
-import { css as css39 } from "@emotion/react";
+import { css as css40 } from "@emotion/react";
 var getStyles15 = ({ theme }) => {
-  const textAnchorStyle = css39({
+  const textAnchorStyle = css40({
     marginTop: theme.size.xxs,
     marginLeft: 0,
     fontSize: theme.size.m,
@@ -51607,14 +51567,14 @@ var getStyles15 = ({ theme }) => {
 };
 
 // src/components/WfoTextAnchor/WfoTextAnchor.tsx
-import { jsx as jsx218 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx219 } from "@emotion/react/jsx-runtime";
 var WfoTextAnchor = ({ text, onClick }) => {
   const { textAnchorStyle } = useWithOrchestratorTheme(getStyles15);
-  return /* @__PURE__ */ jsx218(EuiText40, { onClick, css: textAnchorStyle, children: text });
+  return /* @__PURE__ */ jsx219(EuiText40, { onClick, css: textAnchorStyle, children: text });
 };
 
 // src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx
-import { jsx as jsx219, jsxs as jsxs116 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx220, jsxs as jsxs117 } from "@emotion/react/jsx-runtime";
 var WfoStepListHeader = ({
   allDetailToggleText,
   showDelta,
@@ -51641,20 +51601,20 @@ var WfoStepListHeader = ({
   const [isViewOptionOpen, setIsViewOptionOpen] = useState48(false);
   const onViewOptionClick = () => setIsViewOptionOpen((isViewOptionOpen2) => !isViewOptionOpen2);
   const closeViewOption = () => setIsViewOptionOpen(false);
-  const viewOptionButton = /* @__PURE__ */ jsx219(
+  const viewOptionButton = /* @__PURE__ */ jsx220(
     EuiButton13,
     {
       onClick: onViewOptionClick,
-      iconType: () => /* @__PURE__ */ jsx219(WfoEyeFill, { color: theme.colors.link }),
+      iconType: () => /* @__PURE__ */ jsx220(WfoEyeFill, { color: theme.colors.link }),
       iconSide: "right",
       size: "s",
       children: t("viewOptions")
     }
   );
-  return /* @__PURE__ */ jsxs116(EuiFlexGroup23, { css: stepListHeaderStyle, children: [
-    /* @__PURE__ */ jsxs116(EuiFlexGroup23, { css: stepListContentStyle, children: [
-      /* @__PURE__ */ jsx219(EuiText41, { css: stepListContentBoldTextStyle, children: t(isTask ? "taskSteps" : "workflowSteps") }),
-      !showRaw && /* @__PURE__ */ jsx219(
+  return /* @__PURE__ */ jsxs117(EuiFlexGroup23, { css: stepListHeaderStyle, children: [
+    /* @__PURE__ */ jsxs117(EuiFlexGroup23, { css: stepListContentStyle, children: [
+      /* @__PURE__ */ jsx220(EuiText41, { css: stepListContentBoldTextStyle, children: t(isTask ? "taskSteps" : "workflowSteps") }),
+      !showRaw && /* @__PURE__ */ jsx220(
         WfoTextAnchor,
         {
           text: allDetailToggleText,
@@ -51662,7 +51622,7 @@ var WfoStepListHeader = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs116(
+    /* @__PURE__ */ jsxs117(
       EuiFlexGroup23,
       {
         justifyContent: "flexEnd",
@@ -51670,7 +51630,7 @@ var WfoStepListHeader = ({
         css: stepListOptionsContainerStyle,
         gutterSize: "s",
         children: [
-          showTracebackButton && /* @__PURE__ */ jsx219(
+          showTracebackButton && /* @__PURE__ */ jsx220(
             EuiButton13,
             {
               onClick: () => onShowTraceback(!showTraceback),
@@ -51678,14 +51638,14 @@ var WfoStepListHeader = ({
               children: showTraceback ? t("hideTraceback") : t("showTraceback")
             }
           ),
-          /* @__PURE__ */ jsx219(
+          /* @__PURE__ */ jsx220(
             EuiButton13,
             {
               onClick: () => onChangeShowDelta(!showDelta),
               disabled: isRunningWorkflow,
               iconSide: "right",
               size: "s",
-              iconType: () => /* @__PURE__ */ jsx219(
+              iconType: () => /* @__PURE__ */ jsx220(
                 WfoCode,
                 {
                   color: isRunningWorkflow ? theme.colors.disabledText : theme.colors.link
@@ -51694,15 +51654,15 @@ var WfoStepListHeader = ({
               children: showDelta ? t("hideDelta") : t("showDelta")
             }
           ),
-          /* @__PURE__ */ jsx219(
+          /* @__PURE__ */ jsx220(
             EuiPopover8,
             {
               button: viewOptionButton,
               isOpen: isViewOptionOpen,
               closePopover: closeViewOption,
               display: "block",
-              children: /* @__PURE__ */ jsx219("div", { children: /* @__PURE__ */ jsxs116(EuiForm3, { component: "form", children: [
-                /* @__PURE__ */ jsx219(EuiFormRow23, { children: /* @__PURE__ */ jsx219(
+              children: /* @__PURE__ */ jsx220("div", { children: /* @__PURE__ */ jsxs117(EuiForm3, { component: "form", children: [
+                /* @__PURE__ */ jsx220(EuiFormRow23, { children: /* @__PURE__ */ jsx220(
                   EuiSwitch3,
                   {
                     label: "Hidden keys",
@@ -51715,7 +51675,7 @@ var WfoStepListHeader = ({
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx219(EuiFormRow23, { children: /* @__PURE__ */ jsx219(
+                /* @__PURE__ */ jsx220(EuiFormRow23, { children: /* @__PURE__ */ jsx220(
                   EuiSwitch3,
                   {
                     label: "Raw JSON data",
@@ -51736,7 +51696,7 @@ var WfoStepListHeader = ({
 };
 
 // src/pages/processes/WfoStartProcessPage.tsx
-import { jsx as jsx220, jsxs as jsxs117 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx221, jsxs as jsxs118 } from "@emotion/react/jsx-runtime";
 var getInitialProcessPayload = ({
   productId,
   subscriptionId
@@ -51871,7 +51831,7 @@ var WfoStartProcessPage = ({
     }
   };
   const pageTitle = workflowMetadata?.description || isErrorWorkflowDescription && processDetail?.workflowName || "";
-  return /* @__PURE__ */ jsx220(
+  return /* @__PURE__ */ jsx221(
     WfoProcessDetail,
     {
       pageTitle,
@@ -51880,25 +51840,25 @@ var WfoStartProcessPage = ({
       processDetail,
       timelineItems: timeLineItems,
       isLoading,
-      children: /* @__PURE__ */ jsxs117(EuiPanel5, { css: { marginTop: theme.base * 3 }, children: [
-        /* @__PURE__ */ jsxs117(EuiFlexGroup24, { css: getStepHeaderStyle(false), children: [
-          /* @__PURE__ */ jsx220(WfoStepStatusIcon, { stepStatus: "form" /* FORM */ }),
-          /* @__PURE__ */ jsxs117(EuiFlexItem29, { grow: 0, children: [
-            /* @__PURE__ */ jsx220(EuiText42, { css: stepListContentBoldTextStyle, children: t("userInput") }),
-            /* @__PURE__ */ jsx220(EuiText42, { children: t(
+      children: /* @__PURE__ */ jsxs118(EuiPanel5, { css: { marginTop: theme.base * 3 }, children: [
+        /* @__PURE__ */ jsxs118(EuiFlexGroup24, { css: getStepHeaderStyle(false), children: [
+          /* @__PURE__ */ jsx221(WfoStepStatusIcon, { stepStatus: "form" /* FORM */ }),
+          /* @__PURE__ */ jsxs118(EuiFlexItem29, { grow: 0, children: [
+            /* @__PURE__ */ jsx221(EuiText42, { css: stepListContentBoldTextStyle, children: t("userInput") }),
+            /* @__PURE__ */ jsx221(EuiText42, { children: t(
               isTask ? "submitTaskFormLabel" : "submitWorkflowFormLabel"
             ) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx220(EuiHorizontalRule8, {}),
-        hasError && /* @__PURE__ */ jsx220(WfoError, {}) || processName === "modify_note" && /* @__PURE__ */ jsx220(
+        /* @__PURE__ */ jsx221(EuiHorizontalRule8, {}),
+        hasError && /* @__PURE__ */ jsx221(WfoError, {}) || processName === "modify_note" && /* @__PURE__ */ jsx221(
           WfoPydanticForm,
           {
             processName,
             startProcessPayload,
             isTask
           }
-        ) || stepUserInput && /* @__PURE__ */ jsx220(
+        ) || stepUserInput && /* @__PURE__ */ jsx221(
           UserInputFormWizard,
           {
             stepUserInput,
@@ -51909,7 +51869,7 @@ var WfoStartProcessPage = ({
             hasNext,
             isTask
           }
-        ) || /* @__PURE__ */ jsx220(WfoLoading, {})
+        ) || /* @__PURE__ */ jsx221(WfoLoading, {})
       ] })
     }
   );
@@ -51918,7 +51878,7 @@ var WfoStartProcessPage = ({
 // src/pages/processes/WfoProductInformationWithLink.tsx
 import { useTranslations as useTranslations68 } from "next-intl";
 import { EuiButtonIcon as EuiButtonIcon12, EuiFlexGroup as EuiFlexGroup25, EuiText as EuiText43, EuiToolTip as EuiToolTip8 } from "@elastic/eui";
-import { jsx as jsx221, jsxs as jsxs118 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs119 } from "@emotion/react/jsx-runtime";
 var WfoProductInformationWithLink = ({
   workflowName,
   productNames
@@ -51926,8 +51886,8 @@ var WfoProductInformationWithLink = ({
   const { workflowInformationLinkUrl, showWorkflowInformationLink } = useGetOrchestratorConfig();
   const t = useTranslations68("processes.detail");
   const docsUrl = workflowInformationLinkUrl + workflowName;
-  return /* @__PURE__ */ jsxs118(EuiFlexGroup25, { gutterSize: "s", alignItems: "center", children: [
-    showWorkflowInformationLink && /* @__PURE__ */ jsx221(EuiToolTip8, { content: t("openWorkflowTaskInfo"), children: /* @__PURE__ */ jsx221("a", { href: docsUrl, target: "_blank", children: /* @__PURE__ */ jsx221(
+  return /* @__PURE__ */ jsxs119(EuiFlexGroup25, { gutterSize: "s", alignItems: "center", children: [
+    showWorkflowInformationLink && /* @__PURE__ */ jsx222(EuiToolTip8, { content: t("openWorkflowTaskInfo"), children: /* @__PURE__ */ jsx222("a", { href: docsUrl, target: "_blank", children: /* @__PURE__ */ jsx222(
       EuiButtonIcon12,
       {
         iconSize: "l",
@@ -51935,33 +51895,33 @@ var WfoProductInformationWithLink = ({
         "aria-label": t("openWorkflowTaskInfo")
       }
     ) }) }),
-    /* @__PURE__ */ jsx221(EuiText43, { size: "s", children: productNames })
+    /* @__PURE__ */ jsx222(EuiText43, { size: "s", children: productNames })
   ] });
 };
 
 // src/pages/settings/WfoSettingsPage.tsx
 import { useTranslations as useTranslations69 } from "next-intl";
 import { EuiHorizontalRule as EuiHorizontalRule9, EuiSpacer as EuiSpacer21 } from "@elastic/eui";
-import { Fragment as Fragment53, jsx as jsx222, jsxs as jsxs119 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment54, jsx as jsx223, jsxs as jsxs120 } from "@emotion/react/jsx-runtime";
 var WfoSettingsPage = () => {
   const { theme } = useOrchestratorTheme();
   const t = useTranslations69("main");
-  return /* @__PURE__ */ jsxs119(Fragment53, { children: [
-    /* @__PURE__ */ jsx222(
+  return /* @__PURE__ */ jsxs120(Fragment54, { children: [
+    /* @__PURE__ */ jsx223(
       WfoContentHeader,
       {
         title: t("settings"),
-        subtitle: /* @__PURE__ */ jsx222(EuiHorizontalRule9, { margin: "s" })
+        subtitle: /* @__PURE__ */ jsx223(EuiHorizontalRule9, { margin: "s" })
       }
     ),
-    /* @__PURE__ */ jsxs119("div", { css: { maxWidth: theme.base * 40 }, children: [
-      /* @__PURE__ */ jsx222(WfoFlushSettings, {}),
-      /* @__PURE__ */ jsx222(EuiSpacer21, {}),
-      /* @__PURE__ */ jsx222(WfoModifySettings, {}),
-      /* @__PURE__ */ jsx222(EuiSpacer21, {}),
-      /* @__PURE__ */ jsx222(WfoEngineStatus, {}),
-      /* @__PURE__ */ jsx222(EuiSpacer21, {}),
-      /* @__PURE__ */ jsx222(WfoWorkerStatus, {})
+    /* @__PURE__ */ jsxs120("div", { css: { maxWidth: theme.base * 40 }, children: [
+      /* @__PURE__ */ jsx223(WfoFlushSettings, {}),
+      /* @__PURE__ */ jsx223(EuiSpacer21, {}),
+      /* @__PURE__ */ jsx223(WfoModifySettings, {}),
+      /* @__PURE__ */ jsx223(EuiSpacer21, {}),
+      /* @__PURE__ */ jsx223(WfoEngineStatus, {}),
+      /* @__PURE__ */ jsx223(EuiSpacer21, {}),
+      /* @__PURE__ */ jsx223(WfoWorkerStatus, {})
     ] })
   ] });
 };
@@ -51981,7 +51941,7 @@ var useStartPageSummaryCardConfigurationOverride = () => {
 };
 
 // src/pages/startPage/WfoStartPage.tsx
-import { Fragment as Fragment54, jsx as jsx223, jsxs as jsxs120 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment55, jsx as jsx224, jsxs as jsxs121 } from "@emotion/react/jsx-runtime";
 var WfoStartPage = () => {
   const t = useTranslations70("main");
   const { overrideSummaryCards } = useStartPageSummaryCardConfigurationOverride();
@@ -51990,27 +51950,27 @@ var WfoStartPage = () => {
   const username = session?.user?.name ?? "";
   const defaultSummaryCards = [
     ...toOptionalArrayEntry(
-      /* @__PURE__ */ jsx223(WfoMyWorkflowsSummaryCard, { username }, "myWorkflows"),
+      /* @__PURE__ */ jsx224(WfoMyWorkflowsSummaryCard, { username }, "myWorkflows"),
       !!username
     ),
-    /* @__PURE__ */ jsx223(WfoActiveWorkflowsSummaryCard, {}, "activeWorkflows"),
+    /* @__PURE__ */ jsx224(WfoActiveWorkflowsSummaryCard, {}, "activeWorkflows"),
     ...toOptionalArrayEntry(
-      /* @__PURE__ */ jsx223(WfoFailedTasksSummaryCard, {}, "failedTasks"),
+      /* @__PURE__ */ jsx224(WfoFailedTasksSummaryCard, {}, "failedTasks"),
       isAllowed("/orchestrator/tasks/" /* NAVIGATION_TASKS */)
     ),
-    /* @__PURE__ */ jsx223(WfoLatestOutOfSyncSubscriptionSummaryCard, {}, "latestOutOfSyncSubscription"),
-    /* @__PURE__ */ jsx223(WfoLatestActiveSubscriptionsSummaryCard, {}, "latestActiveSubscriptions"),
-    /* @__PURE__ */ jsx223(WfoProductsSummaryCard, {}, "products")
+    /* @__PURE__ */ jsx224(WfoLatestOutOfSyncSubscriptionSummaryCard, {}, "latestOutOfSyncSubscription"),
+    /* @__PURE__ */ jsx224(WfoLatestActiveSubscriptionsSummaryCard, {}, "latestActiveSubscriptions"),
+    /* @__PURE__ */ jsx224(WfoProductsSummaryCard, {}, "products")
   ];
   const summaryCards = overrideSummaryCards?.(defaultSummaryCards) || defaultSummaryCards;
-  return /* @__PURE__ */ jsxs120(Fragment54, { children: [
-    /* @__PURE__ */ jsx223(
+  return /* @__PURE__ */ jsxs121(Fragment55, { children: [
+    /* @__PURE__ */ jsx224(
       WfoContentHeader,
       {
-        title: /* @__PURE__ */ jsx223(EuiPageHeader2, { pageTitle: `${t("welcome")} ${username}` })
+        title: /* @__PURE__ */ jsx224(EuiPageHeader2, { pageTitle: `${t("welcome")} ${username}` })
       }
     ),
-    /* @__PURE__ */ jsx223(WfoSummaryCards, { children: summaryCards })
+    /* @__PURE__ */ jsx224(WfoSummaryCards, { children: summaryCards })
   ] });
 };
 
@@ -52028,11 +51988,11 @@ var mapSubscriptionSummaryToSummaryCardListItem = (subscription) => ({
 
 // src/pages/subscriptions/WfoSubscriptionDetailPage.tsx
 import { useRouter as useRouter11 } from "next/router";
-import { Fragment as Fragment55, jsx as jsx224 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment56, jsx as jsx225 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionDetailPage = () => {
   const router = useRouter11();
   const { subscriptionId } = router.query;
-  return subscriptionId && /* @__PURE__ */ jsx224(TreeProvider, { children: /* @__PURE__ */ jsx224(WfoSubscription, { subscriptionId }) }) || /* @__PURE__ */ jsx224(Fragment55, {});
+  return subscriptionId && /* @__PURE__ */ jsx225(TreeProvider, { children: /* @__PURE__ */ jsx225(WfoSubscription, { subscriptionId }) }) || /* @__PURE__ */ jsx225(Fragment56, {});
 };
 
 // src/pages/subscriptions/WfoSubscriptionsListPage.tsx
@@ -52040,7 +52000,7 @@ import { useEffect as useEffect32, useState as useState50 } from "react";
 import { useTranslations as useTranslations71 } from "next-intl";
 import { StringParam as StringParam3, useQueryParam as useQueryParam2, withDefault as withDefault3 } from "use-query-params";
 import { EuiSpacer as EuiSpacer22 } from "@elastic/eui";
-import { Fragment as Fragment56, jsx as jsx225, jsxs as jsxs121 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment57, jsx as jsx226, jsxs as jsxs122 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionsListPage = () => {
   const t = useTranslations71("subscriptions.detail");
   const [tableDefaults, setTableDefaults] = useState50();
@@ -52078,14 +52038,14 @@ var WfoSubscriptionsListPage = () => {
   const alwaysOnFilters = subscriptionListTabs.find(
     ({ id }) => id === activeTab
   )?.alwaysOnFilters;
-  return /* @__PURE__ */ jsxs121(Fragment56, { children: [
-    /* @__PURE__ */ jsx225(
+  return /* @__PURE__ */ jsxs122(Fragment57, { children: [
+    /* @__PURE__ */ jsx226(
       WfoContentHeader,
       {
-        title: /* @__PURE__ */ jsx225(WfoTitleWithWebsocketBadge, { title: t("title") })
+        title: /* @__PURE__ */ jsx226(WfoTitleWithWebsocketBadge, { title: t("title") })
       }
     ),
-    /* @__PURE__ */ jsx225(
+    /* @__PURE__ */ jsx226(
       WfoFilterTabs,
       {
         tabs: subscriptionListTabs,
@@ -52094,8 +52054,8 @@ var WfoSubscriptionsListPage = () => {
         onChangeTab: handleChangeSubscriptionsTab
       }
     ),
-    /* @__PURE__ */ jsx225(EuiSpacer22, { size: "xxl" }),
-    /* @__PURE__ */ jsx225(
+    /* @__PURE__ */ jsx226(EuiSpacer22, { size: "xxl" }),
+    /* @__PURE__ */ jsx226(
       WfoSubscriptionsList,
       {
         hiddenColumns: tableDefaults?.hiddenColumns,
@@ -52178,7 +52138,7 @@ var getTasksListTabTypeFromString = (tabId) => {
 };
 
 // src/pages/tasks/WfoTasksListPage.tsx
-import { Fragment as Fragment57, jsx as jsx226, jsxs as jsxs122 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment58, jsx as jsx227, jsxs as jsxs123 } from "@emotion/react/jsx-runtime";
 var WfoTasksListPage = () => {
   const router = useRouter12();
   const t = useTranslations72("tasks.page");
@@ -52234,7 +52194,7 @@ var WfoTasksListPage = () => {
     workflowName: {
       columnType: "data" /* DATA */,
       label: t("taskName"),
-      renderData: (value, { processId }) => /* @__PURE__ */ jsx226(Link11, { href: `${PATH_TASKS}/${processId}`, children: value })
+      renderData: (value, { processId }) => /* @__PURE__ */ jsx227(Link11, { href: `${PATH_TASKS}/${processId}`, children: value })
     },
     ...toSortedTableColumnConfig(defaultTableColumns, [
       "lastStep",
@@ -52252,25 +52212,25 @@ var WfoTasksListPage = () => {
       "lastModifiedAt"
     ])
   });
-  return /* @__PURE__ */ jsxs122(Fragment57, { children: [
-    /* @__PURE__ */ jsxs122(
+  return /* @__PURE__ */ jsxs123(Fragment58, { children: [
+    /* @__PURE__ */ jsxs123(
       WfoContentHeader,
       {
-        title: /* @__PURE__ */ jsx226(WfoTitleWithWebsocketBadge, { title: "Tasks" }),
+        title: /* @__PURE__ */ jsx227(WfoTitleWithWebsocketBadge, { title: "Tasks" }),
         children: [
-          /* @__PURE__ */ jsx226(WfoIsAllowedToRender, { resource: "/orchestrator/processes/all-tasks/retry" /* TASKS_RETRY_ALL */, children: /* @__PURE__ */ jsx226(
+          /* @__PURE__ */ jsx227(WfoIsAllowedToRender, { resource: "/orchestrator/processes/all-tasks/retry" /* TASKS_RETRY_ALL */, children: /* @__PURE__ */ jsx227(
             EuiButton14,
             {
               onClick: handleRerunAllButtonClick,
-              iconType: () => /* @__PURE__ */ jsx226(WfoRefresh, { color: theme.colors.primaryText }),
+              iconType: () => /* @__PURE__ */ jsx227(WfoRefresh, { color: theme.colors.primaryText }),
               children: t("rerunAll")
             }
           ) }),
-          /* @__PURE__ */ jsx226(WfoIsAllowedToRender, { resource: "/orchestrator/processes/create/task" /* TASKS_CREATE */, children: /* @__PURE__ */ jsx226(WfoStartTaskButtonComboBox, {}) })
+          /* @__PURE__ */ jsx227(WfoIsAllowedToRender, { resource: "/orchestrator/processes/create/task" /* TASKS_CREATE */, children: /* @__PURE__ */ jsx227(WfoStartTaskButtonComboBox, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx226(
+    /* @__PURE__ */ jsx227(
       WfoFilterTabs,
       {
         tabs: defaultTasksListTabs,
@@ -52279,8 +52239,8 @@ var WfoTasksListPage = () => {
         onChangeTab: handleChangeTasksListTab
       }
     ),
-    /* @__PURE__ */ jsx226(EuiSpacer23, { size: "xxl" }),
-    /* @__PURE__ */ jsx226(
+    /* @__PURE__ */ jsx227(EuiSpacer23, { size: "xxl" }),
+    /* @__PURE__ */ jsx227(
       WfoProcessesList,
       {
         defaultHiddenColumns: tableDefaults?.hiddenColumns,
@@ -52364,7 +52324,7 @@ var getWorkflowsListTabTypeFromString = (tabId) => {
 };
 
 // src/pages/workflows/WfoWorkflowsListPage.tsx
-import { Fragment as Fragment58, jsx as jsx227, jsxs as jsxs123 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment59, jsx as jsx228, jsxs as jsxs124 } from "@emotion/react/jsx-runtime";
 var WfoWorkflowsListPage = () => {
   const router = useRouter13();
   const t = useTranslations73("workflows.index");
@@ -52402,14 +52362,14 @@ var WfoWorkflowsListPage = () => {
     router.replace(PATH_WORKFLOWS);
     return null;
   }
-  return /* @__PURE__ */ jsxs123(Fragment58, { children: [
-    /* @__PURE__ */ jsx227(
+  return /* @__PURE__ */ jsxs124(Fragment59, { children: [
+    /* @__PURE__ */ jsx228(
       WfoContentHeader,
       {
-        title: /* @__PURE__ */ jsx227(WfoTitleWithWebsocketBadge, { title: t("title") })
+        title: /* @__PURE__ */ jsx228(WfoTitleWithWebsocketBadge, { title: t("title") })
       }
     ),
-    /* @__PURE__ */ jsx227(
+    /* @__PURE__ */ jsx228(
       WfoFilterTabs,
       {
         tabs: defaultWorkflowsListTabs,
@@ -52418,8 +52378,8 @@ var WfoWorkflowsListPage = () => {
         onChangeTab: handleChangeWorkflowsListTab
       }
     ),
-    /* @__PURE__ */ jsx227(EuiSpacer24, { size: "xxl" }),
-    /* @__PURE__ */ jsx227(
+    /* @__PURE__ */ jsx228(EuiSpacer24, { size: "xxl" }),
+    /* @__PURE__ */ jsx228(
       WfoProcessesList,
       {
         alwaysOnFilters,
@@ -52529,7 +52489,7 @@ var graphQlProcessFilterMapper = (data) => data?.map(({ field, value }) => ({
 }));
 
 // src/components/WfoProcessList/WfoProcessesList.tsx
-import { jsx as jsx228, jsxs as jsxs124 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs125 } from "@emotion/react/jsx-runtime";
 var WfoProcessesList = ({
   alwaysOnFilters,
   defaultHiddenColumns = [],
@@ -52547,7 +52507,7 @@ var WfoProcessesList = ({
       columnType: "data" /* DATA */,
       label: t("workflowName"),
       width: "225px",
-      renderData: (value, { processId }) => /* @__PURE__ */ jsx228(Link12, { href: `${PATH_WORKFLOWS}/${processId}`, children: value }),
+      renderData: (value, { processId }) => /* @__PURE__ */ jsx229(Link12, { href: `${PATH_WORKFLOWS}/${processId}`, children: value }),
       renderTooltip: (value) => value
     },
     lastStep: {
@@ -52558,13 +52518,13 @@ var WfoProcessesList = ({
     lastStatus: {
       columnType: "data" /* DATA */,
       label: t("status"),
-      renderData: (cellValue) => /* @__PURE__ */ jsx228(WfoProcessStatusBadge, { processStatus: cellValue }),
+      renderData: (cellValue) => /* @__PURE__ */ jsx229(WfoProcessStatusBadge, { processStatus: cellValue }),
       width: "150px"
     },
     workflowTarget: {
       columnType: "data" /* DATA */,
       label: t("workflowTarget"),
-      renderData: (target) => /* @__PURE__ */ jsx228(WfoWorkflowTargetBadge, { target }),
+      renderData: (target) => /* @__PURE__ */ jsx229(WfoWorkflowTargetBadge, { target }),
       width: "100px"
     },
     tag: {
@@ -52591,7 +52551,7 @@ var WfoProcessesList = ({
       columnType: "data" /* DATA */,
       label: t("subscriptions"),
       width: "425px",
-      renderData: ({ page: subscriptions }, { processId }) => /* @__PURE__ */ jsx228(
+      renderData: ({ page: subscriptions }, { processId }) => /* @__PURE__ */ jsx229(
         WfoProcessListSubscriptionsCell,
         {
           subscriptions,
@@ -52599,13 +52559,13 @@ var WfoProcessesList = ({
           onMoreSubscriptionsClick: () => router.push(`${PATH_WORKFLOWS}/${processId}`)
         }
       ),
-      renderDetails: ({ page: subscriptions }) => /* @__PURE__ */ jsx228(
+      renderDetails: ({ page: subscriptions }) => /* @__PURE__ */ jsx229(
         WfoProcessListSubscriptionsCell,
         {
           subscriptions
         }
       ),
-      renderTooltip: ({ page: subscriptions }) => subscriptions.map(({ description, subscriptionId }) => /* @__PURE__ */ jsxs124("p", { children: [
+      renderTooltip: ({ page: subscriptions }) => subscriptions.map(({ description, subscriptionId }) => /* @__PURE__ */ jsxs125("p", { children: [
         "- ",
         description
       ] }, subscriptionId)),
@@ -52625,7 +52585,7 @@ var WfoProcessesList = ({
       columnType: "data" /* DATA */,
       label: t("processId"),
       width: "90px",
-      renderData: (value) => /* @__PURE__ */ jsx228(WfoFirstPartUUID, { UUID: value }),
+      renderData: (value) => /* @__PURE__ */ jsx229(WfoFirstPartUUID, { UUID: value }),
       renderDetails: (value) => value,
       renderTooltip: (value) => value
     },
@@ -52633,7 +52593,7 @@ var WfoProcessesList = ({
       columnType: "data" /* DATA */,
       label: t("started"),
       width: "100px",
-      renderData: (value) => /* @__PURE__ */ jsx228(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx229(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (value) => value.toString()
@@ -52642,7 +52602,7 @@ var WfoProcessesList = ({
       columnType: "data" /* DATA */,
       label: t("lastModified"),
       width: "125px",
-      renderData: (value) => /* @__PURE__ */ jsx228(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx229(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (value) => value.toString()
@@ -52675,7 +52635,7 @@ var WfoProcessesList = ({
   const getProcessListForExport = () => getProcessListTrigger(
     getQueryVariablesForExport(processListQueryVars)
   ).unwrap();
-  return /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsx229(
     WfoAdvancedTable,
     {
       queryString,
@@ -52714,13 +52674,13 @@ var WfoProcessesList = ({
 import { EuiCodeBlock as EuiCodeBlock2 } from "@elastic/eui";
 
 // src/components/WfoJsonCodeBlock/styles.ts
-import { css as css40 } from "@emotion/react";
+import { css as css41 } from "@emotion/react";
 var getStyles16 = ({ theme }) => {
-  const euiCodeBlockStyle = css40({
+  const euiCodeBlockStyle = css41({
     marginTop: 10,
     borderRadius: theme.border.radius.medium
   });
-  const euiBasicCodeBlockStyle = css40({
+  const euiBasicCodeBlockStyle = css41({
     backgroundColor: "inherit",
     ".euiCodeBlock__pre": {
       paddingTop: 0,
@@ -52738,14 +52698,14 @@ var getStyles16 = ({ theme }) => {
 };
 
 // src/components/WfoJsonCodeBlock/WfoJsonCodeBlock.tsx
-import { jsx as jsx229 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx230 } from "@emotion/react/jsx-runtime";
 var WfoJsonCodeBlock = ({
   data,
   isBasicStyle = false
 }) => {
   const { euiCodeBlockStyle, euiBasicCodeBlockStyle } = useWithOrchestratorTheme(getStyles16);
   const json = JSON.stringify(data, null, 4);
-  return /* @__PURE__ */ jsx229(
+  return /* @__PURE__ */ jsx230(
     EuiCodeBlock2,
     {
       css: isBasicStyle ? euiBasicCodeBlockStyle : euiCodeBlockStyle,
@@ -52769,10 +52729,10 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoSettings/styles.ts
-import { css as css41 } from "@emotion/react";
+import { css as css42 } from "@emotion/react";
 var getWfoFlushSettingsStyle = (wfoTheme) => {
   const { theme } = wfoTheme;
-  const comboboxStyle = css41({
+  const comboboxStyle = css42({
     // .euiComboBox is needed to override eui styling (more specific)
     "&.euiComboBox": {
       ".euiComboBox__inputWrap": {
@@ -52793,7 +52753,7 @@ var getWfoFlushSettingsStyle = (wfoTheme) => {
 };
 
 // src/components/WfoSettings/WfoFlushSettings.tsx
-import { jsx as jsx230, jsxs as jsxs125 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs126 } from "@emotion/react/jsx-runtime";
 var WfoFlushSettings = () => {
   const { comboboxStyle } = useWithOrchestratorTheme(
     getWfoFlushSettingsStyle
@@ -52831,10 +52791,10 @@ var WfoFlushSettings = () => {
       );
     });
   };
-  return /* @__PURE__ */ jsx230(WfoIsAllowedToRender, { resource: "/orchestrator/settings/flush-cache" /* SETTINGS_FLUSH_CACHE */, children: /* @__PURE__ */ jsxs125(EuiPanel6, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
-    /* @__PURE__ */ jsx230(EuiText44, { size: "s", children: /* @__PURE__ */ jsx230("h4", { children: t("flushCacheSettingsTitle") }) }),
-    /* @__PURE__ */ jsx230(EuiSpacer25, { size: "m" }),
-    /* @__PURE__ */ jsx230(
+  return /* @__PURE__ */ jsx231(WfoIsAllowedToRender, { resource: "/orchestrator/settings/flush-cache" /* SETTINGS_FLUSH_CACHE */, children: /* @__PURE__ */ jsxs126(EuiPanel6, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
+    /* @__PURE__ */ jsx231(EuiText44, { size: "s", children: /* @__PURE__ */ jsx231("h4", { children: t("flushCacheSettingsTitle") }) }),
+    /* @__PURE__ */ jsx231(EuiSpacer25, { size: "m" }),
+    /* @__PURE__ */ jsx231(
       EuiComboBox,
       {
         css: comboboxStyle,
@@ -52847,24 +52807,24 @@ var WfoFlushSettings = () => {
         fullWidth: true
       }
     ),
-    /* @__PURE__ */ jsx230(EuiSpacer25, { size: "m" }),
-    /* @__PURE__ */ jsx230(EuiButton15, { onClick: flushCache, iconType: "refresh", children: t("flushButton") })
+    /* @__PURE__ */ jsx231(EuiSpacer25, { size: "m" }),
+    /* @__PURE__ */ jsx231(EuiButton15, { onClick: flushCache, iconType: "refresh", children: t("flushButton") })
   ] }) });
 };
 
 // src/components/WfoSettings/WfoEngineStatusButton.tsx
 import { useTranslations as useTranslations76 } from "next-intl";
 import { EuiButton as EuiButton16 } from "@elastic/eui";
-import { jsx as jsx231 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx232 } from "@emotion/react/jsx-runtime";
 var WfoEngineStatusButton = () => {
   const { data, isLoading } = useGetEngineStatusQuery();
   const { engineStatus } = data || {};
   const [setEngineStatus, { isLoading: isSettingEngineStatus }] = useSetEngineStatusMutation();
   const t = useTranslations76("settings.page");
   if (isLoading || isSettingEngineStatus) {
-    return /* @__PURE__ */ jsx231(EuiButton16, { isLoading: true, fill: true, children: "Loading..." });
+    return /* @__PURE__ */ jsx232(EuiButton16, { isLoading: true, fill: true, children: "Loading..." });
   }
-  return engineStatus === "RUNNING" /* RUNNING */ ? /* @__PURE__ */ jsx231(
+  return engineStatus === "RUNNING" /* RUNNING */ ? /* @__PURE__ */ jsx232(
     EuiButton16,
     {
       onClick: () => setEngineStatus(true),
@@ -52873,7 +52833,7 @@ var WfoEngineStatusButton = () => {
       iconType: "pause",
       children: t("pauseEngine")
     }
-  ) : /* @__PURE__ */ jsx231(
+  ) : /* @__PURE__ */ jsx232(
     EuiButton16,
     {
       onClick: () => setEngineStatus(false),
@@ -52888,25 +52848,25 @@ var WfoEngineStatusButton = () => {
 // src/components/WfoSettings/WfoModifySettings.tsx
 import { useTranslations as useTranslations77 } from "next-intl";
 import { EuiFlexItem as EuiFlexItem30, EuiPanel as EuiPanel7, EuiSpacer as EuiSpacer26, EuiText as EuiText45 } from "@elastic/eui";
-import { jsx as jsx232, jsxs as jsxs126 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx233, jsxs as jsxs127 } from "@emotion/react/jsx-runtime";
 var WfoModifySettings = () => {
   const t = useTranslations77("settings.page");
-  return /* @__PURE__ */ jsxs126(EuiFlexItem30, { children: [
-    /* @__PURE__ */ jsxs126(EuiPanel7, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
-      /* @__PURE__ */ jsx232(EuiText45, { size: "s", children: /* @__PURE__ */ jsx232("h4", { children: t("resetTextSearchIndex") }) }),
-      /* @__PURE__ */ jsx232(EuiSpacer26, { size: "m" }),
-      /* @__PURE__ */ jsx232(WfoResetTextSearchIndexButton, {})
+  return /* @__PURE__ */ jsxs127(EuiFlexItem30, { children: [
+    /* @__PURE__ */ jsxs127(EuiPanel7, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
+      /* @__PURE__ */ jsx233(EuiText45, { size: "s", children: /* @__PURE__ */ jsx233("h4", { children: t("resetTextSearchIndex") }) }),
+      /* @__PURE__ */ jsx233(EuiSpacer26, { size: "m" }),
+      /* @__PURE__ */ jsx233(WfoResetTextSearchIndexButton, {})
     ] }),
-    /* @__PURE__ */ jsxs126(
+    /* @__PURE__ */ jsxs127(
       WfoIsAllowedToRender,
       {
         resource: "/orchestrator/settings/start-stop-engine" /* SETTINGS_START_STOP_ENGINE */,
         children: [
-          /* @__PURE__ */ jsx232(EuiSpacer26, {}),
-          /* @__PURE__ */ jsxs126(EuiPanel7, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
-            /* @__PURE__ */ jsx232(EuiText45, { size: "s", children: /* @__PURE__ */ jsx232("h4", { children: t("modifyEngine") }) }),
-            /* @__PURE__ */ jsx232(EuiSpacer26, { size: "m" }),
-            /* @__PURE__ */ jsx232(WfoEngineStatusButton, {})
+          /* @__PURE__ */ jsx233(EuiSpacer26, {}),
+          /* @__PURE__ */ jsxs127(EuiPanel7, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
+            /* @__PURE__ */ jsx233(EuiText45, { size: "s", children: /* @__PURE__ */ jsx233("h4", { children: t("modifyEngine") }) }),
+            /* @__PURE__ */ jsx233(EuiSpacer26, { size: "m" }),
+            /* @__PURE__ */ jsx233(WfoEngineStatusButton, {})
           ] })
         ]
       }
@@ -52917,28 +52877,28 @@ var WfoModifySettings = () => {
 // src/components/WfoSettings/WfoEngineStatus.tsx
 import { useTranslations as useTranslations78 } from "next-intl";
 import { EuiFlexGroup as EuiFlexGroup26, EuiFlexItem as EuiFlexItem31, EuiPanel as EuiPanel8, EuiText as EuiText46 } from "@elastic/eui";
-import { jsx as jsx233, jsxs as jsxs127 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx234, jsxs as jsxs128 } from "@emotion/react/jsx-runtime";
 var WfoEngineStatus = () => {
   const { theme } = useOrchestratorTheme();
   const { data } = useGetEngineStatusQuery();
   const { engineStatus, runningProcesses } = data || {};
   const isRunning = engineStatus === "RUNNING" /* RUNNING */;
   const t = useTranslations78("settings.page");
-  return /* @__PURE__ */ jsx233(EuiPanel8, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs127(EuiFlexGroup26, { direction: "column", gutterSize: "s", children: [
-    /* @__PURE__ */ jsx233(EuiFlexItem31, { children: /* @__PURE__ */ jsx233(EuiText46, { size: "s", children: /* @__PURE__ */ jsx233("h4", { children: t("engineStatusTitle") }) }) }),
-    /* @__PURE__ */ jsxs127(EuiFlexItem31, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx233(EuiText46, { size: "s", style: { minWidth: 200 }, children: t("runningProcesses") }),
-      /* @__PURE__ */ jsx233(EuiText46, { size: "s", children: runningProcesses || "-" })
+  return /* @__PURE__ */ jsx234(EuiPanel8, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs128(EuiFlexGroup26, { direction: "column", gutterSize: "s", children: [
+    /* @__PURE__ */ jsx234(EuiFlexItem31, { children: /* @__PURE__ */ jsx234(EuiText46, { size: "s", children: /* @__PURE__ */ jsx234("h4", { children: t("engineStatusTitle") }) }) }),
+    /* @__PURE__ */ jsxs128(EuiFlexItem31, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx234(EuiText46, { size: "s", style: { minWidth: 200 }, children: t("runningProcesses") }),
+      /* @__PURE__ */ jsx234(EuiText46, { size: "s", children: runningProcesses || "-" })
     ] }),
-    /* @__PURE__ */ jsxs127(EuiFlexItem31, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx233(EuiText46, { size: "s", style: { minWidth: 190 }, children: t("status") }),
-      /* @__PURE__ */ jsx233(
+    /* @__PURE__ */ jsxs128(EuiFlexItem31, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx234(EuiText46, { size: "s", style: { minWidth: 190 }, children: t("status") }),
+      /* @__PURE__ */ jsx234(
         WfoStatusDotIcon,
         {
           color: isRunning ? theme.colors.success : theme.colors.warning
         }
       ),
-      /* @__PURE__ */ jsx233(EuiText46, { size: "xs", css: { paddingTop: theme.size.xs }, children: /* @__PURE__ */ jsx233("p", { children: engineStatus }) })
+      /* @__PURE__ */ jsx234(EuiText46, { size: "xs", css: { paddingTop: theme.size.xs }, children: /* @__PURE__ */ jsx234("p", { children: engineStatus }) })
     ] })
   ] }) });
 };
@@ -52946,7 +52906,7 @@ var WfoEngineStatus = () => {
 // src/components/WfoSettings/WfoWorkerStatus.tsx
 import { useTranslations as useTranslations79 } from "next-intl";
 import { EuiFlexGroup as EuiFlexGroup27, EuiFlexItem as EuiFlexItem32, EuiPanel as EuiPanel9, EuiText as EuiText47 } from "@elastic/eui";
-import { jsx as jsx234, jsxs as jsxs128 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx235, jsxs as jsxs129 } from "@emotion/react/jsx-runtime";
 var WfoWorkerStatus = () => {
   const { data } = useGetWorkerStatusQuery();
   const {
@@ -52956,19 +52916,19 @@ var WfoWorkerStatus = () => {
     numberOfWorkersOnline
   } = data || {};
   const t = useTranslations79("settings.page");
-  return executorType?.toUpperCase() === "CELERY" /* CELERY */ && /* @__PURE__ */ jsx234(EuiPanel9, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs128(EuiFlexGroup27, { direction: "column", gutterSize: "s", children: [
-    /* @__PURE__ */ jsx234(EuiFlexItem32, { children: /* @__PURE__ */ jsx234(EuiText47, { size: "s", children: /* @__PURE__ */ jsx234("h4", { children: t("workerStatusTitle") }) }) }),
-    /* @__PURE__ */ jsxs128(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx234(EuiText47, { size: "s", style: { minWidth: 200 }, children: t("numberOfQueuedJobs") }),
-      /* @__PURE__ */ jsx234(EuiText47, { size: "s", children: numberOfQueuedJobs || "-" })
+  return executorType?.toUpperCase() === "CELERY" /* CELERY */ && /* @__PURE__ */ jsx235(EuiPanel9, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs129(EuiFlexGroup27, { direction: "column", gutterSize: "s", children: [
+    /* @__PURE__ */ jsx235(EuiFlexItem32, { children: /* @__PURE__ */ jsx235(EuiText47, { size: "s", children: /* @__PURE__ */ jsx235("h4", { children: t("workerStatusTitle") }) }) }),
+    /* @__PURE__ */ jsxs129(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx235(EuiText47, { size: "s", style: { minWidth: 200 }, children: t("numberOfQueuedJobs") }),
+      /* @__PURE__ */ jsx235(EuiText47, { size: "s", children: numberOfQueuedJobs || "-" })
     ] }),
-    /* @__PURE__ */ jsxs128(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx234(EuiText47, { size: "s", style: { minWidth: 200 }, children: t("numberOfRunningJobs") }),
-      /* @__PURE__ */ jsx234(EuiText47, { size: "s", children: numberOfRunningJobs || "-" })
+    /* @__PURE__ */ jsxs129(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx235(EuiText47, { size: "s", style: { minWidth: 200 }, children: t("numberOfRunningJobs") }),
+      /* @__PURE__ */ jsx235(EuiText47, { size: "s", children: numberOfRunningJobs || "-" })
     ] }),
-    /* @__PURE__ */ jsxs128(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx234(EuiText47, { size: "s", style: { minWidth: 200 }, children: t("numberOfWorkersOnline") }),
-      /* @__PURE__ */ jsx234(EuiText47, { size: "s", children: numberOfWorkersOnline || "-" })
+    /* @__PURE__ */ jsxs129(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx235(EuiText47, { size: "s", style: { minWidth: 200 }, children: t("numberOfWorkersOnline") }),
+      /* @__PURE__ */ jsx235(EuiText47, { size: "s", children: numberOfWorkersOnline || "-" })
     ] })
   ] }) }) || null;
 };
@@ -52976,11 +52936,11 @@ var WfoWorkerStatus = () => {
 // src/components/WfoSettings/WfoResetTextSearchIndexButton.tsx
 import { useTranslations as useTranslations80 } from "next-intl";
 import { EuiButton as EuiButton17 } from "@elastic/eui";
-import { jsx as jsx235 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx236 } from "@emotion/react/jsx-runtime";
 var WfoResetTextSearchIndexButton = () => {
   const [resetTextSearchIndex] = useResetTextSearchIndexMutation();
   const t = useTranslations80("settings.page");
-  return /* @__PURE__ */ jsx235(
+  return /* @__PURE__ */ jsx236(
     EuiButton17,
     {
       onClick: () => resetTextSearchIndex(null),
@@ -52991,17 +52951,17 @@ var WfoResetTextSearchIndexButton = () => {
 };
 
 // src/components/WfoInsyncIcon/WfoInsyncIcon.tsx
-import { jsx as jsx236 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx237 } from "@emotion/react/jsx-runtime";
 var WfoInsyncIcon = ({ inSync }) => {
   const { theme } = useOrchestratorTheme();
-  return inSync ? /* @__PURE__ */ jsx236(
+  return inSync ? /* @__PURE__ */ jsx237(
     WfoCheckmarkCircleFill,
     {
       height: 20,
       width: 20,
       color: theme.colors.primary
     }
-  ) : /* @__PURE__ */ jsx236(
+  ) : /* @__PURE__ */ jsx237(
     WfoMinusCircleFill,
     {
       height: 20,
@@ -53013,7 +52973,7 @@ var WfoInsyncIcon = ({ inSync }) => {
 
 // src/components/WfoErrorBoundary/WfoErrorBoundary.tsx
 import React77 from "react";
-import { jsx as jsx237, jsxs as jsxs129 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs130 } from "@emotion/react/jsx-runtime";
 var WfoErrorBoundary = class extends React77.Component {
   constructor(props) {
     super(props);
@@ -53030,10 +52990,10 @@ var WfoErrorBoundary = class extends React77.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsxs129("p", { children: [
+      return /* @__PURE__ */ jsxs130("p", { children: [
         "An unexpected error occurred, try to go back to the",
         " ",
-        /* @__PURE__ */ jsx237("a", { href: "/", children: "home page" })
+        /* @__PURE__ */ jsx238("a", { href: "/", children: "home page" })
       ] });
     }
     return this.props.children;
@@ -53044,9 +53004,9 @@ var WfoErrorBoundary = class extends React77.Component {
 import { EuiFlexGroup as EuiFlexGroup28 } from "@elastic/eui";
 
 // src/components/WfoNoResults/styles.ts
-import { css as css42 } from "@emotion/react";
+import { css as css43 } from "@emotion/react";
 var getStyles17 = ({ theme }) => {
-  const panelStyle = css42({
+  const panelStyle = css43({
     display: "flex",
     padding: theme.base * 2,
     flexDirection: "row",
@@ -53065,10 +53025,10 @@ var getStyles17 = ({ theme }) => {
 };
 
 // src/components/WfoNoResults/WfoNoResults.tsx
-import { jsxs as jsxs130 } from "@emotion/react/jsx-runtime";
+import { jsxs as jsxs131 } from "@emotion/react/jsx-runtime";
 var WfoNoResults = ({ text, icon }) => {
   const { panelStyle } = useWithOrchestratorTheme(getStyles17);
-  return /* @__PURE__ */ jsxs130(EuiFlexGroup28, { css: panelStyle, children: [
+  return /* @__PURE__ */ jsxs131(EuiFlexGroup28, { css: panelStyle, children: [
     icon,
     " ",
     text
@@ -53076,7 +53036,7 @@ var WfoNoResults = ({ text, icon }) => {
 };
 
 // src/components/WfoRenderElementOrString/WfoRenderElementOrString.tsx
-import { Fragment as Fragment59, jsx as jsx238 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment60, jsx as jsx239 } from "@emotion/react/jsx-runtime";
 var WfoRenderElementOrString = ({
   children,
   renderString
@@ -53084,13 +53044,13 @@ var WfoRenderElementOrString = ({
   if (typeof children === "string" && renderString) {
     return renderString(children);
   }
-  return /* @__PURE__ */ jsx238(Fragment59, { children });
+  return /* @__PURE__ */ jsx239(Fragment60, { children });
 };
 
 // src/components/WfoStartButton/WfoStartTaskComboBox.tsx
 import { useTranslations as useTranslations81 } from "next-intl";
 import { useRouter as useRouter15 } from "next/router";
-import { jsx as jsx239 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx240 } from "@emotion/react/jsx-runtime";
 var WfoStartTaskButtonComboBox = () => {
   const router = useRouter15();
   const t = useTranslations81("common");
@@ -53111,7 +53071,7 @@ var WfoStartTaskButtonComboBox = () => {
       });
     }
   };
-  return /* @__PURE__ */ jsx239(
+  return /* @__PURE__ */ jsx240(
     WfoStartButtonComboBox,
     {
       buttonText: t("newTask"),
@@ -53266,7 +53226,7 @@ var {
 } = subscriptionListMutationApi;
 
 // src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx
-import { jsx as jsx240 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx241 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionNoteEdit = ({
   subscriptionId,
   onlyShowOnHover = false,
@@ -53299,7 +53259,7 @@ var WfoSubscriptionNoteEdit = ({
       note
     });
   };
-  return /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsx241(
     WfoInlineEdit,
     {
       value: selectedItem?.note?.trim() ? selectedItem.note : INVISIBLE_CHARACTER,
@@ -53310,7 +53270,7 @@ var WfoSubscriptionNoteEdit = ({
 };
 
 // src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx
-import { jsx as jsx241 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx242 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionsList = ({
   alwaysOnFilters,
   dataDisplayParams,
@@ -53326,7 +53286,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("id"),
       width: "100px",
-      renderData: (value) => /* @__PURE__ */ jsx241(WfoFirstPartUUID, { UUID: value }),
+      renderData: (value) => /* @__PURE__ */ jsx242(WfoFirstPartUUID, { UUID: value }),
       renderDetails: (value) => value,
       renderTooltip: (value) => value
     },
@@ -53334,20 +53294,20 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("description"),
       width: "500px",
-      renderData: (value, record) => /* @__PURE__ */ jsx241(Link13, { href: `/subscriptions/${record.subscriptionId}`, children: value }),
+      renderData: (value, record) => /* @__PURE__ */ jsx242(Link13, { href: `/subscriptions/${record.subscriptionId}`, children: value }),
       renderTooltip: (value) => value
     },
     status: {
       columnType: "data" /* DATA */,
       label: t("status"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx241(WfoSubscriptionStatusBadge, { status: value })
+      renderData: (value) => /* @__PURE__ */ jsx242(WfoSubscriptionStatusBadge, { status: value })
     },
     insync: {
       columnType: "data" /* DATA */,
       label: t("insync"),
       width: "80px",
-      renderData: (value) => /* @__PURE__ */ jsx241(WfoInsyncIcon, { inSync: value })
+      renderData: (value) => /* @__PURE__ */ jsx242(WfoInsyncIcon, { inSync: value })
     },
     productName: {
       columnType: "data" /* DATA */,
@@ -53371,7 +53331,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("startDate"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx241(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx242(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString()
@@ -53380,7 +53340,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("endDate"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx241(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx242(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString()
@@ -53389,7 +53349,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("note"),
       renderData: (cellValue, row) => {
-        return /* @__PURE__ */ jsx241(
+        return /* @__PURE__ */ jsx242(
           WfoSubscriptionNoteEdit,
           {
             queryVariables: graphqlQueryVariables,
@@ -53404,9 +53364,9 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("metadata"),
       width: "100px",
-      renderData: (value) => /* @__PURE__ */ jsx241(WfoInlineJson, { data: value }),
-      renderDetails: (value) => value && /* @__PURE__ */ jsx241(WfoJsonCodeBlock, { data: value, isBasicStyle: true }),
-      renderTooltip: (value) => value && /* @__PURE__ */ jsx241(WfoJsonCodeBlock, { data: value, isBasicStyle: false })
+      renderData: (value) => /* @__PURE__ */ jsx242(WfoInlineJson, { data: value }),
+      renderDetails: (value) => value && /* @__PURE__ */ jsx242(WfoJsonCodeBlock, { data: value, isBasicStyle: true }),
+      renderTooltip: (value) => value && /* @__PURE__ */ jsx242(WfoJsonCodeBlock, { data: value, isBasicStyle: false })
     }
   };
   const { sortBy: sortBy2, queryString, pageIndex, pageSize } = dataDisplayParams;
@@ -53447,7 +53407,7 @@ var WfoSubscriptionsList = ({
     ),
     onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam)
   };
-  return /* @__PURE__ */ jsx241(
+  return /* @__PURE__ */ jsx242(
     WfoAdvancedTable,
     {
       queryString: dataDisplayParams.queryString,
@@ -53511,18 +53471,18 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoSummary/WfoSummaryCardHeader/styles.ts
-import { css as css43 } from "@emotion/react";
+import { css as css44 } from "@emotion/react";
 var getWfoSummaryCardHeaderStyles = ({ theme }) => {
-  const avatarStyle = css43({
+  const avatarStyle = css44({
     maxHeight: theme.base * 3,
     maxWidth: theme.base * 3
   });
-  const totalSectionStyle = css43({
+  const totalSectionStyle = css44({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between"
   });
-  const valueStyle = css43({
+  const valueStyle = css44({
     fontSize: theme.size.l,
     fontWeight: theme.font.weight.semiBold
   });
@@ -53534,7 +53494,7 @@ var getWfoSummaryCardHeaderStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCardHeader/WfoSummaryCardHeader.tsx
-import { jsx as jsx242, jsxs as jsxs131 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx243, jsxs as jsxs132 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardHeader = ({
   text,
   value,
@@ -53544,8 +53504,8 @@ var WfoSummaryCardHeader = ({
 }) => {
   const { theme } = useOrchestratorTheme();
   const { avatarStyle, totalSectionStyle, valueStyle } = useWithOrchestratorTheme(getWfoSummaryCardHeaderStyles);
-  return /* @__PURE__ */ jsx242(EuiFlexItem33, { grow: 0, children: /* @__PURE__ */ jsx242(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs131(EuiFlexGroup29, { alignItems: "center", children: [
-    /* @__PURE__ */ jsx242(
+  return /* @__PURE__ */ jsx243(EuiFlexItem33, { grow: 0, children: /* @__PURE__ */ jsx243(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs132(EuiFlexGroup29, { alignItems: "center", children: [
+    /* @__PURE__ */ jsx243(
       EuiAvatar2,
       {
         iconSize: "l",
@@ -53558,11 +53518,11 @@ var WfoSummaryCardHeader = ({
         color: iconColor
       }
     ),
-    /* @__PURE__ */ jsxs131("div", { css: totalSectionStyle, children: [
-      /* @__PURE__ */ jsx242(EuiText48, { color: "subdued", children: text }),
-      /* @__PURE__ */ jsxs131(EuiFlexGroup29, { gutterSize: "s", alignItems: "center", children: [
-        /* @__PURE__ */ jsx242(EuiText48, { css: valueStyle, children: value }),
-        isFetching && /* @__PURE__ */ jsx242(EuiLoadingSpinner, {})
+    /* @__PURE__ */ jsxs132("div", { css: totalSectionStyle, children: [
+      /* @__PURE__ */ jsx243(EuiText48, { color: "subdued", children: text }),
+      /* @__PURE__ */ jsxs132(EuiFlexGroup29, { gutterSize: "s", alignItems: "center", children: [
+        /* @__PURE__ */ jsx243(EuiText48, { css: valueStyle, children: value }),
+        isFetching && /* @__PURE__ */ jsx243(EuiLoadingSpinner, {})
       ] })
     ] })
   ] }) }) });
@@ -53585,35 +53545,35 @@ import { EuiFlexGroup as EuiFlexGroup30, EuiFlexItem as EuiFlexItem34, EuiIcon a
 
 // src/components/WfoOptionalLink/WfoOptionalLink.tsx
 import Link14 from "next/link";
-import { jsx as jsx243 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx244 } from "@emotion/react/jsx-runtime";
 var WfoOptionalLink = ({
   children,
   href
 }) => {
   if (!href) {
-    return /* @__PURE__ */ jsx243("span", { children });
+    return /* @__PURE__ */ jsx244("span", { children });
   }
-  return /* @__PURE__ */ jsx243(Link14, { href, children });
+  return /* @__PURE__ */ jsx244(Link14, { href, children });
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/styles.ts
-import { css as css44 } from "@emotion/react";
+import { css as css45 } from "@emotion/react";
 var getWfoSummaryCardListStyles = ({ theme }) => {
-  const listContainerStyle = css44({
+  const listContainerStyle = css45({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
     flexGrow: 1,
     borderColor: theme.colors.lightShade
   });
-  const listHeaderStyle = css44({
+  const listHeaderStyle = css45({
     fontWeight: theme.font.weight.semiBold
   });
-  const listStyle = css44({
+  const listStyle = css45({
     height: theme.base * 20,
     overflow: "auto"
   });
-  const listItemContainerStyle = css44({
+  const listItemContainerStyle = css45({
     paddingBlock: theme.size.m,
     ".highlight-icon": {
       visibility: "hidden"
@@ -53622,13 +53582,13 @@ var getWfoSummaryCardListStyles = ({ theme }) => {
       visibility: "visible"
     }
   });
-  const listItemTitleStyle = css44({
+  const listItemTitleStyle = css45({
     fontWeight: theme.font.weight.medium
   });
-  const listItemSubtitleStyle = css44({
+  const listItemSubtitleStyle = css45({
     fontWeight: theme.font.weight.regular
   });
-  const listItemHighlightIconStyle = css44({
+  const listItemHighlightIconStyle = css45({
     visibility: "hidden"
   });
   return {
@@ -53643,7 +53603,7 @@ var getWfoSummaryCardListStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardListItem.tsx
-import { jsx as jsx244, jsxs as jsxs132 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs133 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardListItem = ({
   title,
   value,
@@ -53656,9 +53616,9 @@ var WfoSummaryCardListItem = ({
     listItemSubtitleStyle,
     listItemHighlightIconStyle
   } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-  return /* @__PURE__ */ jsx244(WfoOptionalLink, { href: url, children: /* @__PURE__ */ jsxs132(EuiFlexGroup30, { css: listItemContainerStyle, gutterSize: "none", children: [
-    /* @__PURE__ */ jsxs132(EuiFlexItem34, { children: [
-      /* @__PURE__ */ jsx244(
+  return /* @__PURE__ */ jsx245(WfoOptionalLink, { href: url, children: /* @__PURE__ */ jsxs133(EuiFlexGroup30, { css: listItemContainerStyle, gutterSize: "none", children: [
+    /* @__PURE__ */ jsxs133(EuiFlexItem34, { children: [
+      /* @__PURE__ */ jsx245(
         EuiTextColor,
         {
           color: url ? theme.colors.link : theme.colors.title,
@@ -53666,22 +53626,22 @@ var WfoSummaryCardListItem = ({
           children: title
         }
       ),
-      /* @__PURE__ */ jsx244(EuiTextColor, { css: listItemSubtitleStyle, children: value })
+      /* @__PURE__ */ jsx245(EuiTextColor, { css: listItemSubtitleStyle, children: value })
     ] }),
-    /* @__PURE__ */ jsx244(
+    /* @__PURE__ */ jsx245(
       EuiFlexItem34,
       {
         className: url ? "highlight-icon" : void 0,
         grow: false,
         css: listItemHighlightIconStyle,
-        children: /* @__PURE__ */ jsx244(EuiIcon5, { type: "sortRight", color: "primary" })
+        children: /* @__PURE__ */ jsx245(EuiIcon5, { type: "sortRight", color: "primary" })
       }
     )
   ] }) });
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardList.tsx
-import { jsx as jsx245, jsxs as jsxs133 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs134 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardList = ({
   title,
   items,
@@ -53691,7 +53651,7 @@ var WfoSummaryCardList = ({
   const router = useRouter17();
   const euiScrollBarStyle = useEuiScrollBar3();
   const { listContainerStyle, listHeaderStyle, listStyle } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-  return /* @__PURE__ */ jsx245(EuiFlexItem35, { children: /* @__PURE__ */ jsxs133(
+  return /* @__PURE__ */ jsx246(EuiFlexItem35, { children: /* @__PURE__ */ jsxs134(
     EuiPanel11,
     {
       css: listContainerStyle,
@@ -53699,11 +53659,11 @@ var WfoSummaryCardList = ({
       hasBorder: true,
       paddingSize: "l",
       children: [
-        /* @__PURE__ */ jsxs133("div", { children: [
-          /* @__PURE__ */ jsx245("p", { css: listHeaderStyle, children: title }),
-          /* @__PURE__ */ jsx245(EuiSpacer27, { size: "m" }),
-          /* @__PURE__ */ jsx245(EuiSkeletonText, { isLoading, lines: 10, children: /* @__PURE__ */ jsx245("div", { css: [listStyle, euiScrollBarStyle], children: items?.map((item, index) => /* @__PURE__ */ jsxs133("div", { children: [
-            /* @__PURE__ */ jsx245(
+        /* @__PURE__ */ jsxs134("div", { children: [
+          /* @__PURE__ */ jsx246("p", { css: listHeaderStyle, children: title }),
+          /* @__PURE__ */ jsx246(EuiSpacer27, { size: "m" }),
+          /* @__PURE__ */ jsx246(EuiSkeletonText, { isLoading, lines: 10, children: /* @__PURE__ */ jsx246("div", { css: [listStyle, euiScrollBarStyle], children: items?.map((item, index) => /* @__PURE__ */ jsxs134("div", { children: [
+            /* @__PURE__ */ jsx246(
               WfoSummaryCardListItem,
               {
                 title: item.title,
@@ -53711,11 +53671,11 @@ var WfoSummaryCardList = ({
                 url: item.url
               }
             ),
-            index === items.length - 1 ? null : /* @__PURE__ */ jsx245(EuiHorizontalRule10, { margin: "none" })
+            index === items.length - 1 ? null : /* @__PURE__ */ jsx246(EuiHorizontalRule10, { margin: "none" })
           ] }, index)) }) })
         ] }),
-        /* @__PURE__ */ jsx245(EuiSpacer27, { size: "m" }),
-        button && /* @__PURE__ */ jsx245(
+        /* @__PURE__ */ jsx246(EuiSpacer27, { size: "m" }),
+        button && /* @__PURE__ */ jsx246(
           EuiButton18,
           {
             fullWidth: true,
@@ -53730,10 +53690,10 @@ var WfoSummaryCardList = ({
 
 // src/components/WfoSummary/WfoSummaryCards.tsx
 import { EuiFlexGrid as EuiFlexGrid2, useCurrentEuiBreakpoint } from "@elastic/eui";
-import { jsx as jsx246 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx247 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCards = ({ children }) => {
   const currentBreakpoint = useCurrentEuiBreakpoint();
-  return /* @__PURE__ */ jsx246(
+  return /* @__PURE__ */ jsx247(
     EuiFlexGrid2,
     {
       responsive: false,
@@ -53748,9 +53708,9 @@ var WfoSummaryCards = ({ children }) => {
 import { EuiFlexItem as EuiFlexItem36, EuiSpacer as EuiSpacer28 } from "@elastic/eui";
 
 // src/components/WfoSummary/styles.ts
-import { css as css45 } from "@emotion/react";
+import { css as css46 } from "@emotion/react";
 var getWfoSummaryCardsStyles = ({ theme }) => {
-  const cardContainerStyle = css45({
+  const cardContainerStyle = css46({
     height: theme.base * 36,
     minWidth: theme.base * 25
   });
@@ -53760,7 +53720,7 @@ var getWfoSummaryCardsStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCard.tsx
-import { jsx as jsx247, jsxs as jsxs134 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs135 } from "@emotion/react/jsx-runtime";
 var SummaryCardStatus = /* @__PURE__ */ ((SummaryCardStatus2) => {
   SummaryCardStatus2["Success"] = "Success";
   SummaryCardStatus2["Error"] = "Error";
@@ -53786,7 +53746,7 @@ var WfoSummaryCard = ({
     switch (status) {
       case "Success" /* Success */:
         return {
-          iconType: () => /* @__PURE__ */ jsx247(
+          iconType: () => /* @__PURE__ */ jsx248(
             WfoCheckmarkCircleFill,
             {
               width: 32,
@@ -53798,7 +53758,7 @@ var WfoSummaryCard = ({
         };
       case "Error" /* Error */:
         return {
-          iconType: () => /* @__PURE__ */ jsx247(
+          iconType: () => /* @__PURE__ */ jsx248(
             WfoXCircleFill,
             {
               width: 32,
@@ -53810,7 +53770,7 @@ var WfoSummaryCard = ({
         };
       case "Neutral" /* Neutral */:
         return {
-          iconType: () => /* @__PURE__ */ jsx247(
+          iconType: () => /* @__PURE__ */ jsx248(
             WfoCubeFill,
             {
               width: 32,
@@ -53822,7 +53782,7 @@ var WfoSummaryCard = ({
         };
       default:
         return headerBadge ?? {
-          iconType: () => /* @__PURE__ */ jsx247(
+          iconType: () => /* @__PURE__ */ jsx248(
             WfoCubeFill,
             {
               width: 32,
@@ -53834,8 +53794,8 @@ var WfoSummaryCard = ({
         };
     }
   };
-  return /* @__PURE__ */ jsxs134(EuiFlexItem36, { css: cardContainerStyle, children: [
-    /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsxs135(EuiFlexItem36, { css: cardContainerStyle, children: [
+    /* @__PURE__ */ jsx248(
       WfoSummaryCardHeader,
       {
         text: headerTitle,
@@ -53844,8 +53804,8 @@ var WfoSummaryCard = ({
         ...getIconTypeAndColorForHeaderStatus(headerStatus)
       }
     ),
-    /* @__PURE__ */ jsx247(EuiSpacer28, { size: "m" }),
-    /* @__PURE__ */ jsx247(
+    /* @__PURE__ */ jsx248(EuiSpacer28, { size: "m" }),
+    /* @__PURE__ */ jsx248(
       WfoSummaryCardList,
       {
         title: listTitle,
@@ -53955,7 +53915,7 @@ var productsSummaryQueryVariables = {
 };
 
 // src/components/WfoSummary/WfoActiveWorkflowsSummaryCard.tsx
-import { jsx as jsx248 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx249 } from "@emotion/react/jsx-runtime";
 var WfoActiveWorkflowsSummaryCard = () => {
   const t = useTranslations83("startPage.activeWorkflows");
   const {
@@ -53963,7 +53923,7 @@ var WfoActiveWorkflowsSummaryCard = () => {
     isFetching,
     isLoading
   } = useGetProcessListSummaryQuery(activeWorkflowsListSummaryQueryVariables);
-  return /* @__PURE__ */ jsx248(
+  return /* @__PURE__ */ jsx249(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -53983,7 +53943,7 @@ var WfoActiveWorkflowsSummaryCard = () => {
 
 // src/components/WfoSummary/WfoFailedTasksSummaryCard.tsx
 import { useTranslations as useTranslations84 } from "next-intl";
-import { jsx as jsx249 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx250 } from "@emotion/react/jsx-runtime";
 var WfoFailedTasksSummaryCard = () => {
   const t = useTranslations84("startPage.failedTasks");
   const {
@@ -53991,7 +53951,7 @@ var WfoFailedTasksSummaryCard = () => {
     isFetching,
     isLoading
   } = useGetProcessListSummaryQuery(taskListSummaryQueryVariables);
-  return /* @__PURE__ */ jsx249(
+  return /* @__PURE__ */ jsx250(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54011,7 +53971,7 @@ var WfoFailedTasksSummaryCard = () => {
 
 // src/components/WfoSummary/WfoLatestActiveSubscriptionsSummaryCard.tsx
 import { useTranslations as useTranslations85 } from "next-intl";
-import { jsx as jsx250 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx251 } from "@emotion/react/jsx-runtime";
 var WfoLatestActiveSubscriptionsSummaryCard = () => {
   const t = useTranslations85("startPage.activeSubscriptions");
   const {
@@ -54021,7 +53981,7 @@ var WfoLatestActiveSubscriptionsSummaryCard = () => {
   } = useGetSubscriptionSummaryListQuery(
     subscriptionsListSummaryQueryVariables
   );
-  return /* @__PURE__ */ jsx250(
+  return /* @__PURE__ */ jsx251(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54041,7 +54001,7 @@ var WfoLatestActiveSubscriptionsSummaryCard = () => {
 
 // src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx
 import { useTranslations as useTranslations86 } from "next-intl";
-import { jsx as jsx251 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx252 } from "@emotion/react/jsx-runtime";
 var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
   const t = useTranslations86("startPage.outOfSyncSubscriptions");
   const {
@@ -54056,7 +54016,7 @@ var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
     ["sortBy" /* SORT_BY */]: "field-startDate_order-ASC",
     ["queryString" /* QUERY_STRING */]: "status:(provisioning|active) insync:false"
   };
-  return /* @__PURE__ */ jsx251(
+  return /* @__PURE__ */ jsx252(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54079,7 +54039,7 @@ var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
 
 // src/components/WfoSummary/WfoMyWorkflowsSummaryCard.tsx
 import { useTranslations as useTranslations87 } from "next-intl";
-import { jsx as jsx252 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx253 } from "@emotion/react/jsx-runtime";
 var WfoMyWorkflowsSummaryCard = ({
   username
 }) => {
@@ -54096,7 +54056,7 @@ var WfoMyWorkflowsSummaryCard = ({
     ["sortBy" /* SORT_BY */]: "field-lastModifiedAt_order-DESC",
     ["queryString" /* QUERY_STRING */]: `createdBy:${username}`
   };
-  return /* @__PURE__ */ jsx252(
+  return /* @__PURE__ */ jsx253(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54119,7 +54079,7 @@ var WfoMyWorkflowsSummaryCard = ({
 
 // src/components/WfoSummary/WfoProductsSummaryCard.tsx
 import { useTranslations as useTranslations88 } from "next-intl";
-import { jsx as jsx253, jsxs as jsxs135 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs136 } from "@emotion/react/jsx-runtime";
 var WfoProductsSummaryCard = () => {
   const t = useTranslations88("startPage.products");
   const {
@@ -54131,7 +54091,7 @@ var WfoProductsSummaryCard = () => {
     (left, right) => (right.subscriptions.pageInfo.totalItems ?? 0) - (left.subscriptions.pageInfo.totalItems ?? 0)
   ).map((product) => ({
     title: "",
-    value: /* @__PURE__ */ jsxs135(
+    value: /* @__PURE__ */ jsxs136(
       "div",
       {
         css: {
@@ -54139,13 +54099,13 @@ var WfoProductsSummaryCard = () => {
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ jsx253("div", { children: product.name }),
-          /* @__PURE__ */ jsx253("div", { children: product.subscriptions.pageInfo.totalItems || 0 })
+          /* @__PURE__ */ jsx254("div", { children: product.name }),
+          /* @__PURE__ */ jsx254("div", { children: product.subscriptions.pageInfo.totalItems || 0 })
         ]
       }
     )
   })) ?? [];
-  return /* @__PURE__ */ jsx253(
+  return /* @__PURE__ */ jsx254(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54161,17 +54121,17 @@ var WfoProductsSummaryCard = () => {
 
 // src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx
 import { EuiPageHeader as EuiPageHeader3 } from "@elastic/eui";
-import { Fragment as Fragment60, jsx as jsx254, jsxs as jsxs136 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment61, jsx as jsx255, jsxs as jsxs137 } from "@emotion/react/jsx-runtime";
 var WfoTitleWithWebsocketBadge = ({
   title
 }) => {
   const { useWebSockets } = useGetOrchestratorConfig();
-  const pageTitle = useWebSockets ? /* @__PURE__ */ jsxs136(Fragment60, { children: [
+  const pageTitle = useWebSockets ? /* @__PURE__ */ jsxs137(Fragment61, { children: [
     title,
     " ",
-    /* @__PURE__ */ jsx254(WfoWebsocketStatusBadge, {})
+    /* @__PURE__ */ jsx255(WfoWebsocketStatusBadge, {})
   ] }) : title;
-  return /* @__PURE__ */ jsx254(EuiPageHeader3, { pageTitle });
+  return /* @__PURE__ */ jsx255(EuiPageHeader3, { pageTitle });
 };
 
 // src/components/WfoRadioDropdown/WfoRadioDropdown.tsx
@@ -54182,7 +54142,7 @@ import {
   EuiPopover as EuiPopover9,
   EuiRadioGroup
 } from "@elastic/eui";
-import { jsx as jsx255 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx256 } from "@emotion/react/jsx-runtime";
 var WfoRadioDropdown = ({
   options,
   onUpdateOption,
@@ -54208,16 +54168,16 @@ var WfoRadioDropdown = ({
     id: option.id,
     label: option.label
   }));
-  return /* @__PURE__ */ jsx255(
+  return /* @__PURE__ */ jsx256(
     EuiFlexGroup31,
     {
       gutterSize: "s",
       alignItems: "center",
       justifyContent: "flexEnd",
-      children: /* @__PURE__ */ jsx255(
+      children: /* @__PURE__ */ jsx256(
         EuiPopover9,
         {
-          button: /* @__PURE__ */ jsx255(
+          button: /* @__PURE__ */ jsx256(
             EuiButtonEmpty5,
             {
               size: "s",
@@ -54238,7 +54198,7 @@ var WfoRadioDropdown = ({
           isOpen,
           closePopover: handleClose,
           anchorPosition: "downLeft",
-          children: /* @__PURE__ */ jsx255(
+          children: /* @__PURE__ */ jsx256(
             EuiRadioGroup,
             {
               options: radioGroupOptions,
@@ -54253,7 +54213,7 @@ var WfoRadioDropdown = ({
 };
 
 // src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx
-import { jsx as jsx256 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx257 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionDetailNoteEdit = ({ subscriptionId, onlyShowOnHover = false }) => {
   const { data, endpointName } = useGetSubscriptionDetailQuery({
     subscriptionId
@@ -54276,7 +54236,7 @@ var WfoSubscriptionDetailNoteEdit = ({ subscriptionId, onlyShowOnHover = false }
       note
     });
   };
-  return /* @__PURE__ */ jsx256(
+  return /* @__PURE__ */ jsx257(
     WfoInlineEdit,
     {
       value: selectedItem?.note?.trim() ? selectedItem.note : INVISIBLE_CHARACTER,
@@ -54290,9 +54250,9 @@ var WfoSubscriptionDetailNoteEdit = ({ subscriptionId, onlyShowOnHover = false }
 import { EuiFlexItem as EuiFlexItem37 } from "@elastic/eui";
 
 // src/components/WfoTableCodeBlock/styles.ts
-import { css as css46 } from "@emotion/react";
+import { css as css47 } from "@emotion/react";
 var getStyles18 = ({ theme }) => {
-  const tableCodeBlockMarginStyle = css46({
+  const tableCodeBlockMarginStyle = css47({
     margin: theme.size.base,
     marginTop: theme.size.l,
     marginRight: theme.size.l
@@ -54303,7 +54263,7 @@ var getStyles18 = ({ theme }) => {
 };
 
 // src/components/WfoTableCodeBlock/WfoTableCodeBlock.tsx
-import { jsx as jsx257 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx258 } from "@emotion/react/jsx-runtime";
 var WfoTableCodeBlock = ({
   stepState: data
 }) => {
@@ -54319,7 +54279,7 @@ var WfoTableCodeBlock = ({
       };
     }
   );
-  return /* @__PURE__ */ jsx257(EuiFlexItem37, { css: tableCodeBlockMarginStyle, children: /* @__PURE__ */ jsx257(
+  return /* @__PURE__ */ jsx258(EuiFlexItem37, { css: tableCodeBlockMarginStyle, children: /* @__PURE__ */ jsx258(
     WfoKeyValueTable,
     {
       keyValues,
@@ -55387,6 +55347,7 @@ export {
   STEP_STATE_HIDDEN_KEYS,
   SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
   SUBSCRIPTION_ACTIONS_ENDPOINT,
+  SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT,
   SortOrder,
   StepStatus,
   StoreProvider,
@@ -55720,7 +55681,6 @@ export {
   subscriptionListQuery,
   subscriptionListSummaryQuery,
   subscriptionListTabs,
-  subscriptionsDropdownOptionsQuery,
   tasksQuery,
   toObjectWithSerializedValues,
   toObjectWithSortedKeys,
@@ -55728,6 +55688,7 @@ export {
   toOptionalArrayEntries,
   toOptionalArrayEntry,
   toSortedTableColumnConfig,
+  toUrlParams,
   toastMessagesReducer,
   toastMessagesSlice,
   updateQueryString,
@@ -55763,7 +55724,7 @@ export {
   useGetSubscriptionDetailQuery,
   useGetSubscriptionListQuery,
   useGetSubscriptionSummaryListQuery,
-  useGetSubscriptionsDropdownOptionsQuery,
+  useGetSurfSubscriptionDropdownOptionsQuery,
   useGetTaskOptionsQuery,
   useGetTasksQuery,
   useGetTimeLineItemsQuery,
@@ -55778,6 +55739,7 @@ export {
   useLazyGetResourceTypesQuery,
   useLazyGetSubscriptionActionsQuery,
   useLazyGetSubscriptionListQuery,
+  useLazyGetSurfSubscriptionDropdownOptionsQuery,
   useLazyGetTasksQuery,
   useLazyGetWorkflowsQuery,
   useLazyStreamMessagesQuery,