@orchestrator-ui/orchestrator-ui-components 1.22.0 → 1.24.0

package/dist/index.js

@@ -12745,10 +12745,10 @@ var require_markup = __commonJS({
 var require_css = __commonJS({
   "../../node_modules/refractor/lang/css.js"(exports, module) {
     "use strict";
-    module.exports = css36;
-    css36.displayName = "css";
-    css36.aliases = [];
-    function css36(Prism) {
+    module.exports = css37;
+    css37.displayName = "css";
+    css37.aliases = [];
+    function css37(Prism) {
       ;
       (function(Prism2) {
         var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
@@ -13015,7 +13015,7 @@ var require_core = __commonJS({
     var decode = require_parse_entities();
     var Prism = require_prism_core();
     var markup = require_markup();
-    var css36 = require_css();
+    var css37 = require_css();
     var clike = require_clike();
     var js = require_javascript();
     restore();
@@ -13031,7 +13031,7 @@ var require_core = __commonJS({
     refract.registered = registered;
     refract.listLanguages = listLanguages;
     register(markup);
-    register(css36);
+    register(css37);
     register(clike);
     register(js);
     refract.util.encode = encode;
@@ -23127,10 +23127,10 @@ var require_jsstacktrace = __commonJS({
 var require_jsx = __commonJS({
   "../../node_modules/refractor/lang/jsx.js"(exports, module) {
     "use strict";
-    module.exports = jsx200;
-    jsx200.displayName = "jsx";
-    jsx200.aliases = [];
-    function jsx200(Prism) {
+    module.exports = jsx199;
+    jsx199.displayName = "jsx";
+    jsx199.aliases = [];
+    function jsx199(Prism) {
       ;
       (function(Prism2) {
         var javascript = Prism2.util.clone(Prism2.languages.javascript);
@@ -34574,7 +34574,149 @@ var WfoBadge = (_a) => {
 };
 
 // src/hooks/useCheckEngineStatus.ts
-import { useTranslations } from "next-intl";
+import { useTranslations as useTranslations2 } from "next-intl";
+
+// src/configuration/constants.ts
+var MAXIMUM_ITEMS_FOR_BULK_FETCHING = 1e3;
+var NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS = 1e6;
+var PROCESSES_ENDPOINT = "processes";
+var PROCESS_STATUS_COUNTS_ENDPOINT = `${PROCESSES_ENDPOINT}/status-counts`;
+var PROCESSES_RESUME_ALL_ENDPOINT = `resume-all`;
+var PROCESS_RESUME_ENDPOINT = `resume`;
+var PROCESS_ABORT_ENDPOINT = `abort`;
+var SETTINGS_ENDPOINT = "/settings";
+var SETTINGS_STATUS_ENDPOINT = `${SETTINGS_ENDPOINT}/status`;
+var SETTINGS_CACHE_NAMES_ENDPOINT = `${SETTINGS_ENDPOINT}/cache-names`;
+var SETTINGS_CACHE_ENDPOINT = `${SETTINGS_ENDPOINT}/cache`;
+var SETTINGS_SEARCH_INDEX_RESET_ENDPOINT = `${SETTINGS_ENDPOINT}/search-index/reset`;
+var IPAM_ENDPOINT = "surf/ipam";
+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";
+
+// src/configuration/policy-resources.ts
+var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
+  PolicyResource2["NAVIGATION_METADATA"] = "/orchestrator/metadata/";
+  PolicyResource2["NAVIGATION_SETTINGS"] = "/orchestrator/settings/";
+  PolicyResource2["NAVIGATION_SUBSCRIPTIONS"] = "/orchestrator/subscriptions/";
+  PolicyResource2["NAVIGATION_TASKS"] = "/orchestrator/tasks/";
+  PolicyResource2["NAVIGATION_WORKFLOWS"] = "/orchestrator/processes/";
+  PolicyResource2["PROCESS_ABORT"] = "/orchestrator/processes/abort/";
+  PolicyResource2["PROCESS_DELETE"] = "/orchestrator/processes/delete/";
+  PolicyResource2["PROCESS_DETAILS"] = "/orchestrator/processes/details/";
+  PolicyResource2["PROCESS_RELATED_SUBSCRIPTIONS"] = "/orchestrator/subscriptions/view/from-process";
+  PolicyResource2["PROCESS_RETRY"] = "/orchestrator/processes/retry/";
+  PolicyResource2["PROCESS_USER_INPUT"] = "/orchestrator/processes/user-input/";
+  PolicyResource2["SUBSCRIPTION_CREATE"] = "/orchestrator/processes/create/process/menu";
+  PolicyResource2["SUBSCRIPTION_MODIFY"] = "/orchestrator/subscriptions/modify/";
+  PolicyResource2["SUBSCRIPTION_TERMINATE"] = "/orchestrator/subscriptions/terminate/";
+  PolicyResource2["SUBSCRIPTION_VALIDATE"] = "/orchestrator/subscriptions/validate/";
+  PolicyResource2["TASKS_CREATE"] = "/orchestrator/processes/create/task";
+  PolicyResource2["TASKS_RETRY_ALL"] = "/orchestrator/processes/all-tasks/retry";
+  return PolicyResource2;
+})(PolicyResource || {});
+
+// src/types/types.ts
+var EngineStatus = /* @__PURE__ */ ((EngineStatus3) => {
+  EngineStatus3["RUNNING"] = "RUNNING";
+  EngineStatus3["PAUSING"] = "PAUSING";
+  EngineStatus3["PAUSED"] = "PAUSED";
+  EngineStatus3["UNKNOWN"] = "UNKNOWN";
+  return EngineStatus3;
+})(EngineStatus || {});
+var ProductLifecycleStatus = /* @__PURE__ */ ((ProductLifecycleStatus2) => {
+  ProductLifecycleStatus2["ACTIVE"] = "active";
+  ProductLifecycleStatus2["PRE_PRODUCTION"] = "pre production";
+  ProductLifecycleStatus2["PHASE_OUT"] = "phase out";
+  ProductLifecycleStatus2["END_OF_LIFE"] = "end of life";
+  return ProductLifecycleStatus2;
+})(ProductLifecycleStatus || {});
+var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
+  BadgeType2["WORKFLOW"] = "workflow";
+  BadgeType2["FIXED_INPUT"] = "fixed_input";
+  BadgeType2["RESOURCE_TYPE"] = "resource_type";
+  BadgeType2["PRODUCT_BLOCK"] = "product_block";
+  BadgeType2["PRODUCT_BLOCK_TAG"] = "product_block_tag";
+  BadgeType2["PRODUCT_TAG"] = "product_tag";
+  BadgeType2["PRODUCT"] = "product";
+  BadgeType2["TASK"] = "task";
+  return BadgeType2;
+})(BadgeType || {});
+var WorkflowTarget = /* @__PURE__ */ ((WorkflowTarget2) => {
+  WorkflowTarget2["CREATE"] = "create";
+  WorkflowTarget2["MODIFY"] = "modify";
+  WorkflowTarget2["TERMINATE"] = "terminate";
+  WorkflowTarget2["SYSTEM"] = "system";
+  return WorkflowTarget2;
+})(WorkflowTarget || {});
+var StepStatus = /* @__PURE__ */ ((StepStatus2) => {
+  StepStatus2["FORM"] = "form";
+  StepStatus2["SUCCESS"] = "success";
+  StepStatus2["FAILED"] = "failed";
+  StepStatus2["PENDING"] = "pending";
+  StepStatus2["RUNNING"] = "running";
+  StepStatus2["SKIPPED"] = "skipped";
+  StepStatus2["SUSPEND"] = "suspend";
+  StepStatus2["WAITING"] = "waiting";
+  StepStatus2["AWAITING_CALLBACK"] = "awaiting_callback";
+  StepStatus2["ABORT"] = "abort";
+  StepStatus2["COMPLETE"] = "complete";
+  return StepStatus2;
+})(StepStatus || {});
+var ProcessStatus = /* @__PURE__ */ ((ProcessStatus3) => {
+  ProcessStatus3["CREATE"] = "create";
+  ProcessStatus3["CREATED"] = "created";
+  ProcessStatus3["RUNNING"] = "running";
+  ProcessStatus3["SUSPENDED"] = "suspended";
+  ProcessStatus3["WAITING"] = "waiting";
+  ProcessStatus3["AWAITING_CALLBACK"] = "awaiting_callback";
+  ProcessStatus3["ABORTED"] = "aborted";
+  ProcessStatus3["FAILED"] = "failed";
+  ProcessStatus3["RESUMED"] = "resumed";
+  ProcessStatus3["API_UNAVAILABLE"] = "api_unavailable";
+  ProcessStatus3["INCONSISTENT_DATA"] = "inconsistent_data";
+  ProcessStatus3["COMPLETED"] = "completed";
+  return ProcessStatus3;
+})(ProcessStatus || {});
+var ProcessDoneStatuses = [
+  "completed" /* COMPLETED */,
+  "aborted" /* ABORTED */
+];
+var SortOrder = /* @__PURE__ */ ((SortOrder2) => {
+  SortOrder2["ASC"] = "ASC";
+  SortOrder2["DESC"] = "DESC";
+  return SortOrder2;
+})(SortOrder || {});
+var Locale = /* @__PURE__ */ ((Locale2) => {
+  Locale2["enGB"] = "en-GB";
+  Locale2["nlNL"] = "nl-NL";
+  return Locale2;
+})(Locale || {});
+var SubscriptionStatus = /* @__PURE__ */ ((SubscriptionStatus2) => {
+  SubscriptionStatus2["INITIAL"] = "initial";
+  SubscriptionStatus2["ACTIVE"] = "active";
+  SubscriptionStatus2["MIGRATING"] = "migrating";
+  SubscriptionStatus2["DISABLED"] = "disabled";
+  SubscriptionStatus2["TERMINATED"] = "terminated";
+  SubscriptionStatus2["PROVISIONING"] = "provisioning";
+  return SubscriptionStatus2;
+})(SubscriptionStatus || {});
+var ToastTypes = /* @__PURE__ */ ((ToastTypes2) => {
+  ToastTypes2["ERROR"] = "ERROR";
+  ToastTypes2["SUCCESS"] = "SUCCESS";
+  return ToastTypes2;
+})(ToastTypes || {});
+var Environment = /* @__PURE__ */ ((Environment2) => {
+  Environment2["DEVELOPMENT"] = "Development";
+  Environment2["PRODUCTION"] = "Production";
+  return Environment2;
+})(Environment || {});
+var ColorModes = /* @__PURE__ */ ((ColorModes2) => {
+  ColorModes2["LIGHT"] = "LIGHT";
+  ColorModes2["DARK"] = "DARK";
+  return ColorModes2;
+})(ColorModes || {});
 
 // src/rtk/api.ts
 import { getSession, signOut } from "next-auth/react";
@@ -39795,7 +39937,7 @@ function buildHooks({
   moduleOptions: {
     batch,
     hooks: {
-      useDispatch: useDispatch2,
+      useDispatch: useDispatch3,
       useSelector: useSelector3,
       useStore
     },
@@ -39844,7 +39986,7 @@ function buildHooks({
     });
   }
   function usePrefetch(endpointName, defaultOptions) {
-    const dispatch = useDispatch2();
+    const dispatch = useDispatch3();
     const stableDefaultOptions = useShallowStableValue(defaultOptions);
     return useCallback((arg, options) => dispatch(api.util.prefetch(endpointName, arg, __spreadValues(__spreadValues({}, stableDefaultOptions), options))), [endpointName, dispatch, stableDefaultOptions]);
   }
@@ -39860,7 +40002,7 @@ function buildHooks({
       const {
         initiate
       } = api.endpoints[name];
-      const dispatch = useDispatch2();
+      const dispatch = useDispatch3();
       const subscriptionSelectorsRef = useRef3();
       if (!subscriptionSelectorsRef.current) {
         const returnedValue = dispatch(api.internalActions.internal_getRTKQSubscriptions());
@@ -39959,7 +40101,7 @@ function buildHooks({
       const {
         initiate
       } = api.endpoints[name];
-      const dispatch = useDispatch2();
+      const dispatch = useDispatch3();
       const [arg, setArg] = useState(UNINITIALIZED_VALUE);
       const promiseRef = useRef3();
       const stableSubscriptionOptions = useShallowStableValue({
@@ -40080,7 +40222,7 @@ function buildHooks({
         select,
         initiate
       } = api.endpoints[name];
-      const dispatch = useDispatch2();
+      const dispatch = useDispatch3();
       const [promise, setPromise] = useState();
       useEffect3(() => () => {
         if (!(promise == null ? void 0 : promise.arg.fixedCacheKey)) {
@@ -40351,6 +40493,20 @@ var customersQuery = `query Customers {
         }
     }
 }`;
+var customersWithSubscriptionCountQuery = `query Customers {
+  customers(first: ${NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS}, after: 0) {
+    page {
+      customerId
+      fullname
+      shortcode
+      subscriptions(filterBy: {field: "status", value: "${"active" /* ACTIVE */}"}) {
+        pageInfo {
+          totalItems
+        }
+      }
+    }
+  }
+}`;
 var customerQuery = `query Customer(
         $customerId: String!
         $first: Int!
@@ -40368,6 +40524,12 @@ var customerQuery = `query Customer(
 }`;
 var customersApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
+    getCustomersWithSubscriptionCount: build.query({
+      query: () => ({ document: customersWithSubscriptionCountQuery }),
+      transformResponse: (response) => response.customers.page.filter(
+        (customer) => customer.subscriptions.pageInfo.totalItems > 0
+      )
+    }),
     getCustomers: build.query({
       query: () => ({ document: customersQuery }),
       transformResponse: (response) => {
@@ -40390,7 +40552,11 @@ var customersApi = orchestratorApi.injectEndpoints({
     })
   })
 });
-var { useGetCustomersQuery, useGetCustomerQuery } = customersApi;
+var {
+  useGetCustomersQuery,
+  useGetCustomerQuery,
+  useGetCustomersWithSubscriptionCountQuery
+} = customersApi;
 
 // src/rtk/endpoints/inSync.ts
 var inSyncApi = orchestratorApi.injectEndpoints({
@@ -40484,9 +40650,290 @@ var getOrchestratorStore = ({
 };
 
 // src/rtk/storeProvider.tsx
-import { useState as useState2 } from "react";
+import { useState as useState5 } from "react";
 import { Provider as Provider2 } from "react-redux";
-import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
+
+// src/contexts/ConfirmationDialogProvider.tsx
+import { createContext, useState as useState2 } from "react";
+
+// src/components/confirmationDialog/WfoConfirmationDialog.tsx
+import { useTranslations } from "next-intl";
+import {
+  EuiButton,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask
+} from "@elastic/eui";
+
+// src/components/confirmationDialog/ConfirmationDialogStyling.ts
+import { css } from "@emotion/react";
+var confirmationDialogStyling = css`
+    .dialog-content {
+        h2 {
+            margin: 10px 0;
+            line-height: 22px;
+            font-size: 16px;
+            font-weight: normal;
+        }
+    }
+`;
+
+// src/components/confirmationDialog/WfoConfirmationDialog.tsx
+import { jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
+function WfoConfirmationDialog({
+  isOpen = false,
+  cancel,
+  confirm,
+  question = "",
+  leavePage = false,
+  isError: isError2 = false
+}) {
+  const t = useTranslations("confirmationDialog");
+  const modalContent = /* @__PURE__ */ jsx2("div", { children: leavePage ? /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `dialog-content ${isError2 ? " error" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx2("h2", { children: question || t("leavePage") }),
+        !question && /* @__PURE__ */ jsx2("p", { children: t("leavePageSub") })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx2("section", { className: "dialog-content", children: /* @__PURE__ */ jsx2("h2", { children: question }) }) });
+  let modal;
+  if (isOpen) {
+    modal = /* @__PURE__ */ jsx2(EuiOverlayMask, { children: /* @__PURE__ */ jsxs(
+      EuiModal,
+      {
+        css: confirmationDialogStyling,
+        className: "confirm-modal",
+        onClose: leavePage ? confirm : cancel,
+        initialFocus: "[name=popfirst]",
+        children: [
+          /* @__PURE__ */ jsx2(EuiModalHeader, { children: /* @__PURE__ */ jsx2(EuiModalHeaderTitle, { children: t("title") }) }),
+          /* @__PURE__ */ jsx2(EuiModalBody, { children: modalContent }),
+          /* @__PURE__ */ jsxs(EuiModalFooter, { children: [
+            /* @__PURE__ */ jsx2(
+              EuiButton,
+              {
+                onClick: cancel,
+                id: "dialog-cancel",
+                fill: false,
+                children: leavePage ? t("leave") : t("cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx2(EuiButton, { onClick: confirm, fill: true, id: "dialog-confirm", children: leavePage ? t("stay") : t("confirm") })
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "confirmation-dialog-overlay", children: modal });
+}
+
+// src/contexts/ConfirmationDialogProvider.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+var ConfirmationDialogContext = createContext({
+  showConfirmDialog: () => {
+  },
+  closeConfirmDialog: () => {
+  }
+});
+var ConfirmationDialogProvider = ConfirmationDialogContext.Provider;
+function ConfirmationDialogContextWrapper({ children }) {
+  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState2(false);
+  const [state, setState] = useState2({
+    confirmationDialogQuestion: "",
+    confirmDialogAction: () => {
+    },
+    leavePage: false,
+    isError: false
+  });
+  const closeConfirmDialog = () => setConfirmationDialogOpen(false);
+  const showConfirmDialog = ({
+    question,
+    confirmAction,
+    cancelAction,
+    leavePage,
+    isError: isError2
+  }) => {
+    setConfirmationDialogOpen(true);
+    setState({
+      confirmationDialogQuestion: question,
+      leavePage: !!leavePage,
+      isError: !!isError2,
+      confirmDialogAction: (e, cancelConfirm = false) => {
+        closeConfirmDialog();
+        if (!cancelConfirm) {
+          return confirmAction(e);
+        }
+        if (cancelAction) {
+          return cancelAction(e);
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs2(
+    ConfirmationDialogProvider,
+    {
+      value: { showConfirmDialog, closeConfirmDialog },
+      children: [
+        /* @__PURE__ */ jsx3(
+          WfoConfirmationDialog,
+          {
+            isOpen: confirmationDialogOpen,
+            cancel: (e) => state.confirmDialogAction(e, true),
+            confirm: state.confirmDialogAction,
+            question: state.confirmationDialogQuestion,
+            leavePage: state.leavePage,
+            isError: state.isError
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/contexts/OrchestratorConfigContext.tsx
+import { createContext as createContext2 } from "react";
+
+// src/hooks/useOrchestratorConfig.ts
+import { useState as useState3 } from "react";
+var useOrchestratorConfig = (initialOrchestratorConfig) => {
+  const [orchestratorConfig] = useState3(initialOrchestratorConfig);
+  return {
+    orchestratorConfig
+  };
+};
+
+// src/contexts/OrchestratorConfigContext.tsx
+import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
+var emptyOrchestratorConfig = {
+  environmentName: "",
+  graphqlEndpointCore: "",
+  orchestratorApiBaseUrl: "",
+  orchestratorWebsocketUrl: "",
+  authActive: true,
+  useWebSockets: false,
+  useThemeToggle: false,
+  showWorkflowInformationLink: false,
+  workflowInformationLinkUrl: ""
+};
+var OrchestratorConfigContext = createContext2(
+  emptyOrchestratorConfig
+);
+var OrchestratorConfigProvider = ({ initialOrchestratorConfig, children }) => {
+  const { orchestratorConfig } = useOrchestratorConfig(
+    initialOrchestratorConfig != null ? initialOrchestratorConfig : emptyOrchestratorConfig
+  );
+  return /* @__PURE__ */ jsx4(OrchestratorConfigContext.Provider, { value: orchestratorConfig, children });
+};
+
+// src/contexts/PolicyContext.tsx
+import { createContext as createContext3 } from "react";
+import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
+var PolicyContext = createContext3({
+  isAllowedHandler: () => true
+});
+var PolicyContextProvider = ({
+  isAllowedHandler,
+  children
+}) => /* @__PURE__ */ jsx5(PolicyContext.Provider, { value: { isAllowedHandler }, children });
+
+// src/contexts/TreeContext.tsx
+import * as React3 from "react";
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
+var TreeContext = React3.createContext(null);
+var TreeProvider = ({ children }) => {
+  const [depths, setDepths] = React3.useState([]);
+  const [selectedIds, setSelectedIds] = React3.useState([0]);
+  const [expandedIds, setExpandedIds] = React3.useState([0]);
+  const toggleSelectedId = (id) => {
+    if (selectedIds.includes(id)) {
+      setSelectedIds(
+        (prevSelectedIds) => prevSelectedIds.filter((selectedId) => selectedId !== id).sort((a, b) => a - b)
+      );
+    } else {
+      setSelectedIds(
+        (prevSelectedIds) => [...prevSelectedIds, id].sort((a, b) => a - b)
+      );
+    }
+  };
+  const selectAll = () => {
+    setSelectedIds(Array.from(Array(depths.length).keys()));
+  };
+  const toggleExpandedId = (id) => {
+    if (expandedIds.includes(id)) {
+      setExpandedIds(
+        (prevExpandedIds) => prevExpandedIds.filter((expandedId) => expandedId !== id)
+      );
+    } else {
+      setExpandedIds((prevExpandedIds) => [...prevExpandedIds, id]);
+    }
+  };
+  const expandAll = () => {
+    setExpandedIds(Array.from(Array(depths.length).keys()));
+  };
+  const collapseAll = () => {
+    setExpandedIds([0]);
+  };
+  const expandNode = (itemIndex) => {
+    const initialDepth = depths[itemIndex];
+    const expandedNodeIds = depths.map((depth, i) => {
+      if (i === itemIndex || i > itemIndex && depth > initialDepth) {
+        return i;
+      }
+      return -1;
+    }).filter((nodeId) => nodeId !== -1);
+    setExpandedIds((prevExpandedIds) => [
+      ...prevExpandedIds,
+      ...expandedNodeIds
+    ]);
+  };
+  const collapseNode = (itemIndex) => {
+    const initialDepth = depths[itemIndex];
+    const collapsedNodeIds = [];
+    for (let i = itemIndex; i < depths.length; i++) {
+      if (i === itemIndex)
+        collapsedNodeIds.push(i);
+      else if (depths[i] > initialDepth)
+        collapsedNodeIds.push(i);
+      else if (depths[i] <= initialDepth)
+        break;
+    }
+    setExpandedIds(
+      (prevExpandedIds) => prevExpandedIds.filter((id) => !collapsedNodeIds.includes(id))
+    );
+  };
+  const resetSelection = () => {
+    setSelectedIds([]);
+  };
+  return /* @__PURE__ */ jsx6(
+    TreeContext.Provider,
+    {
+      value: {
+        setDepths,
+        selectedIds,
+        expandedIds,
+        toggleSelectedId,
+        toggleExpandedId,
+        expandNode,
+        collapseNode,
+        expandAll,
+        collapseAll,
+        resetSelection,
+        selectAll
+      },
+      children
+    }
+  );
+};
+
+// src/rtk/storeProvider.tsx
+import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var StoreProvider = ({
   initialOrchestratorConfig,
   orchestratorComponentOverride,
@@ -40494,12 +40941,12 @@ var StoreProvider = ({
   children
 }) => {
   const store = getOrchestratorStore({
-    orchestratorConfig: initialOrchestratorConfig,
+    orchestratorConfig: initialOrchestratorConfig != null ? initialOrchestratorConfig : emptyOrchestratorConfig,
     orchestratorComponentOverride,
     customApis
   });
-  const [orchestratorStore] = useState2(store);
-  return /* @__PURE__ */ jsx2(Provider2, { store: orchestratorStore, children });
+  const [orchestratorStore] = useState5(store);
+  return /* @__PURE__ */ jsx7(Provider2, { store: orchestratorStore, children });
 };
 
 // src/rtk/endpoints/metadata/productBlocks.ts
@@ -40864,107 +41311,6 @@ var processApi2 = orchestratorApi.injectEndpoints({
 });
 var { useGetProcessListSummaryQuery } = processApi2;
 
-// src/types/types.ts
-var EngineStatus = /* @__PURE__ */ ((EngineStatus3) => {
-  EngineStatus3["RUNNING"] = "RUNNING";
-  EngineStatus3["PAUSING"] = "PAUSING";
-  EngineStatus3["PAUSED"] = "PAUSED";
-  EngineStatus3["UNKNOWN"] = "UNKNOWN";
-  return EngineStatus3;
-})(EngineStatus || {});
-var ProductLifecycleStatus = /* @__PURE__ */ ((ProductLifecycleStatus2) => {
-  ProductLifecycleStatus2["ACTIVE"] = "active";
-  ProductLifecycleStatus2["PRE_PRODUCTION"] = "pre production";
-  ProductLifecycleStatus2["PHASE_OUT"] = "phase out";
-  ProductLifecycleStatus2["END_OF_LIFE"] = "end of life";
-  return ProductLifecycleStatus2;
-})(ProductLifecycleStatus || {});
-var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
-  BadgeType2["WORKFLOW"] = "workflow";
-  BadgeType2["FIXED_INPUT"] = "fixed_input";
-  BadgeType2["RESOURCE_TYPE"] = "resource_type";
-  BadgeType2["PRODUCT_BLOCK"] = "product_block";
-  BadgeType2["PRODUCT_BLOCK_TAG"] = "product_block_tag";
-  BadgeType2["PRODUCT_TAG"] = "product_tag";
-  BadgeType2["PRODUCT"] = "product";
-  BadgeType2["TASK"] = "task";
-  return BadgeType2;
-})(BadgeType || {});
-var WorkflowTarget = /* @__PURE__ */ ((WorkflowTarget2) => {
-  WorkflowTarget2["CREATE"] = "create";
-  WorkflowTarget2["MODIFY"] = "modify";
-  WorkflowTarget2["TERMINATE"] = "terminate";
-  WorkflowTarget2["SYSTEM"] = "system";
-  return WorkflowTarget2;
-})(WorkflowTarget || {});
-var StepStatus = /* @__PURE__ */ ((StepStatus2) => {
-  StepStatus2["FORM"] = "form";
-  StepStatus2["SUCCESS"] = "success";
-  StepStatus2["FAILED"] = "failed";
-  StepStatus2["PENDING"] = "pending";
-  StepStatus2["RUNNING"] = "running";
-  StepStatus2["SKIPPED"] = "skipped";
-  StepStatus2["SUSPEND"] = "suspend";
-  StepStatus2["WAITING"] = "waiting";
-  StepStatus2["AWAITING_CALLBACK"] = "awaiting_callback";
-  StepStatus2["ABORT"] = "abort";
-  StepStatus2["COMPLETE"] = "complete";
-  return StepStatus2;
-})(StepStatus || {});
-var ProcessStatus = /* @__PURE__ */ ((ProcessStatus3) => {
-  ProcessStatus3["CREATE"] = "create";
-  ProcessStatus3["CREATED"] = "created";
-  ProcessStatus3["RUNNING"] = "running";
-  ProcessStatus3["SUSPENDED"] = "suspended";
-  ProcessStatus3["WAITING"] = "waiting";
-  ProcessStatus3["AWAITING_CALLBACK"] = "awaiting_callback";
-  ProcessStatus3["ABORTED"] = "aborted";
-  ProcessStatus3["FAILED"] = "failed";
-  ProcessStatus3["RESUMED"] = "resumed";
-  ProcessStatus3["API_UNAVAILABLE"] = "api_unavailable";
-  ProcessStatus3["INCONSISTENT_DATA"] = "inconsistent_data";
-  ProcessStatus3["COMPLETED"] = "completed";
-  return ProcessStatus3;
-})(ProcessStatus || {});
-var ProcessDoneStatuses = [
-  "completed" /* COMPLETED */,
-  "aborted" /* ABORTED */
-];
-var SortOrder = /* @__PURE__ */ ((SortOrder2) => {
-  SortOrder2["ASC"] = "ASC";
-  SortOrder2["DESC"] = "DESC";
-  return SortOrder2;
-})(SortOrder || {});
-var Locale = /* @__PURE__ */ ((Locale2) => {
-  Locale2["enGB"] = "en-GB";
-  Locale2["nlNL"] = "nl-NL";
-  return Locale2;
-})(Locale || {});
-var SubscriptionStatus = /* @__PURE__ */ ((SubscriptionStatus2) => {
-  SubscriptionStatus2["INITIAL"] = "initial";
-  SubscriptionStatus2["ACTIVE"] = "active";
-  SubscriptionStatus2["MIGRATING"] = "migrating";
-  SubscriptionStatus2["DISABLED"] = "disabled";
-  SubscriptionStatus2["TERMINATED"] = "terminated";
-  SubscriptionStatus2["PROVISIONING"] = "provisioning";
-  return SubscriptionStatus2;
-})(SubscriptionStatus || {});
-var ToastTypes = /* @__PURE__ */ ((ToastTypes2) => {
-  ToastTypes2["ERROR"] = "ERROR";
-  ToastTypes2["SUCCESS"] = "SUCCESS";
-  return ToastTypes2;
-})(ToastTypes || {});
-var Environment = /* @__PURE__ */ ((Environment2) => {
-  Environment2["DEVELOPMENT"] = "Development";
-  Environment2["PRODUCTION"] = "Production";
-  return Environment2;
-})(Environment || {});
-var ColorModes = /* @__PURE__ */ ((ColorModes2) => {
-  ColorModes2["LIGHT"] = "LIGHT";
-  ColorModes2["DARK"] = "DARK";
-  return ColorModes2;
-})(ColorModes || {});
-
 // src/rtk/endpoints/processSteps.ts
 var processStepsQuery = `
     query ProcessSteps($processName: String!) {
@@ -41172,47 +41518,6 @@ var relatedSubscriptionsApi = orchestratorApi.injectEndpoints({
 });
 var { useGetRelatedSubscriptionsQuery } = relatedSubscriptionsApi;
 
-// src/configuration/constants.ts
-var MAXIMUM_ITEMS_FOR_BULK_FETCHING = 1e3;
-var NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS = 1e6;
-var PROCESSES_ENDPOINT = "processes";
-var PROCESS_STATUS_COUNTS_ENDPOINT = `${PROCESSES_ENDPOINT}/status-counts`;
-var PROCESSES_RESUME_ALL_ENDPOINT = `resume-all`;
-var PROCESS_RESUME_ENDPOINT = `resume`;
-var PROCESS_ABORT_ENDPOINT = `abort`;
-var SETTINGS_ENDPOINT = "/settings";
-var SETTINGS_STATUS_ENDPOINT = `${SETTINGS_ENDPOINT}/status`;
-var SETTINGS_CACHE_NAMES_ENDPOINT = `${SETTINGS_ENDPOINT}/cache-names`;
-var SETTINGS_CACHE_ENDPOINT = `${SETTINGS_ENDPOINT}/cache`;
-var SETTINGS_SEARCH_INDEX_RESET_ENDPOINT = `${SETTINGS_ENDPOINT}/search-index/reset`;
-var IPAM_ENDPOINT = "surf/ipam";
-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";
-
-// src/configuration/policy-resources.ts
-var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
-  PolicyResource2["NAVIGATION_METADATA"] = "/orchestrator/metadata/";
-  PolicyResource2["NAVIGATION_SETTINGS"] = "/orchestrator/settings/";
-  PolicyResource2["NAVIGATION_SUBSCRIPTIONS"] = "/orchestrator/subscriptions/";
-  PolicyResource2["NAVIGATION_TASKS"] = "/orchestrator/tasks/";
-  PolicyResource2["NAVIGATION_WORKFLOWS"] = "/orchestrator/processes/";
-  PolicyResource2["PROCESS_ABORT"] = "/orchestrator/processes/abort/";
-  PolicyResource2["PROCESS_DELETE"] = "/orchestrator/processes/delete/";
-  PolicyResource2["PROCESS_DETAILS"] = "/orchestrator/processes/details/";
-  PolicyResource2["PROCESS_RELATED_SUBSCRIPTIONS"] = "/orchestrator/subscriptions/view/from-process";
-  PolicyResource2["PROCESS_RETRY"] = "/orchestrator/processes/retry/";
-  PolicyResource2["PROCESS_USER_INPUT"] = "/orchestrator/processes/user-input/";
-  PolicyResource2["SUBSCRIPTION_CREATE"] = "/orchestrator/processes/create/process/menu";
-  PolicyResource2["SUBSCRIPTION_MODIFY"] = "/orchestrator/subscriptions/modify/";
-  PolicyResource2["SUBSCRIPTION_TERMINATE"] = "/orchestrator/subscriptions/terminate/";
-  PolicyResource2["SUBSCRIPTION_VALIDATE"] = "/orchestrator/subscriptions/validate/";
-  PolicyResource2["TASKS_CREATE"] = "/orchestrator/processes/create/task";
-  PolicyResource2["TASKS_RETRY_ALL"] = "/orchestrator/processes/all-tasks/retry";
-  return PolicyResource2;
-})(PolicyResource || {});
-
 // src/rtk/endpoints/settings.ts
 var statusApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
@@ -41389,7 +41694,7 @@ var getToastMessage = (type, text, title) => {
 // src/rtk/endpoints/streamMessages.ts
 var getWebSocket = (url) => __async(void 0, null, function* () {
   const session = yield getSession2();
-  const token = (session == null ? void 0 : session.accessToken) ? [session == null ? void 0 : session.accessToken] : [];
+  const token = (session == null ? void 0 : session.accessToken) ? ["base64.bearer.token", session == null ? void 0 : session.accessToken] : "";
   return new WebSocket(url, token);
 });
 var PING_INTERVAL_MS = 45e3;
@@ -41411,7 +41716,7 @@ var streamMessagesApi = orchestratorApi.injectEndpoints({
           const cleanUp = () => {
             const message = getToastMessage(
               "ERROR" /* ERROR */,
-              "Connection to the server was lost. Please refresh the page to reconnect.",
+              "Connection to the server was lost. Please click the websocket icon or refresh the page to reconnect.",
               "WebSocket closed"
             );
             dispatch(addToastMessage(message));
@@ -41475,7 +41780,6 @@ var streamMessagesApi = orchestratorApi.injectEndpoints({
           );
           webSocket.onerror = (event) => {
             console.error("WebSocket error", event);
-            cleanUp();
           };
           webSocket.onclose = () => {
             console.error("WebSocket closed");
@@ -41795,7 +42099,7 @@ var { useGetSubscriptionsDropdownOptionsQuery } = subscriptionsDropdownOptionsAp
 var useCheckEngineStatus = () => {
   const { data, isLoading, refetch } = useGetEngineStatusQuery();
   const { engineStatus } = data || {};
-  const tErrors = useTranslations("errors");
+  const tErrors = useTranslations2("errors");
   const { showToastMessage } = useShowToastMessage();
   const isEngineRunningNow = () => __async(void 0, null, function* () {
     yield refetch();
@@ -41814,15 +42118,6 @@ var useCheckEngineStatus = () => {
   };
 };
 
-// src/hooks/useOrchestratorConfig.ts
-import { useState as useState3 } from "react";
-var useOrchestratorConfig = (initialOrchestratorConfig) => {
-  const [orchestratorConfig] = useState3(initialOrchestratorConfig);
-  return {
-    orchestratorConfig
-  };
-};
-
 // src/hooks/useOrchestratorTheme.ts
 import {
   shade,
@@ -41847,273 +42142,6 @@ var useOrchestratorTheme = () => {
 // src/hooks/usePolicy.ts
 import { useContext as useContext2 } from "react";
 import { useRouter } from "next/router";
-
-// src/contexts/ConfirmationDialogProvider.tsx
-import { createContext, useState as useState4 } from "react";
-
-// src/components/confirmationDialog/WfoConfirmationDialog.tsx
-import { useTranslations as useTranslations2 } from "next-intl";
-import {
-  EuiButton,
-  EuiModal,
-  EuiModalBody,
-  EuiModalFooter,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiOverlayMask
-} from "@elastic/eui";
-
-// src/components/confirmationDialog/ConfirmationDialogStyling.ts
-import { css } from "@emotion/react";
-var confirmationDialogStyling = css`
-    .dialog-content {
-        h2 {
-            margin: 10px 0;
-            line-height: 22px;
-            font-size: 16px;
-            font-weight: normal;
-        }
-    }
-`;
-
-// src/components/confirmationDialog/WfoConfirmationDialog.tsx
-import { jsx as jsx3, jsxs } from "@emotion/react/jsx-runtime";
-function WfoConfirmationDialog({
-  isOpen = false,
-  cancel,
-  confirm,
-  question = "",
-  leavePage = false,
-  isError: isError2 = false
-}) {
-  const t = useTranslations2("confirmationDialog");
-  const modalContent = /* @__PURE__ */ jsx3("div", { children: leavePage ? /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: `dialog-content ${isError2 ? " error" : ""}`,
-      children: [
-        /* @__PURE__ */ jsx3("h2", { children: question || t("leavePage") }),
-        !question && /* @__PURE__ */ jsx3("p", { children: t("leavePageSub") })
-      ]
-    }
-  ) : /* @__PURE__ */ jsx3("section", { className: "dialog-content", children: /* @__PURE__ */ jsx3("h2", { children: question }) }) });
-  let modal;
-  if (isOpen) {
-    modal = /* @__PURE__ */ jsx3(EuiOverlayMask, { children: /* @__PURE__ */ jsxs(
-      EuiModal,
-      {
-        css: confirmationDialogStyling,
-        className: "confirm-modal",
-        onClose: leavePage ? confirm : cancel,
-        initialFocus: "[name=popfirst]",
-        children: [
-          /* @__PURE__ */ jsx3(EuiModalHeader, { children: /* @__PURE__ */ jsx3(EuiModalHeaderTitle, { children: t("title") }) }),
-          /* @__PURE__ */ jsx3(EuiModalBody, { children: modalContent }),
-          /* @__PURE__ */ jsxs(EuiModalFooter, { children: [
-            /* @__PURE__ */ jsx3(
-              EuiButton,
-              {
-                onClick: cancel,
-                id: "dialog-cancel",
-                fill: false,
-                children: leavePage ? t("leave") : t("cancel")
-              }
-            ),
-            /* @__PURE__ */ jsx3(EuiButton, { onClick: confirm, fill: true, id: "dialog-confirm", children: leavePage ? t("stay") : t("confirm") })
-          ] })
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx3("div", { className: "confirmation-dialog-overlay", children: modal });
-}
-
-// src/contexts/ConfirmationDialogProvider.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
-var ConfirmationDialogContext = createContext({
-  showConfirmDialog: () => {
-  },
-  closeConfirmDialog: () => {
-  }
-});
-var ConfirmationDialogProvider = ConfirmationDialogContext.Provider;
-function ConfirmationDialogContextWrapper({ children }) {
-  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState4(false);
-  const [state, setState] = useState4({
-    confirmationDialogQuestion: "",
-    confirmDialogAction: () => {
-    },
-    leavePage: false,
-    isError: false
-  });
-  const closeConfirmDialog = () => setConfirmationDialogOpen(false);
-  const showConfirmDialog = ({
-    question,
-    confirmAction,
-    cancelAction,
-    leavePage,
-    isError: isError2
-  }) => {
-    setConfirmationDialogOpen(true);
-    setState({
-      confirmationDialogQuestion: question,
-      leavePage: !!leavePage,
-      isError: !!isError2,
-      confirmDialogAction: (e, cancelConfirm = false) => {
-        closeConfirmDialog();
-        if (!cancelConfirm) {
-          return confirmAction(e);
-        }
-        if (cancelAction) {
-          return cancelAction(e);
-        }
-      }
-    });
-  };
-  return /* @__PURE__ */ jsxs2(
-    ConfirmationDialogProvider,
-    {
-      value: { showConfirmDialog, closeConfirmDialog },
-      children: [
-        /* @__PURE__ */ jsx4(
-          WfoConfirmationDialog,
-          {
-            isOpen: confirmationDialogOpen,
-            cancel: (e) => state.confirmDialogAction(e, true),
-            confirm: state.confirmDialogAction,
-            question: state.confirmationDialogQuestion,
-            leavePage: state.leavePage,
-            isError: state.isError
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-
-// src/contexts/OrchestratorConfigContext.tsx
-import { createContext as createContext2 } from "react";
-import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
-var OrchestratorConfigContext = createContext2({
-  environmentName: "",
-  graphqlEndpointCore: "",
-  orchestratorApiBaseUrl: "",
-  orchestratorWebsocketUrl: "",
-  authActive: true,
-  useWebSockets: false,
-  useThemeToggle: false,
-  showWorkflowInformationLink: false,
-  workflowInformationLinkUrl: ""
-});
-var OrchestratorConfigProvider = ({ initialOrchestratorConfig, children }) => {
-  const { orchestratorConfig } = useOrchestratorConfig(
-    initialOrchestratorConfig
-  );
-  return /* @__PURE__ */ jsx5(OrchestratorConfigContext.Provider, { value: orchestratorConfig, children });
-};
-
-// src/contexts/PolicyContext.tsx
-import { createContext as createContext3 } from "react";
-import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
-var PolicyContext = createContext3({
-  isAllowedHandler: () => true
-});
-var PolicyContextProvider = ({
-  isAllowedHandler,
-  children
-}) => /* @__PURE__ */ jsx6(PolicyContext.Provider, { value: { isAllowedHandler }, children });
-
-// src/contexts/TreeContext.tsx
-import * as React4 from "react";
-import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
-var TreeContext = React4.createContext(null);
-var TreeProvider = ({ children }) => {
-  const [depths, setDepths] = React4.useState([]);
-  const [selectedIds, setSelectedIds] = React4.useState([0]);
-  const [expandedIds, setExpandedIds] = React4.useState([0]);
-  const toggleSelectedId = (id) => {
-    if (selectedIds.includes(id)) {
-      setSelectedIds(
-        (prevSelectedIds) => prevSelectedIds.filter((selectedId) => selectedId !== id).sort((a, b) => a - b)
-      );
-    } else {
-      setSelectedIds(
-        (prevSelectedIds) => [...prevSelectedIds, id].sort((a, b) => a - b)
-      );
-    }
-  };
-  const selectAll = () => {
-    setSelectedIds(Array.from(Array(depths.length).keys()));
-  };
-  const toggleExpandedId = (id) => {
-    if (expandedIds.includes(id)) {
-      setExpandedIds(
-        (prevExpandedIds) => prevExpandedIds.filter((expandedId) => expandedId !== id)
-      );
-    } else {
-      setExpandedIds((prevExpandedIds) => [...prevExpandedIds, id]);
-    }
-  };
-  const expandAll = () => {
-    setExpandedIds(Array.from(Array(depths.length).keys()));
-  };
-  const collapseAll = () => {
-    setExpandedIds([0]);
-  };
-  const expandNode = (itemIndex) => {
-    const initialDepth = depths[itemIndex];
-    const expandedNodeIds = depths.map((depth, i) => {
-      if (i === itemIndex || i > itemIndex && depth > initialDepth) {
-        return i;
-      }
-      return -1;
-    }).filter((nodeId) => nodeId !== -1);
-    setExpandedIds((prevExpandedIds) => [
-      ...prevExpandedIds,
-      ...expandedNodeIds
-    ]);
-  };
-  const collapseNode = (itemIndex) => {
-    const initialDepth = depths[itemIndex];
-    const collapsedNodeIds = [];
-    for (let i = itemIndex; i < depths.length; i++) {
-      if (i === itemIndex)
-        collapsedNodeIds.push(i);
-      else if (depths[i] > initialDepth)
-        collapsedNodeIds.push(i);
-      else if (depths[i] <= initialDepth)
-        break;
-    }
-    setExpandedIds(
-      (prevExpandedIds) => prevExpandedIds.filter((id) => !collapsedNodeIds.includes(id))
-    );
-  };
-  const resetSelection = () => {
-    setSelectedIds([]);
-  };
-  return /* @__PURE__ */ jsx7(
-    TreeContext.Provider,
-    {
-      value: {
-        setDepths,
-        selectedIds,
-        expandedIds,
-        toggleSelectedId,
-        toggleExpandedId,
-        expandNode,
-        collapseNode,
-        expandAll,
-        collapseAll,
-        resetSelection,
-        selectAll
-      },
-      children
-    }
-  );
-};
-
-// src/hooks/usePolicy.ts
 var usePolicy = () => {
   const { isAllowedHandler } = useContext2(PolicyContext);
   const router = useRouter();
@@ -42820,9 +42848,9 @@ var WfoBoltFill = ({
             children: /* @__PURE__ */ jsx20("g", { id: "icon/bolt-fill", fill: color, children: /* @__PURE__ */ jsx20(
               "path",
               {
-                "fill-rule": "evenodd",
+                fillRule: "evenodd",
                 d: "M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z",
-                "clip-rule": "evenodd"
+                clipRule: "evenodd"
               }
             ) })
           }
@@ -42860,8 +42888,8 @@ var WfoBoltSlashFill = ({
             children: /* @__PURE__ */ jsx21("g", { id: "icon/bolt-slash-fill", fill: color, children: /* @__PURE__ */ jsx21(
               "path",
               {
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
                 d: "M11.412 15.655 9.75 21.75l3.745-4.012M9.257 13.5H3.75l2.659-2.849m2.048-2.194L14.25 2.25 12 10.5h8.25l-4.707 5.043M8.457 8.457 3 3m5.457 5.457 7.086 7.086m0 0L21 21"
               }
             ) })
@@ -43851,7 +43879,7 @@ var WfoHeaderBadge = (_a) => {
   } = _b, restProps = __objRest(_b, [
     "children"
   ]);
-  const css36 = restProps.iconType ? {
+  const css37 = restProps.iconType ? {
     height: 24,
     display: "flex",
     paddingLeft: 0
@@ -43859,7 +43887,7 @@ var WfoHeaderBadge = (_a) => {
     height: 24,
     display: "flex"
   };
-  return /* @__PURE__ */ jsx47(WfoBadge, __spreadProps(__spreadValues({}, restProps), { css: css36, children }));
+  return /* @__PURE__ */ jsx47(WfoBadge, __spreadProps(__spreadValues({}, restProps), { css: css37, children }));
 };
 
 // src/components/WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.tsx
@@ -44212,11 +44240,35 @@ var getNumberValueFromEnvironmentVariable = (environmentVariable, defaultValue)
   return isNaN(valueAsNumber) ? defaultValue : valueAsNumber;
 };
 
+// src/utils/getEnvironmentVariables.ts
+import process2 from "process";
+function getEnvironmentVariables(envVars) {
+  const missingEnvironmentVariables = [];
+  const environmentVariablesWithValues = envVars.reduce(
+    (acc, currentKey) => {
+      const value = process2.env[currentKey.toString()];
+      if (value === void 0) {
+        missingEnvironmentVariables.push(currentKey.toString());
+      }
+      return __spreadProps(__spreadValues({}, acc), {
+        [currentKey]: value || ""
+      });
+    },
+    {}
+  );
+  if (missingEnvironmentVariables.length > 0) {
+    console.warn(
+      `Warning: Missing required environment variables: ${missingEnvironmentVariables.join(", ")}`
+    );
+  }
+  return environmentVariablesWithValues;
+}
+
 // src/utils/getProductNamesFromProcess.ts
-var getProductNamesFromProcess = (process2) => {
-  if (!process2)
+var getProductNamesFromProcess = (process3) => {
+  if (!process3)
     return "";
-  const productNames = process2 && process2.subscriptions && process2.subscriptions.page ? process2.subscriptions.page.map((page) => page.product.name) : [];
+  const productNames = process3 && process3.subscriptions && process3.subscriptions.page ? process3.subscriptions.page.map((page) => page.product.name) : [];
   return productNames.filter((name, index) => productNames.indexOf(name) === index).join(", ");
 };
 
@@ -44561,13 +44613,40 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx
+import { useDispatch as useDispatch2 } from "react-redux";
 import { useTranslations as useTranslations6 } from "next-intl";
 import { EuiToolTip as EuiToolTip2 } from "@elastic/eui";
+
+// src/components/WfoBadges/WfoWebsocketStatusBadge/styles.ts
+import { css as css4 } from "@emotion/react";
+var getStyles3 = ({ theme }) => {
+  const connectedStyle = css4({
+    paddingLeft: theme.base / 2,
+    cursor: "default",
+    backgroundColor: theme.colors.ghost
+  });
+  const disconnectedStyle = css4({
+    paddingLeft: theme.base / 2,
+    cursor: "pointer",
+    backgroundColor: theme.colors.danger
+  });
+  return {
+    connectedStyle,
+    disconnectedStyle
+  };
+};
+
+// src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx
 import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
 var WfoWebsocketStatusBadge = () => {
+  const { connectedStyle, disconnectedStyle } = useWithOrchestratorTheme(getStyles3);
+  const dispatch = useDispatch2();
   const t = useTranslations6("main");
   const { theme } = useOrchestratorTheme();
   const { data: websocketConnected = false } = useStreamMessagesQuery();
+  const reconnect = () => {
+    dispatch(orchestratorApi.util.resetApiState());
+  };
   return /* @__PURE__ */ jsx59(
     EuiToolTip2,
     {
@@ -44576,10 +44655,17 @@ var WfoWebsocketStatusBadge = () => {
       children: /* @__PURE__ */ jsx59(
         WfoHeaderBadge,
         {
-          color: theme.colors.ghost,
           textColor: theme.colors.shadow,
-          iconType: () => websocketConnected ? /* @__PURE__ */ jsx59(WfoStatusDotIcon, { color: theme.colors.success }) : /* @__PURE__ */ jsx59(WfoXCircleFill, { color: theme.colors.danger }),
-          style: { paddingLeft: "8px" }
+          iconType: () => websocketConnected ? /* @__PURE__ */ jsx59(WfoBoltFill, { color: theme.colors.success }) : /* @__PURE__ */ jsx59(WfoBoltSlashFill, { color: "yellow" }),
+          css: websocketConnected ? connectedStyle : disconnectedStyle,
+          onClick: () => {
+            if (!websocketConnected) {
+              reconnect();
+            }
+          },
+          onClickAriaLabel: "undefined",
+          iconOnClick: void 0,
+          iconOnClickAriaLabel: void 0
         }
       )
     }
@@ -44627,16 +44713,16 @@ var WfoAppLogo = () => /* @__PURE__ */ jsxs43(
 );
 
 // src/components/WfoPageTemplate/WfoPageHeader/styles.ts
-import { css as css4 } from "@emotion/react";
+import { css as css5 } from "@emotion/react";
 var getWfoPageHeaderStyles = ({ theme }) => {
   const navigationBackgroundColor = "#04385F";
-  const appNameStyle = css4({
+  const appNameStyle = css5({
     paddingRight: theme.base,
     marginRight: theme.base,
     borderRight: `${theme.border.width.thick} solid ${theme.colors.subduedText}`
   });
   const getHeaderStyle = (navigationHeight) => {
-    return css4({
+    return css5({
       backgroundColor: navigationBackgroundColor,
       height: navigationHeight
     });
@@ -44736,9 +44822,9 @@ import { useRouter as useRouter4 } from "next/router";
 import { EuiSideNav, EuiSpacer as EuiSpacer3 } from "@elastic/eui";
 
 // src/components/WfoPageTemplate/WfoSidebar/styles.ts
-import { css as css5 } from "@emotion/react";
+import { css as css6 } from "@emotion/react";
 var getCopyrightStyles = ({ theme }) => {
-  const copyrightStyle = css5({
+  const copyrightStyle = css6({
     position: "fixed",
     bottom: 0,
     left: 0,
@@ -44751,7 +44837,7 @@ var getCopyrightStyles = ({ theme }) => {
   };
 };
 var getMenuStyles = ({ theme }) => {
-  const menuStyle = css5({
+  const menuStyle = css6({
     ".euiSideNavItem--branch": {
       "&:after": {
         backgroundColor: theme.colors.lightShade
@@ -44789,21 +44875,21 @@ var getMenuItemStyles = ({ theme }) => {
       position: "relative"
     }
   });
-  const menuItemStyle = css5(__spreadProps(__spreadValues({}, baseStyles), {
+  const menuItemStyle = css6(__spreadProps(__spreadValues({}, baseStyles), {
     color: theme.colors.subduedText
   }));
-  const selectedMenuItem = css5(__spreadProps(__spreadValues({}, baseStyles), {
+  const selectedMenuItem = css6(__spreadProps(__spreadValues({}, baseStyles), {
     height: `${theme.base * 2.25}px`,
     backgroundColor: theme.colors.lightShade,
     borderRadius: theme.border.radius.medium,
     fontWeight: theme.font.weight.semiBold,
     color: theme.colors.darkestShade
   }));
-  const selectedSubMenuItem = css5(__spreadProps(__spreadValues({}, baseSubMenuStyles), {
+  const selectedSubMenuItem = css6(__spreadProps(__spreadValues({}, baseSubMenuStyles), {
     fontWeight: theme.font.weight.medium,
     color: theme.colors.darkestShade
   }));
-  const subMenuItemStyle = css5(__spreadValues({}, baseSubMenuStyles));
+  const subMenuItemStyle = css6(__spreadValues({}, baseSubMenuStyles));
   return {
     menuItemStyle,
     selectedMenuItem,
@@ -44821,10 +44907,10 @@ import { useState as useState6 } from "react";
 import { EuiButton as EuiButton2, EuiPopover, EuiSelectable, EuiSpacer as EuiSpacer2 } from "@elastic/eui";
 
 // src/components/WfoStartButton/styles.ts
-import { css as css6 } from "@emotion/react";
-var getStyles3 = ({ theme }) => {
+import { css as css7 } from "@emotion/react";
+var getStyles4 = ({ theme }) => {
   const comboBoxWidth = "300px";
-  const selectableStyle = css6({
+  const selectableStyle = css7({
     width: comboBoxWidth,
     ".euiFieldSearch": {
       backgroundColor: theme.colors.body,
@@ -44852,7 +44938,7 @@ var WfoStartButtonComboBox = ({
 }) => {
   const [isPopoverOpen, setPopoverOpen] = useState6(false);
   const { theme, isDarkThemeActive } = useOrchestratorTheme();
-  const { selectableStyle } = useWithOrchestratorTheme(getStyles3);
+  const { selectableStyle } = useWithOrchestratorTheme(getStyles4);
   const Button = /* @__PURE__ */ jsx62(
     EuiButton2,
     {
@@ -45267,9 +45353,9 @@ import { useTranslations as useTranslations11 } from "next-intl";
 import { EuiFieldSearch, EuiFormRow } from "@elastic/eui";
 
 // src/theme/baseStyles/formFieldsBaseStyle.ts
-import { css as css7 } from "@emotion/react";
+import { css as css8 } from "@emotion/react";
 var getFormFieldsBaseStyle = ({ theme }) => {
-  const formFieldBaseStyle = css7({
+  const formFieldBaseStyle = css8({
     backgroundColor: theme.colors.body,
     color: theme.colors.text,
     "&:focus": {
@@ -45577,7 +45663,7 @@ var getLastUncompletedProcess = (processes) => {
   if (processes.length === 0) {
     return;
   }
-  const uncompletedProcesses = processes.filter((process2) => process2.lastStatus !== "completed" /* COMPLETED */).sort((a, b) => {
+  const uncompletedProcesses = processes.filter((process3) => process3.lastStatus !== "completed" /* COMPLETED */).sort((a, b) => {
     const dateA = new Date(a.startedAt);
     const dateB = new Date(b.startedAt);
     return dateB.getTime() - dateA.getTime();
@@ -45588,7 +45674,7 @@ var getLatestTaskDate = (processes) => {
   if (processes.length === 0) {
     return "";
   }
-  const tasks = processes.filter((process2) => process2.isTask).sort((a, b) => {
+  const tasks = processes.filter((process3) => process3.isTask).sort((a, b) => {
     const dateA = new Date(a.startedAt);
     const dateB = new Date(b.startedAt);
     return dateB.getTime() - dateA.getTime();
@@ -45768,42 +45854,42 @@ var WfoTargetTypeIcon = ({
 };
 
 // src/components/WfoSubscription/styles.ts
-import { css as css8 } from "@emotion/react";
-var getStyles4 = ({ theme }) => {
-  const contentCellStyle = css8({
+import { css as css9 } from "@emotion/react";
+var getStyles5 = ({ theme }) => {
+  const contentCellStyle = css9({
     padding: theme.base / 4 * 3,
     borderBottom: theme.border.thin,
     borderBottomColor: theme.colors.lightShade
   });
-  const headerCellStyle = css8(__spreadProps(__spreadValues({}, contentCellStyle), {
+  const headerCellStyle = css9(__spreadProps(__spreadValues({}, contentCellStyle), {
     paddingLeft: 0,
     width: theme.base * 16,
     fontWeight: theme.font.weight.medium
   }));
-  const emptyCellStyle = css8({
+  const emptyCellStyle = css9({
     width: theme.base
   });
-  const tableStyle = css8({
+  const tableStyle = css9({
     backgroundColor: theme.colors.lightestShade,
     width: "100%",
     borderRadius: theme.border.radius.medium,
     marginTop: theme.base / 2
   });
-  const timeLineStyle = css8({
+  const timeLineStyle = css9({
     paddingLeft: theme.base / 2
   });
-  const workflowTargetStyle = css8({ fontWeight: theme.font.weight.bold });
-  const lastContentCellStyle = css8(__spreadProps(__spreadValues({}, contentCellStyle), {
+  const workflowTargetStyle = css9({ fontWeight: theme.font.weight.bold });
+  const lastContentCellStyle = css9(__spreadProps(__spreadValues({}, contentCellStyle), {
     border: 0
   }));
-  const lastHeaderCellStyle = css8({
+  const lastHeaderCellStyle = css9({
     padding: theme.base,
     paddingLeft: 0,
     width: 250,
     fontWeight: theme.font.weight.medium,
     border: 0
   });
-  const inUseByRelationDetailsStyle = css8({
+  const inUseByRelationDetailsStyle = css9({
     borderColor: theme.colors.lightShade,
     borderStyle: "solid",
     borderWidth: "thin",
@@ -45834,7 +45920,7 @@ var WfoProcessCard = ({ subscriptionDetailProcess }) => {
     emptyCellStyle,
     lastContentCellStyle,
     lastHeaderCellStyle
-  } = useWithOrchestratorTheme(getStyles4);
+  } = useWithOrchestratorTheme(getStyles5);
   const processUrl = subscriptionDetailProcess.isTask ? PATH_TASKS : PATH_WORKFLOWS;
   return /* @__PURE__ */ jsx77(Fragment10, { children: /* @__PURE__ */ jsx77("table", { css: tableStyle, children: /* @__PURE__ */ jsxs54("tbody", { children: [
     /* @__PURE__ */ jsxs54("tr", { children: [
@@ -45880,7 +45966,7 @@ var WfoRenderSubscriptionProcess = ({
   subscriptionDetailProcess
 }) => {
   var _a;
-  const { timeLineStyle, workflowTargetStyle } = useWithOrchestratorTheme(getStyles4);
+  const { timeLineStyle, workflowTargetStyle } = useWithOrchestratorTheme(getStyles5);
   return /* @__PURE__ */ jsxs54(
     EuiComment,
     {
@@ -45915,7 +46001,7 @@ var WfoProcessesTimeline = ({
   return /* @__PURE__ */ jsxs54(Fragment10, { children: [
     /* @__PURE__ */ jsx77(EuiSpacer8, { size: "m" }),
     !subscriptionDetailProcesses && /* @__PURE__ */ jsx77(WfoLoading, {}),
-    /* @__PURE__ */ jsx77(EuiCommentList, { "aria-label": "Processes", children: subscriptionDetailProcesses && /* @__PURE__ */ jsx77(EuiCommentList, { "aria-label": "Processes", children: subscriptionDetailProcesses.filter((process2) => !process2.isTask).map((subscriptionDetailProcess, index) => /* @__PURE__ */ jsx77(
+    /* @__PURE__ */ jsx77(EuiCommentList, { "aria-label": "Processes", children: subscriptionDetailProcesses && /* @__PURE__ */ jsx77(EuiCommentList, { "aria-label": "Processes", children: subscriptionDetailProcesses.filter((process3) => !process3.isTask).map((subscriptionDetailProcess, index) => /* @__PURE__ */ jsx77(
       WfoRenderSubscriptionProcess,
       {
         subscriptionDetailProcess
@@ -46172,7 +46258,7 @@ var WfoSubscription = ({ subscriptionId }) => {
     setActiveTab(tab);
   };
   const subscriptionDetail = data == null ? void 0 : data.subscription;
-  return /* @__PURE__ */ jsx82(Fragment12, { children: isError2 && /* @__PURE__ */ jsx82(WfoError, {}) || isLoading && /* @__PURE__ */ jsx82(WfoLoading, {}) || subscriptionDetail && /* @__PURE__ */ jsxs57(Fragment12, { children: [
+  return /* @__PURE__ */ jsx82(Fragment12, { children: isError2 && /* @__PURE__ */ jsx82(WfoError, {}) || isLoading && /* @__PURE__ */ jsx82(WfoLoading, {}) || subscriptionDetail && subscriptionDetail.subscriptionId && /* @__PURE__ */ jsxs57(Fragment12, { children: [
     /* @__PURE__ */ jsxs57(
       EuiFlexGroup7,
       {
@@ -46246,6 +46332,9 @@ var WfoSubscription = ({ subscriptionId }) => {
         subscriptionId: subscriptionDetail.subscriptionId
       }
     )
+  ] }) || /* @__PURE__ */ jsxs57("h1", { children: [
+    "Unknown subscriptionId: ",
+    subscriptionId
   ] }) });
 };
 
@@ -46443,7 +46532,7 @@ var WfoInUseByRelations = ({
   inUseByRelations
 }) => {
   const t = useTranslations18("subscriptions.detail");
-  const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(getStyles4);
+  const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(getStyles5);
   const subscriptionIds = inUseByRelations.map((relation) => relation.subscription_id).join("|");
   const { data, isLoading, isError: isError2 } = useGetInUseByRelationDetailsQuery({
     subscriptionIds
@@ -46498,10 +46587,10 @@ var WfoInUseByRelations = ({
 };
 
 // src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts
-import { css as css9 } from "@emotion/react";
-var getStyles5 = (wfoTheme) => {
+import { css as css10 } from "@emotion/react";
+var getStyles6 = (wfoTheme) => {
   const { theme, toSecondaryColor } = wfoTheme;
-  const iconStyle = css9({
+  const iconStyle = css10({
     width: 45,
     height: 45,
     backgroundColor: toSecondaryColor(theme.colors.primary),
@@ -46509,32 +46598,31 @@ var getStyles5 = (wfoTheme) => {
     paddingLeft: 15,
     borderRadius: 7
   });
-  const panelStyle = css9({
+  const panelStyle = css10({
     backgroundColor: theme.colors.lightestShade
   });
-  const panelStyleOutsideCurrentSubscription = css9({
+  const panelStyleOutsideCurrentSubscription = css10({
     backgroundColor: toSecondaryColor(theme.colors.lightestShade),
     border: `dashed 1px ${theme.colors.lightShade}`
   });
-  const rowStyle = css9({
+  const rowStyle = css10({
+    borderBottom: `solid 1px ${theme.colors.lightShade}`,
     "&:first-child": {
       borderTop: `solid 1px ${theme.colors.lightShade}`
     }
   });
-  const leftColumnStyle = css9({
+  const leftColumnStyle = css10({
     verticalAlign: "top",
     width: 250,
     paddingLeft: 0,
     paddingTop: 10,
-    paddingBottom: 10,
-    borderBottom: `solid 1px ${theme.colors.lightShade}`
+    paddingBottom: 10
   });
-  const rightColumnStyle = css9({
+  const rightColumnStyle = css10({
     verticalAlign: "top",
     paddingLeft: 0,
     paddingTop: 10,
-    paddingBottom: 10,
-    borderBottom: `solid 1px ${theme.colors.lightShade}`
+    paddingBottom: 10
   });
   return {
     iconStyle,
@@ -46565,8 +46653,9 @@ var WfoSubscriptionProductBlock = ({
     leftColumnStyle,
     rightColumnStyle,
     rowStyle
-  } = useWithOrchestratorTheme(getStyles5);
-  const [hideDetails, setHideDetails] = useState12(true);
+  } = useWithOrchestratorTheme(getStyles6);
+  const [showDetails, setShowDetails] = useState12(false);
+  const showProductBlockValues = !isOutsideCurrentSubscription || showDetails;
   return /* @__PURE__ */ jsxs59(Fragment15, { children: [
     /* @__PURE__ */ jsx85(EuiSpacer11, { size: "m" }),
     /* @__PURE__ */ jsxs59(
@@ -46596,31 +46685,35 @@ var WfoSubscriptionProductBlock = ({
             /* @__PURE__ */ jsx85(EuiFlexItem6, { grow: false, children: /* @__PURE__ */ jsx85(
               EuiButtonEmpty3,
               {
-                "aria-label": hideDetails ? t("showDetails") : t("hideDetails"),
+                "aria-label": showDetails ? t("hideDetails") : t("showDetails"),
                 size: "m",
-                onClick: () => setHideDetails(!hideDetails),
-                children: hideDetails ? t("showDetails") : t("hideDetails")
+                onClick: () => setShowDetails(!showDetails),
+                children: showDetails ? t("hideDetails") : t("showDetails")
               }
             ) })
           ] }),
           /* @__PURE__ */ jsx85(EuiSpacer11, { size: "m" }),
           /* @__PURE__ */ jsx85("table", { width: "100%", children: /* @__PURE__ */ jsxs59("tbody", { children: [
-            !hideDetails && /* @__PURE__ */ jsxs59(Fragment15, { children: [
+            isOutsideCurrentSubscription && /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
+              /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("ownerSubscriptionId") }) }),
+              /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: /* @__PURE__ */ jsx85(
+                "a",
+                {
+                  href: `${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`,
+                  target: "_blank",
+                  children: ownerSubscriptionId
+                }
+              ) })
+            ] }, -1),
+            showDetails && /* @__PURE__ */ jsxs59(Fragment15, { children: [
               /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("subscriptionInstanceId") }) }),
                 /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: subscriptionInstanceId })
-              ] }, -3),
-              /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
-                /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("ownerSubscriptionId") }) }),
-                /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: !isOutsideCurrentSubscription ? /* @__PURE__ */ jsx85(Fragment15, { children: /* @__PURE__ */ jsx85(EuiBadge2, { children: t("self") }) }) : /* @__PURE__ */ jsx85(
-                  "a",
-                  {
-                    href: `${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`,
-                    target: "_blank",
-                    children: ownerSubscriptionId
-                  }
-                ) })
               ] }, -2),
+              !isOutsideCurrentSubscription && /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
+                /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("ownerSubscriptionId") }) }),
+                /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: /* @__PURE__ */ jsx85(Fragment15, { children: /* @__PURE__ */ jsx85(EuiBadge2, { children: t("self") }) }) })
+              ] }, -3),
               /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("inUseByRelations") }) }),
                 /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: inUseByRelations.length === 0 && "None" || /* @__PURE__ */ jsx85(
@@ -46629,9 +46722,9 @@ var WfoSubscriptionProductBlock = ({
                     inUseByRelations
                   }
                 ) })
-              ] }, -1)
+              ] }, -4)
             ] }),
-            productBlockInstanceValues.filter(
+            showProductBlockValues && productBlockInstanceValues.filter(
               (productBlockInstanceValue) => !HIDDEN_KEYS.includes(
                 productBlockInstanceValue.field
               )
@@ -46654,7 +46747,7 @@ import { EuiBadge as EuiBadge3 } from "@elastic/eui";
 import { Fragment as Fragment16, jsx as jsx86, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var WfoProductBlockKeyValueRow = ({ fieldValue }) => {
   var _a;
-  const { leftColumnStyle, rightColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles5);
+  const { leftColumnStyle, rightColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles6);
   const { getOverriddenValue } = useSubscriptionDetailValueOverride();
   const { field, value } = fieldValue;
   const WfoProductBlockValue = ({
@@ -46705,7 +46798,7 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoTree/styles.ts
-var getStyles6 = (wfoTheme) => {
+var getStyles7 = (wfoTheme) => {
   const { theme, toSecondaryColor } = wfoTheme;
   const expandIconContainerStyle = {
     cursor: "pointer"
@@ -46738,7 +46831,7 @@ var WfoTreeNode = ({
     expandIconContainerStyle,
     treeContainerStyle,
     treeItemOtherSubscriptionStyle
-  } = useWithOrchestratorTheme(getStyles6);
+  } = useWithOrchestratorTheme(getStyles7);
   const t = useTranslations20("common");
   const {
     expandedIds,
@@ -47344,11 +47437,11 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoTable/WfoTableSettingsModal/styles.ts
-import { css as css10 } from "@emotion/react";
+import { css as css11 } from "@emotion/react";
 var getWfoTableSettingsModalStyles = (wfoTheme) => {
   const { formFieldBaseStyle } = getFormFieldsBaseStyle(wfoTheme);
   const { theme } = wfoTheme;
-  const formRowStyle = css10({
+  const formRowStyle = css11({
     justifyContent: "space-between",
     ".euiFormLabel": {
       color: theme.colors.text
@@ -47527,10 +47620,10 @@ import { useTranslations as useTranslations23 } from "next-intl";
 import { EuiBasicTable } from "@elastic/eui";
 
 // src/components/WfoTable/WfoBasicTable/styles.ts
-import { css as css11 } from "@emotion/react";
+import { css as css12 } from "@emotion/react";
 var getWfoBasicTableStyles = ({ theme }) => {
   const radius = theme.border.radius.medium;
-  const basicTableStyle = css11({
+  const basicTableStyle = css12({
     table: {
       backgroundColor: theme.colors.emptyShade
     },
@@ -47557,7 +47650,7 @@ var getWfoBasicTableStyles = ({ theme }) => {
       }
     }
   });
-  const getStatusColumnStyle = (columnNumber) => css11(basicTableStyle, {
+  const getStatusColumnStyle = (columnNumber) => css12(basicTableStyle, {
     [`tbody tr td:nth-child(${columnNumber}) .euiTableCellContent`]: {
       padding: 0,
       ".euiTableCellContent__text": {
@@ -47568,7 +47661,7 @@ var getWfoBasicTableStyles = ({ theme }) => {
       }
     }
   });
-  const dropDownTableStyle = css11({
+  const dropDownTableStyle = css12({
     thead: {
       backgroundColor: theme.colors.lightestShade,
       "tr>:first-child": {
@@ -47582,7 +47675,7 @@ var getWfoBasicTableStyles = ({ theme }) => {
       backgroundColor: theme.colors.lightestShade
     }
   });
-  const expandableTableStyle = css11([
+  const expandableTableStyle = css12([
     basicTableStyle,
     {
       "tr.euiTableRow-isExpandedRow": {
@@ -47590,22 +47683,22 @@ var getWfoBasicTableStyles = ({ theme }) => {
       }
     }
   ]);
-  const headerCellContentStyle = css11({
+  const headerCellContentStyle = css12({
     fontWeight: theme.font.weight.semiBold
   });
-  const headerCellPopoverHeaderStyle = css11({
+  const headerCellPopoverHeaderStyle = css12({
     margin: theme.size.m,
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
   });
-  const headerCellPopoverHeaderTitleStyle = css11({
+  const headerCellPopoverHeaderTitleStyle = css12({
     fontWeight: theme.font.weight.medium
   });
-  const headerCellPopoverContentStyle = css11({
+  const headerCellPopoverContentStyle = css12({
     margin: theme.size.m
   });
-  const getHeaderCellButtonStyle = (isSortable) => css11({
+  const getHeaderCellButtonStyle = (isSortable) => css12({
     display: "flex",
     alignItems: "center",
     cursor: isSortable ? "pointer" : "not-allowed"
@@ -47763,13 +47856,13 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoTable/WfoSortButtons/styles.ts
-import { css as css12 } from "@emotion/react";
-var getStyles7 = () => {
-  const sortButtonsContainerStyle = css12({
+import { css as css13 } from "@emotion/react";
+var getStyles8 = () => {
+  const sortButtonsContainerStyle = css13({
     display: "flex",
     alignItems: "center"
   });
-  const getSortButtonStyle = (isActive) => css12({
+  const getSortButtonStyle = (isActive) => css13({
     display: "flex",
     alignItems: "center",
     cursor: isActive ? "pointer" : "not-allowed"
@@ -47788,7 +47881,7 @@ var WfoSortButton = ({
   onClick
 }) => {
   const { theme } = useOrchestratorTheme();
-  const { getSortButtonStyle } = getStyles7();
+  const { getSortButtonStyle } = getStyles8();
   return /* @__PURE__ */ jsx97(
     "button",
     {
@@ -47810,7 +47903,7 @@ var WfoSortButtons = ({
   sortOrder,
   onChangeSortOrder
 }) => {
-  const { sortButtonsContainerStyle } = getStyles7();
+  const { sortButtonsContainerStyle } = getStyles8();
   return /* @__PURE__ */ jsxs65("div", { css: sortButtonsContainerStyle, children: [
     /* @__PURE__ */ jsx98(
       WfoSortButton,
@@ -48172,9 +48265,9 @@ var WfoTableWithFilter = ({
 };
 
 // src/components/WfoTable/WfoFirstPartUUID/styles.ts
-import { css as css13 } from "@emotion/react";
-var getStyles8 = ({ theme }) => {
-  const uuidFieldStyle = css13({
+import { css as css14 } from "@emotion/react";
+var getStyles9 = ({ theme }) => {
+  const uuidFieldStyle = css14({
     fontWeight: theme.font.weight.medium
   });
   return {
@@ -48185,7 +48278,7 @@ var getStyles8 = ({ theme }) => {
 // src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx
 import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
 var WfoFirstPartUUID = ({ UUID }) => {
-  const { uuidFieldStyle } = useWithOrchestratorTheme(getStyles8);
+  const { uuidFieldStyle } = useWithOrchestratorTheme(getStyles9);
   return /* @__PURE__ */ jsx102("span", { css: uuidFieldStyle, title: UUID, children: getFirstUuidPart(UUID) });
 };
 
@@ -48206,8 +48299,8 @@ import { useEuiScrollBar } from "@elastic/eui";
 import { EuiToolTip as EuiToolTip4 } from "@elastic/eui";
 
 // src/components/WfoTimeline/styles.ts
-import { css as css14 } from "@emotion/react";
-var getStyles9 = ({ theme }) => {
+import { css as css15 } from "@emotion/react";
+var getStyles10 = ({ theme }) => {
   const emptyStepOuterDiameter = theme.base;
   const emptyStepInnerDiameter = theme.base / 2;
   const stepWithValueOuterDiameter = theme.base * 1.5;
@@ -48237,7 +48330,7 @@ var getStyles9 = ({ theme }) => {
         return theme.colors.ghost;
     }
   };
-  const timelinePanelStyle = css14({
+  const timelinePanelStyle = css15({
     backgroundColor: theme.colors.body,
     borderRadius: theme.border.radius.medium,
     overflow: "auto",
@@ -48254,7 +48347,7 @@ var getStyles9 = ({ theme }) => {
       flexGrow: 1
     }
   });
-  const getHorizontalLineStyle = (color) => css14({
+  const getHorizontalLineStyle = (color) => css15({
     content: '""',
     height: theme.border.width.thick,
     backgroundColor: color,
@@ -48282,7 +48375,7 @@ var getStyles9 = ({ theme }) => {
           return theme.colors.lightShade;
       }
     };
-    return css14([
+    return css15([
       !isFirstStep && {
         "::before": __spreadValues({}, getHorizontalLineStyle(
           getBeforeLineColor(timelinePosition)
@@ -48295,7 +48388,7 @@ var getStyles9 = ({ theme }) => {
       }
     ]);
   };
-  const getStepOuterCircleStyle = (hasContent) => css14({
+  const getStepOuterCircleStyle = (hasContent) => css15({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -48306,7 +48399,7 @@ var getStyles9 = ({ theme }) => {
   });
   const getStepInnerCircleStyle = (stepStatus, hasContent) => {
     const diameter = hasContent ? stepWithValueInnerDiameter : emptyStepInnerDiameter;
-    return css14({
+    return css15({
       borderRadius: "50%",
       backgroundColor: getColorForStepStatus(stepStatus),
       height: diameter,
@@ -48317,15 +48410,15 @@ var getStyles9 = ({ theme }) => {
       color: getTextColorForStepStatusIcon(stepStatus)
     });
   };
-  const stepStyle = css14({
+  const stepStyle = css15({
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
   });
-  const clickableStyle = css14({
+  const clickableStyle = css15({
     cursor: "pointer"
   });
-  const notClickableStyle = css14({
+  const notClickableStyle = css15({
     cursor: "auto"
   });
   return {
@@ -48357,7 +48450,7 @@ var WfoTimelineStep = ({
     getStepLineStyle,
     getStepOuterCircleStyle,
     getStepInnerCircleStyle
-  } = useWithOrchestratorTheme(getStyles9);
+  } = useWithOrchestratorTheme(getStyles10);
   return /* @__PURE__ */ jsx104(
     "button",
     {
@@ -48393,7 +48486,7 @@ var WfoTimeline = ({
   indexOfCurrentStep = 0,
   onStepClick
 }) => {
-  const { timelinePanelStyle } = useWithOrchestratorTheme(getStyles9);
+  const { timelinePanelStyle } = useWithOrchestratorTheme(getStyles10);
   const mapTimelineItemToStep = (timelineItem, index, allTimelineItems) => {
     const { id, stepDetail, processStepStatus, value } = timelineItem;
     return /* @__PURE__ */ jsx105(
@@ -48489,9 +48582,9 @@ import { connectField, filterDOMProps } from "uniforms";
 import { EuiCheckbox, EuiFlexItem as EuiFlexItem12, EuiText as EuiText10 } from "@elastic/eui";
 
 // src/components/WfoForms/formFields/AcceptFieldStyling.ts
-import { css as css15 } from "@emotion/react";
-var getStyles10 = ({ theme }) => {
-  const acceptFieldStyle = css15({
+import { css as css16 } from "@emotion/react";
+var getStyles11 = ({ theme }) => {
+  const acceptFieldStyle = css16({
     ".acceptField": {
       "label.warning": {
         color: theme.colors.danger
@@ -48539,7 +48632,7 @@ function Accept(_a) {
     "data"
   ]);
   const t = useTranslations26();
-  const { acceptFieldStyle } = useWithOrchestratorTheme(getStyles10);
+  const { acceptFieldStyle } = useWithOrchestratorTheme(getStyles11);
   const legacy = !data;
   const i18nBaseKey = data ? `pydanticForms.backendTranslations.${name}_accept` : "pydanticForms.backendTranslations";
   data = data != null ? data : [
@@ -48668,9 +48761,9 @@ import { connectField as connectField2, filterDOMProps as filterDOMProps2 } from
 import { EuiCheckbox as EuiCheckbox2, EuiFlexItem as EuiFlexItem13, EuiFormRow as EuiFormRow3, EuiText as EuiText11 } from "@elastic/eui";
 
 // src/components/WfoForms/formFields/commonStyles.ts
-import { css as css16 } from "@emotion/react";
+import { css as css17 } from "@emotion/react";
 var getCommonFormFieldStyles = ({ theme }) => {
-  const formRowStyle = css16({
+  const formRowStyle = css17({
     ".euiText": {
       color: theme.colors.text
     },
@@ -48687,11 +48780,11 @@ var getCommonFormFieldStyles = ({ theme }) => {
 };
 
 // src/components/WfoForms/formFields/BoolFieldStyling.ts
-import { css as css17 } from "@emotion/react";
+import { css as css18 } from "@emotion/react";
 var PRIMARY_COLOR = "#0077cc";
 var LIGHT_GREY_COLOR = "#eff2f3";
 var MEDIUM_GREY_COLOR = "#a6b6be";
-var boolFieldStyling = css17`
+var boolFieldStyling = css18`
 
   .bool-field {
     .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label {
@@ -49027,8 +49120,8 @@ function ListItem({
 var ListItemField = connectField8(ListItem, { initialValue: false });
 
 // src/components/WfoForms/formFields/listFieldStyling.ts
-import { css as css18 } from "@emotion/react";
-var listFieldStyling = css18`
+import { css as css19 } from "@emotion/react";
+var listFieldStyling = css19`
     .list-field {
         ul {
             display: flex;
@@ -50046,9 +50139,9 @@ var subscriptionHasTaggedProduct = (subscriptionDetail) => {
 };
 
 // src/components/WfoForms/formFields/deprecated/ContactPersonAutocompleteStyles.ts
-import { css as css19 } from "@emotion/react";
-var getStyles11 = ({ theme }) => {
-  const contactPersonAutocompleteStyling = css19`
+import { css as css20 } from "@emotion/react";
+var getStyles12 = ({ theme }) => {
+  const contactPersonAutocompleteStyling = css20`
         .autocomplete-container {
             position: relative;
         }
@@ -50094,7 +50187,7 @@ var ContactPersonAutocomplete = ({
   itemSelected,
   suggestions
 }) => {
-  const { contactPersonAutocompleteStyling } = useWithOrchestratorTheme(getStyles11);
+  const { contactPersonAutocompleteStyling } = useWithOrchestratorTheme(getStyles12);
   const selectedRowRef = useRef5(null);
   useEffect9(() => {
     if (!isEmpty(suggestions) && selectedRowRef.current) {
@@ -50398,8 +50491,8 @@ import { connectField as connectField19, filterDOMProps as filterDOMProps19 } fr
 import { EuiFlexItem as EuiFlexItem16, EuiFormRow as EuiFormRow12, EuiText as EuiText22 } from "@elastic/eui";
 
 // src/components/WfoForms/formFields/deprecated/ImsPortIdFieldStyling.ts
-import { css as css20 } from "@emotion/react";
-var imsPortIdFieldStyling = css20`
+import { css as css21 } from "@emotion/react";
+var imsPortIdFieldStyling = css21`
     section.node-port {
         display: flex;
         flex-direction: row;
@@ -50518,12 +50611,18 @@ function ImsPortId(_a) {
     EuiFormRow12,
     {
       label,
-      labelAppend: /* @__PURE__ */ jsx130(EuiText22, { size: "m", children: description }),
+      labelAppend: /* @__PURE__ */ jsxs77(EuiText22, { size: "m", children: [
+        description,
+        " "
+      ] }),
       error: showInlineError ? errorMessage : false,
       isInvalid: error,
       id,
       fullWidth: true,
-      children: /* @__PURE__ */ jsxs77("section", { className: "node-port", children: [
+      children: !nodeValue && nodeSubscriptionId && /* @__PURE__ */ jsxs77(EuiText22, { children: [
+        "This Node subscription is missing. Please check the nodes status: ",
+        nodeSubscriptionId
+      ] }) || /* @__PURE__ */ jsxs77("section", { className: "node-port", children: [
         /* @__PURE__ */ jsx130("div", { className: "node-select", children: /* @__PURE__ */ jsx130(
           EuiFormRow12,
           {
@@ -51155,7 +51254,7 @@ function IpNetwork(_a) {
 var IpNetworkField = connectField20(IpNetwork, { kind: "leaf" });
 
 // src/components/WfoForms/formFields/deprecated/IpPrefixTableFieldStyling.ts
-import { css as css21 } from "@emotion/react";
+import { css as css22 } from "@emotion/react";
 var DARK_GREY_COLOR = "#333333";
 var LIGHTER_GREY_COLOR = "#999999";
 var LIGHT_GOLD_COLOR = "#fca456";
@@ -51176,7 +51275,7 @@ function shadeColor(color, percent) {
   const BB = B.toString(16).length === 1 ? "0" + B.toString(16) : B.toString(16);
   return "#" + RR + GG + BB;
 }
-var ipPrefixTableFieldStyling = css21`
+var ipPrefixTableFieldStyling = css22`
     table.ip-blocks {
         word-break: break-all;
         margin-bottom: 20px;
@@ -51264,8 +51363,8 @@ var ipPrefixTableFieldStyling = css21`
 `;
 
 // src/components/WfoForms/formFields/deprecated/SplitPrefixStyling.ts
-import { css as css22 } from "@emotion/react";
-var splitPrefixStyling = css22`
+import { css as css23 } from "@emotion/react";
+var splitPrefixStyling = css23`
     section.split-prefix {
         display: flex;
         flex-direction: column;
@@ -51476,7 +51575,7 @@ function Vlan(_a) {
   useEffect15(() => {
     if (subscriptionId && isFetched && !portIsTagged && value !== "0") {
       onChange("0");
-    } else if (!subscriptionId && value !== "" || subscriptionId && portIsTagged && value === "0") {
+    } else if (!disabled && (!subscriptionId && value !== "" || subscriptionId && portIsTagged && value === "0")) {
       onChange("");
     }
   }, [onChange, subscriptionId, value, isFetched, portIsTagged]);
@@ -51741,8 +51840,8 @@ var useGetSubscriptionDropdownOptions = (tags = [], statuses = ["active"]) => {
 };
 
 // src/components/WfoForms/formFields/SubscriptionFieldStyling.ts
-import { css as css23 } from "@emotion/react";
-var subscriptionFieldStyling = css23`
+import { css as css24 } from "@emotion/react";
+var subscriptionFieldStyling = css24`
     .subscription-field {
         > div {
             display: flex;
@@ -52010,10 +52109,10 @@ import { EuiFlexItem as EuiFlexItem22, EuiFormRow as EuiFormRow19, EuiText as Eu
 
 // src/components/WfoForms/formFields/SummaryFieldStyling.ts
 import { tint as tint3 } from "@elastic/eui";
-import { css as css24 } from "@emotion/react";
-var getStyles12 = ({ theme }) => {
+import { css as css25 } from "@emotion/react";
+var getStyles13 = ({ theme }) => {
   const toShadeColor = (color) => tint3(color, 0.9);
-  const summaryFieldStyle = css24({
+  const summaryFieldStyle = css25({
     "div.emailMessage": {
       td: {
         color: theme.colors.text
@@ -52067,7 +52166,7 @@ function Summary(_a) {
     "description",
     "data"
   ]);
-  const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles12);
+  const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles13);
   if (!data) {
     return null;
   }
@@ -52108,7 +52207,7 @@ var SummaryField = connectField26(Summary, { kind: "leaf" });
 import { useTranslations as useTranslations38 } from "next-intl";
 import { connectField as connectField27 } from "uniforms";
 import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
-function Customer(_a) {
+function Customer2(_a) {
   var props = __objRest(_a, []);
   const t = useTranslations38("pydanticForms");
   const { data: customers, isLoading } = useGetCustomersQuery();
@@ -52131,7 +52230,7 @@ function Customer(_a) {
     })
   );
 }
-var CustomerField = connectField27(Customer, { kind: "leaf" });
+var CustomerField = connectField27(Customer2, { kind: "leaf" });
 
 // src/components/WfoForms/formFields/ConnectedSelectField.tsx
 import { connectField as connectField28 } from "uniforms";
@@ -52215,9 +52314,9 @@ function autoFieldFunction(props, uniforms) {
 }
 
 // src/components/WfoForms/UserInputFormStyling.ts
-import { css as css25 } from "@emotion/react";
+import { css as css26 } from "@emotion/react";
 var PRIMARY_COLOR2 = "#0077cc";
-var userInputFormStyling = css25`
+var userInputFormStyling = css26`
     .user-input-form {
         h3 {
             padding: 20px 0;
@@ -52767,8 +52866,12 @@ var UserInputFormWizard = ({
     newUserInputs.push(currentFormData);
     const promise = stepSubmit(newUserInputs);
     const callback = (data) => {
+      var _a;
       window.scrollTo(0, 0);
-      setForms([...forms, { form: data.form, hasNext: data.hasNext }]);
+      setForms([
+        ...forms,
+        { form: data.form, hasNext: (_a = data.meta) == null ? void 0 : _a.hasNext }
+      ]);
       setUserInputs(newUserInputs);
     };
     return handlePromiseErrorWithCallback(
@@ -52878,10 +52981,10 @@ function CreateForm(props) {
         submit([]),
         510,
         (json) => {
-          var _a;
+          var _a, _b;
           setForm({
             stepUserInput: json.form,
-            hasNext: (_a = json.hasNext) != null ? _a : false
+            hasNext: (_b = (_a = json.meta) == null ? void 0 : _a.hasNext) != null ? _b : false
           });
         }
       );
@@ -54174,32 +54277,32 @@ import { EuiFlexGroup as EuiFlexGroup17, EuiFlexItem as EuiFlexItem25, EuiPanel
 import { EuiFlexItem as EuiFlexItem23 } from "@elastic/eui";
 
 // src/components/WfoWorkflowSteps/styles.ts
-import { css as css26 } from "@emotion/react";
-var getStyles13 = ({ theme, toSecondaryColor }) => {
-  const stepSpacerStyle = css26({
+import { css as css27 } from "@emotion/react";
+var getStyles14 = ({ theme, toSecondaryColor }) => {
+  const stepSpacerStyle = css27({
     borderLeft: `1px solid ${theme.colors.darkShade}`,
     height: "24px",
     marginLeft: "36px"
   });
-  const stepRowStyle = css26({
+  const stepRowStyle = css27({
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "flex-end"
   });
-  const stepListHeaderStyle = css26({
+  const stepListHeaderStyle = css27({
     marginBottom: "24px",
     marginTop: "60px",
     alignItems: "flex-end"
   });
-  const stepListContentStyle = css26({
+  const stepListContentStyle = css27({
     flexDirection: "row",
     alignItems: "center"
   });
-  const stepListContentBoldTextStyle = css26({
+  const stepListContentBoldTextStyle = css27({
     fontSize: theme.size.base,
     fontWeight: theme.font.weight.bold
   });
-  const stepListContentAnchorStyle = css26({
+  const stepListContentAnchorStyle = css27({
     marginTop: 2,
     marginLeft: 0,
     fontSize: theme.size.m,
@@ -54207,7 +54310,7 @@ var getStyles13 = ({ theme, toSecondaryColor }) => {
     color: theme.colors.link,
     cursor: "pointer"
   });
-  const stepListOptionsContainerStyle = css26({
+  const stepListOptionsContainerStyle = css27({
     flexGrow: 0
   });
   const stepStateIcon = {
@@ -54223,32 +54326,32 @@ var getStyles13 = ({ theme, toSecondaryColor }) => {
     color: theme.colors.disabled,
     fontWeight: theme.font.weight.semiBold
   };
-  const stepStateSuccessIconStyle = css26(__spreadProps(__spreadValues({}, stepStateIcon), {
+  const stepStateSuccessIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
     backgroundColor: toSecondaryColor(theme.colors.primary)
   }));
-  const stepStateSuspendIconStyle = css26(__spreadProps(__spreadValues({}, stepStateIcon), {
+  const stepStateSuspendIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
     backgroundColor: toSecondaryColor(theme.colors.warning)
   }));
-  const stepStatePendingIconStyle = css26(__spreadProps(__spreadValues({}, stepStateIcon), {
+  const stepStatePendingIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
     backgroundColor: toSecondaryColor(theme.colors.darkShade)
   }));
-  const stepStateFailedIconStyle = css26(__spreadProps(__spreadValues({}, stepStateIcon), {
+  const stepStateFailedIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
     backgroundColor: toSecondaryColor(theme.colors.danger)
   }));
-  const stepHeaderRightStyle = css26({
+  const stepHeaderRightStyle = css27({
     alignItems: "center"
   });
-  const stepEmailContainerStyle = css26({
+  const stepEmailContainerStyle = css27({
     paddingLeft: 24,
     width: 600,
     marginTop: 0
   });
-  const getStepHeaderStyle = (isClickable) => css26({
+  const getStepHeaderStyle = (isClickable) => css27({
     gap: 0,
     alignItems: "center",
     cursor: isClickable ? "pointer" : "default"
   });
-  const getStepToggleExpandStyle = (isVisible) => css26({
+  const getStepToggleExpandStyle = (isVisible) => css27({
     marginRight: theme.base / 2,
     visibility: isVisible ? "visible" : "hidden"
   });
@@ -54305,7 +54408,7 @@ var WfoStepStatusIcon = ({
     stepStateSuspendIconStyle,
     stepStatePendingIconStyle,
     stepStateFailedIconStyle
-  } = useWithOrchestratorTheme(getStyles13);
+  } = useWithOrchestratorTheme(getStyles14);
   const [
     stepStateStyle,
     mainIconColor,
@@ -54448,7 +54551,7 @@ var WfoStep = React45.forwardRef(
       stepDurationStyle,
       stepRowStyle,
       getStepToggleExpandStyle
-    } = useWithOrchestratorTheme(getStyles13);
+    } = useWithOrchestratorTheme(getStyles14);
     const t = useTranslations47("processes.steps");
     const hasHtmlMail = (_a = step.stateDelta) == null ? void 0 : _a.hasOwnProperty("confirmation_mail");
     const stepContent = step.stateDelta ? getStepContent(step.stateDelta, showHiddenKeys) : {};
@@ -54579,7 +54682,7 @@ var WfoStepList = React46.forwardRef(
     isTask,
     processId
   }, reference) => {
-    const { stepSpacerStyle } = useWithOrchestratorTheme(getStyles13);
+    const { stepSpacerStyle } = useWithOrchestratorTheme(getStyles14);
     const stepReferences = useRef6(/* @__PURE__ */ new Map());
     let stepStartTime = startedAt;
     useImperativeHandle(reference, () => ({
@@ -54659,7 +54762,7 @@ import {
 
 // src/components/WfoDiff/styles.ts
 import { shade as shade2, tint as tint4 } from "@elastic/eui";
-import { css as css27 } from "@emotion/react";
+import { css as css28 } from "@emotion/react";
 var getWfoDiffStyles = ({
   theme,
   toSecondaryColor,
@@ -54671,7 +54774,7 @@ var getWfoDiffStyles = ({
   const insertCodeColor = isDarkThemeActive ? shade2(insertGutterColor, SHADE_FACTOR) : tint4(insertGutterColor, TINT_FACTOR);
   const deleteColor = toSecondaryColor(theme.colors.danger);
   const deleteSecondaryColor = isDarkThemeActive ? shade2(deleteColor, SHADE_FACTOR) : tint4(deleteColor, TINT_FACTOR);
-  const diffStyle = css27({
+  const diffStyle = css28({
     ".diff-code-insert": {
       backgroundColor: insertCodeColor
     },
@@ -54779,9 +54882,9 @@ import { useTranslations as useTranslations49 } from "next-intl";
 import { EuiCodeBlock, EuiText as EuiText32 } from "@elastic/eui";
 
 // src/components/WfoWorkflowSteps/WfoTraceback/styles.ts
-import { css as css28 } from "@emotion/react";
-var getStyles14 = ({ theme }) => {
-  const codeBlockStyle = css28({
+import { css as css29 } from "@emotion/react";
+var getStyles15 = ({ theme }) => {
+  const codeBlockStyle = css29({
     marginTop: theme.size.m,
     marginBottom: theme.size.l,
     borderRadius: theme.border.radius.medium
@@ -54794,7 +54897,7 @@ var getStyles14 = ({ theme }) => {
 // src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
 import { Fragment as Fragment39, jsx as jsx163, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 var WfoTraceback = ({ children }) => {
-  const { codeBlockStyle } = useWithOrchestratorTheme(getStyles14);
+  const { codeBlockStyle } = useWithOrchestratorTheme(getStyles15);
   const t = useTranslations49("processes.steps");
   return /* @__PURE__ */ jsxs92(Fragment39, { children: [
     /* @__PURE__ */ jsx163(EuiText32, { children: /* @__PURE__ */ jsx163("h3", { children: t("traceback") }) }),
@@ -54947,9 +55050,9 @@ import {
 import { EuiText as EuiText33 } from "@elastic/eui";
 
 // src/components/WfoTextAnchor/styles.ts
-import { css as css29 } from "@emotion/react";
-var getStyles15 = ({ theme }) => {
-  const textAnchorStyle = css29({
+import { css as css30 } from "@emotion/react";
+var getStyles16 = ({ theme }) => {
+  const textAnchorStyle = css30({
     marginTop: theme.size.xxs,
     marginLeft: 0,
     fontSize: theme.size.m,
@@ -54965,7 +55068,7 @@ var getStyles15 = ({ theme }) => {
 // src/components/WfoTextAnchor/WfoTextAnchor.tsx
 import { jsx as jsx165 } from "@emotion/react/jsx-runtime";
 var WfoTextAnchor = ({ text, onClick }) => {
-  const { textAnchorStyle } = useWithOrchestratorTheme(getStyles15);
+  const { textAnchorStyle } = useWithOrchestratorTheme(getStyles16);
   return /* @__PURE__ */ jsx165(EuiText33, { onClick, css: textAnchorStyle, children: text });
 };
 
@@ -54992,7 +55095,7 @@ var WfoStepListHeader = ({
     stepListContentStyle,
     stepListContentBoldTextStyle,
     stepListOptionsContainerStyle
-  } = useWithOrchestratorTheme(getStyles13);
+  } = useWithOrchestratorTheme(getStyles14);
   const [isViewOptionOpen, setIsViewOptionOpen] = useState38(false);
   const onViewOptionClick = () => setIsViewOptionOpen((isViewOptionOpen2) => !isViewOptionOpen2);
   const closeViewOption = () => setIsViewOptionOpen(false);
@@ -55484,7 +55587,7 @@ var WfoProcessDetailPage = ({
   var _a, _b;
   const stepListRef = useRef7(null);
   const [fetchInterval, setFetchInterval] = useState39();
-  const [process2, setProcess] = useState39();
+  const [process3, setProcess] = useState39();
   const { data, isLoading, isError: isError2 } = useGetProcessDetailQuery(
     { processId },
     { pollingInterval: fetchInterval }
@@ -55495,8 +55598,8 @@ var WfoProcessDetailPage = ({
     }
   }
   useEffect25(() => {
-    const process3 = data == null ? void 0 : data.processes[0];
-    const lastStatus = process3 == null ? void 0 : process3.lastStatus.toLocaleLowerCase();
+    const process4 = data == null ? void 0 : data.processes[0];
+    const lastStatus = process4 == null ? void 0 : process4.lastStatus.toLocaleLowerCase();
     const isInProgress = !(lastStatus && ProcessDoneStatuses.includes(lastStatus));
     setFetchInterval(
       isInProgress ? processDetailRefetchInterval : void 0
@@ -55504,19 +55607,19 @@ var WfoProcessDetailPage = ({
   }, [data, processDetailRefetchInterval]);
   useEffect25(() => {
     const fetchedProcessDetails = data == null ? void 0 : data.processes[0];
-    if (!process2) {
+    if (!process3) {
       setProcess(fetchedProcessDetails);
       return;
     }
-    const shouldUpdateProcess = process2.lastStatus != (fetchedProcessDetails == null ? void 0 : fetchedProcessDetails.lastStatus) || process2.lastStep !== (fetchedProcessDetails == null ? void 0 : fetchedProcessDetails.lastStep);
+    const shouldUpdateProcess = process3.lastStatus != (fetchedProcessDetails == null ? void 0 : fetchedProcessDetails.lastStatus) || process3.lastStep !== (fetchedProcessDetails == null ? void 0 : fetchedProcessDetails.lastStep);
     if (shouldUpdateProcess) {
       setProcess(fetchedProcessDetails);
     }
-  }, [data, process2]);
-  const steps = (_a = process2 == null ? void 0 : process2.steps) != null ? _a : [];
-  const productNames = getProductNamesFromProcess(process2);
-  const pageTitle = (process2 == null ? void 0 : process2.workflowName) || "";
-  const isTask = (_b = process2 == null ? void 0 : process2.isTask) != null ? _b : false;
+  }, [data, process3]);
+  const steps = (_a = process3 == null ? void 0 : process3.steps) != null ? _a : [];
+  const productNames = getProductNamesFromProcess(process3);
+  const pageTitle = (process3 == null ? void 0 : process3.workflowName) || "";
+  const isTask = (_b = process3 == null ? void 0 : process3.isTask) != null ? _b : false;
   const groupedSteps = convertStepsToGroupedSteps(steps);
   const timelineItems = mapGroupedStepsToTimelineItems(groupedSteps);
   return /* @__PURE__ */ jsx168(
@@ -55525,7 +55628,7 @@ var WfoProcessDetailPage = ({
       pageTitle,
       productNames,
       buttonsAreDisabled: isLoading || isError2,
-      processDetail: process2,
+      processDetail: process3,
       timelineItems,
       onTimelineItemClick: (id) => {
         var _a2;
@@ -55533,17 +55636,17 @@ var WfoProcessDetailPage = ({
       },
       isLoading,
       hasError: isError2,
-      children: isError2 && /* @__PURE__ */ jsx168(WfoError, {}) || isLoading && /* @__PURE__ */ jsx168(WfoLoading, {}) || process2 !== void 0 && /* @__PURE__ */ jsx168(
+      children: isError2 && /* @__PURE__ */ jsx168(WfoError, {}) || isLoading && /* @__PURE__ */ jsx168(WfoLoading, {}) || process3 !== void 0 && /* @__PURE__ */ jsx168(
         WfoWorkflowStepList,
         {
           ref: stepListRef,
-          processId: process2.processId,
+          processId: process3.processId,
           steps: groupedSteps.flatMap(
             (groupedStep) => groupedStep.steps
           ),
-          traceBack: process2.traceback,
-          userInputForm: process2.form,
-          startedAt: process2.startedAt,
+          traceBack: process3.traceback,
+          userInputForm: process3.form,
+          startedAt: process3.startedAt,
           isTask
         }
       ) || /* @__PURE__ */ jsx168("h1", { children: "Invalid processId" })
@@ -55595,7 +55698,7 @@ var WfoStartProcessPage = ({
     [productId, subscriptionId]
   );
   const { stepUserInput, hasNext } = form;
-  const { getStepHeaderStyle, stepListContentBoldTextStyle } = useWithOrchestratorTheme(getStyles13);
+  const { getStepHeaderStyle, stepListContentBoldTextStyle } = useWithOrchestratorTheme(getStyles14);
   const {
     data: timeLineItems = [],
     isError: isError2,
@@ -55612,10 +55715,10 @@ var WfoStartProcessPage = ({
         workflowName: processName,
         userInputs: startProcessPayload ? [startProcessPayload, ...processInput] : [...processInput]
       }).unwrap().then(
-        (process2) => {
-          if (process2.id) {
+        (process3) => {
+          if (process3.id) {
             const basePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
-            router.push(`${basePath}/${process2.id}`);
+            router.push(`${basePath}/${process3.id}`);
           }
         },
         // Reject handler
@@ -55647,10 +55750,10 @@ var WfoStartProcessPage = ({
   useEffect26(() => {
     if (processName) {
       const clientResultCallback = (json) => {
-        var _a;
+        var _a, _b;
         setForm({
           stepUserInput: json.form,
-          hasNext: (_a = json.hasNext) != null ? _a : false
+          hasNext: (_b = (_a = json.meta) == null ? void 0 : _a.hasNext) != null ? _b : false
         });
       };
       handlePromiseErrorWithCallback(
@@ -55658,6 +55761,9 @@ var WfoStartProcessPage = ({
         510 /* FormNotComplete */,
         clientResultCallback
       );
+      return () => {
+        setForm({});
+      };
     }
   }, [submit, processName]);
   const processDetail = {
@@ -56462,7 +56568,7 @@ var WfoWorkflowsListPage = () => {
 
 // src/components/WfoProcessList/processListObjectMappers.ts
 var mapGraphQlProcessListResultToPageInfo = (processesResponse) => processesResponse.pageInfo;
-var mapGraphQlProcessListResultToProcessListItems = (processes) => processes.map((process2) => {
+var mapGraphQlProcessListResultToProcessListItems = (processes) => processes.map((process3) => {
   const {
     workflowName,
     lastStep,
@@ -56477,7 +56583,7 @@ var mapGraphQlProcessListResultToProcessListItems = (processes) => processes.map
     product,
     customer,
     isTask
-  } = process2;
+  } = process3;
   return {
     workflowName,
     lastStep,
@@ -56496,7 +56602,7 @@ var mapGraphQlProcessListResultToProcessListItems = (processes) => processes.map
     customerAbbreviation: customer.shortcode
   };
 });
-var mapGraphQlProcessListExportResultToProcessListItems = (processesResponse) => processesResponse.processes.map((process2) => {
+var mapGraphQlProcessListExportResultToProcessListItems = (processesResponse) => processesResponse.processes.map((process3) => {
   const {
     workflowName,
     lastStep,
@@ -56511,7 +56617,7 @@ var mapGraphQlProcessListExportResultToProcessListItems = (processesResponse) =>
     product,
     customer,
     isTask
-  } = process2;
+  } = process3;
   return {
     workflowName,
     lastStep,
@@ -56732,13 +56838,13 @@ var WfoProcessesList = ({
 import { EuiCodeBlock as EuiCodeBlock2 } from "@elastic/eui";
 
 // src/components/WfoJsonCodeBlock/styles.ts
-import { css as css30 } from "@emotion/react";
-var getStyles16 = ({ theme }) => {
-  const euiCodeBlockStyle = css30({
+import { css as css31 } from "@emotion/react";
+var getStyles17 = ({ theme }) => {
+  const euiCodeBlockStyle = css31({
     marginTop: 10,
     borderRadius: theme.border.radius.medium
   });
-  const euiBasicCodeBlockStyle = css30({
+  const euiBasicCodeBlockStyle = css31({
     backgroundColor: "inherit",
     ".euiCodeBlock__pre": {
       paddingTop: 0,
@@ -56761,7 +56867,7 @@ var WfoJsonCodeBlock = ({
   data,
   isBasicStyle = false
 }) => {
-  const { euiCodeBlockStyle, euiBasicCodeBlockStyle } = useWithOrchestratorTheme(getStyles16);
+  const { euiCodeBlockStyle, euiBasicCodeBlockStyle } = useWithOrchestratorTheme(getStyles17);
   const json = JSON.stringify(data, null, 4);
   return /* @__PURE__ */ jsx179(
     EuiCodeBlock2,
@@ -56787,10 +56893,10 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoSettings/styles.ts
-import { css as css31 } from "@emotion/react";
+import { css as css32 } from "@emotion/react";
 var getWfoFlushSettingsStyle = (wfoTheme) => {
   const { theme } = wfoTheme;
-  const comboboxStyle = css31({
+  const comboboxStyle = css32({
     // .euiComboBox is needed to override eui styling (more specific)
     "&.euiComboBox": {
       ".euiComboBox__inputWrap": {
@@ -57013,9 +57119,9 @@ var WfoErrorBoundary = class extends React57.Component {
 import { EuiFlexGroup as EuiFlexGroup25 } from "@elastic/eui";
 
 // src/components/WfoNoResults/styles.ts
-import { css as css32 } from "@emotion/react";
-var getStyles17 = ({ theme }) => {
-  const panelStyle = css32({
+import { css as css33 } from "@emotion/react";
+var getStyles18 = ({ theme }) => {
+  const panelStyle = css33({
     display: "flex",
     padding: theme.base * 2,
     flexDirection: "row",
@@ -57036,7 +57142,7 @@ var getStyles17 = ({ theme }) => {
 // src/components/WfoNoResults/WfoNoResults.tsx
 import { jsxs as jsxs106 } from "@emotion/react/jsx-runtime";
 var WfoNoResults = ({ text, icon }) => {
-  const { panelStyle } = useWithOrchestratorTheme(getStyles17);
+  const { panelStyle } = useWithOrchestratorTheme(getStyles18);
   return /* @__PURE__ */ jsxs106(EuiFlexGroup25, { css: panelStyle, children: [
     icon,
     " ",
@@ -57107,18 +57213,18 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoSummary/WfoSummaryCardHeader/styles.ts
-import { css as css33 } from "@emotion/react";
+import { css as css34 } from "@emotion/react";
 var getWfoSummaryCardHeaderStyles = ({ theme }) => {
-  const avatarStyle = css33({
+  const avatarStyle = css34({
     maxHeight: theme.base * 3,
     maxWidth: theme.base * 3
   });
-  const totalSectionStyle = css33({
+  const totalSectionStyle = css34({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between"
   });
-  const valueStyle = css33({
+  const valueStyle = css34({
     fontSize: theme.size.l,
     fontWeight: theme.font.weight.semiBold
   });
@@ -57189,23 +57295,23 @@ var WfoOptionalLink = ({
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/styles.ts
-import { css as css34 } from "@emotion/react";
+import { css as css35 } from "@emotion/react";
 var getWfoSummaryCardListStyles = ({ theme }) => {
-  const listContainerStyle = css34({
+  const listContainerStyle = css35({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
     flexGrow: 1,
     borderColor: theme.colors.lightShade
   });
-  const listHeaderStyle = css34({
+  const listHeaderStyle = css35({
     fontWeight: theme.font.weight.semiBold
   });
-  const listStyle = css34({
+  const listStyle = css35({
     height: theme.base * 20,
     overflow: "auto"
   });
-  const listItemContainerStyle = css34({
+  const listItemContainerStyle = css35({
     paddingBlock: theme.size.m,
     ".highlight-icon": {
       visibility: "hidden"
@@ -57214,13 +57320,13 @@ var getWfoSummaryCardListStyles = ({ theme }) => {
       visibility: "visible"
     }
   });
-  const listItemTitleStyle = css34({
+  const listItemTitleStyle = css35({
     fontWeight: theme.font.weight.medium
   });
-  const listItemSubtitleStyle = css34({
+  const listItemSubtitleStyle = css35({
     fontWeight: theme.font.weight.regular
   });
-  const listItemHighlightIconStyle = css34({
+  const listItemHighlightIconStyle = css35({
     visibility: "hidden"
   });
   return {
@@ -57340,9 +57446,9 @@ var WfoSummaryCards = ({ children }) => {
 import { EuiFlexItem as EuiFlexItem35, EuiSpacer as EuiSpacer25 } from "@elastic/eui";
 
 // src/components/WfoSummary/styles.ts
-import { css as css35 } from "@emotion/react";
+import { css as css36 } from "@emotion/react";
 var getWfoSummaryCardsStyles = ({ theme }) => {
-  const cardContainerStyle = css35({
+  const cardContainerStyle = css36({
     height: theme.base * 36,
     minWidth: theme.base * 25
   });
@@ -57695,26 +57801,6 @@ var WfoProductsSummaryCard = () => {
   );
 };
 
-// src/components/WfoRouteChangeListener/WfoRouteChangeListener.tsx
-import { useEffect as useEffect30 } from "react";
-import { getSession as getSession3, signIn } from "next-auth/react";
-import { useRouter as useRouter16 } from "next/router";
-import { Fragment as Fragment47, jsx as jsx199 } from "@emotion/react/jsx-runtime";
-var WfoRouteChangeListener = () => {
-  const router = useRouter16();
-  const { authActive } = useGetOrchestratorConfig();
-  useEffect30(() => {
-    if (authActive) {
-      getSession3().then((session) => {
-        if (!session) {
-          signIn();
-        }
-      });
-    }
-  }, [authActive, router]);
-  return /* @__PURE__ */ jsx199(Fragment47, {});
-};
-
 // src/rtk/endpoints/translations.ts
 var TRANSLATIONS_URL = "translations";
 var translationsApi = orchestratorApi.injectEndpoints({
@@ -57756,7 +57842,7 @@ var en_GB_default = {
     darkMode: "Dark mode",
     lightMode: "Light mode",
     websocketConnected: "The websocket is connected",
-    websocketDisconnected: "The websocket is disconnected, try refreshing the page"
+    websocketDisconnected: "The websocket is disconnected, click the icon or refresh the page"
   },
   common: {
     product: "Product",
@@ -57803,6 +57889,7 @@ var en_GB_default = {
       cancel: "Cancel",
       submit: "Submit",
       previous: "Previous",
+      next: "Next",
       previousQuestion: "Are you sure you want to leave this page? Any filled form data will be lost",
       startTask: "Start task",
       startWorkflow: "Start workflow",
@@ -58168,7 +58255,7 @@ var nl_NL_default = {
     darkMode: "Dark mode",
     lightMode: "Light mode",
     websocketConnected: "De websocket is actief",
-    websocketDisconnected: "De websocket verbinding is verbroken, probeer de pagina te verversen."
+    websocketDisconnected: "De websocket verbinding is verbroken, klik op het icoon of ververs de pagina."
   },
   common: {
     product: "Produkt",
@@ -58215,6 +58302,7 @@ var nl_NL_default = {
       cancel: "Annuleren",
       submit: "Verstuur",
       previous: "Vorige",
+      next: "Volgende",
       startTask: "Start taak",
       previousQuestion: "Weet je zeker dat je deze pagina wilt verlaten? Ingevulde velden worden niet opgeslagen",
       startWorkflow: "Start workflow",
@@ -58783,7 +58871,6 @@ export {
   WfoRelatedSubscriptions,
   WfoResetTextSearchIndexButton,
   WfoResourceTypesPage,
-  WfoRouteChangeListener,
   WfoSearchField,
   WfoSearchStrikethrough,
   WfoSettingsModal,
@@ -58854,6 +58941,7 @@ export {
   defaultWorkflowsListTabs,
   determineNewSortOrder,
   determinePageIndex,
+  emptyOrchestratorConfig,
   filterDataByCriteria,
   flattenArrayProps,
   formatDate,
@@ -58865,6 +58953,7 @@ export {
   getCustomApiSlice,
   getDataSortHandler,
   getDate,
+  getEnvironmentVariables,
   getFieldFromProductBlockInstanceValues,
   getFirstUuidPart,
   getFormFieldsBaseStyle,
@@ -58884,7 +58973,7 @@ export {
   getSortDirectionFromString,
   getStatusBadgeColor,
   getStepContent,
-  getStyles11 as getStyles,
+  getStyles12 as getStyles,
   getTableConfigFromLocalStorage,
   getTasksListTabTypeFromString,
   getTypedFieldFromObject,
@@ -58955,6 +59044,7 @@ export {
   useGetCacheNamesQuery,
   useGetCustomerQuery,
   useGetCustomersQuery,
+  useGetCustomersWithSubscriptionCountQuery,
   useGetEngineStatusQuery,
   useGetInUseByRelationDetailsQuery,
   useGetOrchestratorConfig,