@kong-ui-public/entities-gateway-services 3.10.4-pr.1990.f7a2d582d.0 → 3.10.4-pr.2001.5923607fc.0

package/dist/entities-gateway-services.es.js

@@ -1,9 +1,9 @@
-import { defineComponent as Ee, computed as b, ref as P, watch as Te, onBeforeMount as Be, resolveComponent as F, openBlock as I, createElementBlock as K, createVNode as d, unref as l, createSlots as Le, withCtx as f, createBlock as fe, Teleport as Pe, createElementVNode as C, createCommentVNode as L, createTextVNode as M, toDisplayString as h, withModifiers as Ie, reactive as Ue, onMounted as De, renderSlot as Ge } from "vue";
-import { useRouter as $e } from "vue-router";
-import { BookIcon as Ke, AddIcon as qe, ServicesIcon as Oe } from "@kong/icons";
-import { createI18n as Ne, i18nTComponent as We } from "@kong-ui-public/i18n";
-import { AppType as g, useAxios as xe, useTableState as je, useFetcher as He, useDeleteUrlBuilder as ze, FetcherStatus as Je, EntityBaseTable as Qe, EntityFilter as Xe, PermissionsWrapper as se, TableTags as Ze, EntityEmptyState as Ye, EntityToggleModal as et, EntityDeleteModal as tt, EntityTypes as lt, useErrors as ot, useValidators as it, EntityBaseFormType as Re, useGatewayFeatureSupported as st, EntityBaseForm as rt, SupportedEntityType as Ae, EntityFormSection as Me, useHelpers as at, ConfigurationSchemaSection as pe, ConfigurationSchemaType as nt, EntityBaseConfigCard as ct } from "@kong-ui-public/entities-shared";
-const dt = {
+import { defineComponent as Me, computed as h, ref as $, watch as xe, onBeforeMount as He, resolveComponent as D, openBlock as C, createElementBlock as P, createVNode as c, unref as i, createSlots as Ne, withCtx as d, createBlock as ne, Teleport as Be, createElementVNode as S, createCommentVNode as B, createTextVNode as L, toDisplayString as E, withModifiers as Re, toValue as De, reactive as qe, onMounted as Je, renderSlot as Qe, Transition as $e, Fragment as Xe, renderList as Ye } from "vue";
+import { useRouter as Ge } from "vue-router";
+import { BookIcon as Le, AddIcon as et, ServicesIcon as tt } from "@kong/icons";
+import { createI18n as ot, i18nTComponent as it } from "@kong-ui-public/i18n";
+import { useAxios as je, useTableState as lt, useFetcher as rt, useDeleteUrlBuilder as st, FetcherStatus as at, EntityBaseTable as nt, EntityFilter as ct, PermissionsWrapper as ae, TableTags as dt, EntityEmptyState as ut, EntityToggleModal as ft, EntityDeleteModal as pt, EntityTypes as mt, useErrors as vt, useValidators as gt, EntityBaseFormType as Ke, useGatewayFeatureSupported as yt, EntityBaseForm as _t, SupportedEntityType as ze, EntityFormSection as We, useHelpers as ht, ConfigurationSchemaSection as be, ConfigurationSchemaType as bt, EntityBaseConfigCard as wt } from "@kong-ui-public/entities-shared";
+const kt = {
   create: "New gateway service",
   serverless_create: "Add a Service",
   copy_id: "Copy ID",
@@ -16,12 +16,12 @@ const dt = {
     description: "Deleting this Gateway Service will also remove any associated plugins. This action cannot be reversed.",
     menu_label: "Delete"
   }
-}, ut = {
+}, Ct = {
   placeholder: {
     konnect: "Filter by name",
     kongManager: "Filter by exact name or ID"
   }
-}, ft = {
+}, Vt = {
   title: "Gateway Services",
   list: {
     toolbar_actions: {
@@ -55,21 +55,27 @@ const dt = {
     sections: {
       general: {
         title: "General Information",
-        description: "General information will help identify and manage this Gateway Service."
+        description: "Provide a name and tags to help identify and manage this service."
       },
       keys: {
         title: "Service Endpoint",
-        description: "Define the endpoint for this service by specifying the full URL or by its separate elements.",
+        description: "Define where this service should send requests.",
         checkedGroupLabel: "Choose how and where to send traffic",
-        urlLabel: "Full URL",
-        checkedGroupAltLabel: "Protocol, Host, Port and Path",
+        url: {
+          label: "Full URL",
+          description: "Define the service using a single, complete API URL for simple setup."
+        },
+        protocol: {
+          label: "Protocol, host, port, and path",
+          description: "Manually specify each component of the API’s URL for advanced configurations."
+        },
         viewAdvancedFields: "View Advanced Fields"
       }
     },
     fields: {
       upstream_url: {
-        label: "Upstream URL",
-        placeholder: "Enter a URL",
+        label: "Full URL",
+        placeholder: "e.g. https://www.myapi.com/",
         tooltip_for_konnect: "This is the URL of the API you will manage in Konnect.",
         tooltip_for_km: "This is the URL of the API you will manage in Kong Gateway."
       },
@@ -96,12 +102,12 @@ const dt = {
       },
       host: {
         label: "Host",
-        placeholder: "Enter a host",
+        placeholder: "e.g. www.myapi.com, 127.0.0.1",
         tooltip: "The host of the upstream server. Note that the host value is case sensitive."
       },
       path: {
         label: "Path",
-        placeholder: "Enter a path",
+        placeholder: "e.g. /sample",
         tooltip: "The path to be used in request to the upstream server."
       },
       port: {
@@ -159,7 +165,8 @@ const dt = {
         label: "Tags",
         tooltip: "An optional set of strings associated with the Service for grouping and filtering.",
         placeholder: "Enter a list of tags separated by comma",
-        help: "e.g. tag1, tag2, tag3"
+        help: "e.g. tag1, tag2, tag3",
+        collapse: "Add tags"
       },
       enabled: {
         label: "Enabled",
@@ -169,39 +176,39 @@ const dt = {
       }
     }
   }
-}, pt = {
+}, St = {
   general: "Gateway Services could not be retrieved",
   delete: "The gateway service could not be deleted at this time.",
   copy: "Failed to copy to clipboard",
   urlErrorMessage: "Error: invalid URL"
-}, mt = {
+}, Et = {
   success: "Copied {val} to clipboard",
   success_brief: "Successfully copied to clipboard"
-}, vt = {
+}, It = {
   gateway_services: "gateway services"
-}, yt = {
-  actions: dt,
-  search: ut,
-  gateway_services: ft,
-  errors: pt,
-  copy: mt,
-  glossary: vt
+}, Ft = {
+  actions: kt,
+  search: Ct,
+  gateway_services: Vt,
+  errors: St,
+  copy: Et,
+  glossary: It
 };
-function gt() {
-  const n = Ne("en-us", yt);
+function Tt() {
+  const a = ot("en-us", Ft);
   return {
-    i18n: n,
-    i18nT: We(n)
+    i18n: a,
+    i18nT: it(a)
     // Translation component <i18n-t>
   };
 }
-function _t() {
+function Pt() {
   return {
-    getPortFromProtocol: (D, p) => {
-      const c = [80, 443], r = Number(p);
-      if ((r || r === 0) && !c.includes(r))
+    getPortFromProtocol: (I, p) => {
+      const n = [80, 443], r = Number(p);
+      if ((r || r === 0) && !n.includes(r))
         return r;
-      switch (D) {
+      switch (I) {
         case "grpcs":
         case "tls":
         case "https":
@@ -217,38 +224,38 @@ function _t() {
     }
   };
 }
-const ye = {
-  useI18n: gt,
-  usePortFromProtocol: _t
-}, me = "/v2/control-planes/{controlPlaneId}/core-entities", ve = "/{workspace}", re = {
+const Ce = {
+  useI18n: Tt,
+  usePortFromProtocol: Pt
+}, we = "/v2/control-planes/{controlPlaneId}/core-entities", ke = "/{workspace}", ce = {
   list: {
     konnect: {
-      all: `${me}/services`
+      all: `${we}/services`
     },
     kongManager: {
-      all: `${ve}/services`
+      all: `${ke}/services`
     }
   },
   form: {
     konnect: {
-      create: `${me}/services`,
-      validate: `${me}/v1/schemas/json/service/validate`,
-      edit: `${me}/services/{id}`
+      create: `${we}/services`,
+      validate: `${we}/v1/schemas/json/service/validate`,
+      edit: `${we}/services/{id}`
     },
     kongManager: {
-      create: `${ve}/services`,
-      validate: `${ve}/schemas/services/validate`,
-      edit: `${ve}/services/{id}`
+      create: `${ke}/services`,
+      validate: `${ke}/schemas/services/validate`,
+      edit: `${ke}/services/{id}`
     }
   }
-}, bt = "#00abd2", ht = "24px", wt = { class: "kong-ui-entities-gateway-services-list" }, kt = { class: "button-row" }, Ct = { class: "empty-state-icon-gateway" }, Vt = { key: 1 }, St = /* @__PURE__ */ Ee({
+}, At = "#00abd2", Rt = "24px", $t = { class: "kong-ui-entities-gateway-services-list" }, Ut = { class: "button-row" }, xt = { class: "empty-state-icon-gateway" }, Mt = { key: 1 }, Bt = /* @__PURE__ */ Me({
   __name: "GatewayServiceList",
   props: {
     /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
     config: {
       type: Object,
       required: !0,
-      validator: (n) => !(!n || ![g.Konnect, g.KongManager].includes(n == null ? void 0 : n.app) || !n.createRoute || !n.getViewRoute || !n.getEditRoute || n.app === g.KongManager && !n.isExactMatch && !n.filterSchema)
+      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: {
@@ -299,12 +306,12 @@ const ye = {
     }
   },
   emits: ["error", "click:learn-more", "copy:success", "copy:error", "delete:success", "toggle:success"],
-  setup(n, { emit: D }) {
-    var o;
-    const p = D, c = n, { i18n: { t: r, formatUnixTimeStamp: $ } } = ye.useI18n(), W = $e(), { axiosInstance: O } = xe((o = c.config) == null ? void 0 : o.axiosRequestConfig), { hasRecords: a, handleStateChange: U } = je(() => G.value), V = b(() => a.value && c.config.app === g.Konnect), ge = b(() => !c.enableV2EmptyStates && c.config.app === g.Konnect), _e = b(() => c.config.app !== g.KongManager || !!c.config.disableSorting), N = {
+  setup(a, { emit: I }) {
+    var se;
+    const p = I, n = a, { i18n: { t: r, formatUnixTimeStamp: V } } = Ce.useI18n(), q = Ge(), { axiosInstance: K } = je((se = n.config) == null ? void 0 : se.axiosRequestConfig), { hasRecords: s, handleStateChange: A } = lt(() => W.value), _ = h(() => s.value && n.config.app === "konnect"), G = h(() => !n.enableV2EmptyStates && n.config.app === "konnect"), oe = h(() => n.config.app !== "kongManager" || !!n.config.disableSorting), N = {
       // the Name column is non-hidable
       name: { label: r("gateway_services.list.table_headers.name"), searchable: !0, sortable: !0, hidable: !1 },
-      ...c.config.showControlPlaneColumn ? { control_plane: { label: r("gateway_services.list.table_headers.control_plane") } } : {},
+      ...n.config.showControlPlaneColumn ? { control_plane: { label: r("gateway_services.list.table_headers.control_plane") } } : {},
       protocol: { label: r("gateway_services.list.table_headers.protocol"), searchable: !0, sortable: !0 },
       host: { label: r("gateway_services.list.table_headers.host"), searchable: !0, sortable: !0 },
       port: { label: r("gateway_services.list.table_headers.port"), searchable: !0, sortable: !0 },
@@ -313,71 +320,71 @@ const ye = {
       tags: { label: r("gateway_services.list.table_headers.tags"), sortable: !1 },
       updated_at: { label: r("gateway_services.list.table_headers.updated_at"), sortable: !0 },
       created_at: { label: r("gateway_services.list.table_headers.created_at"), sortable: !0 }
-    }, be = {
+    }, Ve = {
       columnVisibility: {
         created_at: !1
       }
-    }, z = N, _ = b(() => {
-      var s, y;
-      let u = `${c.config.apiBaseUrl}${re.list[c.config.app].all}`;
-      return c.config.app === g.Konnect ? u = u.replace(/{controlPlaneId}/gi, ((s = c.config) == null ? void 0 : s.controlPlaneId) || "") : c.config.app === g.KongManager && (u = u.replace(/\/{workspace}/gi, (y = c.config) != null && y.workspace ? `/${c.config.workspace}` : "")), u;
-    }), ee = b(() => c.config.apiBaseUrl.startsWith("/") ? new URL(`${window.location.origin}${_.value}`) : new URL(_.value)), G = P(""), he = b(() => {
-      const u = c.config.app === g.Konnect || c.config.isExactMatch;
+    }, j = N, b = h(() => {
+      var m, g;
+      let u = `${n.config.apiBaseUrl}${ce.list[n.config.app].all}`;
+      return n.config.app === "konnect" ? u = u.replace(/{controlPlaneId}/gi, ((m = n.config) == null ? void 0 : m.controlPlaneId) || "") : n.config.app === "kongManager" && (u = u.replace(/\/{workspace}/gi, (g = n.config) != null && g.workspace ? `/${n.config.workspace}` : "")), u;
+    }), ie = h(() => n.config.apiBaseUrl.startsWith("/") ? new URL(`${window.location.origin}${b.value}`) : new URL(b.value)), W = $(""), de = h(() => {
+      const u = n.config.app === "konnect" || n.config.isExactMatch;
       if (u)
         return {
           isExactMatch: u,
-          placeholder: r(`search.placeholder.${c.config.app}`)
+          placeholder: r(`search.placeholder.${n.config.app}`)
         };
-      const { name: s, enabled: y, protocol: T, host: Y, port: x, path: ue } = N;
+      const { name: m, enabled: g, protocol: F, host: M, port: R, path: J } = N;
       return {
         isExactMatch: u,
-        fields: { name: s, enabled: y, protocol: T, host: Y, port: x, path: ue },
-        schema: c.config.filterSchema
+        fields: { name: m, enabled: g, protocol: F, host: M, port: R, path: J },
+        schema: n.config.filterSchema
       };
     }), {
-      fetcher: e,
-      fetcherState: k,
-      fetcherCacheKey: te
-    } = He({ ...c.config, cacheIdentifier: c.cacheIdentifier }, _.value), we = () => {
-      G.value = "";
-    }, ae = () => {
-      te.value++;
-    }, J = P(null), j = b(() => ({
-      ctaPath: c.config.createRoute,
-      ctaText: w.value ? c.isServerless ? r("actions.serverless_create") : r("actions.create") : void 0,
-      message: `${r("gateway_services.list.empty_state.description")}${c.config.additionMessageForEmptyState ? ` ${c.config.additionMessageForEmptyState}` : ""}`,
-      title: w.value ? c.isServerless ? r("gateway_services.list.empty_state.serverless_title") : r("gateway_services.list.empty_state.title") : r("gateway_services.title")
-    })), Q = P(!1), E = P(null), X = b(() => {
+      fetcher: ue,
+      fetcherState: t,
+      fetcherCacheKey: k
+    } = rt({ ...n.config, cacheIdentifier: n.cacheIdentifier }, b.value), Se = () => {
+      W.value = "";
+    }, fe = () => {
+      k.value++;
+    }, z = $(null), Ee = h(() => ({
+      ctaPath: n.config.createRoute,
+      ctaText: H.value ? n.isServerless ? r("actions.serverless_create") : r("actions.create") : void 0,
+      message: `${r("gateway_services.list.empty_state.description")}${n.config.additionMessageForEmptyState ? ` ${n.config.additionMessageForEmptyState}` : ""}`,
+      title: H.value ? n.isServerless ? r("gateway_services.list.empty_state.serverless_title") : r("gateway_services.list.empty_state.title") : r("gateway_services.title")
+    })), O = $(!1), U = $(null), X = h(() => {
       const u = {
         action: "disable",
         id: "",
         name: ""
       };
-      if (E.value) {
-        const { enabled: s, id: y, name: T } = E.value;
-        u.action = s ? "disable" : "enable", u.id = y, u.name = T || y;
+      if (U.value) {
+        const { enabled: m, id: g, name: F } = U.value;
+        u.action = m ? "disable" : "enable", u.id = g, u.name = F || g;
       }
       return u;
-    }), ke = (u) => {
-      Q.value = !0, E.value = u;
-    }, ne = () => {
-      Q.value = !1, E.value = null;
-    }, Ce = async () => {
-      var T, Y;
-      if (!await ((T = c.canEdit) == null ? void 0 : T.call(c, E.value)) || !E.value)
+    }), Ie = (u) => {
+      O.value = !0, U.value = u;
+    }, le = () => {
+      O.value = !1, U.value = null;
+    }, Fe = async () => {
+      var F, M;
+      if (!await ((F = n.canEdit) == null ? void 0 : F.call(n, U.value)) || !U.value)
         return;
-      const s = `${ee.value.href}/${E.value.id}`, y = !E.value.enabled;
+      const m = `${ie.value.href}/${U.value.id}`, g = !U.value.enabled;
       try {
-        const { data: x } = ((Y = c.config) == null ? void 0 : Y.app) === g.Konnect ? await O.put(s, { ...E.value, enabled: y }) : await O.patch(s, { ...E.value, enabled: y });
-        p("toggle:success", x), E.value.enabled = y;
-      } catch (x) {
-        p("error", x);
+        const { data: R } = ((M = n.config) == null ? void 0 : M.app) === "konnect" ? await K.put(m, { ...U.value, enabled: g }) : await K.patch(m, { ...U.value, enabled: g });
+        p("toggle:success", R), U.value.enabled = g;
+      } catch (R) {
+        p("error", R);
       }
-    }, Ve = (u) => {
-      c.config.getControlPlaneRoute && W.push(c.config.getControlPlaneRoute(u));
-    }, le = (u, s) => {
-      const y = u.id;
-      if (!s(y)) {
+    }, pe = (u) => {
+      n.config.getControlPlaneRoute && q.push(n.config.getControlPlaneRoute(u));
+    }, me = (u, m) => {
+      const g = u.id;
+      if (!m(g)) {
         p("copy:error", {
           entity: u,
           field: "id",
@@ -388,11 +395,11 @@ const ye = {
       p("copy:success", {
         entity: u,
         field: "id",
-        message: r("copy.success", { val: y })
+        message: r("copy.success", { val: g })
       });
-    }, ce = (u, s) => {
-      const y = JSON.stringify(u);
-      if (!s(y)) {
+    }, ve = (u, m) => {
+      const g = JSON.stringify(u);
+      if (!m(g)) {
         p("copy:error", {
           entity: u,
           message: r("errors.copy")
@@ -403,107 +410,107 @@ const ye = {
         entity: u,
         message: r("copy.success_brief")
       });
-    }, de = async (u) => {
-      var y;
-      await ((y = c.canRetrieve) == null ? void 0 : y.call(c, u)) && W.push(c.config.getViewRoute(u.id));
-    }, Se = (u) => ({
+    }, ge = async (u) => {
+      var g;
+      await ((g = n.canRetrieve) == null ? void 0 : g.call(n, u)) && q.push(n.config.getViewRoute(u.id));
+    }, ye = (u) => ({
       label: r("actions.view"),
-      to: c.config.getViewRoute(u)
-    }), oe = (u) => ({
+      to: n.config.getViewRoute(u)
+    }), Y = (u) => ({
       label: r("actions.edit"),
-      to: c.config.getEditRoute(u)
-    }), B = P(void 0), q = P(!1), H = P(!1), Z = P(""), t = ze(c.config, _.value), i = (u) => {
-      B.value = u, q.value = !0, Z.value = "";
-    }, v = () => {
-      q.value = !1, B.value = void 0;
-    }, R = async () => {
-      var u, s, y;
-      if ((u = B.value) != null && u.id) {
-        H.value = !0;
+      to: n.config.getEditRoute(u)
+    }), x = $(void 0), Z = $(!1), ee = $(!1), re = $(""), _e = st(n.config, b.value), Te = (u) => {
+      x.value = u, Z.value = !0, re.value = "";
+    }, he = () => {
+      Z.value = !1, x.value = void 0;
+    }, Pe = async () => {
+      var u, m, g;
+      if ((u = x.value) != null && u.id) {
+        ee.value = !0;
         try {
-          await O.delete(t(B.value.id)), p("delete:success", B.value), v(), te.value++;
-        } catch (T) {
-          Z.value = ((y = (s = T.response) == null ? void 0 : s.data) == null ? void 0 : y.message) || T.message || r("errors.delete"), p("error", T);
+          await K.delete(_e(x.value.id)), p("delete:success", x.value), he(), k.value++;
+        } catch (F) {
+          re.value = ((g = (m = F.response) == null ? void 0 : m.data) == null ? void 0 : g.message) || F.message || r("errors.delete"), p("error", F);
         } finally {
-          H.value = !1;
+          ee.value = !1;
         }
       }
-    }, S = () => {
-      W.push(c.config.createRoute);
+    }, Ae = () => {
+      q.push(n.config.createRoute);
     };
-    Te(k, (u) => {
-      var s, y, T;
-      if (u.status === Je.Error) {
-        J.value = {
+    xe(t, (u) => {
+      var m, g, F;
+      if (u.status === at.Error) {
+        z.value = {
           title: r("errors.general")
-        }, (T = (y = (s = u.error) == null ? void 0 : s.response) == null ? void 0 : y.data) != null && T.message && (J.value.message = u.error.response.data.message), p("error", u.error);
+        }, (F = (g = (m = u.error) == null ? void 0 : m.response) == null ? void 0 : g.data) != null && F.message && (z.value.message = u.error.response.data.message), p("error", u.error);
         return;
       }
-      J.value = null;
+      z.value = null;
     });
-    const w = P(!1);
-    return Be(async () => {
-      w.value = await c.canCreate();
-    }), (u, s) => {
-      const y = F("KButton"), T = F("KBadge"), Y = F("KInputSwitch"), x = F("KDropdownItem"), ue = F("KClipboardProvider");
-      return I(), K("div", wt, [
-        d(l(Qe), {
-          "cache-identifier": n.cacheIdentifier,
-          "default-table-preferences": be,
-          "disable-sorting": _e.value,
-          "empty-state-options": j.value,
+    const H = $(!1);
+    return He(async () => {
+      H.value = await n.canCreate();
+    }), (u, m) => {
+      const g = D("KButton"), F = D("KBadge"), M = D("KInputSwitch"), R = D("KDropdownItem"), J = D("KClipboardProvider");
+      return C(), P("div", $t, [
+        c(i(nt), {
+          "cache-identifier": a.cacheIdentifier,
+          "default-table-preferences": Ve,
+          "disable-sorting": oe.value,
+          "empty-state-options": Ee.value,
           "enable-entity-actions": "",
-          "error-message": J.value,
-          fetcher: l(e),
-          "fetcher-cache-key": l(te),
+          "error-message": z.value,
+          fetcher: i(ue),
+          "fetcher-cache-key": i(k),
           "pagination-type": "offset",
           "preferences-storage-key": "kong-ui-entities-gateway-services-list",
-          query: G.value,
-          "table-headers": l(z),
-          onClearSearchInput: we,
-          "onClick:row": s[5] || (s[5] = (m) => de(m)),
-          onSort: ae,
-          onState: l(U)
-        }, Le({
-          "toolbar-filter": f(() => [
-            d(l(Xe), {
-              modelValue: G.value,
-              "onUpdate:modelValue": s[0] || (s[0] = (m) => G.value = m),
-              config: he.value
+          query: W.value,
+          "table-headers": i(j),
+          onClearSearchInput: Se,
+          "onClick:row": m[5] || (m[5] = (e) => ge(e)),
+          onSort: fe,
+          onState: i(A)
+        }, Ne({
+          "toolbar-filter": d(() => [
+            c(i(ct), {
+              modelValue: W.value,
+              "onUpdate:modelValue": m[0] || (m[0] = (e) => W.value = e),
+              config: de.value
             }, null, 8, ["modelValue", "config"])
           ]),
-          "toolbar-button": f(() => [
-            (I(), fe(Pe, {
-              disabled: !n.useActionOutside,
+          "toolbar-button": d(() => [
+            (C(), ne(Be, {
+              disabled: !a.useActionOutside,
               to: "#kong-ui-app-page-header-action-button"
             }, [
-              C("div", kt, [
-                V.value ? (I(), fe(y, {
+              S("div", Ut, [
+                _.value ? (C(), ne(g, {
                   key: 0,
                   appearance: "secondary",
                   class: "open-learning-hub",
                   "data-testid": "gateway-services-learn-more-button",
                   icon: "",
-                  onClick: s[1] || (s[1] = (m) => u.$emit("click:learn-more"))
+                  onClick: m[1] || (m[1] = (e) => u.$emit("click:learn-more"))
                 }, {
-                  default: f(() => [
-                    d(l(Ke), { decorative: "" })
+                  default: d(() => [
+                    c(i(Le), { decorative: "" })
                   ]),
                   _: 1
-                })) : L("", !0),
-                d(l(se), {
-                  "auth-function": () => n.canCreate()
+                })) : B("", !0),
+                c(i(ae), {
+                  "auth-function": () => a.canCreate()
                 }, {
-                  default: f(() => [
-                    d(y, {
+                  default: d(() => [
+                    c(g, {
                       appearance: "primary",
                       "data-testid": "toolbar-add-gateway-service",
-                      size: n.useActionOutside ? "medium" : "large",
-                      to: n.config.createRoute
+                      size: a.useActionOutside ? "medium" : "large",
+                      to: a.config.createRoute
                     }, {
-                      default: f(() => [
-                        d(l(qe)),
-                        M(" " + h(l(r)("gateway_services.list.toolbar_actions.new_gateway_service")), 1)
+                      default: d(() => [
+                        c(i(et)),
+                        L(" " + E(i(r)("gateway_services.list.toolbar_actions.new_gateway_service")), 1)
                       ]),
                       _: 1
                     }, 8, ["size", "to"])
@@ -513,120 +520,120 @@ const ye = {
               ])
             ], 8, ["disabled"]))
           ]),
-          name: f(({ rowValue: m }) => [
-            C("b", null, h(m ?? "-"), 1)
+          name: d(({ rowValue: e }) => [
+            S("b", null, E(e ?? "-"), 1)
           ]),
-          control_plane: f(({ row: m }) => {
-            var A;
+          control_plane: d(({ row: e }) => {
+            var o;
             return [
-              (A = m.x_meta) != null && A.cluster_id ? (I(), fe(T, {
+              (o = e.x_meta) != null && o.cluster_id ? (C(), ne(F, {
                 key: 0,
-                tooltip: m.x_meta.cluster_id,
+                tooltip: e.x_meta.cluster_id,
                 "truncation-tooltip": "",
-                onClick: Ie((ie) => Ve(m.x_meta.cluster_id), ["stop"])
+                onClick: Re((v) => pe(e.x_meta.cluster_id), ["stop"])
               }, {
-                default: f(() => [
-                  M(h(m.x_meta.cluster_id), 1)
+                default: d(() => [
+                  L(E(e.x_meta.cluster_id), 1)
                 ]),
                 _: 2
-              }, 1032, ["tooltip", "onClick"])) : (I(), K("b", Vt, "-"))
+              }, 1032, ["tooltip", "onClick"])) : (C(), P("b", Mt, "-"))
             ];
           }),
-          enabled: f(({ row: m }) => [
-            d(l(se), {
-              "auth-function": () => n.canEdit(m),
+          enabled: d(({ row: e }) => [
+            c(i(ae), {
+              "auth-function": () => a.canEdit(e),
               "force-show": ""
             }, {
-              default: f(({ isAllowed: A }) => [
-                C("div", {
-                  onClick: s[4] || (s[4] = Ie(() => {
+              default: d(({ isAllowed: o }) => [
+                S("div", {
+                  onClick: m[4] || (m[4] = Re(() => {
                   }, ["stop"]))
                 }, [
-                  d(Y, {
-                    modelValue: m.enabled,
-                    "onUpdate:modelValue": (ie) => m.enabled = ie,
-                    "data-testid": `row-${m.id}-toggle-input`,
-                    disabled: !A,
-                    onClick: Ie((ie) => ke(m), ["prevent"])
+                  c(M, {
+                    modelValue: e.enabled,
+                    "onUpdate:modelValue": (v) => e.enabled = v,
+                    "data-testid": `row-${e.id}-toggle-input`,
+                    disabled: !o,
+                    onClick: Re((v) => Ie(e), ["prevent"])
                   }, null, 8, ["modelValue", "onUpdate:modelValue", "data-testid", "disabled", "onClick"])
                 ])
               ]),
               _: 2
             }, 1032, ["auth-function"])
           ]),
-          tags: f(({ rowValue: m }) => [
-            d(l(Ze), { tags: m }, null, 8, ["tags"])
+          tags: d(({ rowValue: e }) => [
+            c(i(dt), { tags: e }, null, 8, ["tags"])
           ]),
-          created_at: f(({ rowValue: m }) => [
-            M(h(l($)(m)), 1)
+          created_at: d(({ rowValue: e }) => [
+            L(E(i(V)(e)), 1)
           ]),
-          updated_at: f(({ row: m, rowValue: A }) => [
-            M(h(l($)(A ?? m.created_at)), 1)
+          updated_at: d(({ row: e, rowValue: o }) => [
+            L(E(i(V)(o ?? e.created_at)), 1)
           ]),
-          actions: f(({ row: m }) => [
-            d(ue, null, {
-              default: f(({ copyToClipboard: A }) => [
-                d(x, {
+          actions: d(({ row: e }) => [
+            c(J, null, {
+              default: d(({ copyToClipboard: o }) => [
+                c(R, {
                   "data-testid": "action-entity-copy-id",
-                  onClick: (ie) => le(m, A)
+                  onClick: (v) => me(e, o)
                 }, {
-                  default: f(() => [
-                    M(h(l(r)("actions.copy_id")), 1)
+                  default: d(() => [
+                    L(E(i(r)("actions.copy_id")), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"])
               ]),
               _: 2
             }, 1024),
-            d(ue, null, {
-              default: f(({ copyToClipboard: A }) => [
-                d(x, {
+            c(J, null, {
+              default: d(({ copyToClipboard: o }) => [
+                c(R, {
                   "data-testid": "action-entity-copy-json",
-                  onClick: (ie) => ce(m, A)
+                  onClick: (v) => ve(e, o)
                 }, {
-                  default: f(() => [
-                    M(h(l(r)("actions.copy_json")), 1)
+                  default: d(() => [
+                    L(E(i(r)("actions.copy_json")), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"])
               ]),
               _: 2
             }, 1024),
-            d(l(se), {
-              "auth-function": () => n.canRetrieve(m)
+            c(i(ae), {
+              "auth-function": () => a.canRetrieve(e)
             }, {
-              default: f(() => [
-                d(x, {
+              default: d(() => [
+                c(R, {
                   "data-testid": "action-entity-view",
                   "has-divider": "",
-                  item: Se(m.id)
+                  item: ye(e.id)
                 }, null, 8, ["item"])
               ]),
               _: 2
             }, 1032, ["auth-function"]),
-            d(l(se), {
-              "auth-function": () => n.canEdit(m)
+            c(i(ae), {
+              "auth-function": () => a.canEdit(e)
             }, {
-              default: f(() => [
-                d(x, {
+              default: d(() => [
+                c(R, {
                   "data-testid": "action-entity-edit",
-                  item: oe(m.id)
+                  item: Y(e.id)
                 }, null, 8, ["item"])
               ]),
               _: 2
             }, 1032, ["auth-function"]),
-            d(l(se), {
-              "auth-function": () => n.canDelete(m)
+            c(i(ae), {
+              "auth-function": () => a.canDelete(e)
             }, {
-              default: f(() => [
-                d(x, {
+              default: d(() => [
+                c(R, {
                   danger: "",
                   "data-testid": "action-entity-delete",
                   "has-divider": "",
-                  onClick: (A) => i(m)
+                  onClick: (o) => Te(e)
                 }, {
-                  default: f(() => [
-                    M(h(l(r)("actions.delete.menu_label")), 1)
+                  default: d(() => [
+                    L(E(i(r)("actions.delete.menu_label")), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"])
@@ -636,22 +643,22 @@ const ye = {
           ]),
           _: 2
         }, [
-          !l(a) && ge.value ? {
+          !i(s) && G.value ? {
             name: "outside-actions",
-            fn: f(() => [
-              (I(), fe(Pe, {
-                disabled: !n.useActionOutside,
+            fn: d(() => [
+              (C(), ne(Be, {
+                disabled: !a.useActionOutside,
                 to: "#kong-ui-app-page-header-action-button"
               }, [
-                d(y, {
+                c(g, {
                   appearance: "secondary",
                   class: "open-learning-hub",
                   "data-testid": "gateway-services-more-button",
                   icon: "",
-                  onClick: s[2] || (s[2] = (m) => u.$emit("click:learn-more"))
+                  onClick: m[2] || (m[2] = (e) => u.$emit("click:learn-more"))
                 }, {
-                  default: f(() => [
-                    d(l(Ke), { decorative: "" })
+                  default: d(() => [
+                    c(i(Le), { decorative: "" })
                   ]),
                   _: 1
                 })
@@ -659,25 +666,25 @@ const ye = {
             ]),
             key: "0"
           } : void 0,
-          n.enableV2EmptyStates && n.config.app === l(g).Konnect ? {
+          a.enableV2EmptyStates && a.config.app === "konnect" ? {
             name: "empty-state",
-            fn: f(() => [
-              d(l(Ye), {
-                "action-button-text": l(r)("gateway_services.empty_state_v2.create"),
+            fn: d(() => [
+              c(i(ut), {
+                "action-button-text": i(r)("gateway_services.empty_state_v2.create"),
                 appearance: "secondary",
-                "can-create": () => n.canCreate(),
+                "can-create": () => a.canCreate(),
                 "data-testid": "gateway-services-entity-empty-state",
-                description: l(r)("gateway_services.empty_state_v2.description"),
-                "learn-more": n.config.app === l(g).Konnect,
-                title: l(r)("gateway_services.empty_state_v2.title"),
-                "onClick:create": S,
-                "onClick:learnMore": s[3] || (s[3] = (m) => u.$emit("click:learn-more"))
+                description: i(r)("gateway_services.empty_state_v2.description"),
+                "learn-more": a.config.app === "konnect",
+                title: i(r)("gateway_services.empty_state_v2.title"),
+                "onClick:create": Ae,
+                "onClick:learnMore": m[3] || (m[3] = (e) => u.$emit("click:learn-more"))
               }, {
-                image: f(() => [
-                  C("div", Ct, [
-                    d(l(Oe), {
-                      color: l(bt),
-                      size: l(ht)
+                image: d(() => [
+                  S("div", xt, [
+                    c(i(tt), {
+                      color: i(At),
+                      size: i(Rt)
                     }, null, 8, ["color", "size"])
                   ])
                 ]),
@@ -687,64 +694,137 @@ const ye = {
             key: "1"
           } : void 0
         ]), 1032, ["cache-identifier", "disable-sorting", "empty-state-options", "error-message", "fetcher", "fetcher-cache-key", "query", "table-headers", "onState"]),
-        d(l(et), {
+        c(i(ft), {
           action: X.value.action,
           "entity-id": X.value.id,
           "entity-name": X.value.name,
-          "entity-type": l(r)("glossary.gateway_services"),
-          "on-confirm": Ce,
-          visible: Q.value,
-          onCancel: ne,
-          onProceed: ne
+          "entity-type": i(r)("glossary.gateway_services"),
+          "on-confirm": Fe,
+          visible: O.value,
+          onCancel: le,
+          onProceed: le
         }, null, 8, ["action", "entity-id", "entity-name", "entity-type", "visible"]),
-        d(l(tt), {
-          "action-pending": H.value,
-          description: l(r)("actions.delete.description"),
-          "entity-name": B.value && (B.value.name || B.value.id),
-          "entity-type": l(lt).GatewayService,
-          error: Z.value,
-          title: l(r)("actions.delete.title"),
-          visible: q.value,
-          onCancel: v,
-          onProceed: R
+        c(i(pt), {
+          "action-pending": ee.value,
+          description: i(r)("actions.delete.description"),
+          "entity-name": x.value && (x.value.name || x.value.id),
+          "entity-type": i(mt).GatewayService,
+          error: re.value,
+          title: i(r)("actions.delete.title"),
+          visible: Z.value,
+          onCancel: he,
+          onProceed: Pe
         }, null, 8, ["action-pending", "description", "entity-name", "entity-type", "error", "title", "visible"])
       ]);
     };
   }
-}), Fe = (n, D) => {
-  const p = n.__vccOpts || n;
-  for (const [c, r] of D)
-    p[c] = r;
+}), Ze = (a, I) => {
+  const p = a.__vccOpts || a;
+  for (const [n, r] of I)
+    p[n] = r;
+  return p;
+}, mo = /* @__PURE__ */ Ze(Bt, [["__scopeId", "data-v-fa0c855e"]]);
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const Oe = () => {
+};
+function Dt(a, I) {
+  function p(...n) {
+    return new Promise((r, V) => {
+      Promise.resolve(a(() => I.apply(this, n), { fn: I, thisArg: this, args: n })).then(r).catch(V);
+    });
+  }
   return p;
-}, Qt = /* @__PURE__ */ Fe(St, [["__scopeId", "data-v-3493f686"]]), It = { class: "kong-ui-entities-gateway-service-form" }, Tt = { key: 0 }, Et = { class: "gateway-service-form-traffic-label" }, Pt = { class: "gateway-service-form-margin-bottom" }, Ut = {
+}
+function qt(a, I = {}) {
+  let p, n, r = Oe;
+  const V = (s) => {
+    clearTimeout(s), r(), r = Oe;
+  };
+  let q;
+  return (s) => {
+    const A = De(a), _ = De(I.maxWait);
+    return p && V(p), A <= 0 || _ !== void 0 && _ <= 0 ? (n && (V(n), n = null), Promise.resolve(s())) : new Promise((G, oe) => {
+      r = I.rejectOnCancel ? oe : G, q = s, _ && !n && (n = setTimeout(() => {
+        p && V(p), n = null, G(q());
+      }, _)), p = setTimeout(() => {
+        n && V(n), n = null, G(s());
+      }, A);
+    });
+  };
+}
+function Ue(a, I = 200, p = {}) {
+  return Dt(
+    qt(I, p),
+    a
+  );
+}
+const Lt = {
+  name: "WeatherApi-quickstart-demo",
+  tags: [
+    "quickstart-demo"
+  ],
+  protocol: "https",
+  path: "/examples/weather/utopia",
+  read_timeout: 6e4,
+  retries: 5,
+  // will be overriden with correct host during DP node setup
+  host: "global.api.konghq.com",
+  connect_timeout: 6e4,
+  ca_certificates: null,
+  client_certificate: null,
+  write_timeout: 6e4,
+  port: 443
+}, Kt = {
+  name: "StockApi-quickstart-demo",
+  tags: [
+    "quickstart-demo"
+  ],
+  protocol: "https",
+  path: "/examples/stock/piper",
+  read_timeout: 6e4,
+  retries: 5,
+  // will be overriden with correct host during DP node setup
+  host: "global.api.konghq.com",
+  connect_timeout: 6e4,
+  ca_certificates: null,
+  client_certificate: null,
+  write_timeout: 6e4,
+  port: 443
+}, Wt = { class: "kong-ui-entities-gateway-service-form" }, Ot = {
+  key: 0,
+  class: "gateway-service-form-general-info"
+}, Nt = { class: "gateway-service-form-group-selection-wrapper" }, Gt = {
   key: 0,
   class: "gateway-service-form-group-fields"
-}, Kt = {
-  key: 1,
+}, jt = {
+  key: 0,
   class: "gateway-service-form-group-fields"
-}, Rt = { key: 0 }, Mt = { class: "gateway-service-form-margin-top" }, $t = { class: "gateway-service-form-margin-bottom" }, xt = { class: "gateway-service-form-margin-bottom" }, At = { class: "gateway-service-form-margin-bottom" }, Ft = { class: "gateway-service-form-margin-bottom" }, Bt = {
+}, zt = { key: 0 }, Zt = {
+  key: 0,
+  class: "gateway-service-form-advanced-fields"
+}, Ht = { class: "gateway-service-form-margin-bottom" }, Jt = { class: "gateway-service-form-margin-bottom" }, Qt = { class: "gateway-service-form-margin-bottom" }, Xt = { class: "gateway-service-form-margin-bottom" }, Yt = {
   key: 0,
   class: "gateway-service-form-margin-bottom"
-}, Lt = {
+}, eo = {
   key: 1,
   class: "gateway-service-form-margin-bottom"
-}, Dt = {
+}, to = {
   key: 2,
   class: "gateway-service-form-margin-bottom"
-}, Gt = {
+}, oo = {
   key: 0,
   class: "checkbox-aligned-radio"
-}, qt = {
+}, io = {
   key: 1,
   class: "checkbox-aligned-radio"
-}, Ot = /* @__PURE__ */ Ee({
+}, lo = { class: "gateway-service-form-tags" }, ro = { class: "form-error-list" }, so = /* @__PURE__ */ Me({
   __name: "GatewayServiceForm",
   props: {
     /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
     config: {
       type: Object,
       required: !0,
-      validator: (n) => !(!n || ![g.Konnect, g.KongManager].includes(n == null ? void 0 : n.app) || n.app === g.Konnect && !n.controlPlaneId || n.app === g.KongManager && typeof n.workspace != "string" || !n.cancelRoute)
+      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 Gateway Service ID is provided, it will put the form in Edit mode instead of Create */
     gatewayServiceId: {
@@ -757,12 +837,23 @@ const ye = {
       type: Boolean,
       required: !1,
       default: !1
+    },
+    /** Whether show or hide Try sample API button */
+    hideTrySampleApiButton: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    sampleApiList: {
+      type: Array,
+      required: !1,
+      default: () => []
     }
   },
-  emits: ["update", "error", "url-valid:success", "url-valid:error", "loading", "model-updated"],
-  setup(n, { expose: D, emit: p }) {
-    var Z;
-    const c = p, r = n, $ = P(!0), W = $e(), { i18nT: O, i18n: { t: a } } = ye.useI18n(), { getMessageFromError: U } = ot(), { axiosInstance: V } = xe((Z = r.config) == null ? void 0 : Z.axiosRequestConfig), ge = it(), _e = b(() => re.form[r.config.app].edit), N = b(() => r.gatewayServiceId ? Re.Edit : Re.Create), be = P(!1), z = b(() => !!r.gatewayServiceId), _ = P(z.value ? "protocol" : "url"), ee = ye.usePortFromProtocol(), G = P(""), he = b(() => !!G.value), e = Ue({
+  emits: ["update", "error", "url-valid:success", "url-valid:error", "loading", "model-updated", "try-sample-api"],
+  setup(a, { expose: I, emit: p }) {
+    var J;
+    const n = p, r = a, V = $(!0), q = Ge(), { i18nT: K, i18n: { t: s } } = Ce.useI18n(), { getErrorFieldsFromError: A } = vt(), { axiosInstance: _ } = je((J = r.config) == null ? void 0 : J.axiosRequestConfig), G = gt(), oe = h(() => ce.form[r.config.app].edit), N = h(() => r.gatewayServiceId ? Ke.Edit : Ke.Create), Ve = $(!1), j = h(() => !!r.gatewayServiceId), b = $(j.value ? "protocol" : "url"), ie = Ce.usePortFromProtocol(), W = $(""), de = $(0), ue = h(() => !!W.value), t = qe({
       fields: {
         name: "",
         protocol: "http",
@@ -781,8 +872,23 @@ const ye = {
         tags: ""
       },
       isReadonly: !1,
-      errorMessage: ""
-    }), k = Ue({
+      errorMessages: [],
+      formFieldErrors: {
+        host: "",
+        port: "",
+        path: "",
+        url: "",
+        tags: "",
+        retries: "",
+        connect_timeout: "",
+        write_timeout: "",
+        read_timeout: "",
+        client_certificate: "",
+        ca_certificates: "",
+        tls_verify_enabled: "",
+        tls_verify_value: ""
+      }
+    }), k = qe({
       name: "",
       protocol: "http",
       host: "",
@@ -798,564 +904,690 @@ const ye = {
       tls_verify_enabled: !1,
       tls_verify_value: !1,
       tags: ""
-    }), te = r.config.app === g.Konnect || st({
+    }), Se = r.config.app === "konnect" || yt({
       gatewayInfo: r.config.gatewayInfo,
       // 'ws' and 'wss' are not valid values for the protocol field in Gateway Community Edition or before Gateway Enterprise Edition 3.0
       supportedRange: {
         enterprise: ["3.0"]
       }
-    }), we = [
+    }), fe = [
       {
-        label: a("gateway_services.form.fields.protocol.options.http"),
+        label: s("gateway_services.form.fields.protocol.options.http"),
         value: "http",
         group: "http"
       },
       {
-        label: a("gateway_services.form.fields.protocol.options.https"),
+        label: s("gateway_services.form.fields.protocol.options.https"),
         value: "https",
         group: "http"
       },
       {
-        label: a("gateway_services.form.fields.protocol.options.tcp"),
+        label: s("gateway_services.form.fields.protocol.options.tcp"),
         value: "tcp",
         group: "tcp"
       },
       {
-        label: a("gateway_services.form.fields.protocol.options.tls"),
+        label: s("gateway_services.form.fields.protocol.options.tls"),
         value: "tls",
         group: "tcp"
       },
       {
-        label: a("gateway_services.form.fields.protocol.options.tls_passthrough"),
+        label: s("gateway_services.form.fields.protocol.options.tls_passthrough"),
         value: "tls_passthrough",
         group: "tcp"
       },
       {
-        label: a("gateway_services.form.fields.protocol.options.grpc"),
+        label: s("gateway_services.form.fields.protocol.options.grpc"),
         value: "grpc",
         group: "grpc"
       },
       {
-        label: a("gateway_services.form.fields.protocol.options.grpcs"),
+        label: s("gateway_services.form.fields.protocol.options.grpcs"),
         value: "grpcs",
         group: "grpc"
       },
-      ...te ? [
+      ...Se ? [
         {
-          label: a("gateway_services.form.fields.protocol.options.ws"),
+          label: s("gateway_services.form.fields.protocol.options.ws"),
           value: "ws",
           group: "websocket"
         },
         {
-          label: a("gateway_services.form.fields.protocol.options.wss"),
+          label: s("gateway_services.form.fields.protocol.options.wss"),
           value: "wss",
           group: "websocket"
         }
       ] : [],
       {
-        label: a("gateway_services.form.fields.protocol.options.udp"),
+        label: s("gateway_services.form.fields.protocol.options.udp"),
         value: "udp",
         group: "udp"
       }
-    ], ae = { url: "url", protocol: "protocol" }, J = (t, i) => {
-      i.value;
-    }, j = (t) => t ? parseFloat(t) : 0, Q = () => {
-      $.value = !0, e.errorMessage = "", e.fields.host = k.host, e.fields.path = k.path, e.fields.port = k.port, e.fields.protocol = k.protocol, e.fields.url = k.url, e.fields.retries = k.retries, e.fields.connect_timeout = k.connect_timeout, e.fields.write_timeout = k.write_timeout, e.fields.read_timeout = k.read_timeout, e.fields.client_certificate = k.client_certificate, e.fields.ca_certificates = k.ca_certificates, e.fields.tls_verify_enabled = k.tls_verify_enabled, e.fields.tls_verify_value = k.tls_verify_value;
-    }, E = () => {
-      if (e.fields.url && _.value === "url")
+    ], z = { url: "url", protocol: "protocol" }, Ee = (e, o) => {
+      o.value;
+    }, O = (e) => e ? parseFloat(e) : 0, U = () => {
+      t.fields.host = k.host, t.fields.path = k.path, t.fields.port = k.port, t.fields.protocol = k.protocol, t.fields.url = k.url, t.fields.retries = k.retries, t.fields.connect_timeout = k.connect_timeout, t.fields.write_timeout = k.write_timeout, t.fields.read_timeout = k.read_timeout, t.fields.client_certificate = k.client_certificate, t.fields.ca_certificates = k.ca_certificates, t.fields.tls_verify_enabled = k.tls_verify_enabled, t.fields.tls_verify_value = k.tls_verify_value;
+    }, X = () => {
+      V.value = !0, x(), t.errorMessages = [], U();
+    }, Ie = () => {
+      de.value += 1;
+      const o = de.value % 2 === 0 ? { ...Lt } : { ...Kt };
+      switch (U(), t.fields.name = o.name, b.value) {
+        case "url":
+          t.fields.url = `${o.protocol}://${o.host}${o.path}`;
+          break;
+        case "protocol":
+          t.fields.host = o.host, t.fields.path = o.path, t.fields.protocol = o.protocol, t.fields.port = o.port;
+          break;
+        default:
+          console.warn("Invalid input group selected");
+      }
+    }, le = (e) => !e || e.trim() === "" ? "host cannot be empty" : /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$|^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(e) ? "" : "invalid host", Fe = (e) => !e || e.trim() === "" ? "protocol cannot be empty" : (e = e.slice(0, -1), fe.find((v) => {
+      if (v.value === e) return v;
+    }) === void 0 ? 'protocol - value must be one of "http", "https", "grpc", "grpcs", "tcp", "udp", "tls", "tls_passthrough", "ws", "wss"' : ""), pe = (e) => {
+      if (e == null || e === "")
+        return "";
+      const o = typeof e == "string" ? parseInt(e, 10) : e;
+      return isNaN(o) ? "Port must be a number" : o < 0 || o > 65535 ? "Port must be between 0 and 65535" : "";
+    }, me = (e) => !e || e === "" ? "" : e.startsWith("/") ? /[^A-Za-z0-9\-._~:/?#[\]@!$&'()*+,;=%]/.test(e) ? "Path should not include characters outside of the reserved list of RFC 3986" : "" : "Path must begin with /", ve = Ue(() => {
+      if (x(), t.fields.url.length)
         try {
-          const t = new URL(e.fields.url);
-          e.errorMessage = "", e.fields.protocol = t.protocol.slice(0, -1), e.fields.host = t.hostname, e.fields.path = t.pathname;
-          const i = Number(t.port);
-          be.value = !!i, e.fields.port = i || ee.getPortFromProtocol(e.fields.protocol), e.errorMessage = "", c("url-valid:success");
-        } catch (t) {
-          e.errorMessage = a("errors.urlErrorMessage"), c("url-valid:error", U(t));
+          const e = new URL(t.fields.url), o = Fe(e.protocol);
+          if (o) throw new Error(o);
+          t.fields.protocol = e.protocol.slice(0, -1);
+          const v = le(e.hostname);
+          if (v) throw new Error(v);
+          t.fields.host = e.hostname;
+          const T = me(e.pathname);
+          if (T) throw new Error(T);
+          t.fields.path = e.pathname;
+          const y = pe(e.port);
+          if (y) throw new Error(y);
+          const w = Number(e.port);
+          Ve.value = !!w, t.fields.port = w || ie.getPortFromProtocol(t.fields.protocol), n("url-valid:success");
+        } catch (e) {
+          n("url-valid:error", e.message || "URL validation failed"), t.formFieldErrors.url = e.message || "URL validation failed";
         }
-      else
-        c("url-valid:success"), e.errorMessage = "";
-    }, X = b(() => !["tcp", "tls", "tls_passthrough", "grpc", "grpcs", "udp"].includes(e.fields.protocol)), ke = b(() => {
-      if (_.value === "url")
+    }, 300), ge = Ue((e) => {
+      x(e ?? void 0);
+    }, 300), ye = h(() => (e) => {
+      const o = t.formFieldErrors;
+      return e === "url" ? o.host.length ? o.host : o.path.length ? o.path : o.url : o[e] ? o[e] : "";
+    }), Y = Ue((e) => {
+      x(e ?? void 0);
+      const o = le(t.fields.host);
+      o && (t.formFieldErrors.host = o);
+      const v = me(t.fields.path);
+      v && (t.formFieldErrors.path = v);
+      const T = pe(t.fields.port);
+      T && (t.formFieldErrors.port = T), Z.value ? n("url-valid:success") : n("url-valid:error", t.errorMessages.join(",") || "URL validation failed");
+    }, 300), x = (e) => {
+      e ? t.formFieldErrors[e] = "" : t.formFieldErrors = {
+        host: "",
+        port: "",
+        url: "",
+        path: "",
+        tags: "",
+        retries: "",
+        connect_timeout: "",
+        write_timeout: "",
+        read_timeout: "",
+        client_certificate: "",
+        ca_certificates: "",
+        tls_verify_enabled: "",
+        tls_verify_value: ""
+      }, t.errorMessages = [];
+    }, Z = h(() => Object.values(t.formFieldErrors).some((e) => e !== null && e !== "") && !ue.value), ee = () => {
+      t.fields.url && b.value === "url" ? ve() : Y();
+    }, re = () => `new-service-${(/* @__PURE__ */ new Date()).toISOString().replace(/\D/g, "").slice(0, 17)}`, _e = h(() => !["tcp", "tls", "tls_passthrough", "grpc", "grpcs", "udp"].includes(t.fields.protocol)), Te = h(() => {
+      if (b.value === "url")
         return !0;
-      const t = ["https", "wss", "tls"].includes(e.fields.protocol);
-      return _.value === "protocol" && t;
-    }), ne = b(() => {
-      if (_.value === "url")
+      const e = ["https", "wss", "tls"].includes(t.fields.protocol);
+      return b.value === "protocol" && e;
+    }), he = h(() => {
+      if (b.value === "url")
         return !0;
-      const t = ["https", "tls"].includes(e.fields.protocol);
-      return _.value === "protocol" && t;
-    }), Ce = b(() => {
-      if (_.value === "url")
+      const e = ["https", "tls"].includes(t.fields.protocol);
+      return b.value === "protocol" && e;
+    }), Pe = h(() => {
+      if (b.value === "url")
         return !0;
-      const t = ["https", "wss", "tls"].includes(e.fields.protocol);
-      return _.value === "protocol" && t;
-    }), Ve = (t) => {
-      G.value = ge.utf8Name(t);
-    }, le = b(() => z.value && JSON.stringify(e.fields) !== JSON.stringify(k) || _.value === "url" && !!e.fields.url || _.value === "protocol" && !!e.fields.host), ce = (t) => {
-      var i, v, R;
-      e.fields.name = (t == null ? void 0 : t.name) || "", e.fields.tags = ((i = t == null ? void 0 : t.tags) == null ? void 0 : i.join(", ")) || "", e.fields.protocol = (t == null ? void 0 : t.protocol) || "http", e.fields.path = (t == null ? void 0 : t.path) || "", e.fields.read_timeout = t != null && t.read_timeout || (t == null ? void 0 : t.read_timeout) === 0 ? t == null ? void 0 : t.read_timeout : 6e4, e.fields.retries = t != null && t.retries || (t == null ? void 0 : t.retries) === 0 ? t == null ? void 0 : t.retries : 5, e.fields.host = (t == null ? void 0 : t.host) || "", e.fields.connect_timeout = t != null && t.connect_timeout || (t == null ? void 0 : t.connect_timeout) === 0 ? t == null ? void 0 : t.connect_timeout : 6e4, e.fields.tls_verify_enabled = (t == null ? void 0 : t.tls_verify) !== "" && (t == null ? void 0 : t.tls_verify) !== null && (t == null ? void 0 : t.tls_verify) !== void 0, e.fields.tls_verify_value = t != null && t.tls_verify ? t == null ? void 0 : t.tls_verify : !1, e.fields.ca_certificates = ((v = t == null ? void 0 : t.ca_certificates) == null ? void 0 : v.join(",")) || "", e.fields.client_certificate = ((R = t == null ? void 0 : t.client_certificate) == null ? void 0 : R.id) || "", e.fields.write_timeout = t != null && t.write_timeout || (t == null ? void 0 : t.write_timeout) === 0 ? t == null ? void 0 : t.write_timeout : 6e4, e.fields.port = t != null && t.port || (t == null ? void 0 : t.port) === 0 ? t == null ? void 0 : t.port : 80, Object.assign(k, e.fields);
-    }, de = () => {
-      W.push(r.config.cancelRoute);
-    }, Se = b(() => {
-      var i, v;
-      let t = `${r.config.apiBaseUrl}${re.form[r.config.app].validate}`;
-      return r.config.app === g.Konnect ? t = t.replace(/{controlPlaneId}/gi, ((i = r.config) == null ? void 0 : i.controlPlaneId) || "") : r.config.app === g.KongManager && (t = t.replace(/\/{workspace}/gi, (v = r.config) != null && v.workspace ? `/${r.config.workspace}` : "")), t = t.replace(/{id}/gi, r.gatewayServiceId), t;
-    }), oe = b(() => {
-      var i, v;
-      let t = `${r.config.apiBaseUrl}${re.form[r.config.app][N.value]}`;
-      return r.config.app === g.Konnect ? t = t.replace(/{controlPlaneId}/gi, ((i = r.config) == null ? void 0 : i.controlPlaneId) || "") : r.config.app === g.KongManager && (t = t.replace(/\/{workspace}/gi, (v = r.config) != null && v.workspace ? `/${r.config.workspace}` : "")), t = t.replace(/{id}/gi, r.gatewayServiceId), t;
-    }), B = (t) => {
-      let i = "";
-      t.url && (i = new URL(t.url).protocol), (["https", "wss", "tls"].includes(t.protocol) || ["https", "wss", "tls"].includes(i)) && (t.tls_verify = t.tls_verify_enabled ? t.tls_verify_value : null), delete t.tls_verify_enabled, delete t.tls_verify_value;
-    }, q = b(() => {
-      var i, v, R, S;
-      const t = {
-        name: e.fields.name || null,
-        tags: e.fields.tags ? (R = (v = (i = e.fields.tags) == null ? void 0 : i.split(",")) == null ? void 0 : v.map((w) => String(w || "").trim())) == null ? void 0 : R.filter((w) => w !== "") : null,
-        protocol: e.fields.protocol,
-        path: e.fields.path || null,
-        read_timeout: e.fields.read_timeout,
-        retries: e.fields.retries,
-        host: e.fields.host,
-        connect_timeout: e.fields.connect_timeout,
-        tls_verify_value: e.fields.tls_verify_value,
-        tls_verify_enabled: e.fields.tls_verify_enabled,
-        ca_certificates: e.fields.ca_certificates ? (S = e.fields.ca_certificates) == null ? void 0 : S.split(",").filter((w) => w !== "") : null,
-        client_certificate: e.fields.client_certificate ? { id: e.fields.client_certificate } : null,
-        write_timeout: e.fields.write_timeout,
-        port: e.fields.port,
-        url: e.fields.url
+      const e = ["https", "wss", "tls"].includes(t.fields.protocol);
+      return b.value === "protocol" && e;
+    }), Ae = (e) => {
+      W.value = G.utf8Name(e);
+    }, H = h(() => j.value && JSON.stringify(t.fields) !== JSON.stringify(k) || b.value === "url" && !!t.fields.url && !Z.value || b.value === "protocol" && !!t.fields.host && !Z.value), se = (e) => {
+      var o, v, T;
+      t.fields.name = (e == null ? void 0 : e.name) || "", t.fields.tags = ((o = e == null ? void 0 : e.tags) == null ? void 0 : o.join(", ")) || "", t.fields.protocol = (e == null ? void 0 : e.protocol) || "http", t.fields.path = (e == null ? void 0 : e.path) || "", t.fields.read_timeout = e != null && e.read_timeout || (e == null ? void 0 : e.read_timeout) === 0 ? e == null ? void 0 : e.read_timeout : 6e4, t.fields.retries = e != null && e.retries || (e == null ? void 0 : e.retries) === 0 ? e == null ? void 0 : e.retries : 5, t.fields.host = (e == null ? void 0 : e.host) || "", t.fields.connect_timeout = e != null && e.connect_timeout || (e == null ? void 0 : e.connect_timeout) === 0 ? e == null ? void 0 : e.connect_timeout : 6e4, t.fields.tls_verify_enabled = (e == null ? void 0 : e.tls_verify) !== "" && (e == null ? void 0 : e.tls_verify) !== null && (e == null ? void 0 : e.tls_verify) !== void 0, t.fields.tls_verify_value = e != null && e.tls_verify ? e == null ? void 0 : e.tls_verify : !1, t.fields.ca_certificates = ((v = e == null ? void 0 : e.ca_certificates) == null ? void 0 : v.join(",")) || "", t.fields.client_certificate = ((T = e == null ? void 0 : e.client_certificate) == null ? void 0 : T.id) || "", t.fields.write_timeout = e != null && e.write_timeout || (e == null ? void 0 : e.write_timeout) === 0 ? e == null ? void 0 : e.write_timeout : 6e4, t.fields.port = e != null && e.port || (e == null ? void 0 : e.port) === 0 ? e == null ? void 0 : e.port : 80, Object.assign(k, t.fields);
+    }, u = () => {
+      q.push(r.config.cancelRoute);
+    }, m = h(() => {
+      var o, v;
+      let e = `${r.config.apiBaseUrl}${ce.form[r.config.app].validate}`;
+      return r.config.app === "konnect" ? e = e.replace(/{controlPlaneId}/gi, ((o = r.config) == null ? void 0 : o.controlPlaneId) || "") : r.config.app === "kongManager" && (e = e.replace(/\/{workspace}/gi, (v = r.config) != null && v.workspace ? `/${r.config.workspace}` : "")), e = e.replace(/{id}/gi, r.gatewayServiceId), e;
+    }), g = h(() => {
+      var o, v;
+      let e = `${r.config.apiBaseUrl}${ce.form[r.config.app][N.value]}`;
+      return r.config.app === "konnect" ? e = e.replace(/{controlPlaneId}/gi, ((o = r.config) == null ? void 0 : o.controlPlaneId) || "") : r.config.app === "kongManager" && (e = e.replace(/\/{workspace}/gi, (v = r.config) != null && v.workspace ? `/${r.config.workspace}` : "")), e = e.replace(/{id}/gi, r.gatewayServiceId), e;
+    }), F = (e) => {
+      let o = "";
+      e.url && (o = new URL(e.url).protocol), (["https", "wss", "tls"].includes(e.protocol) || ["https", "wss", "tls"].includes(o)) && (e.tls_verify = e.tls_verify_enabled ? e.tls_verify_value : null), delete e.tls_verify_enabled, delete e.tls_verify_value;
+    }, M = h(() => {
+      var o, v, T, y;
+      const e = {
+        name: t.fields.name || null,
+        tags: t.fields.tags ? (T = (v = (o = t.fields.tags) == null ? void 0 : o.split(",")) == null ? void 0 : v.map((w) => String(w || "").trim())) == null ? void 0 : T.filter((w) => w !== "") : null,
+        protocol: t.fields.protocol,
+        path: t.fields.path || null,
+        read_timeout: t.fields.read_timeout,
+        retries: t.fields.retries,
+        host: t.fields.host,
+        connect_timeout: t.fields.connect_timeout,
+        tls_verify_value: t.fields.tls_verify_value,
+        tls_verify_enabled: t.fields.tls_verify_enabled,
+        ca_certificates: t.fields.ca_certificates ? (y = t.fields.ca_certificates) == null ? void 0 : y.split(",").filter((w) => w !== "") : null,
+        client_certificate: t.fields.client_certificate ? { id: t.fields.client_certificate } : null,
+        write_timeout: t.fields.write_timeout,
+        port: t.fields.port,
+        url: t.fields.url
       };
-      return e.fields.client_certificate && ["https", "wss", "tls"].includes(e.fields.protocol) && (t.client_certificate = { id: e.fields.client_certificate }), e.fields.tls_verify_enabled && ["https", "wss", "tls"].includes(e.fields.protocol) && (t.tls_verify = e.fields.tls_verify_value), X.value || (t.path = null), N.value === "create" ? _.value === "url" ? (delete t.protocol, delete t.host, delete t.path, r.config.app === g.Konnect && delete t.port) : delete t.url : N.value === "edit" && delete t.url, t;
-    }), H = async () => {
-      var t, i, v, R;
+      return t.fields.client_certificate && ["https", "wss", "tls"].includes(t.fields.protocol) && (e.client_certificate = { id: t.fields.client_certificate }), t.fields.tls_verify_enabled && ["https", "wss", "tls"].includes(t.fields.protocol) && (e.tls_verify = t.fields.tls_verify_value), _e.value || (e.path = null), N.value === "create" ? b.value === "url" ? (delete e.protocol, delete e.host, delete e.path, r.config.app === "konnect" && delete e.port) : delete e.url : N.value === "edit" && delete e.url, e;
+    }), R = async () => {
+      var e, o, v, T;
       try {
-        e.isReadonly = !0, E();
-        const S = q.value;
-        B(S);
+        t.isReadonly = !0, ee();
+        const y = M.value;
+        F(y);
         let w;
-        if (await V.post(Se.value, S), N.value === "create" ? w = await V.post(oe.value, S) : N.value === "edit" && (w = ((t = r.config) == null ? void 0 : t.app) === g.Konnect ? await V.put(oe.value, S) : await V.patch(oe.value, S)), w) {
-          const { data: o } = w;
-          e.fields.name = (o == null ? void 0 : o.name) || "", e.fields.port = o.port || ee.getPortFromProtocol(o.protocol), e.fields.protocol = (o == null ? void 0 : o.protocol) || "http", e.fields.host = (o == null ? void 0 : o.host) || "", e.fields.path = (o == null ? void 0 : o.path) || "", e.fields.url = (o == null ? void 0 : o.url) || "", e.fields.retries = o != null && o.retries || (o == null ? void 0 : o.retries) === 0 ? o == null ? void 0 : o.retries : 5, e.fields.connect_timeout = o != null && o.connect_timeout || (o == null ? void 0 : o.connect_timeout) === 0 ? o == null ? void 0 : o.connect_timeout : 6e4, e.fields.write_timeout = o != null && o.write_timeout || (o == null ? void 0 : o.write_timeout) === 0 ? o == null ? void 0 : o.write_timeout : 6e4, e.fields.read_timeout = o != null && o.read_timeout || (o == null ? void 0 : o.read_timeout) === 0 ? o == null ? void 0 : o.read_timeout : 6e4, e.fields.client_certificate = ((i = o == null ? void 0 : o.client_certificate) == null ? void 0 : i.id) || "", e.fields.ca_certificates = (v = o == null ? void 0 : o.ca_certificates) != null && v.length ? o == null ? void 0 : o.ca_certificates.join(",") : "", e.fields.tls_verify_enabled = (o == null ? void 0 : o.tls_verify) !== "" && (o == null ? void 0 : o.tls_verify) !== null && (o == null ? void 0 : o.tls_verify) !== void 0, e.fields.tls_verify_value = e.fields.tls_verify_enabled && (o == null ? void 0 : o.tls_verify), e.fields.tags = (R = o == null ? void 0 : o.tags) != null && R.length ? o.tags.join(", ") : "", Object.assign(k, e.fields), c("update", w == null ? void 0 : w.data);
+        if (await _.post(m.value, y), N.value === "create" ? w = await _.post(g.value, y) : N.value === "edit" && (w = ((e = r.config) == null ? void 0 : e.app) === "konnect" ? await _.put(g.value, y) : await _.patch(g.value, y)), w) {
+          const { data: l } = w;
+          t.fields.name = (l == null ? void 0 : l.name) || "", t.fields.port = l.port || ie.getPortFromProtocol(l.protocol), t.fields.protocol = (l == null ? void 0 : l.protocol) || "http", t.fields.host = (l == null ? void 0 : l.host) || "", t.fields.path = (l == null ? void 0 : l.path) || "", t.fields.url = (l == null ? void 0 : l.url) || "", t.fields.retries = l != null && l.retries || (l == null ? void 0 : l.retries) === 0 ? l == null ? void 0 : l.retries : 5, t.fields.connect_timeout = l != null && l.connect_timeout || (l == null ? void 0 : l.connect_timeout) === 0 ? l == null ? void 0 : l.connect_timeout : 6e4, t.fields.write_timeout = l != null && l.write_timeout || (l == null ? void 0 : l.write_timeout) === 0 ? l == null ? void 0 : l.write_timeout : 6e4, t.fields.read_timeout = l != null && l.read_timeout || (l == null ? void 0 : l.read_timeout) === 0 ? l == null ? void 0 : l.read_timeout : 6e4, t.fields.client_certificate = ((o = l == null ? void 0 : l.client_certificate) == null ? void 0 : o.id) || "", t.fields.ca_certificates = (v = l == null ? void 0 : l.ca_certificates) != null && v.length ? l == null ? void 0 : l.ca_certificates.join(",") : "", t.fields.tls_verify_enabled = (l == null ? void 0 : l.tls_verify) !== "" && (l == null ? void 0 : l.tls_verify) !== null && (l == null ? void 0 : l.tls_verify) !== void 0, t.fields.tls_verify_value = t.fields.tls_verify_enabled && (l == null ? void 0 : l.tls_verify), t.fields.tags = (T = l == null ? void 0 : l.tags) != null && T.length ? l.tags.join(", ") : "", Object.assign(k, t.fields), n("update", w == null ? void 0 : w.data);
         }
         return w;
-      } catch (S) {
-        e.errorMessage = U(S), c("error", S);
+      } catch (y) {
+        const { fields: w, messages: l } = A(y);
+        t.errorMessages = l, w.length && w.forEach((Q) => {
+          const te = Q.field;
+          te === "client_certificate.id" ? t.formFieldErrors.client_certificate = Q.message : te === "ca_certificates[0]" ? t.formFieldErrors.ca_certificates = Q.message : Object.keys(t.formFieldErrors).includes(te) && (t.formFieldErrors = {
+            ...t.formFieldErrors,
+            [te]: Q.message
+          });
+        }), n("error", y);
       } finally {
-        e.isReadonly = !1;
+        t.isReadonly = !1;
       }
     };
-    return Te(() => r.gatewayServiceId, () => {
-      Object.assign(e.fields, k);
-    }), Te(e.fields, (t) => {
-      e.fields.port = ee.getPortFromProtocol(t.protocol, String(t.port)), c("model-updated", q.value);
-    }), De(() => {
-      c("model-updated", q.value);
-    }), D({
-      validateUrl: E,
-      getPayload: q,
-      saveFormData: H,
-      canSubmit: le,
-      initForm: ce
-    }), (t, i) => {
-      const v = F("KInput"), R = F("KLabel"), S = F("KRadio"), w = F("KSelect"), o = F("KCheckbox"), u = F("KCollapse");
-      return I(), K("div", It, [
-        d(l(rt), {
-          "can-submit": le.value,
-          config: n.config,
-          "edit-id": n.gatewayServiceId,
-          "entity-type": l(Ae).GatewayService,
-          "error-message": e.errorMessage,
-          "fetch-url": _e.value,
-          "form-fields": q.value,
-          "is-readonly": e.isReadonly,
-          onCancel: de,
-          "onFetch:error": i[25] || (i[25] = (s) => t.$emit("error", s)),
-          "onFetch:success": ce,
-          onLoading: i[26] || (i[26] = (s) => t.$emit("loading", s)),
-          onSubmit: H
+    return xe(() => r.gatewayServiceId, () => {
+      Object.assign(t.fields, k);
+    }), xe(t.fields, (e) => {
+      t.fields.port = ie.getPortFromProtocol(e.protocol, String(e.port)), n("model-updated", M.value);
+    }), Je(() => {
+      n("model-updated", M.value), j.value || (t.fields.name = re());
+    }), I({
+      validateUrl: ee,
+      getPayload: M,
+      saveFormData: R,
+      canSubmit: H,
+      initForm: se
+    }), (e, o) => {
+      const v = D("KRadio"), T = D("KButton"), y = D("KInput"), w = D("KSelect"), l = D("KCheckbox"), Q = D("KCollapse"), te = D("KAlert");
+      return C(), P("div", Wt, [
+        c(i(_t), {
+          "can-submit": H.value,
+          config: a.config,
+          "edit-id": a.gatewayServiceId,
+          "entity-type": i(ze).GatewayService,
+          "fetch-url": oe.value,
+          "form-fields": M.value,
+          "is-readonly": t.isReadonly,
+          onCancel: u,
+          "onFetch:error": o[30] || (o[30] = (f) => e.$emit("error", f)),
+          "onFetch:success": se,
+          onLoading: o[31] || (o[31] = (f) => e.$emit("loading", f)),
+          onSubmit: R
         }, {
-          "form-actions": f(() => [
-            Ge(t.$slots, "form-actions", {
-              canSubmit: le.value,
-              cancel: de,
-              submit: H
+          "form-actions": d(() => [
+            Qe(e.$slots, "form-actions", {
+              canSubmit: H.value,
+              cancel: u,
+              submit: R
             }, void 0, !0)
           ]),
-          default: f(() => [
-            d(l(Me), {
-              description: l(a)("gateway_services.form.sections.general.description"),
-              "hide-info-header": n.hideSectionsInfo,
-              title: l(a)("gateway_services.form.sections.general.title")
+          default: d(() => [
+            c(i(We), {
+              description: i(s)("gateway_services.form.sections.keys.description"),
+              "hide-info-header": a.hideSectionsInfo,
+              title: i(s)("gateway_services.form.sections.keys.title")
             }, {
-              default: f(() => [
-                d(v, {
-                  modelValue: e.fields.name,
-                  "onUpdate:modelValue": i[0] || (i[0] = (s) => e.fields.name = s),
-                  modelModifiers: { trim: !0 },
-                  autocomplete: "off",
-                  "data-testid": "gateway-service-name-input",
-                  error: he.value,
-                  "error-message": G.value,
-                  label: l(a)("gateway_services.form.fields.name.label"),
-                  "label-attributes": {
-                    info: l(a)("gateway_services.form.fields.name.tooltip"),
-                    tooltipAttributes: { maxWidth: "400" }
-                  },
-                  name: "name",
-                  placeholder: l(a)("gateway_services.form.fields.name.placeholder"),
-                  readonly: e.isReadonly,
-                  type: "text",
-                  onInput: Ve
-                }, null, 8, ["modelValue", "error", "error-message", "label", "label-attributes", "placeholder", "readonly"]),
-                d(v, {
-                  modelValue: e.fields.tags,
-                  "onUpdate:modelValue": i[1] || (i[1] = (s) => e.fields.tags = s),
-                  modelModifiers: { trim: !0 },
-                  autocomplete: "off",
-                  "data-testid": "gateway-service-tags-input",
-                  help: l(a)("gateway_services.form.fields.tags.help"),
-                  label: l(a)("gateway_services.form.fields.tags.label"),
-                  "label-attributes": {
-                    info: l(a)("gateway_services.form.fields.tags.tooltip"),
-                    tooltipAttributes: { maxWidth: "400" }
-                  },
-                  name: "tags",
-                  placeholder: l(a)("gateway_services.form.fields.tags.placeholder"),
-                  readonly: e.isReadonly,
-                  type: "text"
-                }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"])
-              ]),
-              _: 1
-            }, 8, ["description", "hide-info-header", "title"]),
-            d(l(Me), {
-              description: l(a)("gateway_services.form.sections.keys.description"),
-              "hide-info-header": n.hideSectionsInfo,
-              title: l(a)("gateway_services.form.sections.keys.title")
-            }, {
-              default: f(() => [
-                z.value ? L("", !0) : (I(), K("div", Tt, [
-                  C("div", Et, [
-                    d(R, { required: "" }, {
-                      default: f(() => [
-                        M(h(l(a)("gateway_services.form.sections.keys.checkedGroupLabel")), 1)
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  C("div", Pt, [
-                    d(S, {
-                      modelValue: _.value,
-                      "onUpdate:modelValue": i[2] || (i[2] = (s) => _.value = s),
+              default: d(() => [
+                j.value ? B("", !0) : (C(), P("div", Ot, [
+                  S("div", Nt, [
+                    c(v, {
+                      modelValue: b.value,
+                      "onUpdate:modelValue": o[0] || (o[0] = (f) => b.value = f),
+                      card: "",
+                      "card-orientation": "horizontal",
                       "data-testid": "gateway-service-url-radio",
-                      "selected-value": ae.url,
-                      onChange: Q
-                    }, {
-                      default: f(() => [
-                        M(h(l(a)("gateway_services.form.sections.keys.urlLabel")), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["modelValue", "selected-value"])
+                      description: i(s)("gateway_services.form.sections.keys.url.description"),
+                      label: i(s)("gateway_services.form.sections.keys.url.label"),
+                      "selected-value": z.url,
+                      onChange: X
+                    }, null, 8, ["modelValue", "description", "label", "selected-value"]),
+                    c(v, {
+                      modelValue: b.value,
+                      "onUpdate:modelValue": o[1] || (o[1] = (f) => b.value = f),
+                      card: "",
+                      "card-orientation": "horizontal",
+                      "checked-group": "protocol",
+                      "data-testid": "gateway-service-protocol-radio",
+                      description: i(s)("gateway_services.form.sections.keys.protocol.description"),
+                      label: i(s)("gateway_services.form.sections.keys.protocol.label"),
+                      "selected-value": z.protocol,
+                      onChange: X
+                    }, null, 8, ["modelValue", "description", "label", "selected-value"])
                   ]),
-                  _.value === "url" ? (I(), K("div", Ut, [
-                    d(v, {
-                      modelValue: e.fields.url,
-                      "onUpdate:modelValue": i[3] || (i[3] = (s) => e.fields.url = s),
-                      modelModifiers: { trim: !0 },
-                      class: "gateway-service-url-input gateway-service-form-margin-bottom",
-                      "data-testid": "gateway-service-url-input",
-                      label: l(a)("gateway_services.form.fields.upstream_url.label"),
-                      "label-attributes": {
-                        info: n.config.app === l(g).Konnect ? l(a)("gateway_services.form.fields.upstream_url.tooltip_for_konnect") : l(a)("gateway_services.form.fields.upstream_url.tooltip_for_km"),
-                        tooltipAttributes: { maxWidth: "400" }
-                      },
-                      name: "url",
-                      placeholder: l(a)("gateway_services.form.fields.upstream_url.placeholder"),
-                      required: ""
-                    }, null, 8, ["modelValue", "label", "label-attributes", "placeholder"])
-                  ])) : L("", !0),
-                  d(S, {
-                    modelValue: _.value,
-                    "onUpdate:modelValue": i[4] || (i[4] = (s) => _.value = s),
-                    "checked-group": "protocol",
-                    "data-testid": "gateway-service-protocol-radio",
-                    "selected-value": ae.protocol,
-                    onChange: Q
-                  }, {
-                    default: f(() => [
-                      M(h(l(a)("gateway_services.form.sections.keys.checkedGroupAltLabel")), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "selected-value"])
-                ])),
-                _.value === "protocol" || z.value ? (I(), K("div", Kt, [
-                  d(w, {
-                    modelValue: e.fields.protocol,
-                    "onUpdate:modelValue": i[5] || (i[5] = (s) => e.fields.protocol = s),
-                    "data-testid": "gateway-service-protocol-select",
-                    items: we,
-                    label: l(a)("gateway_services.form.fields.protocol.label"),
-                    "label-attributes": {
-                      info: l(a)("gateway_services.form.fields.protocol.tooltip"),
-                      tooltipAttributes: { maxWidth: "400" }
-                    },
-                    readonly: e.isReadonly,
-                    required: "",
-                    width: "100%",
-                    onSelected: i[6] || (i[6] = (s) => J(e.fields.protocol, s))
-                  }, null, 8, ["modelValue", "label", "label-attributes", "readonly"]),
-                  d(v, {
-                    modelValue: e.fields.host,
-                    "onUpdate:modelValue": i[7] || (i[7] = (s) => e.fields.host = s),
-                    modelModifiers: { trim: !0 },
-                    class: "gateway-service-form-margin-top",
-                    "data-testid": "gateway-service-host-input",
-                    label: l(a)("gateway_services.form.fields.host.label"),
-                    "label-attributes": {
-                      info: l(a)("gateway_services.form.fields.host.tooltip"),
-                      tooltipAttributes: { maxWidth: "400" }
-                    },
-                    name: "host",
-                    placeholder: l(a)("gateway_services.form.fields.host.placeholder"),
-                    required: ""
-                  }, null, 8, ["modelValue", "label", "label-attributes", "placeholder"]),
-                  X.value ? (I(), K("div", Rt, [
-                    d(v, {
-                      modelValue: e.fields.path,
-                      "onUpdate:modelValue": i[8] || (i[8] = (s) => e.fields.path = s),
-                      modelModifiers: { trim: !0 },
-                      class: "gateway-service-form-margin-top",
-                      "data-testid": "gateway-service-path-input",
-                      label: l(a)("gateway_services.form.fields.path.label"),
-                      "label-attributes": {
-                        info: l(a)("gateway_services.form.fields.path.tooltip"),
-                        tooltipAttributes: { maxWidth: "400" }
-                      },
-                      name: "path",
-                      placeholder: l(a)("gateway_services.form.fields.path.placeholder")
-                    }, null, 8, ["modelValue", "label", "label-attributes", "placeholder"])
-                  ])) : L("", !0),
-                  d(v, {
-                    modelValue: e.fields.port,
-                    "onUpdate:modelValue": [
-                      i[9] || (i[9] = (s) => e.fields.port = s),
-                      i[10] || (i[10] = () => {
-                        e.fields.port = j(e.fields.port + "");
-                      })
-                    ],
-                    class: "gateway-service-form-margin-top",
-                    "data-testid": "gateway-service-port-input",
-                    label: l(a)("gateway_services.form.fields.port.label"),
-                    "label-attributes": {
-                      info: l(a)("gateway_services.form.fields.port.tooltip"),
-                      tooltipAttributes: { maxWidth: "400" }
-                    },
-                    name: "port",
-                    type: "number"
-                  }, null, 8, ["modelValue", "label", "label-attributes"])
-                ])) : L("", !0),
-                d(u, {
-                  modelValue: $.value,
-                  "onUpdate:modelValue": i[24] || (i[24] = (s) => $.value = s),
-                  "data-testid": "advanced-fields-collapse",
-                  "trigger-alignment": "leading",
-                  "trigger-label": l(a)("gateway_services.form.sections.keys.viewAdvancedFields")
-                }, {
-                  default: f(() => [
-                    C("div", Mt, [
-                      C("div", $t, [
-                        d(v, {
-                          modelValue: e.fields.retries,
-                          "onUpdate:modelValue": [
-                            i[11] || (i[11] = (s) => e.fields.retries = s),
-                            i[12] || (i[12] = () => {
-                              e.fields.retries = j(e.fields.retries + "");
-                            })
-                          ],
-                          autocomplete: "off",
-                          "data-testid": "gateway-service-retries-input",
-                          label: l(a)("gateway_services.form.fields.retries.label"),
-                          "label-attributes": {
-                            info: l(a)("gateway_services.form.fields.retries.tooltip"),
-                            tooltipAttributes: { maxWidth: "400" }
-                          },
-                          name: "retries",
-                          readonly: e.isReadonly,
-                          type: "number"
-                        }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
-                      ]),
-                      C("div", xt, [
-                        d(v, {
-                          modelValue: e.fields.connect_timeout,
-                          "onUpdate:modelValue": [
-                            i[13] || (i[13] = (s) => e.fields.connect_timeout = s),
-                            i[14] || (i[14] = () => {
-                              e.fields.connect_timeout = j(e.fields.connect_timeout + "");
-                            })
-                          ],
-                          autocomplete: "off",
-                          "data-testid": "gateway-service-connTimeout-input",
-                          label: l(a)("gateway_services.form.fields.connect_timeout.label"),
-                          "label-attributes": {
-                            info: l(a)("gateway_services.form.fields.connect_timeout.tooltip"),
-                            tooltipAttributes: { maxWidth: "400" }
-                          },
-                          name: "connTimeout",
-                          readonly: e.isReadonly,
-                          type: "number"
-                        }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
-                      ]),
-                      C("div", At, [
-                        d(v, {
-                          modelValue: e.fields.write_timeout,
-                          "onUpdate:modelValue": [
-                            i[15] || (i[15] = (s) => e.fields.write_timeout = s),
-                            i[16] || (i[16] = () => {
-                              e.fields.write_timeout = j(e.fields.write_timeout + "");
-                            })
-                          ],
-                          autocomplete: "off",
-                          "data-testid": "gateway-service-writeTimeout-input",
-                          label: l(a)("gateway_services.form.fields.write_timeout.label"),
-                          "label-attributes": {
-                            info: l(a)("gateway_services.form.fields.write_timeout.tooltip"),
-                            tooltipAttributes: { maxWidth: "400" }
-                          },
-                          name: "writeTimeout",
-                          readonly: e.isReadonly,
-                          type: "number"
-                        }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
-                      ]),
-                      C("div", Ft, [
-                        d(v, {
-                          modelValue: e.fields.read_timeout,
-                          "onUpdate:modelValue": [
-                            i[17] || (i[17] = (s) => e.fields.read_timeout = s),
-                            i[18] || (i[18] = () => {
-                              e.fields.read_timeout = j(e.fields.read_timeout + "");
-                            })
-                          ],
-                          autocomplete: "off",
-                          "data-testid": "gateway-service-readTimeout-input",
-                          label: l(a)("gateway_services.form.fields.read_timeout.label"),
+                  c($e, { name: "slide-fade" }, {
+                    default: d(() => [
+                      b.value === "url" ? (C(), P("div", Gt, [
+                        c(y, {
+                          modelValue: t.fields.url,
+                          "onUpdate:modelValue": o[2] || (o[2] = (f) => t.fields.url = f),
+                          modelModifiers: { trim: !0 },
+                          class: "gateway-service-url-input gateway-service-form-margin-bottom",
+                          "data-testid": "gateway-service-url-input",
+                          error: ye.value("url").length > 0,
+                          "error-message": t.errorMessages.length == 0 ? ye.value("url") : void 0,
+                          label: i(s)("gateway_services.form.fields.upstream_url.label"),
                           "label-attributes": {
-                            info: l(a)("gateway_services.form.fields.read_timeout.tooltip"),
+                            info: a.config.app === "konnect" ? i(s)("gateway_services.form.fields.upstream_url.tooltip_for_konnect") : i(s)("gateway_services.form.fields.upstream_url.tooltip_for_km"),
                             tooltipAttributes: { maxWidth: "400" }
                           },
-                          name: "readTimeout",
-                          readonly: e.isReadonly,
-                          type: "number"
-                        }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
-                      ]),
-                      ke.value ? (I(), K("div", Bt, [
-                        d(v, {
-                          modelValue: e.fields.client_certificate,
-                          "onUpdate:modelValue": i[19] || (i[19] = (s) => e.fields.client_certificate = s),
+                          name: "url",
+                          placeholder: i(s)("gateway_services.form.fields.upstream_url.placeholder"),
+                          required: "",
+                          onInput: i(ve)
+                        }, Ne({ _: 2 }, [
+                          a.hideTrySampleApiButton ? void 0 : {
+                            name: "after",
+                            fn: d(() => [
+                              c(T, {
+                                appearance: "tertiary",
+                                size: "small",
+                                onClick: Ie
+                              }, {
+                                default: d(() => o[32] || (o[32] = [
+                                  L(" Try Sample API ")
+                                ])),
+                                _: 1
+                              })
+                            ]),
+                            key: "0"
+                          }
+                        ]), 1032, ["modelValue", "error", "error-message", "label", "label-attributes", "placeholder", "onInput"])
+                      ])) : B("", !0)
+                    ]),
+                    _: 1
+                  })
+                ])),
+                c($e, { name: "slide-fade" }, {
+                  default: d(() => [
+                    b.value === "protocol" || j.value ? (C(), P("div", jt, [
+                      c(w, {
+                        modelValue: t.fields.protocol,
+                        "onUpdate:modelValue": o[3] || (o[3] = (f) => t.fields.protocol = f),
+                        "data-testid": "gateway-service-protocol-select",
+                        items: fe,
+                        label: i(s)("gateway_services.form.fields.protocol.label"),
+                        "label-attributes": {
+                          info: i(s)("gateway_services.form.fields.protocol.tooltip"),
+                          tooltipAttributes: { maxWidth: "400" }
+                        },
+                        readonly: t.isReadonly,
+                        required: "",
+                        width: "100%",
+                        onSelected: o[4] || (o[4] = (f) => Ee(t.fields.protocol, f))
+                      }, null, 8, ["modelValue", "label", "label-attributes", "readonly"]),
+                      c(y, {
+                        modelValue: t.fields.host,
+                        "onUpdate:modelValue": o[5] || (o[5] = (f) => t.fields.host = f),
+                        modelModifiers: { trim: !0 },
+                        class: "gateway-service-form-margin-top",
+                        "data-testid": "gateway-service-host-input",
+                        error: t.formFieldErrors.host.length > 0,
+                        "error-message": t.formFieldErrors.host,
+                        label: i(s)("gateway_services.form.fields.host.label"),
+                        "label-attributes": {
+                          info: i(s)("gateway_services.form.fields.host.tooltip"),
+                          tooltipAttributes: { maxWidth: "400" }
+                        },
+                        name: "host",
+                        placeholder: i(s)("gateway_services.form.fields.host.placeholder"),
+                        required: "",
+                        onInput: o[6] || (o[6] = (f) => i(Y)("host"))
+                      }, null, 8, ["modelValue", "error", "error-message", "label", "label-attributes", "placeholder"]),
+                      _e.value ? (C(), P("div", zt, [
+                        c(y, {
+                          modelValue: t.fields.path,
+                          "onUpdate:modelValue": o[7] || (o[7] = (f) => t.fields.path = f),
                           modelModifiers: { trim: !0 },
-                          autocomplete: "off",
-                          "data-testid": "gateway-service-clientCert-input",
-                          label: l(a)("gateway_services.form.fields.client_certificate.label"),
+                          class: "gateway-service-form-margin-top",
+                          "data-testid": "gateway-service-path-input",
+                          error: t.formFieldErrors.path.length > 0,
+                          "error-message": t.formFieldErrors.path,
+                          label: i(s)("gateway_services.form.fields.path.label"),
                           "label-attributes": {
-                            info: l(a)("gateway_services.form.fields.client_certificate.tooltip"),
+                            info: i(s)("gateway_services.form.fields.path.tooltip"),
                             tooltipAttributes: { maxWidth: "400" }
                           },
-                          name: "clientCert",
-                          placeholder: l(a)("gateway_services.form.fields.client_certificate.placeholder"),
-                          readonly: e.isReadonly,
-                          type: "text"
-                        }, null, 8, ["modelValue", "label", "label-attributes", "placeholder", "readonly"])
-                      ])) : L("", !0),
-                      ne.value ? (I(), K("div", Lt, [
-                        d(v, {
-                          modelValue: e.fields.ca_certificates,
-                          "onUpdate:modelValue": i[20] || (i[20] = (s) => e.fields.ca_certificates = s),
-                          modelModifiers: { trim: !0 },
-                          autocomplete: "off",
-                          "data-testid": "gateway-service-ca-certs-input",
-                          label: l(a)("gateway_services.form.fields.ca_certificates.label"),
-                          "label-attributes": { tooltipAttributes: { maxWidth: "400" } },
-                          placeholder: l(a)("gateway_services.form.fields.ca_certificates.placeholder"),
-                          readonly: e.isReadonly,
-                          type: "text"
-                        }, {
-                          "label-tooltip": f(() => [
-                            d(l(O), {
-                              keypath: "gateway_services.form.fields.ca_certificates.tooltip",
-                              scope: "global"
+                          name: "path",
+                          placeholder: i(s)("gateway_services.form.fields.path.placeholder"),
+                          onInput: o[8] || (o[8] = (f) => i(Y)("path"))
+                        }, null, 8, ["modelValue", "error", "error-message", "label", "label-attributes", "placeholder"])
+                      ])) : B("", !0),
+                      c(y, {
+                        modelValue: t.fields.port,
+                        "onUpdate:modelValue": [
+                          o[9] || (o[9] = (f) => t.fields.port = f),
+                          o[11] || (o[11] = () => {
+                            t.fields.port = O(t.fields.port + "");
+                          })
+                        ],
+                        class: "gateway-service-form-margin-top",
+                        "data-testid": "gateway-service-port-input",
+                        error: t.formFieldErrors.port.length > 0,
+                        "error-message": t.formFieldErrors.port,
+                        label: i(s)("gateway_services.form.fields.port.label"),
+                        "label-attributes": {
+                          info: i(s)("gateway_services.form.fields.port.tooltip"),
+                          tooltipAttributes: { maxWidth: "400" }
+                        },
+                        name: "port",
+                        type: "number",
+                        onInput: o[10] || (o[10] = (f) => i(Y)("port"))
+                      }, null, 8, ["modelValue", "error", "error-message", "label", "label-attributes"])
+                    ])) : B("", !0)
+                  ]),
+                  _: 1
+                }),
+                c(Q, {
+                  modelValue: V.value,
+                  "onUpdate:modelValue": o[27] || (o[27] = (f) => V.value = f),
+                  "data-testid": "advanced-fields-collapse",
+                  "trigger-alignment": "leading",
+                  "trigger-label": i(s)("gateway_services.form.sections.keys.viewAdvancedFields")
+                }, {
+                  default: d(() => [
+                    c($e, { name: "slide-fade" }, {
+                      default: d(() => [
+                        V.value ? B("", !0) : (C(), P("div", Zt, [
+                          S("div", Ht, [
+                            c(y, {
+                              modelValue: t.fields.retries,
+                              "onUpdate:modelValue": [
+                                o[12] || (o[12] = (f) => t.fields.retries = f),
+                                o[13] || (o[13] = () => {
+                                  t.fields.retries = O(t.fields.retries + "");
+                                })
+                              ],
+                              autocomplete: "off",
+                              "data-testid": "gateway-service-retries-input",
+                              label: i(s)("gateway_services.form.fields.retries.label"),
+                              "label-attributes": {
+                                info: i(s)("gateway_services.form.fields.retries.tooltip"),
+                                tooltipAttributes: { maxWidth: "400" }
+                              },
+                              name: "retries",
+                              readonly: t.isReadonly,
+                              type: "number"
+                            }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
+                          ]),
+                          S("div", Jt, [
+                            c(y, {
+                              modelValue: t.fields.connect_timeout,
+                              "onUpdate:modelValue": [
+                                o[14] || (o[14] = (f) => t.fields.connect_timeout = f),
+                                o[15] || (o[15] = () => {
+                                  t.fields.connect_timeout = O(t.fields.connect_timeout + "");
+                                })
+                              ],
+                              autocomplete: "off",
+                              "data-testid": "gateway-service-connTimeout-input",
+                              label: i(s)("gateway_services.form.fields.connect_timeout.label"),
+                              "label-attributes": {
+                                info: i(s)("gateway_services.form.fields.connect_timeout.tooltip"),
+                                tooltipAttributes: { maxWidth: "400" }
+                              },
+                              name: "connTimeout",
+                              readonly: t.isReadonly,
+                              type: "number"
+                            }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
+                          ]),
+                          S("div", Qt, [
+                            c(y, {
+                              modelValue: t.fields.write_timeout,
+                              "onUpdate:modelValue": [
+                                o[16] || (o[16] = (f) => t.fields.write_timeout = f),
+                                o[17] || (o[17] = () => {
+                                  t.fields.write_timeout = O(t.fields.write_timeout + "");
+                                })
+                              ],
+                              autocomplete: "off",
+                              "data-testid": "gateway-service-writeTimeout-input",
+                              label: i(s)("gateway_services.form.fields.write_timeout.label"),
+                              "label-attributes": {
+                                info: i(s)("gateway_services.form.fields.write_timeout.tooltip"),
+                                tooltipAttributes: { maxWidth: "400" }
+                              },
+                              name: "writeTimeout",
+                              readonly: t.isReadonly,
+                              type: "number"
+                            }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
+                          ]),
+                          S("div", Xt, [
+                            c(y, {
+                              modelValue: t.fields.read_timeout,
+                              "onUpdate:modelValue": [
+                                o[18] || (o[18] = (f) => t.fields.read_timeout = f),
+                                o[19] || (o[19] = () => {
+                                  t.fields.read_timeout = O(t.fields.read_timeout + "");
+                                })
+                              ],
+                              autocomplete: "off",
+                              "data-testid": "gateway-service-readTimeout-input",
+                              label: i(s)("gateway_services.form.fields.read_timeout.label"),
+                              "label-attributes": {
+                                info: i(s)("gateway_services.form.fields.read_timeout.tooltip"),
+                                tooltipAttributes: { maxWidth: "400" }
+                              },
+                              name: "readTimeout",
+                              readonly: t.isReadonly,
+                              type: "number"
+                            }, null, 8, ["modelValue", "label", "label-attributes", "readonly"])
+                          ]),
+                          Te.value ? (C(), P("div", Yt, [
+                            c(y, {
+                              modelValue: t.fields.client_certificate,
+                              "onUpdate:modelValue": o[20] || (o[20] = (f) => t.fields.client_certificate = f),
+                              modelModifiers: { trim: !0 },
+                              autocomplete: "off",
+                              "data-testid": "gateway-service-clientCert-input",
+                              error: t.formFieldErrors.client_certificate.length > 0,
+                              label: i(s)("gateway_services.form.fields.client_certificate.label"),
+                              "label-attributes": {
+                                info: i(s)("gateway_services.form.fields.client_certificate.tooltip"),
+                                tooltipAttributes: { maxWidth: "400" }
+                              },
+                              name: "clientCert",
+                              placeholder: i(s)("gateway_services.form.fields.client_certificate.placeholder"),
+                              readonly: t.isReadonly,
+                              type: "text",
+                              onInput: o[21] || (o[21] = (f) => i(ge)("client_certificate"))
+                            }, null, 8, ["modelValue", "error", "label", "label-attributes", "placeholder", "readonly"])
+                          ])) : B("", !0),
+                          he.value ? (C(), P("div", eo, [
+                            c(y, {
+                              modelValue: t.fields.ca_certificates,
+                              "onUpdate:modelValue": o[22] || (o[22] = (f) => t.fields.ca_certificates = f),
+                              modelModifiers: { trim: !0 },
+                              autocomplete: "off",
+                              "data-testid": "gateway-service-ca-certs-input",
+                              error: t.formFieldErrors.ca_certificates.length > 0,
+                              label: i(s)("gateway_services.form.fields.ca_certificates.label"),
+                              "label-attributes": { tooltipAttributes: { maxWidth: "400" } },
+                              placeholder: i(s)("gateway_services.form.fields.ca_certificates.placeholder"),
+                              readonly: t.isReadonly,
+                              type: "text",
+                              onInput: o[23] || (o[23] = (f) => i(ge)("ca_certificates"))
                             }, {
-                              code1: f(() => [
-                                C("code", null, h(l(a)("gateway_services.form.fields.ca_certificates.code1")), 1)
-                              ]),
-                              code2: f(() => [
-                                C("code", null, h(l(a)("gateway_services.form.fields.ca_certificates.code2")), 1)
+                              "label-tooltip": d(() => [
+                                c(i(K), {
+                                  keypath: "gateway_services.form.fields.ca_certificates.tooltip",
+                                  scope: "global"
+                                }, {
+                                  code1: d(() => [
+                                    S("code", null, E(i(s)("gateway_services.form.fields.ca_certificates.code1")), 1)
+                                  ]),
+                                  code2: d(() => [
+                                    S("code", null, E(i(s)("gateway_services.form.fields.ca_certificates.code2")), 1)
+                                  ]),
+                                  _: 1
+                                })
                               ]),
                               _: 1
-                            })
-                          ]),
-                          _: 1
-                        }, 8, ["modelValue", "label", "placeholder", "readonly"])
-                      ])) : L("", !0),
-                      Ce.value ? (I(), K("div", Dt, [
-                        d(o, {
-                          modelValue: e.fields.tls_verify_enabled,
-                          "onUpdate:modelValue": i[21] || (i[21] = (s) => e.fields.tls_verify_enabled = s),
-                          "data-testid": "gateway-service-tls-verify-checkbox",
-                          description: l(a)("gateway_services.form.fields.tls_verify_enabled.help"),
-                          label: l(a)("gateway_services.form.fields.tls_verify_enabled.label"),
-                          "label-attributes": { tooltipAttributes: { maxWidth: "400" } }
-                        }, {
-                          tooltip: f(() => [
-                            d(l(O), {
-                              keypath: "gateway_services.form.fields.tls_verify_enabled.tooltip",
-                              scope: "global"
+                            }, 8, ["modelValue", "error", "label", "placeholder", "readonly"])
+                          ])) : B("", !0),
+                          Pe.value ? (C(), P("div", to, [
+                            c(l, {
+                              modelValue: t.fields.tls_verify_enabled,
+                              "onUpdate:modelValue": o[24] || (o[24] = (f) => t.fields.tls_verify_enabled = f),
+                              "data-testid": "gateway-service-tls-verify-checkbox",
+                              description: i(s)("gateway_services.form.fields.tls_verify_enabled.help"),
+                              label: i(s)("gateway_services.form.fields.tls_verify_enabled.label"),
+                              "label-attributes": { tooltipAttributes: { maxWidth: "400" } }
                             }, {
-                              code1: f(() => [
-                                C("code", null, h(l(a)("gateway_services.form.fields.tls_verify_enabled.code1")), 1)
+                              tooltip: d(() => [
+                                c(i(K), {
+                                  keypath: "gateway_services.form.fields.tls_verify_enabled.tooltip",
+                                  scope: "global"
+                                }, {
+                                  code1: d(() => [
+                                    S("code", null, E(i(s)("gateway_services.form.fields.tls_verify_enabled.code1")), 1)
+                                  ]),
+                                  _: 1
+                                })
                               ]),
                               _: 1
-                            })
-                          ]),
-                          _: 1
-                        }, 8, ["modelValue", "description", "label"]),
-                        e.fields.tls_verify_enabled ? (I(), K("div", Gt, [
-                          d(S, {
-                            modelValue: e.fields.tls_verify_value,
-                            "onUpdate:modelValue": i[22] || (i[22] = (s) => e.fields.tls_verify_value = s),
-                            "data-testid": "gateway-service-tls-verify-true-option",
-                            label: l(a)("gateway_services.form.fields.tls_verify_option.true.label"),
-                            "selected-value": !0
-                          }, null, 8, ["modelValue", "label"])
-                        ])) : L("", !0),
-                        e.fields.tls_verify_enabled ? (I(), K("div", qt, [
-                          d(S, {
-                            modelValue: e.fields.tls_verify_value,
-                            "onUpdate:modelValue": i[23] || (i[23] = (s) => e.fields.tls_verify_value = s),
-                            "data-testid": "gateway-service-tls-verify-false-option",
-                            label: l(a)("gateway_services.form.fields.tls_verify_option.false.label"),
-                            "selected-value": !1
-                          }, null, 8, ["modelValue", "label"])
-                        ])) : L("", !0)
-                      ])) : L("", !0)
-                    ])
+                            }, 8, ["modelValue", "description", "label"]),
+                            t.fields.tls_verify_enabled ? (C(), P("div", oo, [
+                              c(v, {
+                                modelValue: t.fields.tls_verify_value,
+                                "onUpdate:modelValue": o[25] || (o[25] = (f) => t.fields.tls_verify_value = f),
+                                "data-testid": "gateway-service-tls-verify-true-option",
+                                label: i(s)("gateway_services.form.fields.tls_verify_option.true.label"),
+                                "selected-value": !0
+                              }, null, 8, ["modelValue", "label"])
+                            ])) : B("", !0),
+                            t.fields.tls_verify_enabled ? (C(), P("div", io, [
+                              c(v, {
+                                modelValue: t.fields.tls_verify_value,
+                                "onUpdate:modelValue": o[26] || (o[26] = (f) => t.fields.tls_verify_value = f),
+                                "data-testid": "gateway-service-tls-verify-false-option",
+                                label: i(s)("gateway_services.form.fields.tls_verify_option.false.label"),
+                                "selected-value": !1
+                              }, null, 8, ["modelValue", "label"])
+                            ])) : B("", !0)
+                          ])) : B("", !0)
+                        ]))
+                      ]),
+                      _: 1
+                    })
                   ]),
                   _: 1
                 }, 8, ["modelValue", "trigger-label"])
               ]),
               _: 1
-            }, 8, ["description", "hide-info-header", "title"])
+            }, 8, ["description", "hide-info-header", "title"]),
+            c(i(We), {
+              description: i(s)("gateway_services.form.sections.general.description"),
+              "hide-info-header": a.hideSectionsInfo,
+              title: i(s)("gateway_services.form.sections.general.title")
+            }, {
+              default: d(() => [
+                c(y, {
+                  modelValue: t.fields.name,
+                  "onUpdate:modelValue": o[28] || (o[28] = (f) => t.fields.name = f),
+                  modelModifiers: { trim: !0 },
+                  autocomplete: "off",
+                  "data-testid": "gateway-service-name-input",
+                  error: ue.value,
+                  "error-message": W.value,
+                  label: i(s)("gateway_services.form.fields.name.label"),
+                  "label-attributes": {
+                    info: i(s)("gateway_services.form.fields.name.tooltip"),
+                    tooltipAttributes: { maxWidth: "400" }
+                  },
+                  name: "name",
+                  placeholder: i(s)("gateway_services.form.fields.name.placeholder"),
+                  readonly: t.isReadonly,
+                  type: "text",
+                  onInput: Ae
+                }, null, 8, ["modelValue", "error", "error-message", "label", "label-attributes", "placeholder", "readonly"]),
+                c(Q, {
+                  "data-testid": "tags-collapse",
+                  "trigger-alignment": "leading",
+                  "trigger-label": i(s)("gateway_services.form.fields.tags.collapse")
+                }, {
+                  default: d(() => [
+                    S("div", lo, [
+                      c(y, {
+                        modelValue: t.fields.tags,
+                        "onUpdate:modelValue": o[29] || (o[29] = (f) => t.fields.tags = f),
+                        modelModifiers: { trim: !0 },
+                        autocomplete: "off",
+                        "data-testid": "gateway-service-tags-input",
+                        help: i(s)("gateway_services.form.fields.tags.help"),
+                        label: i(s)("gateway_services.form.fields.tags.label"),
+                        "label-attributes": {
+                          info: i(s)("gateway_services.form.fields.tags.tooltip"),
+                          tooltipAttributes: { maxWidth: "400" }
+                        },
+                        name: "tags",
+                        placeholder: i(s)("gateway_services.form.fields.tags.placeholder"),
+                        readonly: t.isReadonly,
+                        type: "text"
+                      }, null, 8, ["modelValue", "help", "label", "label-attributes", "placeholder", "readonly"])
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["trigger-label"])
+              ]),
+              _: 1
+            }, 8, ["description", "hide-info-header", "title"]),
+            t.errorMessages.length ? (C(), ne(te, {
+              key: 0,
+              appearance: "danger"
+            }, {
+              default: d(() => [
+                S("ul", ro, [
+                  (C(!0), P(Xe, null, Ye(t.errorMessages, (f) => (C(), P("li", { key: f }, E(f), 1))), 128))
+                ])
+              ]),
+              _: 1
+            })) : B("", !0)
           ]),
           _: 3
-        }, 8, ["can-submit", "config", "edit-id", "entity-type", "error-message", "fetch-url", "form-fields", "is-readonly"])
+        }, 8, ["can-submit", "config", "edit-id", "entity-type", "fetch-url", "form-fields", "is-readonly"])
       ]);
     };
   }
-}), Xt = /* @__PURE__ */ Fe(Ot, [["__scopeId", "data-v-861a3759"]]), Nt = { class: "kong-ui-gateway-service-entity-config-card" }, Zt = /* @__PURE__ */ Ee({
+}), vo = /* @__PURE__ */ Ze(so, [["__scopeId", "data-v-06fb1f63"]]), ao = { class: "kong-ui-gateway-service-entity-config-card" }, go = /* @__PURE__ */ Me({
   __name: "GatewayServiceConfigCard",
   props: {
     /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
     config: {
       type: Object,
       required: !0,
-      validator: (n) => !(!n || ![g.Konnect, g.KongManager].includes(n == null ? void 0 : n.app) || n.app === g.Konnect && !n.controlPlaneId || n.app === g.KongManager && typeof n.workspace != "string" || !n.entityId)
+      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
@@ -1374,8 +1606,8 @@ const ye = {
     }
   },
   emits: ["loading", "fetch:error", "fetch:success"],
-  setup(n) {
-    const D = n, { i18n: { t: p }, i18nT: c } = ye.useI18n(), r = b(() => re.form[D.config.app].edit), { getPropValue: $ } = at(), W = (a, U) => $(a, U) === !0 ? p("gateway_services.form.fields.tls_verify_option.true.display") : p("gateway_services.form.fields.tls_verify_option.false.display"), O = P({
+  setup(a) {
+    const I = a, { i18n: { t: p }, i18nT: n } = Ce.useI18n(), r = h(() => ce.form[I.config.app].edit), { getPropValue: V } = ht(), q = (s, A) => V(s, A) === !0 ? p("gateway_services.form.fields.tls_verify_option.true.display") : p("gateway_services.form.fields.tls_verify_option.false.display"), K = $({
       id: {},
       name: {
         tooltip: p("gateway_services.form.fields.name.tooltip")
@@ -1384,19 +1616,19 @@ const ye = {
       updated_at: {},
       created_at: {},
       protocol: {
-        section: pe.Basic,
+        section: be.Basic,
         tooltip: p("gateway_services.form.fields.protocol.tooltip")
       },
       host: {
-        section: pe.Basic,
+        section: be.Basic,
         tooltip: p("gateway_services.form.fields.host.tooltip")
       },
       path: {
-        section: pe.Basic,
+        section: be.Basic,
         tooltip: p("gateway_services.form.fields.path.tooltip")
       },
       port: {
-        section: pe.Basic,
+        section: be.Basic,
         tooltip: p("gateway_services.form.fields.port.tooltip")
       },
       tags: {
@@ -1424,7 +1656,7 @@ const ye = {
         tooltip: p("gateway_services.form.fields.client_certificate.tooltip")
       },
       ca_certificates: {
-        type: nt.BadgeTag,
+        type: bt.BadgeTag,
         label: p("gateway_services.form.fields.ca_certificates.label"),
         order: 6
       },
@@ -1435,62 +1667,62 @@ const ye = {
         hidden: !0
       }
     });
-    return (a, U) => (I(), K("div", Nt, [
-      d(l(ct), {
-        config: n.config,
-        "config-card-doc": n.configCardDoc,
-        "config-schema": O.value,
-        "entity-type": l(Ae).GatewayService,
+    return (s, A) => (C(), P("div", ao, [
+      c(i(wt), {
+        config: a.config,
+        "config-card-doc": a.configCardDoc,
+        "config-schema": K.value,
+        "entity-type": i(ze).GatewayService,
         "fetch-url": r.value,
-        "hide-title": n.hideTitle,
-        "onFetch:error": U[0] || (U[0] = (V) => a.$emit("fetch:error", V)),
-        "onFetch:success": U[1] || (U[1] = (V) => a.$emit("fetch:success", V)),
-        onLoading: U[2] || (U[2] = (V) => a.$emit("loading", V))
+        "hide-title": a.hideTitle,
+        "onFetch:error": A[0] || (A[0] = (_) => s.$emit("fetch:error", _)),
+        "onFetch:success": A[1] || (A[1] = (_) => s.$emit("fetch:success", _)),
+        onLoading: A[2] || (A[2] = (_) => s.$emit("loading", _))
       }, {
-        "enabled-label-tooltip": f(() => [
-          d(l(c), {
+        "enabled-label-tooltip": d(() => [
+          c(i(n), {
             keypath: "gateway_services.form.fields.enabled.tooltip",
             scope: "global"
           }, {
-            false: f(() => [
-              C("code", null, h(l(p)("gateway_services.form.fields.enabled.false")), 1)
+            false: d(() => [
+              S("code", null, E(i(p)("gateway_services.form.fields.enabled.false")), 1)
             ]),
-            true: f(() => [
-              C("code", null, h(l(p)("gateway_services.form.fields.enabled.true")), 1)
+            true: d(() => [
+              S("code", null, E(i(p)("gateway_services.form.fields.enabled.true")), 1)
             ]),
             _: 1
           })
         ]),
-        "ca_certificates-label-tooltip": f(() => [
-          d(l(c), {
+        "ca_certificates-label-tooltip": d(() => [
+          c(i(n), {
             keypath: "gateway_services.form.fields.ca_certificates.tooltip",
             scope: "global"
           }, {
-            code1: f(() => [
-              C("code", null, h(l(p)("gateway_services.form.fields.ca_certificates.code1")), 1)
+            code1: d(() => [
+              S("code", null, E(i(p)("gateway_services.form.fields.ca_certificates.code1")), 1)
             ]),
-            code2: f(() => [
-              C("code", null, h(l(p)("gateway_services.form.fields.ca_certificates.code2")), 1)
+            code2: d(() => [
+              S("code", null, E(i(p)("gateway_services.form.fields.ca_certificates.code2")), 1)
             ]),
             _: 1
           })
         ]),
-        "tls_verify-label-tooltip": f(() => [
-          d(l(c), {
+        "tls_verify-label-tooltip": d(() => [
+          c(i(n), {
             keypath: "gateway_services.form.fields.tls_verify_enabled.tooltip",
             scope: "global"
           }, {
-            code1: f(() => [
-              C("code", null, h(l(p)("gateway_services.form.fields.tls_verify_enabled.code1")), 1)
+            code1: d(() => [
+              S("code", null, E(i(p)("gateway_services.form.fields.tls_verify_enabled.code1")), 1)
             ]),
             _: 1
           })
         ]),
-        tls_verify: f((V) => [
-          M(h(typeof l($)("rowValue", V) == "boolean" ? W("rowValue", V) : l(p)("gateway_services.form.fields.tls_verify_option.unset.display")), 1)
+        tls_verify: d((_) => [
+          L(E(typeof i(V)("rowValue", _) == "boolean" ? q("rowValue", _) : i(p)("gateway_services.form.fields.tls_verify_option.unset.display")), 1)
         ]),
-        client_certificate: f((V) => [
-          M(h(l($)("rowValue", V) ? l($)("rowValue", V).id : "–"), 1)
+        client_certificate: d((_) => [
+          L(E(i(V)("rowValue", _) ? i(V)("rowValue", _).id : "–"), 1)
         ]),
         _: 1
       }, 8, ["config", "config-card-doc", "config-schema", "entity-type", "fetch-url", "hide-title"])
@@ -1498,7 +1730,7 @@ const ye = {
   }
 });
 export {
-  Zt as GatewayServiceConfigCard,
-  Xt as GatewayServiceForm,
-  Qt as GatewayServiceList
+  go as GatewayServiceConfigCard,
+  vo as GatewayServiceForm,
+  mo as GatewayServiceList
 };