@orchestrator-ui/orchestrator-ui-components 3.0.2 → 3.1.0

package/dist/index.js

@@ -15304,10 +15304,10 @@ var require_jsstacktrace = __commonJS({
 var require_jsx = __commonJS({
   "../../node_modules/refractor/lang/jsx.js"(exports, module) {
     "use strict";
-    module.exports = jsx238;
-    jsx238.displayName = "jsx";
-    jsx238.aliases = [];
-    function jsx238(Prism) {
+    module.exports = jsx240;
+    jsx240.displayName = "jsx";
+    jsx240.aliases = [];
+    function jsx240(Prism) {
       ;
       (function(Prism2) {
         var javascript = Prism2.util.clone(Prism2.languages.javascript);
@@ -26792,7 +26792,7 @@ var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
 })(PolicyResource || {});
 
 // src/configuration/version.ts
-var ORCHESTRATOR_UI_LIBRARY_VERSION = "3.0.2";
+var ORCHESTRATOR_UI_LIBRARY_VERSION = "3.1.0";
 
 // src/types/types.ts
 var EngineStatus = /* @__PURE__ */ ((EngineStatus3) => {
@@ -34164,7 +34164,7 @@ var streamMessagesApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
     streamMessages: build.query({
       queryFn: () => {
-        return { data: false };
+        return { data: true };
       },
       async onCacheEntryAdded(_2, {
         cacheDataLoaded,
@@ -36829,13 +36829,16 @@ var getStyles = ({ theme }) => {
 };
 
 // src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx
-import { jsx as jsx61 } from "@emotion/react/jsx-runtime";
-var WfoWebsocketStatusBadge = () => {
+import { Fragment as Fragment2, jsx as jsx61 } from "@emotion/react/jsx-runtime";
+var WfoWebsocketStatusBadge = ({
+  hideWhenConnected = false
+}) => {
   const dispatch = useDispatch2();
   const { connectedStyle, disconnectedStyle } = useWithOrchestratorTheme(getStyles);
   const t = useTranslations6("main");
   const { theme } = useOrchestratorTheme();
   const { data: websocketConnected } = useStreamMessagesQuery();
+  const showBadge = !(websocketConnected && hideWhenConnected);
   const reconnect = useCallback3(() => {
     dispatch(orchestratorApi.util.resetApiState());
   }, [dispatch]);
@@ -36860,7 +36863,7 @@ var WfoWebsocketStatusBadge = () => {
       }
     };
   }, [reconnect, websocketConnected]);
-  return /* @__PURE__ */ jsx61(
+  return showBadge ? /* @__PURE__ */ jsx61(
     EuiToolTip2,
     {
       position: "bottom",
@@ -36882,7 +36885,7 @@ var WfoWebsocketStatusBadge = () => {
         }
       )
     }
-  );
+  ) : /* @__PURE__ */ jsx61(Fragment2, {});
 };
 
 // src/components/WfoContentHeader/WfoContentHeader.tsx
@@ -36892,12 +36895,12 @@ import {
   EuiPageHeader,
   EuiSpacer
 } from "@elastic/eui";
-import { Fragment as Fragment2, jsx as jsx62, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx62, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var WfoContentHeader = ({
   title,
   subtitle,
   children
-}) => /* @__PURE__ */ jsxs34(Fragment2, { children: [
+}) => /* @__PURE__ */ jsxs34(Fragment3, { children: [
   /* @__PURE__ */ jsxs34(EuiFlexGroup, { children: [
     /* @__PURE__ */ jsxs34(EuiFlexItem, { children: [
       /* @__PURE__ */ jsx62(
@@ -36937,7 +36940,7 @@ var getStyles2 = ({ theme }) => {
 };
 
 // src/components/WfoExpandableField/WfoExpandableField.tsx
-import { Fragment as Fragment3, jsx as jsx63, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx63, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var WfoExpandableField = ({
   isExpanded,
   title,
@@ -36946,7 +36949,7 @@ var WfoExpandableField = ({
 }) => {
   const { theme } = useOrchestratorTheme();
   const { titleRowStyle, titleStyle } = useWithOrchestratorTheme(getStyles2);
-  return /* @__PURE__ */ jsxs35(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment4, { children: [
     /* @__PURE__ */ jsxs35("div", { css: titleRowStyle, children: [
       /* @__PURE__ */ jsx63(
         EuiButtonIcon,
@@ -37254,6 +37257,10 @@ var snakeToKebab = (value) => {
   return value.replace(/_/g, "-");
 };
 var isAllUpperCase = (str) => str === str.toUpperCase();
+var isNullOrEmpty = (str) => {
+  return str === null || str === void 0 || str.trim() === "";
+};
+var INVISIBLE_CHARACTER = "\u200E";
 
 // src/utils/toObjectWithSerializedValues.ts
 var toObjectWithSerializedValues = (inputObject) => {
@@ -37297,7 +37304,7 @@ var isUuid4 = (value) => !!value.match(
 );
 
 // src/components/WfoPageTemplate/WfoBreadcrumbs/WfoBreadcrumbs.tsx
-import { Fragment as Fragment4, jsx as jsx64, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx64, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var WfoBreadcrumbs = ({
   handleSideMenuClick
 }) => {
@@ -37330,7 +37337,7 @@ var WfoBreadcrumbs = ({
       });
     }
   });
-  return /* @__PURE__ */ jsxs36(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs36(Fragment5, { children: [
     /* @__PURE__ */ jsxs36(
       EuiFlexGroup2,
       {
@@ -37578,14 +37585,14 @@ var WfoValueCell = ({
 };
 
 // src/components/WfoKeyValueTable/WfoKeyValueTable.tsx
-import { Fragment as Fragment5 } from "react";
+import { Fragment as Fragment6 } from "react";
 import { jsx as jsx69, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var WfoKeyValueTable = ({
   keyValues,
   showCopyToClipboardIcon = false
 }) => {
   const { keyValueTable } = useWithOrchestratorTheme(getStyles4);
-  return /* @__PURE__ */ jsx69("div", { css: keyValueTable, children: keyValues.map(({ key, value, textToCopy }, rowNumber) => /* @__PURE__ */ jsxs39(Fragment5, { children: [
+  return /* @__PURE__ */ jsx69("div", { css: keyValueTable, children: keyValues.map(({ key, value, textToCopy }, rowNumber) => /* @__PURE__ */ jsxs39(Fragment6, { children: [
     /* @__PURE__ */ jsx69(WfoKeyCell, { value: key, rowNumber }),
     /* @__PURE__ */ jsx69(
       WfoValueCell,
@@ -37831,6 +37838,7 @@ var WfoPageHeader = ({
     ] }),
     /* @__PURE__ */ jsx74(EuiHeaderSection, { children: /* @__PURE__ */ jsxs42(EuiHeaderSectionItem, { children: [
       /* @__PURE__ */ jsxs42(EuiBadgeGroup, { css: { marginRight: multiplyByBaseUnit(1) }, children: [
+        /* @__PURE__ */ jsx74(WfoWebsocketStatusBadge, { hideWhenConnected: true }),
         /* @__PURE__ */ jsx74(WfoEngineStatusBadge, {}),
         /* @__PURE__ */ jsx74(WfoFailedTasksBadge, {})
       ] }),
@@ -37861,11 +37869,74 @@ var WfoPageHeader = ({
 };
 
 // src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx
-import { useState as useState10 } from "react";
+import { useState as useState8 } from "react";
 import { EuiPageTemplate } from "@elastic/eui";
+import { Fragment as Fragment7, jsx as jsx75, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+var WfoPageTemplate = ({
+  children,
+  getAppLogo,
+  overrideMenuItems,
+  onThemeSwitch
+}) => {
+  const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
+  const [isSideMenuVisible, setIsSideMenuVisible] = useState8(true);
+  const navigationHeight = multiplyByBaseUnit(3);
+  return /* @__PURE__ */ jsxs43(Fragment7, { children: [
+    /* @__PURE__ */ jsx75(
+      WfoPageHeader,
+      {
+        getAppLogo,
+        navigationHeight,
+        onThemeSwitch
+      }
+    ),
+    /* @__PURE__ */ jsxs43(
+      EuiPageTemplate,
+      {
+        panelled: false,
+        grow: false,
+        contentBorder: false,
+        minHeight: `calc(100vh - ${navigationHeight}px)`,
+        restrictWidth: false,
+        children: [
+          isSideMenuVisible && /* @__PURE__ */ jsx75(
+            EuiPageTemplate.Sidebar,
+            {
+              css: {
+                backgroundColor: theme.colors.body,
+                overflowY: "auto",
+                maxHeight: `calc(100vh - ${navigationHeight}px)`
+              },
+              children: /* @__PURE__ */ jsx75(WfoSidebar, { overrideMenuItems })
+            }
+          ),
+          /* @__PURE__ */ jsxs43(
+            EuiPageTemplate.Section,
+            {
+              css: {
+                backgroundColor: theme.colors.emptyShade,
+                overflowY: "auto",
+                maxHeight: `calc(100vh - ${navigationHeight}px)`
+              },
+              children: [
+                /* @__PURE__ */ jsx75(
+                  WfoBreadcrumbs,
+                  {
+                    handleSideMenuClick: () => setIsSideMenuVisible((prevState) => !prevState)
+                  }
+                ),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
 
 // src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { useTranslations as useTranslations13 } from "next-intl";
 import { useRouter as useRouter4 } from "next/router";
 import { EuiSideNav, EuiSpacer as EuiSpacer4 } from "@elastic/eui";
@@ -37977,7 +38048,7 @@ import { useTranslations as useTranslations11 } from "next-intl";
 import { useRouter as useRouter3 } from "next/router";
 
 // src/components/WfoStartButton/WfoStartButtonComboBox.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { EuiButton as EuiButton2, EuiPopover as EuiPopover2, EuiSelectable, EuiSpacer as EuiSpacer3 } from "@elastic/eui";
 
 // src/components/WfoStartButton/styles.ts
@@ -38001,7 +38072,7 @@ var getStyles5 = ({ theme }) => {
 };
 
 // src/components/WfoStartButton/WfoStartButtonComboBox.tsx
-import { Fragment as Fragment6, jsx as jsx75, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx76, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var WfoStartButtonComboBox = ({
   buttonText,
   options,
@@ -38009,27 +38080,27 @@ var WfoStartButtonComboBox = ({
   isProcess,
   className
 }) => {
-  const [isPopoverOpen, setPopoverOpen] = useState8(false);
+  const [isPopoverOpen, setPopoverOpen] = useState9(false);
   const { theme, isDarkThemeActive } = useOrchestratorTheme();
   const { selectableStyle } = useWithOrchestratorTheme(getStyles5);
-  const Button = /* @__PURE__ */ jsx75(
+  const Button = /* @__PURE__ */ jsx76(
     EuiButton2,
     {
       onClick: () => setPopoverOpen(!isPopoverOpen),
-      iconType: isProcess ? "plus" : () => /* @__PURE__ */ jsx75(WfoPlusCircleFill, { color: theme.colors.ghost }),
+      iconType: isProcess ? "plus" : () => /* @__PURE__ */ jsx76(WfoPlusCircleFill, { color: theme.colors.ghost }),
       fullWidth: isProcess,
       fill: !isProcess || isDarkThemeActive,
       children: buttonText
     }
   );
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     EuiPopover2,
     {
       initialFocus: `.euiSelectable .euiFieldSearch`,
       button: Button,
       isOpen: isPopoverOpen,
       closePopover: () => setPopoverOpen(false),
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx76(
         EuiSelectable,
         {
           className,
@@ -38038,9 +38109,9 @@ var WfoStartButtonComboBox = ({
           options,
           onChange: (_2, __, changedOption) => onOptionChange(changedOption),
           height: 200,
-          children: (list, search) => /* @__PURE__ */ jsxs43(Fragment6, { children: [
+          children: (list, search) => /* @__PURE__ */ jsxs44(Fragment8, { children: [
             search,
-            /* @__PURE__ */ jsx75(EuiSpacer3, { size: "s" }),
+            /* @__PURE__ */ jsx76(EuiSpacer3, { size: "s" }),
             list
           ] })
         }
@@ -38050,7 +38121,7 @@ var WfoStartButtonComboBox = ({
 };
 
 // src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx
-import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
 var WfoStartWorkflowButtonComboBox = () => {
   const router = useRouter3();
   const t = useTranslations11("common");
@@ -38075,7 +38146,7 @@ var WfoStartWorkflowButtonComboBox = () => {
       });
     }
   };
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(
     WfoStartButtonComboBox,
     {
       buttonText: t("newSubscription"),
@@ -38103,11 +38174,11 @@ var PATH_TASKS = "/tasks";
 var PATH_SETTINGS = "/settings";
 
 // src/components/WfoPageTemplate/WfoSidebar/WfoCopyright.tsx
-import { jsx as jsx77, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var WfoCopyright = () => {
   const { copyrightStyle } = useWithOrchestratorTheme(getCopyrightStyles);
   const year = (/* @__PURE__ */ new Date()).getFullYear();
-  return /* @__PURE__ */ jsx77("div", { children: /* @__PURE__ */ jsx77("span", { css: copyrightStyle, children: /* @__PURE__ */ jsx77("p", { children: /* @__PURE__ */ jsxs44("a", { href: "https://workfloworchestrator.org/", target: "_blank", children: [
+  return /* @__PURE__ */ jsx78("div", { children: /* @__PURE__ */ jsx78("span", { css: copyrightStyle, children: /* @__PURE__ */ jsx78("p", { children: /* @__PURE__ */ jsxs45("a", { href: "https://workfloworchestrator.org/", target: "_blank", children: [
     "\xA9 ",
     year,
     " - workfloworchestrator.org"
@@ -38117,7 +38188,7 @@ var WfoCopyright = () => {
 // src/components/WfoPageTemplate/WfoSidebar/WfoMenuLink.tsx
 import { useTranslations as useTranslations12 } from "next-intl";
 import Link3 from "next/link";
-import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
 var WfoMenuItemLink = ({
   path,
   target,
@@ -38144,11 +38215,11 @@ var WfoMenuItemLink = ({
   };
   const t = useTranslations12("main");
   const linkText = t(translationString) === `main.${translationString}` ? translationString : t(translationString);
-  return /* @__PURE__ */ jsx78(Link3, { css: getMenuItemStyle(), href: path, target, children: linkText });
+  return /* @__PURE__ */ jsx79(Link3, { css: getMenuItemStyle(), href: path, target, children: linkText });
 };
 
 // src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx
-import { Fragment as Fragment7, jsx as jsx79, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx80, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var urlPolicyMap = /* @__PURE__ */ new Map([
   [PATH_WORKFLOWS, "/orchestrator/processes/" /* NAVIGATION_WORKFLOWS */],
   [PATH_SUBSCRIPTIONS, "/orchestrator/subscriptions/" /* NAVIGATION_SUBSCRIPTIONS */],
@@ -38160,7 +38231,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
   const { menuStyle } = useWithOrchestratorTheme(getMenuStyles);
   const t = useTranslations13("main");
   const router = useRouter4();
-  const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState9(false);
+  const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState10(false);
   const { isAllowed } = usePolicy();
   const toggleMobile = () => {
     setIsSideNavOpenOnMobile((openState) => !openState);
@@ -38171,7 +38242,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
       id: "2",
       isSelected: router.pathname === PATH_START,
       href: PATH_START,
-      renderItem: () => /* @__PURE__ */ jsx79(
+      renderItem: () => /* @__PURE__ */ jsx80(
         WfoMenuItemLink,
         {
           path: PATH_START,
@@ -38185,7 +38256,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
       id: "3",
       isSelected: router.pathname.startsWith(PATH_SUBSCRIPTIONS),
       href: PATH_SUBSCRIPTIONS,
-      renderItem: () => /* @__PURE__ */ jsx79(
+      renderItem: () => /* @__PURE__ */ jsx80(
         WfoMenuItemLink,
         {
           path: PATH_SUBSCRIPTIONS,
@@ -38199,7 +38270,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
       id: "4",
       isSelected: router.pathname.startsWith(PATH_WORKFLOWS),
       href: PATH_WORKFLOWS,
-      renderItem: () => /* @__PURE__ */ jsx79(
+      renderItem: () => /* @__PURE__ */ jsx80(
         WfoMenuItemLink,
         {
           path: PATH_WORKFLOWS,
@@ -38213,7 +38284,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
       isSelected: router.pathname.startsWith(PATH_TASKS),
       id: "5",
       href: PATH_TASKS,
-      renderItem: () => /* @__PURE__ */ jsx79(
+      renderItem: () => /* @__PURE__ */ jsx80(
         WfoMenuItemLink,
         {
           path: PATH_TASKS,
@@ -38227,7 +38298,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
       id: "6",
       href: PATH_METADATA,
       isSelected: router.pathname.substring(0, PATH_METADATA.length) === PATH_METADATA,
-      renderItem: () => /* @__PURE__ */ jsx79(
+      renderItem: () => /* @__PURE__ */ jsx80(
         WfoMenuItemLink,
         {
           path: PATH_METADATA_PRODUCTS,
@@ -38241,7 +38312,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
           name: t("metadataProducts"),
           id: "6.1",
           href: PATH_METADATA_PRODUCTS,
-          renderItem: () => /* @__PURE__ */ jsx79(
+          renderItem: () => /* @__PURE__ */ jsx80(
             WfoMenuItemLink,
             {
               path: PATH_METADATA_PRODUCTS,
@@ -38256,7 +38327,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
           id: "6.2",
           isSelected: router.pathname === PATH_METADATA_PRODUCT_BLOCKS,
           href: PATH_METADATA_PRODUCT_BLOCKS,
-          renderItem: () => /* @__PURE__ */ jsx79(
+          renderItem: () => /* @__PURE__ */ jsx80(
             WfoMenuItemLink,
             {
               path: PATH_METADATA_PRODUCT_BLOCKS,
@@ -38271,7 +38342,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
           id: "6.3",
           href: PATH_METADATA_RESOURCE_TYPES,
           isSelected: router.pathname === PATH_METADATA_RESOURCE_TYPES,
-          renderItem: () => /* @__PURE__ */ jsx79(
+          renderItem: () => /* @__PURE__ */ jsx80(
             WfoMenuItemLink,
             {
               path: PATH_METADATA_RESOURCE_TYPES,
@@ -38286,7 +38357,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
           id: "6.4",
           isSelected: router.pathname === PATH_METADATA_WORKFLOWS,
           href: PATH_METADATA_WORKFLOWS,
-          renderItem: () => /* @__PURE__ */ jsx79(
+          renderItem: () => /* @__PURE__ */ jsx80(
             WfoMenuItemLink,
             {
               path: PATH_METADATA_WORKFLOWS,
@@ -38301,7 +38372,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
           id: "6.5",
           isSelected: router.pathname === PATH_METADATA_TASKS,
           href: PATH_METADATA_TASKS,
-          renderItem: () => /* @__PURE__ */ jsx79(
+          renderItem: () => /* @__PURE__ */ jsx80(
             WfoMenuItemLink,
             {
               path: PATH_METADATA_TASKS,
@@ -38318,7 +38389,7 @@ var WfoSidebar = ({ overrideMenuItems }) => {
       isSelected: router.pathname === PATH_SETTINGS,
       id: "7",
       href: PATH_SETTINGS,
-      renderItem: () => /* @__PURE__ */ jsx79(
+      renderItem: () => /* @__PURE__ */ jsx80(
         WfoMenuItemLink,
         {
           path: PATH_SETTINGS,
@@ -38333,23 +38404,23 @@ var WfoSidebar = ({ overrideMenuItems }) => {
   );
   const defaultMenu = [
     {
-      renderItem: () => /* @__PURE__ */ jsxs45(Fragment7, { children: [
-        /* @__PURE__ */ jsx79(
+      renderItem: () => /* @__PURE__ */ jsxs46(Fragment9, { children: [
+        /* @__PURE__ */ jsx80(
           WfoIsAllowedToRender,
           {
             resource: "/orchestrator/processes/create/process/menu" /* SUBSCRIPTION_CREATE */,
-            children: /* @__PURE__ */ jsx79(WfoStartWorkflowButtonComboBox, {})
+            children: /* @__PURE__ */ jsx80(WfoStartWorkflowButtonComboBox, {})
           }
         ),
-        /* @__PURE__ */ jsx79(EuiSpacer4, { size: "xl" }),
-        /* @__PURE__ */ jsx79(WfoCopyright, {})
+        /* @__PURE__ */ jsx80(EuiSpacer4, { size: "xl" }),
+        /* @__PURE__ */ jsx80(WfoCopyright, {})
       ] }),
       name: "Menu",
       id: "1",
       items: overrideMenuItems ? overrideMenuItems(defaultMenuItemsFilteredByPolicy) : defaultMenuItemsFilteredByPolicy
     }
   ];
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     EuiSideNav,
     {
       css: menuStyle,
@@ -38370,67 +38441,6 @@ var menuItemIsAllowed = (url, urlPolicyMap2, isAllowedHandler) => {
   return policyResource ? isAllowedHandler(policyResource) : true;
 };
 
-// src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx
-import { Fragment as Fragment8, jsx as jsx80, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
-var WfoPageTemplate = ({
-  children,
-  getAppLogo,
-  overrideMenuItems,
-  onThemeSwitch
-}) => {
-  const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
-  const [isSideMenuVisible, setIsSideMenuVisible] = useState10(true);
-  const navigationHeight = multiplyByBaseUnit(3);
-  return /* @__PURE__ */ jsxs46(Fragment8, { children: [
-    /* @__PURE__ */ jsx80(
-      WfoPageHeader,
-      {
-        getAppLogo,
-        navigationHeight,
-        onThemeSwitch
-      }
-    ),
-    /* @__PURE__ */ jsxs46(
-      EuiPageTemplate,
-      {
-        panelled: false,
-        grow: false,
-        contentBorder: false,
-        minHeight: `calc(100vh - ${navigationHeight}px)`,
-        restrictWidth: false,
-        children: [
-          isSideMenuVisible && /* @__PURE__ */ jsx80(
-            EuiPageTemplate.Sidebar,
-            {
-              css: {
-                backgroundColor: theme.colors.body
-              },
-              children: /* @__PURE__ */ jsx80(WfoSidebar, { overrideMenuItems })
-            }
-          ),
-          /* @__PURE__ */ jsxs46(
-            EuiPageTemplate.Section,
-            {
-              css: {
-                backgroundColor: theme.colors.emptyShade
-              },
-              children: [
-                /* @__PURE__ */ jsx80(
-                  WfoBreadcrumbs,
-                  {
-                    handleSideMenuClick: () => setIsSideMenuVisible((prevState) => !prevState)
-                  }
-                ),
-                children
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-
 // src/components/WfoSearchBar/WfoSearchField.tsx
 import { useEffect as useEffect6, useRef as useRef4, useState as useState11 } from "react";
 import { useTranslations as useTranslations14 } from "next-intl";
@@ -38834,8 +38844,7 @@ var WfoSubscriptionDetailSection = ({
     endDate,
     status,
     customer,
-    customerDescriptions,
-    note
+    customerDescriptions
   } = subscriptionDetail;
   const subscriptionDetailBlockData = [
     {
@@ -38897,10 +38906,10 @@ var WfoSubscriptionDetailSection = ({
     {
       key: t("note"),
       value: /* @__PURE__ */ jsx85(
-        WfoInlineNoteEdit,
+        WfoSubscriptionDetailNoteEdit,
         {
           subscriptionId,
-          value: note
+          onlyShowOnHover: true
         }
       )
     }
@@ -39002,13 +39011,13 @@ var WfoSubscriptionProductInfoSection = ({
 
 // src/components/WfoSubscription/SubscriptionKeyValueBlock.tsx
 import { EuiFlexGroup as EuiFlexGroup5, EuiFlexItem as EuiFlexItem4, EuiSpacer as EuiSpacer8, EuiText as EuiText3 } from "@elastic/eui";
-import { Fragment as Fragment9, jsx as jsx89, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx89, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var SubscriptionKeyValueBlock = ({
   title,
   keyValues
 }) => {
   const { theme } = useOrchestratorTheme();
-  return /* @__PURE__ */ jsxs50(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs50(Fragment10, { children: [
     /* @__PURE__ */ jsx89(EuiSpacer8, { size: "m" }),
     /* @__PURE__ */ jsx89("div", { children: /* @__PURE__ */ jsxs50("div", { style: { marginTop: 5 }, children: [
       /* @__PURE__ */ jsx89(EuiFlexGroup5, { justifyContent: "spaceBetween", children: /* @__PURE__ */ jsx89(EuiFlexItem4, { children: /* @__PURE__ */ jsx89(
@@ -39038,13 +39047,13 @@ import Link4 from "next/link";
 import { EuiButton as EuiButton6 } from "@elastic/eui";
 
 // src/components/WfoAuth/WfoIsAllowedToRender.tsx
-import { Fragment as Fragment10, jsx as jsx90 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx90 } from "@emotion/react/jsx-runtime";
 var WfoIsAllowedToRender = ({
   resource,
   children
 }) => {
   const { isAllowed } = usePolicy();
-  return isAllowed(resource) ? /* @__PURE__ */ jsx90(Fragment10, { children }) : null;
+  return isAllowed(resource) ? /* @__PURE__ */ jsx90(Fragment11, { children }) : null;
 };
 
 // src/components/WfoInsyncIcon/WfoInsyncIcon.tsx
@@ -39069,7 +39078,7 @@ var WfoInsyncIcon = ({ inSync }) => {
 };
 
 // src/components/WfoSubscription/WfoInSyncField.tsx
-import { Fragment as Fragment11, jsx as jsx92, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx92, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var WfoInSyncField = ({
   subscriptionDetail,
   isFetching
@@ -39112,7 +39121,7 @@ var WfoInSyncField = ({
         }
       });
     };
-    return /* @__PURE__ */ jsxs51(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs51(Fragment12, { children: [
       /* @__PURE__ */ jsxs51(
         Link4,
         {
@@ -39141,7 +39150,7 @@ var WfoInSyncField = ({
       ) })
     ] });
   };
-  return /* @__PURE__ */ jsxs51(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment12, { children: [
     /* @__PURE__ */ jsx92("div", { css: { paddingRight: theme.base / 4, display: "flex" }, children: /* @__PURE__ */ jsx92(WfoInsyncIcon, { inSync }) }),
     inSync && lastTaskRunDate && `(${formatDate(lastTaskRunDate)})`,
     !inSync && lastUncompletedProcess && getProcessLink()
@@ -39238,7 +39247,7 @@ var getSubscriptionDetailStyles = ({ theme }) => {
 };
 
 // src/components/WfoSubscription/WfoProcessesTimeline.tsx
-import { Fragment as Fragment12, jsx as jsx94, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx94, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var WfoProcessCard = ({ subscriptionDetailProcess }) => {
   const t = useTranslations21("subscriptions.detail.processDetail");
   const {
@@ -39250,7 +39259,7 @@ var WfoProcessCard = ({ subscriptionDetailProcess }) => {
     lastHeaderCellStyle
   } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
   const processUrl = subscriptionDetailProcess.isTask ? PATH_TASKS : PATH_WORKFLOWS;
-  return /* @__PURE__ */ jsx94(Fragment12, { children: /* @__PURE__ */ jsx94("table", { css: tableStyle, children: /* @__PURE__ */ jsxs52("tbody", { children: [
+  return /* @__PURE__ */ jsx94(Fragment13, { children: /* @__PURE__ */ jsx94("table", { css: tableStyle, children: /* @__PURE__ */ jsxs52("tbody", { children: [
     /* @__PURE__ */ jsxs52("tr", { children: [
       /* @__PURE__ */ jsx94("td", { css: emptyCellStyle }),
       /* @__PURE__ */ jsx94("td", { css: headerCellStyle, children: t("id") }),
@@ -39357,7 +39366,7 @@ var WfoProcessesTimeline = ({
     subscriptionDetailProcesses,
     selectedOption.value
   );
-  return /* @__PURE__ */ jsxs52(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs52(Fragment13, { children: [
     /* @__PURE__ */ jsx94(EuiSpacer9, { size: "m" }),
     !subscriptionDetailProcesses && /* @__PURE__ */ jsx94(WfoLoading, {}),
     /* @__PURE__ */ jsx94(
@@ -39447,10 +39456,10 @@ var METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY = "metadataTasksTable";
 var SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY = "subscriptionsTable";
 
 // src/components/WfoTable/WfoTable/WfoTableDataRows.tsx
-import { Fragment as Fragment14 } from "react";
+import { Fragment as Fragment15 } from "react";
 
 // src/components/WfoTable/WfoTable/WfoExpandedRow.tsx
-import { Fragment as Fragment13 } from "react";
+import { Fragment as Fragment14 } from "react";
 import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
 var WfoExpandedRow = ({
   rowExpandingConfiguration,
@@ -39465,7 +39474,7 @@ var WfoExpandedRow = ({
   ]).filter(
     ([key]) => key === rowData[rowExpandingConfiguration.uniqueRowId].toLowerCase()
   ).map(([, expandedRowComponent], index) => /* @__PURE__ */ jsx95(
-    Fragment13,
+    Fragment14,
     {
       children: expandedRowComponent
     },
@@ -39763,7 +39772,7 @@ function mapSortableAndFilterableValuesToTableColumnConfig(tableColumnConfig, so
 }
 
 // src/components/WfoTable/WfoTable/WfoTableDataRows.tsx
-import { Fragment as Fragment15, jsx as jsx96, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx96, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var DATA_ROW_CLASS = "data-row";
 var CONTROL_CELL_CLASS = "control-cell";
 var DATA_CELL_CLASS = "data-cell";
@@ -39789,7 +39798,7 @@ var WfoTableDataRows = ({
     columnOrder,
     hiddenColumns
   );
-  return /* @__PURE__ */ jsx96(Fragment15, { children: data.map((row, index) => /* @__PURE__ */ jsxs53(Fragment14, { children: [
+  return /* @__PURE__ */ jsx96(Fragment16, { children: data.map((row, index) => /* @__PURE__ */ jsxs53(Fragment15, { children: [
     /* @__PURE__ */ jsx96(
       "tr",
       {
@@ -40108,7 +40117,7 @@ var WfoTableHeaderRow = ({
 };
 
 // src/components/WfoTable/WfoTable/WfoTable.tsx
-import { Fragment as Fragment16, jsx as jsx101, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx101, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var ColumnType = /* @__PURE__ */ ((ColumnType2) => {
   ColumnType2["DATA"] = "data";
   ColumnType2["CONTROL"] = "control";
@@ -40178,7 +40187,7 @@ var WfoTable = ({
     }
     return mergedConfig;
   }, {});
-  return /* @__PURE__ */ jsxs56(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs56(Fragment17, { children: [
     /* @__PURE__ */ jsx101("div", { css: [tableContainerStyle, useEuiScrollBar()], children: /* @__PURE__ */ jsxs56("table", { className, css: tableStyle, children: [
       overrideHeader ? overrideHeader(sortedVisibleColumns) : /* @__PURE__ */ jsx101("thead", { css: headerStyle, children: /* @__PURE__ */ jsx101(
         WfoTableHeaderRow,
@@ -40211,7 +40220,7 @@ var WfoTable = ({
         }
       ) })
     ] }) }),
-    pagination && /* @__PURE__ */ jsxs56(Fragment16, { children: [
+    pagination && /* @__PURE__ */ jsxs56(Fragment17, { children: [
       /* @__PURE__ */ jsx101(EuiSpacer10, { size: "xs" }),
       /* @__PURE__ */ jsx101(
         EuiTablePagination,
@@ -40361,7 +40370,7 @@ var WfoGroupedTableGroups = React23.forwardRef(
 WfoGroupedTableGroups.displayName = "WfoGroupedTableGroups";
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/WfoExpandedGroupRow.tsx
-import { Fragment as Fragment17, jsx as jsx104, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx104, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var WfoExpandedGroupRow = React24.forwardRef(
   ({
     data,
@@ -40373,7 +40382,7 @@ var WfoExpandedGroupRow = React24.forwardRef(
     const { expandedRowStyle } = useWithOrchestratorTheme(getWfoTableStyles);
     const { innerTableHeaderStyle, getNestingStyle } = useWithOrchestratorTheme(getWfoGroupedTableStyles);
     if (Array.isArray(data)) {
-      return /* @__PURE__ */ jsxs58(Fragment17, { children: [
+      return /* @__PURE__ */ jsxs58(Fragment18, { children: [
         /* @__PURE__ */ jsx104(
           WfoTableHeaderRow,
           {
@@ -40583,7 +40592,7 @@ var useGroupedTableConfig = ({
 };
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTable.tsx
-import { Fragment as Fragment18, jsx as jsx106, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx106, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var WfoGroupedTable = ({
   data,
   columnConfig,
@@ -40616,7 +40625,7 @@ var WfoGroupedTable = ({
       children: isAllGroupsAndSubgroupsExpanded ? t("collapse") : t("expand")
     }
   );
-  return /* @__PURE__ */ jsxs59(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs59(Fragment19, { children: [
     /* @__PURE__ */ jsx106(EuiFlexGroup7, { justifyContent: "flexEnd", children: overrideHeaderSection ? overrideHeaderSection(/* @__PURE__ */ jsx106(ExpandCollapseButton, {})) : /* @__PURE__ */ jsx106(ExpandCollapseButton, {}) }),
     /* @__PURE__ */ jsx106(EuiSpacer11, { size: "xs" }),
     /* @__PURE__ */ jsx106(
@@ -40673,7 +40682,7 @@ var WfoTruncateCell = ({ children }) => {
 };
 
 // src/components/WfoTable/WfoTable/WfoDataCell.tsx
-import { Fragment as Fragment19, jsx as jsx109 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx109 } from "@emotion/react/jsx-runtime";
 var WfoDataCell = ({
   customTooltip,
   children
@@ -40682,7 +40691,7 @@ var WfoDataCell = ({
   if (tooltipContent) {
     return /* @__PURE__ */ jsx109(WfoToolTip, { tooltipContent, children });
   }
-  return /* @__PURE__ */ jsx109(Fragment19, { children });
+  return /* @__PURE__ */ jsx109(Fragment20, { children });
 };
 
 // src/components/WfoTable/WfoTable/WfoToolTip.tsx
@@ -40708,7 +40717,7 @@ var WfoToolTip = ({
 };
 
 // src/components/WfoSubscription/WfoRelatedSubscriptions.tsx
-import { Fragment as Fragment20, jsx as jsx111, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx111, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var WfoRelatedSubscriptions = ({
   subscriptionId,
   subscriptionPath = PATH_SUBSCRIPTIONS
@@ -40801,7 +40810,7 @@ var WfoRelatedSubscriptions = ({
   const toggleTerminatedSubscriptions = () => {
     setHideTerminatedSubscriptions((currentValue) => !currentValue);
   };
-  return /* @__PURE__ */ jsxs60(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs60(Fragment21, { children: [
     /* @__PURE__ */ jsx111(EuiSpacer12, { size: "xl" }),
     /* @__PURE__ */ jsx111(EuiFlexGroup8, { justifyContent: "flexEnd", children: /* @__PURE__ */ jsx111(EuiFlexItem5, { grow: 0, children: /* @__PURE__ */ jsx111(
       EuiSwitch,
@@ -40847,7 +40856,7 @@ import { StringParam as StringParam2, useQueryParam, withDefault as withDefault2
 // src/components/WfoError/WfoError.tsx
 import { useTranslations as useTranslations27 } from "next-intl";
 import { EuiFlexGroup as EuiFlexGroup9, EuiText as EuiText7 } from "@elastic/eui";
-import { Fragment as Fragment21, jsx as jsx112, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx112, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var WfoError = () => {
   const t = useTranslations27("common");
   const { theme } = useOrchestratorTheme();
@@ -40860,7 +40869,7 @@ var WfoErrorWithMessage = ({ error }) => {
   const t = useTranslations27("common");
   const { theme } = useOrchestratorTheme();
   const message = error && error.length > 0 ? error.map((err) => err.message).join(", ") : t("unknownError");
-  return /* @__PURE__ */ jsx112(Fragment21, { children: /* @__PURE__ */ jsxs61(EuiFlexGroup9, { direction: "row", alignItems: "center", gutterSize: "s", children: [
+  return /* @__PURE__ */ jsx112(Fragment22, { children: /* @__PURE__ */ jsxs61(EuiFlexGroup9, { direction: "row", alignItems: "center", gutterSize: "s", children: [
     /* @__PURE__ */ jsx112(WfoXCircleFill, { color: theme.colors.danger }),
     /* @__PURE__ */ jsxs61(EuiText7, { color: theme.colors.dangerText, children: [
       t("errorMessage"),
@@ -40905,7 +40914,7 @@ var subscriptionDetailTabs = [
 ];
 
 // src/components/WfoSubscription/WfoSubscription.tsx
-import { Fragment as Fragment22, jsx as jsx114, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx114, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var WfoSubscription = ({ subscriptionId }) => {
   const [activeTab, setActiveTab] = useQueryParam(
     "activeTab",
@@ -40924,7 +40933,7 @@ var WfoSubscription = ({ subscriptionId }) => {
     setActiveTab(tab);
   };
   const subscriptionDetail = data?.subscription;
-  return /* @__PURE__ */ jsx114(Fragment22, { children: isError2 && /* @__PURE__ */ jsx114(WfoError, {}) || isLoading && /* @__PURE__ */ jsx114(WfoLoading, {}) || subscriptionDetail && subscriptionDetail.subscriptionId && /* @__PURE__ */ jsxs62(Fragment22, { children: [
+  return /* @__PURE__ */ jsx114(Fragment23, { children: isError2 && /* @__PURE__ */ jsx114(WfoError, {}) || isLoading && /* @__PURE__ */ jsx114(WfoLoading, {}) || subscriptionDetail && subscriptionDetail.subscriptionId && /* @__PURE__ */ jsxs62(Fragment23, { children: [
     /* @__PURE__ */ jsx114(
       WfoContentHeader,
       {
@@ -40934,7 +40943,7 @@ var WfoSubscription = ({ subscriptionId }) => {
             title: subscriptionDetail.description
           }
         ),
-        subtitle: /* @__PURE__ */ jsxs62(Fragment22, { children: [
+        subtitle: /* @__PURE__ */ jsxs62(Fragment23, { children: [
           /* @__PURE__ */ jsx114(
             WfoSubscriptionStatusBadge,
             {
@@ -41132,7 +41141,7 @@ var WfoSubscriptionActionExpandableMenuItem = ({ subscriptionAction, onClickLock
 };
 
 // src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx
-import { Fragment as Fragment23, jsx as jsx116, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx116, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var MenuBlock = ({ title }) => /* @__PURE__ */ jsx116(EuiTitle, { size: "xxxs", children: /* @__PURE__ */ jsx116("h3", { children: title }) });
 var WfoSubscriptionActions = ({
   subscriptionId,
@@ -41233,7 +41242,7 @@ var WfoSubscriptionActions = ({
       children: /* @__PURE__ */ jsx116(EuiContextMenuPanel, { children: /* @__PURE__ */ jsxs64(EuiPanel, { color: "transparent", paddingSize: "s", children: [
         subscriptionActions && isAllowed(
           "/orchestrator/subscriptions/modify/" /* SUBSCRIPTION_MODIFY */ + subscriptionId
-        ) && subscriptionActions.modify && /* @__PURE__ */ jsxs64(Fragment23, { children: [
+        ) && subscriptionActions.modify && /* @__PURE__ */ jsxs64(Fragment24, { children: [
           /* @__PURE__ */ jsx116(MenuBlock, { title: t("modify") }),
           subscriptionActions.modify.map(
             (action, index) => /* @__PURE__ */ jsx116(
@@ -41249,7 +41258,7 @@ var WfoSubscriptionActions = ({
         ] }),
         subscriptionActions && isAllowed(
           "/orchestrator/subscriptions/validate/" /* SUBSCRIPTION_VALIDATE */ + subscriptionId
-        ) && subscriptionActions.system && /* @__PURE__ */ jsxs64(Fragment23, { children: [
+        ) && subscriptionActions.system && /* @__PURE__ */ jsxs64(Fragment24, { children: [
           /* @__PURE__ */ jsx116(MenuBlock, { title: t("tasks") }),
           subscriptionActions.system.map(
             (action, index) => /* @__PURE__ */ jsx116(
@@ -41266,7 +41275,7 @@ var WfoSubscriptionActions = ({
         ] }),
         subscriptionActions && isAllowed(
           "/orchestrator/subscriptions/terminate/" /* SUBSCRIPTION_TERMINATE */ + subscriptionId
-        ) && subscriptionActions.terminate && /* @__PURE__ */ jsxs64(Fragment23, { children: [
+        ) && subscriptionActions.terminate && /* @__PURE__ */ jsxs64(Fragment24, { children: [
           /* @__PURE__ */ jsx116(MenuBlock, { title: t("terminate") }),
           subscriptionActions.terminate.map(
             (action, index) => /* @__PURE__ */ jsx116(
@@ -41302,7 +41311,7 @@ import {
 // src/components/WfoSubscription/WfoInUseByRelations.tsx
 import { useTranslations as useTranslations30 } from "next-intl";
 import Link8 from "next/link";
-import { Fragment as Fragment24, jsx as jsx117 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx117 } from "@emotion/react/jsx-runtime";
 var WfoInUseByRelations = ({
   inUseByRelations
 }) => {
@@ -41352,7 +41361,7 @@ var WfoInUseByRelations = ({
       }
     ];
   };
-  return /* @__PURE__ */ jsx117(Fragment24, { children: data?.inUseByRelationDetails.map((relation, index) => {
+  return /* @__PURE__ */ jsx117(Fragment25, { children: data?.inUseByRelationDetails.map((relation, index) => {
     const keyValues = getKeyValues(relation);
     return /* @__PURE__ */ jsx117("div", { css: inUseByRelationDetailsStyle, children: /* @__PURE__ */ jsx117(
       WfoKeyValueTable,
@@ -41433,7 +41442,7 @@ var getStyles6 = (wfoTheme) => {
 };
 
 // src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx
-import { Fragment as Fragment25, jsx as jsx118, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx118, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var HIDDEN_KEYS = ["title", "name", "label", "inUseByIds"];
 var WfoSubscriptionProductBlock = ({
   productBlock,
@@ -41461,7 +41470,7 @@ var WfoSubscriptionProductBlock = ({
   const isEmpty2 = (value) => {
     return value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
   };
-  return /* @__PURE__ */ jsxs65(Fragment25, { children: [
+  return /* @__PURE__ */ jsxs65(Fragment26, { children: [
     /* @__PURE__ */ jsx118(EuiSpacer13, { size: "m" }),
     /* @__PURE__ */ jsxs65(
       EuiPanel2,
@@ -41504,7 +41513,7 @@ var WfoSubscriptionProductBlock = ({
               /* @__PURE__ */ jsx118("td", { children: /* @__PURE__ */ jsx118(
                 WfoValueCell,
                 {
-                  value: /* @__PURE__ */ jsxs65(Fragment25, { children: [
+                  value: /* @__PURE__ */ jsxs65(Fragment26, { children: [
                     /* @__PURE__ */ jsx118(
                       "a",
                       {
@@ -41530,14 +41539,14 @@ var WfoSubscriptionProductBlock = ({
                 }
               ) })
             ] }, -1),
-            showDetails && /* @__PURE__ */ jsxs65(Fragment25, { children: [
+            showDetails && /* @__PURE__ */ jsxs65(Fragment26, { children: [
               /* @__PURE__ */ jsxs65("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx118("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx118("b", { children: t("subscriptionInstanceId") }) }),
                 /* @__PURE__ */ jsx118("td", { children: productBlock.subscriptionInstanceId })
               ] }, -2),
               !isOutsideCurrentSubscription && /* @__PURE__ */ jsxs65("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx118("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx118("b", { children: t("ownerSubscriptionId") }) }),
-                /* @__PURE__ */ jsx118("td", { children: /* @__PURE__ */ jsx118(Fragment25, { children: /* @__PURE__ */ jsx118(EuiBadge2, { children: t("self") }) }) })
+                /* @__PURE__ */ jsx118("td", { children: /* @__PURE__ */ jsx118(Fragment26, { children: /* @__PURE__ */ jsx118(EuiBadge2, { children: t("self") }) }) })
               ] }, -3),
               /* @__PURE__ */ jsxs65("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx118("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx118("b", { children: t("inUseByRelations") }) }),
@@ -41585,7 +41594,7 @@ var WfoSubscriptionProductBlock = ({
 
 // src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx
 import { EuiBadge as EuiBadge3 } from "@elastic/eui";
-import { Fragment as Fragment26, jsx as jsx119, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx119, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var WfoProductBlockKeyValueRow = ({ fieldValue }) => {
   const { leftColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles6);
   const { getOverriddenValue } = useSubscriptionDetailValueOverride();
@@ -41595,9 +41604,9 @@ var WfoProductBlockKeyValueRow = ({ fieldValue }) => {
       return /* @__PURE__ */ jsx119(EuiBadge3, { children: value2.toString() });
     } else if (Array.isArray(value2)) {
       const result = value2.join(", ");
-      return /* @__PURE__ */ jsx119(Fragment26, { children: result });
+      return /* @__PURE__ */ jsx119(Fragment27, { children: result });
     } else {
-      return /* @__PURE__ */ jsx119(Fragment26, { children: value2 });
+      return /* @__PURE__ */ jsx119(Fragment27, { children: value2 });
     }
   };
   return /* @__PURE__ */ jsxs66("tr", { css: rowStyle, children: [
@@ -41784,7 +41793,7 @@ var WfoTreeNode = ({
 };
 
 // src/components/WfoTree/WfoTreeBranch.tsx
-import { Fragment as Fragment27, jsx as jsx123, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx123, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var WfoTreeBranch = ({ item, level }) => {
   const { expandedIds } = React32.useContext(TreeContext);
   const selected = expandedIds.includes(item.id);
@@ -41799,7 +41808,7 @@ var WfoTreeBranch = ({ item, level }) => {
     }
     return null;
   };
-  return /* @__PURE__ */ jsxs70(Fragment27, { children: [
+  return /* @__PURE__ */ jsxs70(Fragment28, { children: [
     /* @__PURE__ */ jsx123(
       EuiListGroup,
       {
@@ -42607,7 +42616,7 @@ var WfoRowContextMenu = ({
 };
 
 // src/components/WfoTable/WfoAdvancedTable/getRowDetailData.tsx
-import { Fragment as Fragment28, jsx as jsx136 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx136 } from "@emotion/react/jsx-runtime";
 var getRowDetailData = (selectedDataForDetailModal, tableColumnConfig) => {
   const tableColumnConfigEntries = Object.entries(tableColumnConfig);
   const dataColumnEntries = tableColumnConfigEntries.filter(
@@ -42625,7 +42634,7 @@ var getRowDetailData = (selectedDataForDetailModal, tableColumnConfig) => {
     const dataValue = selectedDataForDetailModal[dataField];
     return {
       key: label ?? dataField.toString(),
-      value: (renderDetails && renderDetails(dataValue, selectedDataForDetailModal)) ?? (renderData && renderData(dataValue, selectedDataForDetailModal)) ?? /* @__PURE__ */ jsx136(Fragment28, { children: dataValue }),
+      value: (renderDetails && renderDetails(dataValue, selectedDataForDetailModal)) ?? (renderData && renderData(dataValue, selectedDataForDetailModal)) ?? /* @__PURE__ */ jsx136(Fragment29, { children: dataValue }),
       textToCopy: clipboardText?.(dataValue, selectedDataForDetailModal) ?? (typeof dataValue === "string" ? dataValue : void 0)
     };
   });
@@ -42650,7 +42659,7 @@ import {
   EuiSpacer as EuiSpacer15,
   EuiText as EuiText12
 } from "@elastic/eui";
-import { Fragment as Fragment29, jsx as jsx137, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx137, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var WfoAdvancedTable = ({
   tableColumnConfig,
   defaultHiddenColumns = [],
@@ -42734,7 +42743,7 @@ var WfoAdvancedTable = ({
     span: (chunks) => /* @__PURE__ */ jsx137("span", { children: chunks }),
     b: (chunks) => /* @__PURE__ */ jsx137("b", { children: chunks })
   });
-  return /* @__PURE__ */ jsxs76(Fragment29, { children: [
+  return /* @__PURE__ */ jsxs76(Fragment30, { children: [
     /* @__PURE__ */ jsxs76(EuiFlexGroup15, { alignItems: "center", children: [
       /* @__PURE__ */ jsx137(EuiFlexItem12, { children: /* @__PURE__ */ jsx137(
         WfoSearchField,
@@ -43696,7 +43705,7 @@ var listFieldStyling = css25`
 `;
 
 // src/components/WfoForms/formFields/ListField.tsx
-import { Fragment as Fragment30, jsx as jsx151, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx151, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
 filterDOMProps8.register("minCount");
 filterDOMProps8.register("maxCount");
 filterDOMProps8.register("items");
@@ -43735,7 +43744,7 @@ function List({
             isInvalid: error,
             id: `formrow-${name}`,
             fullWidth: true,
-            children: /* @__PURE__ */ jsx151(Fragment30, {})
+            children: /* @__PURE__ */ jsx151(Fragment31, {})
           }
         ),
         /* @__PURE__ */ jsxs82("ul", { children: [
@@ -44100,7 +44109,7 @@ var NumField = connectField11(Num, { kind: "leaf" });
 import { omit } from "lodash";
 import { connectField as connectField12, filterDOMProps as filterDOMProps11 } from "uniforms";
 import { EuiFormRow as EuiFormRow8, EuiRadio, EuiText as EuiText21 } from "@elastic/eui";
-import { Fragment as Fragment31, jsx as jsx156 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx156 } from "@emotion/react/jsx-runtime";
 var base64 = typeof btoa !== "undefined" ? btoa : (x) => Buffer.from(x).toString("base64");
 var escape = (x) => base64(encodeURIComponent(x)).replace(/=+$/, "");
 function Radio({
@@ -44128,7 +44137,7 @@ function Radio({
       isInvalid: error,
       id,
       fullWidth: true,
-      children: /* @__PURE__ */ jsx156(Fragment31, { children: allowedValues?.map((item) => /* @__PURE__ */ jsx156(
+      children: /* @__PURE__ */ jsx156(Fragment32, { children: allowedValues?.map((item) => /* @__PURE__ */ jsx156(
         EuiRadio,
         {
           id: `${id}-${escape(item)}`,
@@ -44467,27 +44476,7 @@ import scrollIntoView from "scroll-into-view";
 import { EuiFlexItem as EuiFlexItem16 } from "@elastic/eui";
 
 // src/components/WfoForms/formFields/utils.ts
-import { isDate as isDate2 } from "moment";
-
-// src/components/WfoForms/formFields/deprecated/types.ts
-var PortMode = /* @__PURE__ */ ((PortMode2) => {
-  PortMode2["TAGGED"] = "tagged";
-  PortMode2["UNTAGGED"] = "untagged";
-  PortMode2["LINK_MEMBER"] = "link_member";
-  return PortMode2;
-})(PortMode || {});
-var ProductTag = /* @__PURE__ */ ((ProductTag2) => {
-  ProductTag2["MSC"] = "MSC";
-  ProductTag2["MSCNL"] = "MSCNL";
-  ProductTag2["IRBSP"] = "IRBSP";
-  ProductTag2["SP"] = "SP";
-  ProductTag2["SPNL"] = "SPNL";
-  ProductTag2["AGGSP"] = "AGGSP";
-  ProductTag2["AGGSPNL"] = "AGGSPNL";
-  return ProductTag2;
-})(ProductTag || {});
-
-// src/components/WfoForms/formFields/utils.ts
+import { isDate as isDate2 } from "moment/moment";
 var getPortMode = (productBlockInstances) => {
   return productBlockInstances?.reduce(
     (portMode, productBlockInstance) => {
@@ -44630,7 +44619,7 @@ import {
   useForm as useForm6
 } from "uniforms";
 import { EuiFieldText as EuiFieldText2, EuiFormRow as EuiFormRow11, EuiText as EuiText24 } from "@elastic/eui";
-import { Fragment as Fragment32, jsx as jsx163, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx163, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 function stop(e) {
   if (e !== void 0 && e !== null) {
     e.preventDefault();
@@ -44763,7 +44752,7 @@ function ContactPersonName({
       id,
       fullWidth: true,
       css: formRowStyle,
-      children: /* @__PURE__ */ jsxs85(Fragment32, { children: [
+      children: /* @__PURE__ */ jsxs85(Fragment33, { children: [
         /* @__PURE__ */ jsx163(
           EuiFieldText2,
           {
@@ -45618,6 +45607,24 @@ function Vlan({
 }
 var VlanField = connectField22(Vlan, { kind: "leaf" });
 
+// src/components/WfoForms/formFields/deprecated/types.ts
+var PortMode = /* @__PURE__ */ ((PortMode2) => {
+  PortMode2["TAGGED"] = "tagged";
+  PortMode2["UNTAGGED"] = "untagged";
+  PortMode2["LINK_MEMBER"] = "link_member";
+  return PortMode2;
+})(PortMode || {});
+var ProductTag = /* @__PURE__ */ ((ProductTag2) => {
+  ProductTag2["MSC"] = "MSC";
+  ProductTag2["MSCNL"] = "MSCNL";
+  ProductTag2["IRBSP"] = "IRBSP";
+  ProductTag2["SP"] = "SP";
+  ProductTag2["SPNL"] = "SPNL";
+  ProductTag2["AGGSP"] = "AGGSP";
+  ProductTag2["AGGSPNL"] = "AGGSPNL";
+  return ProductTag2;
+})(ProductTag || {});
+
 // src/components/WfoForms/formFields/deprecated/utils.ts
 var ipamStates = ["Free", "Allocated", null, "Planned", null, null];
 
@@ -45630,7 +45637,7 @@ import {
   EuiFlexItem as EuiFlexItem19,
   EuiText as EuiText29
 } from "@elastic/eui";
-import { Fragment as Fragment33, jsx as jsx170, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx170, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 filterDOMProps23.register("properties", "wrap");
 function Nest({
   children,
@@ -45653,7 +45660,7 @@ function Nest({
         ...filterDOMProps23(props),
         className: `${className} nest-field`,
         children: [
-          label && /* @__PURE__ */ jsxs88(Fragment33, { children: [
+          label && /* @__PURE__ */ jsxs88(Fragment34, { children: [
             /* @__PURE__ */ jsx170("label", { className: "euiFormLabel euiFormRow__label", children: label }),
             /* @__PURE__ */ jsx170(EuiText29, { size: "m", children: description })
           ] }),
@@ -45696,7 +45703,7 @@ import { useTranslations as useTranslations45 } from "next-intl";
 import { connectField as connectField24, filterDOMProps as filterDOMProps24, useField as useField7 } from "uniforms";
 import { AutoField as AutoField4 } from "uniforms-unstyled";
 import { EuiDescribedFormGroup as EuiDescribedFormGroup2, EuiFlexItem as EuiFlexItem20, EuiFormRow as EuiFormRow16 } from "@elastic/eui";
-import { Fragment as Fragment34, jsx as jsx171, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx171, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
 filterDOMProps24.register("properties");
 function OptGroup({
   fields,
@@ -45715,7 +45722,7 @@ function OptGroup({
       title: /* @__PURE__ */ jsx171("span", { children: t(`${name}.title`) }),
       description: t(`${name}.description`),
       className: `${className} optgroup-field`,
-      children: /* @__PURE__ */ jsxs89(Fragment34, { children: [
+      children: /* @__PURE__ */ jsxs89(Fragment35, { children: [
         /* @__PURE__ */ jsx171(EuiFlexItem20, { children: /* @__PURE__ */ jsx171(
           EuiFormRow16,
           {
@@ -46315,7 +46322,7 @@ var userInputFormStyling = css32`
 `;
 
 // src/components/WfoForms/UserInputForm.tsx
-import { Fragment as Fragment35, jsx as jsx176, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx176, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 filterDOMProps27.register("description");
 filterDOMProps27.register("const");
 filterDOMProps27.register("default");
@@ -46711,7 +46718,7 @@ function WfoUserInputForm({
         children: buttons2.next.text ?? t(nextButtonTranslationKey)
       }
     );
-    return /* @__PURE__ */ jsxs92(Fragment35, { children: [
+    return /* @__PURE__ */ jsxs92(Fragment36, { children: [
       /* @__PURE__ */ jsx176(EuiHorizontalRule4, {}),
       /* @__PURE__ */ jsxs92(EuiFlexGroup18, { justifyContent: "spaceBetween", children: [
         prevButton,
@@ -46896,13 +46903,13 @@ var WfoPageUnauthorized = () => {
 };
 
 // src/components/WfoAuth/WfoPolicyRenderPageFallback.tsx
-import { Fragment as Fragment36, jsx as jsx181 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx181 } from "@emotion/react/jsx-runtime";
 var WfoPolicyRenderPageFallback = ({
   resource,
   children
 }) => {
   const { isAllowed } = usePolicy();
-  return isAllowed(resource) ? /* @__PURE__ */ jsx181(Fragment36, { children }) : /* @__PURE__ */ jsx181(WfoPageUnauthorized, {});
+  return isAllowed(resource) ? /* @__PURE__ */ jsx181(Fragment37, { children }) : /* @__PURE__ */ jsx181(WfoPageUnauthorized, {});
 };
 
 // src/components/WfoAuth/WfoAuth.tsx
@@ -46997,7 +47004,7 @@ import { EuiBadgeGroup as EuiBadgeGroup2 } from "@elastic/eui";
 import { useTranslations as useTranslations50 } from "next-intl";
 import { useRouter as useRouter7 } from "next/router";
 import { EuiSpacer as EuiSpacer16, EuiTab as EuiTab2, EuiTabs as EuiTabs2 } from "@elastic/eui";
-import { Fragment as Fragment37, jsx as jsx184, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment38, jsx as jsx184, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
 var metaDataTabs = [
   {
     id: 1,
@@ -47032,7 +47039,7 @@ var WfoMetadataPageLayout = ({
   const router = useRouter7();
   const t = useTranslations50("metadata");
   const currentPath = router.pathname;
-  return /* @__PURE__ */ jsxs93(Fragment37, { children: [
+  return /* @__PURE__ */ jsxs93(Fragment38, { children: [
     /* @__PURE__ */ jsx184(WfoContentHeader, { title: t("title") }),
     /* @__PURE__ */ jsx184(EuiTabs2, { children: tabs.map(({ id, translationKey: name, path }) => /* @__PURE__ */ jsx184(
       EuiTab2,
@@ -47049,7 +47056,7 @@ var WfoMetadataPageLayout = ({
 };
 
 // src/pages/metadata/WfoProductBlocksPage.tsx
-import { Fragment as Fragment38, jsx as jsx185, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx185, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
 var PRODUCT_BLOCK_FIELD_NAME = "name";
 var WfoProductBlocksPage = () => {
   const t = useTranslations51("metadata.productBlocks");
@@ -47110,7 +47117,7 @@ var WfoProductBlocksPage = () => {
     dependsOn: {
       columnType: "data" /* DATA */,
       label: t("dependingProductBlocks"),
-      renderData: (dependsOn) => /* @__PURE__ */ jsx185(Fragment38, { children: dependsOn.map(({ name }, index) => /* @__PURE__ */ jsx185(
+      renderData: (dependsOn) => /* @__PURE__ */ jsx185(Fragment39, { children: dependsOn.map(({ name }, index) => /* @__PURE__ */ jsx185(
         WfoProductBlockBadge,
         {
           link: getQueryUrl(
@@ -47133,7 +47140,7 @@ var WfoProductBlocksPage = () => {
       columnType: "data" /* DATA */,
       label: t("resourceTypes"),
       width: "700px",
-      renderData: (resourceTypes) => /* @__PURE__ */ jsx185(Fragment38, { children: resourceTypes.map(({ resourceType }, index) => /* @__PURE__ */ jsx185(
+      renderData: (resourceTypes) => /* @__PURE__ */ jsx185(Fragment39, { children: resourceTypes.map(({ resourceType }, index) => /* @__PURE__ */ jsx185(
         WfoProductBlockBadge,
         {
           link: getQueryUrl(
@@ -47259,7 +47266,7 @@ var WfoProductBlocksPage = () => {
 import { useEffect as useEffect22, useState as useState36 } from "react";
 import { useTranslations as useTranslations52 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup3 } from "@elastic/eui";
-import { Fragment as Fragment39, jsx as jsx186, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx186, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
 var RESOURCE_TYPE_FIELD_TYPE = "resourceType";
 var WfoResourceTypesPage = () => {
   const t = useTranslations52("metadata.resourceTypes");
@@ -47310,7 +47317,7 @@ var WfoResourceTypesPage = () => {
       columnType: "data" /* DATA */,
       label: t("usedInProductBlocks"),
       width: "1000px",
-      renderData: (productBlocks) => /* @__PURE__ */ jsx186(Fragment39, { children: productBlocks.map(({ name }, index) => /* @__PURE__ */ jsx186(
+      renderData: (productBlocks) => /* @__PURE__ */ jsx186(Fragment40, { children: productBlocks.map(({ name }, index) => /* @__PURE__ */ jsx186(
         WfoProductBlockBadge,
         {
           link: getQueryUrl(
@@ -47418,7 +47425,7 @@ var WfoResourceTypesPage = () => {
 // src/pages/metadata/WfoProductsPage.tsx
 import { useEffect as useEffect23, useState as useState37 } from "react";
 import { useTranslations as useTranslations53 } from "next-intl";
-import { Fragment as Fragment40, jsx as jsx187, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx187, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
 var PRODUCT_FIELD_NAME = "name";
 var WfoProductsPage = () => {
   const t = useTranslations53("metadata.products");
@@ -47487,7 +47494,7 @@ var WfoProductsPage = () => {
       columnType: "data" /* DATA */,
       label: t("fixedInputs"),
       width: "400px",
-      renderData: (fixedInputs) => /* @__PURE__ */ jsx187(Fragment40, { children: fixedInputs.map((fixedInput, index) => /* @__PURE__ */ jsx187(
+      renderData: (fixedInputs) => /* @__PURE__ */ jsx187(Fragment41, { children: fixedInputs.map((fixedInput, index) => /* @__PURE__ */ jsx187(
         WfoProductBlockBadge,
         {
           badgeType: "fixed_input" /* FIXED_INPUT */,
@@ -47506,7 +47513,7 @@ var WfoProductsPage = () => {
       columnType: "data" /* DATA */,
       label: t("productBlocks"),
       width: "250px",
-      renderData: (productBlocks) => /* @__PURE__ */ jsx187(Fragment40, { children: productBlocks.map(({ name }, index) => /* @__PURE__ */ jsx187(
+      renderData: (productBlocks) => /* @__PURE__ */ jsx187(Fragment41, { children: productBlocks.map(({ name }, index) => /* @__PURE__ */ jsx187(
         WfoProductBlockBadge,
         {
           link: getQueryUrl(
@@ -47657,7 +47664,7 @@ var graphQlWorkflowListMapper = ({
 });
 
 // src/pages/metadata/WfoWorkflowsPage.tsx
-import { Fragment as Fragment41, jsx as jsx188, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx188, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
 var WfoWorkflowsPage = () => {
   const t = useTranslations54("metadata.workflows");
   const tError = useTranslations54("errors");
@@ -47705,7 +47712,7 @@ var WfoWorkflowsPage = () => {
       columnType: "data" /* DATA */,
       label: t("productTags"),
       width: "300px",
-      renderData: (productTags) => /* @__PURE__ */ jsx188(Fragment41, { children: productTags?.filter(onlyUnique).map((productTag, index) => /* @__PURE__ */ jsx188(
+      renderData: (productTags) => /* @__PURE__ */ jsx188(Fragment42, { children: productTags?.filter(onlyUnique).map((productTag, index) => /* @__PURE__ */ jsx188(
         WfoProductBlockBadge,
         {
           link: getQueryUrl(
@@ -47857,7 +47864,7 @@ var graphQlTaskListMapper = ({
 });
 
 // src/pages/metadata/WfoTasksPage.tsx
-import { Fragment as Fragment42, jsx as jsx189, jsxs as jsxs98 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx189, jsxs as jsxs98 } from "@emotion/react/jsx-runtime";
 var WfoTasksPage = () => {
   const t = useTranslations55("metadata.tasks");
   const tError = useTranslations55("errors");
@@ -47905,7 +47912,7 @@ var WfoTasksPage = () => {
       columnType: "data" /* DATA */,
       label: t("productTags"),
       width: "250px",
-      renderData: (productTags) => /* @__PURE__ */ jsx189(Fragment42, { children: productTags?.filter(onlyUnique).map((productTag, index) => /* @__PURE__ */ jsx189(
+      renderData: (productTags) => /* @__PURE__ */ jsx189(Fragment43, { children: productTags?.filter(onlyUnique).map((productTag, index) => /* @__PURE__ */ jsx189(
         WfoProductBlockBadge,
         {
           link: getQueryUrl(
@@ -48027,7 +48034,7 @@ var WfoTasksPage = () => {
 // src/pages/processes/WfoProcessListSubscriptionsCell.tsx
 import Link9 from "next/link";
 import { EuiFlexGroup as EuiFlexGroup19 } from "@elastic/eui";
-import { Fragment as Fragment43, jsx as jsx190, jsxs as jsxs99 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx190, jsxs as jsxs99 } from "@emotion/react/jsx-runtime";
 var RENDER_ALL = "RENDER_ALL";
 var RenderDirection = /* @__PURE__ */ ((RenderDirection2) => {
   RenderDirection2["HORIZONTAL"] = "HORIZONTAL";
@@ -48045,7 +48052,7 @@ var WfoProcessListSubscriptionsCell = ({
   }
   const visibleSubscriptions = numberOfSubscriptionsToRender === RENDER_ALL ? subscriptions : subscriptions.slice(0, numberOfSubscriptionsToRender);
   const numberOfNotVisibleSubscriptions = length - visibleSubscriptions.length;
-  return /* @__PURE__ */ jsx190(Fragment43, { children: /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsx190(Fragment44, { children: /* @__PURE__ */ jsxs99(
     EuiFlexGroup19,
     {
       direction: renderDirection === "HORIZONTAL" /* HORIZONTAL */ ? "row" : "column",
@@ -48158,7 +48165,7 @@ var getIndexOfCurrentStep = (timelineItems) => {
 };
 
 // src/pages/processes/WfoProcessDetail.tsx
-import { Fragment as Fragment44, jsx as jsx191, jsxs as jsxs100 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx191, jsxs as jsxs100 } from "@emotion/react/jsx-runtime";
 var ProcessHeaderValue = ({
   translationKey,
   value = ""
@@ -48272,7 +48279,7 @@ var WfoProcessDetail = ({
       router.push(PATH_TASKS);
     }
   });
-  return /* @__PURE__ */ jsxs100(Fragment44, { children: [
+  return /* @__PURE__ */ jsxs100(Fragment45, { children: [
     /* @__PURE__ */ jsxs100(
       WfoContentHeader,
       {
@@ -48314,7 +48321,7 @@ var WfoProcessDetail = ({
               children: t("abort")
             }
           ) }),
-          /* @__PURE__ */ jsx191(Fragment44, { children: processDetail && processIsTask && /* @__PURE__ */ jsx191(
+          /* @__PURE__ */ jsx191(Fragment45, { children: processDetail && processIsTask && /* @__PURE__ */ jsx191(
             WfoIsAllowedToRender,
             {
               resource: "/orchestrator/processes/delete/" /* PROCESS_DELETE */,
@@ -48795,7 +48802,7 @@ var WfoStepForm = ({
 };
 
 // src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
-import { Fragment as Fragment45, jsx as jsx195, jsxs as jsxs102 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx195, jsxs as jsxs102 } from "@emotion/react/jsx-runtime";
 var WfoStep = React62.forwardRef(
   ({
     stepListItem,
@@ -48879,7 +48886,7 @@ var WfoStep = React62.forwardRef(
                 step.executed && `- ${formatDate(step.executed)}`
               ] })
             ] }),
-            /* @__PURE__ */ jsx195(EuiFlexGroup21, { css: stepRowStyle, children: step.executed && /* @__PURE__ */ jsxs102(Fragment45, { children: [
+            /* @__PURE__ */ jsx195(EuiFlexGroup21, { css: stepRowStyle, children: step.executed && /* @__PURE__ */ jsxs102(Fragment46, { children: [
               isExpanded && /* @__PURE__ */ jsx195(
                 EuiButton11,
                 {
@@ -48950,7 +48957,7 @@ WfoStep.displayName = "WfoStep";
 
 // src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx
 import React63, { useImperativeHandle as useImperativeHandle2, useRef as useRef10 } from "react";
-import { Fragment as Fragment46, jsx as jsx196, jsxs as jsxs103 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment47, jsx as jsx196, jsxs as jsxs103 } from "@emotion/react/jsx-runtime";
 var WfoStepList = React63.forwardRef(
   ({
     stepListItems,
@@ -48996,7 +49003,7 @@ var WfoStepList = React63.forwardRef(
         stepReferences.current.delete(stepId);
       }
     };
-    return /* @__PURE__ */ jsx196(Fragment46, { children: stepListItems.map((stepListItem, index) => {
+    return /* @__PURE__ */ jsx196(Fragment47, { children: stepListItems.map((stepListItem, index) => {
       const stepComponent = /* @__PURE__ */ jsxs103("div", { children: [
         index !== 0 && /* @__PURE__ */ jsx196("div", { css: stepSpacerStyle }),
         /* @__PURE__ */ jsx196(
@@ -49179,18 +49186,18 @@ var getStyles15 = ({ theme }) => {
 };
 
 // src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
-import { Fragment as Fragment47, jsx as jsx198, jsxs as jsxs105 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment48, jsx as jsx198, jsxs as jsxs105 } from "@emotion/react/jsx-runtime";
 var WfoTraceback = ({ children }) => {
   const { codeBlockStyle } = useWithOrchestratorTheme(getStyles15);
   const t = useTranslations59("processes.steps");
-  return /* @__PURE__ */ jsxs105(Fragment47, { children: [
+  return /* @__PURE__ */ jsxs105(Fragment48, { children: [
     /* @__PURE__ */ jsx198(EuiText35, { children: /* @__PURE__ */ jsx198("h3", { children: t("traceback") }) }),
     /* @__PURE__ */ jsx198(EuiCodeBlock, { css: codeBlockStyle, children })
   ] });
 };
 
 // src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
-import { Fragment as Fragment48, jsx as jsx199, jsxs as jsxs106 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment49, jsx as jsx199, jsxs as jsxs106 } from "@emotion/react/jsx-runtime";
 var WfoProcessRawData = ({ processId }) => {
   const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
   return isFetching ? /* @__PURE__ */ jsx199(WfoLoading, {}) : /* @__PURE__ */ jsx199(WfoJsonCodeBlock, { data: data || {} });
@@ -49285,7 +49292,7 @@ var WfoWorkflowStepList = React65.forwardRef(
       "aborted" /* ABORTED */,
       "completed" /* COMPLETED */
     ].map((status) => status.toLowerCase()).includes(lastStatus.toLowerCase());
-    return /* @__PURE__ */ jsxs106(Fragment48, { children: [
+    return /* @__PURE__ */ jsxs106(Fragment49, { children: [
       /* @__PURE__ */ jsx199(
         WfoStepListHeader,
         {
@@ -49529,9 +49536,10 @@ var WfoStartProcessPage = ({
   const [startProcess] = useStartProcessMutation();
   const startProcessPayload = useMemo5(
     () => getInitialProcessPayload({
-      productId
+      productId,
+      subscriptionId
     }),
-    [productId]
+    [productId, subscriptionId]
   );
   const { stepUserInput, hasNext } = form;
   const { getStepHeaderStyle, stepListContentBoldTextStyle } = useWithOrchestratorTheme(getStyles14);
@@ -49685,11 +49693,11 @@ var WfoProductInformationWithLink = ({
 // src/pages/settings/WfoSettingsPage.tsx
 import { useTranslations as useTranslations64 } from "next-intl";
 import { EuiHorizontalRule as EuiHorizontalRule6, EuiSpacer as EuiSpacer19 } from "@elastic/eui";
-import { Fragment as Fragment49, jsx as jsx204, jsxs as jsxs110 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment50, jsx as jsx204, jsxs as jsxs110 } from "@emotion/react/jsx-runtime";
 var WfoSettingsPage = () => {
   const { theme } = useOrchestratorTheme();
   const t = useTranslations64("main");
-  return /* @__PURE__ */ jsxs110(Fragment49, { children: [
+  return /* @__PURE__ */ jsxs110(Fragment50, { children: [
     /* @__PURE__ */ jsx204(
       WfoContentHeader,
       {
@@ -49724,7 +49732,7 @@ var useStartPageSummaryCardConfigurationOverride = () => {
 };
 
 // src/pages/startPage/WfoStartPage.tsx
-import { Fragment as Fragment50, jsx as jsx205, jsxs as jsxs111 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx205, jsxs as jsxs111 } from "@emotion/react/jsx-runtime";
 var WfoStartPage = () => {
   const t = useTranslations65("main");
   const { overrideSummaryCards } = useStartPageSummaryCardConfigurationOverride();
@@ -49746,7 +49754,7 @@ var WfoStartPage = () => {
     /* @__PURE__ */ jsx205(WfoProductsSummaryCard, {}, "products")
   ];
   const summaryCards = overrideSummaryCards?.(defaultSummaryCards) || defaultSummaryCards;
-  return /* @__PURE__ */ jsxs111(Fragment50, { children: [
+  return /* @__PURE__ */ jsxs111(Fragment51, { children: [
     /* @__PURE__ */ jsx205(
       WfoContentHeader,
       {
@@ -49771,11 +49779,11 @@ var mapSubscriptionSummaryToSummaryCardListItem = (subscription) => ({
 
 // src/pages/subscriptions/WfoSubscriptionDetailPage.tsx
 import { useRouter as useRouter10 } from "next/router";
-import { Fragment as Fragment51, jsx as jsx206 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx206 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionDetailPage = () => {
   const router = useRouter10();
   const { subscriptionId } = router.query;
-  return subscriptionId && /* @__PURE__ */ jsx206(TreeProvider, { children: /* @__PURE__ */ jsx206(WfoSubscription, { subscriptionId }) }) || /* @__PURE__ */ jsx206(Fragment51, {});
+  return subscriptionId && /* @__PURE__ */ jsx206(TreeProvider, { children: /* @__PURE__ */ jsx206(WfoSubscription, { subscriptionId }) }) || /* @__PURE__ */ jsx206(Fragment52, {});
 };
 
 // src/pages/subscriptions/WfoSubscriptionsListPage.tsx
@@ -49783,7 +49791,7 @@ import { useEffect as useEffect29, useState as useState46 } from "react";
 import { useTranslations as useTranslations66 } from "next-intl";
 import { StringParam as StringParam3, useQueryParam as useQueryParam2, withDefault as withDefault3 } from "use-query-params";
 import { EuiSpacer as EuiSpacer20 } from "@elastic/eui";
-import { Fragment as Fragment52, jsx as jsx207, jsxs as jsxs112 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx207, jsxs as jsxs112 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionsListPage = () => {
   const t = useTranslations66("subscriptions.detail");
   const [tableDefaults, setTableDefaults] = useState46();
@@ -49821,7 +49829,7 @@ var WfoSubscriptionsListPage = () => {
   const alwaysOnFilters = subscriptionListTabs.find(
     ({ id }) => id === activeTab
   )?.alwaysOnFilters;
-  return /* @__PURE__ */ jsxs112(Fragment52, { children: [
+  return /* @__PURE__ */ jsxs112(Fragment53, { children: [
     /* @__PURE__ */ jsx207(
       WfoContentHeader,
       {
@@ -49921,7 +49929,7 @@ var getTasksListTabTypeFromString = (tabId) => {
 };
 
 // src/pages/tasks/WfoTasksListPage.tsx
-import { Fragment as Fragment53, jsx as jsx208, jsxs as jsxs113 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment54, jsx as jsx208, jsxs as jsxs113 } from "@emotion/react/jsx-runtime";
 var WfoTasksListPage = () => {
   const router = useRouter11();
   const t = useTranslations67("tasks.page");
@@ -49995,7 +50003,7 @@ var WfoTasksListPage = () => {
       "lastModifiedAt"
     ])
   });
-  return /* @__PURE__ */ jsxs113(Fragment53, { children: [
+  return /* @__PURE__ */ jsxs113(Fragment54, { children: [
     /* @__PURE__ */ jsxs113(
       WfoContentHeader,
       {
@@ -50107,7 +50115,7 @@ var getWorkflowsListTabTypeFromString = (tabId) => {
 };
 
 // src/pages/workflows/WfoWorkflowsListPage.tsx
-import { Fragment as Fragment54, jsx as jsx209, jsxs as jsxs114 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment55, jsx as jsx209, jsxs as jsxs114 } from "@emotion/react/jsx-runtime";
 var WfoWorkflowsListPage = () => {
   const router = useRouter12();
   const t = useTranslations68("workflows.index");
@@ -50145,7 +50153,7 @@ var WfoWorkflowsListPage = () => {
     router.replace(PATH_WORKFLOWS);
     return null;
   }
-  return /* @__PURE__ */ jsxs114(Fragment54, { children: [
+  return /* @__PURE__ */ jsxs114(Fragment55, { children: [
     /* @__PURE__ */ jsx209(
       WfoContentHeader,
       {
@@ -50790,7 +50798,7 @@ var WfoNoResults = ({ text, icon }) => {
 };
 
 // src/components/WfoRenderElementOrString/WfoRenderElementOrString.tsx
-import { Fragment as Fragment55, jsx as jsx219 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment56, jsx as jsx219 } from "@emotion/react/jsx-runtime";
 var WfoRenderElementOrString = ({
   children,
   renderString
@@ -50798,7 +50806,7 @@ var WfoRenderElementOrString = ({
   if (typeof children === "string" && renderString) {
     return renderString(children);
   }
-  return /* @__PURE__ */ jsx219(Fragment55, { children });
+  return /* @__PURE__ */ jsx219(Fragment56, { children });
 };
 
 // src/components/WfoStartButton/WfoStartTaskComboBox.tsx
@@ -50919,7 +50927,112 @@ var subscriptionListTabs = [
 import { useTranslations as useTranslations77 } from "next-intl";
 import Link12 from "next/link";
 import { useRouter as useRouter14 } from "next/router";
+
+// src/rtk/endpoints/subscriptionListMutation.ts
+var subscriptionListMutationApi = orchestratorApi.injectEndpoints({
+  endpoints: (builder) => ({
+    emptyQuery: builder.query({ query: () => ({}) }),
+    emptyDetailQuery: builder.query({ query: () => ({}) }),
+    updateSubscriptionNoteOptimistic: builder.mutation({
+      queryFn: async () => ({ data: { mockResponse: true } }),
+      async onQueryStarted({ queryName, subscriptionId, graphQlQueryVariables, ...patch }, { dispatch, queryFulfilled }) {
+        const patchResult = dispatch(
+          subscriptionListMutationApi.util.updateQueryData(
+            // @ts-expect-error - Suggest ts ignore because of the type mismatch between emptyQuery and queryName
+            queryName,
+            graphQlQueryVariables,
+            (draft) => {
+              const subscription = draft.subscriptions.find(
+                (item) => item.subscriptionId === subscriptionId
+              );
+              if (subscription) {
+                subscription.note = patch.note;
+              }
+            }
+          )
+        );
+        try {
+          await queryFulfilled;
+        } catch {
+          patchResult.undo();
+        }
+      }
+    }),
+    updateSubscriptionDetailNoteOptimistic: builder.mutation({
+      queryFn: async () => ({ data: { mockResponse: true } }),
+      async onQueryStarted({ queryName, subscriptionId, ...patch }, { dispatch, queryFulfilled }) {
+        const patchResult = dispatch(
+          subscriptionListMutationApi.util.updateQueryData(
+            // @ts-expect-error - Suggest ts ignore because of the type mismatch between emptyDetailQuery and queryName
+            queryName,
+            { subscriptionId },
+            (draft) => {
+              if (draft) {
+                draft.subscription.note = patch.note;
+              }
+            }
+          )
+        );
+        try {
+          await queryFulfilled;
+        } catch {
+          patchResult.undo();
+        }
+      }
+    })
+  })
+});
+var {
+  useUpdateSubscriptionNoteOptimisticMutation,
+  useUpdateSubscriptionDetailNoteOptimisticMutation
+} = subscriptionListMutationApi;
+
+// src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx
 import { jsx as jsx221 } from "@emotion/react/jsx-runtime";
+var WfoSubscriptionNoteEdit = ({
+  subscriptionId,
+  onlyShowOnHover = false,
+  queryVariables,
+  useQuery
+}) => {
+  const { selectedItem } = useQuery(queryVariables, {
+    selectFromResult: (result) => ({
+      selectedItem: result?.data?.subscriptions?.find(
+        (sub) => sub.subscriptionId === subscriptionId
+      )
+    })
+  });
+  const endpointName = useQuery().endpointName;
+  const [startProcess] = useStartProcessMutation();
+  const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
+  const triggerNoteModifyWorkflow = (note) => {
+    const noteModifyPayload = [
+      { subscription_id: subscriptionId },
+      { note: note === INVISIBLE_CHARACTER ? "" : note }
+    ];
+    startProcess({
+      workflowName: "modify_note",
+      userInputs: noteModifyPayload
+    });
+    updateSub({
+      queryName: endpointName ?? "",
+      subscriptionId,
+      graphQlQueryVariables: queryVariables,
+      note
+    });
+  };
+  return /* @__PURE__ */ jsx221(
+    WfoInlineNoteEdit,
+    {
+      value: selectedItem?.note?.trim() ? selectedItem.note : INVISIBLE_CHARACTER,
+      onlyShowOnHover,
+      triggerNoteModifyWorkflow
+    }
+  );
+};
+
+// src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx
+import { jsx as jsx222 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionsList = ({
   alwaysOnFilters,
   dataDisplayParams,
@@ -50935,7 +51048,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("id"),
       width: "100px",
-      renderData: (value) => /* @__PURE__ */ jsx221(WfoFirstPartUUID, { UUID: value }),
+      renderData: (value) => /* @__PURE__ */ jsx222(WfoFirstPartUUID, { UUID: value }),
       renderDetails: (value) => value,
       renderTooltip: (value) => value
     },
@@ -50943,20 +51056,20 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("description"),
       width: "500px",
-      renderData: (value, record) => /* @__PURE__ */ jsx221(Link12, { href: `/subscriptions/${record.subscriptionId}`, children: value }),
+      renderData: (value, record) => /* @__PURE__ */ jsx222(Link12, { href: `/subscriptions/${record.subscriptionId}`, children: value }),
       renderTooltip: (value) => value
     },
     status: {
       columnType: "data" /* DATA */,
       label: t("status"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx221(WfoSubscriptionStatusBadge, { status: value })
+      renderData: (value) => /* @__PURE__ */ jsx222(WfoSubscriptionStatusBadge, { status: value })
     },
     insync: {
       columnType: "data" /* DATA */,
       label: t("insync"),
       width: "80px",
-      renderData: (value) => /* @__PURE__ */ jsx221(WfoInsyncIcon, { inSync: value })
+      renderData: (value) => /* @__PURE__ */ jsx222(WfoInsyncIcon, { inSync: value })
     },
     productName: {
       columnType: "data" /* DATA */,
@@ -50980,7 +51093,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("startDate"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx221(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx222(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString()
@@ -50989,7 +51102,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("endDate"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx221(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx222(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString()
@@ -50997,22 +51110,25 @@ var WfoSubscriptionsList = ({
     note: {
       columnType: "data" /* DATA */,
       label: t("note"),
-      renderData: (cellValue, row) => /* @__PURE__ */ jsx221(
-        WfoInlineNoteEdit,
-        {
-          subscriptionId: row.subscriptionId,
-          value: cellValue,
-          onlyShowOnHover: true
-        }
-      )
+      renderData: (cellValue, row) => {
+        return /* @__PURE__ */ jsx222(
+          WfoSubscriptionNoteEdit,
+          {
+            queryVariables: graphqlQueryVariables,
+            subscriptionId: row.subscriptionId,
+            onlyShowOnHover: true,
+            useQuery: useGetSubscriptionListQuery
+          }
+        );
+      }
     },
     metadata: {
       columnType: "data" /* DATA */,
       label: t("metadata"),
       width: "100px",
-      renderData: (value) => /* @__PURE__ */ jsx221(WfoInlineJson, { data: value }),
-      renderDetails: (value) => value && /* @__PURE__ */ jsx221(WfoJsonCodeBlock, { data: value, isBasicStyle: true }),
-      renderTooltip: (value) => value && /* @__PURE__ */ jsx221(WfoJsonCodeBlock, { data: value, isBasicStyle: false })
+      renderData: (value) => /* @__PURE__ */ jsx222(WfoInlineJson, { data: value }),
+      renderDetails: (value) => value && /* @__PURE__ */ jsx222(WfoJsonCodeBlock, { data: value, isBasicStyle: true }),
+      renderTooltip: (value) => value && /* @__PURE__ */ jsx222(WfoJsonCodeBlock, { data: value, isBasicStyle: false })
     }
   };
   const { sortBy: sortBy2, queryString, pageIndex, pageSize } = dataDisplayParams;
@@ -51053,7 +51169,7 @@ var WfoSubscriptionsList = ({
     ),
     onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam)
   };
-  return /* @__PURE__ */ jsx221(
+  return /* @__PURE__ */ jsx222(
     WfoAdvancedTable,
     {
       queryString: dataDisplayParams.queryString,
@@ -51139,7 +51255,7 @@ var getWfoSummaryCardHeaderStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCardHeader/WfoSummaryCardHeader.tsx
-import { jsx as jsx222, jsxs as jsxs122 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx223, jsxs as jsxs122 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardHeader = ({
   text,
   value,
@@ -51148,8 +51264,8 @@ var WfoSummaryCardHeader = ({
 }) => {
   const { theme } = useOrchestratorTheme();
   const { avatarStyle, totalSectionStyle, valueStyle } = useWithOrchestratorTheme(getWfoSummaryCardHeaderStyles);
-  return /* @__PURE__ */ jsx222(EuiFlexItem31, { grow: 0, children: /* @__PURE__ */ jsx222(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs122(EuiFlexGroup29, { children: [
-    /* @__PURE__ */ jsx222(
+  return /* @__PURE__ */ jsx223(EuiFlexItem31, { grow: 0, children: /* @__PURE__ */ jsx223(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs122(EuiFlexGroup29, { children: [
+    /* @__PURE__ */ jsx223(
       EuiAvatar2,
       {
         iconSize: "l",
@@ -51163,8 +51279,8 @@ var WfoSummaryCardHeader = ({
       }
     ),
     /* @__PURE__ */ jsxs122("div", { css: totalSectionStyle, children: [
-      /* @__PURE__ */ jsx222(EuiText44, { color: "subdued", children: text }),
-      /* @__PURE__ */ jsx222(EuiText44, { css: valueStyle, children: value })
+      /* @__PURE__ */ jsx223(EuiText44, { color: "subdued", children: text }),
+      /* @__PURE__ */ jsx223(EuiText44, { css: valueStyle, children: value })
     ] })
   ] }) }) });
 };
@@ -51186,15 +51302,15 @@ import { EuiFlexGroup as EuiFlexGroup30, EuiFlexItem as EuiFlexItem32, EuiIcon a
 
 // src/components/WfoOptionalLink/WfoOptionalLink.tsx
 import Link13 from "next/link";
-import { jsx as jsx223 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx224 } from "@emotion/react/jsx-runtime";
 var WfoOptionalLink = ({
   children,
   href
 }) => {
   if (!href) {
-    return /* @__PURE__ */ jsx223("span", { children });
+    return /* @__PURE__ */ jsx224("span", { children });
   }
-  return /* @__PURE__ */ jsx223(Link13, { href, children });
+  return /* @__PURE__ */ jsx224(Link13, { href, children });
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/styles.ts
@@ -51244,7 +51360,7 @@ var getWfoSummaryCardListStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardListItem.tsx
-import { jsx as jsx224, jsxs as jsxs123 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx225, jsxs as jsxs123 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardListItem = ({
   title,
   value,
@@ -51257,9 +51373,9 @@ var WfoSummaryCardListItem = ({
     listItemSubtitleStyle,
     listItemHighlightIconStyle
   } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-  return /* @__PURE__ */ jsx224(WfoOptionalLink, { href: url, children: /* @__PURE__ */ jsxs123(EuiFlexGroup30, { css: listItemContainerStyle, gutterSize: "none", children: [
+  return /* @__PURE__ */ jsx225(WfoOptionalLink, { href: url, children: /* @__PURE__ */ jsxs123(EuiFlexGroup30, { css: listItemContainerStyle, gutterSize: "none", children: [
     /* @__PURE__ */ jsxs123(EuiFlexItem32, { children: [
-      /* @__PURE__ */ jsx224(
+      /* @__PURE__ */ jsx225(
         EuiTextColor,
         {
           color: url ? theme.colors.link : theme.colors.title,
@@ -51267,22 +51383,22 @@ var WfoSummaryCardListItem = ({
           children: title
         }
       ),
-      /* @__PURE__ */ jsx224(EuiTextColor, { css: listItemSubtitleStyle, children: value })
+      /* @__PURE__ */ jsx225(EuiTextColor, { css: listItemSubtitleStyle, children: value })
     ] }),
-    /* @__PURE__ */ jsx224(
+    /* @__PURE__ */ jsx225(
       EuiFlexItem32,
       {
         className: url ? "highlight-icon" : void 0,
         grow: false,
         css: listItemHighlightIconStyle,
-        children: /* @__PURE__ */ jsx224(EuiIcon5, { type: "sortRight", color: "primary" })
+        children: /* @__PURE__ */ jsx225(EuiIcon5, { type: "sortRight", color: "primary" })
       }
     )
   ] }) });
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardList.tsx
-import { jsx as jsx225, jsxs as jsxs124 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx226, jsxs as jsxs124 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardList = ({
   title,
   items,
@@ -51292,7 +51408,7 @@ var WfoSummaryCardList = ({
   const router = useRouter15();
   const euiScrollBarStyle = useEuiScrollBar3();
   const { listContainerStyle, listHeaderStyle, listStyle } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-  return /* @__PURE__ */ jsx225(EuiFlexItem33, { children: /* @__PURE__ */ jsxs124(
+  return /* @__PURE__ */ jsx226(EuiFlexItem33, { children: /* @__PURE__ */ jsxs124(
     EuiPanel11,
     {
       css: listContainerStyle,
@@ -51301,10 +51417,10 @@ var WfoSummaryCardList = ({
       paddingSize: "l",
       children: [
         /* @__PURE__ */ jsxs124("div", { children: [
-          /* @__PURE__ */ jsx225("p", { css: listHeaderStyle, children: title }),
-          /* @__PURE__ */ jsx225(EuiSpacer25, { size: "m" }),
-          /* @__PURE__ */ jsx225(EuiSkeletonText, { isLoading, lines: 10, children: /* @__PURE__ */ jsx225("div", { css: [listStyle, euiScrollBarStyle], children: items?.map((item, index) => /* @__PURE__ */ jsxs124("div", { children: [
-            /* @__PURE__ */ jsx225(
+          /* @__PURE__ */ jsx226("p", { css: listHeaderStyle, children: title }),
+          /* @__PURE__ */ jsx226(EuiSpacer25, { size: "m" }),
+          /* @__PURE__ */ jsx226(EuiSkeletonText, { isLoading, lines: 10, children: /* @__PURE__ */ jsx226("div", { css: [listStyle, euiScrollBarStyle], children: items?.map((item, index) => /* @__PURE__ */ jsxs124("div", { children: [
+            /* @__PURE__ */ jsx226(
               WfoSummaryCardListItem,
               {
                 title: item.title,
@@ -51312,11 +51428,11 @@ var WfoSummaryCardList = ({
                 url: item.url
               }
             ),
-            index === items.length - 1 ? null : /* @__PURE__ */ jsx225(EuiHorizontalRule7, { margin: "none" })
+            index === items.length - 1 ? null : /* @__PURE__ */ jsx226(EuiHorizontalRule7, { margin: "none" })
           ] }, index)) }) })
         ] }),
-        /* @__PURE__ */ jsx225(EuiSpacer25, { size: "m" }),
-        button && /* @__PURE__ */ jsx225(
+        /* @__PURE__ */ jsx226(EuiSpacer25, { size: "m" }),
+        button && /* @__PURE__ */ jsx226(
           EuiButton17,
           {
             fullWidth: true,
@@ -51331,10 +51447,10 @@ var WfoSummaryCardList = ({
 
 // src/components/WfoSummary/WfoSummaryCards.tsx
 import { EuiFlexGrid as EuiFlexGrid2, useCurrentEuiBreakpoint } from "@elastic/eui";
-import { jsx as jsx226 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx227 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCards = ({ children }) => {
   const currentBreakpoint = useCurrentEuiBreakpoint();
-  return /* @__PURE__ */ jsx226(
+  return /* @__PURE__ */ jsx227(
     EuiFlexGrid2,
     {
       responsive: false,
@@ -51361,7 +51477,7 @@ var getWfoSummaryCardsStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCard.tsx
-import { jsx as jsx227, jsxs as jsxs125 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx228, jsxs as jsxs125 } from "@emotion/react/jsx-runtime";
 var SummaryCardStatus = /* @__PURE__ */ ((SummaryCardStatus2) => {
   SummaryCardStatus2["Success"] = "Success";
   SummaryCardStatus2["Error"] = "Error";
@@ -51402,7 +51518,7 @@ var WfoSummaryCard = ({
     }
   };
   return /* @__PURE__ */ jsxs125(EuiFlexItem34, { css: cardContainerStyle, children: [
-    /* @__PURE__ */ jsx227(
+    /* @__PURE__ */ jsx228(
       WfoSummaryCardHeader,
       {
         text: headerTitle,
@@ -51410,8 +51526,8 @@ var WfoSummaryCard = ({
         ...getIconTypeAndColorForHeaderStatus(headerStatus)
       }
     ),
-    /* @__PURE__ */ jsx227(EuiSpacer26, { size: "m" }),
-    /* @__PURE__ */ jsx227(
+    /* @__PURE__ */ jsx228(EuiSpacer26, { size: "m" }),
+    /* @__PURE__ */ jsx228(
       WfoSummaryCardList,
       {
         title: listTitle,
@@ -51521,14 +51637,14 @@ var productsSummaryQueryVariables = {
 };
 
 // src/components/WfoSummary/WfoActiveWorkflowsSummaryCard.tsx
-import { jsx as jsx228 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx229 } from "@emotion/react/jsx-runtime";
 var WfoActiveWorkflowsSummaryCard = () => {
   const t = useTranslations78("startPage.activeWorkflows");
   const {
     data: activeWorkflowsSummaryResponse,
     isFetching: activeWorkflowsSummaryIsFetching
   } = useGetProcessListSummaryQuery(activeWorkflowsListSummaryQueryVariables);
-  return /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsx229(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -51547,14 +51663,14 @@ var WfoActiveWorkflowsSummaryCard = () => {
 
 // src/components/WfoSummary/WfoFailedTasksSummaryCard.tsx
 import { useTranslations as useTranslations79 } from "next-intl";
-import { jsx as jsx229 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx230 } from "@emotion/react/jsx-runtime";
 var WfoFailedTasksSummaryCard = () => {
   const t = useTranslations79("startPage.failedTasks");
   const {
     data: failedTasksSummaryResponse,
     isFetching: failedTasksSummaryIsFetching
   } = useGetProcessListSummaryQuery(taskListSummaryQueryVariables);
-  return /* @__PURE__ */ jsx229(
+  return /* @__PURE__ */ jsx230(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -51573,7 +51689,7 @@ var WfoFailedTasksSummaryCard = () => {
 
 // src/components/WfoSummary/WfoLatestActiveSubscriptionsSummaryCard.tsx
 import { useTranslations as useTranslations80 } from "next-intl";
-import { jsx as jsx230 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx231 } from "@emotion/react/jsx-runtime";
 var WfoLatestActiveSubscriptionsSummaryCard = () => {
   const t = useTranslations80("startPage.activeSubscriptions");
   const {
@@ -51582,7 +51698,7 @@ var WfoLatestActiveSubscriptionsSummaryCard = () => {
   } = useGetSubscriptionSummaryListQuery(
     subscriptionsListSummaryQueryVariables
   );
-  return /* @__PURE__ */ jsx230(
+  return /* @__PURE__ */ jsx231(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -51601,7 +51717,7 @@ var WfoLatestActiveSubscriptionsSummaryCard = () => {
 
 // src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx
 import { useTranslations as useTranslations81 } from "next-intl";
-import { jsx as jsx231 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx232 } from "@emotion/react/jsx-runtime";
 var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
   const t = useTranslations81("startPage.outOfSyncSubscriptions");
   const {
@@ -51610,7 +51726,7 @@ var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
   } = useGetSubscriptionSummaryListQuery(
     outOfSyncSubscriptionsListSummaryQueryVariables
   );
-  return /* @__PURE__ */ jsx231(
+  return /* @__PURE__ */ jsx232(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -51632,7 +51748,7 @@ var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
 
 // src/components/WfoSummary/WfoMyWorkflowsSummaryCard.tsx
 import { useTranslations as useTranslations82 } from "next-intl";
-import { jsx as jsx232 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx233 } from "@emotion/react/jsx-runtime";
 var WfoMyWorkflowsSummaryCard = ({
   username
 }) => {
@@ -51643,7 +51759,7 @@ var WfoMyWorkflowsSummaryCard = ({
   } = useGetProcessListSummaryQuery(
     getMyWorkflowListSummaryQueryVariables(username)
   );
-  return /* @__PURE__ */ jsx232(
+  return /* @__PURE__ */ jsx233(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -51665,7 +51781,7 @@ var WfoMyWorkflowsSummaryCard = ({
 
 // src/components/WfoSummary/WfoProductsSummaryCard.tsx
 import { useTranslations as useTranslations83 } from "next-intl";
-import { jsx as jsx233, jsxs as jsxs126 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx234, jsxs as jsxs126 } from "@emotion/react/jsx-runtime";
 var WfoProductsSummaryCard = () => {
   const t = useTranslations83("startPage.products");
   const {
@@ -51684,13 +51800,13 @@ var WfoProductsSummaryCard = () => {
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ jsx233("div", { children: product.name }),
-          /* @__PURE__ */ jsx233("div", { children: product.subscriptions.pageInfo.totalItems || 0 })
+          /* @__PURE__ */ jsx234("div", { children: product.name }),
+          /* @__PURE__ */ jsx234("div", { children: product.subscriptions.pageInfo.totalItems || 0 })
         ]
       }
     )
   })) ?? [];
-  return /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsx234(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -51705,17 +51821,17 @@ var WfoProductsSummaryCard = () => {
 
 // src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx
 import { EuiPageHeader as EuiPageHeader3 } from "@elastic/eui";
-import { Fragment as Fragment56, jsx as jsx234, jsxs as jsxs127 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment57, jsx as jsx235, jsxs as jsxs127 } from "@emotion/react/jsx-runtime";
 var WfoTitleWithWebsocketBadge = ({
   title
 }) => {
   const { useWebSockets } = useGetOrchestratorConfig();
-  const pageTitle = useWebSockets ? /* @__PURE__ */ jsxs127(Fragment56, { children: [
+  const pageTitle = useWebSockets ? /* @__PURE__ */ jsxs127(Fragment57, { children: [
     title,
     " ",
-    /* @__PURE__ */ jsx234(WfoWebsocketStatusBadge, {})
+    /* @__PURE__ */ jsx235(WfoWebsocketStatusBadge, {})
   ] }) : title;
-  return /* @__PURE__ */ jsx234(EuiPageHeader3, { pageTitle });
+  return /* @__PURE__ */ jsx235(EuiPageHeader3, { pageTitle });
 };
 
 // src/components/WfoRadioDropdown/WfoRadioDropdown.tsx
@@ -51726,7 +51842,7 @@ import {
   EuiPopover as EuiPopover8,
   EuiRadioGroup
 } from "@elastic/eui";
-import { jsx as jsx235 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx236 } from "@emotion/react/jsx-runtime";
 var WfoRadioDropdown = ({
   options,
   onUpdateOption,
@@ -51752,16 +51868,16 @@ var WfoRadioDropdown = ({
     id: option.id,
     label: option.label
   }));
-  return /* @__PURE__ */ jsx235(
+  return /* @__PURE__ */ jsx236(
     EuiFlexGroup31,
     {
       gutterSize: "s",
       alignItems: "center",
       justifyContent: "flexEnd",
-      children: /* @__PURE__ */ jsx235(
+      children: /* @__PURE__ */ jsx236(
         EuiPopover8,
         {
-          button: /* @__PURE__ */ jsx235(
+          button: /* @__PURE__ */ jsx236(
             EuiButtonEmpty5,
             {
               size: "s",
@@ -51782,7 +51898,7 @@ var WfoRadioDropdown = ({
           isOpen,
           closePopover: handleClose,
           anchorPosition: "downLeft",
-          children: /* @__PURE__ */ jsx235(
+          children: /* @__PURE__ */ jsx236(
             EuiRadioGroup,
             {
               options: radioGroupOptions,
@@ -51799,38 +51915,28 @@ var WfoRadioDropdown = ({
 // src/components/WfoInlineNoteEdit/WfoInlineNoteEdit.tsx
 import { useEffect as useEffect32, useState as useState51 } from "react";
 import { EuiInlineEditText } from "@elastic/eui";
-import { jsx as jsx236 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx237 } from "@emotion/react/jsx-runtime";
 var WfoInlineNoteEdit = ({
   value,
-  subscriptionId,
-  onlyShowOnHover = false
+  onlyShowOnHover = false,
+  triggerNoteModifyWorkflow = () => {
+  }
 }) => {
   const { theme } = useOrchestratorTheme();
-  const [note, setNote] = useState51(value ?? "");
+  const [note, setNote] = useState51(value);
   const [isTooltipVisible, setIsTooltipVisible] = useState51(true);
-  const [startProcess] = useStartProcessMutation();
-  const triggerNoteModifyWorkflow = () => {
-    const noteModifyPayload = [
-      { subscription_id: subscriptionId },
-      { note }
-    ];
-    startProcess({
-      workflowName: "modify_note",
-      userInputs: noteModifyPayload
-    });
-  };
   const handleSave = () => {
-    triggerNoteModifyWorkflow();
+    triggerNoteModifyWorkflow(note);
     setIsTooltipVisible(true);
   };
   const handleCancel = () => {
-    setNote(value ?? "");
+    setNote(value);
     setIsTooltipVisible(true);
   };
   useEffect32(() => {
-    setNote(value ?? "");
+    setNote(value);
   }, [value]);
-  return /* @__PURE__ */ jsx236(
+  return /* @__PURE__ */ jsx237(
     "div",
     {
       css: {
@@ -51841,12 +51947,14 @@ var WfoInlineNoteEdit = ({
           }
         }
       },
-      children: /* @__PURE__ */ jsx236(
+      children: /* @__PURE__ */ jsx237(
         WfoToolTip,
         {
-          css: { visibility: isTooltipVisible ? "visible" : "hidden" },
+          css: {
+            visibility: isTooltipVisible && note !== INVISIBLE_CHARACTER ? "visible" : "hidden"
+          },
           tooltipContent: note,
-          children: /* @__PURE__ */ jsx236(
+          children: /* @__PURE__ */ jsx237("span", { children: /* @__PURE__ */ jsx237(
             EuiInlineEditText,
             {
               inputAriaLabel: "Edit note",
@@ -51909,13 +52017,47 @@ var WfoInlineNoteEdit = ({
                 }
               }
             }
-          )
+          ) })
         }
       )
     }
   );
 };
 
+// src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx
+import { jsx as jsx238 } from "@emotion/react/jsx-runtime";
+var WfoSubscriptionDetailNoteEdit = ({ subscriptionId, onlyShowOnHover = false }) => {
+  const { data, endpointName } = useGetSubscriptionDetailQuery({
+    subscriptionId
+  });
+  const selectedItem = data?.subscription ?? { note: "" };
+  const [startProcess] = useStartProcessMutation();
+  const [updateSub] = useUpdateSubscriptionDetailNoteOptimisticMutation();
+  const triggerNoteModifyWorkflow = (note) => {
+    const noteModifyPayload = [
+      { subscription_id: subscriptionId },
+      { note: note === INVISIBLE_CHARACTER ? "" : note }
+    ];
+    startProcess({
+      workflowName: "modify_note",
+      userInputs: noteModifyPayload
+    });
+    updateSub({
+      queryName: endpointName ?? "",
+      subscriptionId,
+      note
+    });
+  };
+  return /* @__PURE__ */ jsx238(
+    WfoInlineNoteEdit,
+    {
+      value: selectedItem?.note?.trim() ? selectedItem.note : INVISIBLE_CHARACTER,
+      onlyShowOnHover,
+      triggerNoteModifyWorkflow
+    }
+  );
+};
+
 // src/components/WfoTableCodeBlock/WfoTableCodeBlock.tsx
 import { EuiFlexItem as EuiFlexItem35 } from "@elastic/eui";
 
@@ -51933,7 +52075,7 @@ var getStyles19 = ({ theme }) => {
 };
 
 // src/components/WfoTableCodeBlock/WfoTableCodeBlock.tsx
-import { jsx as jsx237 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx239 } from "@emotion/react/jsx-runtime";
 var WfoTableCodeBlock = ({
   stepState: data
 }) => {
@@ -51949,7 +52091,7 @@ var WfoTableCodeBlock = ({
       };
     }
   );
-  return /* @__PURE__ */ jsx237(EuiFlexItem35, { css: tableCodeBlockMarginStyle, children: /* @__PURE__ */ jsx237(
+  return /* @__PURE__ */ jsx239(EuiFlexItem35, { css: tableCodeBlockMarginStyle, children: /* @__PURE__ */ jsx239(
     WfoKeyValueTable,
     {
       keyValues,
@@ -52001,6 +52143,7 @@ var en_GB_default = {
     lightMode: "Light mode",
     websocketConnected: "This page receives live updates from the server",
     websocketDisconnected: "The connection to the server is lost, click the icon or refresh the page",
+    websocketDisconnectedShort: "WebSocket disconnected, click the icon to reconnect",
     resetToDefault: "Reset to default",
     savePreferences: "Save preferences",
     numberOfRows: "Number of rows",
@@ -52434,6 +52577,7 @@ var nl_NL_default = {
     lightMode: "Light mode",
     websocketConnected: "De pagina ontvangt live updates van de server",
     websocketDisconnected: "De websocket verbinding is verbroken, klik op het icoon of ververs de pagina.",
+    websocketDisconnectedShort: "WebSocket verbroken, klik op het icoon om opnieuw te verbinden.",
     resetToDefault: "Reset naar standaard",
     savePreferences: "Voorkeuren opslaan",
     numberOfRows: "Aantal rijen",
@@ -52901,6 +53045,7 @@ export {
   ErrorsField,
   HIDDEN_KEYS,
   HttpStatus,
+  INVISIBLE_CHARACTER,
   IPAM_ENDPOINT,
   IPAM_FREE_SUBNETS_ENDPOINT,
   IPAM_IP_BLOCKS_ENDPOINT,
@@ -53120,6 +53265,7 @@ export {
   WfoSubmitModal,
   WfoSubscription,
   WfoSubscriptionActions,
+  WfoSubscriptionDetailNoteEdit,
   WfoSubscriptionDetailPage,
   WfoSubscriptionDetailSection,
   WfoSubscriptionDetailTree,
@@ -53128,6 +53274,7 @@ export {
   WfoSubscriptionGeneralSections,
   WfoSubscriptionListTab,
   WfoSubscriptionMetadataSection,
+  WfoSubscriptionNoteEdit,
   WfoSubscriptionProductBlock,
   WfoSubscriptionProductInfoSection,
   WfoSubscriptionStatusBadge,
@@ -53239,6 +53386,7 @@ export {
   ipPrefixTableFieldStyling,
   ipamStates,
   isAllUpperCase,
+  isNullOrEmpty,
   isToday,
   isUuid4,
   isValidLocalStorageTableConfig,