@kong-ui-public/entities-consumers 3.5.73 → 3.6.0

package/dist/entities-consumers.es.js

@@ -1,9 +1,9 @@
-import { defineComponent as ie, ref as I, computed as E, watch as ge, resolveComponent as N, openBlock as A, createBlock as ne, unref as o, withCtx as u, createElementVNode as w, toDisplayString as b, createVNode as c, createElementBlock as j, createCommentVNode as te, Fragment as Be, renderList as Ke, onBeforeMount as qe, Teleport as Ne, createTextVNode as se, createSlots as Oe, reactive as we } from "vue";
-import { useRouter as Me } from "vue-router";
-import { AddIcon as je } from "@kong/icons";
-import { createI18n as Le, i18nTComponent as He } from "@kong-ui-public/i18n";
-import { useAxios as ve, useDebouncedFilter as Je, useFetcher as Qe, useDeleteUrlBuilder as We, FetcherStatus as ze, EntityBaseTable as Ye, EntityFilter as Xe, PermissionsWrapper as re, TableTags as Ze, EntityDeleteModal as et, EntityTypes as tt, useErrors as ot, EntityBaseFormType as $e, EntityBaseForm as st, SupportedEntityType as xe, EntityFormSection as nt, ConfigurationSchemaSection as Ee, EntityBaseConfigCard as rt } from "@kong-ui-public/entities-shared";
-const at = {
+import { defineComponent as le, ref as k, computed as M, watch as ge, resolveComponent as N, openBlock as D, createBlock as se, unref as o, withCtx as l, createElementVNode as _, toDisplayString as b, createVNode as c, createElementBlock as L, createCommentVNode as W, Fragment as Oe, renderList as je, onBeforeMount as Le, createSlots as $e, Teleport as He, createTextVNode as re, reactive as Ee } from "vue";
+import { useRouter as xe } from "vue-router";
+import { BookIcon as Je, AddIcon as Qe, TeamIcon as ze } from "@kong/icons";
+import { createI18n as We, i18nTComponent as Ye } from "@kong-ui-public/i18n";
+import { useAxios as ve, useDebouncedFilter as Xe, useTableState as Ze, useFetcher as et, useDeleteUrlBuilder as tt, FetcherStatus as ot, EntityBaseTable as st, EntityFilter as nt, PermissionsWrapper as ae, TableTags as rt, EntityEmptyState as at, EntityDeleteModal as it, EntityTypes as lt, useErrors as ut, EntityBaseFormType as Se, EntityBaseForm as ct, SupportedEntityType as Ae, EntityFormSection as dt, ConfigurationSchemaSection as Me, EntityBaseConfigCard as mt } from "@kong-ui-public/entities-shared";
+const pt = "#00abd2", ft = "24px", gt = {
   list: {
     table_headers: {
       username: "Username",
@@ -16,8 +16,12 @@ const at = {
       description: "Consumers are the end users of a service.",
       title_for_consumer_group: "Configure a New Consumer"
     },
+    empty_state_v2: {
+      title: "Configure your first consumer",
+      description: "Consumers represent users or apps accessing your APIs, allowing for tailored authentication and access control individually."
+    },
     toolbar_actions: {
-      new_consumer: "New Consumer"
+      new_consumer: "New consumer"
     }
   },
   title: "Consumers",
@@ -98,51 +102,51 @@ const at = {
       tooltip: "An optional set of strings associated with the Consumer for grouping and filtering."
     }
   }
-}, it = {
-  consumers: at
+}, vt = {
+  consumers: gt
 };
-function lt() {
-  const e = Le("en-us", it);
+function yt() {
+  const e = We("en-us", vt);
   return {
     i18n: e,
-    i18nT: He(e)
+    i18nT: Ye(e)
     // Translation component <i18n-t>
   };
 }
-const le = {
-  useI18n: lt
-}, Z = "/v2/control-planes/{controlPlaneId}/core-entities", ee = "/{workspace}", z = {
+const ue = {
+  useI18n: yt
+}, te = "/v2/control-planes/{controlPlaneId}/core-entities", oe = "/{workspace}", Y = {
   list: {
     konnect: {
-      all: `${Z}/consumers`,
-      forConsumerGroup: `${Z}/consumer_groups/{consumerGroupId}/consumers`,
-      oneForConsumerGroup: `${Z}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`
+      all: `${te}/consumers`,
+      forConsumerGroup: `${te}/consumer_groups/{consumerGroupId}/consumers`,
+      oneForConsumerGroup: `${te}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`
     },
     kongManager: {
-      all: `${ee}/consumers`,
-      forConsumerGroup: `${ee}/consumer_groups/{consumerGroupId}/consumers`,
-      oneForConsumerGroup: `${ee}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`
+      all: `${oe}/consumers`,
+      forConsumerGroup: `${oe}/consumer_groups/{consumerGroupId}/consumers`,
+      oneForConsumerGroup: `${oe}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`
     }
   },
   form: {
     konnect: {
-      validate: `${Z}/v1/schemas/json/consumer/validate`,
-      create: `${Z}/consumers`,
-      edit: `${Z}/consumers/{id}`
+      validate: `${te}/v1/schemas/json/consumer/validate`,
+      create: `${te}/consumers`,
+      edit: `${te}/consumers/{id}`
     },
     kongManager: {
-      validate: `${ee}/schemas/consumers/validate`,
-      create: `${ee}/consumers`,
-      edit: `${ee}/consumers/{id}`
+      validate: `${oe}/schemas/consumers/validate`,
+      create: `${oe}/consumers`,
+      edit: `${oe}/consumers/{id}`
     }
   }
-}, ut = { class: "add-consumer-form-container" }, ct = { class: "add-consumer-form-cta" }, dt = { class: "select-item-label" }, mt = {
+}, ht = { class: "add-consumer-form-container" }, bt = { class: "add-consumer-form-cta" }, Ct = { class: "select-item-label" }, _t = {
   key: 0,
   class: "select-item-desc"
-}, pt = {
+}, kt = {
   key: 0,
   class: "kong-ui-entity-add-consumers-error"
-}, ft = { key: 0 }, gt = /* @__PURE__ */ ie({
+}, It = { key: 0 }, wt = /* @__PURE__ */ le({
   __name: "AddConsumerModal",
   props: {
     /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
@@ -160,122 +164,122 @@ const le = {
   emits: ["cancel", "add:success", "add:partial-success", "error"],
   setup(e, { emit: m }) {
     var C;
-    const { i18n: { t: r } } = le.useI18n(), t = e, x = m, { axiosInstance: n } = ve((C = t.config) == null ? void 0 : C.axiosRequestConfig), G = I([]), {
-      debouncedQueryChange: M,
-      loading: V,
-      allRecords: B,
+    const { i18n: { t: r } } = ue.useI18n(), t = e, x = m, { axiosInstance: n } = ve((C = t.config) == null ? void 0 : C.axiosRequestConfig), w = k([]), {
+      debouncedQueryChange: G,
+      loading: U,
+      allRecords: H,
       error: p,
-      loadItems: Y,
-      results: L
-    } = Je(
+      loadItems: O,
+      results: X
+    } = Xe(
       t.config,
-      z.list[t.config.app].all,
+      Y.list[t.config.app].all,
       "",
       {
         fetchedItemsKey: "data",
         searchKeys: ["username", "id"]
       }
-    ), P = (l) => l, X = E(() => p.value ? r("consumers.errors.general") : ""), D = I(0), H = E(() => B.value === void 0), J = E(() => L.value.map((l) => ({
-      label: l.username || l.customId,
-      value: l.id,
-      selected: G.value.includes(l.id),
-      data: l
+    ), J = (u) => u, Q = M(() => p.value ? r("consumers.errors.general") : ""), Z = k(0), F = M(() => H.value === void 0), z = M(() => X.value.map((u) => ({
+      label: u.username || u.customId,
+      value: u.id,
+      selected: w.value.includes(u.id),
+      data: u
       // we need this to determine whether or not to show the description text
-    }))), K = (l) => {
-      var g;
-      const f = H.value ? L.value.find((_) => _.id === l) : (g = B.value) == null ? void 0 : g.find((_) => _.id === l);
-      return f ? f.username || f.custom_id : l;
-    }, oe = () => {
-      F.value = "", S.value = [], v.value = [], x("cancel");
-    }, S = I([]), R = I(!1), F = I(""), Q = async () => {
-      if (!G.value.length) {
-        F.value = "", v.value = [], x("cancel");
+    }))), $ = (u) => {
+      var v;
+      const h = F.value ? X.value.find((E) => E.id === u) : (v = H.value) == null ? void 0 : v.find((E) => E.id === u);
+      return h ? h.username || h.custom_id : u;
+    }, ne = () => {
+      P.value = "", B.value = [], f.value = [], x("cancel");
+    }, B = k([]), R = k(!1), P = k(""), K = async () => {
+      if (!w.value.length) {
+        P.value = "", f.value = [], x("cancel");
         return;
       }
-      R.value = !0, F.value = "", S.value = [], v.value = [];
+      R.value = !0, P.value = "", B.value = [], f.value = [];
       try {
-        const l = G.value.map((_) => i(_)), f = await Promise.allSettled(l);
-        let g = !0;
-        f.forEach((_) => {
-          _.status !== "fulfilled" && (g = !1);
-        }), g ? (S.value = [], v.value = [], x("add:success", G.value), G.value = []) : (S.value.length && x("add:partial-success", S.value), G.value = [], U(f));
+        const u = w.value.map((E) => a(E)), h = await Promise.allSettled(u);
+        let v = !0;
+        h.forEach((E) => {
+          E.status !== "fulfilled" && (v = !1);
+        }), v ? (B.value = [], f.value = [], x("add:success", w.value), w.value = []) : (B.value.length && x("add:partial-success", B.value), w.value = [], A(h));
       } catch {
-        F.value = r("consumers.errors.add"), x("error", F.value);
+        P.value = r("consumers.errors.add"), x("error", P.value);
       } finally {
         R.value = !1;
       }
-    }, a = E(() => {
-      var f, g, _, W;
-      let l = `${t.config.apiBaseUrl}${z.list[t.config.app].forConsumerGroup}`;
-      return t.config.app === "konnect" ? l = l.replace(/{controlPlaneId}/gi, ((f = t.config) == null ? void 0 : f.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((g = t.config) == null ? void 0 : g.consumerGroupId) || "") : t.config.app === "kongManager" && (l = l.replace(/\/{workspace}/gi, (_ = t.config) != null && _.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((W = t.config) == null ? void 0 : W.consumerGroupId) || "")), l;
-    }), i = async (l) => {
-      const f = {
-        consumer: l
+    }, i = M(() => {
+      var h, v, E, T;
+      let u = `${t.config.apiBaseUrl}${Y.list[t.config.app].forConsumerGroup}`;
+      return t.config.app === "konnect" ? u = u.replace(/{controlPlaneId}/gi, ((h = t.config) == null ? void 0 : h.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((v = t.config) == null ? void 0 : v.consumerGroupId) || "") : t.config.app === "kongManager" && (u = u.replace(/\/{workspace}/gi, (E = t.config) != null && E.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((T = t.config) == null ? void 0 : T.consumerGroupId) || "")), u;
+    }), a = async (u) => {
+      const h = {
+        consumer: u
       };
       try {
-        const g = await n.post(a.value, f);
-        return S.value.push(l), g;
-      } catch (g) {
-        let _ = `${K(l)} - ${g.message}`;
-        return g.response.status === 409 && (_ = `${K(l)} - ${r("consumers.errors.already_added")}`), Promise.reject(Error(_));
+        const v = await n.post(i.value, h);
+        return B.value.push(u), v;
+      } catch (v) {
+        let E = `${$(u)} - ${v.message}`;
+        return v.response.status === 409 && (E = `${$(u)} - ${r("consumers.errors.already_added")}`), Promise.reject(Error(E));
       }
-    }, v = I([]), U = (l) => {
-      v.value = l.map((f) => {
-        var g;
-        return (g = f.reason) == null ? void 0 : g.message;
+    }, f = k([]), A = (u) => {
+      f.value = u.map((h) => {
+        var v;
+        return (v = h.reason) == null ? void 0 : v.message;
       }).filter(Boolean);
     };
-    return ge(J, () => {
-      D.value++;
+    return ge(z, () => {
+      Z.value++;
     }, { immediate: !0, deep: !0 }), ge(() => t.visible, () => {
-      t.visible && Y();
-    }, { immediate: !0 }), (l, f) => {
-      const g = N("KMultiselect"), _ = N("KAlert"), W = N("KPrompt");
-      return A(), ne(W, {
+      t.visible && O();
+    }, { immediate: !0 }), (u, h) => {
+      const v = N("KMultiselect"), E = N("KAlert"), T = N("KPrompt");
+      return D(), se(T, {
         "action-button-disabled": R.value,
         class: "kong-ui-entities-add-consumers-modal",
         "data-testid": "add-consumer-modal",
         title: o(r)("consumers.consumer_groups.add.title"),
         visible: e.visible,
-        onCancel: oe,
-        onProceed: Q
+        onCancel: ne,
+        onProceed: K
       }, {
-        default: u(() => [
-          w("div", ut, [
-            w("p", ct, b(o(r)("consumers.consumer_groups.add.ctaText")), 1),
-            c(g, {
-              modelValue: G.value,
-              "onUpdate:modelValue": f[0] || (f[0] = (T) => G.value = T),
+        default: l(() => [
+          _("div", ht, [
+            _("p", bt, b(o(r)("consumers.consumer_groups.add.ctaText")), 1),
+            c(v, {
+              modelValue: w.value,
+              "onUpdate:modelValue": h[0] || (h[0] = (V) => w.value = V),
               autosuggest: "",
               "data-testid": "add-consumers-multiselect",
-              "dropdown-footer-text": H.value ? o(r)("consumers.consumer_groups.add.footer") : void 0,
-              items: J.value,
+              "dropdown-footer-text": F.value ? o(r)("consumers.consumer_groups.add.footer") : void 0,
+              items: z.value,
               label: o(r)("consumers.consumer_groups.add.consumers_label"),
-              loading: o(V),
+              loading: o(U),
               placeholder: o(r)("consumers.consumer_groups.add.consumer_placeholder"),
               readonly: R.value,
               required: "",
               width: "100%",
-              onQueryChange: o(M)
+              onQueryChange: o(G)
             }, {
-              "item-template": u(({ item: T }) => [
-                w("div", dt, b(T.label), 1),
-                P(T).data.username && P(T).data.custom_id ? (A(), j("div", mt, b(P(T).data.custom_id), 1)) : te("", !0)
+              "item-template": l(({ item: V }) => [
+                _("div", Ct, b(V.label), 1),
+                J(V).data.username && J(V).data.custom_id ? (D(), L("div", _t, b(J(V).data.custom_id), 1)) : W("", !0)
               ]),
               _: 1
             }, 8, ["modelValue", "dropdown-footer-text", "items", "label", "loading", "placeholder", "readonly", "onQueryChange"]),
-            F.value || X.value || v.value.length ? (A(), j("div", pt, [
-              c(_, { appearance: "danger" }, {
-                default: u(() => [
-                  w("p", null, b(o(r)("consumers.errors.add")), 1),
-                  v.value.length ? (A(), j("ul", ft, [
-                    (A(!0), j(Be, null, Ke(v.value, (T, ue) => (A(), j("li", { key: ue }, b(T), 1))), 128))
-                  ])) : te("", !0),
-                  w("div", null, b(F.value || X.value), 1)
+            P.value || Q.value || f.value.length ? (D(), L("div", kt, [
+              c(E, { appearance: "danger" }, {
+                default: l(() => [
+                  _("p", null, b(o(r)("consumers.errors.add")), 1),
+                  f.value.length ? (D(), L("ul", It, [
+                    (D(!0), L(Oe, null, je(f.value, (V, ee) => (D(), L("li", { key: ee }, b(V), 1))), 128))
+                  ])) : W("", !0),
+                  _("div", null, b(P.value || Q.value), 1)
                 ]),
                 _: 1
               })
-            ])) : te("", !0)
+            ])) : W("", !0)
           ])
         ]),
         _: 1
@@ -287,7 +291,7 @@ const le = {
   for (const [t, x] of m)
     r[t] = x;
   return r;
-}, vt = /* @__PURE__ */ ye(gt, [["__scopeId", "data-v-d54468ab"]]), yt = { class: "kong-ui-entities-consumers-list" }, ht = /* @__PURE__ */ ie({
+}, $t = /* @__PURE__ */ ye(wt, [["__scopeId", "data-v-d54468ab"]]), Et = { class: "kong-ui-entities-consumers-list" }, St = { class: "button-row" }, Mt = { class: "empty-state-icon-gateway" }, Gt = /* @__PURE__ */ le({
   __name: "ConsumerList",
   props: {
     /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
@@ -329,23 +333,33 @@ const le = {
     useActionOutside: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Enables the new empty state design, this prop can be removed when
+     * the khcp-14756-empty-states-m2 FF is removed.
+     */
+    enableV2EmptyStates: {
+      type: Boolean,
+      default: !1
     }
   },
-  emits: ["error", "copy:success", "copy:error", "delete:success", "add:success", "remove:success"],
+  emits: ["error", "click:learn-more", "copy:success", "copy:error", "delete:success", "add:success", "remove:success"],
   setup(e, { emit: m }) {
-    var ke;
-    const r = m, t = e, { i18nT: x, i18n: { t: n } } = le.useI18n(), G = Me(), { axiosInstance: M } = ve((ke = t.config) == null ? void 0 : ke.axiosRequestConfig), V = E(() => t.config.app !== "kongManager" || !!t.config.disableSorting), B = {
+    var we;
+    const r = m, t = e, { i18nT: x, i18n: { t: n } } = ue.useI18n(), w = xe(), { axiosInstance: G } = ve((we = t.config) == null ? void 0 : we.axiosRequestConfig), { hideTableToolbar: U, handleStateChange: H } = Ze(() => F.value), p = M(() => t.config.app !== "kongManager" || !!t.config.disableSorting), O = {
       // the Username column is non-hidable
       username: { label: n("consumers.list.table_headers.username"), searchable: !0, sortable: !0, hidable: !1 },
       custom_id: { label: n("consumers.list.table_headers.custom_id"), searchable: !0, sortable: !0 },
       tags: { label: n("consumers.list.table_headers.tags"), sortable: !1 }
-    }, p = B, Y = (s) => ({
+    }, X = O, J = (s) => ({
       "data-testid": s.username ?? s.custom_id ?? s.id
-    }), L = E(() => {
-      var d, h, k, O;
-      let s = `${t.config.apiBaseUrl}${z.list[t.config.app][D.value ? "forConsumerGroup" : "all"]}`;
-      return t.config.app === "konnect" ? s = s.replace(/{controlPlaneId}/gi, ((d = t.config) == null ? void 0 : d.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((h = t.config) == null ? void 0 : h.consumerGroupId) || "") : t.config.app === "kongManager" && (s = s.replace(/\/{workspace}/gi, (k = t.config) != null && k.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((O = t.config) == null ? void 0 : O.consumerGroupId) || "")), s;
-    }), P = I(""), X = E(() => {
+    }), Q = () => {
+      t.config.consumerGroupId ? be() : w.push(t.config.createRoute);
+    }, Z = M(() => {
+      var d, y, I, j;
+      let s = `${t.config.apiBaseUrl}${Y.list[t.config.app][$.value ? "forConsumerGroup" : "all"]}`;
+      return t.config.app === "konnect" ? s = s.replace(/{controlPlaneId}/gi, ((d = t.config) == null ? void 0 : d.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((y = t.config) == null ? void 0 : y.consumerGroupId) || "") : t.config.app === "kongManager" && (s = s.replace(/\/{workspace}/gi, (I = t.config) != null && I.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((j = t.config) == null ? void 0 : j.consumerGroupId) || "")), s;
+    }), F = k(""), z = M(() => {
       const s = t.config.app === "konnect" || t.config.isExactMatch;
       return s ? {
         isExactMatch: s,
@@ -353,24 +367,24 @@ const le = {
       } : {
         isExactMatch: s,
         fields: {
-          username: B.username,
-          custom_id: B.custom_id
+          username: O.username,
+          custom_id: O.custom_id
         },
         schema: t.config.filterSchema
       };
-    }), D = E(() => !!t.config.consumerGroupId), H = E(
-      () => D.value ? "kong-ui-entities-consumers-list-in-group-page" : "kong-ui-entities-consumers-list"
-    ), J = E(() => D.value && !t.config.paginatedEndpoint ? "consumers" : void 0), {
-      fetcher: K,
-      fetcherState: oe,
-      fetcherCacheKey: S
-    } = Qe({ ...t.config, cacheIdentifier: t.cacheIdentifier }, L.value, J.value), R = () => {
-      P.value = "";
-    }, F = () => {
-      S.value++;
-    }, Q = (s) => s ?? "-", a = I(null), i = (s, d) => {
-      const h = s.id;
-      if (!d(h)) {
+    }), $ = M(() => !!t.config.consumerGroupId), ne = M(
+      () => $.value ? "kong-ui-entities-consumers-list-in-group-page" : "kong-ui-entities-consumers-list"
+    ), B = M(() => $.value && !t.config.paginatedEndpoint ? "consumers" : void 0), {
+      fetcher: R,
+      fetcherState: P,
+      fetcherCacheKey: K
+    } = et({ ...t.config, cacheIdentifier: t.cacheIdentifier }, Z.value, B.value), i = () => {
+      F.value = "";
+    }, a = () => {
+      K.value++;
+    }, f = (s) => s ?? "-", A = k(null), C = (s, d) => {
+      const y = s.id;
+      if (!d(y)) {
         r("copy:error", {
           entity: s,
           field: "id",
@@ -381,11 +395,11 @@ const le = {
       r("copy:success", {
         entity: s,
         field: "id",
-        message: n("consumers.copy.success", { val: h })
+        message: n("consumers.copy.success", { val: y })
       });
-    }, v = (s, d) => {
-      const h = JSON.stringify(s);
-      if (!d(h)) {
+    }, u = (s, d) => {
+      const y = JSON.stringify(s);
+      if (!d(y)) {
         r("copy:error", {
           entity: s,
           message: n("consumers.errors.copy")
@@ -396,208 +410,223 @@ const le = {
         entity: s,
         message: n("consumers.copy.success_brief")
       });
-    }, U = async (s) => {
-      var h;
-      await ((h = t.canRetrieve) == null ? void 0 : h.call(t, s)) && G.push(t.config.getViewRoute(s.id));
-    }, C = (s) => ({
+    }, h = async (s) => {
+      var y;
+      await ((y = t.canRetrieve) == null ? void 0 : y.call(t, s)) && w.push(t.config.getViewRoute(s.id));
+    }, v = (s) => ({
       label: n("consumers.actions.view"),
       to: t.config.getViewRoute(s)
-    }), l = (s) => ({
+    }), E = (s) => ({
       label: n("consumers.actions.edit"),
       to: t.config.getEditRoute(s)
-    }), f = I(void 0), g = I(!1), _ = I(!1), W = I(""), T = We(t.config, L.value), ue = (s) => {
-      f.value = s, g.value = !0;
-    }, Se = () => {
-      g.value = !1;
-    }, De = async () => {
-      var s, d, h;
-      if ((s = f.value) != null && s.id) {
-        _.value = !0;
+    }), T = k(void 0), V = k(!1), ee = k(!1), he = k(""), De = tt(t.config, Z.value), Te = (s) => {
+      T.value = s, V.value = !0;
+    }, Ve = () => {
+      V.value = !1;
+    }, Re = async () => {
+      var s, d, y;
+      if ((s = T.value) != null && s.id) {
+        ee.value = !0;
         try {
-          await M.delete(T(f.value.id)), _.value = !1, g.value = !1, S.value++, r("delete:success", f.value);
-        } catch (k) {
-          W.value = ((h = (d = k.response) == null ? void 0 : d.data) == null ? void 0 : h.message) || k.message || n("consumers.errors.delete"), r("error", k);
+          await G.delete(De(T.value.id)), ee.value = !1, V.value = !1, K.value++, r("delete:success", T.value);
+        } catch (I) {
+          he.value = ((y = (d = I.response) == null ? void 0 : d.data) == null ? void 0 : y.message) || I.message || n("consumers.errors.delete"), r("error", I);
         } finally {
-          _.value = !1;
+          ee.value = !1;
         }
       }
-    }, ce = I(!1), he = () => {
+    }, ce = k(!1), be = () => {
       ce.value = !0;
-    }, be = () => {
+    }, Ce = () => {
       ce.value = !1;
-    }, Ce = (s, d) => {
-      d || be(), S.value++, r("add:success", s);
-    }, Ae = () => {
-      D.value && he();
-    }, q = I(void 0), de = I(!1), Re = I(""), Ve = (s) => {
+    }, _e = (s, d) => {
+      d || Ce(), K.value++, r("add:success", s);
+    }, Ue = () => {
+      $.value && be();
+    }, q = k(void 0), de = k(!1), Fe = k(""), Pe = (s) => {
       q.value = s, de.value = !0;
-    }, _e = () => {
+    }, ke = () => {
       de.value = !1, q.value = void 0;
-    }, Fe = E(() => {
-      var d, h, k, O;
-      let s = `${t.config.apiBaseUrl}${z.list[t.config.app].oneForConsumerGroup}`;
-      return t.config.app === "konnect" ? s = s.replace(/{controlPlaneId}/gi, ((d = t.config) == null ? void 0 : d.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((h = t.config) == null ? void 0 : h.consumerGroupId) || "") : t.config.app === "kongManager" && (s = s.replace(/\/{workspace}/gi, (k = t.config) != null && k.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((O = t.config) == null ? void 0 : O.consumerGroupId) || "")), s;
-    }), Ie = I(!1), Ue = async () => {
+    }, Be = M(() => {
+      var d, y, I, j;
+      let s = `${t.config.apiBaseUrl}${Y.list[t.config.app].oneForConsumerGroup}`;
+      return t.config.app === "konnect" ? s = s.replace(/{controlPlaneId}/gi, ((d = t.config) == null ? void 0 : d.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((y = t.config) == null ? void 0 : y.consumerGroupId) || "") : t.config.app === "kongManager" && (s = s.replace(/\/{workspace}/gi, (I = t.config) != null && I.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((j = t.config) == null ? void 0 : j.consumerGroupId) || "")), s;
+    }), Ie = k(!1), Ke = async () => {
       if (q.value) {
         Ie.value = !0;
         try {
-          const s = Fe.value.replace(/{consumerId}/gi, q.value.id);
-          await M.delete(s), r("remove:success", q.value), _e(), S.value++;
+          const s = Be.value.replace(/{consumerId}/gi, q.value.id);
+          await G.delete(s), r("remove:success", q.value), ke(), K.value++;
         } catch (s) {
-          Re.value = s.message || n("consumers.errors.delete"), r("error", s);
+          Fe.value = s.message || n("consumers.errors.delete"), r("error", s);
         } finally {
           Ie.value = !1;
         }
       }
     };
-    ge(oe, (s) => {
-      var d, h, k;
-      if (s.status === ze.Error) {
-        a.value = {
+    ge(P, (s) => {
+      var d, y, I;
+      if (s.status === ot.Error) {
+        A.value = {
           title: n("consumers.errors.general")
-        }, (k = (h = (d = s.error) == null ? void 0 : d.response) == null ? void 0 : h.data) != null && k.message && (a.value.message = s.error.response.data.message), r("error", s.error);
+        }, (I = (y = (d = s.error) == null ? void 0 : d.response) == null ? void 0 : y.data) != null && I.message && (A.value.message = s.error.response.data.message), r("error", s.error);
         return;
       }
-      a.value = null;
+      A.value = null;
     });
-    const me = I({
-      ctaPath: D.value ? void 0 : t.config.createRoute,
+    const me = k({
+      ctaPath: $.value ? void 0 : t.config.createRoute,
       ctaText: void 0,
       message: `${n("consumers.list.empty_state.description")}${t.config.additionMessageForEmptyState ? ` ${t.config.additionMessageForEmptyState}` : ""}`,
       title: n("consumers.title")
     });
-    return qe(async () => {
-      await t.canCreate() && (me.value.title = D.value ? n("consumers.list.empty_state.title_for_consumer_group") : n("consumers.list.empty_state.title"), me.value.ctaText = D.value ? n("consumers.actions.add_consumer") : n("consumers.actions.create"));
+    return Le(async () => {
+      await t.canCreate() && (me.value.title = $.value ? n("consumers.list.empty_state.title_for_consumer_group") : n("consumers.list.empty_state.title"), me.value.ctaText = $.value ? n("consumers.actions.add_consumer") : n("consumers.actions.create"));
     }), (s, d) => {
-      const h = N("KButton"), k = N("KDropdownItem"), O = N("KClipboardProvider"), Pe = N("KPrompt");
-      return A(), j("div", yt, [
-        c(o(Ye), {
+      const y = N("KButton"), I = N("KDropdownItem"), j = N("KClipboardProvider"), qe = N("KPrompt");
+      return D(), L("div", Et, [
+        c(o(st), {
           "cache-identifier": e.cacheIdentifier,
-          "disable-sorting": V.value,
+          "disable-sorting": p.value,
           "empty-state-options": me.value,
           "enable-entity-actions": "",
-          "error-message": a.value,
-          fetcher: o(K),
-          "fetcher-cache-key": o(S),
-          "hide-pagination": D.value && !e.config.paginatedEndpoint,
+          "error-message": A.value,
+          fetcher: o(R),
+          "fetcher-cache-key": o(K),
+          "hide-pagination": $.value && !e.config.paginatedEndpoint,
           "pagination-type": "offset",
-          "preferences-storage-key": H.value,
-          query: P.value,
-          "row-attributes": Y,
-          "table-headers": o(p),
-          onClearSearchInput: R,
-          "onClick:row": d[2] || (d[2] = (y) => U(y)),
-          onEmptyStateCtaClicked: Ae,
-          onSort: F
-        }, {
-          "toolbar-filter": u(() => [
-            D.value ? te("", !0) : (A(), ne(o(Xe), {
+          "preferences-storage-key": ne.value,
+          query: F.value,
+          "row-attributes": J,
+          "table-headers": o(X),
+          onClearSearchInput: i,
+          "onClick:row": d[3] || (d[3] = (g) => h(g)),
+          onEmptyStateCtaClicked: Ue,
+          onSort: a,
+          onState: o(H)
+        }, $e({
+          "toolbar-filter": l(() => [
+            $.value ? W("", !0) : (D(), se(o(nt), {
               key: 0,
-              modelValue: P.value,
-              "onUpdate:modelValue": d[0] || (d[0] = (y) => P.value = y),
-              config: X.value
+              modelValue: F.value,
+              "onUpdate:modelValue": d[0] || (d[0] = (g) => F.value = g),
+              config: z.value
             }, null, 8, ["modelValue", "config"]))
           ]),
-          "toolbar-button": u(() => [
-            (A(), ne(Ne, {
+          "toolbar-button": l(() => [
+            (D(), se(He, {
               disabled: !e.useActionOutside,
               to: "#kong-ui-app-page-header-action-button"
             }, [
-              c(o(re), {
-                "auth-function": () => e.canCreate()
-              }, {
-                default: u(() => [
-                  c(h, {
-                    appearance: "primary",
-                    "data-testid": "toolbar-add-consumer",
-                    size: e.useActionOutside ? "medium" : "large",
-                    to: e.config.consumerGroupId ? void 0 : e.config.createRoute,
-                    onClick: d[1] || (d[1] = () => e.config.consumerGroupId ? he() : void 0)
-                  }, {
-                    default: u(() => [
-                      c(o(je)),
-                      se(" " + b(e.config.consumerGroupId ? o(n)("consumers.actions.add_consumer") : o(n)("consumers.list.toolbar_actions.new_consumer")), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["size", "to"])
-                ]),
-                _: 1
-              }, 8, ["auth-function"])
+              _("div", St, [
+                !o(U) && e.config.app === "konnect" ? (D(), se(y, {
+                  key: 0,
+                  appearance: "secondary",
+                  class: "open-learning-hub",
+                  "data-testid": "consumers-learn-more-button",
+                  icon: "",
+                  onClick: d[1] || (d[1] = (g) => s.$emit("click:learn-more"))
+                }, {
+                  default: l(() => [
+                    c(o(Je), { decorative: "" })
+                  ]),
+                  _: 1
+                })) : W("", !0),
+                c(o(ae), {
+                  "auth-function": () => e.canCreate()
+                }, {
+                  default: l(() => [
+                    c(y, {
+                      appearance: "primary",
+                      "data-testid": "toolbar-add-consumer",
+                      size: e.useActionOutside ? "medium" : "large",
+                      onClick: Q
+                    }, {
+                      default: l(() => [
+                        c(o(Qe)),
+                        re(" " + b(e.config.consumerGroupId ? o(n)("consumers.actions.add_consumer") : o(n)("consumers.list.toolbar_actions.new_consumer")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["size"])
+                  ]),
+                  _: 1
+                }, 8, ["auth-function"])
+              ])
             ], 8, ["disabled"]))
           ]),
-          username: u(({ rowValue: y }) => [
-            w("b", null, b(Q(y)), 1)
+          username: l(({ rowValue: g }) => [
+            _("b", null, b(f(g)), 1)
           ]),
-          custom_id: u(({ rowValue: y }) => [
-            se(b(Q(y)), 1)
+          custom_id: l(({ rowValue: g }) => [
+            re(b(f(g)), 1)
           ]),
-          tags: u(({ rowValue: y }) => [
-            c(o(Ze), { tags: y }, null, 8, ["tags"])
+          tags: l(({ rowValue: g }) => [
+            c(o(rt), { tags: g }, null, 8, ["tags"])
           ]),
-          actions: u(({ row: y }) => [
-            c(O, null, {
-              default: u(({ copyToClipboard: pe }) => [
-                c(k, {
+          actions: l(({ row: g }) => [
+            c(j, null, {
+              default: l(({ copyToClipboard: pe }) => [
+                c(I, {
                   "data-testid": "action-entity-copy-id",
-                  onClick: (Te) => i(y, pe)
+                  onClick: (Ne) => C(g, pe)
                 }, {
-                  default: u(() => [
-                    se(b(o(n)("consumers.actions.copy_id")), 1)
+                  default: l(() => [
+                    re(b(o(n)("consumers.actions.copy_id")), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"])
               ]),
               _: 2
             }, 1024),
-            c(O, null, {
-              default: u(({ copyToClipboard: pe }) => [
-                c(k, {
+            c(j, null, {
+              default: l(({ copyToClipboard: pe }) => [
+                c(I, {
                   "data-testid": "action-entity-copy-json",
-                  onClick: (Te) => v(y, pe)
+                  onClick: (Ne) => u(g, pe)
                 }, {
-                  default: u(() => [
-                    se(b(o(n)("consumers.actions.copy_json")), 1)
+                  default: l(() => [
+                    re(b(o(n)("consumers.actions.copy_json")), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"])
               ]),
               _: 2
             }, 1024),
-            c(o(re), {
-              "auth-function": () => e.canRetrieve(y)
+            c(o(ae), {
+              "auth-function": () => e.canRetrieve(g)
             }, {
-              default: u(() => [
-                c(k, {
+              default: l(() => [
+                c(I, {
                   "data-testid": "action-entity-view",
                   "has-divider": "",
-                  item: C(y.id)
+                  item: v(g.id)
                 }, null, 8, ["item"])
               ]),
               _: 2
             }, 1032, ["auth-function"]),
-            c(o(re), {
-              "auth-function": () => e.canEdit(y)
+            c(o(ae), {
+              "auth-function": () => e.canEdit(g)
             }, {
-              default: u(() => [
-                c(k, {
+              default: l(() => [
+                c(I, {
                   "data-testid": "action-entity-edit",
-                  item: l(y.id)
+                  item: E(g.id)
                 }, null, 8, ["item"])
               ]),
               _: 2
             }, 1032, ["auth-function"]),
-            c(o(re), {
-              "auth-function": () => e.canDelete(y)
+            c(o(ae), {
+              "auth-function": () => e.canDelete(g)
             }, {
-              default: u(() => [
-                c(k, {
+              default: l(() => [
+                c(I, {
                   danger: "",
                   "data-testid": "action-entity-delete",
                   "has-divider": "",
-                  onClick: () => e.config.consumerGroupId ? Ve(y) : ue(y)
+                  onClick: () => e.config.consumerGroupId ? Pe(g) : Te(g)
                 }, {
-                  default: u(() => [
-                    se(b(e.config.consumerGroupId ? o(n)("consumers.actions.remove") : o(n)("consumers.actions.delete")), 1)
+                  default: l(() => [
+                    re(b(e.config.consumerGroupId ? o(n)("consumers.actions.remove") : o(n)("consumers.actions.delete")), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"])
@@ -605,89 +634,116 @@ const le = {
               _: 2
             }, 1032, ["auth-function"])
           ]),
-          _: 1
-        }, 8, ["cache-identifier", "disable-sorting", "empty-state-options", "error-message", "fetcher", "fetcher-cache-key", "hide-pagination", "preferences-storage-key", "query", "table-headers"]),
-        c(o(et), {
-          "action-button-disabled": _.value,
+          _: 2
+        }, [
+          e.enableV2EmptyStates && e.config.app === "konnect" ? {
+            name: "empty-state",
+            fn: l(() => [
+              c(o(at), {
+                "action-button-text": o(n)("consumers.list.toolbar_actions.new_consumer"),
+                appearance: "secondary",
+                "can-create": () => e.canCreate(),
+                description: o(n)("consumers.list.empty_state_v2.description"),
+                "learn-more": e.config.app === "konnect",
+                title: o(n)("consumers.list.empty_state_v2.title"),
+                "onClick:create": Q,
+                "onClick:learnMore": d[2] || (d[2] = (g) => s.$emit("click:learn-more"))
+              }, {
+                image: l(() => [
+                  _("div", Mt, [
+                    c(o(ze), {
+                      color: o(pt),
+                      size: o(ft)
+                    }, null, 8, ["color", "size"])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["action-button-text", "can-create", "description", "learn-more", "title"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["cache-identifier", "disable-sorting", "empty-state-options", "error-message", "fetcher", "fetcher-cache-key", "hide-pagination", "preferences-storage-key", "query", "table-headers", "onState"]),
+        c(o(it), {
+          "action-button-disabled": ee.value,
           "data-testid": "delete-consumer-modal",
           description: o(n)("consumers.delete.description"),
-          "entity-name": f.value && (f.value.username || f.value.custom_id || f.value.id),
-          "entity-type": o(tt).Consumer,
-          error: W.value,
+          "entity-name": T.value && (T.value.username || T.value.custom_id || T.value.id),
+          "entity-type": o(lt).Consumer,
+          error: he.value,
           title: o(n)("consumers.delete.title"),
-          visible: g.value,
-          onCancel: Se,
-          onProceed: De
+          visible: V.value,
+          onCancel: Ve,
+          onProceed: Re
         }, null, 8, ["action-button-disabled", "description", "entity-name", "entity-type", "error", "title", "visible"]),
-        e.config.consumerGroupId ? (A(), ne(vt, {
+        e.config.consumerGroupId ? (D(), se($t, {
           key: 0,
           config: e.config,
           "data-testid": "add-consumer-modal",
           visible: ce.value,
-          "onAdd:partialSuccess": d[3] || (d[3] = (y) => Ce(y, !0)),
-          "onAdd:success": d[4] || (d[4] = (y) => Ce(y)),
-          onCancel: be
-        }, null, 8, ["config", "visible"])) : te("", !0),
-        e.config.consumerGroupId && q.value ? (A(), ne(Pe, {
+          "onAdd:partialSuccess": d[4] || (d[4] = (g) => _e(g, !0)),
+          "onAdd:success": d[5] || (d[5] = (g) => _e(g)),
+          onCancel: Ce
+        }, null, 8, ["config", "visible"])) : W("", !0),
+        e.config.consumerGroupId && q.value ? (D(), se(qe, {
           key: 1,
           "action-button-appearance": "danger",
           "data-testid": "remove-consumer-modal",
           title: o(n)("consumers.consumer_groups.remove.title"),
           visible: de.value,
-          onCancel: _e,
-          onProceed: Ue
+          onCancel: ke,
+          onProceed: Ke
         }, {
-          default: u(() => [
+          default: l(() => [
             c(o(x), {
               class: "message",
               keypath: e.config.consumerGroupName ? "consumers.consumer_groups.remove.confirmation" : "consumers.consumer_groups.remove.confirmationNoCG",
               tag: "p"
-            }, Oe({
-              consumer: u(() => [
-                w("strong", null, b(q.value.username || q.value.custom_id || q.value.id), 1)
+            }, $e({
+              consumer: l(() => [
+                _("strong", null, b(q.value.username || q.value.custom_id || q.value.id), 1)
               ]),
               _: 2
             }, [
               e.config.consumerGroupName ? {
                 name: "consumerGroup",
-                fn: u(() => [
-                  w("strong", null, b(e.config.consumerGroupName), 1)
+                fn: l(() => [
+                  _("strong", null, b(e.config.consumerGroupName), 1)
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["keypath"]),
-            w("p", null, b(o(n)("consumers.consumer_groups.remove.description")), 1)
+            _("p", null, b(o(n)("consumers.consumer_groups.remove.description")), 1)
           ]),
           _: 1
-        }, 8, ["title", "visible"])) : te("", !0)
+        }, 8, ["title", "visible"])) : W("", !0)
       ]);
     };
   }
-}), Ft = /* @__PURE__ */ ye(ht, [["__scopeId", "data-v-f62aedbb"]]);
-var $ = [];
+}), Ht = /* @__PURE__ */ ye(Gt, [["__scopeId", "data-v-fdcf3193"]]);
+var S = [];
 for (var fe = 0; fe < 256; ++fe)
-  $.push((fe + 256).toString(16).slice(1));
-function bt(e, m = 0) {
-  return ($[e[m + 0]] + $[e[m + 1]] + $[e[m + 2]] + $[e[m + 3]] + "-" + $[e[m + 4]] + $[e[m + 5]] + "-" + $[e[m + 6]] + $[e[m + 7]] + "-" + $[e[m + 8]] + $[e[m + 9]] + "-" + $[e[m + 10]] + $[e[m + 11]] + $[e[m + 12]] + $[e[m + 13]] + $[e[m + 14]] + $[e[m + 15]]).toLowerCase();
+  S.push((fe + 256).toString(16).slice(1));
+function xt(e, m = 0) {
+  return (S[e[m + 0]] + S[e[m + 1]] + S[e[m + 2]] + S[e[m + 3]] + "-" + S[e[m + 4]] + S[e[m + 5]] + "-" + S[e[m + 6]] + S[e[m + 7]] + "-" + S[e[m + 8]] + S[e[m + 9]] + "-" + S[e[m + 10]] + S[e[m + 11]] + S[e[m + 12]] + S[e[m + 13]] + S[e[m + 14]] + S[e[m + 15]]).toLowerCase();
 }
-var ae, Ct = new Uint8Array(16);
-function _t() {
-  if (!ae && (ae = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !ae))
+var ie, At = new Uint8Array(16);
+function Dt() {
+  if (!ie && (ie = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !ie))
     throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-  return ae(Ct);
+  return ie(At);
 }
-var It = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var Tt = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 const Ge = {
-  randomUUID: It
+  randomUUID: Tt
 };
-function kt(e, m, r) {
+function Vt(e, m, r) {
   if (Ge.randomUUID && !m && !e)
     return Ge.randomUUID();
   e = e || {};
-  var t = e.random || (e.rng || _t)();
-  return t[6] = t[6] & 15 | 64, t[8] = t[8] & 63 | 128, bt(t);
+  var t = e.random || (e.rng || Dt)();
+  return t[6] = t[6] & 15 | 64, t[8] = t[8] & 63 | 128, xt(t);
 }
-const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { class: "fields-group-text" }, Gt = ["aria-labelledby"], Mt = /* @__PURE__ */ ie({
+const Rt = { class: "kong-ui-entities-consumer-form" }, Ut = ["id"], Ft = { class: "fields-group-text" }, Pt = ["aria-labelledby"], Bt = /* @__PURE__ */ le({
   __name: "ConsumerForm",
   props: {
     /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
@@ -705,8 +761,8 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
   },
   emits: ["update", "error", "loading"],
   setup(e, { emit: m }) {
-    var Q;
-    const r = e, t = m, { i18nT: x, i18n: { t: n } } = le.useI18n(), G = Me(), { axiosInstance: M } = ve((Q = r.config) == null ? void 0 : Q.axiosRequestConfig), { getMessageFromError: V } = ot(), B = kt(), p = we({
+    var K;
+    const r = e, t = m, { i18nT: x, i18n: { t: n } } = ue.useI18n(), w = xe(), { axiosInstance: G } = ve((K = r.config) == null ? void 0 : K.axiosRequestConfig), { getMessageFromError: U } = ut(), H = Vt(), p = Ee({
       fields: {
         username: "",
         customId: "",
@@ -714,89 +770,89 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
       },
       readonly: !1,
       errorMessage: ""
-    }), Y = we({
+    }), O = Ee({
       username: "",
       customId: "",
       tags: ""
-    }), L = E(() => {
-      var a, i;
-      return (i = z.form[(a = r.config) == null ? void 0 : a.app]) == null ? void 0 : i.edit;
-    }), P = () => {
-      var a;
-      G.push(((a = r.config) == null ? void 0 : a.cancelRoute) || { name: "consumer-list" });
-    }, X = (a) => {
-      t("loading", a);
-    }, D = (a) => {
-      t("error", a);
-    }, H = (a) => {
-      var v, U, C;
-      p.fields.username = ((v = a == null ? void 0 : a.item) == null ? void 0 : v.username) || (a == null ? void 0 : a.username) || "", p.fields.customId = ((U = a == null ? void 0 : a.item) == null ? void 0 : U.custom_id) || (a == null ? void 0 : a.custom_id) || "";
-      const i = ((C = a == null ? void 0 : a.item) == null ? void 0 : C.tags) || (a == null ? void 0 : a.tags) || [];
-      p.fields.tags = (i == null ? void 0 : i.join(", ")) || "", Object.assign(Y, p.fields);
-    }, J = E(() => r.consumerId ? $e.Edit : $e.Create), K = (a) => {
-      var v, U, C, l, f, g;
-      let i = `${(v = r.config) == null ? void 0 : v.apiBaseUrl}${z.form[(U = r.config) == null ? void 0 : U.app][a]}`;
-      return ((C = r.config) == null ? void 0 : C.app) === "konnect" ? i = i.replace(/{controlPlaneId}/gi, ((l = r.config) == null ? void 0 : l.controlPlaneId) || "") : ((f = r.config) == null ? void 0 : f.app) === "kongManager" && (i = i.replace(/\/{workspace}/gi, (g = r.config) != null && g.workspace ? `/${r.config.workspace}` : "")), i = i.replace(/{id}/gi, r.consumerId), i;
-    }, oe = E(() => !!p.fields.username || !!p.fields.customId), S = E(() => JSON.stringify(p.fields) !== JSON.stringify(Y)), R = E(() => {
-      var a, i;
+    }), X = M(() => {
+      var i, a;
+      return (a = Y.form[(i = r.config) == null ? void 0 : i.app]) == null ? void 0 : a.edit;
+    }), J = () => {
+      var i;
+      w.push(((i = r.config) == null ? void 0 : i.cancelRoute) || { name: "consumer-list" });
+    }, Q = (i) => {
+      t("loading", i);
+    }, Z = (i) => {
+      t("error", i);
+    }, F = (i) => {
+      var f, A, C;
+      p.fields.username = ((f = i == null ? void 0 : i.item) == null ? void 0 : f.username) || (i == null ? void 0 : i.username) || "", p.fields.customId = ((A = i == null ? void 0 : i.item) == null ? void 0 : A.custom_id) || (i == null ? void 0 : i.custom_id) || "";
+      const a = ((C = i == null ? void 0 : i.item) == null ? void 0 : C.tags) || (i == null ? void 0 : i.tags) || [];
+      p.fields.tags = (a == null ? void 0 : a.join(", ")) || "", Object.assign(O, p.fields);
+    }, z = M(() => r.consumerId ? Se.Edit : Se.Create), $ = (i) => {
+      var f, A, C, u, h, v;
+      let a = `${(f = r.config) == null ? void 0 : f.apiBaseUrl}${Y.form[(A = r.config) == null ? void 0 : A.app][i]}`;
+      return ((C = r.config) == null ? void 0 : C.app) === "konnect" ? a = a.replace(/{controlPlaneId}/gi, ((u = r.config) == null ? void 0 : u.controlPlaneId) || "") : ((h = r.config) == null ? void 0 : h.app) === "kongManager" && (a = a.replace(/\/{workspace}/gi, (v = r.config) != null && v.workspace ? `/${r.config.workspace}` : "")), a = a.replace(/{id}/gi, r.consumerId), a;
+    }, ne = M(() => !!p.fields.username || !!p.fields.customId), B = M(() => JSON.stringify(p.fields) !== JSON.stringify(O)), R = M(() => {
+      var i, a;
       return {
         username: p.fields.username || null,
         custom_id: p.fields.customId || null,
-        tags: (i = (a = p.fields.tags.split(",")) == null ? void 0 : a.map((v) => String(v || "").trim())) == null ? void 0 : i.filter((v) => v !== "")
+        tags: (a = (i = p.fields.tags.split(",")) == null ? void 0 : i.map((f) => String(f || "").trim())) == null ? void 0 : a.filter((f) => f !== "")
       };
-    }), F = async () => {
-      var a;
+    }), P = async () => {
+      var i;
       try {
         p.readonly = !0;
-        let i;
-        await M.post(K("validate"), R.value), J.value === "create" ? i = await M.post(K("create"), R.value) : J.value === "edit" && (i = ((a = r.config) == null ? void 0 : a.app) === "konnect" ? await M.put(K("edit"), R.value) : await M.patch(K("edit"), R.value)), H(i == null ? void 0 : i.data), t("update", i == null ? void 0 : i.data);
-      } catch (i) {
-        p.errorMessage = V(i), t("error", i);
+        let a;
+        await G.post($("validate"), R.value), z.value === "create" ? a = await G.post($("create"), R.value) : z.value === "edit" && (a = ((i = r.config) == null ? void 0 : i.app) === "konnect" ? await G.put($("edit"), R.value) : await G.patch($("edit"), R.value)), F(a == null ? void 0 : a.data), t("update", a == null ? void 0 : a.data);
+      } catch (a) {
+        p.errorMessage = U(a), t("error", a);
       } finally {
         p.readonly = !1;
       }
     };
-    return (a, i) => {
-      const v = N("KInput"), U = N("KCard");
-      return A(), j("div", wt, [
-        c(o(st), {
-          "can-submit": oe.value && S.value,
+    return (i, a) => {
+      const f = N("KInput"), A = N("KCard");
+      return D(), L("div", Rt, [
+        c(o(ct), {
+          "can-submit": ne.value && B.value,
           config: e.config,
           "edit-id": e.consumerId,
-          "entity-type": o(xe).Consumer,
+          "entity-type": o(Ae).Consumer,
           "error-message": p.errorMessage,
-          "fetch-url": L.value,
+          "fetch-url": X.value,
           "form-fields": R.value,
           "is-readonly": p.readonly,
-          onCancel: P,
-          "onFetch:error": i[3] || (i[3] = (C) => D(C)),
-          "onFetch:success": H,
-          onLoading: i[4] || (i[4] = (C) => X(C)),
-          onSubmit: F
+          onCancel: J,
+          "onFetch:error": a[3] || (a[3] = (C) => Z(C)),
+          "onFetch:success": F,
+          onLoading: a[4] || (a[4] = (C) => Q(C)),
+          onSubmit: P
         }, {
-          default: u(() => [
-            w("div", null, [
-              c(o(nt), {
+          default: l(() => [
+            _("div", null, [
+              c(o(dt), {
                 description: o(n)("consumers.form.info.description"),
                 "has-divider": "",
                 title: o(n)("consumers.form.info.title")
               }, {
-                default: u(() => [
-                  w("div", null, [
-                    w("h3", {
-                      id: `fields-group-title-${o(B)}`,
+                default: l(() => [
+                  _("div", null, [
+                    _("h3", {
+                      id: `fields-group-title-${o(H)}`,
                       class: "fields-group-title"
-                    }, b(o(n)("consumers.form.consumer_identification.title")) + "* ", 9, $t),
-                    w("p", Et, b(o(n)("consumers.form.consumer_identification.description")), 1)
+                    }, b(o(n)("consumers.form.consumer_identification.title")) + "* ", 9, Ut),
+                    _("p", Ft, b(o(n)("consumers.form.consumer_identification.description")), 1)
                   ]),
-                  c(U, null, {
-                    default: u(() => [
-                      w("fieldset", {
-                        "aria-labelledby": `fields-group-title-${o(B)}`
+                  c(A, null, {
+                    default: l(() => [
+                      _("fieldset", {
+                        "aria-labelledby": `fields-group-title-${o(H)}`
                       }, [
-                        c(v, {
+                        c(f, {
                           modelValue: p.fields.username,
-                          "onUpdate:modelValue": i[0] || (i[0] = (C) => p.fields.username = C),
+                          "onUpdate:modelValue": a[0] || (a[0] = (C) => p.fields.username = C),
                           modelModifiers: { trim: !0 },
                           autocomplete: "off",
                           class: "username-field",
@@ -807,22 +863,22 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
                           readonly: p.readonly,
                           type: "text"
                         }, {
-                          "label-tooltip": u(() => [
+                          "label-tooltip": l(() => [
                             c(o(x), {
                               keypath: "consumers.fields.username.tooltip",
                               scope: "global"
                             }, {
-                              custom_id: u(() => [
-                                w("code", null, b(o(n)("consumers.fields.username.custom_id")), 1)
+                              custom_id: l(() => [
+                                _("code", null, b(o(n)("consumers.fields.username.custom_id")), 1)
                               ]),
                               _: 1
                             })
                           ]),
                           _: 1
                         }, 8, ["modelValue", "label", "placeholder", "readonly"]),
-                        c(v, {
+                        c(f, {
                           modelValue: p.fields.customId,
-                          "onUpdate:modelValue": i[1] || (i[1] = (C) => p.fields.customId = C),
+                          "onUpdate:modelValue": a[1] || (a[1] = (C) => p.fields.customId = C),
                           modelModifiers: { trim: !0 },
                           autocomplete: "off",
                           "data-testid": "consumer-form-custom-id",
@@ -832,26 +888,26 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
                           readonly: p.readonly,
                           type: "text"
                         }, {
-                          "label-tooltip": u(() => [
+                          "label-tooltip": l(() => [
                             c(o(x), {
                               keypath: "consumers.fields.custom_id.tooltip",
                               scope: "global"
                             }, {
-                              username: u(() => [
-                                w("code", null, b(o(n)("consumers.fields.custom_id.username")), 1)
+                              username: l(() => [
+                                _("code", null, b(o(n)("consumers.fields.custom_id.username")), 1)
                               ]),
                               _: 1
                             })
                           ]),
                           _: 1
                         }, 8, ["modelValue", "label", "placeholder", "readonly"])
-                      ], 8, Gt)
+                      ], 8, Pt)
                     ]),
                     _: 1
                   }),
-                  c(v, {
+                  c(f, {
                     modelValue: p.fields.tags,
-                    "onUpdate:modelValue": i[2] || (i[2] = (C) => p.fields.tags = C),
+                    "onUpdate:modelValue": a[2] || (a[2] = (C) => p.fields.tags = C),
                     modelModifiers: { trim: !0 },
                     autocomplete: "off",
                     "data-testid": "consumer-form-tags",
@@ -875,7 +931,7 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
       ]);
     };
   }
-}), Ut = /* @__PURE__ */ ye(Mt, [["__scopeId", "data-v-5580f86e"]]), xt = { class: "kong-ui-consumer-entity-config-card" }, Pt = /* @__PURE__ */ ie({
+}), Jt = /* @__PURE__ */ ye(Bt, [["__scopeId", "data-v-5580f86e"]]), Kt = { class: "kong-ui-consumer-entity-config-card" }, Qt = /* @__PURE__ */ le({
   __name: "ConsumerConfigCard",
   props: {
     /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
@@ -902,15 +958,15 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
   },
   emits: ["loading", "fetch:error", "fetch:success"],
   setup(e) {
-    const m = e, { i18n: { t: r }, i18nT: t } = le.useI18n(), x = E(() => z.form[m.config.app].edit), n = I({
+    const m = e, { i18n: { t: r }, i18nT: t } = ue.useI18n(), x = M(() => Y.form[m.config.app].edit), n = k({
       id: {},
       username: {
-        section: Ee.Basic,
+        section: Me.Basic,
         tooltip: r("consumers.fields.username.tooltip"),
         order: 1
       },
       custom_id: {
-        section: Ee.Basic,
+        section: Me.Basic,
         tooltip: r("consumers.fields.custom_id.tooltip"),
         label: r("consumers.fields.custom_id.label"),
         order: 2
@@ -927,36 +983,36 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
         hidden: !0
       }
     });
-    return (G, M) => (A(), j("div", xt, [
-      c(o(rt), {
+    return (w, G) => (D(), L("div", Kt, [
+      c(o(mt), {
         config: e.config,
         "config-card-doc": e.configCardDoc,
         "config-schema": n.value,
-        "entity-type": o(xe).Consumer,
+        "entity-type": o(Ae).Consumer,
         "fetch-url": x.value,
         "hide-title": e.hideTitle,
-        "onFetch:error": M[0] || (M[0] = (V) => G.$emit("fetch:error", V)),
-        "onFetch:success": M[1] || (M[1] = (V) => G.$emit("fetch:success", V)),
-        onLoading: M[2] || (M[2] = (V) => G.$emit("loading", V))
+        "onFetch:error": G[0] || (G[0] = (U) => w.$emit("fetch:error", U)),
+        "onFetch:success": G[1] || (G[1] = (U) => w.$emit("fetch:success", U)),
+        onLoading: G[2] || (G[2] = (U) => w.$emit("loading", U))
       }, {
-        "username-label-tooltip": u(() => [
+        "username-label-tooltip": l(() => [
           c(o(t), {
             keypath: "consumers.fields.username.tooltip",
             scope: "global"
           }, {
-            custom_id: u(() => [
-              w("code", null, b(o(r)("consumers.fields.username.custom_id")), 1)
+            custom_id: l(() => [
+              _("code", null, b(o(r)("consumers.fields.username.custom_id")), 1)
             ]),
             _: 1
           })
         ]),
-        "custom_id-label-tooltip": u(() => [
+        "custom_id-label-tooltip": l(() => [
           c(o(t), {
             keypath: "consumers.fields.custom_id.tooltip",
             scope: "global"
           }, {
-            username: u(() => [
-              w("code", null, b(o(r)("consumers.fields.custom_id.username")), 1)
+            username: l(() => [
+              _("code", null, b(o(r)("consumers.fields.custom_id.username")), 1)
             ]),
             _: 1
           })
@@ -967,7 +1023,7 @@ const wt = { class: "kong-ui-entities-consumer-form" }, $t = ["id"], Et = { clas
   }
 });
 export {
-  Pt as ConsumerConfigCard,
-  Ut as ConsumerForm,
-  Ft as ConsumerList
+  Qt as ConsumerConfigCard,
+  Jt as ConsumerForm,
+  Ht as ConsumerList
 };