@kong-ui-public/entities-consumer-groups 4.5.30-pr.3470.87bb970d7.0 → 4.5.30

package/dist/entities-consumer-groups.es.js

@@ -0,0 +1,1038 @@
+import { defineComponent as _e, ref as I, computed as k, watch as we, resolveComponent as O, openBlock as S, createBlock as W, unref as s, withCtx as d, createElementVNode as U, toDisplayString as E, createVNode as p, createElementBlock as X, Fragment as Le, renderList as Qe, createCommentVNode as L, onBeforeMount as Fe, createSlots as ke, createTextVNode as z, Teleport as He, reactive as Ge } from "vue";
+import { useRouter as Ke } from "vue-router";
+import { BookIcon as Pe, AddIcon as Te, TeamIcon as Je } from "@kong/icons";
+import { createI18n as ze, i18nTComponent as We } from "@kong-ui-public/i18n";
+import { useAxios as $e, useDebouncedFilter as Be, useTableState as Xe, useFetcher as Ye, useDeleteUrlBuilder as Ze, FetcherStatus as eo, EntityBaseTable as oo, PermissionsWrapper as ye, TableTags as to, EntityFilter as so, EntityDeleteModal as ro, EntityTypes as no, useErrors as ao, useValidators as uo, EntityBaseFormType as Ie, EntityBaseForm as io, SupportedEntityType as De, EntityFormSection as Ve, EntityBaseConfigCard as lo } from "@kong-ui-public/entities-shared";
+const co = {
+  list: {
+    table_headers: {
+      name: "Name",
+      consumers_count: "Consumers",
+      tags: "Tags",
+      id: "ID"
+    },
+    empty_state: {
+      title: "Configure a new consumer group",
+      description: "Use consumer groups to manage custom rate limiting configuration for subsets of consumers.",
+      title_for_consumer: "Add to a consumer group"
+    },
+    empty_state_v2: {
+      title: "Configure your first consumer group",
+      group: "Consumer groups created in gateways within this group will automatically appear here.",
+      description: "Organize consumers into groups to easily apply policies like rate limiting and authentication across the entire group.",
+      learn_more: "Learn more"
+    },
+    toolbar_actions: {
+      new_consumer_group: "New consumer group"
+    }
+  },
+  title: "Consumer groups",
+  search: {
+    placeholder: "Filter by exact name or ID"
+  },
+  actions: {
+    add_to_group: "Add to consumer group",
+    create: "New consumer group",
+    copy_id: "Copy ID",
+    copy_json: "Copy JSON",
+    edit: "Edit",
+    delete: "Delete",
+    exit: "Exit",
+    view: "View details"
+  },
+  delete: {
+    title: "Delete a consumer group",
+    description: "Deleting this group will remove all its plugins and rate limit configuration. This action cannot be reversed."
+  },
+  consumers: {
+    add: {
+      title: "Add to consumer groups",
+      ctaText: "Add this consumer to consumer groups",
+      consumer_groups_label: "Consumer groups",
+      consumer_group_placeholder: "Add to consumer groups",
+      footer: "Search by exact name or ID to find consumer groups not included in the list"
+    },
+    exit: {
+      title: "Exit from a consumer group",
+      confirmation: "Are you sure you want to remove consumer {consumer} from consumer group {consumerGroup}?",
+      confirmationNoUsername: "Are you sure you want this consumer to exit from consumer group {consumerGroup}?",
+      description: "Exiting from the group could change the rate limit policy applied to this consumer."
+    }
+  },
+  errors: {
+    general: "Consumer groups could not be retrieved",
+    delete: "The consumer group could not be deleted at this time.",
+    copy: "Failed to copy to clipboard",
+    add: "The consumer could not be added to some groups at this time.",
+    already_added: "The consumer is already in this consumer group",
+    add_consumer: "An unexpected error occurred while adding consumers. Please try again.",
+    remove_consumer: "An unexpected error occurred while removing consumers. Please try again."
+  },
+  copy: {
+    success: "Copied {val} to clipboard",
+    success_brief: "Successfully copied to clipboard"
+  },
+  form: {
+    general_info: {
+      title: "General information",
+      description: "General information will help identify and manage this consumer group."
+    },
+    consumers: {
+      title: "Consumers",
+      description: "Add or remove consumers from this group"
+    },
+    fields: {
+      name: {
+        label: "Name",
+        placeholder: "Enter a unique name for this consumer group "
+      },
+      tags: {
+        label: "Tags",
+        placeholder: "Enter a list of tags separated by comma",
+        help: "e.g. tag1, tag2, tag3",
+        tooltip: "An optional set of strings for grouping and filtering, separated by commas."
+      },
+      consumers: {
+        label: "Consumers",
+        placeholder: "Select one or more consumers"
+      }
+    }
+  }
+}, mo = {
+  consumer_groups: co
+};
+function po() {
+  const e = ze("en-us", mo);
+  return {
+    i18n: e,
+    i18nT: We(e)
+    // Translation component <i18n-t>
+  };
+}
+const he = {
+  useI18n: po
+}, B = "/v2/control-planes/{controlPlaneId}/core-entities/{workspace}", D = "/{workspace}", Y = {
+  list: {
+    konnect: {
+      all: `${B}/consumer_groups`,
+      forModal: `${B}/consumer_groups`,
+      forConsumer: `${B}/consumers/{consumerId}/consumer_groups`,
+      oneForConsumer: `${B}/consumers/{consumerId}/consumer_groups/{consumerGroupId}`
+    },
+    kongManager: {
+      all: `${D}/consumer_groups?counter=true`,
+      // we need counter=true to get consumers_count in consumer group list
+      forModal: `${D}/consumer_groups`,
+      forConsumer: `${D}/consumers/{consumerId}/consumer_groups`,
+      oneForConsumer: `${D}/consumers/{consumerId}/consumer_groups/{consumerGroupId}`
+    }
+  },
+  form: {
+    konnect: {
+      consumersList: `${B}/consumers`,
+      create: `${B}/consumer_groups`,
+      edit: `${B}/consumer_groups/{id}`,
+      addConsumer: `${B}/consumer_groups/{id}/consumers`,
+      removeConsumer: `${B}/consumer_groups/{id}/consumers/{consumerId}`,
+      getConsumers: `${B}/consumer_groups/{id}/consumers`
+    },
+    kongManager: {
+      consumersList: `${D}/consumers`,
+      create: `${D}/consumer_groups`,
+      edit: `${D}/consumer_groups/{id}`,
+      addConsumer: `${D}/consumer_groups/{id}/consumers`,
+      removeConsumer: `${D}/consumer_groups/{id}/consumers/{consumerId}`,
+      getConsumers: `${D}/consumer_groups/{id}/consumers`
+    }
+  },
+  item: {
+    konnect: `${B}/consumer_groups/{id}?list_consumers=false`,
+    kongManager: `${D}/consumer_groups/{id}?list_consumers=false`
+  }
+}, go = { class: "add-to-group-form-container" }, fo = { class: "add-to-group-cta-text" }, vo = {
+  key: 0,
+  class: "kong-ui-entity-add-to-groups-error"
+}, yo = { key: 0 }, _o = /* @__PURE__ */ _e({
+  __name: "AddToGroupModal",
+  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.consumerId)
+    },
+    visible: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: ["cancel", "add:success", "add:partial-success", "error"],
+  setup(e, { emit: N }) {
+    var K;
+    const { i18n: { t: a } } = he.useI18n(), t = e, f = N, { axiosInstance: u } = $e((K = t.config) == null ? void 0 : K.axiosRequestConfig), n = I([]), {
+      debouncedQueryChange: x,
+      loading: ae,
+      allRecords: R,
+      error: ue,
+      loadItems: ie,
+      results: Z
+    } = Be(
+      t.config,
+      Y.list[t.config.app].forModal,
+      "",
+      {
+        fetchedItemsKey: "data",
+        searchKeys: ["name", "id"]
+      }
+    ), T = k(() => ue.value ? a("consumer_groups.errors.general") : ""), V = I(0), oe = k(() => R.value === void 0), te = k(() => Z.value.map((v) => ({
+      label: v.name,
+      value: v.id,
+      selected: n.value.includes(v.id),
+      data: v
+      // we need this to determine whether or not to show the description text
+    }))), se = (v) => {
+      var g;
+      const w = oe.value ? Z.value.find((C) => C.id === v) : (g = R.value) == null ? void 0 : g.find((C) => C.id === v);
+      return w ? w.name : v;
+    }, le = () => {
+      M.value = "", $.value = [], F.value = [], f("cancel");
+    }, $ = I([]), Q = I(!1), M = I(""), ce = async () => {
+      if (!n.value.length) {
+        M.value = "", F.value = [], f("cancel");
+        return;
+      }
+      Q.value = !0, M.value = "", $.value = [], F.value = [];
+      try {
+        const v = n.value.map((C) => j(C)), w = await Promise.allSettled(v);
+        let g = !0;
+        w.forEach((C) => {
+          C.status !== "fulfilled" && (g = !1);
+        }), g ? ($.value = [], F.value = [], f("add:success", n.value), n.value = []) : ($.value.length && f("add:partial-success", $.value), n.value = [], re(w));
+      } catch {
+        M.value = a("consumer_groups.errors.add"), f("error", M.value);
+      } finally {
+        Q.value = !1;
+      }
+    }, de = k(() => {
+      var w, g, C;
+      let v = `${t.config.apiBaseUrl}${Y.list[t.config.app].forConsumer}`;
+      return t.config.app === "konnect" && (v = v.replace(/{controlPlaneId}/gi, ((w = t.config) == null ? void 0 : w.controlPlaneId) || "")), v.replace(/\/{workspace}/gi, (g = t.config) != null && g.workspace ? `/${t.config.workspace}` : "").replace(/{consumerId}/gi, ((C = t.config) == null ? void 0 : C.consumerId) || "");
+    }), j = async (v) => {
+      const w = {
+        group: v
+      };
+      try {
+        const g = await u.post(de.value, w);
+        return $.value.push(v), g;
+      } catch (g) {
+        let C = `${se(v)} - ${g.message}`;
+        return g.response.status === 409 && (C = `${se(v)} - ${a("consumer_groups.errors.already_added")}`), Promise.reject(Error(C));
+      }
+    }, F = I([]), re = (v) => {
+      F.value = v.map((w) => {
+        var g;
+        return (g = w.reason) == null ? void 0 : g.message;
+      }).filter(Boolean);
+    };
+    return we(te, () => {
+      V.value++;
+    }, { immediate: !0, deep: !0 }), we(() => t.visible, () => {
+      t.visible && ie();
+    }, { immediate: !0 }), (v, w) => {
+      const g = O("KMultiselect"), C = O("KAlert"), ee = O("KPrompt");
+      return S(), W(ee, {
+        "action-button-disabled": Q.value,
+        class: "kong-ui-entities-add-to-groups-modal",
+        "data-testid": "add-to-group-modal",
+        title: s(a)("consumer_groups.consumers.add.title"),
+        visible: e.visible,
+        onCancel: le,
+        onProceed: ce
+      }, {
+        default: d(() => [
+          U("div", go, [
+            U("p", fo, E(s(a)("consumer_groups.consumers.add.ctaText")), 1),
+            p(g, {
+              modelValue: n.value,
+              "onUpdate:modelValue": w[0] || (w[0] = (P) => n.value = P),
+              autosuggest: "",
+              "data-testid": "add-to-groups-multiselect",
+              "dropdown-footer-text": oe.value ? s(a)("consumer_groups.consumers.add.footer") : void 0,
+              items: te.value,
+              label: s(a)("consumer_groups.consumers.add.consumer_groups_label"),
+              loading: s(ae),
+              placeholder: s(a)("consumer_groups.consumers.add.consumer_group_placeholder"),
+              readonly: Q.value,
+              required: "",
+              width: "100%",
+              onQueryChange: s(x)
+            }, null, 8, ["modelValue", "dropdown-footer-text", "items", "label", "loading", "placeholder", "readonly", "onQueryChange"]),
+            M.value || T.value || F.value.length ? (S(), X("div", vo, [
+              p(C, { appearance: "danger" }, {
+                default: d(() => [
+                  U("p", null, E(s(a)("consumer_groups.errors.add")), 1),
+                  F.value.length ? (S(), X("ul", yo, [
+                    (S(!0), X(Le, null, Qe(F.value, (P, H) => (S(), X("li", { key: H }, E(P), 1))), 128))
+                  ])) : L("", !0),
+                  U("div", null, E(M.value || T.value), 1)
+                ]),
+                _: 1
+              })
+            ])) : L("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["action-button-disabled", "title", "visible"]);
+    };
+  }
+}), Ee = (e, N) => {
+  const a = e.__vccOpts || e;
+  for (const [t, f] of N)
+    a[t] = f;
+  return a;
+}, ho = /* @__PURE__ */ Ee(_o, [["__scopeId", "data-v-54887165"]]), bo = { class: "kong-ui-entities-consumer-groups-list" }, Co = { class: "button-row" }, ko = /* @__PURE__ */ _e({
+  __name: "ConsumerGroupList",
+  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: N }) {
+    var Se;
+    const a = N, t = e, { i18nT: f, i18n: { t: u } } = he.useI18n(), n = Ke(), { axiosInstance: x } = $e((Se = t.config) == null ? void 0 : Se.axiosRequestConfig), ae = k(() => t.config.app !== "kongManager" || !!t.config.disableSorting), R = {
+      // the Name column is non-hidable
+      name: { label: u("consumer_groups.list.table_headers.name"), searchable: !0, sortable: !0, hidable: !1 }
+    };
+    t.config.app === "kongManager" && (R.consumers_count = { label: u("consumer_groups.list.table_headers.consumers_count"), searchable: !1, sortable: !1 }), R.tags = { label: u("consumer_groups.list.table_headers.tags"), sortable: !1 };
+    const ue = R, ie = (r) => ({
+      "data-testid": r.username ?? r.custom_id ?? r.id
+    }), Z = () => {
+      t.config.consumerId ? c() : n.push(t.config.createRoute);
+    }, T = k(() => {
+      var m, _, G;
+      let r = `${t.config.apiBaseUrl}${Y.list[t.config.app][$.value ? "forConsumer" : "all"]}`;
+      return t.config.app === "konnect" && (r = r.replace(/{controlPlaneId}/gi, ((m = t.config) == null ? void 0 : m.controlPlaneId) || ""), V.value && t.config.isExactMatch && (r += "?list_consumers=false")), r.replace(/\/{workspace}/gi, (_ = t.config) != null && _.workspace ? `/${t.config.workspace}` : "").replace(/{consumerId}/gi, ((G = t.config) == null ? void 0 : G.consumerId) || "");
+    }), V = I(""), oe = k(() => {
+      const r = t.config.app === "konnect" || t.config.isExactMatch;
+      return r ? {
+        isExactMatch: r,
+        fields: {
+          username: R.name,
+          id: { label: u("consumer_groups.list.table_headers.id") }
+        },
+        placeholder: u("consumer_groups.search.placeholder")
+      } : {
+        isExactMatch: r,
+        fields: {
+          name: R.name
+        },
+        schema: t.config.filterSchema
+      };
+    }), { hasRecords: te, handleStateChange: se } = Xe(V), le = k(() => te.value && t.config.app === "konnect"), $ = k(() => !!t.config.consumerId), Q = k(
+      () => $.value ? "kong-ui-entities-consumer-groups-list-in-consumer-page" : "kong-ui-entities-consumer-groups-list"
+    ), M = k(() => t.config.app === "konnect" && V.value ? "consumer_group" : $.value && !t.config.paginatedEndpoint ? "consumer_groups" : void 0), {
+      fetcher: ce,
+      fetcherState: de,
+      fetcherCacheKey: j
+    } = Ye(k(() => ({ ...t.config, cacheIdentifier: t.cacheIdentifier })), T, M), F = () => {
+      V.value = "";
+    }, re = () => {
+      j.value++;
+    }, K = I(null), v = async (r, m) => {
+      const _ = r.id;
+      if (!await m(_)) {
+        a("copy:error", {
+          entity: r,
+          field: "id",
+          message: u("consumer_groups.errors.copy")
+        });
+        return;
+      }
+      a("copy:success", {
+        entity: r,
+        field: "id",
+        message: u("consumer_groups.copy.success", { val: _ })
+      });
+    }, w = async (r, m) => {
+      const _ = JSON.stringify(r);
+      if (!await m(_)) {
+        a("copy:error", {
+          entity: r,
+          message: u("consumer_groups.errors.copy")
+        });
+        return;
+      }
+      a("copy:success", {
+        entity: r,
+        message: u("consumer_groups.copy.success_brief")
+      });
+    }, g = async (r) => {
+      var _;
+      await ((_ = t.canRetrieve) == null ? void 0 : _.call(t, r)) && n.push(t.config.getViewRoute(r.id));
+    }, C = (r) => ({
+      label: u("consumer_groups.actions.view"),
+      to: t.config.getViewRoute(r)
+    }), ee = (r) => ({
+      label: u("consumer_groups.actions.edit"),
+      to: t.config.getEditRoute(r)
+    }), P = I(void 0), H = I(!1), ne = I(!1), me = I(""), ge = Ze(t.config, T.value), fe = (r) => {
+      P.value = r, H.value = !0;
+    }, o = () => {
+      H.value = !1;
+    }, i = async () => {
+      var r, m, _;
+      if ((r = P.value) != null && r.id) {
+        ne.value = !0;
+        try {
+          await x.delete(ge(P.value.id)), ne.value = !1, H.value = !1, j.value++, a("delete:success", P.value);
+        } catch (G) {
+          me.value = ((_ = (m = G.response) == null ? void 0 : m.data) == null ? void 0 : _.message) || G.message || u("consumer_groups.errors.delete"), a("error", G);
+        } finally {
+          ne.value = !1;
+        }
+      }
+    }, b = I(!1), c = () => {
+      b.value = !0;
+    }, l = () => {
+      b.value = !1;
+    }, A = (r, m) => {
+      m || l(), j.value++, a("add:success", r);
+    }, q = () => {
+      $.value && c();
+    }, h = I(void 0), J = I(!1), Ue = I(""), Re = (r) => {
+      h.value = r, J.value = !0;
+    }, xe = () => {
+      J.value = !1, h.value = void 0;
+    }, qe = k(() => {
+      var m, _, G;
+      let r = `${t.config.apiBaseUrl}${Y.list[t.config.app].oneForConsumer}`;
+      return t.config.app === "konnect" && (r = r.replace(/{controlPlaneId}/gi, ((m = t.config) == null ? void 0 : m.controlPlaneId) || "")), r.replace(/\/{workspace}/gi, (_ = t.config) != null && _.workspace ? `/${t.config.workspace}` : "").replace(/{consumerId}/gi, ((G = t.config) == null ? void 0 : G.consumerId) || "");
+    }), Me = I(!1), Oe = async () => {
+      if (h.value) {
+        Me.value = !0;
+        try {
+          const r = qe.value.replace(/{consumerGroupId}/gi, h.value.id);
+          await x.delete(r), a("remove:success", h.value), xe(), j.value++;
+        } catch (r) {
+          Ue.value = r.message || u("consumer_groups.errors.delete"), a("error", r);
+        } finally {
+          Me.value = !1;
+        }
+      }
+    };
+    we(de, (r) => {
+      var m, _, G;
+      if (r.status === eo.Error) {
+        K.value = {
+          title: u("consumer_groups.errors.general")
+        }, (G = (_ = (m = r.error) == null ? void 0 : m.response) == null ? void 0 : _.data) != null && G.message && (K.value.message = r.error.response.data.message), a("error", r.error);
+        return;
+      }
+      K.value = null;
+    });
+    const be = I({
+      ctaPath: $.value ? void 0 : t.config.createRoute,
+      ctaText: void 0,
+      message: `${u("consumer_groups.list.empty_state.description")}${t.config.additionMessageForEmptyState ? ` ${t.config.additionMessageForEmptyState}` : ""}`,
+      title: u("consumer_groups.title")
+    }), Ce = I(!1);
+    return Fe(async () => {
+      Ce.value = await t.canCreate(), Ce.value && (be.value.title = $.value ? u("consumer_groups.list.empty_state.title_for_consumer") : u("consumer_groups.list.empty_state.title"), be.value.ctaText = $.value ? u("consumer_groups.actions.add_to_group") : u("consumer_groups.actions.create"));
+    }), (r, m) => {
+      const _ = O("KButton"), G = O("KEmptyState"), pe = O("KDropdownItem"), Ae = O("KClipboardProvider"), Ne = O("KPrompt");
+      return S(), X("div", bo, [
+        p(s(oo), {
+          "cache-identifier": e.cacheIdentifier,
+          "disable-pagination": $.value && !e.config.paginatedEndpoint,
+          "disable-sorting": ae.value,
+          "empty-state-options": be.value,
+          "enable-entity-actions": "",
+          "error-message": K.value,
+          fetcher: s(ce),
+          "fetcher-cache-key": s(j),
+          "pagination-type": "offset",
+          "preferences-storage-key": Q.value,
+          query: V.value,
+          "row-attributes": ie,
+          "table-headers": s(ue),
+          onClearSearchInput: F,
+          "onClick:row": m[3] || (m[3] = (y) => g(y)),
+          onEmptyStateCtaClicked: q,
+          onSort: re,
+          onState: s(se)
+        }, ke({
+          "toolbar-filter": d(() => [
+            $.value ? L("", !0) : (S(), W(s(so), {
+              key: 0,
+              modelValue: V.value,
+              "onUpdate:modelValue": m[0] || (m[0] = (y) => V.value = y),
+              config: oe.value
+            }, null, 8, ["modelValue", "config"]))
+          ]),
+          "toolbar-button": d(() => [
+            (S(), W(He, {
+              disabled: !e.useActionOutside,
+              to: "#kong-ui-app-page-header-action-button"
+            }, [
+              U("div", Co, [
+                le.value ? (S(), W(_, {
+                  key: 0,
+                  appearance: "secondary",
+                  class: "open-learning-hub",
+                  "data-testid": "consumer-groups-learn-more-button",
+                  icon: "",
+                  onClick: m[1] || (m[1] = (y) => r.$emit("click:learn-more"))
+                }, {
+                  default: d(() => [
+                    p(s(Pe), { decorative: "" })
+                  ]),
+                  _: 1
+                })) : L("", !0),
+                p(s(ye), {
+                  "auth-function": () => e.canCreate()
+                }, {
+                  default: d(() => [
+                    p(_, {
+                      appearance: "primary",
+                      "data-testid": "toolbar-add-consumer-group",
+                      size: e.useActionOutside ? "medium" : "large",
+                      onClick: Z
+                    }, {
+                      default: d(() => [
+                        p(s(Te)),
+                        z(" " + E(e.config.consumerId ? s(u)("consumer_groups.actions.add_to_group") : s(u)("consumer_groups.list.toolbar_actions.new_consumer_group")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["size"])
+                  ]),
+                  _: 1
+                }, 8, ["auth-function"])
+              ])
+            ], 8, ["disabled"]))
+          ]),
+          name: d(({ rowValue: y }) => [
+            U("b", null, E(y ?? "-"), 1)
+          ]),
+          consumers_count: d(({ rowValue: y }) => [
+            z(E(y ?? "-"), 1)
+          ]),
+          tags: d(({ rowValue: y }) => [
+            p(s(to), { tags: y }, null, 8, ["tags"])
+          ]),
+          actions: d(({ row: y }) => [
+            p(Ae, null, {
+              default: d(({ copyToClipboard: ve }) => [
+                p(pe, {
+                  "data-testid": "action-entity-copy-id",
+                  onClick: (je) => v(y, ve)
+                }, {
+                  default: d(() => [
+                    z(E(s(u)("consumer_groups.actions.copy_id")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            p(Ae, null, {
+              default: d(({ copyToClipboard: ve }) => [
+                p(pe, {
+                  "data-testid": "action-entity-copy-json",
+                  onClick: (je) => w(y, ve)
+                }, {
+                  default: d(() => [
+                    z(E(s(u)("consumer_groups.actions.copy_json")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            p(s(ye), {
+              "auth-function": () => e.canRetrieve(y)
+            }, {
+              default: d(() => [
+                p(pe, {
+                  "data-testid": "action-entity-view",
+                  "has-divider": "",
+                  item: C(y.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            p(s(ye), {
+              "auth-function": () => e.canEdit(y)
+            }, {
+              default: d(() => [
+                p(pe, {
+                  "data-testid": "action-entity-edit",
+                  item: ee(y.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            p(s(ye), {
+              "auth-function": () => e.canDelete(y)
+            }, {
+              default: d(() => [
+                p(pe, {
+                  danger: "",
+                  "data-testid": "action-entity-delete",
+                  "has-divider": "",
+                  onClick: () => e.config.consumerId ? Re(y) : fe(y)
+                }, {
+                  default: d(() => [
+                    z(E(e.config.consumerId ? s(u)("consumer_groups.actions.exit") : s(u)("consumer_groups.actions.delete")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"])
+          ]),
+          _: 2
+        }, [
+          !V.value && e.config.app === "konnect" ? {
+            name: "empty-state",
+            fn: d(() => {
+              var y;
+              return [
+                p(G, {
+                  "data-testid": "consumer-groups-entity-empty-state",
+                  "icon-background": "",
+                  message: s(u)("consumer_groups.list.empty_state_v2.description"),
+                  title: s(u)("consumer_groups.list.empty_state_v2.title")
+                }, ke({
+                  icon: d(() => [
+                    p(s(Je), { decorative: "" })
+                  ]),
+                  action: d(() => [
+                    Ce.value ? (S(), W(_, {
+                      key: 0,
+                      "data-testid": "entity-create-button",
+                      onClick: Z
+                    }, {
+                      default: d(() => [
+                        p(s(Te), { decorative: "" }),
+                        z(" " + E(s(u)("consumer_groups.list.toolbar_actions.new_consumer_group")), 1)
+                      ]),
+                      _: 1
+                    })) : L("", !0),
+                    p(_, {
+                      appearance: "secondary",
+                      "data-testid": "entity-learn-more-button",
+                      onClick: m[2] || (m[2] = (ve) => r.$emit("click:learn-more"))
+                    }, {
+                      default: d(() => [
+                        p(s(Pe), { decorative: "" }),
+                        z(" " + E(s(u)("consumer_groups.list.empty_state_v2.learn_more")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 2
+                }, [
+                  (y = e.config) != null && y.isControlPlaneGroup ? {
+                    name: "default",
+                    fn: d(() => [
+                      z(E(s(u)("consumer_groups.list.empty_state_v2.group")), 1)
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["message", "title"])
+              ];
+            }),
+            key: "0"
+          } : void 0
+        ]), 1032, ["cache-identifier", "disable-pagination", "disable-sorting", "empty-state-options", "error-message", "fetcher", "fetcher-cache-key", "preferences-storage-key", "query", "table-headers", "onState"]),
+        p(s(ro), {
+          "action-pending": ne.value,
+          "data-testid": "delete-consumer-group-modal",
+          description: s(u)("consumer_groups.delete.description"),
+          "entity-name": P.value && (P.value.name || P.value.id),
+          "entity-type": s(no).ConsumerGroup,
+          error: me.value,
+          title: s(u)("consumer_groups.delete.title"),
+          visible: H.value,
+          onCancel: o,
+          onProceed: i
+        }, null, 8, ["action-pending", "description", "entity-name", "entity-type", "error", "title", "visible"]),
+        e.config.consumerId ? (S(), W(ho, {
+          key: 0,
+          config: e.config,
+          "data-testid": "add-to-group-modal",
+          visible: b.value,
+          "onAdd:partialSuccess": m[4] || (m[4] = (y) => A(y, !0)),
+          "onAdd:success": m[5] || (m[5] = (y) => A(y)),
+          onCancel: l
+        }, null, 8, ["config", "visible"])) : L("", !0),
+        e.config.consumerId && h.value ? (S(), W(Ne, {
+          key: 1,
+          "action-button-appearance": "danger",
+          "data-testid": "exit-group-modal",
+          title: s(u)("consumer_groups.consumers.exit.title"),
+          visible: J.value,
+          onCancel: xe,
+          onProceed: Oe
+        }, {
+          default: d(() => [
+            p(s(f), {
+              class: "exit-modal-message",
+              keypath: e.config.consumerUsername ? "consumer_groups.consumers.exit.confirmation" : "consumer_groups.consumers.exit.confirmationNoUsername",
+              tag: "p"
+            }, ke({
+              consumerGroup: d(() => [
+                U("strong", null, E(h.value.name || h.value.id), 1)
+              ]),
+              _: 2
+            }, [
+              e.config.consumerUsername ? {
+                name: "consumer",
+                fn: d(() => [
+                  U("strong", null, E(e.config.consumerUsername), 1)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["keypath"]),
+            U("p", null, E(s(u)("consumer_groups.consumers.exit.description")), 1)
+          ]),
+          _: 1
+        }, 8, ["title", "visible"])) : L("", !0)
+      ]);
+    };
+  }
+}), Vo = /* @__PURE__ */ Ee(ko, [["__scopeId", "data-v-d84b29c3"]]), Io = { class: "kong-ui-entities-consumer-group-form" }, wo = { class: "select-item-container" }, $o = { class: "select-item-label" }, Eo = {
+  key: 0,
+  class: "select-item-description"
+}, xo = /* @__PURE__ */ _e({
+  __name: "ConsumerGroupForm",
+  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 consumerGroupId is provided, it will put the form in Edit mode instead of Create */
+    consumerGroupId: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    hideConsumers: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update", "error", "loading"],
+  setup(e, { emit: N }) {
+    var me, ge, fe;
+    const a = e, t = N, { i18n: { t: f } } = he.useI18n(), u = Ke(), n = Ge({
+      fields: {
+        name: "",
+        tags: "",
+        consumers: []
+      },
+      errorMessage: "",
+      readonly: !1
+    }), x = Ge({
+      name: "",
+      tags: "",
+      consumers: []
+    }), {
+      debouncedQueryChange: ae,
+      loading: R,
+      error: ue,
+      loadItems: ie,
+      results: Z
+    } = Be(a.config, (ge = Y.form[(me = a.config) == null ? void 0 : me.app]) == null ? void 0 : ge.consumersList, "", {
+      fetchedItemsKey: "data",
+      searchKeys: ["username", "custom_id", "id"]
+    }), { axiosInstance: T } = $e((fe = a.config) == null ? void 0 : fe.axiosRequestConfig), { getMessageFromError: V } = ao(), oe = uo(), te = k(() => Z.value.map((o) => ({
+      label: o.username || o.custom_id,
+      value: o.id,
+      selected: n.fields.consumers.includes(o.id),
+      data: o
+      // we need this to determine whether or not to show the description text
+    }))), se = k(() => {
+      var o;
+      return Y.form[(o = a.config) == null ? void 0 : o.app].edit;
+    }), le = k(() => a.consumerGroupId ? Ie.Edit : Ie.Create), $ = k(() => !!n.fields.name && !re.value), Q = k(() => JSON.stringify(n.fields) !== JSON.stringify(x)), M = (o, i = "", b = "") => {
+      var l, A, q, h, J;
+      let c = `${(l = a.config) == null ? void 0 : l.apiBaseUrl}${Y.form[(A = a.config) == null ? void 0 : A.app][o]}`;
+      return ((q = a.config) == null ? void 0 : q.app) === "konnect" && (c = c.replace(/{controlPlaneId}/gi, ((h = a.config) == null ? void 0 : h.controlPlaneId) || "")), c = c.replace(/\/{workspace}/gi, (J = a.config) != null && J.workspace ? `/${a.config.workspace}` : "").replace(/{id}/gi, (i || a.consumerGroupId) ?? ""), (o === "addConsumer" || o === "removeConsumer") && (c = c.replace(/{consumerId}/gi, b)), c;
+    }, ce = () => {
+      var o;
+      u.push(((o = a.config) == null ? void 0 : o.cancelRoute) || { name: "consumer-group-list" });
+    }, de = (o) => {
+      t("error", o);
+    }, j = (o) => {
+      t("loading", o);
+    }, F = async (o) => {
+      var b, c, l, A, q;
+      n.fields.name = ((b = o == null ? void 0 : o.item) == null ? void 0 : b.name) || ((c = o == null ? void 0 : o.consumer_group) == null ? void 0 : c.name) || (o == null ? void 0 : o.name) || "";
+      const i = ((l = o == null ? void 0 : o.item) == null ? void 0 : l.tags) || (o == null ? void 0 : o.consumer_group.tags) || (o == null ? void 0 : o.tags) || [];
+      if (n.fields.tags = (i == null ? void 0 : i.join(", ")) || "", "consumers" in o)
+        n.fields.consumers = ((A = o == null ? void 0 : o.consumers) == null ? void 0 : A.map((h) => h.id)) || [];
+      else
+        try {
+          const { data: h } = await T.get(M("getConsumers"));
+          n.fields.consumers = "consumers" in h ? (q = h == null ? void 0 : h.consumers) == null ? void 0 : q.map((J) => J.id) : [];
+        } catch (h) {
+          g(h);
+        }
+      Object.assign(x, n.fields);
+    }, re = k(() => oe.utf8Name(n.fields.name)), K = k(() => {
+      var o, i;
+      return {
+        name: n.fields.name,
+        tags: (i = (o = n.fields.tags.split(",")) == null ? void 0 : o.map((b) => String(b || "").trim())) == null ? void 0 : i.filter((b) => b !== "")
+      };
+    }), v = async (o, i = "") => await T.post(M("addConsumer", i, o), { consumer: o }), w = async (o, i = "") => await T.delete(M("removeConsumer", i, o)), g = (o) => {
+      n.errorMessage = V(o), t("error", o);
+    }, C = (o = a.consumerGroupId ?? "") => {
+      Object.assign(x, n.fields), t("update", { ...n.fields, id: o });
+    }, ee = (o, i, b = a.consumerGroupId ?? "") => {
+      const c = o == null ? void 0 : o.find((l) => l.status !== "fulfilled");
+      c ? g({
+        code: c.status,
+        message: i
+      }) : C(b);
+    }, P = async () => {
+      let o = "";
+      try {
+        const { data: i } = await T.post(M("create"), K.value);
+        o = "item" in i ? i.item.id : i.id;
+      } catch (i) {
+        g(i);
+      }
+      if (n.fields.consumers.length > 0 && o)
+        try {
+          const i = n.fields.consumers.map((c) => v(c, o)), b = await Promise.allSettled(i);
+          ee(b, f("consumer_groups.errors.add_consumer"), o);
+        } catch (i) {
+          g(i);
+        }
+      else n.fields.consumers.length === 0 && o && C(o);
+    }, H = async () => {
+      var b;
+      try {
+        ((b = a.config) == null ? void 0 : b.app) === "konnect" ? await T.put(M("edit"), K.value) : await T.patch(M("edit"), K.value);
+      } catch (c) {
+        g(c);
+      }
+      const o = n.fields.consumers.filter((c) => !x.consumers.includes(c)), i = x.consumers.filter((c) => !n.fields.consumers.includes(c));
+      if (i.length === 0 && o.length === 0)
+        C();
+      else {
+        if (i.length > 0)
+          try {
+            const c = i.map((A) => w(A)), l = await Promise.allSettled(c);
+            ee(l, f("consumer_groups.errors.remove_consumer"));
+          } catch (c) {
+            g(c);
+          }
+        if (o.length > 0)
+          try {
+            const c = o.map((A) => v(A)), l = await Promise.allSettled(c);
+            ee(l, f("consumer_groups.errors.add_consumer"));
+          } catch (c) {
+            g(c);
+          }
+      }
+    }, ne = async () => {
+      try {
+        n.readonly = !0, le.value === Ie.Create ? await P() : await H();
+      } finally {
+        n.readonly = !1;
+      }
+    };
+    return Fe(async () => {
+      a.hideConsumers || await ie();
+    }), (o, i) => {
+      const b = O("KInput"), c = O("KMultiselect");
+      return S(), X("div", Io, [
+        p(s(io), {
+          "can-submit": $.value && Q.value,
+          config: e.config,
+          "edit-id": e.consumerGroupId,
+          "entity-type": s(De).ConsumerGroup,
+          "error-message": n.errorMessage || s(ue) || re.value,
+          "fetch-url": se.value,
+          "form-fields": K.value,
+          "is-readonly": n.readonly,
+          onCancel: ce,
+          "onFetch:error": i[3] || (i[3] = (l) => de(l)),
+          "onFetch:success": F,
+          onLoading: i[4] || (i[4] = (l) => j(l)),
+          onSubmit: ne
+        }, {
+          default: d(() => [
+            p(s(Ve), {
+              description: s(f)("consumer_groups.form.general_info.description"),
+              title: s(f)("consumer_groups.form.general_info.title")
+            }, {
+              default: d(() => [
+                p(b, {
+                  modelValue: n.fields.name,
+                  "onUpdate:modelValue": i[0] || (i[0] = (l) => n.fields.name = l),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "consumer-group-form-name",
+                  label: s(f)("consumer_groups.form.fields.name.label"),
+                  placeholder: s(f)("consumer_groups.form.fields.name.placeholder"),
+                  required: "",
+                  type: "text"
+                }, null, 8, ["modelValue", "label", "placeholder"]),
+                p(b, {
+                  modelValue: n.fields.tags,
+                  "onUpdate:modelValue": i[1] || (i[1] = (l) => n.fields.tags = l),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "consumer-group-form-tags",
+                  help: s(f)("consumer_groups.form.fields.tags.help"),
+                  label: s(f)("consumer_groups.form.fields.tags.label"),
+                  "label-attributes": {
+                    info: s(f)("consumer_groups.form.fields.tags.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: s(f)("consumer_groups.form.fields.tags.placeholder"),
+                  type: "text"
+                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder"])
+              ]),
+              _: 1
+            }, 8, ["description", "title"]),
+            e.hideConsumers ? L("", !0) : (S(), W(s(Ve), {
+              key: 0,
+              description: s(f)("consumer_groups.form.consumers.description"),
+              "has-divider": "",
+              title: s(f)("consumer_groups.form.consumers.title")
+            }, {
+              default: d(() => [
+                p(c, {
+                  modelValue: n.fields.consumers,
+                  "onUpdate:modelValue": i[2] || (i[2] = (l) => n.fields.consumers = l),
+                  appearance: "select",
+                  autosuggest: "",
+                  items: te.value,
+                  label: s(f)("consumer_groups.form.fields.consumers.label"),
+                  loading: s(R),
+                  placeholder: s(f)("consumer_groups.form.fields.consumers.placeholder"),
+                  width: "auto",
+                  onQueryChange: s(ae)
+                }, {
+                  "item-template": d(({ item: l }) => {
+                    var A, q, h;
+                    return [
+                      U("div", wo, [
+                        U("div", $o, E(l.label), 1),
+                        (A = l == null ? void 0 : l.data) != null && A.username && ((q = l == null ? void 0 : l.data) != null && q.custom_id) ? (S(), X("div", Eo, E((h = l == null ? void 0 : l.data) == null ? void 0 : h.custom_id), 1)) : L("", !0)
+                      ])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["modelValue", "items", "label", "loading", "placeholder", "onQueryChange"])
+              ]),
+              _: 1
+            }, 8, ["description", "title"]))
+          ]),
+          _: 1
+        }, 8, ["can-submit", "config", "edit-id", "entity-type", "error-message", "fetch-url", "form-fields", "is-readonly"])
+      ]);
+    };
+  }
+}), Fo = /* @__PURE__ */ Ee(xo, [["__scopeId", "data-v-9c98b878"]]), Mo = { class: "kong-ui-consumer-group-entity-config-card" }, Ko = /* @__PURE__ */ _e({
+  __name: "ConsumerGroupConfigCard",
+  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 N = e, { i18n: { t: a } } = he.useI18n(), t = k(() => Y.item[N.config.app]), f = I({
+      id: {},
+      name: {},
+      created_at: {},
+      updated_at: {},
+      tags: {
+        tooltip: a("consumer_groups.form.fields.tags.tooltip")
+      }
+    });
+    return (u, n) => (S(), X("div", Mo, [
+      p(s(lo), {
+        config: e.config,
+        "config-card-doc": e.configCardDoc,
+        "config-schema": f.value,
+        "data-key": "consumer_group",
+        "entity-type": s(De).ConsumerGroup,
+        "fetch-url": t.value,
+        "hide-title": e.hideTitle,
+        "onFetch:error": n[0] || (n[0] = (x) => u.$emit("fetch:error", x)),
+        "onFetch:success": n[1] || (n[1] = (x) => u.$emit("fetch:success", x)),
+        onLoading: n[2] || (n[2] = (x) => u.$emit("loading", x))
+      }, null, 8, ["config", "config-card-doc", "config-schema", "entity-type", "fetch-url", "hide-title"])
+    ]));
+  }
+});
+export {
+  Ko as ConsumerGroupConfigCard,
+  Fo as ConsumerGroupForm,
+  Vo as ConsumerGroupList
+};