@kong-ui-public/entities-consumers 4.8.2-pr.3869.e876c8c8a.0 → 4.8.2

package/dist/entities-consumers.es.js

@@ -0,0 +1,926 @@
+import { defineComponent as ae, ref as y, computed as h, watch as ve, resolveComponent as R, openBlock as E, createBlock as W, unref as t, withCtx as a, createElementVNode as b, toDisplayString as p, createVNode as i, createElementBlock as O, createCommentVNode as j, Fragment as Qe, renderList as We, onBeforeMount as ze, createSlots as ge, createTextVNode as K, Teleport as Ye, renderSlot as Ee, reactive as Se } from "vue";
+import { useRouter as Fe } from "vue-router";
+import { BookIcon as Me, AddIcon as Ge, TeamIcon as Xe } from "@kong/icons";
+import { createI18n as Ze, i18nTComponent as et } from "@kong-ui-public/i18n";
+import { useAxios as ye, useDebouncedFilter as tt, useManagedByColumn as ot, useTableState as st, useFetcher as nt, useDeleteUrlBuilder as rt, FetcherStatus as at, EntityBaseTable as it, PermissionsWrapper as re, getManagedByLabel as lt, TableTags as ct, EntityFilter as ut, EntityDeleteModal as dt, EntityTypes as mt, useErrors as pt, EntityBaseFormType as xe, EntityBaseForm as ft, SupportedEntityType as De, EntityFormSection as gt, ConfigurationSchemaSection as Ae, EntityBaseConfigCard as vt } from "@kong-ui-public/entities-shared";
+const yt = { list: { table_headers: { username: "Username", custom_id: "Custom ID", tags: "Tags", id: "ID" }, empty_state: { title: "Configure a new consumer", 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", group: "Consumers created in gateways within this group will automatically appear here.", description: "Consumers represent users or apps accessing your APIs, allowing for tailored authentication and individual access control.", learn_more: "Learn more" }, toolbar_actions: { new_consumer: "New consumer" } }, title: "Consumers", search: { placeholder: { konnect: "Filter by name", kongManager: "Filter by exact username or ID" } }, actions: { add_consumer: "Add consumer", create: "New consumer", copy_id: "Copy ID", copy_json: "Copy JSON", edit: "Edit", delete: "Delete", remove: "Remove", view: "View details" }, delete: { title: "Delete a consumer", description: "Deleting this consumer will also remove this consumer from any associated consumer group and delete all its plugins. This action cannot be reversed." }, consumer_groups: { add: { title: "Add consumers", ctaText: "Add consumers to this group", consumers_label: "Consumers", consumer_placeholder: "Add consumer", footer: "Search by exact name or ID to find consumers not included in the list" }, remove: { title: "Remove a consumer", confirmation: "Are you sure you want to remove this consumer {consumer} from consumer group {consumerGroup}?", confirmationNoCG: "Are you sure you want to remove this consumer {consumer} from this consumer group?", description: "Removing this consumer from the group could change the rate limit policy applied to this consumer." } }, errors: { general: "Consumers could not be retrieved", delete: "The consumer could not be deleted at this time.", copy: "Failed to copy to clipboard", add: "Some consumers could not be added at this time.", already_added: "This consumer has already been added to the consumer group" }, copy: { success: "Copied {val} to clipboard", success_brief: "Successfully copied to clipboard" }, form: { title: "Consumer identification", info: { title: "General information", description: "General information will help identify and manage added consumer." }, consumer_identification: { title: "Consumer identification", description: "A consumer can have both unique username and unique custom ID or one of them." } }, fields: { username: { label: "Username", placeholder: "Enter a unique username", tooltip: "The unique username of the consumer. You must send either this field or {custom_id} with the request.", custom_id: "custom_id" }, custom_id: { label: "Custom ID", placeholder: "Enter a unique custom ID", tooltip: "Field for storing an existing unique ID for the consumer - useful for mapping Kong with users in your existing database. You must send either this field or {username} with the request.", username: "username" }, tags: { label: "Tags", placeholder: "Enter a list of tags separated by comma", help: "e.g. tag1, tag2, tag3", tooltip: "An optional set of strings associated with the consumer for grouping and filtering." } } }, ht = {
+  consumers: yt
+};
+function bt() {
+  const e = Ze("en-us", ht);
+  return {
+    i18n: e,
+    i18nT: et(e)
+    // Translation component <i18n-t>
+  };
+}
+const ie = {
+  useI18n: bt
+}, Z = "/v2/control-planes/{controlPlaneId}/core-entities/{workspace}", oe = "/{workspace}", L = {
+  list: {
+    konnect: {
+      all: `${Z}/consumers`,
+      forConsumerGroup: `${Z}/consumer_groups/{consumerGroupId}/consumers`,
+      oneForConsumerGroup: `${Z}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`,
+      search: `${Z}/consumers/search`
+    },
+    kongManager: {
+      all: `${oe}/consumers`,
+      forConsumerGroup: `${oe}/consumer_groups/{consumerGroupId}/consumers`,
+      oneForConsumerGroup: `${oe}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`
+    }
+  },
+  form: {
+    konnect: {
+      create: `${Z}/consumers`,
+      edit: `${Z}/consumers/{id}`
+    },
+    kongManager: {
+      create: `${oe}/consumers`,
+      edit: `${oe}/consumers/{id}`
+    }
+  }
+}, _t = { class: "add-consumer-form-container" }, Ct = { class: "add-consumer-form-cta" }, kt = { class: "select-item-label" }, It = {
+  key: 0,
+  class: "select-item-desc"
+}, wt = {
+  key: 0,
+  class: "kong-ui-entity-add-consumers-error"
+}, $t = { key: 0 }, Et = /* @__PURE__ */ ae({
+  __name: "AddConsumerModal",
+  props: {
+    /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+    config: {
+      type: Object,
+      required: !0,
+      validator: (e) => !(!e || !["konnect", "kongManager"].includes(e?.app) || !e.consumerGroupId)
+    },
+    visible: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: ["cancel", "add:success", "add:partial-success", "error"],
+  setup(e, { emit: c }) {
+    const { i18n: { t: r } } = ie.useI18n(), o = e, S = c, { axiosInstance: n } = ye(o.config?.axiosRequestConfig), _ = y([]), {
+      debouncedQueryChange: w,
+      loading: A,
+      allRecords: T,
+      error: u,
+      loadItems: z,
+      results: Y
+    } = tt(
+      o.config,
+      L.list[o.config.app].all,
+      "",
+      {
+        fetchedItemsKey: "data",
+        searchKeys: ["username", "id"]
+      }
+    ), U = (d) => d, H = h(() => u.value ? r("consumers.errors.general") : ""), X = y(0), J = h(() => T.value === void 0), M = h(() => Y.value.map((d) => ({
+      label: d.username || d.customId,
+      value: d.id,
+      selected: _.value.includes(d.id),
+      data: d
+      // we need this to determine whether or not to show the description text
+    }))), q = (d) => {
+      const $ = J.value ? Y.value.find((I) => I.id === d) : T.value?.find((I) => I.id === d);
+      return $ ? $.username || $.custom_id : d;
+    }, ee = () => {
+      g.value = "", D.value = [], x.value = [], S("cancel");
+    }, D = y([]), F = y(!1), g = y(""), l = async () => {
+      if (!_.value.length) {
+        g.value = "", x.value = [], S("cancel");
+        return;
+      }
+      F.value = !0, g.value = "", D.value = [], x.value = [];
+      try {
+        const d = _.value.map((G) => Q(G)), $ = await Promise.allSettled(d);
+        let I = !0;
+        $.forEach((G) => {
+          G.status !== "fulfilled" && (I = !1);
+        }), I ? (D.value = [], x.value = [], S("add:success", _.value), _.value = []) : (D.value.length && S("add:partial-success", D.value), _.value = [], C($));
+      } catch {
+        g.value = r("consumers.errors.add"), S("error", g.value);
+      } finally {
+        F.value = !1;
+      }
+    }, v = h(() => {
+      let d = `${o.config.apiBaseUrl}${L.list[o.config.app].forConsumerGroup}`;
+      return o.config.app === "konnect" && (d = d.replace(/{controlPlaneId}/gi, o.config?.controlPlaneId || "")), d.replace(/\/{workspace}/gi, o.config?.workspace ? `/${o.config.workspace}` : "").replace(/{consumerGroupId}/gi, o.config?.consumerGroupId || "");
+    }), Q = async (d) => {
+      const $ = {
+        consumer: d
+      };
+      try {
+        const I = await n.post(v.value, $);
+        return D.value.push(d), I;
+      } catch (I) {
+        let G = `${q(d)} - ${I.message}`;
+        return I.response.status === 409 && (G = `${q(d)} - ${r("consumers.errors.already_added")}`), Promise.reject(Error(G));
+      }
+    }, x = y([]), C = (d) => {
+      x.value = d.map(($) => $.reason?.message).filter(Boolean);
+    };
+    return ve(M, () => {
+      X.value++;
+    }, { immediate: !0, deep: !0 }), ve(() => o.visible, () => {
+      o.visible && z();
+    }, { immediate: !0 }), (d, $) => {
+      const I = R("KMultiselect"), G = R("KAlert"), le = R("KPrompt");
+      return E(), W(le, {
+        "action-button-disabled": F.value,
+        class: "kong-ui-entities-add-consumers-modal",
+        "data-testid": "add-consumer-modal",
+        title: t(r)("consumers.consumer_groups.add.title"),
+        visible: e.visible,
+        onCancel: ee,
+        onProceed: l
+      }, {
+        default: a(() => [
+          b("div", _t, [
+            b("p", Ct, p(t(r)("consumers.consumer_groups.add.ctaText")), 1),
+            i(I, {
+              modelValue: _.value,
+              "onUpdate:modelValue": $[0] || ($[0] = (P) => _.value = P),
+              autosuggest: "",
+              "data-testid": "add-consumers-multiselect",
+              "dropdown-footer-text": J.value ? t(r)("consumers.consumer_groups.add.footer") : void 0,
+              items: M.value,
+              label: t(r)("consumers.consumer_groups.add.consumers_label"),
+              loading: t(A),
+              placeholder: t(r)("consumers.consumer_groups.add.consumer_placeholder"),
+              readonly: F.value,
+              required: "",
+              width: "100%",
+              onQueryChange: t(w)
+            }, {
+              "item-template": a(({ item: P }) => [
+                b("div", kt, p(P.label), 1),
+                U(P).data.username && U(P).data.custom_id ? (E(), O("div", It, p(U(P).data.custom_id), 1)) : j("", !0)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "dropdown-footer-text", "items", "label", "loading", "placeholder", "readonly", "onQueryChange"]),
+            g.value || H.value || x.value.length ? (E(), O("div", wt, [
+              i(G, { appearance: "danger" }, {
+                default: a(() => [
+                  b("p", null, p(t(r)("consumers.errors.add")), 1),
+                  x.value.length ? (E(), O("ul", $t, [
+                    (E(!0), O(Qe, null, We(x.value, (P, ce) => (E(), O("li", { key: ce }, p(P), 1))), 128))
+                  ])) : j("", !0),
+                  b("div", null, p(g.value || H.value), 1)
+                ]),
+                _: 1
+              })
+            ])) : j("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["action-button-disabled", "title", "visible"]);
+    };
+  }
+}), he = (e, c) => {
+  const r = e.__vccOpts || e;
+  for (const [o, S] of c)
+    r[o] = S;
+  return r;
+}, St = /* @__PURE__ */ he(Et, [["__scopeId", "data-v-ee085540"]]), Mt = { class: "kong-ui-entities-consumers-list" }, Gt = { class: "button-row" }, xt = { class: "empty-state-wrapper" }, At = /* @__PURE__ */ ae({
+  __name: "ConsumerList",
+  props: {
+    /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+    config: {
+      type: Object,
+      required: !0,
+      validator: (e) => !(!e || !["konnect", "kongManager"].includes(e?.app) || !e.createRoute || !e.getViewRoute || !e.getEditRoute || e.app === "kongManager" && !e.isExactMatch && !e.filterSchema)
+    },
+    // used to override the default identifier for the cache entry
+    cacheIdentifier: {
+      type: String,
+      default: ""
+    },
+    /** A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can create a new entity */
+    canCreate: {
+      type: Function,
+      required: !1,
+      default: async () => !0
+    },
+    /** A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can delete a given entity */
+    canDelete: {
+      type: Function,
+      required: !1,
+      default: async () => !0
+    },
+    /** A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can edit a given entity */
+    canEdit: {
+      type: Function,
+      required: !1,
+      default: async () => !0
+    },
+    /** A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can retrieve (view details) a given entity */
+    canRetrieve: {
+      type: Function,
+      required: !1,
+      default: async () => !0
+    },
+    /** default to false, setting to true will teleport the toolbar button to the destination in the consuming app */
+    useActionOutside: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["error", "click:learn-more", "copy:success", "copy:error", "delete:success", "add:success", "remove:success"],
+  setup(e, { emit: c }) {
+    const r = c, o = e, { i18nT: S, i18n: { t: n } } = ie.useI18n(), _ = Fe(), { axiosInstance: w } = ye(o.config?.axiosRequestConfig), A = h(() => o.config.app !== "kongManager" || !!o.config.disableSorting), T = {
+      // 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 }
+    }, { defaultTablePreferences: u, tableHeaders: z } = ot(T), Y = (s) => ({
+      "data-testid": s.username ?? s.custom_id ?? s.id
+    }), U = () => {
+      o.config.consumerGroupId ? _e() : _.push(o.config.createRoute);
+    }, H = (s) => {
+      let f = `${o.config.apiBaseUrl}${s}`;
+      return o.config.app === "konnect" && (f = f.replace(/{controlPlaneId}/gi, o.config?.controlPlaneId || "")), f.replace(/\/{workspace}/gi, o.config?.workspace ? `/${o.config.workspace}` : "").replace(/{consumerGroupId}/gi, o.config?.consumerGroupId || "");
+    }, X = h(() => H(
+      L.list[o.config.app][g.value ? "forConsumerGroup" : "all"]
+    )), J = h(() => o.config.app === "konnect" && o.config.workspace && M.value ? H(L.list.konnect.search) : X.value), M = y(""), q = h(() => {
+      const s = o.config.app === "konnect" || o.config.isExactMatch;
+      return s ? {
+        isExactMatch: s,
+        placeholder: n(`consumers.search.placeholder.${o.config.app}`)
+      } : {
+        isExactMatch: s,
+        fields: {
+          username: T.username,
+          custom_id: T.custom_id
+        },
+        schema: o.config.filterSchema
+      };
+    }), { hasRecords: ee, handleStateChange: D } = st(M), F = h(() => ee.value && o.config.app === "konnect"), g = h(() => !!o.config.consumerGroupId), l = h(
+      () => g.value ? "kong-ui-entities-consumers-list-in-group-page" : "kong-ui-entities-consumers-list"
+    ), v = h(() => g.value && !o.config.paginatedEndpoint ? "consumers" : void 0), {
+      fetcher: Q,
+      fetcherState: x,
+      fetcherCacheKey: C
+    } = nt(h(() => ({ ...o.config, cacheIdentifier: o.cacheIdentifier })), J, v), d = () => {
+      M.value = "";
+    }, $ = () => {
+      C.value++;
+    }, I = (s) => s ?? "-", G = y(null), le = async (s, f) => {
+      const V = s.id;
+      if (!await f(V)) {
+        r("copy:error", {
+          entity: s,
+          field: "id",
+          message: n("consumers.errors.copy")
+        });
+        return;
+      }
+      r("copy:success", {
+        entity: s,
+        field: "id",
+        message: n("consumers.copy.success", { val: V })
+      });
+    }, P = (s, f) => {
+      const V = JSON.stringify(s);
+      if (!f(V)) {
+        r("copy:error", {
+          entity: s,
+          message: n("consumers.errors.copy")
+        });
+        return;
+      }
+      r("copy:success", {
+        entity: s,
+        message: n("consumers.copy.success_brief")
+      });
+    }, ce = async (s) => {
+      await o.canRetrieve?.(s) && _.push(o.config.getViewRoute(s.id));
+    }, Pe = (s) => ({
+      label: n("consumers.actions.view"),
+      to: o.config.getViewRoute(s)
+    }), Re = (s) => ({
+      label: n("consumers.actions.edit"),
+      to: o.config.getEditRoute(s)
+    }), N = y(void 0), se = y(!1), ne = y(!1), be = y(""), Te = rt(o.config, X.value), Be = (s) => {
+      N.value = s, se.value = !0;
+    }, Ve = () => {
+      se.value = !1;
+    }, Ke = async () => {
+      if (N.value?.id) {
+        ne.value = !0;
+        try {
+          await w.delete(Te(N.value.id)), ne.value = !1, se.value = !1, C.value++, r("delete:success", N.value);
+        } catch (s) {
+          be.value = s.response?.data?.message || s.message || n("consumers.errors.delete"), r("error", s);
+        } finally {
+          ne.value = !1;
+        }
+      }
+    }, ue = y(!1), _e = () => {
+      ue.value = !0;
+    }, Ce = () => {
+      ue.value = !1;
+    }, ke = (s, f) => {
+      f || Ce(), C.value++, r("add:success", s);
+    }, Ue = () => {
+      g.value && _e();
+    }, B = y(void 0), de = y(!1), qe = y(""), Ne = (s) => {
+      B.value = s, de.value = !0;
+    }, Ie = () => {
+      de.value = !1, B.value = void 0;
+    }, Oe = h(() => {
+      let s = `${o.config.apiBaseUrl}${L.list[o.config.app].oneForConsumerGroup}`;
+      return o.config.app === "konnect" && (s = s.replace(/{controlPlaneId}/gi, o.config?.controlPlaneId || "")), s.replace(/\/{workspace}/gi, o.config?.workspace ? `/${o.config.workspace}` : "").replace(/{consumerGroupId}/gi, o.config?.consumerGroupId || "");
+    }), we = y(!1), je = async () => {
+      if (B.value) {
+        we.value = !0;
+        try {
+          const s = Oe.value.replace(/{consumerId}/gi, B.value.id);
+          await w.delete(s), r("remove:success", B.value), Ie(), C.value++;
+        } catch (s) {
+          qe.value = s.message || n("consumers.errors.delete"), r("error", s);
+        } finally {
+          we.value = !1;
+        }
+      }
+    };
+    ve(x, (s) => {
+      if (s.status === at.Error) {
+        G.value = {
+          title: n("consumers.errors.general")
+        }, s.error?.response?.data?.message && (G.value.message = s.error.response.data.message), r("error", s.error);
+        return;
+      }
+      G.value = null;
+    });
+    const me = y({
+      ctaPath: g.value ? void 0 : o.config.createRoute,
+      ctaText: void 0,
+      message: `${n("consumers.list.empty_state.description")}${o.config.additionMessageForEmptyState ? ` ${o.config.additionMessageForEmptyState}` : ""}`,
+      title: n("consumers.title")
+    }), pe = y(!1);
+    return ze(async () => {
+      pe.value = await o.canCreate(), pe.value && (me.value.title = g.value ? n("consumers.list.empty_state.title_for_consumer_group") : n("consumers.list.empty_state.title"), me.value.ctaText = g.value ? n("consumers.actions.add_consumer") : n("consumers.actions.create"));
+    }), (s, f) => {
+      const V = R("KButton"), Le = R("KEmptyState"), te = R("KDropdownItem"), $e = R("KClipboardProvider"), He = R("KPrompt");
+      return E(), O("div", Mt, [
+        i(t(it), {
+          "cache-identifier": e.cacheIdentifier,
+          "default-table-preferences": t(u),
+          "disable-sorting": A.value,
+          "empty-state-options": me.value,
+          "enable-entity-actions": "",
+          "error-message": G.value,
+          fetcher: t(Q),
+          "fetcher-cache-key": t(C),
+          "hide-pagination": g.value && !e.config.paginatedEndpoint,
+          "pagination-type": "offset",
+          "preferences-storage-key": l.value,
+          query: M.value,
+          "row-attributes": Y,
+          "table-headers": t(z),
+          onClearSearchInput: d,
+          "onClick:row": f[3] || (f[3] = (m) => ce(m)),
+          onEmptyStateCtaClicked: Ue,
+          onSort: $,
+          onState: t(D)
+        }, ge({
+          "toolbar-filter": a(() => [
+            Ee(s.$slots, "toolbar-filter", {}, void 0, !0),
+            g.value ? j("", !0) : (E(), W(t(ut), {
+              key: 0,
+              modelValue: M.value,
+              "onUpdate:modelValue": f[0] || (f[0] = (m) => M.value = m),
+              config: q.value
+            }, null, 8, ["modelValue", "config"]))
+          ]),
+          "toolbar-button": a(() => [
+            (E(), W(Ye, {
+              disabled: !e.useActionOutside,
+              to: "#kong-ui-app-page-header-action-button"
+            }, [
+              b("div", Gt, [
+                !g.value && F.value ? (E(), W(V, {
+                  key: 0,
+                  appearance: "secondary",
+                  class: "open-learning-hub",
+                  "data-testid": "consumers-learn-more-button",
+                  icon: "",
+                  onClick: f[1] || (f[1] = (m) => s.$emit("click:learn-more"))
+                }, {
+                  default: a(() => [
+                    i(t(Me), { decorative: "" })
+                  ]),
+                  _: 1
+                })) : j("", !0),
+                i(t(re), {
+                  "auth-function": () => e.canCreate()
+                }, {
+                  default: a(() => [
+                    i(V, {
+                      appearance: "primary",
+                      "data-testid": "toolbar-add-consumer",
+                      size: e.useActionOutside ? "medium" : "large",
+                      onClick: U
+                    }, {
+                      default: a(() => [
+                        i(t(Ge)),
+                        K(" " + p(e.config.consumerGroupId ? t(n)("consumers.actions.add_consumer") : t(n)("consumers.list.toolbar_actions.new_consumer")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["size"])
+                  ]),
+                  _: 1
+                }, 8, ["auth-function"])
+              ])
+            ], 8, ["disabled"]))
+          ]),
+          username: a(({ rowValue: m }) => [
+            b("b", null, p(I(m)), 1)
+          ]),
+          custom_id: a(({ rowValue: m }) => [
+            K(p(I(m)), 1)
+          ]),
+          tags: a(({ rowValue: m }) => [
+            i(t(ct), { tags: m }, null, 8, ["tags"])
+          ]),
+          managed_by: a(({ rowValue: m }) => [
+            K(p(t(lt)(m) ?? "-"), 1)
+          ]),
+          actions: a(({ row: m }) => [
+            i($e, null, {
+              default: a(({ copyToClipboard: fe }) => [
+                i(te, {
+                  "data-testid": "action-entity-copy-id",
+                  onClick: (Je) => le(m, fe)
+                }, {
+                  default: a(() => [
+                    K(p(t(n)("consumers.actions.copy_id")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            i($e, null, {
+              default: a(({ copyToClipboard: fe }) => [
+                i(te, {
+                  "data-testid": "action-entity-copy-json",
+                  onClick: (Je) => P(m, fe)
+                }, {
+                  default: a(() => [
+                    K(p(t(n)("consumers.actions.copy_json")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            i(t(re), {
+              "auth-function": () => e.canRetrieve(m)
+            }, {
+              default: a(() => [
+                i(te, {
+                  "data-testid": "action-entity-view",
+                  "has-divider": "",
+                  item: Pe(m.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            i(t(re), {
+              "auth-function": () => e.canEdit(m)
+            }, {
+              default: a(() => [
+                i(te, {
+                  "data-testid": "action-entity-edit",
+                  item: Re(m.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            i(t(re), {
+              "auth-function": () => e.canDelete(m)
+            }, {
+              default: a(() => [
+                i(te, {
+                  danger: "",
+                  "data-testid": "action-entity-delete",
+                  "has-divider": "",
+                  onClick: () => e.config.consumerGroupId ? Ne(m) : Be(m)
+                }, {
+                  default: a(() => [
+                    K(p(e.config.consumerGroupId ? t(n)("consumers.actions.remove") : t(n)("consumers.actions.delete")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"])
+          ]),
+          _: 2
+        }, [
+          !M.value && e.config.app === "konnect" ? {
+            name: "empty-state",
+            fn: a(() => [
+              b("div", xt, [
+                Ee(s.$slots, "empty-state-toolbar", {}, void 0, !0),
+                i(Le, {
+                  "data-testid": e.config.consumerGroupId ? "nested-consumers-entity-empty-state" : "consumers-entity-empty-state",
+                  "icon-background": "",
+                  message: t(n)("consumers.list.empty_state_v2.description"),
+                  title: t(n)("consumers.list.empty_state_v2.title")
+                }, ge({
+                  icon: a(() => [
+                    i(t(Xe), { decorative: "" })
+                  ]),
+                  action: a(() => [
+                    pe.value ? (E(), W(V, {
+                      key: 0,
+                      "data-testid": "entity-create-button",
+                      onClick: U
+                    }, {
+                      default: a(() => [
+                        i(t(Ge), { decorative: "" }),
+                        K(" " + p(t(n)("consumers.list.toolbar_actions.new_consumer")), 1)
+                      ]),
+                      _: 1
+                    })) : j("", !0),
+                    i(V, {
+                      appearance: "secondary",
+                      "data-testid": "entity-learn-more-button",
+                      onClick: f[2] || (f[2] = (m) => s.$emit("click:learn-more"))
+                    }, {
+                      default: a(() => [
+                        i(t(Me), { decorative: "" }),
+                        K(" " + p(t(n)("consumers.list.empty_state_v2.learn_more")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 2
+                }, [
+                  e.config?.isControlPlaneGroup ? {
+                    name: "default",
+                    fn: a(() => [
+                      K(p(t(n)("consumers.list.empty_state_v2.group")), 1)
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["data-testid", "message", "title"])
+              ])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["cache-identifier", "default-table-preferences", "disable-sorting", "empty-state-options", "error-message", "fetcher", "fetcher-cache-key", "hide-pagination", "preferences-storage-key", "query", "table-headers", "onState"]),
+        i(t(dt), {
+          "action-button-disabled": ne.value,
+          "data-testid": "delete-consumer-modal",
+          description: t(n)("consumers.delete.description"),
+          "entity-name": N.value && (N.value.username || N.value.custom_id || N.value.id),
+          "entity-type": t(mt).Consumer,
+          error: be.value,
+          title: t(n)("consumers.delete.title"),
+          visible: se.value,
+          onCancel: Ve,
+          onProceed: Ke
+        }, null, 8, ["action-button-disabled", "description", "entity-name", "entity-type", "error", "title", "visible"]),
+        e.config.consumerGroupId ? (E(), W(St, {
+          key: 0,
+          config: e.config,
+          "data-testid": "add-consumer-modal",
+          visible: ue.value,
+          "onAdd:partialSuccess": f[4] || (f[4] = (m) => ke(m, !0)),
+          "onAdd:success": f[5] || (f[5] = (m) => ke(m)),
+          onCancel: Ce
+        }, null, 8, ["config", "visible"])) : j("", !0),
+        e.config.consumerGroupId && B.value ? (E(), W(He, {
+          key: 1,
+          "action-button-appearance": "danger",
+          "data-testid": "remove-consumer-modal",
+          title: t(n)("consumers.consumer_groups.remove.title"),
+          visible: de.value,
+          onCancel: Ie,
+          onProceed: je
+        }, {
+          default: a(() => [
+            i(t(S), {
+              class: "message",
+              keypath: e.config.consumerGroupName ? "consumers.consumer_groups.remove.confirmation" : "consumers.consumer_groups.remove.confirmationNoCG",
+              tag: "p"
+            }, ge({
+              consumer: a(() => [
+                b("strong", null, p(B.value.username || B.value.custom_id || B.value.id), 1)
+              ]),
+              _: 2
+            }, [
+              e.config.consumerGroupName ? {
+                name: "consumerGroup",
+                fn: a(() => [
+                  b("strong", null, p(e.config.consumerGroupName), 1)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["keypath"]),
+            b("p", null, p(t(n)("consumers.consumer_groups.remove.description")), 1)
+          ]),
+          _: 1
+        }, 8, ["title", "visible"])) : j("", !0)
+      ]);
+    };
+  }
+}), Qt = /* @__PURE__ */ he(At, [["__scopeId", "data-v-20e920ea"]]), k = [];
+for (let e = 0; e < 256; ++e)
+  k.push((e + 256).toString(16).slice(1));
+function Ft(e, c = 0) {
+  return (k[e[c + 0]] + k[e[c + 1]] + k[e[c + 2]] + k[e[c + 3]] + "-" + k[e[c + 4]] + k[e[c + 5]] + "-" + k[e[c + 6]] + k[e[c + 7]] + "-" + k[e[c + 8]] + k[e[c + 9]] + "-" + k[e[c + 10]] + k[e[c + 11]] + k[e[c + 12]] + k[e[c + 13]] + k[e[c + 14]] + k[e[c + 15]]).toLowerCase();
+}
+const Dt = new Uint8Array(16);
+function Pt() {
+  return crypto.getRandomValues(Dt);
+}
+function Rt(e, c, r) {
+  return crypto.randomUUID ? crypto.randomUUID() : Tt(e);
+}
+function Tt(e, c, r) {
+  e = e || {};
+  const o = e.random ?? e.rng?.() ?? Pt();
+  if (o.length < 16)
+    throw new Error("Random bytes length must be >= 16");
+  return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, Ft(o);
+}
+const Bt = { class: "kong-ui-entities-consumer-form" }, Vt = ["id"], Kt = { class: "fields-group-text" }, Ut = ["aria-labelledby"], qt = /* @__PURE__ */ ae({
+  __name: "ConsumerForm",
+  props: {
+    /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+    config: {
+      type: Object,
+      required: !0,
+      validator: (e) => !(!e || !["konnect", "kongManager"].includes(e?.app) || e?.app === "konnect" && !e?.controlPlaneId || e?.app === "kongManager" && typeof e?.workspace != "string" || !e?.cancelRoute)
+    },
+    /** If a valid consumerId is provided, it will put the form in Edit mode instead of Create */
+    consumerId: {
+      type: String,
+      required: !1,
+      default: null
+    }
+  },
+  emits: ["update", "error", "loading"],
+  setup(e, { emit: c }) {
+    const r = e, o = c, { i18nT: S, i18n: { t: n } } = ie.useI18n(), _ = Fe(), { axiosInstance: w } = ye(r.config?.axiosRequestConfig), { getMessageFromError: A } = pt(), T = Rt(), u = Se({
+      fields: {
+        username: "",
+        customId: "",
+        tags: ""
+      },
+      readonly: !1,
+      errorMessage: ""
+    }), z = Se({
+      username: "",
+      customId: "",
+      tags: ""
+    }), Y = h(() => L.form[r.config?.app]?.edit), U = () => {
+      _.push(r.config?.cancelRoute || { name: "consumer-list" });
+    }, H = (l) => {
+      o("loading", l);
+    }, X = (l) => {
+      o("error", l);
+    }, J = (l) => {
+      u.fields.username = l?.item?.username || l?.username || "", u.fields.customId = l?.item?.custom_id || l?.custom_id || "";
+      const v = l?.item?.tags || l?.tags || [];
+      u.fields.tags = v?.join(", ") || "", Object.assign(z, u.fields);
+    }, M = h(() => r.consumerId ? xe.Edit : xe.Create), q = (l) => {
+      let v = `${r.config?.apiBaseUrl}${L.form[r.config?.app][l]}`;
+      return r.config?.app === "konnect" && (v = v.replace(/{controlPlaneId}/gi, r.config?.controlPlaneId || "")), v.replace(/\/{workspace}/gi, r.config?.workspace ? `/${r.config.workspace}` : "").replace(/{id}/gi, r.consumerId ?? "");
+    }, ee = h(() => !!u.fields.username || !!u.fields.customId), D = h(() => JSON.stringify(u.fields) !== JSON.stringify(z)), F = h(() => ({
+      username: u.fields.username || null,
+      custom_id: u.fields.customId || null,
+      tags: u.fields.tags.split(",")?.map((l) => String(l || "").trim())?.filter((l) => l !== "")
+    })), g = async () => {
+      try {
+        u.readonly = !0;
+        let l;
+        M.value === "create" ? l = await w.post(q("create"), F.value) : M.value === "edit" && (l = r.config?.app === "konnect" ? await w.put(q("edit"), F.value) : await w.patch(q("edit"), F.value)), J(l?.data), o("update", l?.data);
+      } catch (l) {
+        u.errorMessage = A(l), o("error", l);
+      } finally {
+        u.readonly = !1;
+      }
+    };
+    return (l, v) => {
+      const Q = R("KInput"), x = R("KCard");
+      return E(), O("div", Bt, [
+        i(t(ft), {
+          "can-submit": ee.value && D.value,
+          config: e.config,
+          "edit-id": e.consumerId,
+          "entity-type": t(De).Consumer,
+          "error-message": u.errorMessage,
+          "fetch-url": Y.value,
+          "form-fields": F.value,
+          "is-readonly": u.readonly,
+          onCancel: U,
+          "onFetch:error": v[3] || (v[3] = (C) => X(C)),
+          "onFetch:success": J,
+          onLoading: v[4] || (v[4] = (C) => H(C)),
+          onSubmit: g
+        }, {
+          default: a(() => [
+            b("div", null, [
+              i(t(gt), {
+                description: t(n)("consumers.form.info.description"),
+                "has-divider": "",
+                title: t(n)("consumers.form.info.title")
+              }, {
+                default: a(() => [
+                  b("div", null, [
+                    b("h3", {
+                      id: `fields-group-title-${t(T)}`,
+                      class: "fields-group-title"
+                    }, p(t(n)("consumers.form.consumer_identification.title")) + "* ", 9, Vt),
+                    b("p", Kt, p(t(n)("consumers.form.consumer_identification.description")), 1)
+                  ]),
+                  i(x, null, {
+                    default: a(() => [
+                      b("fieldset", {
+                        "aria-labelledby": `fields-group-title-${t(T)}`
+                      }, [
+                        i(Q, {
+                          modelValue: u.fields.username,
+                          "onUpdate:modelValue": v[0] || (v[0] = (C) => u.fields.username = C),
+                          modelModifiers: { trim: !0 },
+                          autocomplete: "off",
+                          class: "username-field",
+                          "data-testid": "consumer-form-username",
+                          label: t(n)("consumers.fields.username.label"),
+                          "label-attributes": { tooltipAttributes: { maxWidth: "400" } },
+                          placeholder: t(n)("consumers.fields.username.placeholder"),
+                          readonly: u.readonly,
+                          type: "text"
+                        }, {
+                          "label-tooltip": a(() => [
+                            i(t(S), {
+                              keypath: "consumers.fields.username.tooltip",
+                              scope: "global"
+                            }, {
+                              custom_id: a(() => [
+                                b("code", null, p(t(n)("consumers.fields.username.custom_id")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue", "label", "placeholder", "readonly"]),
+                        i(Q, {
+                          modelValue: u.fields.customId,
+                          "onUpdate:modelValue": v[1] || (v[1] = (C) => u.fields.customId = C),
+                          modelModifiers: { trim: !0 },
+                          autocomplete: "off",
+                          "data-testid": "consumer-form-custom-id",
+                          label: t(n)("consumers.fields.custom_id.label"),
+                          "label-attributes": { tooltipAttributes: { maxWidth: "400" } },
+                          placeholder: t(n)("consumers.fields.custom_id.placeholder"),
+                          readonly: u.readonly,
+                          type: "text"
+                        }, {
+                          "label-tooltip": a(() => [
+                            i(t(S), {
+                              keypath: "consumers.fields.custom_id.tooltip",
+                              scope: "global"
+                            }, {
+                              username: a(() => [
+                                b("code", null, p(t(n)("consumers.fields.custom_id.username")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue", "label", "placeholder", "readonly"])
+                      ], 8, Ut)
+                    ]),
+                    _: 1
+                  }),
+                  i(Q, {
+                    modelValue: u.fields.tags,
+                    "onUpdate:modelValue": v[2] || (v[2] = (C) => u.fields.tags = C),
+                    modelModifiers: { trim: !0 },
+                    autocomplete: "off",
+                    "data-testid": "consumer-form-tags",
+                    help: t(n)("consumers.fields.tags.help"),
+                    label: t(n)("consumers.fields.tags.label"),
+                    "label-attributes": {
+                      info: t(n)("consumers.fields.tags.tooltip"),
+                      tooltipAttributes: { maxWidth: "400" }
+                    },
+                    placeholder: t(n)("consumers.fields.tags.placeholder"),
+                    readonly: u.readonly,
+                    type: "text"
+                  }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"])
+                ]),
+                _: 1
+              }, 8, ["description", "title"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["can-submit", "config", "edit-id", "entity-type", "error-message", "fetch-url", "form-fields", "is-readonly"])
+      ]);
+    };
+  }
+}), Wt = /* @__PURE__ */ he(qt, [["__scopeId", "data-v-a0873f95"]]), Nt = { class: "kong-ui-consumer-entity-config-card" }, zt = /* @__PURE__ */ ae({
+  __name: "ConsumerConfigCard",
+  props: {
+    /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+    config: {
+      type: Object,
+      required: !0,
+      validator: (e) => !(!e || !["konnect", "kongManager"].includes(e?.app) || e.app === "konnect" && !e.controlPlaneId || e.app === "kongManager" && typeof e.workspace != "string" || !e.entityId)
+    },
+    /**
+     * External link for documentation that determines visibility of Documentation button
+     */
+    configCardDoc: {
+      type: String,
+      default: "",
+      required: !1
+    },
+    /**
+     * Control visibility of card title content
+     */
+    hideTitle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["loading", "fetch:error", "fetch:success"],
+  setup(e) {
+    const c = e, { i18n: { t: r }, i18nT: o } = ie.useI18n(), S = h(() => L.form[c.config.app].edit), n = y({
+      id: {},
+      username: {
+        section: Ae.Basic,
+        tooltip: r("consumers.fields.username.tooltip"),
+        order: 1
+      },
+      custom_id: {
+        section: Ae.Basic,
+        tooltip: r("consumers.fields.custom_id.tooltip"),
+        label: r("consumers.fields.custom_id.label"),
+        order: 2
+      },
+      updated_at: {},
+      created_at: {},
+      tags: {
+        tooltip: r("consumers.fields.tags.tooltip")
+      },
+      username_lower: {
+        hidden: !0
+      },
+      type: {
+        hidden: !0
+      }
+    });
+    return (_, w) => (E(), O("div", Nt, [
+      i(t(vt), {
+        config: e.config,
+        "config-card-doc": e.configCardDoc,
+        "config-schema": n.value,
+        "entity-type": t(De).Consumer,
+        "fetch-url": S.value,
+        "hide-title": e.hideTitle,
+        "onFetch:error": w[0] || (w[0] = (A) => _.$emit("fetch:error", A)),
+        "onFetch:success": w[1] || (w[1] = (A) => _.$emit("fetch:success", A)),
+        onLoading: w[2] || (w[2] = (A) => _.$emit("loading", A))
+      }, {
+        "username-label-tooltip": a(() => [
+          i(t(o), {
+            keypath: "consumers.fields.username.tooltip",
+            scope: "global"
+          }, {
+            custom_id: a(() => [
+              b("code", null, p(t(r)("consumers.fields.username.custom_id")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        "custom_id-label-tooltip": a(() => [
+          i(t(o), {
+            keypath: "consumers.fields.custom_id.tooltip",
+            scope: "global"
+          }, {
+            username: a(() => [
+              b("code", null, p(t(r)("consumers.fields.custom_id.username")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["config", "config-card-doc", "config-schema", "entity-type", "fetch-url", "hide-title"])
+    ]));
+  }
+});
+export {
+  zt as ConsumerConfigCard,
+  Wt as ConsumerForm,
+  Qt as ConsumerList
+};