@kong-ui-public/entities-consumers 4.2.19-pr.2701.377d8f5a8.0 → 4.2.20

package/dist/entities-consumers.es.js

@@ -0,0 +1,1054 @@
+import { defineComponent as ue, ref as C, computed as I, watch as ye, resolveComponent as K, createBlock as Y, openBlock as D, unref as o, withCtx as l, createElementVNode as k, createVNode as u, createElementBlock as H, createCommentVNode as J, toDisplayString as y, Fragment as Qe, renderList as We, onBeforeMount as ze, createSlots as ge, createTextVNode as L, Teleport as Ye, renderSlot as Ge, reactive as Me } from "vue";
+import { useRouter as Fe } from "vue-router";
+import { BookIcon as De, AddIcon as xe, TeamIcon as Xe } from "@kong/icons";
+import { createI18n as Ze, i18nTComponent as et } from "@kong-ui-public/i18n";
+import { useAxios as he, useDebouncedFilter as tt, useTableState as ot, useFetcher as st, useDeleteUrlBuilder as nt, FetcherStatus as rt, EntityBaseTable as at, PermissionsWrapper as le, TableTags as it, EntityFilter as lt, EntityDeleteModal as ut, EntityTypes as ct, useErrors as dt, EntityBaseFormType as Re, EntityBaseForm as mt, SupportedEntityType as Pe, EntityFormSection as pt, ConfigurationSchemaSection as Ae, EntityBaseConfigCard as ft } from "@kong-ui-public/entities-shared";
+const gt = {
+  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."
+    }
+  }
+}, vt = {
+  consumers: gt
+};
+function yt() {
+  const e = Ze("en-us", vt);
+  return {
+    i18n: e,
+    i18nT: et(e)
+    // Translation component <i18n-t>
+  };
+}
+const ce = {
+  useI18n: yt
+}, ne = "/v2/control-planes/{controlPlaneId}/core-entities", re = "/{workspace}", X = {
+  list: {
+    konnect: {
+      all: `${ne}/consumers`,
+      forConsumerGroup: `${ne}/consumer_groups/{consumerGroupId}/consumers`,
+      oneForConsumerGroup: `${ne}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`
+    },
+    kongManager: {
+      all: `${re}/consumers`,
+      forConsumerGroup: `${re}/consumer_groups/{consumerGroupId}/consumers`,
+      oneForConsumerGroup: `${re}/consumer_groups/{consumerGroupId}/consumers/{consumerId}`
+    }
+  },
+  form: {
+    konnect: {
+      create: `${ne}/consumers`,
+      edit: `${ne}/consumers/{id}`
+    },
+    kongManager: {
+      create: `${re}/consumers`,
+      edit: `${re}/consumers/{id}`
+    }
+  }
+}, ht = { class: "add-consumer-form-container" }, bt = { class: "add-consumer-form-cta" }, _t = { class: "select-item-label" }, Ct = {
+  key: 0,
+  class: "select-item-desc"
+}, kt = {
+  key: 0,
+  class: "kong-ui-entity-add-consumers-error"
+}, It = { key: 0 }, wt = /* @__PURE__ */ ue({
+  __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 == null ? void 0 : e.app) || !e.consumerGroupId)
+    },
+    visible: {
+      type: Boolean,
+      required: !0,
+      default: !1
+    }
+  },
+  emits: ["cancel", "add:success", "add:partial-success", "error"],
+  setup(e, { emit: p }) {
+    var h;
+    const { i18n: { t: r } } = ce.useI18n(), t = e, w = p, { axiosInstance: n } = he((h = t.config) == null ? void 0 : h.axiosRequestConfig), $ = C([]), {
+      debouncedQueryChange: M,
+      loading: V,
+      allRecords: q,
+      error: m,
+      loadItems: Z,
+      results: Q
+    } = tt(
+      t.config,
+      X.list[t.config.app].all,
+      "",
+      {
+        fetchedItemsKey: "data",
+        searchKeys: ["username", "id"]
+      }
+    ), O = (c) => c, F = I(() => m.value ? r("consumers.errors.general") : ""), se = C(0), W = I(() => q.value === void 0), z = I(() => Q.value.map((c) => ({
+      label: c.username || c.customId,
+      value: c.id,
+      selected: $.value.includes(c.id),
+      data: c
+      // we need this to determine whether or not to show the description text
+    }))), j = (c) => {
+      var b;
+      const _ = W.value ? Q.value.find((E) => E.id === c) : (b = q.value) == null ? void 0 : b.find((E) => E.id === c);
+      return _ ? _.username || _.custom_id : c;
+    }, x = () => {
+      T.value = "", B.value = [], g.value = [], w("cancel");
+    }, B = C([]), P = C(!1), T = C(""), ee = async () => {
+      if (!$.value.length) {
+        T.value = "", g.value = [], w("cancel");
+        return;
+      }
+      P.value = !0, T.value = "", B.value = [], g.value = [];
+      try {
+        const c = $.value.map((E) => i(E)), _ = await Promise.allSettled(c);
+        let b = !0;
+        _.forEach((E) => {
+          E.status !== "fulfilled" && (b = !1);
+        }), b ? (B.value = [], g.value = [], w("add:success", $.value), $.value = []) : (B.value.length && w("add:partial-success", B.value), $.value = [], A(_));
+      } catch {
+        T.value = r("consumers.errors.add"), w("error", T.value);
+      } finally {
+        P.value = !1;
+      }
+    }, a = I(() => {
+      var _, b, E, te;
+      let c = `${t.config.apiBaseUrl}${X.list[t.config.app].forConsumerGroup}`;
+      return t.config.app === "konnect" ? c = c.replace(/{controlPlaneId}/gi, ((_ = t.config) == null ? void 0 : _.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((b = t.config) == null ? void 0 : b.consumerGroupId) || "") : t.config.app === "kongManager" && (c = c.replace(/\/{workspace}/gi, (E = t.config) != null && E.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((te = t.config) == null ? void 0 : te.consumerGroupId) || "")), c;
+    }), i = async (c) => {
+      const _ = {
+        consumer: c
+      };
+      try {
+        const b = await n.post(a.value, _);
+        return B.value.push(c), b;
+      } catch (b) {
+        let E = `${j(c)} - ${b.message}`;
+        return b.response.status === 409 && (E = `${j(c)} - ${r("consumers.errors.already_added")}`), Promise.reject(Error(E));
+      }
+    }, g = C([]), A = (c) => {
+      g.value = c.map((_) => {
+        var b;
+        return (b = _.reason) == null ? void 0 : b.message;
+      }).filter(Boolean);
+    };
+    return ye(z, () => {
+      se.value++;
+    }, { immediate: !0, deep: !0 }), ye(() => t.visible, () => {
+      t.visible && Z();
+    }, { immediate: !0 }), (c, _) => {
+      const b = K("KMultiselect"), E = K("KAlert"), te = K("KPrompt");
+      return D(), Y(te, {
+        "action-button-disabled": P.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: x,
+        onProceed: ee
+      }, {
+        default: l(() => [
+          k("div", ht, [
+            k("p", bt, y(o(r)("consumers.consumer_groups.add.ctaText")), 1),
+            u(b, {
+              modelValue: $.value,
+              "onUpdate:modelValue": _[0] || (_[0] = (S) => $.value = S),
+              autosuggest: "",
+              "data-testid": "add-consumers-multiselect",
+              "dropdown-footer-text": W.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),
+              placeholder: o(r)("consumers.consumer_groups.add.consumer_placeholder"),
+              readonly: P.value,
+              required: "",
+              width: "100%",
+              onQueryChange: o(M)
+            }, {
+              "item-template": l(({ item: S }) => [
+                k("div", _t, y(S.label), 1),
+                O(S).data.username && O(S).data.custom_id ? (D(), H("div", Ct, y(O(S).data.custom_id), 1)) : J("", !0)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "dropdown-footer-text", "items", "label", "loading", "placeholder", "readonly", "onQueryChange"]),
+            T.value || F.value || g.value.length ? (D(), H("div", kt, [
+              u(E, { appearance: "danger" }, {
+                default: l(() => [
+                  k("p", null, y(o(r)("consumers.errors.add")), 1),
+                  g.value.length ? (D(), H("ul", It, [
+                    (D(!0), H(Qe, null, We(g.value, (S, oe) => (D(), H("li", { key: oe }, y(S), 1))), 128))
+                  ])) : J("", !0),
+                  k("div", null, y(T.value || F.value), 1)
+                ]),
+                _: 1
+              })
+            ])) : J("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["action-button-disabled", "title", "visible"]);
+    };
+  }
+}), be = (e, p) => {
+  const r = e.__vccOpts || e;
+  for (const [t, w] of p)
+    r[t] = w;
+  return r;
+}, $t = /* @__PURE__ */ be(wt, [["__scopeId", "data-v-d54468ab"]]), Et = { class: "kong-ui-entities-consumers-list" }, St = { class: "button-row" }, Gt = { class: "empty-state-wrapper" }, Mt = /* @__PURE__ */ ue({
+  __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 == null ? void 0 : 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: p }) {
+    var Ee;
+    const r = p, t = e, { i18nT: w, i18n: { t: n } } = ce.useI18n(), $ = Fe(), { axiosInstance: M } = he((Ee = t.config) == null ? void 0 : Ee.axiosRequestConfig), V = I(() => t.config.app !== "kongManager" || !!t.config.disableSorting), q = {
+      // 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 }
+    }, m = q, Z = (s) => ({
+      "data-testid": s.username ?? s.custom_id ?? s.id
+    }), Q = () => {
+      t.config.consumerGroupId ? Ce() : $.push(t.config.createRoute);
+    }, O = I(() => {
+      var d, v, R, U;
+      let s = `${t.config.apiBaseUrl}${X.list[t.config.app][x.value ? "forConsumerGroup" : "all"]}`;
+      return t.config.app === "konnect" ? s = s.replace(/{controlPlaneId}/gi, ((d = t.config) == null ? void 0 : d.controlPlaneId) || "").replace(/{consumerGroupId}/gi, ((v = t.config) == null ? void 0 : v.consumerGroupId) || "") : t.config.app === "kongManager" && (s = s.replace(/\/{workspace}/gi, (R = t.config) != null && R.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((U = t.config) == null ? void 0 : U.consumerGroupId) || "")), s;
+    }), F = C(""), se = I(() => {
+      const s = t.config.app === "konnect" || t.config.isExactMatch;
+      return s ? {
+        isExactMatch: s,
+        placeholder: n(`consumers.search.placeholder.${t.config.app}`)
+      } : {
+        isExactMatch: s,
+        fields: {
+          username: q.username,
+          custom_id: q.custom_id
+        },
+        schema: t.config.filterSchema
+      };
+    }), { hasRecords: W, handleStateChange: z } = ot(F), j = I(() => W.value && t.config.app === "konnect"), x = I(() => !!t.config.consumerGroupId), B = I(
+      () => x.value ? "kong-ui-entities-consumers-list-in-group-page" : "kong-ui-entities-consumers-list"
+    ), P = I(() => x.value && !t.config.paginatedEndpoint ? "consumers" : void 0), {
+      fetcher: T,
+      fetcherState: ee,
+      fetcherCacheKey: a
+    } = st(I(() => ({ ...t.config, cacheIdentifier: t.cacheIdentifier })), O, P), i = () => {
+      F.value = "";
+    }, g = () => {
+      a.value++;
+    }, A = (s) => s ?? "-", h = C(null), c = async (s, d) => {
+      const v = s.id;
+      if (!await d(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 })
+      });
+    }, _ = (s, d) => {
+      const v = JSON.stringify(s);
+      if (!d(v)) {
+        r("copy:error", {
+          entity: s,
+          message: n("consumers.errors.copy")
+        });
+        return;
+      }
+      r("copy:success", {
+        entity: s,
+        message: n("consumers.copy.success_brief")
+      });
+    }, b = async (s) => {
+      var v;
+      await ((v = t.canRetrieve) == null ? void 0 : v.call(t, s)) && $.push(t.config.getViewRoute(s.id));
+    }, E = (s) => ({
+      label: n("consumers.actions.view"),
+      to: t.config.getViewRoute(s)
+    }), te = (s) => ({
+      label: n("consumers.actions.edit"),
+      to: t.config.getEditRoute(s)
+    }), S = C(void 0), oe = C(!1), ae = C(!1), _e = C(""), Te = nt(t.config, O.value), Ue = (s) => {
+      S.value = s, oe.value = !0;
+    }, Be = () => {
+      oe.value = !1;
+    }, Ke = async () => {
+      var s, d, v;
+      if ((s = S.value) != null && s.id) {
+        ae.value = !0;
+        try {
+          await M.delete(Te(S.value.id)), ae.value = !1, oe.value = !1, a.value++, r("delete:success", S.value);
+        } catch (R) {
+          _e.value = ((v = (d = R.response) == null ? void 0 : d.data) == null ? void 0 : v.message) || R.message || n("consumers.errors.delete"), r("error", R);
+        } finally {
+          ae.value = !1;
+        }
+      }
+    }, de = C(!1), Ce = () => {
+      de.value = !0;
+    }, ke = () => {
+      de.value = !1;
+    }, Ie = (s, d) => {
+      d || ke(), a.value++, r("add:success", s);
+    }, qe = () => {
+      x.value && Ce();
+    }, N = C(void 0), me = C(!1), Ne = C(""), Oe = (s) => {
+      N.value = s, me.value = !0;
+    }, we = () => {
+      me.value = !1, N.value = void 0;
+    }, je = I(() => {
+      var d, v, R, U;
+      let s = `${t.config.apiBaseUrl}${X.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, ((v = t.config) == null ? void 0 : v.consumerGroupId) || "") : t.config.app === "kongManager" && (s = s.replace(/\/{workspace}/gi, (R = t.config) != null && R.workspace ? `/${t.config.workspace}` : "").replace(/{consumerGroupId}/gi, ((U = t.config) == null ? void 0 : U.consumerGroupId) || "")), s;
+    }), $e = C(!1), Le = async () => {
+      if (N.value) {
+        $e.value = !0;
+        try {
+          const s = je.value.replace(/{consumerId}/gi, N.value.id);
+          await M.delete(s), r("remove:success", N.value), we(), a.value++;
+        } catch (s) {
+          Ne.value = s.message || n("consumers.errors.delete"), r("error", s);
+        } finally {
+          $e.value = !1;
+        }
+      }
+    };
+    ye(ee, (s) => {
+      var d, v, R;
+      if (s.status === rt.Error) {
+        h.value = {
+          title: n("consumers.errors.general")
+        }, (R = (v = (d = s.error) == null ? void 0 : d.response) == null ? void 0 : v.data) != null && R.message && (h.value.message = s.error.response.data.message), r("error", s.error);
+        return;
+      }
+      h.value = null;
+    });
+    const pe = C({
+      ctaPath: x.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")
+    }), fe = C(!1);
+    return ze(async () => {
+      fe.value = await t.canCreate(), fe.value && (pe.value.title = x.value ? n("consumers.list.empty_state.title_for_consumer_group") : n("consumers.list.empty_state.title"), pe.value.ctaText = x.value ? n("consumers.actions.add_consumer") : n("consumers.actions.create"));
+    }), (s, d) => {
+      const v = K("KButton"), R = K("KEmptyState"), U = K("KDropdownItem"), Se = K("KClipboardProvider"), He = K("KPrompt");
+      return D(), H("div", Et, [
+        u(o(at), {
+          "cache-identifier": e.cacheIdentifier,
+          "disable-sorting": V.value,
+          "empty-state-options": pe.value,
+          "enable-entity-actions": "",
+          "error-message": h.value,
+          fetcher: o(T),
+          "fetcher-cache-key": o(a),
+          "hide-pagination": x.value && !e.config.paginatedEndpoint,
+          "pagination-type": "offset",
+          "preferences-storage-key": B.value,
+          query: F.value,
+          "row-attributes": Z,
+          "table-headers": o(m),
+          onClearSearchInput: i,
+          "onClick:row": d[3] || (d[3] = (f) => b(f)),
+          onEmptyStateCtaClicked: qe,
+          onSort: g,
+          onState: o(z)
+        }, ge({
+          "toolbar-filter": l(() => [
+            Ge(s.$slots, "toolbar-filter", {}, void 0, !0),
+            x.value ? J("", !0) : (D(), Y(o(lt), {
+              key: 0,
+              modelValue: F.value,
+              "onUpdate:modelValue": d[0] || (d[0] = (f) => F.value = f),
+              config: se.value
+            }, null, 8, ["modelValue", "config"]))
+          ]),
+          "toolbar-button": l(() => [
+            (D(), Y(Ye, {
+              disabled: !e.useActionOutside,
+              to: "#kong-ui-app-page-header-action-button"
+            }, [
+              k("div", St, [
+                !x.value && j.value ? (D(), Y(v, {
+                  key: 0,
+                  appearance: "secondary",
+                  class: "open-learning-hub",
+                  "data-testid": "consumers-learn-more-button",
+                  icon: "",
+                  onClick: d[1] || (d[1] = (f) => s.$emit("click:learn-more"))
+                }, {
+                  default: l(() => [
+                    u(o(De), { decorative: "" })
+                  ]),
+                  _: 1
+                })) : J("", !0),
+                u(o(le), {
+                  "auth-function": () => e.canCreate()
+                }, {
+                  default: l(() => [
+                    u(v, {
+                      appearance: "primary",
+                      "data-testid": "toolbar-add-consumer",
+                      size: e.useActionOutside ? "medium" : "large",
+                      onClick: Q
+                    }, {
+                      default: l(() => [
+                        u(o(xe)),
+                        L(" " + y(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: l(({ rowValue: f }) => [
+            k("b", null, y(A(f)), 1)
+          ]),
+          custom_id: l(({ rowValue: f }) => [
+            L(y(A(f)), 1)
+          ]),
+          tags: l(({ rowValue: f }) => [
+            u(o(it), { tags: f }, null, 8, ["tags"])
+          ]),
+          actions: l(({ row: f }) => [
+            u(Se, null, {
+              default: l(({ copyToClipboard: ie }) => [
+                u(U, {
+                  "data-testid": "action-entity-copy-id",
+                  onClick: (Je) => c(f, ie)
+                }, {
+                  default: l(() => [
+                    L(y(o(n)("consumers.actions.copy_id")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            u(Se, null, {
+              default: l(({ copyToClipboard: ie }) => [
+                u(U, {
+                  "data-testid": "action-entity-copy-json",
+                  onClick: (Je) => _(f, ie)
+                }, {
+                  default: l(() => [
+                    L(y(o(n)("consumers.actions.copy_json")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            u(o(le), {
+              "auth-function": () => e.canRetrieve(f)
+            }, {
+              default: l(() => [
+                u(U, {
+                  "data-testid": "action-entity-view",
+                  "has-divider": "",
+                  item: E(f.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            u(o(le), {
+              "auth-function": () => e.canEdit(f)
+            }, {
+              default: l(() => [
+                u(U, {
+                  "data-testid": "action-entity-edit",
+                  item: te(f.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            u(o(le), {
+              "auth-function": () => e.canDelete(f)
+            }, {
+              default: l(() => [
+                u(U, {
+                  danger: "",
+                  "data-testid": "action-entity-delete",
+                  "has-divider": "",
+                  onClick: () => e.config.consumerGroupId ? Oe(f) : Ue(f)
+                }, {
+                  default: l(() => [
+                    L(y(e.config.consumerGroupId ? o(n)("consumers.actions.remove") : o(n)("consumers.actions.delete")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"])
+          ]),
+          _: 2
+        }, [
+          !F.value && e.config.app === "konnect" ? {
+            name: "empty-state",
+            fn: l(() => {
+              var f;
+              return [
+                k("div", Gt, [
+                  Ge(s.$slots, "empty-state-toolbar", {}, void 0, !0),
+                  u(R, {
+                    "data-testid": e.config.consumerGroupId ? "nested-consumers-entity-empty-state" : "consumers-entity-empty-state",
+                    "icon-background": "",
+                    message: o(n)("consumers.list.empty_state_v2.description"),
+                    title: o(n)("consumers.list.empty_state_v2.title")
+                  }, ge({
+                    icon: l(() => [
+                      u(o(Xe), { decorative: "" })
+                    ]),
+                    action: l(() => [
+                      fe.value ? (D(), Y(v, {
+                        key: 0,
+                        "data-testid": "entity-create-button",
+                        onClick: Q
+                      }, {
+                        default: l(() => [
+                          u(o(xe), { decorative: "" }),
+                          L(" " + y(o(n)("consumers.list.toolbar_actions.new_consumer")), 1)
+                        ]),
+                        _: 1
+                      })) : J("", !0),
+                      u(v, {
+                        appearance: "secondary",
+                        "data-testid": "entity-learn-more-button",
+                        onClick: d[2] || (d[2] = (ie) => s.$emit("click:learn-more"))
+                      }, {
+                        default: l(() => [
+                          u(o(De), { decorative: "" }),
+                          L(" " + y(o(n)("consumers.list.empty_state_v2.learn_more")), 1)
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 2
+                  }, [
+                    (f = e.config) != null && f.isControlPlaneGroup ? {
+                      name: "default",
+                      fn: l(() => [
+                        L(y(o(n)("consumers.list.empty_state_v2.group")), 1)
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1032, ["data-testid", "message", "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"]),
+        u(o(ut), {
+          "action-button-disabled": ae.value,
+          "data-testid": "delete-consumer-modal",
+          description: o(n)("consumers.delete.description"),
+          "entity-name": S.value && (S.value.username || S.value.custom_id || S.value.id),
+          "entity-type": o(ct).Consumer,
+          error: _e.value,
+          title: o(n)("consumers.delete.title"),
+          visible: oe.value,
+          onCancel: Be,
+          onProceed: Ke
+        }, null, 8, ["action-button-disabled", "description", "entity-name", "entity-type", "error", "title", "visible"]),
+        e.config.consumerGroupId ? (D(), Y($t, {
+          key: 0,
+          config: e.config,
+          "data-testid": "add-consumer-modal",
+          visible: de.value,
+          "onAdd:partialSuccess": d[4] || (d[4] = (f) => Ie(f, !0)),
+          "onAdd:success": d[5] || (d[5] = (f) => Ie(f)),
+          onCancel: ke
+        }, null, 8, ["config", "visible"])) : J("", !0),
+        e.config.consumerGroupId && N.value ? (D(), Y(He, {
+          key: 1,
+          "action-button-appearance": "danger",
+          "data-testid": "remove-consumer-modal",
+          title: o(n)("consumers.consumer_groups.remove.title"),
+          visible: me.value,
+          onCancel: we,
+          onProceed: Le
+        }, {
+          default: l(() => [
+            u(o(w), {
+              class: "message",
+              keypath: e.config.consumerGroupName ? "consumers.consumer_groups.remove.confirmation" : "consumers.consumer_groups.remove.confirmationNoCG",
+              tag: "p"
+            }, ge({
+              consumer: l(() => [
+                k("strong", null, y(N.value.username || N.value.custom_id || N.value.id), 1)
+              ]),
+              _: 2
+            }, [
+              e.config.consumerGroupName ? {
+                name: "consumerGroup",
+                fn: l(() => [
+                  k("strong", null, y(e.config.consumerGroupName), 1)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["keypath"]),
+            k("p", null, y(o(n)("consumers.consumer_groups.remove.description")), 1)
+          ]),
+          _: 1
+        }, 8, ["title", "visible"])) : J("", !0)
+      ]);
+    };
+  }
+}), Ht = /* @__PURE__ */ be(Mt, [["__scopeId", "data-v-4737bfb9"]]), G = [];
+for (let e = 0; e < 256; ++e)
+  G.push((e + 256).toString(16).slice(1));
+function Dt(e, p = 0) {
+  return (G[e[p + 0]] + G[e[p + 1]] + G[e[p + 2]] + G[e[p + 3]] + "-" + G[e[p + 4]] + G[e[p + 5]] + "-" + G[e[p + 6]] + G[e[p + 7]] + "-" + G[e[p + 8]] + G[e[p + 9]] + "-" + G[e[p + 10]] + G[e[p + 11]] + G[e[p + 12]] + G[e[p + 13]] + G[e[p + 14]] + G[e[p + 15]]).toLowerCase();
+}
+let ve;
+const xt = new Uint8Array(16);
+function Rt() {
+  if (!ve) {
+    if (typeof crypto > "u" || !crypto.getRandomValues)
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    ve = crypto.getRandomValues.bind(crypto);
+  }
+  return ve(xt);
+}
+const At = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Ve = { randomUUID: At };
+function Vt(e, p, r) {
+  var w;
+  if (Ve.randomUUID && !e)
+    return Ve.randomUUID();
+  e = e || {};
+  const t = e.random ?? ((w = e.rng) == null ? void 0 : w.call(e)) ?? Rt();
+  if (t.length < 16)
+    throw new Error("Random bytes length must be >= 16");
+  return t[6] = t[6] & 15 | 64, t[8] = t[8] & 63 | 128, Dt(t);
+}
+const Ft = { class: "kong-ui-entities-consumer-form" }, Pt = ["id"], Tt = { class: "fields-group-text" }, Ut = ["aria-labelledby"], Bt = /* @__PURE__ */ ue({
+  __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 == null ? void 0 : e.app) || (e == null ? void 0 : e.app) === "konnect" && !(e != null && e.controlPlaneId) || (e == null ? void 0 : e.app) === "kongManager" && typeof (e == null ? void 0 : e.workspace) != "string" || !(e != null && 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: ""
+    }
+  },
+  emits: ["update", "error", "loading"],
+  setup(e, { emit: p }) {
+    var ee;
+    const r = e, t = p, { i18nT: w, i18n: { t: n } } = ce.useI18n(), $ = Fe(), { axiosInstance: M } = he((ee = r.config) == null ? void 0 : ee.axiosRequestConfig), { getMessageFromError: V } = dt(), q = Vt(), m = Me({
+      fields: {
+        username: "",
+        customId: "",
+        tags: ""
+      },
+      readonly: !1,
+      errorMessage: ""
+    }), Z = Me({
+      username: "",
+      customId: "",
+      tags: ""
+    }), Q = I(() => {
+      var a, i;
+      return (i = X.form[(a = r.config) == null ? void 0 : a.app]) == null ? void 0 : i.edit;
+    }), O = () => {
+      var a;
+      $.push(((a = r.config) == null ? void 0 : a.cancelRoute) || { name: "consumer-list" });
+    }, F = (a) => {
+      t("loading", a);
+    }, se = (a) => {
+      t("error", a);
+    }, W = (a) => {
+      var g, A, h;
+      m.fields.username = ((g = a == null ? void 0 : a.item) == null ? void 0 : g.username) || (a == null ? void 0 : a.username) || "", m.fields.customId = ((A = a == null ? void 0 : a.item) == null ? void 0 : A.custom_id) || (a == null ? void 0 : a.custom_id) || "";
+      const i = ((h = a == null ? void 0 : a.item) == null ? void 0 : h.tags) || (a == null ? void 0 : a.tags) || [];
+      m.fields.tags = (i == null ? void 0 : i.join(", ")) || "", Object.assign(Z, m.fields);
+    }, z = I(() => r.consumerId ? Re.Edit : Re.Create), j = (a) => {
+      var g, A, h, c, _, b;
+      let i = `${(g = r.config) == null ? void 0 : g.apiBaseUrl}${X.form[(A = r.config) == null ? void 0 : A.app][a]}`;
+      return ((h = r.config) == null ? void 0 : h.app) === "konnect" ? i = i.replace(/{controlPlaneId}/gi, ((c = r.config) == null ? void 0 : c.controlPlaneId) || "") : ((_ = r.config) == null ? void 0 : _.app) === "kongManager" && (i = i.replace(/\/{workspace}/gi, (b = r.config) != null && b.workspace ? `/${r.config.workspace}` : "")), i = i.replace(/{id}/gi, r.consumerId), i;
+    }, x = I(() => !!m.fields.username || !!m.fields.customId), B = I(() => JSON.stringify(m.fields) !== JSON.stringify(Z)), P = I(() => {
+      var a, i;
+      return {
+        username: m.fields.username || null,
+        custom_id: m.fields.customId || null,
+        tags: (i = (a = m.fields.tags.split(",")) == null ? void 0 : a.map((g) => String(g || "").trim())) == null ? void 0 : i.filter((g) => g !== "")
+      };
+    }), T = async () => {
+      var a;
+      try {
+        m.readonly = !0;
+        let i;
+        z.value === "create" ? i = await M.post(j("create"), P.value) : z.value === "edit" && (i = ((a = r.config) == null ? void 0 : a.app) === "konnect" ? await M.put(j("edit"), P.value) : await M.patch(j("edit"), P.value)), W(i == null ? void 0 : i.data), t("update", i == null ? void 0 : i.data);
+      } catch (i) {
+        m.errorMessage = V(i), t("error", i);
+      } finally {
+        m.readonly = !1;
+      }
+    };
+    return (a, i) => {
+      const g = K("KInput"), A = K("KCard");
+      return D(), H("div", Ft, [
+        u(o(mt), {
+          "can-submit": x.value && B.value,
+          config: e.config,
+          "edit-id": e.consumerId,
+          "entity-type": o(Pe).Consumer,
+          "error-message": m.errorMessage,
+          "fetch-url": Q.value,
+          "form-fields": P.value,
+          "is-readonly": m.readonly,
+          onCancel: O,
+          "onFetch:error": i[3] || (i[3] = (h) => se(h)),
+          "onFetch:success": W,
+          onLoading: i[4] || (i[4] = (h) => F(h)),
+          onSubmit: T
+        }, {
+          default: l(() => [
+            k("div", null, [
+              u(o(pt), {
+                description: o(n)("consumers.form.info.description"),
+                "has-divider": "",
+                title: o(n)("consumers.form.info.title")
+              }, {
+                default: l(() => [
+                  k("div", null, [
+                    k("h3", {
+                      id: `fields-group-title-${o(q)}`,
+                      class: "fields-group-title"
+                    }, y(o(n)("consumers.form.consumer_identification.title")) + "* ", 9, Pt),
+                    k("p", Tt, y(o(n)("consumers.form.consumer_identification.description")), 1)
+                  ]),
+                  u(A, null, {
+                    default: l(() => [
+                      k("fieldset", {
+                        "aria-labelledby": `fields-group-title-${o(q)}`
+                      }, [
+                        u(g, {
+                          modelValue: m.fields.username,
+                          "onUpdate:modelValue": i[0] || (i[0] = (h) => m.fields.username = h),
+                          modelModifiers: { trim: !0 },
+                          autocomplete: "off",
+                          class: "username-field",
+                          "data-testid": "consumer-form-username",
+                          label: o(n)("consumers.fields.username.label"),
+                          "label-attributes": { tooltipAttributes: { maxWidth: "400" } },
+                          placeholder: o(n)("consumers.fields.username.placeholder"),
+                          readonly: m.readonly,
+                          type: "text"
+                        }, {
+                          "label-tooltip": l(() => [
+                            u(o(w), {
+                              keypath: "consumers.fields.username.tooltip",
+                              scope: "global"
+                            }, {
+                              custom_id: l(() => [
+                                k("code", null, y(o(n)("consumers.fields.username.custom_id")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue", "label", "placeholder", "readonly"]),
+                        u(g, {
+                          modelValue: m.fields.customId,
+                          "onUpdate:modelValue": i[1] || (i[1] = (h) => m.fields.customId = h),
+                          modelModifiers: { trim: !0 },
+                          autocomplete: "off",
+                          "data-testid": "consumer-form-custom-id",
+                          label: o(n)("consumers.fields.custom_id.label"),
+                          "label-attributes": { tooltipAttributes: { maxWidth: "400" } },
+                          placeholder: o(n)("consumers.fields.custom_id.placeholder"),
+                          readonly: m.readonly,
+                          type: "text"
+                        }, {
+                          "label-tooltip": l(() => [
+                            u(o(w), {
+                              keypath: "consumers.fields.custom_id.tooltip",
+                              scope: "global"
+                            }, {
+                              username: l(() => [
+                                k("code", null, y(o(n)("consumers.fields.custom_id.username")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue", "label", "placeholder", "readonly"])
+                      ], 8, Ut)
+                    ]),
+                    _: 1
+                  }),
+                  u(g, {
+                    modelValue: m.fields.tags,
+                    "onUpdate:modelValue": i[2] || (i[2] = (h) => m.fields.tags = h),
+                    modelModifiers: { trim: !0 },
+                    autocomplete: "off",
+                    "data-testid": "consumer-form-tags",
+                    help: o(n)("consumers.fields.tags.help"),
+                    label: o(n)("consumers.fields.tags.label"),
+                    "label-attributes": {
+                      info: o(n)("consumers.fields.tags.tooltip"),
+                      tooltipAttributes: { maxWidth: "400" }
+                    },
+                    placeholder: o(n)("consumers.fields.tags.placeholder"),
+                    readonly: m.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"])
+      ]);
+    };
+  }
+}), Jt = /* @__PURE__ */ be(Bt, [["__scopeId", "data-v-ecefc72c"]]), Kt = { class: "kong-ui-consumer-entity-config-card" }, Qt = /* @__PURE__ */ ue({
+  __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 == null ? void 0 : 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 p = e, { i18n: { t: r }, i18nT: t } = ce.useI18n(), w = I(() => X.form[p.config.app].edit), n = C({
+      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 ($, M) => (D(), H("div", Kt, [
+      u(o(ft), {
+        config: e.config,
+        "config-card-doc": e.configCardDoc,
+        "config-schema": n.value,
+        "entity-type": o(Pe).Consumer,
+        "fetch-url": w.value,
+        "hide-title": e.hideTitle,
+        "onFetch:error": M[0] || (M[0] = (V) => $.$emit("fetch:error", V)),
+        "onFetch:success": M[1] || (M[1] = (V) => $.$emit("fetch:success", V)),
+        onLoading: M[2] || (M[2] = (V) => $.$emit("loading", V))
+      }, {
+        "username-label-tooltip": l(() => [
+          u(o(t), {
+            keypath: "consumers.fields.username.tooltip",
+            scope: "global"
+          }, {
+            custom_id: l(() => [
+              k("code", null, y(o(r)("consumers.fields.username.custom_id")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        "custom_id-label-tooltip": l(() => [
+          u(o(t), {
+            keypath: "consumers.fields.custom_id.tooltip",
+            scope: "global"
+          }, {
+            username: l(() => [
+              k("code", null, y(o(r)("consumers.fields.custom_id.username")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["config", "config-card-doc", "config-schema", "entity-type", "fetch-url", "hide-title"])
+    ]));
+  }
+});
+export {
+  Qt as ConsumerConfigCard,
+  Jt as ConsumerForm,
+  Ht as ConsumerList
+};