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

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

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