@kong-ui-public/entities-keys 3.16.2-pr.3869.e876c8c8a.0 → 3.16.2

package/dist/entities-keys.es.js

@@ -0,0 +1,949 @@
+import { defineComponent as me, computed as m, ref as b, watch as Z, onBeforeMount as $e, resolveComponent as j, openBlock as g, createElementBlock as q, createVNode as c, unref as t, createSlots as pe, withCtx as r, createTextVNode as R, toDisplayString as h, createElementVNode as $, createBlock as C, Teleport as De, createCommentVNode as U, reactive as _e, Fragment as Se, renderList as we } from "vue";
+import { useRouter as je } from "vue-router";
+import { BookIcon as Ie, AddIcon as Ce, KeyIcon as Fe } from "@kong/icons";
+import { createI18n as Te, i18nTComponent as Be } from "@kong-ui-public/i18n";
+import { useAxios as ge, useTableState as Ae, useManagedByColumn as Pe, useFetcher as Ue, useDeleteUrlBuilder as qe, FetcherStatus as Oe, EntityBaseTable as Ne, PermissionsWrapper as ie, getManagedByLabel as Je, TableTags as Le, EntityFilter as We, EntityDeleteModal as He, EntityTypes as Qe, useErrors as Ge, EntityBaseFormType as Y, useDebouncedFilter as ze, EntityBaseForm as Xe, SupportedEntityType as Ee, EntityFormSection as Ke, useStringHelpers as Ye, ConfigurationSchemaType as ue, ConfigurationSchemaSection as ke, EntityBaseConfigCard as Ze, InternalLinkItem as et, ConfigCardItem as xe } from "@kong-ui-public/entities-shared";
+const tt = { title: "Keys", list: { toolbar_actions: { new_key: "New key" }, table_headers: { name: "Name", key_id: "Key ID", id: "ID", tags: "Tags" }, empty_state: { title: "Configure a new key", description: "A key object holds a representation of asymmetric keys in various formats." }, empty_state_v2: { title: "Configure your first key", group: "Keys created in gateways within this group will automatically appear here.", description: "Keys hold a representation of asymmetric keys that gateways and plugins can use for secure operations.", create_cta: "New key", learn_more: "Learn more" } }, actions: { create: "New key", copy_id: "Copy ID", copy_json: "Copy JSON", edit: "Edit", delete: "Delete", clear: "Clear", view: "View details", loading: "Loading..." }, search: { placeholder: "Filter by exact name or ID", no_results: "No results found" }, delete: { title: "Delete a key", description: "This action cannot be reversed so make sure to check the key usage before deleting." }, errors: { general: "Keys could not be retrieved", delete: "The key could not be deleted at this time.", copy: "Failed to copy to clipboard", key_sets: { fetch: "Could not fetch available key sets", invalid: "Please select a valid key set ID" } }, copy: { success: "Copied {val} to clipboard", success_brief: "Successfully copied to clipboard" }, form: { sections: { general: { title: "General information", description: "General information will help identify and manage this key." }, keys: { title: "Asymmetric keys", description: "Choose the preferred format for this asymmetric key. Currently only support PEM and JWK format." } }, fields: { id: { label: "Key ID", placeholder: "Enter a key ID", tooltip: "An identifier for a key", help: "If using JWK, need to match with the jwk.kid field" }, x5t: { label: "X.509 Certificate thumbprint (x5t)", placeholder: "Enter the certificate thumbprint that identifies the key to be used to validate JWT signature", tooltip: "x5t is a base64url-encoded SHA-1 thumbprint of the DER encoding of X.509 certificate", help: "If using x5t, need to match with the jwk.x5t field" }, name: { label: "Name", placeholder: "Enter a unique name for this key", tooltip: "The name to associate with the given key" }, 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." }, key_set: { label: "Key set", placeholder: "Select a key set to add into", footer: "Search by exact ID to find key sets not included in the list" }, key_format: { label: "Key format", options: { jwk: "JWK", pem: "PEM" } }, jwk: { label: "JWK", placeholder: "Enter a JWK", tooltip: "A JSON Web key represented as a string" }, kid: { label: "Key ID", tooltip: "A unique identifier for a key." }, set: { label: "Key set", tooltip: "The id (an UUID) of the key-set with which to associate the key." }, private_key: { label: "Private key", placeholder: "Enter a private key" }, public_key: { label: "Public key", placeholder: "Enter a public key" } } } }, at = {
+  keys: tt
+};
+function lt() {
+  const i = Te("en-us", at);
+  return {
+    i18n: i,
+    i18nT: Be(i)
+    // Translation component <i18n-t>
+  };
+}
+const ve = {
+  useI18n: lt
+}, D = "/v2/control-planes/{controlPlaneId}/core-entities/{workspace}", F = "/{workspace}", T = {
+  list: {
+    konnect: {
+      all: `${D}/keys`,
+      forKeySet: `${D}/key-sets/{keySetId}/keys`
+    },
+    kongManager: {
+      all: `${F}/keys`,
+      forKeySet: `${F}/key-sets/{keySetId}/keys`
+    }
+  },
+  form: {
+    konnect: {
+      create: {
+        all: `${D}/keys`,
+        forKeySet: `${D}/key-sets/{keySetId}/keys`
+      },
+      edit: {
+        all: `${D}/keys/{id}`,
+        forKeySet: `${D}/key-sets/{keySetId}/keys/{id}`
+      },
+      keySets: `${D}/key-sets`,
+      getKeySet: `${D}/key-sets/{keySetId}`
+    },
+    kongManager: {
+      create: {
+        all: `${F}/keys`,
+        forKeySet: `${F}/key-sets/{keySetId}/keys`
+      },
+      edit: {
+        all: `${F}/keys/{id}`,
+        forKeySet: `${F}/key-sets/{keySetId}/keys/{id}`
+      },
+      keySets: `${F}/key-sets`,
+      getKeySet: `${F}/key-sets/{keySetId}`
+    }
+  }
+}, it = { class: "kong-ui-entities-keys-list" }, ot = { class: "button-row" }, st = /* @__PURE__ */ me({
+  __name: "KeyList",
+  props: {
+    /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+    config: {
+      type: Object,
+      required: !0,
+      validator: (i) => !(!i || !["konnect", "kongManager"].includes(i?.app) || !i.createRoute || !i.getViewRoute || !i.getEditRoute || i.app === "kongManager" && !i.isExactMatch && !i.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"],
+  setup(i, { emit: B }) {
+    const v = B, a = i, { i18n: { t: d } } = ve.useI18n(), s = je(), { axiosInstance: S } = ge(a.config?.axiosRequestConfig), { hasRecords: A, handleStateChange: G } = Ae(() => K.value), w = m(() => A.value && a.config.app === "konnect"), e = m(() => !!a.config.keySetId), I = m(() => a.config.app !== "kongManager" || !!a.config.disableSorting), E = {
+      // the Name column is non-hidable
+      name: { label: d("keys.list.table_headers.name"), searchable: !0, sortable: !0, hidable: !1 },
+      kid: { label: d("keys.list.table_headers.key_id"), sortable: !0 },
+      tags: { label: d("keys.list.table_headers.tags") },
+      id: { label: d("keys.list.table_headers.id"), sortable: !0 }
+    }, { defaultTablePreferences: V, tableHeaders: z } = Pe(E), O = m(() => {
+      let l = `${a.config.apiBaseUrl}${T.list[a.config.app][a.config.keySetId ? "forKeySet" : "all"]}`;
+      return a.config.app === "konnect" && (l = l.replace(/{controlPlaneId}/gi, a.config?.controlPlaneId || "")), l.replace(/\/{workspace}/gi, a.config?.workspace ? `/${a.config.workspace}` : "").replace(/{keySetId}/gi, a.config?.keySetId || "");
+    }), K = b(""), u = m(() => {
+      const l = a.config.app === "konnect" || a.config.isExactMatch;
+      if (l)
+        return {
+          isExactMatch: l,
+          placeholder: d("keys.search.placeholder")
+        };
+      const p = { name: E.name };
+      return {
+        isExactMatch: l,
+        fields: p,
+        schema: a.config.filterSchema
+      };
+    }), {
+      fetcher: k,
+      fetcherState: _,
+      fetcherCacheKey: y
+    } = Ue(m(() => ({ ...a.config, cacheIdentifier: a.cacheIdentifier })), O), ee = () => {
+      K.value = "";
+    }, oe = () => {
+      y.value++;
+    }, N = b(null), se = async (l, p) => {
+      const M = l.id;
+      if (!await p(M)) {
+        de(l, "id");
+        return;
+      }
+      re(l, "id");
+    }, ne = async (l, p) => {
+      const M = JSON.stringify(l);
+      if (!await p(M)) {
+        v("copy:error", {
+          entity: l,
+          message: d("keys.errors.copy")
+        });
+        return;
+      }
+      v("copy:success", {
+        entity: l,
+        message: d("keys.copy.success_brief")
+      });
+    }, re = (l, p) => {
+      v("copy:success", {
+        entity: l,
+        field: p,
+        message: d("keys.copy.success", { val: l[p] })
+      });
+    }, de = (l, p) => {
+      v("copy:error", {
+        entity: l,
+        field: p,
+        message: d("keys.errors.copy")
+      });
+    }, ce = async (l) => {
+      await a.canRetrieve?.(l) && s.push(a.config.getViewRoute(l.id));
+    }, ye = (l) => ({
+      label: d("keys.actions.view"),
+      to: a.config.getViewRoute(l)
+    }), te = (l) => ({
+      label: d("keys.actions.edit"),
+      to: a.config.getEditRoute(l)
+    }), x = b(void 0), J = b(!1), L = b(!1), W = b(""), ae = qe(a.config, O.value), fe = (l) => {
+      x.value = l, J.value = !0;
+    }, o = () => {
+      J.value = !1;
+    }, n = async () => {
+      if (x.value?.id) {
+        L.value = !0;
+        try {
+          await S.delete(ae(x.value.id)), L.value = !1, J.value = !1, y.value++, v("delete:success", x.value);
+        } catch (l) {
+          W.value = l.response?.data?.message || l.message || d("keys.errors.delete"), v("error", l);
+        } finally {
+          L.value = !1;
+        }
+      }
+    }, H = () => {
+      s.push(a.config.createRoute);
+    };
+    Z(_, (l) => {
+      if (l.status === Oe.Error) {
+        N.value = {
+          title: d("keys.errors.general")
+        }, l.error?.response?.data?.message && (N.value.message = l.error.response.data.message), v("error", l.error);
+        return;
+      }
+      N.value = null;
+    });
+    const Q = b({
+      ctaPath: a.config.createRoute,
+      ctaText: void 0,
+      message: `${d("keys.list.empty_state.description")}${a.config.additionMessageForEmptyState ? ` ${a.config.additionMessageForEmptyState}` : ""}`,
+      title: d("keys.title")
+    }), P = b(!1);
+    return $e(async () => {
+      P.value = await a.canCreate(), P.value && (Q.value.title = d("keys.list.empty_state.title"), Q.value.ctaText = d("keys.actions.create"));
+    }), (l, p) => {
+      const M = j("KButton"), Me = j("KEmptyState"), he = j("KCopy"), X = j("KDropdownItem"), be = j("KClipboardProvider");
+      return g(), q("div", it, [
+        c(t(Ne), {
+          "cache-identifier": i.cacheIdentifier,
+          "default-table-preferences": t(V),
+          "disable-sorting": I.value,
+          "empty-state-options": Q.value,
+          "enable-entity-actions": "",
+          "error-message": N.value,
+          fetcher: t(k),
+          "fetcher-cache-key": t(y),
+          "pagination-type": "offset",
+          "preferences-storage-key": "kong-ui-entities-keys-list",
+          query: K.value,
+          "table-headers": t(z),
+          onClearSearchInput: ee,
+          "onClick:row": p[3] || (p[3] = (f) => ce(f)),
+          onSort: oe,
+          onState: t(G)
+        }, pe({
+          "toolbar-filter": r(() => [
+            c(t(We), {
+              modelValue: K.value,
+              "onUpdate:modelValue": p[0] || (p[0] = (f) => K.value = f),
+              config: u.value
+            }, null, 8, ["modelValue", "config"])
+          ]),
+          "toolbar-button": r(() => [
+            (g(), C(De, {
+              disabled: !i.useActionOutside,
+              to: "#kong-ui-app-page-header-action-button"
+            }, [
+              $("div", ot, [
+                !e.value && w.value ? (g(), C(M, {
+                  key: 0,
+                  appearance: "secondary",
+                  class: "open-learning-hub",
+                  "data-testid": "keys-learn-more-button",
+                  icon: "",
+                  onClick: p[1] || (p[1] = (f) => l.$emit("click:learn-more"))
+                }, {
+                  default: r(() => [
+                    c(t(Ie), { decorative: "" })
+                  ]),
+                  _: 1
+                })) : U("", !0),
+                c(t(ie), {
+                  "auth-function": () => i.canCreate()
+                }, {
+                  default: r(() => [
+                    c(M, {
+                      appearance: "primary",
+                      "data-testid": "toolbar-add-key",
+                      size: i.useActionOutside ? "medium" : "large",
+                      to: i.config.createRoute
+                    }, {
+                      default: r(() => [
+                        c(t(Ce)),
+                        R(" " + h(t(d)("keys.list.toolbar_actions.new_key")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["size", "to"])
+                  ]),
+                  _: 1
+                }, 8, ["auth-function"])
+              ])
+            ], 8, ["disabled"]))
+          ]),
+          name: r(({ rowValue: f }) => [
+            $("b", null, h(f ?? "-"), 1)
+          ]),
+          kid: r(({ rowValue: f }) => [
+            c(he, { text: f }, null, 8, ["text"])
+          ]),
+          tags: r(({ rowValue: f }) => [
+            c(t(Le), { tags: f }, null, 8, ["tags"])
+          ]),
+          id: r(({ rowValue: f }) => [
+            c(he, {
+              text: f,
+              truncate: ""
+            }, null, 8, ["text"])
+          ]),
+          managed_by: r(({ rowValue: f }) => [
+            R(h(t(Je)(f) ?? "-"), 1)
+          ]),
+          actions: r(({ row: f }) => [
+            c(be, null, {
+              default: r(({ copyToClipboard: le }) => [
+                c(X, {
+                  "data-testid": "action-entity-copy-id",
+                  onClick: (Re) => se(f, le)
+                }, {
+                  default: r(() => [
+                    R(h(t(d)("keys.actions.copy_id")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            c(be, null, {
+              default: r(({ copyToClipboard: le }) => [
+                c(X, {
+                  "data-testid": "action-entity-copy-json",
+                  onClick: (Re) => ne(f, le)
+                }, {
+                  default: r(() => [
+                    R(h(t(d)("keys.actions.copy_json")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            c(t(ie), {
+              "auth-function": () => i.canRetrieve(f)
+            }, {
+              default: r(() => [
+                c(X, {
+                  "data-testid": "action-entity-view",
+                  "has-divider": "",
+                  item: ye(f.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            c(t(ie), {
+              "auth-function": () => i.canEdit(f)
+            }, {
+              default: r(() => [
+                c(X, {
+                  "data-testid": "action-entity-edit",
+                  item: te(f.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            c(t(ie), {
+              "auth-function": () => i.canDelete(f)
+            }, {
+              default: r(() => [
+                c(X, {
+                  danger: "",
+                  "data-testid": "action-entity-delete",
+                  "has-divider": "",
+                  onClick: (le) => fe(f)
+                }, {
+                  default: r(() => [
+                    R(h(t(d)("keys.actions.delete")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"])
+          ]),
+          _: 2
+        }, [
+          !K.value && i.config.app === "konnect" ? {
+            name: "empty-state",
+            fn: r(() => [
+              c(Me, {
+                "data-testid": i.config.keySetId ? "nested-keys-entity-empty-state" : "keys-entity-empty-state",
+                "icon-background": "",
+                message: t(d)("keys.list.empty_state_v2.description"),
+                title: t(d)("keys.list.empty_state_v2.title")
+              }, pe({
+                icon: r(() => [
+                  c(t(Fe), { decorative: "" })
+                ]),
+                action: r(() => [
+                  P.value ? (g(), C(M, {
+                    key: 0,
+                    "data-testid": "entity-create-button",
+                    onClick: H
+                  }, {
+                    default: r(() => [
+                      c(t(Ce), { decorative: "" }),
+                      R(" " + h(t(d)("keys.list.empty_state_v2.create_cta")), 1)
+                    ]),
+                    _: 1
+                  })) : U("", !0),
+                  c(M, {
+                    appearance: "secondary",
+                    "data-testid": "entity-learn-more-button",
+                    onClick: p[2] || (p[2] = (f) => l.$emit("click:learn-more"))
+                  }, {
+                    default: r(() => [
+                      c(t(Ie), { decorative: "" }),
+                      R(" " + h(t(d)("keys.list.empty_state_v2.learn_more")), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 2
+              }, [
+                i.config?.isControlPlaneGroup ? {
+                  name: "default",
+                  fn: r(() => [
+                    R(h(t(d)("keys.list.empty_state_v2.group")), 1)
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["data-testid", "message", "title"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["cache-identifier", "default-table-preferences", "disable-sorting", "empty-state-options", "error-message", "fetcher", "fetcher-cache-key", "query", "table-headers", "onState"]),
+        c(t(He), {
+          "action-pending": L.value,
+          description: t(d)("keys.delete.description"),
+          "entity-name": x.value && (x.value.name || x.value.id),
+          "entity-type": t(Qe).Key,
+          error: W.value,
+          title: t(d)("keys.delete.title"),
+          visible: J.value,
+          onCancel: o,
+          onProceed: n
+        }, null, 8, ["action-pending", "description", "entity-name", "entity-type", "error", "title", "visible"])
+      ]);
+    };
+  }
+}), Ve = (i, B) => {
+  const v = i.__vccOpts || i;
+  for (const [a, d] of B)
+    v[a] = d;
+  return v;
+}, St = /* @__PURE__ */ Ve(st, [["__scopeId", "data-v-84422c8b"]]), nt = { class: "kong-ui-entities-keys-form" }, rt = { "data-testid": "no-search-results" }, dt = { class: "select-item-container" }, ct = { class: "select-item-label" }, yt = { class: "select-item-description" }, ft = {
+  key: 1,
+  class: "invalid-key-set-message",
+  "data-testid": "invalid-key-set-message"
+}, ut = { "data-testid": "key-format-container" }, kt = /* @__PURE__ */ me({
+  __name: "KeyForm",
+  props: {
+    /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+    config: {
+      type: Object,
+      required: !0,
+      validator: (i) => !(!i || !["konnect", "kongManager"].includes(i?.app) || i.app === "konnect" && !i.controlPlaneId || i.app === "kongManager" && typeof i.workspace != "string" || !i.cancelRoute)
+    },
+    /** If a valid Key ID is provided, it will put the form in Edit mode instead of Create */
+    keyId: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    /** Specific the keyset Id if the key entity is a scoped entity [both create and edit form] */
+    keySetId: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    /** Pre-select the Key Set field and mark it as read-only [create form only] */
+    fixedKeySetId: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    /** Whether to provide x5t field in key form */
+    showx5t: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    }
+  },
+  emits: ["update", "error", "loading"],
+  setup(i, { emit: B }) {
+    const v = B, a = i, d = je(), { i18n: { t: s } } = ve.useI18n(), { getMessageFromError: S } = Ge(), { axiosInstance: A } = ge(a.config?.axiosRequestConfig), G = m(() => a.keySetId ? T.form[a.config.app].edit.forKeySet.replace(/{keySetId}/gi, a.keySetId) : T.form[a.config.app].edit.all), w = m(() => a.keyId ? Y.Edit : Y.Create), e = _e({
+      fields: {
+        /**
+        * Generates a unique key name using the current timestamp.
+        * The name format is "new-key-" followed by numbers from the ISO timestamp.
+        *
+        * Example output: "new-key-20250307123045789"
+        */
+        name: w.value === Y.Create ? `new-key-${(/* @__PURE__ */ new Date()).toISOString().replace(/\D/g, "").slice(0, 17)}` : "",
+        tags: "",
+        key_id: "",
+        key_format: "jwk",
+        key_set: "",
+        jwk: "",
+        private_key: "",
+        public_key: "",
+        ...a.showx5t ? { x5t: "" } : {}
+      },
+      isReadonly: !1,
+      errorMessage: ""
+    }), I = _e({
+      name: "",
+      tags: "",
+      key_id: "",
+      key_format: "jwk",
+      key_set: "",
+      jwk: "",
+      private_key: "",
+      public_key: ""
+    }), E = [
+      {
+        label: s("keys.form.fields.key_format.options.jwk"),
+        value: "jwk"
+      },
+      {
+        label: s("keys.form.fields.key_format.options.pem"),
+        value: "pem"
+      }
+    ], V = m(() => e.isReadonly || w.value === Y.Create && !!a.fixedKeySetId), z = m(() => !V.value);
+    Z(() => a.fixedKeySetId, (o) => {
+      w.value === Y.Create && (e.fields.key_set = o ?? "");
+    }, { immediate: !0 });
+    const O = m(() => JSON.stringify(e.fields) !== JSON.stringify(I) && !!e.fields.key_id && !!e.fields.key_format && (e.fields.key_format === "jwk" && !!e.fields.jwk || e.fields.key_format === "pem" && !!e.fields.private_key && !!e.fields.public_key)), K = (o) => {
+      e.fields.key_id = o?.kid || "", e.fields.name = o?.name || "", e.fields.tags = o?.tags?.join(", ") || "", e.fields.key_set = o?.set?.id || "", e.fields.key_format = o?.pem ? "pem" : "jwk", e.fields.jwk = o?.jwk || "", e.fields.private_key = o?.pem?.private_key || "", e.fields.public_key = o?.pem?.public_key || "", a.showx5t && (e.fields.x5t = o?.x5t || ""), Object.assign(I, e.fields);
+    }, u = () => {
+      d.push(a.config.cancelRoute);
+    }, k = m(() => {
+      let o = `${a.config.apiBaseUrl}${T.form[a.config.app][w.value][a.keySetId ? "forKeySet" : "all"]}`;
+      return a.config.app === "konnect" && (o = o.replace(/{controlPlaneId}/gi, a.config?.controlPlaneId || "")), o.replace(/\/{workspace}/gi, a.config?.workspace ? `/${a.config.workspace}` : "").replace(/{id}/gi, a.keyId ?? "").replace(/{keySetId}/gi, a.keySetId || "");
+    }), _ = m(() => ({
+      kid: e.fields.key_id,
+      ...a.showx5t ? { x5t: e.fields.x5t || null } : {},
+      name: e.fields.name || null,
+      tags: e.fields.tags?.split(",")?.map((o) => String(o || "").trim())?.filter((o) => o !== "") || [],
+      set: e.fields.key_set ? { id: e.fields.key_set } : null,
+      jwk: e.fields.key_format === "jwk" ? e.fields.jwk : null,
+      pem: e.fields.key_format === "pem" ? { private_key: e.fields.private_key, public_key: e.fields.public_key } : null
+    })), y = async () => {
+      try {
+        e.isReadonly = !0;
+        let o;
+        if (w.value === "create" ? o = await A.post(k.value, _.value) : w.value === "edit" && (o = a.config?.app === "konnect" ? await A.put(k.value, _.value) : await A.patch(k.value, _.value)), o) {
+          const { data: n } = o;
+          e.fields.key_id = n?.kid || "", e.fields.name = n?.name || "", e.fields.tags = n?.tags?.join(", ") || "", e.fields.key_set = n?.set?.id || "", e.fields.key_format = n?.pem ? "pem" : "jwk", e.fields.jwk = n?.jwk || "", e.fields.private_key = n?.pem?.private_key || "", e.fields.public_key = n?.pem?.public_key || "", a.showx5t && (e.fields.x5t = n?.x5t || ""), Object.assign(I, e.fields), v("update", o?.data);
+        }
+      } catch (o) {
+        e.errorMessage = S(o), v("error", o);
+      } finally {
+        e.isReadonly = !1;
+      }
+    }, {
+      debouncedQueryChange: ee,
+      loading: oe,
+      allRecords: N,
+      error: se,
+      validationError: ne,
+      loadItems: re,
+      results: de
+    } = ze(a.config, T.form[a.config.app].keySets, void 0, {
+      fetchedItemsKey: "data",
+      searchKeys: ["id", "name"]
+    }), ce = (o) => {
+      (!o || o !== e.fields.key_set && o !== I.key_set) && ee(o);
+    }, ye = m(() => se.value ? s("keys.errors.key_sets.fetch") : ""), te = m(() => ne.value ? s("keys.errors.key_sets.invalid") : ""), x = b(0), J = m(() => N.value === void 0), L = m(() => {
+      if (J.value)
+        return a.config.app === "konnect" ? s("keys.form.fields.key_set.footer") : void 0;
+    }), W = b(/* @__PURE__ */ new Set()), ae = m(() => Array.from(W.value).map((n) => ({
+      name: n.name || "",
+      // can't use name for label or it tries to search => 404
+      label: "",
+      // leave it blank so no flicker when used with selected-item-template
+      value: n.id,
+      selected: e.fields.key_set === n.id
+    }))), fe = (o) => {
+      W.value.clear();
+      let n;
+      for (n of o)
+        W.value.add(n);
+    };
+    return Z(de, (o) => {
+      fe(o);
+    }, { immediate: !0, deep: !0 }), Z(ae, () => {
+      x.value++;
+    }, { immediate: !0, deep: !0 }), $e(async () => {
+      await re();
+    }), (o, n) => {
+      const H = j("KInput"), Q = j("KSelect"), P = j("KTextArea");
+      return g(), q("div", nt, [
+        c(t(Xe), {
+          "can-submit": O.value,
+          config: i.config,
+          "edit-id": i.keyId,
+          "entity-type": t(Ee).Key,
+          "error-message": e.errorMessage || ye.value,
+          "fetch-url": G.value,
+          "form-fields": _.value,
+          "is-readonly": e.isReadonly,
+          onCancel: u,
+          "onFetch:error": n[9] || (n[9] = (l) => o.$emit("error", l)),
+          "onFetch:success": K,
+          onLoading: n[10] || (n[10] = (l) => o.$emit("loading", l)),
+          onSubmit: y
+        }, {
+          default: r(() => [
+            c(t(Ke), {
+              description: t(s)("keys.form.sections.general.description"),
+              title: t(s)("keys.form.sections.general.title")
+            }, {
+              default: r(() => [
+                c(H, {
+                  modelValue: e.fields.key_id,
+                  "onUpdate:modelValue": n[0] || (n[0] = (l) => e.fields.key_id = l),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-id",
+                  help: t(s)("keys.form.fields.id.help"),
+                  label: t(s)("keys.form.fields.id.label"),
+                  "label-attributes": {
+                    info: t(s)("keys.form.fields.id.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: t(s)("keys.form.fields.id.placeholder"),
+                  readonly: e.isReadonly,
+                  required: "",
+                  type: "text"
+                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"]),
+                i.showx5t ? (g(), C(H, {
+                  key: 0,
+                  modelValue: e.fields.x5t,
+                  "onUpdate:modelValue": n[1] || (n[1] = (l) => e.fields.x5t = l),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-x5t",
+                  help: t(s)("keys.form.fields.x5t.help"),
+                  label: t(s)("keys.form.fields.x5t.label"),
+                  "label-attributes": {
+                    info: t(s)("keys.form.fields.x5t.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: t(s)("keys.form.fields.x5t.placeholder"),
+                  readonly: e.isReadonly,
+                  type: "text"
+                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"])) : U("", !0),
+                c(H, {
+                  modelValue: e.fields.name,
+                  "onUpdate:modelValue": n[2] || (n[2] = (l) => e.fields.name = l),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-name",
+                  label: t(s)("keys.form.fields.name.label"),
+                  placeholder: t(s)("keys.form.fields.name.placeholder"),
+                  readonly: e.isReadonly,
+                  type: "text"
+                }, null, 8, ["modelValue", "label", "placeholder", "readonly"]),
+                c(Q, {
+                  modelValue: e.fields.key_set,
+                  "onUpdate:modelValue": n[3] || (n[3] = (l) => e.fields.key_set = l),
+                  clearable: z.value,
+                  "data-testid": "key-form-key-set",
+                  "dropdown-footer-text": L.value,
+                  "enable-filtering": "",
+                  "filter-function": () => !0,
+                  items: ae.value,
+                  label: t(s)("keys.form.fields.key_set.label"),
+                  loading: t(oe),
+                  placeholder: t(s)("keys.form.fields.key_set.placeholder"),
+                  readonly: V.value,
+                  width: "100%",
+                  onQueryChange: ce
+                }, {
+                  loading: r(() => [
+                    $("div", null, h(t(s)("keys.actions.loading")), 1)
+                  ]),
+                  empty: r(() => [
+                    $("div", rt, h(t(s)("keys.search.no_results")), 1)
+                  ]),
+                  "selected-item-template": r(({ item: l }) => [
+                    $("div", null, h(l.name), 1)
+                  ]),
+                  "item-template": r(({ item: l }) => [
+                    $("div", dt, [
+                      $("div", ct, h(l.name), 1),
+                      $("div", yt, h(l.value), 1)
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "clearable", "dropdown-footer-text", "items", "label", "loading", "placeholder", "readonly"]),
+                te.value ? (g(), q("p", ft, h(te.value), 1)) : U("", !0),
+                c(H, {
+                  modelValue: e.fields.tags,
+                  "onUpdate:modelValue": n[4] || (n[4] = (l) => e.fields.tags = l),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-tags",
+                  help: t(s)("keys.form.fields.tags.help"),
+                  label: t(s)("keys.form.fields.tags.label"),
+                  "label-attributes": {
+                    info: t(s)("keys.form.fields.tags.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: t(s)("keys.form.fields.tags.placeholder"),
+                  readonly: e.isReadonly,
+                  type: "text"
+                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"])
+              ]),
+              _: 1
+            }, 8, ["description", "title"]),
+            c(t(Ke), {
+              description: t(s)("keys.form.sections.keys.description"),
+              "has-divider": "",
+              title: t(s)("keys.form.sections.keys.title")
+            }, {
+              default: r(() => [
+                $("div", ut, [
+                  c(Q, {
+                    modelValue: e.fields.key_format,
+                    "onUpdate:modelValue": n[5] || (n[5] = (l) => e.fields.key_format = l),
+                    "data-testid": "key-form-key-format",
+                    items: E,
+                    label: t(s)("keys.form.fields.key_format.label"),
+                    readonly: e.isReadonly,
+                    required: "",
+                    width: "100%"
+                  }, null, 8, ["modelValue", "label", "readonly"])
+                ]),
+                e.fields.key_format === "jwk" ? (g(), C(P, {
+                  key: 0,
+                  modelValue: e.fields.jwk,
+                  "onUpdate:modelValue": n[6] || (n[6] = (l) => e.fields.jwk = l),
+                  modelModifiers: { trim: !0 },
+                  "character-limit": !1,
+                  class: "key-form-textarea",
+                  "data-testid": "key-form-jwk",
+                  label: t(s)("keys.form.fields.jwk.label"),
+                  "label-attributes": {
+                    info: t(s)("keys.form.fields.jwk.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: t(s)("keys.form.fields.jwk.placeholder"),
+                  readonly: e.isReadonly,
+                  required: ""
+                }, null, 8, ["modelValue", "label", "label-attributes", "placeholder", "readonly"])) : U("", !0),
+                e.fields.key_format === "pem" ? (g(), C(P, {
+                  key: 1,
+                  modelValue: e.fields.private_key,
+                  "onUpdate:modelValue": n[7] || (n[7] = (l) => e.fields.private_key = l),
+                  modelModifiers: { trim: !0 },
+                  "character-limit": !1,
+                  class: "key-form-textarea",
+                  "data-testid": "key-form-private-key",
+                  label: t(s)("keys.form.fields.private_key.label"),
+                  placeholder: t(s)("keys.form.fields.private_key.placeholder"),
+                  readonly: e.isReadonly,
+                  required: ""
+                }, null, 8, ["modelValue", "label", "placeholder", "readonly"])) : U("", !0),
+                e.fields.key_format === "pem" ? (g(), C(P, {
+                  key: 2,
+                  modelValue: e.fields.public_key,
+                  "onUpdate:modelValue": n[8] || (n[8] = (l) => e.fields.public_key = l),
+                  modelModifiers: { trim: !0 },
+                  "character-limit": !1,
+                  class: "key-form-textarea",
+                  "data-testid": "key-form-public-key",
+                  label: t(s)("keys.form.fields.public_key.label"),
+                  placeholder: t(s)("keys.form.fields.public_key.placeholder"),
+                  readonly: e.isReadonly,
+                  required: ""
+                }, null, 8, ["modelValue", "label", "placeholder", "readonly"])) : U("", !0)
+              ]),
+              _: 1
+            }, 8, ["description", "title"])
+          ]),
+          _: 1
+        }, 8, ["can-submit", "config", "edit-id", "entity-type", "error-message", "fetch-url", "form-fields", "is-readonly"])
+      ]);
+    };
+  }
+}), wt = /* @__PURE__ */ Ve(kt, [["__scopeId", "data-v-e35f7792"]]), pt = { class: "kong-ui-entities-keys-entity-config-card" }, mt = { key: 2 }, It = /* @__PURE__ */ me({
+  __name: "KeyConfigCard",
+  props: {
+    /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+    config: {
+      type: Object,
+      required: !0,
+      validator: (i) => !(!i || !["konnect", "kongManager"].includes(i?.app) || i.app === "konnect" && !i.controlPlaneId || i.app === "kongManager" && typeof i.workspace != "string" || !i.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
+    },
+    /**
+     * Keyset id for scoped key entity
+     */
+    keySetId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["loading", "fetch:error", "fetch:success", "navigation-click"],
+  setup(i, { emit: B }) {
+    const v = B, a = i, { axiosInstance: d } = ge(a.config?.axiosRequestConfig), { convertKeyToTitle: s } = Ye(), { i18n: { t: S } } = ve.useI18n(), A = m(() => a.keySetId ? `${T.form[a.config.app].edit.forKeySet}`.replace(/{keySetId}/gi, a.keySetId) : T.form[a.config.app].edit.all), G = m(() => T.form[a.config.app]?.getKeySet), w = b(), e = b({}), I = b(a.keySetId || ""), E = b(""), V = b(!1), z = async (u) => {
+      w.value = u, I.value = u?.set?.id, v("fetch:success", u), O(u);
+    };
+    Z(I, async () => {
+      if (!I.value)
+        return;
+      let u = `${a.config.apiBaseUrl}${G.value}`;
+      a.config.app === "konnect" && (u = u.replace(/{controlPlaneId}/gi, a.config?.controlPlaneId || "")), u = u.replace(/\/{workspace}/gi, a.config?.workspace ? `/${a.config.workspace}` : "").replace(/{keySetId}/gi, I.value || "");
+      try {
+        V.value = !0;
+        const { data: k } = await d.get(u, {
+          validateStatus: (_) => _ === 404 || _ >= 200 && _ < 300
+          // in case KeySet is deleted
+        });
+        E.value = k?.name || k?.id;
+      } catch (k) {
+        v("fetch:error", k);
+      } finally {
+        V.value = !1;
+      }
+    }, { immediate: !0 });
+    const O = (u) => {
+      try {
+        if (u.jwk) {
+          const k = JSON.parse(u.jwk);
+          Object.keys(k).forEach((_) => {
+            e.value = {
+              ...e.value,
+              [`jwk.${_}`]: k[_]
+            };
+          });
+        } else
+          e.value = {
+            "pem.public_key": u?.pem?.public_key,
+            "pem.private_key": u?.pem?.private_key
+          };
+      } catch (k) {
+        v("fetch:error", k);
+      }
+      return e;
+    }, K = b({
+      id: {},
+      name: {
+        tooltip: S("keys.form.fields.name.tooltip")
+      },
+      last_updated: {},
+      created: {},
+      set: {
+        label: S("keys.form.fields.set.label"),
+        section: ke.Basic,
+        tooltip: S("keys.form.fields.set.tooltip"),
+        order: 5
+      },
+      kid: {
+        label: S("keys.form.fields.kid.label"),
+        section: ke.Basic,
+        tooltip: S("keys.form.fields.kid.tooltip")
+      },
+      tags: {
+        tooltip: S("keys.form.fields.tags.tooltip")
+      },
+      // advanced fields
+      jwk: {
+        label: S("keys.form.fields.jwk.label"),
+        type: ue.Json
+      },
+      pem: {
+        section: ke.Advanced,
+        label: S("keys.form.fields.key_format.options.pem"),
+        type: ue.Json
+      }
+    });
+    return (u, k) => {
+      const _ = j("KSkeleton");
+      return g(), q("div", pt, [
+        c(t(Ze), {
+          config: i.config,
+          "config-card-doc": i.configCardDoc,
+          "config-schema": K.value,
+          "entity-type": t(Ee).Key,
+          "fetch-url": A.value,
+          "hide-title": i.hideTitle,
+          "onFetch:error": k[0] || (k[0] = (y) => u.$emit("fetch:error", y)),
+          "onFetch:success": z,
+          onLoading: k[1] || (k[1] = (y) => u.$emit("loading", y))
+        }, pe({
+          set: r(({ row: y }) => [
+            V.value ? (g(), C(_, {
+              key: 0,
+              "data-testid": "key-set-name-loader",
+              type: "spinner"
+            })) : y.value && y.value.id === I.value && E.value ? (g(), C(t(et), {
+              key: 1,
+              item: {
+                key: y.value.id,
+                value: E.value,
+                type: t(ue).LinkInternal
+              },
+              onClick: (ee) => u.$emit("navigation-click", y.value.id, "key-sets")
+            }, null, 8, ["item", "onClick"])) : (g(), q("div", mt, h("–")))
+          ]),
+          _: 2
+        }, [
+          w.value?.jwk ? {
+            name: "jwk",
+            fn: r(() => [
+              (g(!0), q(Se, null, we(Object.keys(e.value), (y) => (g(), C(t(xe), {
+                key: y,
+                "data-testid": `${y}`,
+                item: {
+                  key: y,
+                  label: t(s)(y),
+                  value: e.value[y]
+                }
+              }, null, 8, ["data-testid", "item"]))), 128))
+            ]),
+            key: "0"
+          } : void 0,
+          w.value?.pem ? {
+            name: "pem",
+            fn: r(() => [
+              (g(!0), q(Se, null, we(Object.keys(e.value), (y) => (g(), C(t(xe), {
+                key: y,
+                "data-testid": `${y}`,
+                item: {
+                  key: y,
+                  label: t(s)(y),
+                  value: e.value[y]
+                }
+              }, null, 8, ["data-testid", "item"]))), 128))
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["config", "config-card-doc", "config-schema", "entity-type", "fetch-url", "hide-title"])
+      ]);
+    };
+  }
+});
+export {
+  It as KeyConfigCard,
+  wt as KeyForm,
+  St as KeyList
+};