@kong-ui-public/entities-keys 3.8.27-pr.2132.c7fba69a4.0 → 3.8.27

package/dist/entities-keys.es.js

@@ -0,0 +1,1104 @@
+import { defineComponent as ge, computed as m, ref as I, watch as te, onBeforeMount as $e, resolveComponent as O, openBlock as b, createElementBlock as J, createVNode as f, unref as l, createSlots as me, withCtx as u, createBlock as V, Teleport as Se, createElementVNode as R, createCommentVNode as G, createTextVNode as ee, toDisplayString as K, reactive as _e, Fragment as Ie, renderList as we } from "vue";
+import { useRouter as Ee } from "vue-router";
+import { BookIcon as Ce, AddIcon as Re, KeyIcon as De } from "@kong/icons";
+import { createI18n as Te, i18nTComponent as Fe } from "@kong-ui-public/i18n";
+import { useAxios as ve, useTableState as Ae, useFetcher as Be, useDeleteUrlBuilder as Ue, FetcherStatus as Oe, EntityBaseTable as Pe, EntityFilter as qe, PermissionsWrapper as se, TableTags as Ne, EntityEmptyState as Je, EntityDeleteModal as Le, EntityTypes as We, useErrors as He, EntityBaseFormType as ne, useDebouncedFilter as Qe, EntityBaseForm as ze, SupportedEntityType as je, EntityFormSection as xe, useStringHelpers as Ge, ConfigurationSchemaSection as ke, ConfigurationSchemaType as pe, EntityBaseConfigCard as Xe, InternalLinkItem as Ze, ConfigCardItem as Ke } from "@kong-ui-public/entities-shared";
+const Ye = {
+  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"
+    }
+  },
+  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"
+      }
+    }
+  }
+}, et = {
+  keys: Ye
+};
+function tt() {
+  const a = Te("en-us", et);
+  return {
+    i18n: a,
+    i18nT: Fe(a)
+    // Translation component <i18n-t>
+  };
+}
+const he = {
+  useI18n: tt
+}, B = "/v2/control-planes/{controlPlaneId}/core-entities", U = "/{workspace}", P = {
+  list: {
+    konnect: {
+      all: `${B}/keys`,
+      forKeySet: `${B}/key-sets/{keySetId}/keys`
+    },
+    kongManager: {
+      all: `${U}/keys`,
+      forKeySet: `${U}/key-sets/{keySetId}/keys`
+    }
+  },
+  form: {
+    konnect: {
+      create: {
+        all: `${B}/keys`,
+        forKeySet: `${B}/key-sets/{keySetId}/keys`
+      },
+      edit: {
+        all: `${B}/keys/{id}`,
+        forKeySet: `${B}/key-sets/{keySetId}/keys/{id}`
+      },
+      keySets: `${B}/key-sets`,
+      getKeySet: `${B}/key-sets/{keySetId}`
+    },
+    kongManager: {
+      create: {
+        all: `${U}/keys`,
+        forKeySet: `${U}/key-sets/{keySetId}/keys`
+      },
+      edit: {
+        all: `${U}/keys/{id}`,
+        forKeySet: `${U}/key-sets/{keySetId}/keys/{id}`
+      },
+      keySets: `${U}/key-sets`,
+      getKeySet: `${U}/key-sets/{keySetId}`
+    }
+  }
+}, lt = "#00abd2", it = "24px", at = { class: "kong-ui-entities-keys-list" }, ot = { class: "button-row" }, st = { class: "empty-state-icon-gateway" }, nt = /* @__PURE__ */ ge({
+  __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: (a) => !(!a || !["konnect", "kongManager"].includes(a == null ? void 0 : a.app) || !a.createRoute || !a.getViewRoute || !a.getEditRoute || a.app === "kongManager" && !a.isExactMatch && !a.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
+    },
+    /**
+     * Enables the new empty state design, this prop can be removed when
+     * the khcp-14756-empty-states-m2 FF is removed.
+     */
+    enableV2EmptyStates: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["error", "click:learn-more", "copy:success", "copy:error", "delete:success"],
+  setup(a, { emit: q }) {
+    var _;
+    const S = q, t = a, { i18n: { t: y } } = he.useI18n(), d = Ee(), { axiosInstance: $ } = ve((_ = t.config) == null ? void 0 : _.axiosRequestConfig), { hasRecords: F, handleStateChange: X } = Ae(() => M.value), j = m(() => F.value && t.config.app === "konnect"), e = m(() => !t.enableV2EmptyStates && t.config.app === "konnect"), w = m(() => !!t.config.keySetId), N = m(() => t.config.app !== "kongManager" || !!t.config.disableSorting), D = {
+      // the Name column is non-hidable
+      name: { label: y("keys.list.table_headers.name"), searchable: !0, sortable: !0, hidable: !1 },
+      kid: { label: y("keys.list.table_headers.key_id"), sortable: !0 },
+      tags: { label: y("keys.list.table_headers.tags") },
+      id: { label: y("keys.list.table_headers.id"), sortable: !0 }
+    }, Z = D, L = m(() => {
+      var i, n, E, A;
+      let s = `${t.config.apiBaseUrl}${P.list[t.config.app][t.config.keySetId ? "forKeySet" : "all"]}`;
+      return t.config.app === "konnect" ? s = s.replace(/{controlPlaneId}/gi, ((i = t.config) == null ? void 0 : i.controlPlaneId) || "").replace(/{keySetId}/gi, ((n = t.config) == null ? void 0 : n.keySetId) || "") : t.config.app === "kongManager" && (s = s.replace(/\/{workspace}/gi, (E = t.config) != null && E.workspace ? `/${t.config.workspace}` : "").replace(/{keySetId}/gi, ((A = t.config) == null ? void 0 : A.keySetId) || "")), s;
+    }), M = I(""), W = m(() => {
+      const s = t.config.app === "konnect" || t.config.isExactMatch;
+      if (s)
+        return {
+          isExactMatch: s,
+          placeholder: y("keys.search.placeholder")
+        };
+      const i = { name: D.name };
+      return {
+        isExactMatch: s,
+        fields: i,
+        schema: t.config.filterSchema
+      };
+    }), {
+      fetcher: c,
+      fetcherState: g,
+      fetcherCacheKey: C
+    } = Be(m(() => ({ ...t.config, cacheIdentifier: t.cacheIdentifier })), L), v = () => {
+      M.value = "";
+    }, x = () => {
+      C.value++;
+    }, k = I(null), le = async (s, i) => {
+      const n = s.id;
+      if (!await i(n)) {
+        ce(s, "id");
+        return;
+      }
+      de(s, "id");
+    }, re = async (s, i) => {
+      const n = JSON.stringify(s);
+      if (!await i(n)) {
+        S("copy:error", {
+          entity: s,
+          message: y("keys.errors.copy")
+        });
+        return;
+      }
+      S("copy:success", {
+        entity: s,
+        message: y("keys.copy.success_brief")
+      });
+    }, de = (s, i) => {
+      S("copy:success", {
+        entity: s,
+        field: i,
+        message: y("keys.copy.success", { val: s[i] })
+      });
+    }, ce = (s, i) => {
+      S("copy:error", {
+        entity: s,
+        field: i,
+        message: y("keys.errors.copy")
+      });
+    }, ye = async (s) => {
+      var n;
+      await ((n = t.canRetrieve) == null ? void 0 : n.call(t, s)) && d.push(t.config.getViewRoute(s.id));
+    }, fe = (s) => ({
+      label: y("keys.actions.view"),
+      to: t.config.getViewRoute(s)
+    }), ie = (s) => ({
+      label: y("keys.actions.edit"),
+      to: t.config.getEditRoute(s)
+    }), T = I(void 0), H = I(!1), Q = I(!1), z = I(""), ae = Ue(t.config, L.value), ue = (s) => {
+      T.value = s, H.value = !0;
+    }, oe = () => {
+      H.value = !1;
+    }, o = async () => {
+      var s, i, n;
+      if ((s = T.value) != null && s.id) {
+        Q.value = !0;
+        try {
+          await $.delete(ae(T.value.id)), Q.value = !1, H.value = !1, C.value++, S("delete:success", T.value);
+        } catch (E) {
+          z.value = ((n = (i = E.response) == null ? void 0 : i.data) == null ? void 0 : n.message) || E.message || y("keys.errors.delete"), S("error", E);
+        } finally {
+          Q.value = !1;
+        }
+      }
+    }, r = () => {
+      d.push(t.config.createRoute);
+    };
+    te(g, (s) => {
+      var i, n, E;
+      if (s.status === Oe.Error) {
+        k.value = {
+          title: y("keys.errors.general")
+        }, (E = (n = (i = s.error) == null ? void 0 : i.response) == null ? void 0 : n.data) != null && E.message && (k.value.message = s.error.response.data.message), S("error", s.error);
+        return;
+      }
+      k.value = null;
+    });
+    const h = I({
+      ctaPath: t.config.createRoute,
+      ctaText: void 0,
+      message: `${y("keys.list.empty_state.description")}${t.config.additionMessageForEmptyState ? ` ${t.config.additionMessageForEmptyState}` : ""}`,
+      title: y("keys.title")
+    });
+    return $e(async () => {
+      await t.canCreate() && (h.value.title = y("keys.list.empty_state.title"), h.value.ctaText = y("keys.actions.create"));
+    }), (s, i) => {
+      const n = O("KButton"), E = O("KCopy"), A = O("KDropdownItem"), be = O("KClipboardProvider");
+      return b(), J("div", at, [
+        f(l(Pe), {
+          "cache-identifier": a.cacheIdentifier,
+          "disable-sorting": N.value,
+          "empty-state-options": h.value,
+          "enable-entity-actions": "",
+          "error-message": k.value,
+          fetcher: l(c),
+          "fetcher-cache-key": l(C),
+          "pagination-type": "offset",
+          "preferences-storage-key": "kong-ui-entities-keys-list",
+          query: M.value,
+          "table-headers": l(Z),
+          onClearSearchInput: v,
+          "onClick:row": i[4] || (i[4] = (p) => ye(p)),
+          onSort: x,
+          onState: l(X)
+        }, me({
+          "toolbar-filter": u(() => [
+            f(l(qe), {
+              modelValue: M.value,
+              "onUpdate:modelValue": i[0] || (i[0] = (p) => M.value = p),
+              config: W.value
+            }, null, 8, ["modelValue", "config"])
+          ]),
+          "toolbar-button": u(() => [
+            (b(), V(Se, {
+              disabled: !a.useActionOutside,
+              to: "#kong-ui-app-page-header-action-button"
+            }, [
+              R("div", ot, [
+                !w.value && j.value ? (b(), V(n, {
+                  key: 0,
+                  appearance: "secondary",
+                  class: "open-learning-hub",
+                  "data-testid": "keys-learn-more-button",
+                  icon: "",
+                  onClick: i[1] || (i[1] = (p) => s.$emit("click:learn-more"))
+                }, {
+                  default: u(() => [
+                    f(l(Ce), { decorative: "" })
+                  ]),
+                  _: 1
+                })) : G("", !0),
+                f(l(se), {
+                  "auth-function": () => a.canCreate()
+                }, {
+                  default: u(() => [
+                    f(n, {
+                      appearance: "primary",
+                      "data-testid": "toolbar-add-key",
+                      size: a.useActionOutside ? "medium" : "large",
+                      to: a.config.createRoute
+                    }, {
+                      default: u(() => [
+                        f(l(Re)),
+                        ee(" " + K(l(y)("keys.list.toolbar_actions.new_key")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["size", "to"])
+                  ]),
+                  _: 1
+                }, 8, ["auth-function"])
+              ])
+            ], 8, ["disabled"]))
+          ]),
+          name: u(({ rowValue: p }) => [
+            R("b", null, K(p ?? "-"), 1)
+          ]),
+          kid: u(({ rowValue: p }) => [
+            f(E, { text: p }, null, 8, ["text"])
+          ]),
+          tags: u(({ rowValue: p }) => [
+            f(l(Ne), { tags: p }, null, 8, ["tags"])
+          ]),
+          id: u(({ rowValue: p }) => [
+            f(E, {
+              text: p,
+              truncate: ""
+            }, null, 8, ["text"])
+          ]),
+          actions: u(({ row: p }) => [
+            f(be, null, {
+              default: u(({ copyToClipboard: Y }) => [
+                f(A, {
+                  "data-testid": "action-entity-copy-id",
+                  onClick: (Me) => le(p, Y)
+                }, {
+                  default: u(() => [
+                    ee(K(l(y)("keys.actions.copy_id")), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            f(be, null, {
+              default: u(({ copyToClipboard: Y }) => [
+                f(A, {
+                  "data-testid": "action-entity-copy-json",
+                  onClick: (Me) => re(p, Y)
+                }, {
+                  default: u(() => [
+                    ee(K(l(y)("keys.actions.copy_json")), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 2
+            }, 1024),
+            f(l(se), {
+              "auth-function": () => a.canRetrieve(p)
+            }, {
+              default: u(() => [
+                f(A, {
+                  "data-testid": "action-entity-view",
+                  "has-divider": "",
+                  item: fe(p.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            f(l(se), {
+              "auth-function": () => a.canEdit(p)
+            }, {
+              default: u(() => [
+                f(A, {
+                  "data-testid": "action-entity-edit",
+                  item: ie(p.id)
+                }, null, 8, ["item"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"]),
+            f(l(se), {
+              "auth-function": () => a.canDelete(p)
+            }, {
+              default: u(() => [
+                f(A, {
+                  danger: "",
+                  "data-testid": "action-entity-delete",
+                  "has-divider": "",
+                  onClick: (Y) => ue(p)
+                }, {
+                  default: u(() => [
+                    ee(K(l(y)("keys.actions.delete")), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 2
+            }, 1032, ["auth-function"])
+          ]),
+          _: 2
+        }, [
+          !l(F) && e.value ? {
+            name: "outside-actions",
+            fn: u(() => [
+              (b(), V(Se, {
+                disabled: !a.useActionOutside,
+                to: "#kong-ui-app-page-header-action-button"
+              }, [
+                f(n, {
+                  appearance: "secondary",
+                  class: "open-learning-hub",
+                  "data-testid": "keys-learn-more-button",
+                  icon: "",
+                  onClick: i[2] || (i[2] = (p) => s.$emit("click:learn-more"))
+                }, {
+                  default: u(() => [
+                    f(l(Ce), { decorative: "" })
+                  ]),
+                  _: 1
+                })
+              ], 8, ["disabled"]))
+            ]),
+            key: "0"
+          } : void 0,
+          !M.value && a.enableV2EmptyStates && a.config.app === "konnect" ? {
+            name: "empty-state",
+            fn: u(() => {
+              var p;
+              return [
+                f(l(Je), {
+                  "action-button-text": l(y)("keys.list.empty_state_v2.create_cta"),
+                  appearance: "secondary",
+                  "can-create": () => a.canCreate(),
+                  "data-testid": a.config.keySetId ? "nested-keys-entity-empty-state" : "keys-entity-empty-state",
+                  description: l(y)("keys.list.empty_state_v2.description"),
+                  "learn-more": a.config.app === "konnect",
+                  title: l(y)("keys.list.empty_state_v2.title"),
+                  "onClick:create": r,
+                  "onClick:learnMore": i[3] || (i[3] = (Y) => s.$emit("click:learn-more"))
+                }, me({
+                  image: u(() => [
+                    R("div", st, [
+                      f(l(De), {
+                        color: l(lt),
+                        size: l(it)
+                      }, null, 8, ["color", "size"])
+                    ])
+                  ]),
+                  _: 2
+                }, [
+                  (p = a.config) != null && p.isControlPlaneGroup ? {
+                    name: "message",
+                    fn: u(() => [
+                      ee(K(l(y)("keys.list.empty_state_v2.group")), 1)
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["action-button-text", "can-create", "data-testid", "description", "learn-more", "title"])
+              ];
+            }),
+            key: "1"
+          } : void 0
+        ]), 1032, ["cache-identifier", "disable-sorting", "empty-state-options", "error-message", "fetcher", "fetcher-cache-key", "query", "table-headers", "onState"]),
+        f(l(Le), {
+          "action-pending": Q.value,
+          description: l(y)("keys.delete.description"),
+          "entity-name": T.value && (T.value.name || T.value.id),
+          "entity-type": l(We).Key,
+          error: z.value,
+          "need-confirm": !1,
+          title: l(y)("keys.delete.title"),
+          visible: H.value,
+          onCancel: oe,
+          onProceed: o
+        }, null, 8, ["action-pending", "description", "entity-name", "entity-type", "error", "title", "visible"])
+      ]);
+    };
+  }
+}), Ve = (a, q) => {
+  const S = a.__vccOpts || a;
+  for (const [t, y] of q)
+    S[t] = y;
+  return S;
+}, It = /* @__PURE__ */ Ve(nt, [["__scopeId", "data-v-715f40fe"]]), rt = { class: "kong-ui-entities-keys-form" }, dt = { "data-testid": "no-search-results" }, ct = { class: "select-item-container" }, yt = { class: "select-item-label" }, ft = { class: "select-item-description" }, ut = {
+  key: 1,
+  class: "invalid-key-set-message",
+  "data-testid": "invalid-key-set-message"
+}, kt = { "data-testid": "key-format-container" }, pt = /* @__PURE__ */ ge({
+  __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: (a) => !(!a || !["konnect", "kongManager"].includes(a == null ? void 0 : a.app) || a.app === "konnect" && !a.controlPlaneId || a.app === "kongManager" && typeof a.workspace != "string" || !a.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: ""
+    },
+    /** 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: ""
+    },
+    /** Whether to provide x5t field in key form */
+    showx5t: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    }
+  },
+  emits: ["update", "error", "loading"],
+  setup(a, { emit: q }) {
+    var oe;
+    const S = q, t = a, y = Ee(), { i18n: { t: d } } = he.useI18n(), { getMessageFromError: $ } = He(), { axiosInstance: F } = ve((oe = t.config) == null ? void 0 : oe.axiosRequestConfig), X = m(() => t.keySetId ? P.form[t.config.app].edit.forKeySet.replace(/{keySetId}/gi, t.keySetId) : P.form[t.config.app].edit.all), j = m(() => t.keyId ? ne.Edit : ne.Create), e = _e({
+      fields: {
+        name: "",
+        tags: "",
+        key_id: "",
+        key_format: "jwk",
+        key_set: "",
+        jwk: "",
+        private_key: "",
+        public_key: "",
+        ...t.showx5t ? { x5t: "" } : {}
+      },
+      isReadonly: !1,
+      errorMessage: ""
+    }), w = _e({
+      name: "",
+      tags: "",
+      key_id: "",
+      key_format: "jwk",
+      key_set: "",
+      jwk: "",
+      private_key: "",
+      public_key: ""
+    }), N = [
+      {
+        label: d("keys.form.fields.key_format.options.jwk"),
+        value: "jwk"
+      },
+      {
+        label: d("keys.form.fields.key_format.options.pem"),
+        value: "pem"
+      }
+    ], D = m(() => e.isReadonly || j.value === ne.Create && !!t.fixedKeySetId), Z = m(() => !D.value);
+    te(() => t.fixedKeySetId, (o) => {
+      j.value === ne.Create && (e.fields.key_set = o);
+    }, { immediate: !0 });
+    const L = m(() => JSON.stringify(e.fields) !== JSON.stringify(w) && !!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)), M = (o) => {
+      var r, h, _, s;
+      e.fields.key_id = (o == null ? void 0 : o.kid) || "", e.fields.name = (o == null ? void 0 : o.name) || "", e.fields.tags = ((r = o == null ? void 0 : o.tags) == null ? void 0 : r.join(", ")) || "", e.fields.key_set = ((h = o == null ? void 0 : o.set) == null ? void 0 : h.id) || "", e.fields.key_format = o != null && o.pem ? "pem" : "jwk", e.fields.jwk = (o == null ? void 0 : o.jwk) || "", e.fields.private_key = ((_ = o == null ? void 0 : o.pem) == null ? void 0 : _.private_key) || "", e.fields.public_key = ((s = o == null ? void 0 : o.pem) == null ? void 0 : s.public_key) || "", t.showx5t && (e.fields.x5t = (o == null ? void 0 : o.x5t) || ""), Object.assign(w, e.fields);
+    }, W = () => {
+      y.push(t.config.cancelRoute);
+    }, c = m(() => {
+      var r, h;
+      let o = `${t.config.apiBaseUrl}${P.form[t.config.app][j.value][t.keySetId ? "forKeySet" : "all"]}`;
+      return t.config.app === "konnect" ? o = o.replace(/{controlPlaneId}/gi, ((r = t.config) == null ? void 0 : r.controlPlaneId) || "") : t.config.app === "kongManager" && (o = o.replace(/\/{workspace}/gi, (h = t.config) != null && h.workspace ? `/${t.config.workspace}` : "")), o = o.replace(/{id}/gi, t.keyId).replace(/{keySetId}/gi, t.keySetId || ""), o;
+    }), g = m(() => {
+      var o, r, h;
+      return {
+        kid: e.fields.key_id,
+        ...t.showx5t ? { x5t: e.fields.x5t || null } : {},
+        name: e.fields.name || null,
+        tags: ((h = (r = (o = e.fields.tags) == null ? void 0 : o.split(",")) == null ? void 0 : r.map((_) => String(_ || "").trim())) == null ? void 0 : h.filter((_) => _ !== "")) || [],
+        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
+      };
+    }), C = async () => {
+      var o, r, h, _, s;
+      try {
+        e.isReadonly = !0;
+        let i;
+        if (j.value === "create" ? i = await F.post(c.value, g.value) : j.value === "edit" && (i = ((o = t.config) == null ? void 0 : o.app) === "konnect" ? await F.put(c.value, g.value) : await F.patch(c.value, g.value)), i) {
+          const { data: n } = i;
+          e.fields.key_id = (n == null ? void 0 : n.kid) || "", e.fields.name = (n == null ? void 0 : n.name) || "", e.fields.tags = ((r = n == null ? void 0 : n.tags) == null ? void 0 : r.join(", ")) || "", e.fields.key_set = ((h = n == null ? void 0 : n.set) == null ? void 0 : h.id) || "", e.fields.key_format = n != null && n.pem ? "pem" : "jwk", e.fields.jwk = (n == null ? void 0 : n.jwk) || "", e.fields.private_key = ((_ = n == null ? void 0 : n.pem) == null ? void 0 : _.private_key) || "", e.fields.public_key = ((s = n == null ? void 0 : n.pem) == null ? void 0 : s.public_key) || "", t.showx5t && (e.fields.x5t = (n == null ? void 0 : n.x5t) || ""), Object.assign(w, e.fields), S("update", i == null ? void 0 : i.data);
+        }
+      } catch (i) {
+        e.errorMessage = $(i), S("error", i);
+      } finally {
+        e.isReadonly = !1;
+      }
+    }, {
+      debouncedQueryChange: v,
+      loading: x,
+      allRecords: k,
+      error: le,
+      validationError: re,
+      loadItems: de,
+      results: ce
+    } = Qe(t.config, P.form[t.config.app].keySets, void 0, {
+      fetchedItemsKey: "data",
+      searchKeys: ["id", "name"]
+    }), ye = (o) => {
+      (!o || o !== e.fields.key_set && o !== w.key_set) && v(o);
+    }, fe = m(() => le.value ? d("keys.errors.key_sets.fetch") : ""), ie = m(() => re.value ? d("keys.errors.key_sets.invalid") : ""), T = I(0), H = m(() => k.value === void 0), Q = m(() => {
+      if (H.value)
+        return t.config.app === "konnect" ? d("keys.form.fields.key_set.footer") : void 0;
+    }), z = I(/* @__PURE__ */ new Set()), ae = m(() => Array.from(z.value).map((r) => ({
+      name: r.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: r.id,
+      selected: e.fields.key_set === r.id
+    }))), ue = (o) => {
+      z.value.clear();
+      let r;
+      for (r of o)
+        z.value.add(r);
+    };
+    return te(ce, (o) => {
+      ue(o);
+    }, { immediate: !0, deep: !0 }), te(ae, () => {
+      T.value++;
+    }, { immediate: !0, deep: !0 }), $e(async () => {
+      await de();
+    }), (o, r) => {
+      const h = O("KInput"), _ = O("KSelect"), s = O("KTextArea");
+      return b(), J("div", rt, [
+        f(l(ze), {
+          "can-submit": L.value,
+          config: a.config,
+          "edit-id": a.keyId,
+          "entity-type": l(je).Key,
+          "error-message": e.errorMessage || fe.value,
+          "fetch-url": X.value,
+          "form-fields": g.value,
+          "is-readonly": e.isReadonly,
+          onCancel: W,
+          "onFetch:error": r[9] || (r[9] = (i) => o.$emit("error", i)),
+          "onFetch:success": M,
+          onLoading: r[10] || (r[10] = (i) => o.$emit("loading", i)),
+          onSubmit: C
+        }, {
+          default: u(() => [
+            f(l(xe), {
+              description: l(d)("keys.form.sections.general.description"),
+              title: l(d)("keys.form.sections.general.title")
+            }, {
+              default: u(() => [
+                f(h, {
+                  modelValue: e.fields.key_id,
+                  "onUpdate:modelValue": r[0] || (r[0] = (i) => e.fields.key_id = i),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-id",
+                  help: l(d)("keys.form.fields.id.help"),
+                  label: l(d)("keys.form.fields.id.label"),
+                  "label-attributes": {
+                    info: l(d)("keys.form.fields.id.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: l(d)("keys.form.fields.id.placeholder"),
+                  readonly: e.isReadonly,
+                  required: "",
+                  type: "text"
+                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"]),
+                a.showx5t ? (b(), V(h, {
+                  key: 0,
+                  modelValue: e.fields.x5t,
+                  "onUpdate:modelValue": r[1] || (r[1] = (i) => e.fields.x5t = i),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-x5t",
+                  help: l(d)("keys.form.fields.x5t.help"),
+                  label: l(d)("keys.form.fields.x5t.label"),
+                  "label-attributes": {
+                    info: l(d)("keys.form.fields.x5t.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: l(d)("keys.form.fields.x5t.placeholder"),
+                  readonly: e.isReadonly,
+                  type: "text"
+                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"])) : G("", !0),
+                f(h, {
+                  modelValue: e.fields.name,
+                  "onUpdate:modelValue": r[2] || (r[2] = (i) => e.fields.name = i),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-name",
+                  label: l(d)("keys.form.fields.name.label"),
+                  placeholder: l(d)("keys.form.fields.name.placeholder"),
+                  readonly: e.isReadonly,
+                  type: "text"
+                }, null, 8, ["modelValue", "label", "placeholder", "readonly"]),
+                f(_, {
+                  modelValue: e.fields.key_set,
+                  "onUpdate:modelValue": r[3] || (r[3] = (i) => e.fields.key_set = i),
+                  clearable: Z.value,
+                  "data-testid": "key-form-key-set",
+                  "dropdown-footer-text": Q.value,
+                  "enable-filtering": "",
+                  "filter-function": () => !0,
+                  items: ae.value,
+                  label: l(d)("keys.form.fields.key_set.label"),
+                  loading: l(x),
+                  placeholder: l(d)("keys.form.fields.key_set.placeholder"),
+                  readonly: D.value,
+                  width: "100%",
+                  onQueryChange: ye
+                }, {
+                  loading: u(() => [
+                    R("div", null, K(l(d)("keys.actions.loading")), 1)
+                  ]),
+                  empty: u(() => [
+                    R("div", dt, K(l(d)("keys.search.no_results")), 1)
+                  ]),
+                  "selected-item-template": u(({ item: i }) => [
+                    R("div", null, K(i.name), 1)
+                  ]),
+                  "item-template": u(({ item: i }) => [
+                    R("div", ct, [
+                      R("div", yt, K(i.name), 1),
+                      R("div", ft, K(i.value), 1)
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "clearable", "dropdown-footer-text", "items", "label", "loading", "placeholder", "readonly"]),
+                ie.value ? (b(), J("p", ut, K(ie.value), 1)) : G("", !0),
+                f(h, {
+                  modelValue: e.fields.tags,
+                  "onUpdate:modelValue": r[4] || (r[4] = (i) => e.fields.tags = i),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "key-form-tags",
+                  help: l(d)("keys.form.fields.tags.help"),
+                  label: l(d)("keys.form.fields.tags.label"),
+                  "label-attributes": {
+                    info: l(d)("keys.form.fields.tags.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: l(d)("keys.form.fields.tags.placeholder"),
+                  readonly: e.isReadonly,
+                  type: "text"
+                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"])
+              ]),
+              _: 1
+            }, 8, ["description", "title"]),
+            f(l(xe), {
+              description: l(d)("keys.form.sections.keys.description"),
+              "has-divider": "",
+              title: l(d)("keys.form.sections.keys.title")
+            }, {
+              default: u(() => [
+                R("div", kt, [
+                  f(_, {
+                    modelValue: e.fields.key_format,
+                    "onUpdate:modelValue": r[5] || (r[5] = (i) => e.fields.key_format = i),
+                    "data-testid": "key-form-key-format",
+                    items: N,
+                    label: l(d)("keys.form.fields.key_format.label"),
+                    readonly: e.isReadonly,
+                    required: "",
+                    width: "100%"
+                  }, null, 8, ["modelValue", "label", "readonly"])
+                ]),
+                e.fields.key_format === "jwk" ? (b(), V(s, {
+                  key: 0,
+                  modelValue: e.fields.jwk,
+                  "onUpdate:modelValue": r[6] || (r[6] = (i) => e.fields.jwk = i),
+                  modelModifiers: { trim: !0 },
+                  "character-limit": !1,
+                  class: "key-form-textarea",
+                  "data-testid": "key-form-jwk",
+                  label: l(d)("keys.form.fields.jwk.label"),
+                  "label-attributes": {
+                    info: l(d)("keys.form.fields.jwk.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  placeholder: l(d)("keys.form.fields.jwk.placeholder"),
+                  readonly: e.isReadonly,
+                  required: ""
+                }, null, 8, ["modelValue", "label", "label-attributes", "placeholder", "readonly"])) : G("", !0),
+                e.fields.key_format === "pem" ? (b(), V(s, {
+                  key: 1,
+                  modelValue: e.fields.private_key,
+                  "onUpdate:modelValue": r[7] || (r[7] = (i) => e.fields.private_key = i),
+                  modelModifiers: { trim: !0 },
+                  "character-limit": !1,
+                  class: "key-form-textarea",
+                  "data-testid": "key-form-private-key",
+                  label: l(d)("keys.form.fields.private_key.label"),
+                  placeholder: l(d)("keys.form.fields.private_key.placeholder"),
+                  readonly: e.isReadonly,
+                  required: ""
+                }, null, 8, ["modelValue", "label", "placeholder", "readonly"])) : G("", !0),
+                e.fields.key_format === "pem" ? (b(), V(s, {
+                  key: 2,
+                  modelValue: e.fields.public_key,
+                  "onUpdate:modelValue": r[8] || (r[8] = (i) => e.fields.public_key = i),
+                  modelModifiers: { trim: !0 },
+                  "character-limit": !1,
+                  class: "key-form-textarea",
+                  "data-testid": "key-form-public-key",
+                  label: l(d)("keys.form.fields.public_key.label"),
+                  placeholder: l(d)("keys.form.fields.public_key.placeholder"),
+                  readonly: e.isReadonly,
+                  required: ""
+                }, null, 8, ["modelValue", "label", "placeholder", "readonly"])) : G("", !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(pt, [["__scopeId", "data-v-f812000b"]]), mt = { class: "kong-ui-entities-keys-entity-config-card" }, gt = { key: 2 }, Ct = /* @__PURE__ */ ge({
+  __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: (a) => !(!a || !["konnect", "kongManager"].includes(a == null ? void 0 : a.app) || a.app === "konnect" && !a.controlPlaneId || a.app === "kongManager" && typeof a.workspace != "string" || !a.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(a, { emit: q }) {
+    var W;
+    const S = q, t = a, { axiosInstance: y } = ve((W = t.config) == null ? void 0 : W.axiosRequestConfig), { convertKeyToTitle: d } = Ge(), { i18n: { t: $ } } = he.useI18n(), F = m(() => t.keySetId ? `${P.form[t.config.app].edit.forKeySet}`.replace(/{keySetId}/gi, t.keySetId) : P.form[t.config.app].edit.all), X = m(() => {
+      var c;
+      return (c = P.form[t.config.app]) == null ? void 0 : c.getKeySet;
+    }), j = I(), e = I({}), w = I(t.keySetId || ""), N = I(""), D = I(!1), Z = async (c) => {
+      var g;
+      j.value = c, w.value = (g = c == null ? void 0 : c.set) == null ? void 0 : g.id, S("fetch:success", c), L(c);
+    };
+    te(w, async () => {
+      var g, C;
+      if (!w.value)
+        return;
+      let c = `${t.config.apiBaseUrl}${X.value}`;
+      t.config.app === "konnect" ? c = c.replace(/{controlPlaneId}/gi, ((g = t.config) == null ? void 0 : g.controlPlaneId) || "").replace(/{keySetId}/gi, w.value || "") : t.config.app === "kongManager" && (c = c.replace(/\/{workspace}/gi, (C = t.config) != null && C.workspace ? `/${t.config.workspace}` : "").replace(/{keySetId}/gi, w.value || ""));
+      try {
+        D.value = !0;
+        const { data: v } = await y.get(c, {
+          validateStatus: (x) => x === 404 || x >= 200 && x < 300
+          // in case KeySet is deleted
+        });
+        N.value = (v == null ? void 0 : v.name) || (v == null ? void 0 : v.id);
+      } catch (v) {
+        S("fetch:error", v);
+      } finally {
+        D.value = !1;
+      }
+    }, { immediate: !0 });
+    const L = (c) => {
+      var g, C;
+      try {
+        if (c.jwk) {
+          const v = JSON.parse(c.jwk);
+          Object.keys(v).forEach((x) => {
+            e.value = {
+              ...e.value,
+              [`jwk.${x}`]: v[x]
+            };
+          });
+        } else
+          e.value = {
+            "pem.public_key": (g = c == null ? void 0 : c.pem) == null ? void 0 : g.public_key,
+            "pem.private_key": (C = c == null ? void 0 : c.pem) == null ? void 0 : C.private_key
+          };
+      } catch (v) {
+        S("fetch:error", v);
+      }
+      return e;
+    }, M = I({
+      id: {},
+      name: {
+        tooltip: $("keys.form.fields.name.tooltip")
+      },
+      last_updated: {},
+      created: {},
+      set: {
+        label: $("keys.form.fields.set.label"),
+        section: ke.Basic,
+        tooltip: $("keys.form.fields.set.tooltip"),
+        order: 5
+      },
+      kid: {
+        label: $("keys.form.fields.kid.label"),
+        section: ke.Basic,
+        tooltip: $("keys.form.fields.kid.tooltip")
+      },
+      tags: {
+        tooltip: $("keys.form.fields.tags.tooltip")
+      },
+      // advanced fields
+      jwk: {
+        label: $("keys.form.fields.jwk.label"),
+        type: pe.Json
+      },
+      pem: {
+        section: ke.Advanced,
+        label: $("keys.form.fields.key_format.options.pem"),
+        type: pe.Json
+      }
+    });
+    return (c, g) => {
+      var v, x;
+      const C = O("KSkeleton");
+      return b(), J("div", mt, [
+        f(l(Xe), {
+          config: a.config,
+          "config-card-doc": a.configCardDoc,
+          "config-schema": M.value,
+          "entity-type": l(je).Key,
+          "fetch-url": F.value,
+          "hide-title": a.hideTitle,
+          "onFetch:error": g[0] || (g[0] = (k) => c.$emit("fetch:error", k)),
+          "onFetch:success": Z,
+          onLoading: g[1] || (g[1] = (k) => c.$emit("loading", k))
+        }, me({
+          set: u(({ row: k }) => [
+            D.value ? (b(), V(C, {
+              key: 0,
+              "data-testid": "key-set-name-loader",
+              type: "spinner"
+            })) : k.value && k.value.id === w.value && N.value ? (b(), V(l(Ze), {
+              key: 1,
+              item: {
+                key: k.value.id,
+                value: N.value,
+                type: l(pe).LinkInternal
+              },
+              onClick: (le) => c.$emit("navigation-click", k.value.id, "key-sets")
+            }, null, 8, ["item", "onClick"])) : (b(), J("div", gt, K("–")))
+          ]),
+          _: 2
+        }, [
+          (v = j.value) != null && v.jwk ? {
+            name: "jwk",
+            fn: u(() => [
+              (b(!0), J(Ie, null, we(Object.keys(e.value), (k) => (b(), V(l(Ke), {
+                key: k,
+                "data-testid": `${k}`,
+                item: {
+                  key: k,
+                  label: l(d)(k),
+                  value: e.value[k]
+                }
+              }, null, 8, ["data-testid", "item"]))), 128))
+            ]),
+            key: "0"
+          } : void 0,
+          (x = j.value) != null && x.pem ? {
+            name: "pem",
+            fn: u(() => [
+              (b(!0), J(Ie, null, we(Object.keys(e.value), (k) => (b(), V(l(Ke), {
+                key: k,
+                "data-testid": `${k}`,
+                item: {
+                  key: k,
+                  label: l(d)(k),
+                  value: e.value[k]
+                }
+              }, null, 8, ["data-testid", "item"]))), 128))
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["config", "config-card-doc", "config-schema", "entity-type", "fetch-url", "hide-title"])
+      ]);
+    };
+  }
+});
+export {
+  Ct as KeyConfigCard,
+  wt as KeyForm,
+  It as KeyList
+};