@orchestrator-ui/orchestrator-ui-components 5.2.3 → 5.3.0

package/dist/index.js

@@ -26799,7 +26799,7 @@ var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
 })(PolicyResource || {});
 
 // src/configuration/version.ts
-var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.2.3";
+var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.3.0";
 
 // src/types/types.ts
 var EngineStatus = /* @__PURE__ */ ((EngineStatus3) => {
@@ -42788,7 +42788,9 @@ var WfoSubscriptionProductBlock = ({
 // src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx
 import { EuiBadge as EuiBadge3 } from "@elastic/eui";
 import { Fragment as Fragment27, jsx as jsx124, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
-var WfoProductBlockKeyValueRow = ({ fieldValue, allFieldValues }) => {
+var KEY_CELL_CLASS_NAME = "key-cell";
+var VALUE_CELL_CLASS_NAME = "value-cell";
+var WfoProductBlockKeyValueRow = ({ fieldValue, allFieldValues, className }) => {
   const { leftColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles6);
   const { getOverriddenValue } = useSubscriptionDetailValueOverride();
   const { field, value } = fieldValue;
@@ -42802,9 +42804,9 @@ var WfoProductBlockKeyValueRow = ({ fieldValue, allFieldValues }) => {
       return /* @__PURE__ */ jsx124(Fragment27, { children: value2 });
     }
   };
-  return /* @__PURE__ */ jsxs70("tr", { css: rowStyle, children: [
-    /* @__PURE__ */ jsx124("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx124("b", { children: camelToHuman(field) }) }),
-    /* @__PURE__ */ jsx124("td", { children: getOverriddenValue(fieldValue, allFieldValues) ?? /* @__PURE__ */ jsx124(WfoProductBlockValue, { value }) })
+  return /* @__PURE__ */ jsxs70("tr", { className, css: rowStyle, children: [
+    /* @__PURE__ */ jsx124("td", { className: KEY_CELL_CLASS_NAME, css: leftColumnStyle, children: /* @__PURE__ */ jsx124("b", { children: camelToHuman(field) }) }),
+    /* @__PURE__ */ jsx124("td", { className: VALUE_CELL_CLASS_NAME, children: getOverriddenValue(fieldValue, allFieldValues) ?? /* @__PURE__ */ jsx124(WfoProductBlockValue, { value }) })
   ] });
 };
 
@@ -53168,104 +53170,7 @@ var subscriptionListTabs = [
 import { useTranslations as useTranslations82 } from "next-intl";
 import Link13 from "next/link";
 import { useRouter as useRouter16 } 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 jsx241 } from "@emotion/react/jsx-runtime";
-var WfoSubscriptionNoteEdit = ({
-  onlyShowOnHover = false,
-  queryVariables,
-  endpointName,
-  subscription
-}) => {
-  const [startProcess] = useStartProcessMutation();
-  const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
-  const triggerNoteModifyWorkflow = (note) => {
-    const noteModifyPayload = [
-      { subscription_id: subscription.subscriptionId },
-      { note: note === INVISIBLE_CHARACTER ? "" : note }
-    ];
-    startProcess({
-      workflowName: "modify_note",
-      userInputs: noteModifyPayload
-    });
-    updateSub({
-      queryName: endpointName ?? "",
-      subscriptionId: subscription.subscriptionId,
-      graphQlQueryVariables: queryVariables,
-      note
-    });
-  };
-  return /* @__PURE__ */ jsx241(
-    WfoInlineEdit,
-    {
-      value: subscription?.note?.trim() ? subscription.note : INVISIBLE_CHARACTER,
-      onlyShowOnHover,
-      onSave: triggerNoteModifyWorkflow
-    }
-  );
-};
-
-// src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx
-import { jsx as jsx242 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionsList = ({
   alwaysOnFilters,
   dataDisplayParams,
@@ -53291,7 +53196,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("id"),
       width: "100px",
-      renderData: (value) => /* @__PURE__ */ jsx242(WfoFirstPartUUID, { UUID: value }),
+      renderData: (value) => /* @__PURE__ */ jsx241(WfoFirstPartUUID, { UUID: value }),
       renderDetails: (value) => value,
       renderTooltip: (value) => value
     },
@@ -53299,20 +53204,20 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("description"),
       width: "500px",
-      renderData: (value, record) => /* @__PURE__ */ jsx242(Link13, { href: `/subscriptions/${record.subscriptionId}`, children: value }),
+      renderData: (value, record) => /* @__PURE__ */ jsx241(Link13, { href: `/subscriptions/${record.subscriptionId}`, children: value }),
       renderTooltip: (value) => value
     },
     status: {
       columnType: "data" /* DATA */,
       label: t("status"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx242(WfoSubscriptionStatusBadge, { status: value })
+      renderData: (value) => /* @__PURE__ */ jsx241(WfoSubscriptionStatusBadge, { status: value })
     },
     insync: {
       columnType: "data" /* DATA */,
       label: t("insync"),
       width: "80px",
-      renderData: (value) => /* @__PURE__ */ jsx242(WfoInsyncIcon, { inSync: value })
+      renderData: (value) => /* @__PURE__ */ jsx241(WfoInsyncIcon, { inSync: value })
     },
     productName: {
       columnType: "data" /* DATA */,
@@ -53336,7 +53241,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("startDate"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx242(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx241(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString()
@@ -53345,7 +53250,7 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("endDate"),
       width: "120px",
-      renderData: (value) => /* @__PURE__ */ jsx242(WfoDateTime, { dateOrIsoString: value }),
+      renderData: (value) => /* @__PURE__ */ jsx241(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString()
@@ -53354,13 +53259,14 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("note"),
       renderData: (cellValue, row) => {
-        return /* @__PURE__ */ jsx242(
+        return /* @__PURE__ */ jsx241(
           WfoSubscriptionNoteEdit,
           {
             onlyShowOnHover: true,
             endpointName,
             queryVariables: graphqlQueryVariables,
-            subscription: row
+            subscriptionId: row.subscriptionId,
+            note: cellValue
           }
         );
       }
@@ -53369,9 +53275,9 @@ var WfoSubscriptionsList = ({
       columnType: "data" /* DATA */,
       label: t("metadata"),
       width: "100px",
-      renderData: (value) => /* @__PURE__ */ jsx242(WfoInlineJson, { data: value }),
-      renderDetails: (value) => value && /* @__PURE__ */ jsx242(WfoJsonCodeBlock, { data: value, isBasicStyle: true }),
-      renderTooltip: (value) => value && /* @__PURE__ */ jsx242(WfoJsonCodeBlock, { data: value, isBasicStyle: false })
+      renderData: (value) => /* @__PURE__ */ jsx241(WfoInlineJson, { data: value }),
+      renderDetails: (value) => value && /* @__PURE__ */ jsx241(WfoJsonCodeBlock, { data: value, isBasicStyle: true }),
+      renderTooltip: (value) => value && /* @__PURE__ */ jsx241(WfoJsonCodeBlock, { data: value, isBasicStyle: false })
     }
   };
   const [getSubscriptionListTrigger, { isFetching: isFetchingCsv }] = useLazyGetSubscriptionListQuery();
@@ -53417,7 +53323,7 @@ var WfoSubscriptionsList = ({
     sortFields,
     filterFields
   );
-  return /* @__PURE__ */ jsx242(
+  return /* @__PURE__ */ jsx241(
     WfoAdvancedTable,
     {
       queryString: dataDisplayParams.queryString,
@@ -53488,7 +53394,7 @@ var getWfoSummaryCardHeaderStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCardHeader/WfoSummaryCardHeader.tsx
-import { jsx as jsx243, jsxs as jsxs132 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx242, jsxs as jsxs132 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardHeader = ({
   text,
   value,
@@ -53498,8 +53404,8 @@ var WfoSummaryCardHeader = ({
 }) => {
   const { theme } = useOrchestratorTheme();
   const { avatarStyle, totalSectionStyle, valueStyle } = useWithOrchestratorTheme(getWfoSummaryCardHeaderStyles);
-  return /* @__PURE__ */ jsx243(EuiFlexItem33, { grow: 0, children: /* @__PURE__ */ jsx243(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs132(EuiFlexGroup29, { alignItems: "center", children: [
-    /* @__PURE__ */ jsx243(
+  return /* @__PURE__ */ jsx242(EuiFlexItem33, { grow: 0, children: /* @__PURE__ */ jsx242(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs132(EuiFlexGroup29, { alignItems: "center", children: [
+    /* @__PURE__ */ jsx242(
       EuiAvatar2,
       {
         iconSize: "l",
@@ -53513,10 +53419,10 @@ var WfoSummaryCardHeader = ({
       }
     ),
     /* @__PURE__ */ jsxs132("div", { css: totalSectionStyle, children: [
-      /* @__PURE__ */ jsx243(EuiText48, { color: "subdued", children: text }),
+      /* @__PURE__ */ jsx242(EuiText48, { color: "subdued", children: text }),
       /* @__PURE__ */ jsxs132(EuiFlexGroup29, { gutterSize: "s", alignItems: "center", children: [
-        /* @__PURE__ */ jsx243(EuiText48, { css: valueStyle, children: value }),
-        isFetching && /* @__PURE__ */ jsx243(EuiLoadingSpinner, {})
+        /* @__PURE__ */ jsx242(EuiText48, { css: valueStyle, children: value }),
+        isFetching && /* @__PURE__ */ jsx242(EuiLoadingSpinner, {})
       ] })
     ] })
   ] }) }) });
@@ -53539,15 +53445,15 @@ import { EuiFlexGroup as EuiFlexGroup30, EuiFlexItem as EuiFlexItem34, EuiIcon a
 
 // src/components/WfoOptionalLink/WfoOptionalLink.tsx
 import Link14 from "next/link";
-import { jsx as jsx244 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx243 } from "@emotion/react/jsx-runtime";
 var WfoOptionalLink = ({
   children,
   href
 }) => {
   if (!href) {
-    return /* @__PURE__ */ jsx244("span", { children });
+    return /* @__PURE__ */ jsx243("span", { children });
   }
-  return /* @__PURE__ */ jsx244(Link14, { href, children });
+  return /* @__PURE__ */ jsx243(Link14, { href, children });
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/styles.ts
@@ -53597,7 +53503,7 @@ var getWfoSummaryCardListStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardListItem.tsx
-import { jsx as jsx245, jsxs as jsxs133 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx244, jsxs as jsxs133 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardListItem = ({
   title,
   value,
@@ -53610,9 +53516,9 @@ var WfoSummaryCardListItem = ({
     listItemSubtitleStyle,
     listItemHighlightIconStyle
   } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-  return /* @__PURE__ */ jsx245(WfoOptionalLink, { href: url, children: /* @__PURE__ */ jsxs133(EuiFlexGroup30, { css: listItemContainerStyle, gutterSize: "none", children: [
+  return /* @__PURE__ */ jsx244(WfoOptionalLink, { href: url, children: /* @__PURE__ */ jsxs133(EuiFlexGroup30, { css: listItemContainerStyle, gutterSize: "none", children: [
     /* @__PURE__ */ jsxs133(EuiFlexItem34, { children: [
-      /* @__PURE__ */ jsx245(
+      /* @__PURE__ */ jsx244(
         EuiTextColor,
         {
           color: url ? theme.colors.link : theme.colors.title,
@@ -53620,22 +53526,22 @@ var WfoSummaryCardListItem = ({
           children: title
         }
       ),
-      /* @__PURE__ */ jsx245(EuiTextColor, { css: listItemSubtitleStyle, children: value })
+      /* @__PURE__ */ jsx244(EuiTextColor, { css: listItemSubtitleStyle, children: value })
     ] }),
-    /* @__PURE__ */ jsx245(
+    /* @__PURE__ */ jsx244(
       EuiFlexItem34,
       {
         className: url ? "highlight-icon" : void 0,
         grow: false,
         css: listItemHighlightIconStyle,
-        children: /* @__PURE__ */ jsx245(EuiIcon5, { type: "sortRight", color: "primary" })
+        children: /* @__PURE__ */ jsx244(EuiIcon5, { type: "sortRight", color: "primary" })
       }
     )
   ] }) });
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardList.tsx
-import { jsx as jsx246, jsxs as jsxs134 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs134 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCardList = ({
   title,
   items,
@@ -53645,7 +53551,7 @@ var WfoSummaryCardList = ({
   const router = useRouter17();
   const euiScrollBarStyle = useEuiScrollBar3();
   const { listContainerStyle, listHeaderStyle, listStyle } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-  return /* @__PURE__ */ jsx246(EuiFlexItem35, { children: /* @__PURE__ */ jsxs134(
+  return /* @__PURE__ */ jsx245(EuiFlexItem35, { children: /* @__PURE__ */ jsxs134(
     EuiPanel11,
     {
       css: listContainerStyle,
@@ -53654,10 +53560,10 @@ var WfoSummaryCardList = ({
       paddingSize: "l",
       children: [
         /* @__PURE__ */ jsxs134("div", { children: [
-          /* @__PURE__ */ jsx246("p", { css: listHeaderStyle, children: title }),
-          /* @__PURE__ */ jsx246(EuiSpacer27, { size: "m" }),
-          /* @__PURE__ */ jsx246(EuiSkeletonText, { isLoading, lines: 10, children: /* @__PURE__ */ jsx246("div", { css: [listStyle, euiScrollBarStyle], children: items?.map((item, index) => /* @__PURE__ */ jsxs134("div", { children: [
-            /* @__PURE__ */ jsx246(
+          /* @__PURE__ */ jsx245("p", { css: listHeaderStyle, children: title }),
+          /* @__PURE__ */ jsx245(EuiSpacer27, { size: "m" }),
+          /* @__PURE__ */ jsx245(EuiSkeletonText, { isLoading, lines: 10, children: /* @__PURE__ */ jsx245("div", { css: [listStyle, euiScrollBarStyle], children: items?.map((item, index) => /* @__PURE__ */ jsxs134("div", { children: [
+            /* @__PURE__ */ jsx245(
               WfoSummaryCardListItem,
               {
                 title: item.title,
@@ -53665,11 +53571,11 @@ var WfoSummaryCardList = ({
                 url: item.url
               }
             ),
-            index === items.length - 1 ? null : /* @__PURE__ */ jsx246(EuiHorizontalRule10, { margin: "none" })
+            index === items.length - 1 ? null : /* @__PURE__ */ jsx245(EuiHorizontalRule10, { margin: "none" })
           ] }, index)) }) })
         ] }),
-        /* @__PURE__ */ jsx246(EuiSpacer27, { size: "m" }),
-        button && /* @__PURE__ */ jsx246(
+        /* @__PURE__ */ jsx245(EuiSpacer27, { size: "m" }),
+        button && /* @__PURE__ */ jsx245(
           EuiButton18,
           {
             fullWidth: true,
@@ -53684,10 +53590,10 @@ var WfoSummaryCardList = ({
 
 // src/components/WfoSummary/WfoSummaryCards.tsx
 import { EuiFlexGrid as EuiFlexGrid2, useCurrentEuiBreakpoint } from "@elastic/eui";
-import { jsx as jsx247 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx246 } from "@emotion/react/jsx-runtime";
 var WfoSummaryCards = ({ children }) => {
   const currentBreakpoint = useCurrentEuiBreakpoint();
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx246(
     EuiFlexGrid2,
     {
       responsive: false,
@@ -53714,7 +53620,7 @@ var getWfoSummaryCardsStyles = ({ theme }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCard.tsx
-import { jsx as jsx248, jsxs as jsxs135 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx247, jsxs as jsxs135 } from "@emotion/react/jsx-runtime";
 var SummaryCardStatus = /* @__PURE__ */ ((SummaryCardStatus2) => {
   SummaryCardStatus2["Success"] = "Success";
   SummaryCardStatus2["Error"] = "Error";
@@ -53740,7 +53646,7 @@ var WfoSummaryCard = ({
     switch (status) {
       case "Success" /* Success */:
         return {
-          iconType: () => /* @__PURE__ */ jsx248(
+          iconType: () => /* @__PURE__ */ jsx247(
             WfoCheckmarkCircleFill,
             {
               width: 32,
@@ -53752,7 +53658,7 @@ var WfoSummaryCard = ({
         };
       case "Error" /* Error */:
         return {
-          iconType: () => /* @__PURE__ */ jsx248(
+          iconType: () => /* @__PURE__ */ jsx247(
             WfoXCircleFill,
             {
               width: 32,
@@ -53764,7 +53670,7 @@ var WfoSummaryCard = ({
         };
       case "Neutral" /* Neutral */:
         return {
-          iconType: () => /* @__PURE__ */ jsx248(
+          iconType: () => /* @__PURE__ */ jsx247(
             WfoCubeFill,
             {
               width: 32,
@@ -53776,7 +53682,7 @@ var WfoSummaryCard = ({
         };
       default:
         return headerBadge ?? {
-          iconType: () => /* @__PURE__ */ jsx248(
+          iconType: () => /* @__PURE__ */ jsx247(
             WfoCubeFill,
             {
               width: 32,
@@ -53789,7 +53695,7 @@ var WfoSummaryCard = ({
     }
   };
   return /* @__PURE__ */ jsxs135(EuiFlexItem36, { css: cardContainerStyle, children: [
-    /* @__PURE__ */ jsx248(
+    /* @__PURE__ */ jsx247(
       WfoSummaryCardHeader,
       {
         text: headerTitle,
@@ -53798,8 +53704,8 @@ var WfoSummaryCard = ({
         ...getIconTypeAndColorForHeaderStatus(headerStatus)
       }
     ),
-    /* @__PURE__ */ jsx248(EuiSpacer28, { size: "m" }),
-    /* @__PURE__ */ jsx248(
+    /* @__PURE__ */ jsx247(EuiSpacer28, { size: "m" }),
+    /* @__PURE__ */ jsx247(
       WfoSummaryCardList,
       {
         title: listTitle,
@@ -53909,7 +53815,7 @@ var productsSummaryQueryVariables = {
 };
 
 // src/components/WfoSummary/WfoActiveWorkflowsSummaryCard.tsx
-import { jsx as jsx249 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx248 } from "@emotion/react/jsx-runtime";
 var WfoActiveWorkflowsSummaryCard = () => {
   const t = useTranslations83("startPage.activeWorkflows");
   const {
@@ -53917,7 +53823,7 @@ var WfoActiveWorkflowsSummaryCard = () => {
     isFetching,
     isLoading
   } = useGetProcessListSummaryQuery(activeWorkflowsListSummaryQueryVariables);
-  return /* @__PURE__ */ jsx249(
+  return /* @__PURE__ */ jsx248(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -53937,7 +53843,7 @@ var WfoActiveWorkflowsSummaryCard = () => {
 
 // src/components/WfoSummary/WfoFailedTasksSummaryCard.tsx
 import { useTranslations as useTranslations84 } from "next-intl";
-import { jsx as jsx250 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx249 } from "@emotion/react/jsx-runtime";
 var WfoFailedTasksSummaryCard = () => {
   const t = useTranslations84("startPage.failedTasks");
   const {
@@ -53945,7 +53851,7 @@ var WfoFailedTasksSummaryCard = () => {
     isFetching,
     isLoading
   } = useGetProcessListSummaryQuery(taskListSummaryQueryVariables);
-  return /* @__PURE__ */ jsx250(
+  return /* @__PURE__ */ jsx249(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -53965,7 +53871,7 @@ var WfoFailedTasksSummaryCard = () => {
 
 // src/components/WfoSummary/WfoLatestActiveSubscriptionsSummaryCard.tsx
 import { useTranslations as useTranslations85 } from "next-intl";
-import { jsx as jsx251 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx250 } from "@emotion/react/jsx-runtime";
 var WfoLatestActiveSubscriptionsSummaryCard = () => {
   const t = useTranslations85("startPage.activeSubscriptions");
   const {
@@ -53975,7 +53881,7 @@ var WfoLatestActiveSubscriptionsSummaryCard = () => {
   } = useGetSubscriptionSummaryListQuery(
     subscriptionsListSummaryQueryVariables
   );
-  return /* @__PURE__ */ jsx251(
+  return /* @__PURE__ */ jsx250(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -53995,7 +53901,7 @@ var WfoLatestActiveSubscriptionsSummaryCard = () => {
 
 // src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx
 import { useTranslations as useTranslations86 } from "next-intl";
-import { jsx as jsx252 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx251 } from "@emotion/react/jsx-runtime";
 var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
   const t = useTranslations86("startPage.outOfSyncSubscriptions");
   const {
@@ -54010,7 +53916,7 @@ var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
     ["sortBy" /* SORT_BY */]: "field-startDate_order-ASC",
     ["queryString" /* QUERY_STRING */]: "status:(provisioning|active) insync:false"
   };
-  return /* @__PURE__ */ jsx252(
+  return /* @__PURE__ */ jsx251(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54033,7 +53939,7 @@ var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
 
 // src/components/WfoSummary/WfoMyWorkflowsSummaryCard.tsx
 import { useTranslations as useTranslations87 } from "next-intl";
-import { jsx as jsx253 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx252 } from "@emotion/react/jsx-runtime";
 var WfoMyWorkflowsSummaryCard = ({
   username
 }) => {
@@ -54050,7 +53956,7 @@ var WfoMyWorkflowsSummaryCard = ({
     ["sortBy" /* SORT_BY */]: "field-lastModifiedAt_order-DESC",
     ["queryString" /* QUERY_STRING */]: `createdBy:"${username}"`
   };
-  return /* @__PURE__ */ jsx253(
+  return /* @__PURE__ */ jsx252(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54073,7 +53979,7 @@ var WfoMyWorkflowsSummaryCard = ({
 
 // src/components/WfoSummary/WfoProductsSummaryCard.tsx
 import { useTranslations as useTranslations88 } from "next-intl";
-import { jsx as jsx254, jsxs as jsxs136 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs136 } from "@emotion/react/jsx-runtime";
 var WfoProductsSummaryCard = () => {
   const t = useTranslations88("startPage.products");
   const {
@@ -54093,13 +53999,13 @@ var WfoProductsSummaryCard = () => {
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ jsx254("div", { children: product.name }),
-          /* @__PURE__ */ jsx254("div", { children: product.subscriptions.pageInfo.totalItems || 0 })
+          /* @__PURE__ */ jsx253("div", { children: product.name }),
+          /* @__PURE__ */ jsx253("div", { children: product.subscriptions.pageInfo.totalItems || 0 })
         ]
       }
     )
   })) ?? [];
-  return /* @__PURE__ */ jsx254(
+  return /* @__PURE__ */ jsx253(
     WfoSummaryCard,
     {
       headerTitle: t("headerTitle"),
@@ -54115,7 +54021,7 @@ var WfoProductsSummaryCard = () => {
 
 // src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx
 import { EuiPageHeader as EuiPageHeader3 } from "@elastic/eui";
-import { Fragment as Fragment61, jsx as jsx255, jsxs as jsxs137 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment61, jsx as jsx254, jsxs as jsxs137 } from "@emotion/react/jsx-runtime";
 var WfoTitleWithWebsocketBadge = ({
   title
 }) => {
@@ -54123,9 +54029,9 @@ var WfoTitleWithWebsocketBadge = ({
   const pageTitle = useWebSockets ? /* @__PURE__ */ jsxs137(Fragment61, { children: [
     title,
     " ",
-    /* @__PURE__ */ jsx255(WfoWebsocketStatusBadge, {})
+    /* @__PURE__ */ jsx254(WfoWebsocketStatusBadge, {})
   ] }) : title;
-  return /* @__PURE__ */ jsx255(EuiPageHeader3, { pageTitle });
+  return /* @__PURE__ */ jsx254(EuiPageHeader3, { pageTitle });
 };
 
 // src/components/WfoRadioDropdown/WfoRadioDropdown.tsx
@@ -54136,7 +54042,7 @@ import {
   EuiPopover as EuiPopover9,
   EuiRadioGroup
 } from "@elastic/eui";
-import { jsx as jsx256 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx255 } from "@emotion/react/jsx-runtime";
 var WfoRadioDropdown = ({
   options,
   onUpdateOption,
@@ -54162,16 +54068,16 @@ var WfoRadioDropdown = ({
     id: option.id,
     label: option.label
   }));
-  return /* @__PURE__ */ jsx256(
+  return /* @__PURE__ */ jsx255(
     EuiFlexGroup31,
     {
       gutterSize: "s",
       alignItems: "center",
       justifyContent: "flexEnd",
-      children: /* @__PURE__ */ jsx256(
+      children: /* @__PURE__ */ jsx255(
         EuiPopover9,
         {
-          button: /* @__PURE__ */ jsx256(
+          button: /* @__PURE__ */ jsx255(
             EuiButtonEmpty5,
             {
               size: "s",
@@ -54192,7 +54098,7 @@ var WfoRadioDropdown = ({
           isOpen,
           closePopover: handleClose,
           anchorPosition: "downLeft",
-          children: /* @__PURE__ */ jsx256(
+          children: /* @__PURE__ */ jsx255(
             EuiRadioGroup,
             {
               options: radioGroupOptions,
@@ -54206,6 +54112,102 @@ var WfoRadioDropdown = ({
   );
 };
 
+// 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 jsx256 } from "@emotion/react/jsx-runtime";
+var WfoSubscriptionNoteEdit = ({
+  onlyShowOnHover = false,
+  queryVariables,
+  endpointName,
+  subscriptionId,
+  note
+}) => {
+  const [startProcess] = useStartProcessMutation();
+  const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
+  const triggerNoteModifyWorkflow = (note2) => {
+    const noteModifyPayload = [
+      { subscription_id: subscriptionId },
+      { note: note2 === INVISIBLE_CHARACTER ? "" : note2 }
+    ];
+    startProcess({
+      workflowName: "modify_note",
+      userInputs: noteModifyPayload
+    });
+    updateSub({
+      queryName: endpointName ?? "",
+      subscriptionId,
+      graphQlQueryVariables: queryVariables,
+      note: note2
+    });
+  };
+  return /* @__PURE__ */ jsx256(
+    WfoInlineEdit,
+    {
+      value: note?.trim() ? note : INVISIBLE_CHARACTER,
+      onlyShowOnHover,
+      onSave: triggerNoteModifyWorkflow
+    }
+  );
+};
+
 // src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx
 import { jsx as jsx257 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionDetailNoteEdit = ({ subscriptionId, onlyShowOnHover = false }) => {
@@ -55275,6 +55277,7 @@ export {
   ImsNodeIdField,
   ImsPortIdField,
   IpNetworkField,
+  KEY_CELL_CLASS_NAME,
   LabelField,
   ListAddField,
   ListDelField,
@@ -55364,6 +55367,7 @@ export {
   TreeProvider,
   UnconnectedSelectField,
   UserInputFormWizard,
+  VALUE_CELL_CLASS_NAME,
   VlanField,
   WFO_STATUS_COLOR_FIELD,
   WfoActiveWorkflowsSummaryCard,