@digi-frontend/dgate-api-documentation 4.0.4 → 4.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs +2852 -717
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -0
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.mts +2 -0
  6. package/dist/index.d.mts.map +1 -1
  7. package/dist/index.mjs +2848 -713
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1098,8 +1098,8 @@ const Sidebar$1 = ({ searchValue, setSearchValue }) => {
1098
1098
  };
1099
1099
  return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(re_resizable.Resizable, {
1100
1100
  as: "aside",
1101
- minWidth: 300,
1102
- maxWidth: 386,
1101
+ minWidth: 240,
1102
+ maxWidth: 240,
1103
1103
  enable: {
1104
1104
  top: false,
1105
1105
  right: true,
@@ -1111,7 +1111,7 @@ const Sidebar$1 = ({ searchValue, setSearchValue }) => {
1111
1111
  topLeft: false
1112
1112
  },
1113
1113
  defaultSize: {
1114
- width: 333,
1114
+ width: 240,
1115
1115
  height: "100%"
1116
1116
  },
1117
1117
  className: cx("sider"),
@@ -1742,7 +1742,7 @@ const handleStatusColor = (code) => {
1742
1742
  };
1743
1743
  //#endregion
1744
1744
  //#region src/view/components/EndpointPage/EndpointPage.tsx
1745
- const { Title: Title$7, Paragraph: Paragraph$1 } = antd.Typography;
1745
+ const { Title: Title$8, Paragraph: Paragraph$1 } = antd.Typography;
1746
1746
  const requestColumns$1 = [
1747
1747
  {
1748
1748
  title: "Parameter",
@@ -1761,7 +1761,7 @@ const requestColumns$1 = [
1761
1761
  }
1762
1762
  ];
1763
1763
  const responseColumns$1 = [...requestColumns$1];
1764
- const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
1764
+ const buildRequestData$1 = (params, colors) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
1765
1765
  let typeLabel = p.schema?.type;
1766
1766
  if (p.schema?.type === "array" && p.schema?.items?.type) typeLabel = `${p.schema.type}_${p.schema.items.type}`;
1767
1767
  return {
@@ -1770,17 +1770,17 @@ const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required ===
1770
1770
  p.name,
1771
1771
  typeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1772
1772
  style: {
1773
- color: "rgba(0,0,0,0.45)",
1773
+ color: colors.typeLabel,
1774
1774
  marginLeft: "0.25rem",
1775
1775
  marginRight: "0.25rem"
1776
1776
  },
1777
1777
  children: typeLabel
1778
1778
  }),
1779
1779
  p.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1780
- style: { color: "red" },
1780
+ style: { color: colors.required },
1781
1781
  children: "*"
1782
1782
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1783
- style: { color: "#52C41A" },
1783
+ style: { color: colors.optional },
1784
1784
  children: "Optional"
1785
1785
  })
1786
1786
  ] }),
@@ -1788,7 +1788,7 @@ const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required ===
1788
1788
  enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, { children: e }, e)) : "--"
1789
1789
  };
1790
1790
  });
1791
- const buildHeaderData$1 = (headers) => {
1791
+ const buildHeaderData$1 = (headers, colors) => {
1792
1792
  if (!headers) return [];
1793
1793
  return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
1794
1794
  let typeLabel = header.schema?.type;
@@ -1799,17 +1799,17 @@ const buildHeaderData$1 = (headers) => {
1799
1799
  name,
1800
1800
  typeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1801
1801
  style: {
1802
- color: "rgba(0,0,0,0.45)",
1802
+ color: colors.typeLabel,
1803
1803
  marginLeft: "0.25rem",
1804
1804
  marginRight: "0.25rem"
1805
1805
  },
1806
1806
  children: typeLabel
1807
1807
  }),
1808
1808
  header.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1809
- style: { color: "red" },
1809
+ style: { color: colors.required },
1810
1810
  children: "*"
1811
1811
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1812
- style: { color: "#52C41A" },
1812
+ style: { color: colors.optional },
1813
1813
  children: "Optional"
1814
1814
  })
1815
1815
  ] }, idx),
@@ -1822,7 +1822,7 @@ const EndpointPage$1 = () => {
1822
1822
  const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag } = useStore(({ view }) => view);
1823
1823
  const [endpointTooltip, setEndpointTooltip] = (0, react$1.useState)("Copy endpoint");
1824
1824
  const [selectedServer, setSelectedServer] = (0, react$1.useState)(0);
1825
- const { cx } = useStyle("EndpointPage", (token, scope) => ({
1825
+ const { cx, token } = useStyle("EndpointPage", (token, scope) => ({
1826
1826
  [scope("docs-endpoint-container")]: {
1827
1827
  display: "flex",
1828
1828
  flexDirection: "column",
@@ -1852,12 +1852,19 @@ const EndpointPage$1 = () => {
1852
1852
  padding: "0px 0.75rem 0.75rem 0.75rem",
1853
1853
  ".ant-tabs-tab": { paddingTop: "0" }
1854
1854
  }
1855
- }
1855
+ },
1856
+ [scope("row-odd")]: { "& > td": { background: `${token.colorBgLayout} !important` } },
1857
+ [scope("row-even")]: { "& > td": { background: `${token.colorBgContainer} !important` } }
1856
1858
  }));
1857
1859
  const methodStyle = methodColors$1[selectedEndpoint?.method];
1858
- const headerParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || []);
1859
- const pathParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || []);
1860
- const queryParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || []);
1860
+ const paramColors = {
1861
+ typeLabel: token.colorTextQuaternary,
1862
+ required: token.colorError,
1863
+ optional: token.colorSuccess
1864
+ };
1865
+ const headerParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], paramColors);
1866
+ const pathParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], paramColors);
1867
+ const queryParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], paramColors);
1861
1868
  const requestTabs = [
1862
1869
  {
1863
1870
  key: "header",
@@ -1867,7 +1874,8 @@ const EndpointPage$1 = () => {
1867
1874
  dataSource: headerParams,
1868
1875
  pagination: false,
1869
1876
  bordered: true,
1870
- size: "small"
1877
+ size: "small",
1878
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
1871
1879
  })
1872
1880
  },
1873
1881
  {
@@ -1878,7 +1886,8 @@ const EndpointPage$1 = () => {
1878
1886
  dataSource: pathParams,
1879
1887
  pagination: false,
1880
1888
  bordered: true,
1881
- size: "small"
1889
+ size: "small",
1890
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
1882
1891
  })
1883
1892
  },
1884
1893
  {
@@ -1889,12 +1898,13 @@ const EndpointPage$1 = () => {
1889
1898
  dataSource: queryParams,
1890
1899
  pagination: false,
1891
1900
  bordered: true,
1892
- size: "small"
1901
+ size: "small",
1902
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
1893
1903
  })
1894
1904
  }
1895
1905
  ].filter((t) => t !== null);
1896
1906
  const responseHeaders = (selectedEndpoint?.responses?.[selectedStatusCode || 200])?.headers;
1897
- const responseHeaderData = buildHeaderData$1(responseHeaders);
1907
+ const responseHeaderData = buildHeaderData$1(responseHeaders, paramColors);
1898
1908
  selectedApi?.servers?.map((server, index) => ({
1899
1909
  value: index,
1900
1910
  label: `${server.url}${selectedEndpoint?.path || ""}`
@@ -1938,7 +1948,7 @@ const EndpointPage$1 = () => {
1938
1948
  display: "flex",
1939
1949
  flexDirection: "row",
1940
1950
  alignItems: "center",
1941
- color: "rgba(0,0,0,0.45)",
1951
+ color: token.colorTextQuaternary,
1942
1952
  gap: "0.25rem"
1943
1953
  },
1944
1954
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: selectedEndpoint?.tagName || "default" })
@@ -1953,7 +1963,7 @@ const EndpointPage$1 = () => {
1953
1963
  }) }
1954
1964
  ] })]
1955
1965
  }),
1956
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$7, {
1966
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$8, {
1957
1967
  level: 3,
1958
1968
  children: [
1959
1969
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, {
@@ -2003,7 +2013,8 @@ const EndpointPage$1 = () => {
2003
2013
  dataSource: responseHeaderData,
2004
2014
  pagination: false,
2005
2015
  bordered: true,
2006
- size: "small"
2016
+ size: "small",
2017
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
2007
2018
  })
2008
2019
  })
2009
2020
  ]
@@ -2127,8 +2138,8 @@ const MainContent$1 = ({ searchEnabled, handleResetSearch, handleVisitLandingPag
2127
2138
  //#endregion
2128
2139
  //#region src/view/components/ApiPage/components/ApiDocumentationBar.tsx
2129
2140
  const { useBreakpoint: useBreakpoint$4 } = antd.Grid;
2130
- const { Title: Title$5 } = antd.Typography;
2131
- const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, hasChanges = false, switcherNode }) => {
2141
+ const { Title: Title$6 } = antd.Typography;
2142
+ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, hasChanges = false, hasErrors = false, switcherNode }) => {
2132
2143
  const isMobile = !useBreakpoint$4().md;
2133
2144
  const { wrapSSR, cx, token } = useStyle("ApiDocumentationBar", (token, scope) => ({
2134
2145
  [scope("root")]: {
@@ -2240,7 +2251,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2240
2251
  className: cx("title-section"),
2241
2252
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
2242
2253
  title: apiName,
2243
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title$5, {
2254
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title$6, {
2244
2255
  level: 3,
2245
2256
  ellipsis: true,
2246
2257
  style: {
@@ -2264,7 +2275,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2264
2275
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
2265
2276
  size: "large",
2266
2277
  type: "primary",
2267
- disabled: !hasChanges,
2278
+ disabled: !hasChanges || hasErrors,
2268
2279
  onClick: onSave,
2269
2280
  children: "Save"
2270
2281
  })]
@@ -2278,7 +2289,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2278
2289
  className: cx("title-section"),
2279
2290
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
2280
2291
  title: `${apiName} API Documentation`,
2281
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$5, {
2292
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$6, {
2282
2293
  level: 3,
2283
2294
  style: {
2284
2295
  margin: 0,
@@ -2322,7 +2333,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2322
2333
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
2323
2334
  size: "large",
2324
2335
  type: "primary",
2325
- disabled: !hasChanges,
2336
+ disabled: !hasChanges || hasErrors,
2326
2337
  onClick: onSave,
2327
2338
  children: "Save & Publish Changes"
2328
2339
  })]
@@ -2333,14 +2344,16 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2333
2344
  //#endregion
2334
2345
  //#region src/view/components/ApiPage/components/GeneralSection.tsx
2335
2346
  const { useBreakpoint: useBreakpoint$3 } = antd.Grid;
2336
- const GeneralSection = ({ apiName, authType, version, description, onApiNameChange, onDescriptionChange, collapsed = false, onToggleCollapse, onChangeDetected }) => {
2347
+ const GeneralSection = ({ apiName, authType, version, description, onApiNameChange, onDescriptionChange, onChangeDetected, collapsed, onToggleCollapse, apiNameError, descriptionError }) => {
2337
2348
  const isMobile = !useBreakpoint$3().md;
2338
2349
  const { wrapSSR, cx, token } = useStyle("GeneralSection", (token, scope) => ({
2339
2350
  [scope("root")]: {
2340
2351
  display: "flex",
2341
2352
  flexDirection: "column",
2342
- borderRadius: token.borderRadius,
2343
- overflow: "hidden",
2353
+ gap: token.margin,
2354
+ padding: `${token.marginLG}px ${token.marginLG}px 48px`,
2355
+ background: token.colorBgElevated,
2356
+ borderRadius: token.borderRadiusLG,
2344
2357
  width: "100%"
2345
2358
  },
2346
2359
  [scope("head")]: {
@@ -2354,15 +2367,20 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
2354
2367
  [scope("body")]: {
2355
2368
  display: "flex",
2356
2369
  flexDirection: "column",
2357
- gap: token.paddingLG,
2370
+ gap: token.margin,
2358
2371
  padding: token.paddingLG,
2359
- paddingBottom: token.paddingXXL ?? 48,
2360
2372
  background: token.colorBgElevated,
2361
2373
  borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
2362
2374
  },
2375
+ [scope("fields")]: {
2376
+ display: "flex",
2377
+ flexDirection: "column",
2378
+ gap: token.margin,
2379
+ width: "100%"
2380
+ },
2363
2381
  [scope("row")]: {
2364
2382
  display: "flex",
2365
- gap: token.paddingLG,
2383
+ gap: token.margin,
2366
2384
  width: "100%"
2367
2385
  },
2368
2386
  [scope("field")]: {
@@ -2381,108 +2399,91 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
2381
2399
  paddingBottom: token.paddingXS,
2382
2400
  lineHeight: "22px"
2383
2401
  },
2384
- [scope("label-required")]: {
2402
+ [scope("required")]: {
2385
2403
  color: token.colorError,
2386
2404
  fontSize: token.fontSize
2387
- },
2388
- [scope("count")]: {
2389
- alignSelf: "flex-end",
2390
- fontSize: token.fontSize,
2391
- color: token.colorTextDescription,
2392
- marginTop: token.marginXXS
2393
2405
  }
2394
2406
  }));
2395
- return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2396
- className: cx("root"),
2397
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2398
- className: cx("head"),
2399
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
2400
- level: 4,
2401
- style: {
2402
- margin: 0,
2403
- color: token.colorTextHeading
2404
- },
2405
- children: "General"
2406
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
2407
- type: "text",
2408
- size: "large",
2409
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.UpCircleOutlined, { style: { fontSize: 18 } }),
2410
- onClick: onToggleCollapse,
2411
- style: {
2412
- transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
2413
- transition: "transform 0.2s"
2414
- }
2415
- })]
2416
- }), !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2417
- className: cx("body"),
2418
- style: isMobile ? {
2419
- padding: token.paddingMD,
2420
- paddingBottom: token.paddingXXL ?? 48
2421
- } : void 0,
2422
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2407
+ const fieldsContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2408
+ className: cx("fields"),
2409
+ children: [
2410
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2411
+ className: cx("field"),
2412
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2413
+ className: cx("label"),
2414
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "API Name" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2415
+ className: cx("required"),
2416
+ children: "*"
2417
+ })]
2418
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2419
+ size: "large",
2420
+ value: apiName,
2421
+ status: apiNameError ? "error" : void 0,
2422
+ suffix: apiNameError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.CloseCircleOutlined, {
2423
+ style: {
2424
+ color: token.colorError,
2425
+ cursor: "pointer"
2426
+ },
2427
+ onClick: () => {
2428
+ onApiNameChange("");
2429
+ onChangeDetected?.();
2430
+ }
2431
+ }) : void 0,
2432
+ onChange: (e) => {
2433
+ onApiNameChange(e.target.value);
2434
+ onChangeDetected?.();
2435
+ },
2436
+ maxLength: 100,
2437
+ showCount: true
2438
+ })]
2439
+ }),
2440
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2423
2441
  className: cx("row"),
2424
2442
  style: isMobile ? { flexDirection: "column" } : void 0,
2425
- children: [
2426
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2427
- className: cx("field"),
2428
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2429
- className: cx("label"),
2430
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "API Name" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2431
- className: cx("label-required"),
2432
- children: "*"
2433
- })]
2434
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2435
- size: "large",
2436
- value: apiName,
2437
- onChange: (e) => {
2438
- onApiNameChange(e.target.value);
2439
- onChangeDetected?.();
2440
- },
2441
- maxLength: 35,
2442
- showCount: true
2443
- })]
2444
- }),
2445
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2446
- className: cx("field"),
2447
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2448
- className: cx("label"),
2449
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Authentication Type" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2450
- className: cx("label-required"),
2451
- children: "*"
2452
- })]
2453
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2454
- size: "large",
2455
- value: authType,
2456
- disabled: true
2443
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2444
+ className: cx("field"),
2445
+ style: isMobile ? void 0 : {
2446
+ flex: "none",
2447
+ width: 436
2448
+ },
2449
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2450
+ className: cx("label"),
2451
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Authentication Type" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2452
+ className: cx("required"),
2453
+ children: "*"
2457
2454
  })]
2458
- }),
2459
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2460
- className: cx("field"),
2461
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2462
- className: cx("label"),
2463
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Version" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2464
- className: cx("label-required"),
2465
- children: "*"
2466
- })]
2467
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2468
- size: "large",
2469
- value: version,
2470
- disabled: true
2455
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2456
+ size: "large",
2457
+ value: authType,
2458
+ disabled: true
2459
+ })]
2460
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2461
+ className: cx("field"),
2462
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2463
+ className: cx("label"),
2464
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Version" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2465
+ className: cx("required"),
2466
+ children: "*"
2471
2467
  })]
2472
- })
2473
- ]
2474
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2468
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2469
+ size: "large",
2470
+ value: version,
2471
+ disabled: true
2472
+ })]
2473
+ })]
2474
+ }),
2475
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2475
2476
  className: cx("field"),
2476
- style: { width: "100%" },
2477
2477
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2478
2478
  className: cx("label"),
2479
2479
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Description" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2480
- className: cx("label-required"),
2480
+ className: cx("required"),
2481
2481
  children: "*"
2482
2482
  })]
2483
2483
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
2484
2484
  size: "large",
2485
2485
  value: description,
2486
+ status: descriptionError ? "error" : void 0,
2486
2487
  onChange: (e) => {
2487
2488
  onDescriptionChange(e.target.value);
2488
2489
  onChangeDetected?.();
@@ -2494,64 +2495,138 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
2494
2495
  resize: "vertical"
2495
2496
  }
2496
2497
  })]
2498
+ })
2499
+ ]
2500
+ });
2501
+ return wrapSSR(isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2502
+ style: { width: "100%" },
2503
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2504
+ className: cx("head"),
2505
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
2506
+ level: 4,
2507
+ style: {
2508
+ margin: 0,
2509
+ color: token.colorTextHeading
2510
+ },
2511
+ children: "General"
2512
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
2513
+ type: "text",
2514
+ size: "large",
2515
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.UpCircleOutlined, { style: { fontSize: 18 } }),
2516
+ onClick: onToggleCollapse,
2517
+ style: {
2518
+ transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
2519
+ transition: "transform 0.2s"
2520
+ }
2497
2521
  })]
2522
+ }), !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2523
+ className: cx("body"),
2524
+ children: fieldsContent
2498
2525
  })]
2526
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2527
+ className: cx("root"),
2528
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
2529
+ level: 4,
2530
+ style: {
2531
+ margin: 0,
2532
+ color: token.colorTextHeading
2533
+ },
2534
+ children: "General"
2535
+ }), fieldsContent]
2499
2536
  }));
2500
2537
  };
2501
2538
  //#endregion
2502
2539
  //#region src/assets/trash.tsx
2503
- const Trash = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
2504
- viewBox: "0 0 40 40",
2540
+ const Trash = (props) => {
2541
+ const maskId = `trash-mask-${(0, react.useId)()}`;
2542
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
2543
+ viewBox: "0 0 40 40",
2544
+ fill: "none",
2545
+ xmlns: "http://www.w3.org/2000/svg",
2546
+ ...props,
2547
+ children: [
2548
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mask", {
2549
+ id: maskId,
2550
+ fill: "white",
2551
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" })
2552
+ }),
2553
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2554
+ d: "M8 0V1H32V0V-1H8V0ZM40 8H39V32H40H41V8H40ZM32 40V39H8V40V41H32V40ZM0 32H1V8H0H-1V32H0ZM8 40V39C4.13401 39 1 35.866 1 32H0H-1C-1 36.9706 3.02944 41 8 41V40ZM40 32H39C39 35.866 35.866 39 32 39V40V41C36.9706 41 41 36.9706 41 32H40ZM32 0V1C35.866 1 39 4.13401 39 8H40H41C41 3.02944 36.9706 -1 32 -1V0ZM8 0V-1C3.02944 -1 -1 3.02944 -1 8H0H1C1 4.13401 4.13401 1 8 1V0Z",
2555
+ fill: "currentColor",
2556
+ mask: `url(#${maskId})`
2557
+ }),
2558
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2559
+ d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
2560
+ fill: "currentColor"
2561
+ }),
2562
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2563
+ d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
2564
+ stroke: "currentColor",
2565
+ strokeWidth: "1.5",
2566
+ strokeLinecap: "round",
2567
+ strokeLinejoin: "round"
2568
+ }),
2569
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2570
+ d: "M17.375 14.7275L17.54 13.745C17.66 13.0325 17.75 12.5 19.0175 12.5H20.9825C22.25 12.5 22.3475 13.0625 22.46 13.7525L22.625 14.7275",
2571
+ stroke: "currentColor",
2572
+ strokeWidth: "1.5",
2573
+ strokeLinecap: "round",
2574
+ strokeLinejoin: "round"
2575
+ }),
2576
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2577
+ d: "M25.1373 17.8555L24.6498 25.408C24.5673 26.5855 24.4998 27.5005 22.4073 27.5005H17.5923C15.4998 27.5005 15.4323 26.5855 15.3498 25.408L14.8623 17.8555",
2578
+ stroke: "currentColor",
2579
+ strokeWidth: "1.5",
2580
+ strokeLinecap: "round",
2581
+ strokeLinejoin: "round"
2582
+ }),
2583
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2584
+ d: "M18.7476 23.375H21.2451",
2585
+ stroke: "currentColor",
2586
+ strokeWidth: "1.5",
2587
+ strokeLinecap: "round",
2588
+ strokeLinejoin: "round"
2589
+ }),
2590
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2591
+ d: "M18.125 20.375H21.875",
2592
+ stroke: "currentColor",
2593
+ strokeWidth: "1.5",
2594
+ strokeLinecap: "round",
2595
+ strokeLinejoin: "round"
2596
+ })
2597
+ ]
2598
+ });
2599
+ };
2600
+ //#endregion
2601
+ //#region src/assets/icons/editTag.tsx
2602
+ const EditTag = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
2603
+ width: "18",
2604
+ height: "18",
2605
+ viewBox: "0 0 18 18",
2505
2606
  fill: "none",
2506
2607
  xmlns: "http://www.w3.org/2000/svg",
2507
2608
  ...props,
2508
2609
  children: [
2509
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mask", {
2510
- id: "path-1-inside-1_17984_239034",
2511
- fill: "white",
2512
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" })
2513
- }),
2514
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2515
- d: "M8 0V1H32V0V-1H8V0ZM40 8H39V32H40H41V8H40ZM32 40V39H8V40V41H32V40ZM0 32H1V8H0H-1V32H0ZM8 40V39C4.13401 39 1 35.866 1 32H0H-1C-1 36.9706 3.02944 41 8 41V40ZM40 32H39C39 35.866 35.866 39 32 39V40V41C36.9706 41 41 36.9706 41 32H40ZM32 0V1C35.866 1 39 4.13401 39 8H40H41C41 3.02944 36.9706 -1 32 -1V0ZM8 0V-1C3.02944 -1 -1 3.02944 -1 8H0H1C1 4.13401 4.13401 1 8 1V0Z",
2516
- fill: "#FF4D4F",
2517
- mask: "url(#path-1-inside-1_17984_239034)"
2518
- }),
2519
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2520
- d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
2521
- fill: "#FF4D4F"
2522
- }),
2523
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2524
- d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
2525
- stroke: "#FF4D4F",
2526
- strokeWidth: "1.5",
2527
- strokeLinecap: "round",
2528
- strokeLinejoin: "round"
2529
- }),
2530
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2531
- d: "M17.375 14.7275L17.54 13.745C17.66 13.0325 17.75 12.5 19.0175 12.5H20.9825C22.25 12.5 22.3475 13.0625 22.46 13.7525L22.625 14.7275",
2532
- stroke: "#FF4D4F",
2533
- strokeWidth: "1.5",
2534
- strokeLinecap: "round",
2535
- strokeLinejoin: "round"
2536
- }),
2537
2610
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2538
- d: "M25.1373 17.8555L24.6498 25.408C24.5673 26.5855 24.4998 27.5005 22.4073 27.5005H17.5923C15.4998 27.5005 15.4323 26.5855 15.3498 25.408L14.8623 17.8555",
2539
- stroke: "#FF4D4F",
2611
+ d: "M8.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5H11.25C15 16.5 16.5 15 16.5 11.25V9.75",
2612
+ stroke: "currentColor",
2540
2613
  strokeWidth: "1.5",
2541
2614
  strokeLinecap: "round",
2542
2615
  strokeLinejoin: "round"
2543
2616
  }),
2544
2617
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2545
- d: "M18.7476 23.375H21.2451",
2546
- stroke: "#FF4D4F",
2618
+ d: "M12.0299 2.26592L6.11991 8.17592C5.89491 8.40092 5.66991 8.84342 5.62491 9.16592L5.30241 11.4234C5.18241 12.2409 5.75991 12.8109 6.57741 12.6984L8.83491 12.3759C9.14991 12.3309 9.59241 12.1059 9.82491 11.8809L15.7349 5.97092C16.7549 4.95092 17.2349 3.76592 15.7349 2.26592C14.2349 0.765922 13.0499 1.24592 12.0299 2.26592Z",
2619
+ stroke: "currentColor",
2547
2620
  strokeWidth: "1.5",
2621
+ strokeMiterlimit: "10",
2548
2622
  strokeLinecap: "round",
2549
2623
  strokeLinejoin: "round"
2550
2624
  }),
2551
2625
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2552
- d: "M18.125 20.375H21.875",
2553
- stroke: "#FF4D4F",
2626
+ d: "M11.1826 3.11328C11.6851 4.90578 13.0876 6.30828 14.8876 6.81828",
2627
+ stroke: "currentColor",
2554
2628
  strokeWidth: "1.5",
2629
+ strokeMiterlimit: "10",
2555
2630
  strokeLinecap: "round",
2556
2631
  strokeLinejoin: "round"
2557
2632
  })
@@ -3203,7 +3278,8 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
3203
3278
  //#endregion
3204
3279
  //#region src/view/components/ApiPage/components/EndpointsSection.tsx
3205
3280
  const { useBreakpoint: useBreakpoint$2 } = antd.Grid;
3206
- const PAGE_SIZE = 5;
3281
+ const PAGE_SIZE = 4;
3282
+ const VIEW_PAGE_SIZE = 4;
3207
3283
  const getStatusCodeColor = (code, token) => {
3208
3284
  const n = parseInt(code, 10);
3209
3285
  if (n >= 400 && n < 500) return {
@@ -3223,8 +3299,24 @@ const buildViewParamRows = (params) => params.map((p, idx) => ({
3223
3299
  description: p.description ?? "",
3224
3300
  enum: p.enum ?? []
3225
3301
  }));
3226
- const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse, endpointNames, endpointDescs, endpointTags, availableTags, onEndpointNameChange, onEndpointDescChange, onEndpointTagsChange, endpointParams, onAddParameter, onEditParameter, onDeleteParameter, endpointResponseParams, onAddResponseParameter, onEditResponseParameter, onDeleteResponseParameter, mode = "edit" }) => {
3302
+ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse, endpointNames, endpointDescs, endpointTags, availableTags, onEndpointNameChange, onEndpointDescChange, onEndpointTagsChange, endpointParams, onAddParameter, onEditParameter, onDeleteParameter, endpointResponseParams, onAddResponseParameter, onEditResponseParameter, onDeleteResponseParameter, mode = "edit", selectedEndpointKey }) => {
3227
3303
  const [expandedId, setExpandedId] = (0, react$1.useState)(null);
3304
+ const [activeTab, setActiveTab] = (0, react$1.useState)("general");
3305
+ (0, react$1.useEffect)(() => {
3306
+ setActiveTab("general");
3307
+ }, [selectedEndpointKey]);
3308
+ (0, react$1.useEffect)(() => {
3309
+ if (!selectedEndpointKey) return;
3310
+ if (selectedStatusCodes[selectedEndpointKey]) return;
3311
+ const ep = Object.values(endpointsByTag).flat().find((e) => e.id === selectedEndpointKey);
3312
+ if (!ep) return;
3313
+ const keys = Object.keys(ep.responses ?? {});
3314
+ const defaultCode = keys.includes("200") ? "200" : keys[0];
3315
+ if (defaultCode) setSelectedStatusCodes((prev) => ({
3316
+ ...prev,
3317
+ [selectedEndpointKey]: defaultCode
3318
+ }));
3319
+ }, [selectedEndpointKey]);
3228
3320
  const [paramDrawerOpen, setParamDrawerOpen] = (0, react$1.useState)(false);
3229
3321
  const [paramDrawerEndpointId, setParamDrawerEndpointId] = (0, react$1.useState)(null);
3230
3322
  const [paramDrawerMode, setParamDrawerMode] = (0, react$1.useState)("add");
@@ -3271,10 +3363,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3271
3363
  [scope("root")]: {
3272
3364
  display: "flex",
3273
3365
  flexDirection: "column",
3274
- borderRadius: token.borderRadius,
3275
- overflow: "hidden",
3276
3366
  width: "100%",
3277
- flexShrink: 0
3367
+ flexShrink: 0,
3368
+ "& .ant-tabs-content-holder": {
3369
+ background: token.colorBgElevated,
3370
+ borderRadius: token.borderRadiusLG,
3371
+ padding: `${token.paddingLG}px ${token.paddingLG}px 48px`
3372
+ }
3278
3373
  },
3279
3374
  [scope("head")]: {
3280
3375
  display: "flex",
@@ -3323,15 +3418,12 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3323
3418
  display: "flex",
3324
3419
  alignItems: "center",
3325
3420
  justifyContent: "center",
3326
- width: 64,
3327
- padding: `0 ${token.paddingXS}px`,
3421
+ padding: "0 15px",
3328
3422
  borderRadius: token.borderRadius,
3329
- border: "1px solid",
3330
3423
  fontSize: token.fontSize,
3331
3424
  fontWeight: 400,
3332
3425
  lineHeight: "22px",
3333
- whiteSpace: "nowrap",
3334
- alignSelf: "stretch"
3426
+ whiteSpace: "nowrap"
3335
3427
  },
3336
3428
  [scope("endpoint-path")]: {
3337
3429
  fontSize: token.fontSizeLG,
@@ -3412,7 +3504,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3412
3504
  overflow: "hidden"
3413
3505
  },
3414
3506
  [scope("code-area")]: {
3415
- background: "#1d2856",
3507
+ background: token.colorBgSpotlight,
3416
3508
  padding: "10px 12px",
3417
3509
  fontFamily: "Cairo, sans-serif",
3418
3510
  fontSize: 14,
@@ -3424,7 +3516,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3424
3516
  display: "block"
3425
3517
  },
3426
3518
  [scope("code-footer")]: {
3427
- background: "#161d40",
3519
+ background: token.colorBgSpotlight,
3428
3520
  padding: 12,
3429
3521
  borderBottomLeftRadius: 8,
3430
3522
  borderBottomRightRadius: 8,
@@ -3581,26 +3673,36 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3581
3673
  gap: 8
3582
3674
  },
3583
3675
  [scope("param-edit-btn")]: {
3584
- width: 32,
3585
- height: 32,
3676
+ width: 40,
3677
+ height: 40,
3586
3678
  padding: 0,
3679
+ lineHeight: 1,
3587
3680
  display: "flex",
3588
3681
  alignItems: "center",
3589
3682
  justifyContent: "center",
3590
- borderColor: token.colorPrimary,
3683
+ borderRadius: 8,
3684
+ borderColor: "#D9D9D9",
3685
+ background: "#FFF !important",
3686
+ boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.02) !important",
3591
3687
  color: token.colorPrimary,
3688
+ "& .ant-btn-icon": {
3689
+ display: "flex",
3690
+ alignItems: "center",
3691
+ justifyContent: "center"
3692
+ },
3592
3693
  "&:hover": {
3593
3694
  borderColor: `${token.colorPrimary} !important`,
3594
3695
  color: `${token.colorPrimary} !important`
3595
3696
  }
3596
3697
  },
3597
3698
  [scope("param-delete-btn")]: {
3598
- width: 32,
3599
- height: 32,
3699
+ width: 40,
3700
+ height: 40,
3600
3701
  padding: 0,
3601
3702
  display: "flex",
3602
3703
  alignItems: "center",
3603
- justifyContent: "center"
3704
+ justifyContent: "center",
3705
+ "& svg path[mask]": { display: "none" }
3604
3706
  },
3605
3707
  [".delete-param-confirm-modal .ant-modal-container"]: {
3606
3708
  "--ant-modal-content-padding": "0px !important",
@@ -3924,46 +4026,1172 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3924
4026
  }
3925
4027
  }
3926
4028
  ];
3927
- return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
3928
- className: cx("root"),
3929
- children: [
3930
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
3931
- className: cx("head"),
3932
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
4029
+ if (selectedEndpointKey) {
4030
+ const ep = Object.values(endpointsByTag).flat().find((e) => e.id === selectedEndpointKey);
4031
+ if (!ep) return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {}));
4032
+ const methodColor = methodColors$1[ep.method];
4033
+ const epHeader = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4034
+ style: {
4035
+ display: "flex",
4036
+ alignItems: "center",
4037
+ gap: token.marginXS,
4038
+ marginBottom: token.marginLG
4039
+ },
4040
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4041
+ className: cx("method-badge"),
4042
+ style: {
4043
+ color: methodColor?.color,
4044
+ backgroundColor: methodColor?.bg ?? "transparent"
4045
+ },
4046
+ children: ep.method
4047
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
4048
+ title: ep.path,
4049
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
3933
4050
  level: 4,
3934
4051
  style: {
3935
4052
  margin: 0,
3936
4053
  color: token.colorTextHeading
3937
4054
  },
3938
- children: "Endpoints"
3939
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
3940
- type: "text",
3941
- size: "large",
3942
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.UpCircleOutlined, { style: { fontSize: 18 } }),
3943
- onClick: onToggleCollapse,
3944
- style: {
3945
- transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
3946
- transition: "transform 0.2s"
3947
- }
3948
- })]
3949
- }),
3950
- !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
3951
- className: cx("body"),
3952
- children: Object.values(endpointsByTag).flat().map((ep) => {
3953
- const isExpanded = expandedId === ep.id;
3954
- const methodColor = methodColors$1[ep.method];
3955
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
3956
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
3957
- className: cx("endpoint-row"),
3958
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
3959
- className: cx("endpoint-card", isExpanded ? "endpoint-card-active" : ""),
3960
- onClick: () => handleEndpointClick(ep),
3961
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
3962
- className: cx("method-badge"),
3963
- style: {
3964
- color: isExpanded ? "#ffffff" : methodColor?.color,
3965
- borderColor: methodColor?.color,
3966
- backgroundColor: isExpanded ? methodColor?.color : "transparent"
4055
+ children: ep.path
4056
+ })
4057
+ })]
4058
+ });
4059
+ return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4060
+ className: cx("root"),
4061
+ children: [
4062
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tabs, {
4063
+ activeKey: activeTab,
4064
+ onChange: setActiveTab,
4065
+ tabBarStyle: {
4066
+ background: "transparent",
4067
+ padding: "0 16px",
4068
+ marginBottom: 16
4069
+ },
4070
+ tabBarGutter: 32,
4071
+ style: { borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px` },
4072
+ items: [
4073
+ {
4074
+ key: "general",
4075
+ label: "General",
4076
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [epHeader, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4077
+ style: {
4078
+ display: "flex",
4079
+ flexDirection: "column",
4080
+ gap: token.paddingLG
4081
+ },
4082
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4083
+ className: cx("form-row"),
4084
+ style: isMobile ? { flexDirection: "column" } : void 0,
4085
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4086
+ className: cx("form-field"),
4087
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4088
+ className: cx("field-label"),
4089
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Endpoint Name" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4090
+ className: cx("label-required"),
4091
+ children: "*"
4092
+ })]
4093
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
4094
+ size: "large",
4095
+ value: endpointNames[ep.id] ?? ep.summary ?? "",
4096
+ onChange: (e) => onEndpointNameChange(ep.id, e.target.value),
4097
+ maxLength: 100,
4098
+ showCount: true
4099
+ })]
4100
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4101
+ className: cx("form-field"),
4102
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4103
+ className: cx("field-label"),
4104
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Endpoint Tag" })
4105
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Select, {
4106
+ mode: "multiple",
4107
+ size: "large",
4108
+ style: { width: "100%" },
4109
+ placeholder: "Select",
4110
+ value: endpointTags[ep.id] ?? ep.tags ?? [],
4111
+ options: availableTags.map((t) => ({
4112
+ label: t,
4113
+ value: t
4114
+ })),
4115
+ onChange: (val) => onEndpointTagsChange(ep.id, val)
4116
+ })]
4117
+ })]
4118
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4119
+ className: cx("form-field"),
4120
+ style: { width: "100%" },
4121
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4122
+ className: cx("field-label"),
4123
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Description" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4124
+ className: cx("label-optional"),
4125
+ children: "(optional)"
4126
+ })]
4127
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
4128
+ value: endpointDescs[ep.id] ?? ep.description ?? "",
4129
+ onChange: (e) => onEndpointDescChange(ep.id, e.target.value),
4130
+ maxLength: 500,
4131
+ showCount: true,
4132
+ style: {
4133
+ height: 52,
4134
+ resize: "vertical"
4135
+ }
4136
+ })]
4137
+ })]
4138
+ })] })
4139
+ },
4140
+ {
4141
+ key: "request",
4142
+ label: "Request",
4143
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [epHeader, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4144
+ className: cx("form-field"),
4145
+ style: { width: "100%" },
4146
+ children: [
4147
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4148
+ className: cx("section-header"),
4149
+ children: isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4150
+ style: {
4151
+ display: "flex",
4152
+ alignItems: "center",
4153
+ gap: token.marginMD
4154
+ },
4155
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4156
+ className: cx("section-title"),
4157
+ children: "Request Details"
4158
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4159
+ ghost: true,
4160
+ type: "primary",
4161
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.SearchOutlined, {}),
4162
+ size: "large",
4163
+ style: {
4164
+ width: 40,
4165
+ height: 40,
4166
+ padding: 0
4167
+ },
4168
+ disabled: (endpointParams[ep.id] ?? []).length === 0,
4169
+ onClick: () => setShowRequestSearch((prev) => ({
4170
+ ...prev,
4171
+ [ep.id]: !prev[ep.id]
4172
+ }))
4173
+ })]
4174
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4175
+ ghost: true,
4176
+ type: "primary",
4177
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
4178
+ onClick: () => {
4179
+ setDrawerSource("request");
4180
+ setParamDrawerMode("add");
4181
+ setEditParamIdx(null);
4182
+ setParamDrawerEndpointId(ep.id);
4183
+ setParamDrawerOpen(true);
4184
+ },
4185
+ children: "Add Parameter"
4186
+ })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4187
+ style: {
4188
+ display: "flex",
4189
+ alignItems: "center",
4190
+ gap: 24
4191
+ },
4192
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4193
+ className: cx("section-title"),
4194
+ children: "Request Details"
4195
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.Search, {
4196
+ placeholder: "Search by parameter name",
4197
+ style: { width: 310 },
4198
+ disabled: (endpointParams[ep.id] ?? []).length === 0,
4199
+ value: requestSearches[ep.id] ?? "",
4200
+ onChange: (e) => {
4201
+ const val = e.target.value;
4202
+ setRequestSearches((prev) => ({
4203
+ ...prev,
4204
+ [ep.id]: val
4205
+ }));
4206
+ setRequestPages((prev) => new Map(prev).set(ep.id, 1));
4207
+ },
4208
+ allowClear: true
4209
+ })]
4210
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4211
+ ghost: true,
4212
+ type: "primary",
4213
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
4214
+ onClick: () => {
4215
+ setDrawerSource("request");
4216
+ setParamDrawerMode("add");
4217
+ setEditParamIdx(null);
4218
+ setParamDrawerEndpointId(ep.id);
4219
+ setParamDrawerOpen(true);
4220
+ },
4221
+ children: "Add Parameter"
4222
+ })] })
4223
+ }),
4224
+ isMobile && showRequestSearch[ep.id] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.Search, {
4225
+ placeholder: "Search by parameter name",
4226
+ style: {
4227
+ width: "100%",
4228
+ marginTop: 8
4229
+ },
4230
+ disabled: (endpointParams[ep.id] ?? []).length === 0,
4231
+ value: requestSearches[ep.id] ?? "",
4232
+ onChange: (e) => {
4233
+ const val = e.target.value;
4234
+ setRequestSearches((prev) => ({
4235
+ ...prev,
4236
+ [ep.id]: val
4237
+ }));
4238
+ setRequestPages((prev) => new Map(prev).set(ep.id, 1));
4239
+ },
4240
+ allowClear: true,
4241
+ autoFocus: true
4242
+ }),
4243
+ (endpointParams[ep.id] ?? []).length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4244
+ className: cx("empty-wrapper"),
4245
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Empty, {
4246
+ image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
4247
+ imageStyle: {
4248
+ width: 184,
4249
+ height: 117
4250
+ },
4251
+ description: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4252
+ className: cx("empty-description"),
4253
+ children: "No Data"
4254
+ })
4255
+ })
4256
+ }) : (() => {
4257
+ const reqSearch = (debouncedRequestSearches[ep.id] ?? "").toLowerCase();
4258
+ const allReqParams = (endpointParams[ep.id] ?? []).filter((p) => p.name.toLowerCase().includes(reqSearch));
4259
+ if (allReqParams.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4260
+ className: cx("empty-wrapper"),
4261
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Empty, {
4262
+ image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
4263
+ imageStyle: {
4264
+ width: 184,
4265
+ height: 117
4266
+ },
4267
+ description: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4268
+ className: cx("empty-description"),
4269
+ children: "No Data"
4270
+ })
4271
+ })
4272
+ });
4273
+ const reqPage = requestPages.get(ep.id) ?? 1;
4274
+ const pagedReqParams = allReqParams.slice((reqPage - 1) * PAGE_SIZE, reqPage * PAGE_SIZE);
4275
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4276
+ className: cx("param-list"),
4277
+ style: { marginTop: token.margin },
4278
+ children: pagedReqParams.map((param, i) => {
4279
+ const idx = (reqPage - 1) * PAGE_SIZE + i;
4280
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4281
+ className: cx("param-item-row"),
4282
+ children: isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4283
+ style: {
4284
+ display: "flex",
4285
+ alignItems: "center",
4286
+ gap: 24,
4287
+ flex: 1,
4288
+ minWidth: 0
4289
+ },
4290
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4291
+ className: cx("param-detail-cell"),
4292
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4293
+ className: cx("param-detail-label"),
4294
+ children: "Parameter Name"
4295
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4296
+ className: cx("param-detail-value"),
4297
+ children: param.name
4298
+ })]
4299
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4300
+ className: cx("param-detail-cell"),
4301
+ style: {
4302
+ flex: 1,
4303
+ minWidth: 0
4304
+ },
4305
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4306
+ className: cx("param-detail-label"),
4307
+ children: "Parameter In"
4308
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4309
+ className: cx("param-detail-value"),
4310
+ children: param.in
4311
+ })]
4312
+ })]
4313
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4314
+ style: {
4315
+ display: "flex",
4316
+ alignItems: "center",
4317
+ gap: token.margin,
4318
+ background: token.colorFillTertiary,
4319
+ borderRadius: token.borderRadius,
4320
+ padding: `0 ${token.marginSM}px`,
4321
+ height: 50,
4322
+ flexShrink: 0
4323
+ },
4324
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4325
+ danger: true,
4326
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4327
+ width: 32,
4328
+ height: 32
4329
+ }),
4330
+ style: {
4331
+ padding: 0,
4332
+ lineHeight: 1,
4333
+ width: 40,
4334
+ height: 40
4335
+ },
4336
+ className: cx("param-delete-btn"),
4337
+ onClick: () => setDeleteParamModal({
4338
+ open: true,
4339
+ endpointId: ep.id,
4340
+ idx,
4341
+ name: param.name,
4342
+ source: "request"
4343
+ })
4344
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4345
+ ghost: true,
4346
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
4347
+ width: 18,
4348
+ height: 18
4349
+ }),
4350
+ style: {
4351
+ width: 40,
4352
+ height: 40,
4353
+ padding: 0,
4354
+ lineHeight: 1
4355
+ },
4356
+ className: cx("param-edit-btn"),
4357
+ onClick: () => {
4358
+ setDrawerSource("request");
4359
+ setParamDrawerMode("edit");
4360
+ setEditParamIdx(idx);
4361
+ setParamDrawerEndpointId(ep.id);
4362
+ setParamDrawerOpen(true);
4363
+ }
4364
+ })]
4365
+ })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4366
+ className: cx("param-details"),
4367
+ children: [
4368
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4369
+ className: cx("param-detail-cell"),
4370
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4371
+ className: cx("param-detail-label"),
4372
+ children: "Parameter Name"
4373
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4374
+ className: cx("param-detail-value"),
4375
+ children: param.name
4376
+ })]
4377
+ }),
4378
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4379
+ className: cx("param-detail-cell"),
4380
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4381
+ className: cx("param-detail-label"),
4382
+ children: "Parameter In"
4383
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4384
+ className: cx("param-detail-value"),
4385
+ children: param.in
4386
+ })]
4387
+ }),
4388
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4389
+ className: cx("param-detail-cell"),
4390
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4391
+ className: cx("param-detail-label"),
4392
+ children: "Parameter Type"
4393
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4394
+ className: cx("param-detail-value"),
4395
+ children: param.type
4396
+ })]
4397
+ }),
4398
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4399
+ className: cx("param-detail-cell"),
4400
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4401
+ className: cx("param-detail-label"),
4402
+ children: "Enum"
4403
+ }), param.enum && param.enum.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4404
+ className: cx("param-enum-container"),
4405
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4406
+ className: cx("param-enum-tag"),
4407
+ children: param.enum[0]
4408
+ }), param.enum.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
4409
+ title: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
4410
+ style: {
4411
+ margin: 0,
4412
+ paddingLeft: 16
4413
+ },
4414
+ children: param.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: e }, e))
4415
+ }),
4416
+ placement: "bottom",
4417
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4418
+ className: cx("param-enum-pill"),
4419
+ children: ["+", param.enum.length - 1]
4420
+ })
4421
+ })]
4422
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4423
+ className: cx("param-detail-value"),
4424
+ children: "—"
4425
+ })]
4426
+ }),
4427
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4428
+ className: cx("param-detail-cell"),
4429
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4430
+ className: cx("param-detail-label"),
4431
+ children: "Required?"
4432
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4433
+ className: cx("param-detail-value"),
4434
+ children: param.required ? "Yes" : "No"
4435
+ })]
4436
+ }),
4437
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4438
+ className: cx("param-detail-cell"),
4439
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4440
+ className: cx("param-detail-label"),
4441
+ children: "Description"
4442
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4443
+ className: cx("param-detail-value", "param-detail-value--ellipsis"),
4444
+ children: param.description || "—"
4445
+ })]
4446
+ })
4447
+ ]
4448
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4449
+ className: cx("param-actions"),
4450
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4451
+ danger: true,
4452
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4453
+ width: 32,
4454
+ height: 32
4455
+ }),
4456
+ style: {
4457
+ padding: 0,
4458
+ lineHeight: 1,
4459
+ width: 40,
4460
+ height: 40
4461
+ },
4462
+ className: cx("param-delete-btn"),
4463
+ onClick: () => setDeleteParamModal({
4464
+ open: true,
4465
+ endpointId: ep.id,
4466
+ idx,
4467
+ name: param.name,
4468
+ source: "request"
4469
+ })
4470
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4471
+ ghost: true,
4472
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
4473
+ width: 18,
4474
+ height: 18
4475
+ }),
4476
+ style: {
4477
+ width: 40,
4478
+ height: 40,
4479
+ padding: 0,
4480
+ lineHeight: 1
4481
+ },
4482
+ className: cx("param-edit-btn"),
4483
+ onClick: () => {
4484
+ setDrawerSource("request");
4485
+ setParamDrawerMode("edit");
4486
+ setEditParamIdx(idx);
4487
+ setParamDrawerEndpointId(ep.id);
4488
+ setParamDrawerOpen(true);
4489
+ }
4490
+ })]
4491
+ })] })
4492
+ }, idx);
4493
+ })
4494
+ }), allReqParams.length > PAGE_SIZE && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Pagination, {
4495
+ current: reqPage,
4496
+ pageSize: PAGE_SIZE,
4497
+ total: allReqParams.length,
4498
+ onChange: (page) => setRequestPages((prev) => new Map(prev).set(ep.id, page)),
4499
+ showSizeChanger: false,
4500
+ className: cx("pagination")
4501
+ })] });
4502
+ })(),
4503
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4504
+ className: cx("param-row"),
4505
+ style: { marginTop: token.margin },
4506
+ onClick: () => toggleRequestPanel(ep.id),
4507
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openRequestPanels.has(ep.id) ? "param-row-icon--open" : "") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4508
+ style: { fontSize: token.fontSize },
4509
+ children: ["Request ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4510
+ style: { color: token.colorError },
4511
+ children: "*"
4512
+ })]
4513
+ })]
4514
+ }),
4515
+ openRequestPanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4516
+ className: cx("code-panel"),
4517
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
4518
+ className: cx("code-area"),
4519
+ children: JSON.stringify((endpointParams[ep.id] ?? []).map((p) => ({
4520
+ name: p.name,
4521
+ in: p.in,
4522
+ type: p.type,
4523
+ required: p.required,
4524
+ ...p.description ? { description: p.description } : {},
4525
+ ...p.enum && p.enum.length > 0 ? { enum: p.enum } : {}
4526
+ })), null, 2)
4527
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4528
+ className: cx("code-footer"),
4529
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4530
+ ghost: true,
4531
+ size: "small",
4532
+ className: cx("code-btn"),
4533
+ children: "Validate"
4534
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4535
+ ghost: true,
4536
+ size: "small",
4537
+ className: cx("code-btn"),
4538
+ children: "Beautify"
4539
+ })]
4540
+ })]
4541
+ })
4542
+ ]
4543
+ })] })
4544
+ },
4545
+ {
4546
+ key: "response",
4547
+ label: "Response",
4548
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [epHeader, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4549
+ className: cx("form-field"),
4550
+ style: { width: "100%" },
4551
+ children: [
4552
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4553
+ className: cx("section-header"),
4554
+ children: isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4555
+ style: {
4556
+ display: "flex",
4557
+ alignItems: "center",
4558
+ gap: token.marginMD
4559
+ },
4560
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4561
+ className: cx("section-title"),
4562
+ children: "Response Details"
4563
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4564
+ ghost: true,
4565
+ type: "primary",
4566
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.SearchOutlined, {}),
4567
+ size: "large",
4568
+ style: {
4569
+ width: 40,
4570
+ height: 40,
4571
+ padding: 0
4572
+ },
4573
+ disabled: (endpointResponseParams[ep.id] ?? []).length === 0,
4574
+ onClick: () => setShowResponseSearch((prev) => ({
4575
+ ...prev,
4576
+ [ep.id]: !prev[ep.id]
4577
+ }))
4578
+ })]
4579
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4580
+ ghost: true,
4581
+ type: "primary",
4582
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
4583
+ onClick: () => {
4584
+ setDrawerSource("response");
4585
+ setParamDrawerMode("add");
4586
+ setEditParamIdx(null);
4587
+ setParamDrawerEndpointId(ep.id);
4588
+ setParamDrawerOpen(true);
4589
+ },
4590
+ children: "Add Parameter"
4591
+ })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4592
+ style: {
4593
+ display: "flex",
4594
+ alignItems: "center",
4595
+ gap: 24
4596
+ },
4597
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4598
+ className: cx("section-title"),
4599
+ children: "Response Details"
4600
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4601
+ className: cx("response-controls"),
4602
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.Search, {
4603
+ placeholder: "Search by parameter name",
4604
+ style: { width: 310 },
4605
+ disabled: (endpointResponseParams[ep.id] ?? []).length === 0,
4606
+ value: responseSearches[ep.id] ?? "",
4607
+ onChange: (e) => {
4608
+ const val = e.target.value;
4609
+ setResponseSearches((prev) => ({
4610
+ ...prev,
4611
+ [ep.id]: val
4612
+ }));
4613
+ setResponsePages((prev) => new Map(prev).set(ep.id, 1));
4614
+ },
4615
+ allowClear: true
4616
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
4617
+ title: selectedStatusCodes[ep.id] ? "Filled" : void 0,
4618
+ placement: "bottom",
4619
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Select, {
4620
+ className: cx("status-select"),
4621
+ popupClassName: "status-code-dropdown",
4622
+ value: selectedStatusCodes[ep.id] ?? void 0,
4623
+ onChange: (val) => setSelectedStatusCodes((prev) => ({
4624
+ ...prev,
4625
+ [ep.id]: val
4626
+ })),
4627
+ options: Object.keys(ep.responses ?? {}).map((code) => ({
4628
+ value: code,
4629
+ label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4630
+ className: cx("status-label"),
4631
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4632
+ className: cx("status-dot"),
4633
+ style: { background: getStatusCodeColor(code, antdToken).dot }
4634
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4635
+ style: { color: getStatusCodeColor(code, antdToken).text },
4636
+ children: code
4637
+ })]
4638
+ })
4639
+ })),
4640
+ optionRender: (option) => {
4641
+ const code = option.value;
4642
+ const { dot, text } = getStatusCodeColor(code, antdToken);
4643
+ const isSelected = selectedStatusCodes[ep.id] === code;
4644
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
4645
+ title: "Filled",
4646
+ placement: "bottom",
4647
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4648
+ className: cx("status-option-content"),
4649
+ children: [
4650
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4651
+ className: cx("status-dot"),
4652
+ style: { background: dot }
4653
+ }),
4654
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4655
+ style: { color: text },
4656
+ children: code
4657
+ }),
4658
+ isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.CheckCircleOutlined, {
4659
+ className: cx("status-checkmark"),
4660
+ style: { color: text }
4661
+ })
4662
+ ]
4663
+ })
4664
+ });
4665
+ }
4666
+ })
4667
+ })]
4668
+ })]
4669
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4670
+ ghost: true,
4671
+ type: "primary",
4672
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
4673
+ onClick: () => {
4674
+ setDrawerSource("response");
4675
+ setParamDrawerMode("add");
4676
+ setEditParamIdx(null);
4677
+ setParamDrawerEndpointId(ep.id);
4678
+ setParamDrawerOpen(true);
4679
+ },
4680
+ children: "Add Parameter"
4681
+ })] })
4682
+ }),
4683
+ isMobile && showResponseSearch[ep.id] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.Search, {
4684
+ placeholder: "Search by parameter name",
4685
+ style: {
4686
+ width: "100%",
4687
+ marginTop: 8
4688
+ },
4689
+ disabled: (endpointResponseParams[ep.id] ?? []).length === 0,
4690
+ value: responseSearches[ep.id] ?? "",
4691
+ onChange: (e) => {
4692
+ const val = e.target.value;
4693
+ setResponseSearches((prev) => ({
4694
+ ...prev,
4695
+ [ep.id]: val
4696
+ }));
4697
+ setResponsePages((prev) => new Map(prev).set(ep.id, 1));
4698
+ },
4699
+ allowClear: true,
4700
+ autoFocus: true
4701
+ }),
4702
+ (endpointResponseParams[ep.id] ?? []).length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4703
+ className: cx("empty-wrapper"),
4704
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Empty, {
4705
+ image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
4706
+ imageStyle: {
4707
+ width: 184,
4708
+ height: 117
4709
+ },
4710
+ description: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4711
+ className: cx("empty-description"),
4712
+ children: "No Data"
4713
+ })
4714
+ })
4715
+ }) : (() => {
4716
+ const resSearch = (debouncedResponseSearches[ep.id] ?? "").toLowerCase();
4717
+ const allResParams = (endpointResponseParams[ep.id] ?? []).filter((p) => p.name.toLowerCase().includes(resSearch));
4718
+ if (allResParams.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4719
+ className: cx("empty-wrapper"),
4720
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Empty, {
4721
+ image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
4722
+ imageStyle: {
4723
+ width: 184,
4724
+ height: 117
4725
+ },
4726
+ description: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4727
+ className: cx("empty-description"),
4728
+ children: "No Data"
4729
+ })
4730
+ })
4731
+ });
4732
+ const resPage = responsePages.get(ep.id) ?? 1;
4733
+ const pagedResParams = allResParams.slice((resPage - 1) * PAGE_SIZE, resPage * PAGE_SIZE);
4734
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4735
+ className: cx("param-list"),
4736
+ style: { marginTop: token.margin },
4737
+ children: pagedResParams.map((param, i) => {
4738
+ const idx = (resPage - 1) * PAGE_SIZE + i;
4739
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
4740
+ className: cx("param-item-row"),
4741
+ children: isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4742
+ style: {
4743
+ display: "flex",
4744
+ alignItems: "center",
4745
+ gap: 24,
4746
+ flex: 1,
4747
+ minWidth: 0
4748
+ },
4749
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4750
+ className: cx("param-detail-cell"),
4751
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4752
+ className: cx("param-detail-label"),
4753
+ children: "Parameter Name"
4754
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4755
+ className: cx("param-detail-value"),
4756
+ children: param.name
4757
+ })]
4758
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4759
+ className: cx("param-detail-cell"),
4760
+ style: {
4761
+ flex: 1,
4762
+ minWidth: 0
4763
+ },
4764
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4765
+ className: cx("param-detail-label"),
4766
+ children: "Parameter In"
4767
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4768
+ className: cx("param-detail-value"),
4769
+ children: param.in
4770
+ })]
4771
+ })]
4772
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4773
+ style: {
4774
+ display: "flex",
4775
+ alignItems: "center",
4776
+ gap: token.margin,
4777
+ background: token.colorFillTertiary,
4778
+ borderRadius: token.borderRadius,
4779
+ padding: `0 ${token.marginSM}px`,
4780
+ height: 50,
4781
+ flexShrink: 0
4782
+ },
4783
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4784
+ danger: true,
4785
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4786
+ width: 32,
4787
+ height: 32
4788
+ }),
4789
+ style: {
4790
+ padding: 0,
4791
+ lineHeight: 1,
4792
+ width: 40,
4793
+ height: 40
4794
+ },
4795
+ className: cx("param-delete-btn"),
4796
+ onClick: () => setDeleteParamModal({
4797
+ open: true,
4798
+ endpointId: ep.id,
4799
+ idx,
4800
+ name: param.name,
4801
+ source: "response"
4802
+ })
4803
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4804
+ ghost: true,
4805
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
4806
+ width: 18,
4807
+ height: 18
4808
+ }),
4809
+ style: {
4810
+ width: 40,
4811
+ height: 40,
4812
+ padding: 0,
4813
+ lineHeight: 1
4814
+ },
4815
+ className: cx("param-edit-btn"),
4816
+ onClick: () => {
4817
+ setDrawerSource("response");
4818
+ setParamDrawerMode("edit");
4819
+ setEditParamIdx(idx);
4820
+ setParamDrawerEndpointId(ep.id);
4821
+ setParamDrawerOpen(true);
4822
+ }
4823
+ })]
4824
+ })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4825
+ className: cx("param-details"),
4826
+ children: [
4827
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4828
+ className: cx("param-detail-cell"),
4829
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4830
+ className: cx("param-detail-label"),
4831
+ children: "Parameter Name"
4832
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4833
+ className: cx("param-detail-value"),
4834
+ children: param.name
4835
+ })]
4836
+ }),
4837
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4838
+ className: cx("param-detail-cell"),
4839
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4840
+ className: cx("param-detail-label"),
4841
+ children: "Parameter In"
4842
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4843
+ className: cx("param-detail-value"),
4844
+ children: param.in
4845
+ })]
4846
+ }),
4847
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4848
+ className: cx("param-detail-cell"),
4849
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4850
+ className: cx("param-detail-label"),
4851
+ children: "Parameter Type"
4852
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4853
+ className: cx("param-detail-value"),
4854
+ children: param.type
4855
+ })]
4856
+ }),
4857
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4858
+ className: cx("param-detail-cell"),
4859
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4860
+ className: cx("param-detail-label"),
4861
+ children: "Enum"
4862
+ }), param.enum && param.enum.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4863
+ className: cx("param-enum-container"),
4864
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4865
+ className: cx("param-enum-tag"),
4866
+ children: param.enum[0]
4867
+ }), param.enum.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
4868
+ title: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
4869
+ style: {
4870
+ margin: 0,
4871
+ paddingLeft: 16
4872
+ },
4873
+ children: param.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: e }, e))
4874
+ }),
4875
+ placement: "bottom",
4876
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4877
+ className: cx("param-enum-pill"),
4878
+ children: ["+", param.enum.length - 1]
4879
+ })
4880
+ })]
4881
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4882
+ className: cx("param-detail-value"),
4883
+ children: "—"
4884
+ })]
4885
+ }),
4886
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4887
+ className: cx("param-detail-cell"),
4888
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4889
+ className: cx("param-detail-label"),
4890
+ children: "Required?"
4891
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4892
+ className: cx("param-detail-value"),
4893
+ children: param.required ? "Yes" : "No"
4894
+ })]
4895
+ }),
4896
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4897
+ className: cx("param-detail-cell"),
4898
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4899
+ className: cx("param-detail-label"),
4900
+ children: "Description"
4901
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4902
+ className: cx("param-detail-value", "param-detail-value--ellipsis"),
4903
+ children: param.description || "—"
4904
+ })]
4905
+ })
4906
+ ]
4907
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4908
+ className: cx("param-actions"),
4909
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4910
+ danger: true,
4911
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4912
+ width: 32,
4913
+ height: 32
4914
+ }),
4915
+ style: {
4916
+ padding: 0,
4917
+ lineHeight: 1,
4918
+ width: 40,
4919
+ height: 40
4920
+ },
4921
+ className: cx("param-delete-btn"),
4922
+ onClick: () => setDeleteParamModal({
4923
+ open: true,
4924
+ endpointId: ep.id,
4925
+ idx,
4926
+ name: param.name,
4927
+ source: "response"
4928
+ })
4929
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4930
+ ghost: true,
4931
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
4932
+ width: 18,
4933
+ height: 18
4934
+ }),
4935
+ style: {
4936
+ width: 40,
4937
+ height: 40,
4938
+ padding: 0,
4939
+ lineHeight: 1
4940
+ },
4941
+ className: cx("param-edit-btn"),
4942
+ onClick: () => {
4943
+ setDrawerSource("response");
4944
+ setParamDrawerMode("edit");
4945
+ setEditParamIdx(idx);
4946
+ setParamDrawerEndpointId(ep.id);
4947
+ setParamDrawerOpen(true);
4948
+ }
4949
+ })]
4950
+ })] })
4951
+ }, idx);
4952
+ })
4953
+ }), allResParams.length > PAGE_SIZE && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Pagination, {
4954
+ current: resPage,
4955
+ pageSize: PAGE_SIZE,
4956
+ total: allResParams.length,
4957
+ onChange: (page) => setResponsePages((prev) => new Map(prev).set(ep.id, page)),
4958
+ showSizeChanger: false,
4959
+ className: cx("pagination")
4960
+ })] });
4961
+ })(),
4962
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4963
+ className: cx("param-row"),
4964
+ style: { marginTop: token.margin },
4965
+ onClick: () => toggleResponsePanel(ep.id),
4966
+ children: [
4967
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openResponsePanels.has(ep.id) ? "param-row-icon--open" : "") }),
4968
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4969
+ style: { fontSize: token.fontSize },
4970
+ children: ["Response ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4971
+ style: { color: token.colorError },
4972
+ children: "*"
4973
+ })]
4974
+ }),
4975
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoCircle, { style: {
4976
+ width: 24,
4977
+ height: 24
4978
+ } })
4979
+ ]
4980
+ }),
4981
+ openResponsePanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4982
+ className: cx("code-panel"),
4983
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
4984
+ className: cx("code-area"),
4985
+ children: JSON.stringify((endpointResponseParams[ep.id] ?? []).map((p) => ({
4986
+ name: p.name,
4987
+ in: p.in,
4988
+ type: p.type,
4989
+ required: p.required,
4990
+ ...p.description ? { description: p.description } : {},
4991
+ ...p.enum && p.enum.length > 0 ? { enum: p.enum } : {}
4992
+ })), null, 2)
4993
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4994
+ className: cx("code-footer"),
4995
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4996
+ ghost: true,
4997
+ size: "small",
4998
+ className: cx("code-btn"),
4999
+ children: "Validate"
5000
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5001
+ ghost: true,
5002
+ size: "small",
5003
+ className: cx("code-btn"),
5004
+ children: "Beautify"
5005
+ })]
5006
+ })]
5007
+ })
5008
+ ]
5009
+ })] })
5010
+ }
5011
+ ]
5012
+ }),
5013
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Modal, {
5014
+ open: deleteParamModal.open,
5015
+ onCancel: () => setDeleteParamModal({
5016
+ open: false,
5017
+ endpointId: "",
5018
+ idx: -1,
5019
+ name: "",
5020
+ source: "request"
5021
+ }),
5022
+ centered: true,
5023
+ title: null,
5024
+ footer: null,
5025
+ closable: false,
5026
+ width: 520,
5027
+ className: "delete-param-confirm-modal",
5028
+ styles: {
5029
+ content: {
5030
+ padding: 0,
5031
+ borderRadius: 8,
5032
+ overflow: "hidden"
5033
+ },
5034
+ body: {
5035
+ padding: 0,
5036
+ margin: 0
5037
+ }
5038
+ },
5039
+ children: [
5040
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5041
+ className: cx("deleteModalHead"),
5042
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
5043
+ className: cx("deleteModalTitle"),
5044
+ children: [
5045
+ "Delete ",
5046
+ deleteParamModal.name,
5047
+ " parameter"
5048
+ ]
5049
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
5050
+ className: cx("deleteModalCloseBtn"),
5051
+ onClick: () => setDeleteParamModal({
5052
+ open: false,
5053
+ endpointId: "",
5054
+ idx: -1,
5055
+ name: "",
5056
+ source: "request"
5057
+ }),
5058
+ "aria-label": "Close",
5059
+ children: "×"
5060
+ })]
5061
+ }),
5062
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5063
+ className: cx("deleteModalContent"),
5064
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
5065
+ className: cx("deleteModalContentText"),
5066
+ children: [
5067
+ "Are you sure you want to delete ",
5068
+ deleteParamModal.name,
5069
+ " parameter?"
5070
+ ]
5071
+ })
5072
+ }),
5073
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5074
+ className: cx("deleteModalFooter"),
5075
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5076
+ size: "middle",
5077
+ onClick: () => setDeleteParamModal({
5078
+ open: false,
5079
+ endpointId: "",
5080
+ idx: -1,
5081
+ name: "",
5082
+ source: "request"
5083
+ }),
5084
+ style: {
5085
+ borderRadius: 8,
5086
+ height: 32,
5087
+ paddingInline: 15
5088
+ },
5089
+ children: "Cancel"
5090
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5091
+ type: "primary",
5092
+ danger: true,
5093
+ size: "middle",
5094
+ style: {
5095
+ borderRadius: 8,
5096
+ height: 32,
5097
+ paddingInline: 16
5098
+ },
5099
+ onClick: () => {
5100
+ const epId = deleteParamModal.endpointId;
5101
+ if (deleteParamModal.source === "response") {
5102
+ const total = (endpointResponseParams[epId] ?? []).length - 1;
5103
+ const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
5104
+ if ((responsePages.get(epId) ?? 1) > maxPage) setResponsePages((prev) => new Map(prev).set(epId, 1));
5105
+ onDeleteResponseParameter?.(epId, deleteParamModal.idx);
5106
+ } else {
5107
+ const total = (endpointParams[epId] ?? []).length - 1;
5108
+ const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
5109
+ if ((requestPages.get(epId) ?? 1) > maxPage) setRequestPages((prev) => new Map(prev).set(epId, 1));
5110
+ onDeleteParameter?.(epId, deleteParamModal.idx);
5111
+ }
5112
+ setDeleteParamModal({
5113
+ open: false,
5114
+ endpointId: "",
5115
+ idx: -1,
5116
+ name: "",
5117
+ source: "request"
5118
+ });
5119
+ },
5120
+ children: "Yes, Delete"
5121
+ })]
5122
+ })
5123
+ ]
5124
+ }),
5125
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddParameterDrawer, {
5126
+ open: paramDrawerOpen,
5127
+ mode: paramDrawerMode,
5128
+ initialValues: paramDrawerMode === "edit" && paramDrawerEndpointId && editParamIdx !== null ? drawerSource === "response" ? endpointResponseParams[paramDrawerEndpointId]?.[editParamIdx] : endpointParams[paramDrawerEndpointId]?.[editParamIdx] : void 0,
5129
+ onClose: () => {
5130
+ setParamDrawerOpen(false);
5131
+ setParamDrawerEndpointId(null);
5132
+ setParamDrawerMode("add");
5133
+ setEditParamIdx(null);
5134
+ },
5135
+ onAdd: (param) => {
5136
+ if (paramDrawerEndpointId) if (drawerSource === "response") onAddResponseParameter?.(paramDrawerEndpointId, param);
5137
+ else onAddParameter?.(paramDrawerEndpointId, param);
5138
+ setParamDrawerOpen(false);
5139
+ setParamDrawerEndpointId(null);
5140
+ setParamDrawerMode("add");
5141
+ setEditParamIdx(null);
5142
+ },
5143
+ onEdit: (param) => {
5144
+ if (paramDrawerEndpointId && editParamIdx !== null) if (drawerSource === "response") onEditResponseParameter?.(paramDrawerEndpointId, editParamIdx, param);
5145
+ else onEditParameter?.(paramDrawerEndpointId, editParamIdx, param);
5146
+ setParamDrawerOpen(false);
5147
+ setParamDrawerEndpointId(null);
5148
+ setParamDrawerMode("add");
5149
+ setEditParamIdx(null);
5150
+ }
5151
+ })
5152
+ ]
5153
+ }));
5154
+ }
5155
+ return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5156
+ className: cx("root"),
5157
+ children: [
5158
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5159
+ className: cx("head"),
5160
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
5161
+ level: 4,
5162
+ style: {
5163
+ margin: 0,
5164
+ color: token.colorTextHeading
5165
+ },
5166
+ children: "Endpoints"
5167
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5168
+ type: "text",
5169
+ size: "large",
5170
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.UpCircleOutlined, { style: { fontSize: 18 } }),
5171
+ onClick: onToggleCollapse,
5172
+ style: {
5173
+ transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
5174
+ transition: "transform 0.2s"
5175
+ }
5176
+ })]
5177
+ }),
5178
+ !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5179
+ className: cx("body"),
5180
+ children: Object.values(endpointsByTag).flat().map((ep) => {
5181
+ const isExpanded = expandedId === ep.id;
5182
+ const methodColor = methodColors$1[ep.method];
5183
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
5184
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5185
+ className: cx("endpoint-row"),
5186
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5187
+ className: cx("endpoint-card", isExpanded ? "endpoint-card-active" : ""),
5188
+ onClick: () => handleEndpointClick(ep),
5189
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5190
+ className: cx("method-badge"),
5191
+ style: {
5192
+ color: isExpanded ? "#ffffff" : methodColor?.color,
5193
+ borderColor: methodColor?.color,
5194
+ backgroundColor: isExpanded ? methodColor?.color : "transparent"
3967
5195
  },
3968
5196
  children: ep.method
3969
5197
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
@@ -3995,49 +5223,95 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3995
5223
  className: cx("view-params-title"),
3996
5224
  children: "Request"
3997
5225
  })
3998
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
3999
- dataSource: buildViewParamRows(endpointParams[ep.id] ?? []),
4000
- columns: viewParamColumns,
4001
- pagination: false,
4002
- rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
4003
- size: "small",
4004
- bordered: true
4005
- })]
5226
+ }), (() => {
5227
+ const allVReqRows = buildViewParamRows(endpointParams[ep.id] ?? []);
5228
+ const vReqPage = requestPages.get(ep.id) ?? 1;
5229
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
5230
+ dataSource: allVReqRows.slice((vReqPage - 1) * VIEW_PAGE_SIZE, vReqPage * VIEW_PAGE_SIZE),
5231
+ columns: viewParamColumns,
5232
+ pagination: false,
5233
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
5234
+ size: "small",
5235
+ bordered: true
5236
+ }), allVReqRows.length > VIEW_PAGE_SIZE && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5237
+ style: { paddingBottom: 12 },
5238
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Pagination, {
5239
+ current: vReqPage,
5240
+ pageSize: VIEW_PAGE_SIZE,
5241
+ total: allVReqRows.length,
5242
+ onChange: (page) => setRequestPages((prev) => new Map(prev).set(ep.id, page)),
5243
+ showSizeChanger: false,
5244
+ className: cx("pagination")
5245
+ })
5246
+ })] });
5247
+ })()]
4006
5248
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4007
5249
  className: cx("view-params-card"),
4008
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4009
- className: cx("view-params-header"),
4010
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4011
- className: cx("view-params-title"),
4012
- children: "Response"
4013
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Select, {
4014
- className: cx("view-status-select-sm"),
4015
- popupClassName: "status-code-dropdown",
4016
- value: selectedStatusCodes[ep.id] ?? (Object.keys(ep.responses ?? {}).includes("200") ? "200" : Object.keys(ep.responses ?? {})[0]),
4017
- onChange: (val) => setSelectedStatusCodes((prev) => ({
4018
- ...prev,
4019
- [ep.id]: val
4020
- })),
4021
- options: Object.keys(ep.responses ?? {}).map((code) => ({
4022
- value: code,
4023
- label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4024
- className: cx("status-label"),
4025
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4026
- className: cx("status-dot"),
4027
- style: { background: getStatusCodeColor(code, antdToken).dot }
4028
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: code })]
5250
+ children: [
5251
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5252
+ className: cx("view-params-header"),
5253
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5254
+ className: cx("view-params-title"),
5255
+ children: "Response"
5256
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Select, {
5257
+ className: cx("view-status-select-sm"),
5258
+ popupClassName: "status-code-dropdown",
5259
+ value: selectedStatusCodes[ep.id] ?? (Object.keys(ep.responses ?? {}).includes("200") ? "200" : Object.keys(ep.responses ?? {})[0]),
5260
+ onChange: (val) => setSelectedStatusCodes((prev) => ({
5261
+ ...prev,
5262
+ [ep.id]: val
5263
+ })),
5264
+ options: Object.keys(ep.responses ?? {}).map((code) => ({
5265
+ value: code,
5266
+ label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
5267
+ className: cx("status-label"),
5268
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5269
+ className: cx("status-dot"),
5270
+ style: { background: getStatusCodeColor(code, antdToken).dot }
5271
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: code })]
5272
+ })
5273
+ })),
5274
+ size: "middle"
5275
+ })]
5276
+ }),
5277
+ (() => {
5278
+ const allVResRows = buildViewParamRows(endpointResponseParams[ep.id] ?? []);
5279
+ const vResPage = responsePages.get(ep.id) ?? 1;
5280
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
5281
+ dataSource: allVResRows.slice((vResPage - 1) * VIEW_PAGE_SIZE, vResPage * VIEW_PAGE_SIZE),
5282
+ columns: viewParamColumns,
5283
+ pagination: false,
5284
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
5285
+ size: "small",
5286
+ bordered: true
5287
+ }), allVResRows.length > VIEW_PAGE_SIZE && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5288
+ style: { paddingBottom: 12 },
5289
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Pagination, {
5290
+ current: vResPage,
5291
+ pageSize: VIEW_PAGE_SIZE,
5292
+ total: allVResRows.length,
5293
+ onChange: (page) => setResponsePages((prev) => new Map(prev).set(ep.id, page)),
5294
+ showSizeChanger: false,
5295
+ className: cx("pagination")
4029
5296
  })
4030
- })),
4031
- size: "middle"
4032
- })]
4033
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
4034
- dataSource: buildViewParamRows(endpointResponseParams[ep.id] ?? []),
4035
- columns: viewParamColumns,
4036
- pagination: false,
4037
- rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
4038
- size: "small",
4039
- bordered: true
4040
- })]
5297
+ })] });
5298
+ })(),
5299
+ (() => {
5300
+ const selectedCode = selectedStatusCodes[ep.id] ?? (Object.keys(ep.responses ?? {}).includes("200") ? "200" : Object.keys(ep.responses ?? {})[0]);
5301
+ const responseContent = ep.responses?.[selectedCode]?.content;
5302
+ if (!responseContent) return null;
5303
+ const schema = Object.values(responseContent)[0]?.schema;
5304
+ if (!schema) return null;
5305
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5306
+ className: cx("code-panel"),
5307
+ style: { marginTop: token.marginSM },
5308
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
5309
+ className: cx("code-area"),
5310
+ children: JSON.stringify(schema, null, 2)
5311
+ })
5312
+ });
5313
+ })()
5314
+ ]
4041
5315
  })]
4042
5316
  }),
4043
5317
  isExpanded && mode !== "view" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4057,7 +5331,9 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4057
5331
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
4058
5332
  size: "large",
4059
5333
  value: endpointNames[ep.id] ?? ep.summary ?? "",
4060
- onChange: (e) => onEndpointNameChange(ep.id, e.target.value)
5334
+ onChange: (e) => onEndpointNameChange(ep.id, e.target.value),
5335
+ maxLength: 100,
5336
+ showCount: true
4061
5337
  })]
4062
5338
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4063
5339
  className: cx("form-field"),
@@ -4290,9 +5566,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4290
5566
  style: {
4291
5567
  padding: 0,
4292
5568
  lineHeight: 1,
4293
- width: 32,
4294
- height: 32,
4295
- fontSize: 20
5569
+ width: 40,
5570
+ height: 40
4296
5571
  },
4297
5572
  className: cx("param-delete-btn"),
4298
5573
  onClick: () => setDeleteParamModal({
@@ -4304,7 +5579,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4304
5579
  })
4305
5580
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4306
5581
  ghost: true,
4307
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, {}),
5582
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
5583
+ width: 18,
5584
+ height: 18
5585
+ }),
5586
+ style: {
5587
+ width: 40,
5588
+ height: 40,
5589
+ padding: 0,
5590
+ lineHeight: 1
5591
+ },
4308
5592
  className: cx("param-edit-btn"),
4309
5593
  onClick: () => {
4310
5594
  setDrawerSource("request");
@@ -4401,14 +5685,15 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4401
5685
  className: cx("param-actions"),
4402
5686
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4403
5687
  danger: true,
4404
- type: "text",
4405
5688
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4406
- height: 32,
4407
- width: 32
5689
+ width: 32,
5690
+ height: 32
4408
5691
  }),
4409
5692
  style: {
4410
5693
  padding: 0,
4411
- lineHeight: 1
5694
+ lineHeight: 1,
5695
+ width: 40,
5696
+ height: 40
4412
5697
  },
4413
5698
  className: cx("param-delete-btn"),
4414
5699
  onClick: () => setDeleteParamModal({
@@ -4420,7 +5705,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4420
5705
  })
4421
5706
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4422
5707
  ghost: true,
4423
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, {}),
5708
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
5709
+ width: 18,
5710
+ height: 18
5711
+ }),
5712
+ style: {
5713
+ width: 40,
5714
+ height: 40,
5715
+ padding: 0,
5716
+ lineHeight: 1
5717
+ },
4424
5718
  className: cx("param-edit-btn"),
4425
5719
  onClick: () => {
4426
5720
  setDrawerSource("request");
@@ -4729,9 +6023,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4729
6023
  style: {
4730
6024
  padding: 0,
4731
6025
  lineHeight: 1,
4732
- width: 32,
4733
- height: 32,
4734
- fontSize: 20
6026
+ width: 40,
6027
+ height: 40
4735
6028
  },
4736
6029
  className: cx("param-delete-btn"),
4737
6030
  onClick: () => setDeleteParamModal({
@@ -4743,7 +6036,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4743
6036
  })
4744
6037
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4745
6038
  ghost: true,
4746
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, {}),
6039
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
6040
+ width: 18,
6041
+ height: 18
6042
+ }),
6043
+ style: {
6044
+ width: 40,
6045
+ height: 40,
6046
+ padding: 0,
6047
+ lineHeight: 1
6048
+ },
4747
6049
  className: cx("param-edit-btn"),
4748
6050
  onClick: () => {
4749
6051
  setDrawerSource("response");
@@ -4840,7 +6142,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4840
6142
  className: cx("param-actions"),
4841
6143
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4842
6144
  ghost: true,
4843
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, {}),
6145
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {
6146
+ width: 18,
6147
+ height: 18
6148
+ }),
6149
+ style: {
6150
+ width: 40,
6151
+ height: 40,
6152
+ padding: 0,
6153
+ lineHeight: 1
6154
+ },
4844
6155
  className: cx("param-edit-btn"),
4845
6156
  onClick: () => {
4846
6157
  setDrawerSource("response");
@@ -4851,14 +6162,15 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4851
6162
  }
4852
6163
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4853
6164
  danger: true,
4854
- type: "text",
4855
6165
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4856
- height: 18,
4857
- width: 18
6166
+ width: 32,
6167
+ height: 32
4858
6168
  }),
4859
6169
  style: {
4860
6170
  padding: 0,
4861
- lineHeight: 1
6171
+ lineHeight: 1,
6172
+ width: 40,
6173
+ height: 40
4862
6174
  },
4863
6175
  className: cx("param-delete-btn"),
4864
6176
  onClick: () => setDeleteParamModal({
@@ -5099,7 +6411,7 @@ const UnsavedChangesBanner = ({ onClose }) => {
5099
6411
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Alert, {
5100
6412
  className: cx("alert"),
5101
6413
  type: "warning",
5102
- message: "There are changes you made may not be saved",
6414
+ message: "There are changes you made that may not be saved",
5103
6415
  closable: true,
5104
6416
  onClose,
5105
6417
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.ExclamationCircleFilled, {}),
@@ -5110,57 +6422,50 @@ const UnsavedChangesBanner = ({ onClose }) => {
5110
6422
  //#endregion
5111
6423
  //#region src/view/components/ApiPage/components/TagsSection.tsx
5112
6424
  const { useBreakpoint: useBreakpoint$1 } = antd.Grid;
5113
- const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
6425
+ const TAGS_PAGE_SIZE = 8;
6426
+ const TagsSection = ({ tags, collapsed, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
5114
6427
  const isMobile = !useBreakpoint$1().md;
6428
+ const [currentPage, setCurrentPage] = (0, react$1.useState)(1);
6429
+ const sortedTags = [...tags].sort((a, b) => a.isDefault === b.isDefault ? 0 : a.isDefault ? -1 : 1);
6430
+ const maxPage = Math.max(1, Math.ceil(tags.length / TAGS_PAGE_SIZE));
6431
+ const safePage = Math.min(currentPage, maxPage);
6432
+ const paginatedTags = sortedTags.slice((safePage - 1) * TAGS_PAGE_SIZE, safePage * TAGS_PAGE_SIZE);
5115
6433
  const { wrapSSR, cx, token } = useStyle("TagsSection", (token, scope) => ({
5116
6434
  [scope("root")]: {
5117
6435
  display: "flex",
5118
6436
  flexDirection: "column",
5119
- borderRadius: token.borderRadius,
5120
- overflow: "hidden",
5121
- width: "100%",
5122
- flexShrink: 0
6437
+ gap: token.margin,
6438
+ padding: token.marginLG,
6439
+ background: token.colorBgElevated,
6440
+ borderRadius: token.borderRadiusLG,
6441
+ width: "100%"
5123
6442
  },
5124
6443
  [scope("head")]: {
5125
6444
  display: "flex",
5126
6445
  alignItems: "center",
5127
6446
  justifyContent: "space-between",
5128
- padding: `${token.paddingXS}px ${token.paddingLG}px`,
5129
- background: token.colorPrimaryBg,
5130
- borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
5131
- },
5132
- [scope("head-actions")]: {
5133
- display: "flex",
5134
- alignItems: "center",
5135
- gap: token.margin
6447
+ width: "100%"
5136
6448
  },
5137
- [scope("body")]: {
6449
+ [scope("tags-list")]: {
5138
6450
  display: "flex",
5139
6451
  flexDirection: "column",
5140
- gap: 0,
5141
- padding: token.paddingLG,
5142
- background: token.colorBgElevated,
5143
- borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
6452
+ width: "100%"
5144
6453
  },
5145
6454
  [scope("tag-row")]: {
5146
6455
  display: "flex",
5147
6456
  alignItems: "center",
5148
6457
  justifyContent: "space-between",
5149
- height: 50,
5150
- paddingTop: token.controlHeightLG,
5151
- paddingBottom: token.controlHeightLG,
5152
- paddingRight: token.paddingLG,
5153
- borderBottom: `1px solid ${token.colorBorder}`,
5154
- width: "100%"
5155
- },
5156
- [scope("tag-row-last")]: {
5157
- borderBottom: "none",
5158
- paddingBottom: token.marginLG
6458
+ minHeight: 50,
6459
+ paddingTop: 12,
6460
+ paddingBottom: 12,
6461
+ width: "100%",
6462
+ borderBottom: `1px solid ${token.colorBorder}`
5159
6463
  },
6464
+ [scope("tag-row-last")]: { borderBottom: "none" },
5160
6465
  [scope("tag-info")]: {
5161
6466
  display: "flex",
5162
6467
  alignItems: "center",
5163
- gap: 32,
6468
+ gap: token.marginXL,
5164
6469
  flex: 1,
5165
6470
  minWidth: 0
5166
6471
  },
@@ -5196,32 +6501,13 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5196
6501
  alignItems: "center",
5197
6502
  gap: token.margin
5198
6503
  },
5199
- [scope("btn-delete")]: {
5200
- width: 40,
5201
- height: 40,
5202
- border: `1px solid ${token.colorError}`,
5203
- borderRadius: token.borderRadius,
5204
- display: "flex",
5205
- alignItems: "center",
5206
- justifyContent: "center"
5207
- },
5208
- [scope("btn-edit")]: {
5209
- width: 40,
5210
- height: 40,
5211
- border: `1px solid ${token.colorBorder}`,
5212
- borderRadius: token.borderRadius,
5213
- background: token.colorBgContainer,
5214
- boxShadow: "0px 2px 0px 0px rgba(0,0,0,0.02)",
5215
- display: "flex",
5216
- alignItems: "center",
5217
- justifyContent: "center"
5218
- },
5219
6504
  [scope("tag-row-mobile")]: {
5220
6505
  display: "flex",
5221
6506
  flexDirection: "row",
5222
6507
  alignItems: "flex-start",
5223
6508
  justifyContent: "space-between",
5224
6509
  gap: 8,
6510
+ paddingTop: 12,
5225
6511
  paddingBottom: token.margin,
5226
6512
  borderBottom: `1px solid ${token.colorBorder}`,
5227
6513
  width: "100%",
@@ -5251,16 +6537,176 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5251
6537
  display: "flex",
5252
6538
  flexDirection: "column",
5253
6539
  gap: 0,
5254
- padding: token.paddingMD,
5255
- background: token.colorBgElevated,
5256
- borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
5257
6540
  overflowX: "auto"
6541
+ },
6542
+ [scope("head-collapse")]: {
6543
+ display: "flex",
6544
+ alignItems: "center",
6545
+ justifyContent: "space-between",
6546
+ padding: `${token.paddingXS}px ${token.paddingLG}px`,
6547
+ background: token.colorPrimaryBg,
6548
+ borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
6549
+ },
6550
+ [scope("body-collapse")]: {
6551
+ display: "flex",
6552
+ flexDirection: "column",
6553
+ gap: token.margin,
6554
+ padding: token.paddingLG,
6555
+ background: token.colorBgElevated,
6556
+ borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
6557
+ },
6558
+ [scope("pagination")]: {
6559
+ display: "flex",
6560
+ justifyContent: "center",
6561
+ marginTop: token.marginMD,
6562
+ ".ant-pagination-item-active": {
6563
+ backgroundColor: token.colorBgContainer,
6564
+ borderColor: token.colorPrimary,
6565
+ borderRadius: token.borderRadius,
6566
+ display: "flex",
6567
+ alignItems: "center",
6568
+ justifyContent: "center",
6569
+ a: {
6570
+ color: token.colorPrimary,
6571
+ fontWeight: token.fontWeightStrong,
6572
+ fontSize: token.fontSize,
6573
+ lineHeight: "22px",
6574
+ display: "flex",
6575
+ alignItems: "center",
6576
+ justifyContent: "center",
6577
+ height: "100%"
6578
+ }
6579
+ },
6580
+ ".ant-pagination-item": {
6581
+ borderRadius: token.borderRadius,
6582
+ minWidth: 32,
6583
+ height: 32,
6584
+ lineHeight: "32px",
6585
+ a: {
6586
+ color: token.colorText,
6587
+ fontWeight: 400,
6588
+ fontSize: token.fontSize
6589
+ }
6590
+ },
6591
+ ".ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link": {
6592
+ borderRadius: token.borderRadius,
6593
+ width: 32,
6594
+ height: 32,
6595
+ display: "flex",
6596
+ alignItems: "center",
6597
+ justifyContent: "center",
6598
+ border: "none",
6599
+ background: "transparent"
6600
+ }
5258
6601
  }
5259
6602
  }));
5260
- return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5261
- className: cx("root"),
6603
+ const mobileTagsList = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6604
+ className: cx("body-mobile"),
6605
+ children: paginatedTags.map((tag, index) => {
6606
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6607
+ className: cx("tag-row-mobile", index === paginatedTags.length - 1 ? "tag-row-mobile-last" : ""),
6608
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6609
+ className: cx("tag-info-mobile"),
6610
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6611
+ className: cx("tag-col-mobile"),
6612
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6613
+ className: cx("col-label"),
6614
+ style: {
6615
+ fontSize: token.fontSize,
6616
+ lineHeight: "20px"
6617
+ },
6618
+ children: "Tag Name:"
6619
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6620
+ className: cx("col-value"),
6621
+ style: {
6622
+ fontSize: token.fontSize,
6623
+ lineHeight: "20px",
6624
+ overflow: "hidden",
6625
+ textOverflow: "ellipsis",
6626
+ whiteSpace: "nowrap"
6627
+ },
6628
+ children: tag.name
6629
+ })]
6630
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6631
+ className: cx("tag-col-mobile"),
6632
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6633
+ className: cx("col-label"),
6634
+ style: {
6635
+ fontSize: token.fontSize,
6636
+ lineHeight: "20px"
6637
+ },
6638
+ children: "Description:"
6639
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
6640
+ title: tag.description && tag.description.length > 20 ? tag.description : "",
6641
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6642
+ className: cx("col-value"),
6643
+ style: {
6644
+ fontSize: token.fontSize,
6645
+ lineHeight: "20px",
6646
+ overflow: "hidden",
6647
+ textOverflow: "ellipsis",
6648
+ whiteSpace: "nowrap",
6649
+ maxWidth: 140,
6650
+ display: "block"
6651
+ },
6652
+ children: tag.description ?? "-"
6653
+ })
6654
+ })]
6655
+ })]
6656
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6657
+ className: cx("tag-actions"),
6658
+ style: {
6659
+ paddingTop: 6,
6660
+ flexShrink: 0
6661
+ },
6662
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
6663
+ title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
6664
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
6665
+ danger: true,
6666
+ type: "text",
6667
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
6668
+ width: 32,
6669
+ height: 32
6670
+ }),
6671
+ disabled: tag.isDefault,
6672
+ onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
6673
+ style: {
6674
+ width: 40,
6675
+ height: 40,
6676
+ padding: 0,
6677
+ lineHeight: 1
6678
+ }
6679
+ })
6680
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
6681
+ title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
6682
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
6683
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {}),
6684
+ disabled: tag.isDefault,
6685
+ onClick: () => !tag.isDefault && onEditTag?.(tag),
6686
+ style: {
6687
+ width: 32,
6688
+ height: 32,
6689
+ padding: 0,
6690
+ lineHeight: 1,
6691
+ ...!tag.isDefault && { color: "#A146B3" }
6692
+ }
6693
+ })
6694
+ })]
6695
+ })]
6696
+ }, tag.name);
6697
+ })
6698
+ }), tags.length > TAGS_PAGE_SIZE && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Pagination, {
6699
+ current: safePage,
6700
+ pageSize: TAGS_PAGE_SIZE,
6701
+ total: tags.length,
6702
+ onChange: setCurrentPage,
6703
+ showSizeChanger: false,
6704
+ className: cx("pagination")
6705
+ })] });
6706
+ return wrapSSR(isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6707
+ style: { width: "100%" },
5262
6708
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5263
- className: cx("head"),
6709
+ className: cx("head-collapse"),
5264
6710
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
5265
6711
  level: 4,
5266
6712
  style: {
@@ -5269,7 +6715,11 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5269
6715
  },
5270
6716
  children: "Tags"
5271
6717
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5272
- className: cx("head-actions"),
6718
+ style: {
6719
+ display: "flex",
6720
+ alignItems: "center",
6721
+ gap: token.marginXS
6722
+ },
5273
6723
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5274
6724
  ghost: true,
5275
6725
  type: "primary",
@@ -5288,208 +6738,149 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5288
6738
  }
5289
6739
  })]
5290
6740
  })]
5291
- }), !collapsed && (isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5292
- className: cx("body-mobile"),
5293
- children: tags.map((tag, index) => {
5294
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5295
- className: cx("tag-row-mobile", index === tags.length - 1 ? "tag-row-mobile-last" : ""),
5296
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5297
- className: cx("tag-info-mobile"),
6741
+ }), !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6742
+ className: cx("body-collapse"),
6743
+ children: mobileTagsList
6744
+ })]
6745
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6746
+ className: cx("root"),
6747
+ children: [
6748
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6749
+ className: cx("head"),
6750
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
6751
+ level: 4,
6752
+ style: {
6753
+ margin: 0,
6754
+ color: token.colorTextHeading
6755
+ },
6756
+ children: "Tags"
6757
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
6758
+ ghost: true,
6759
+ type: "primary",
6760
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
6761
+ onClick: onAddTag,
6762
+ style: { borderRadius: token.borderRadius },
6763
+ children: "Add Tag"
6764
+ })]
6765
+ }),
6766
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6767
+ className: cx("tags-list"),
6768
+ children: paginatedTags.map((tag, index) => {
6769
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6770
+ className: cx("tag-row", index === paginatedTags.length - 1 ? "tag-row-last" : ""),
5298
6771
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5299
- className: cx("tag-col-mobile"),
5300
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5301
- className: cx("col-label"),
5302
- style: {
5303
- fontSize: token.fontSize,
5304
- lineHeight: "20px"
5305
- },
5306
- children: "Tag Name:"
5307
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5308
- className: cx("col-value"),
5309
- style: {
5310
- fontSize: token.fontSize,
5311
- lineHeight: "20px",
5312
- overflow: "hidden",
5313
- textOverflow: "ellipsis",
5314
- whiteSpace: "nowrap"
5315
- },
5316
- children: tag.name
5317
- })]
6772
+ className: cx("tag-info"),
6773
+ children: [
6774
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6775
+ className: cx("tag-col"),
6776
+ style: { width: 200 },
6777
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6778
+ className: cx("col-label"),
6779
+ children: "Tag Name"
6780
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6781
+ className: cx("col-value"),
6782
+ children: tag.name
6783
+ })]
6784
+ }),
6785
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6786
+ className: cx("tag-col"),
6787
+ style: { width: 280 },
6788
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6789
+ className: cx("col-label"),
6790
+ children: "Description"
6791
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
6792
+ title: tag.description && tag.description.length > 30 ? tag.description : "",
6793
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6794
+ className: cx("col-value"),
6795
+ style: {
6796
+ overflow: "hidden",
6797
+ textOverflow: "ellipsis",
6798
+ whiteSpace: "nowrap",
6799
+ maxWidth: 280,
6800
+ display: "block"
6801
+ },
6802
+ children: tag.description ?? "-"
6803
+ })
6804
+ })]
6805
+ }),
6806
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6807
+ className: cx("tag-col"),
6808
+ style: {
6809
+ flex: 1,
6810
+ minWidth: 0
6811
+ },
6812
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6813
+ className: cx("col-label"),
6814
+ children: "External Docs"
6815
+ }), tag.externalDocsUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
6816
+ title: tag.externalDocsUrl.length > 25 ? tag.externalDocsUrl : "",
6817
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
6818
+ href: tag.externalDocsUrl,
6819
+ target: "_blank",
6820
+ rel: "noreferrer",
6821
+ className: cx("col-value-link"),
6822
+ style: {
6823
+ overflow: "hidden",
6824
+ textOverflow: "ellipsis",
6825
+ whiteSpace: "nowrap",
6826
+ display: "block"
6827
+ },
6828
+ children: tag.externalDocsUrl
6829
+ })
6830
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
6831
+ className: cx("col-value"),
6832
+ children: "-"
6833
+ })]
6834
+ })
6835
+ ]
5318
6836
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5319
- className: cx("tag-col-mobile"),
5320
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5321
- className: cx("col-label"),
5322
- style: {
5323
- fontSize: token.fontSize,
5324
- lineHeight: "20px"
5325
- },
5326
- children: "Description:"
6837
+ className: cx("tag-actions"),
6838
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
6839
+ title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
6840
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
6841
+ danger: true,
6842
+ type: "text",
6843
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
6844
+ width: 32,
6845
+ height: 32
6846
+ }),
6847
+ disabled: tag.isDefault,
6848
+ onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
6849
+ style: {
6850
+ width: 40,
6851
+ height: 40,
6852
+ padding: 0,
6853
+ lineHeight: 1
6854
+ }
6855
+ })
5327
6856
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5328
- title: tag.description && tag.description.length > 20 ? tag.description : "",
5329
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5330
- className: cx("col-value"),
6857
+ title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
6858
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
6859
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditTag, {}),
6860
+ disabled: tag.isDefault,
6861
+ onClick: () => !tag.isDefault && onEditTag?.(tag),
5331
6862
  style: {
5332
- fontSize: token.fontSize,
5333
- lineHeight: "20px",
5334
- overflow: "hidden",
5335
- textOverflow: "ellipsis",
5336
- whiteSpace: "nowrap",
5337
- maxWidth: 140,
5338
- display: "block"
5339
- },
5340
- children: tag.description ?? "-"
6863
+ width: 32,
6864
+ height: 32,
6865
+ padding: 0,
6866
+ lineHeight: 1,
6867
+ ...!tag.isDefault && { color: "#A146B3" }
6868
+ }
5341
6869
  })
5342
6870
  })]
5343
6871
  })]
5344
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5345
- className: cx("tag-actions"),
5346
- style: {
5347
- paddingTop: 6,
5348
- flexShrink: 0
5349
- },
5350
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5351
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5352
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5353
- danger: true,
5354
- type: "text",
5355
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
5356
- width: 32,
5357
- height: 32
5358
- }),
5359
- disabled: tag.isDefault,
5360
- onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
5361
- style: {
5362
- width: 40,
5363
- height: 40,
5364
- padding: 0,
5365
- lineHeight: 1
5366
- }
5367
- })
5368
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5369
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5370
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5371
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, { style: { fontSize: 18 } }),
5372
- disabled: tag.isDefault,
5373
- onClick: () => !tag.isDefault && onEditTag?.(tag),
5374
- style: {
5375
- width: 32,
5376
- height: 32,
5377
- padding: 0,
5378
- lineHeight: 1
5379
- }
5380
- })
5381
- })]
5382
- })]
5383
- }, tag.name);
5384
- })
5385
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5386
- className: cx("body"),
5387
- children: tags.map((tag, index) => {
5388
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5389
- className: cx("tag-row", index === tags.length - 1 ? "tag-row-last" : ""),
5390
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5391
- className: cx("tag-info"),
5392
- children: [
5393
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5394
- className: cx("tag-col"),
5395
- style: { width: 200 },
5396
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5397
- className: cx("col-label"),
5398
- children: "Tag Name"
5399
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5400
- className: cx("col-value"),
5401
- children: tag.name
5402
- })]
5403
- }),
5404
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5405
- className: cx("tag-col"),
5406
- style: { width: 280 },
5407
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5408
- className: cx("col-label"),
5409
- children: "Description"
5410
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5411
- title: tag.description && tag.description.length > 30 ? tag.description : "",
5412
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5413
- className: cx("col-value"),
5414
- style: {
5415
- overflow: "hidden",
5416
- textOverflow: "ellipsis",
5417
- whiteSpace: "nowrap",
5418
- maxWidth: 280,
5419
- display: "block"
5420
- },
5421
- children: tag.description ?? "-"
5422
- })
5423
- })]
5424
- }),
5425
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5426
- className: cx("tag-col"),
5427
- style: {
5428
- flex: 1,
5429
- minWidth: 0
5430
- },
5431
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5432
- className: cx("col-label"),
5433
- children: "External Docs"
5434
- }), tag.externalDocsUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5435
- title: tag.externalDocsUrl.length > 25 ? tag.externalDocsUrl : "",
5436
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
5437
- href: tag.externalDocsUrl,
5438
- target: "_blank",
5439
- rel: "noreferrer",
5440
- className: cx("col-value-link"),
5441
- style: {
5442
- overflow: "hidden",
5443
- textOverflow: "ellipsis",
5444
- whiteSpace: "nowrap",
5445
- display: "block"
5446
- },
5447
- children: tag.externalDocsUrl
5448
- })
5449
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5450
- className: cx("col-value"),
5451
- children: "-"
5452
- })]
5453
- })
5454
- ]
5455
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5456
- className: cx("tag-actions"),
5457
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5458
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5459
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5460
- danger: true,
5461
- type: "text",
5462
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
5463
- width: 32,
5464
- height: 32
5465
- }),
5466
- disabled: tag.isDefault,
5467
- onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
5468
- style: {
5469
- width: 40,
5470
- height: 40,
5471
- padding: 0,
5472
- lineHeight: 1
5473
- }
5474
- })
5475
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5476
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5477
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5478
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, { style: { fontSize: 18 } }),
5479
- disabled: tag.isDefault,
5480
- onClick: () => !tag.isDefault && onEditTag?.(tag),
5481
- style: {
5482
- width: 32,
5483
- height: 32,
5484
- padding: 0,
5485
- lineHeight: 1
5486
- }
5487
- })
5488
- })]
5489
- })]
5490
- }, tag.name);
6872
+ }, tag.name);
6873
+ })
6874
+ }),
6875
+ tags.length > TAGS_PAGE_SIZE && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Pagination, {
6876
+ current: safePage,
6877
+ pageSize: TAGS_PAGE_SIZE,
6878
+ total: tags.length,
6879
+ onChange: setCurrentPage,
6880
+ showSizeChanger: false,
6881
+ className: cx("pagination")
5491
6882
  })
5492
- }))]
6883
+ ]
5493
6884
  }));
5494
6885
  };
5495
6886
  //#endregion
@@ -5633,13 +7024,6 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5633
7024
  if (open && mode === "edit" && initialValues) form.setFieldsValue(initialValues);
5634
7025
  if (!open) form.resetFields();
5635
7026
  }, [open]);
5636
- (0, react$1.useEffect)(() => {
5637
- if (!extDocsDesc?.trim()) form.setFields([{
5638
- name: "externalDocsLink",
5639
- value: void 0,
5640
- errors: []
5641
- }]);
5642
- }, [extDocsDesc]);
5643
7027
  (0, react$1.useEffect)(() => {
5644
7028
  if (extDocsDesc?.trim()) form.validateFields(["externalDocsLink"]).catch(() => {});
5645
7029
  }, [extDocsLink, extDocsDesc]);
@@ -5795,7 +7179,14 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5795
7179
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
5796
7180
  showCount: true,
5797
7181
  maxLength: 25,
5798
- placeholder: "Describe External Docs"
7182
+ placeholder: "Describe External Docs",
7183
+ onChange: (e) => {
7184
+ if (!e.target.value?.trim()) form.setFields([{
7185
+ name: "externalDocsLink",
7186
+ value: void 0,
7187
+ errors: []
7188
+ }]);
7189
+ }
5799
7190
  })
5800
7191
  }),
5801
7192
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Form.Item, {
@@ -5820,19 +7211,11 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5820
7211
  return Promise.reject(/* @__PURE__ */ new Error("Please enter a valid URL"));
5821
7212
  }
5822
7213
  } }],
5823
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5824
- title: !isLinkEnabled ? "You need to add the External Docs Description first." : "",
5825
- color: "rgba(0,0,0,0.85)",
5826
- placement: "topLeft",
5827
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
5828
- showCount: true,
5829
- maxLength: 512,
5830
- placeholder: "External Docs Link",
5831
- disabled: !isLinkEnabled,
5832
- onChange: (e) => {
5833
- form.setFieldValue("externalDocsLink", e.target.value);
5834
- }
5835
- })
7214
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
7215
+ showCount: true,
7216
+ maxLength: 500,
7217
+ placeholder: "External Docs Link",
7218
+ disabled: !isLinkEnabled
5836
7219
  })
5837
7220
  })
5838
7221
  ]
@@ -5909,6 +7292,251 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5909
7292
  })
5910
7293
  ] }));
5911
7294
  };
7295
+ //#endregion
7296
+ //#region src/assets/icons/restApi.tsx
7297
+ const RestApiIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
7298
+ width: "16",
7299
+ height: "16",
7300
+ viewBox: "0 0 16 16",
7301
+ fill: "none",
7302
+ xmlns: "http://www.w3.org/2000/svg",
7303
+ ...props,
7304
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
7305
+ clipPath: "url(#restapi-clip)",
7306
+ children: [
7307
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7308
+ d: "M14.4059 7.73805H13.2601V7.23565C13.2601 7.11607 13.1787 7.01187 13.0626 6.98294L12.2915 6.79083L11.8883 5.81794L12.2975 5.13716C12.3591 5.03469 12.343 4.90341 12.2585 4.81888L11.1795 3.73987C11.0949 3.65531 10.9636 3.63922 10.8612 3.70081L10.1804 4.11003L9.20745 3.70685L9.01534 2.9357C8.98644 2.81966 8.88222 2.73823 8.76264 2.73823H8.26032V1.59245C8.26032 1.44862 8.14373 1.33203 7.9999 1.33203C7.85607 1.33203 7.73949 1.44862 7.73949 1.59245V2.73823H7.23709C7.11751 2.73823 7.01331 2.81966 6.98438 2.9357L6.79227 3.70685L5.81938 4.11003L5.1386 3.70081C5.03607 3.63919 4.90485 3.65529 4.82032 3.73987L3.74131 4.81888C3.65675 4.90344 3.64066 5.03471 3.70225 5.13716L4.11146 5.81794L3.70829 6.79083L2.93714 6.98294C2.8211 7.01185 2.73967 7.11607 2.73967 7.23565V7.73805H1.59391C1.45008 7.73805 1.3335 7.85463 1.3335 7.99846C1.3335 8.14226 1.45008 8.25888 1.59391 8.25888H2.73969V8.76128C2.73969 8.88086 2.82113 8.98508 2.93717 9.01396L3.70831 9.20609L4.11149 10.179L3.70225 10.8598C3.64063 10.9623 3.65675 11.0935 3.74131 11.1781L4.82032 12.2571C4.90488 12.3416 5.03615 12.3577 5.13865 12.2961L5.81941 11.8869L6.79232 12.2901L6.98443 13.0612C7.01334 13.1773 7.11756 13.2587 7.23714 13.2587H7.73951V14.4045C7.73951 14.5483 7.8561 14.6649 7.99993 14.6649C8.14376 14.6649 8.26034 14.5483 8.26034 14.4045V13.2587H8.76274C8.88232 13.2587 8.98652 13.1773 9.01545 13.0612L9.20756 12.2901L10.1805 11.8869L10.8612 12.2961C10.9637 12.3577 11.095 12.3416 11.1796 12.2571L12.2586 11.1781C12.3431 11.0935 12.3592 10.9622 12.2976 10.8598L11.8884 10.179L12.2916 9.20609L13.0627 9.01396C13.1788 8.98508 13.2602 8.88086 13.2602 8.76128V8.25888H14.406C14.5498 8.25888 14.6664 8.14226 14.6664 7.99846C14.6663 7.85463 14.5497 7.73805 14.4059 7.73805ZM12.7393 8.55779L12.0382 8.73247C11.9581 8.75245 11.8922 8.80919 11.8606 8.88547L11.3569 10.1009C11.3253 10.1772 11.3318 10.264 11.3743 10.3348L11.7463 10.9537L10.9551 11.7449L10.3362 11.3729C10.2654 11.3303 10.1786 11.3239 10.1023 11.3555L8.88686 11.8592C8.81058 11.8909 8.75383 11.9567 8.73386 12.0369L8.5592 12.7379H7.44055L7.26589 12.0369C7.24592 11.9567 7.18917 11.8909 7.1129 11.8592L5.89743 11.3555C5.82113 11.3239 5.73435 11.3303 5.66355 11.3729L5.04464 11.7449L4.25342 10.9537L4.62545 10.3348C4.668 10.264 4.67443 10.1772 4.64282 10.1009L4.13912 8.88547C4.10751 8.80919 4.04159 8.75245 3.96149 8.73247L3.26045 8.55779V7.43914L3.96152 7.26448C4.04162 7.2445 4.10753 7.18776 4.13915 7.11148L4.64284 5.89602C4.67446 5.81971 4.668 5.73294 4.62548 5.66216L4.25344 5.04325L5.04467 4.25203L5.66357 4.62406C5.73435 4.66661 5.82113 4.67307 5.89743 4.64143L7.1129 4.13773C7.18917 4.10612 7.24592 4.04021 7.26589 3.9601L7.44055 3.25904H8.5592L8.73386 3.9601C8.75383 4.04021 8.81058 4.10612 8.88686 4.13773L10.1023 4.64143C10.1787 4.67305 10.2654 4.66659 10.3362 4.62406L10.9551 4.25203L11.7463 5.04325L11.3743 5.66216C11.3317 5.73294 11.3253 5.81971 11.3569 5.89602L11.8606 7.11148C11.8922 7.18776 11.9581 7.2445 12.0382 7.26448L12.7393 7.43914V8.55779Z",
7309
+ fill: "currentColor"
7310
+ }),
7311
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7312
+ d: "M9.14809 4.86755C9.01309 4.81807 8.86346 4.88729 8.8139 5.02229C8.76434 5.15731 8.83364 5.30692 8.96864 5.35648C10.0712 5.76114 10.8121 6.82252 10.8121 7.99757C10.8121 9.54835 9.55041 10.81 7.99965 10.81C6.4489 10.81 5.18729 9.54833 5.18729 7.99755C5.18729 6.88567 5.84426 5.87593 6.86098 5.42515C6.99247 5.36687 7.05179 5.21302 6.99348 5.08156C6.9352 4.9501 6.78132 4.89075 6.64989 4.94906C5.44505 5.48325 4.6665 6.67987 4.6665 7.99755C4.6665 9.83546 6.16176 11.3308 7.99971 11.3308C9.83765 11.3308 11.3329 9.83546 11.3329 7.99755C11.3329 6.605 10.4549 5.34713 9.14809 4.86755Z",
7313
+ fill: "currentColor"
7314
+ }),
7315
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7316
+ d: "M8.01348 4.66409L7.99967 4.66406C7.85585 4.66406 7.73926 4.78065 7.73926 4.92448C7.73926 5.06831 7.85585 5.1849 7.99967 5.1849L8.01194 5.18492C8.0122 5.18492 8.01246 5.18492 8.01272 5.18492C8.15618 5.18492 8.2727 5.06883 8.27314 4.92526C8.27355 4.78143 8.1573 4.6645 8.01348 4.66409Z",
7317
+ fill: "currentColor"
7318
+ }),
7319
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7320
+ d: "M9.81413 6.96094C9.6703 6.96094 9.55371 7.07753 9.55371 7.22135V8.73919C9.55371 8.883 9.6703 8.99961 9.81413 8.99961C9.95796 8.99961 10.0745 8.883 10.0745 8.73919V7.22133C10.0745 7.0775 9.95796 6.96094 9.81413 6.96094Z",
7321
+ fill: "currentColor"
7322
+ }),
7323
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7324
+ d: "M8.55132 6.96094H8.01481C7.87098 6.96094 7.75439 7.07753 7.75439 7.22135V7.74057V8.09581V8.73917C7.75439 8.88297 7.87098 8.99958 8.01481 8.99958C8.15864 8.99958 8.27523 8.88297 8.27523 8.73917V8.35622H8.55135C8.91463 8.35622 9.2102 8.06063 9.2102 7.69737V7.61979C9.21018 7.25648 8.91463 6.96094 8.55132 6.96094ZM8.68937 7.69734C8.68937 7.77346 8.62744 7.83539 8.55132 7.83539H8.2752V7.74055V7.48172H8.55132C8.62744 7.48172 8.68937 7.54365 8.68937 7.61977V7.69734Z",
7325
+ fill: "currentColor"
7326
+ }),
7327
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7328
+ d: "M7.47523 8.67635L6.80685 7.1187C6.76581 7.02297 6.67169 6.96094 6.56755 6.96094C6.46341 6.96094 6.3693 7.02297 6.32823 7.11867L5.65984 8.67633C5.60312 8.80849 5.6643 8.96161 5.79648 9.01831C5.92867 9.075 6.08177 9.01385 6.13849 8.88169L6.56755 7.88172L6.99664 8.88169C7.03898 8.98039 7.13508 9.0395 7.23607 9.0395C7.27031 9.0395 7.30515 9.03268 7.33862 9.01833C7.47078 8.96164 7.53195 8.80852 7.47523 8.67635Z",
7329
+ fill: "currentColor"
7330
+ }),
7331
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7332
+ d: "M13.7813 1.33203C13.2931 1.33203 12.896 1.72919 12.896 2.21742C12.896 2.3668 12.9333 2.50755 12.9989 2.63107L12.0025 3.62737C11.9008 3.72906 11.9008 3.89396 12.0025 3.99565C12.0534 4.04648 12.1201 4.0719 12.1867 4.0719C12.2533 4.0719 12.32 4.04648 12.3708 3.99562L13.367 2.99951C13.4907 3.06531 13.6317 3.10279 13.7813 3.10279C14.2695 3.10279 14.6667 2.70562 14.6667 2.2174C14.6667 1.72917 14.2696 1.33203 13.7813 1.33203Z",
7333
+ fill: "currentColor"
7334
+ }),
7335
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7336
+ d: "M3.99712 12.002C3.89542 11.9004 3.73053 11.9004 3.62886 12.002L2.6329 12.998C2.50925 12.9323 2.36837 12.8949 2.21889 12.8949C1.73066 12.8949 1.3335 13.2921 1.3335 13.7803C1.3335 14.2685 1.73066 14.6657 2.21889 14.6657C2.70712 14.6657 3.10428 14.2685 3.10428 13.7803C3.10428 13.6308 3.06688 13.4899 3.00118 13.3663L3.99714 12.3703C4.09881 12.2686 4.09881 12.1037 3.99712 12.002Z",
7337
+ fill: "currentColor"
7338
+ }),
7339
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7340
+ d: "M12.3711 12.0021C12.3224 11.9536 12.2552 11.9258 12.1867 11.9258C12.1182 11.9258 12.051 11.9536 12.0026 12.0021C11.9541 12.0505 11.9263 12.1177 11.9263 12.1862C11.9263 12.2547 11.9541 12.3219 12.0026 12.3703C12.051 12.4187 12.1182 12.4466 12.1867 12.4466C12.2554 12.4466 12.3224 12.4187 12.3711 12.3703C12.4195 12.3219 12.4471 12.2549 12.4471 12.1862C12.4471 12.1177 12.4195 12.0505 12.3711 12.0021Z",
7341
+ fill: "currentColor"
7342
+ }),
7343
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7344
+ d: "M13.7813 12.8934C13.6316 12.8934 13.4906 12.9308 13.3669 12.9967L12.927 12.5567C12.8253 12.4551 12.6604 12.455 12.5587 12.5567C12.457 12.6584 12.457 12.8233 12.5587 12.925L12.9988 13.3651C12.9332 13.4887 12.8959 13.6294 12.8959 13.7788C12.8959 14.267 13.2931 14.6642 13.7813 14.6642C14.2695 14.6642 14.6666 14.267 14.6666 13.7788C14.6666 13.2905 14.2695 12.8934 13.7813 12.8934Z",
7345
+ fill: "currentColor"
7346
+ }),
7347
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
7348
+ d: "M3.99712 3.62737L3.00118 2.63143C3.06688 2.50779 3.10428 2.3669 3.10428 2.21742C3.10428 1.72922 2.70712 1.33203 2.21889 1.33203C1.73066 1.33203 1.3335 1.72919 1.3335 2.21742C1.3335 2.70565 1.73066 3.10281 2.21889 3.10281C2.36839 3.10281 2.50928 3.06542 2.6329 2.99971L3.62886 3.99565C3.67972 4.04651 3.74636 4.07193 3.813 4.07193C3.87964 4.07193 3.94631 4.04651 3.99714 3.99565C4.09881 3.89396 4.09881 3.72906 3.99712 3.62737Z",
7349
+ fill: "currentColor"
7350
+ })
7351
+ ]
7352
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
7353
+ id: "restapi-clip",
7354
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
7355
+ width: "13.3333",
7356
+ height: "13.3333",
7357
+ fill: "white",
7358
+ transform: "translate(1.3335 1.33203)"
7359
+ })
7360
+ }) })]
7361
+ });
7362
+ //#endregion
7363
+ //#region src/view/components/EditModeSidebar/index.tsx
7364
+ const EditModeSidebar = ({ selectedItem, onSelectItem, endpoints, hasGeneralError, hasSaveErrors }) => {
7365
+ const { wrapSSR, cx, token } = useStyle("EditModeSidebar", (token, scope) => ({
7366
+ [scope("root")]: {
7367
+ display: "flex",
7368
+ flexDirection: "column",
7369
+ gap: token.marginXS,
7370
+ padding: token.padding,
7371
+ backgroundColor: token.colorBgContainer,
7372
+ borderRadius: token.borderRadius,
7373
+ width: 320,
7374
+ minWidth: 320,
7375
+ flexShrink: 0,
7376
+ overflowY: "auto"
7377
+ },
7378
+ [scope("spec-icon")]: {
7379
+ fontSize: 16,
7380
+ color: token.colorTextSecondary,
7381
+ flexShrink: 0,
7382
+ display: "flex",
7383
+ alignItems: "center"
7384
+ },
7385
+ [scope("spec-label")]: {
7386
+ fontSize: token.fontSize,
7387
+ fontWeight: 400,
7388
+ color: token.colorText,
7389
+ lineHeight: "22px"
7390
+ },
7391
+ [scope("badge")]: {
7392
+ minWidth: "3.75rem",
7393
+ textAlign: "center",
7394
+ border: "none"
7395
+ },
7396
+ [scope("path")]: {
7397
+ fontSize: token.fontSize,
7398
+ fontWeight: 400,
7399
+ lineHeight: "22px",
7400
+ whiteSpace: "nowrap",
7401
+ overflow: "hidden",
7402
+ textOverflow: "ellipsis",
7403
+ flex: 1
7404
+ },
7405
+ [`${scope("root")} .ant-menu`]: {
7406
+ background: "transparent",
7407
+ border: "none",
7408
+ paddingInline: 0
7409
+ },
7410
+ [`${scope("root")} .ant-menu-item`]: {
7411
+ padding: `${token.paddingXS}px ${token.paddingLG}px`,
7412
+ borderRadius: token.borderRadius,
7413
+ height: "auto",
7414
+ lineHeight: "22px",
7415
+ display: "flex",
7416
+ alignItems: "center",
7417
+ gap: 12,
7418
+ marginInline: 0,
7419
+ marginBlock: 0,
7420
+ width: "100%",
7421
+ transition: "background-color 0.15s"
7422
+ },
7423
+ [`${scope("root")} .ant-menu-item:not(.ant-menu-item-selected):hover`]: { backgroundColor: token.colorFillTertiary },
7424
+ [`${scope("root")} .ant-menu-item-selected`]: { backgroundColor: token.colorPrimaryBg },
7425
+ [`${scope("root")} .ant-menu-item.error-active.ant-menu-item-selected`]: { backgroundColor: token.colorErrorBg },
7426
+ [`${scope("root")} .ant-menu-item-group-title`]: {
7427
+ fontSize: token.fontSize,
7428
+ fontWeight: 400,
7429
+ color: token.colorTextTertiary,
7430
+ lineHeight: "22px",
7431
+ paddingInline: 0,
7432
+ paddingTop: 0,
7433
+ paddingBottom: token.marginXXS,
7434
+ userSelect: "none"
7435
+ },
7436
+ [`${scope("root")} .ant-menu-item-group + .ant-menu-item-group`]: { marginTop: token.marginXS },
7437
+ [`${scope("spec-item")}:not(:last-child)`]: { marginBottom: token.marginXS },
7438
+ [`${scope("root")} .ant-menu-title-content`]: {
7439
+ overflow: "hidden",
7440
+ display: "flex",
7441
+ flex: 1,
7442
+ alignItems: "center",
7443
+ minWidth: 0,
7444
+ gap: 12
7445
+ },
7446
+ [`${scope("root")} .ant-menu-item-selected ${scope("spec-label")}`]: { color: token.colorPrimary }
7447
+ }));
7448
+ const selectedKeys = selectedItem.type === "endpoint" ? [selectedItem.key] : [selectedItem.type];
7449
+ const items = [{
7450
+ type: "group",
7451
+ label: "Specifications",
7452
+ children: [
7453
+ hasSaveErrors && {
7454
+ key: "errors",
7455
+ className: `${cx("spec-item")} error-active`,
7456
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
7457
+ className: cx("spec-icon"),
7458
+ style: { color: token.colorError },
7459
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.ExclamationCircleOutlined, {})
7460
+ }),
7461
+ label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
7462
+ className: cx("spec-label"),
7463
+ style: { color: token.colorError },
7464
+ children: "Errors"
7465
+ })
7466
+ },
7467
+ {
7468
+ key: "general",
7469
+ className: cx("spec-item"),
7470
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
7471
+ className: cx("spec-icon"),
7472
+ style: hasGeneralError ? { color: token.colorError } : void 0,
7473
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RestApiIcon, {})
7474
+ }),
7475
+ label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
7476
+ className: cx("spec-label"),
7477
+ style: hasGeneralError ? { color: token.colorError } : void 0,
7478
+ children: "General"
7479
+ })
7480
+ },
7481
+ {
7482
+ key: "tags",
7483
+ className: cx("spec-item"),
7484
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
7485
+ className: cx("spec-icon"),
7486
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.TagOutlined, {})
7487
+ }),
7488
+ label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
7489
+ className: cx("spec-label"),
7490
+ children: "Tags"
7491
+ })
7492
+ }
7493
+ ].filter(Boolean)
7494
+ }, {
7495
+ type: "group",
7496
+ label: "Endpoints",
7497
+ children: endpoints.map((ep) => {
7498
+ const colors = methodColors$1[ep.method];
7499
+ return {
7500
+ key: ep.id,
7501
+ label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, {
7502
+ className: cx("badge"),
7503
+ style: {
7504
+ backgroundColor: colors?.bg,
7505
+ color: colors?.color,
7506
+ border: "none"
7507
+ },
7508
+ children: ep.method
7509
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
7510
+ className: cx("path"),
7511
+ style: { color: selectedItem.type === "endpoint" && selectedItem.key === ep.id ? token.colorPrimary : token.colorText },
7512
+ children: ep.path
7513
+ })] })
7514
+ };
7515
+ })
7516
+ }];
7517
+ const handleMenuClick = ({ key }) => {
7518
+ if (key === "errors") onSelectItem({ type: "errors" });
7519
+ else if (key === "general") onSelectItem({ type: "general" });
7520
+ else if (key === "tags") onSelectItem({ type: "tags" });
7521
+ else onSelectItem({
7522
+ type: "endpoint",
7523
+ key
7524
+ });
7525
+ };
7526
+ return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7527
+ className: cx("root"),
7528
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Menu, {
7529
+ mode: "inline",
7530
+ selectedKeys,
7531
+ items,
7532
+ onClick: handleMenuClick,
7533
+ style: {
7534
+ background: "transparent",
7535
+ border: "none"
7536
+ }
7537
+ })
7538
+ }));
7539
+ };
5912
7540
  token.colorPrimary, token.colorSuccess, token.colorError, token.colorWarning, token["volcano.5"], token["geekblue.6"], token["purple.5"], token["volcano.4"];
5913
7541
  const darkerMethodColors = {
5914
7542
  GET: {
@@ -6350,10 +7978,7 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
6350
7978
  });
6351
7979
  if (isMobile) return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
6352
7980
  className: cx("sider"),
6353
- style: {
6354
- width: "100%",
6355
- height: "100%"
6356
- },
7981
+ style: { height: "100%" },
6357
7982
  children: inner
6358
7983
  }));
6359
7984
  return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(re_resizable.Resizable, {
@@ -6380,7 +8005,48 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
6380
8005
  };
6381
8006
  //#endregion
6382
8007
  //#region src/view/console/EndpointPage/EndpointPage.tsx
6383
- const { Title: Title$1, Paragraph } = antd.Typography;
8008
+ const { Title: Title$2, Paragraph } = antd.Typography;
8009
+ const MAX_VISIBLE_ENUMS = 2;
8010
+ const renderEnumTags = (enums, token) => {
8011
+ const tagStyle = {
8012
+ background: token.colorFillAlter,
8013
+ border: `1px solid ${token.colorBorder}`,
8014
+ borderRadius: token.borderRadiusSM
8015
+ };
8016
+ if (enums.length <= MAX_VISIBLE_ENUMS) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
8017
+ style: {
8018
+ display: "flex",
8019
+ flexWrap: "wrap",
8020
+ gap: token.marginXXS
8021
+ },
8022
+ children: enums.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, {
8023
+ style: tagStyle,
8024
+ children: e
8025
+ }, e))
8026
+ });
8027
+ const visible = enums.slice(0, MAX_VISIBLE_ENUMS);
8028
+ const hidden = enums.slice(MAX_VISIBLE_ENUMS);
8029
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
8030
+ style: {
8031
+ display: "flex",
8032
+ flexWrap: "wrap",
8033
+ gap: token.marginXXS
8034
+ },
8035
+ children: [visible.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, {
8036
+ style: tagStyle,
8037
+ children: e
8038
+ }, e)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
8039
+ title: hidden.join(", "),
8040
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Tag, {
8041
+ style: {
8042
+ ...tagStyle,
8043
+ cursor: "pointer"
8044
+ },
8045
+ children: ["+", hidden.length]
8046
+ })
8047
+ })]
8048
+ });
8049
+ };
6384
8050
  const requestColumns = [
6385
8051
  {
6386
8052
  title: "Parameter",
@@ -6423,7 +8089,7 @@ const buildRequestData = (params, token) => [...params].sort((a, b) => a.require
6423
8089
  })
6424
8090
  ] }),
6425
8091
  desc: p.description || "--",
6426
- enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, { children: e }, e)) : "--"
8092
+ enum: p.schema?.enum ? renderEnumTags(p.schema.enum, token) : "--"
6427
8093
  };
6428
8094
  });
6429
8095
  const buildHeaderData = (headers, token) => {
@@ -6452,7 +8118,7 @@ const buildHeaderData = (headers, token) => {
6452
8118
  })
6453
8119
  ] }, idx),
6454
8120
  desc: header.description || "--",
6455
- enum: header.schema?.enum ? header.schema.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, { children: e }, e)) : "--"
8121
+ enum: header.schema?.enum ? renderEnumTags(header.schema.enum, token) : "--"
6456
8122
  };
6457
8123
  });
6458
8124
  };
@@ -6484,7 +8150,7 @@ const buildRequestBodyData = (requestBody, token) => {
6484
8150
  })
6485
8151
  ] }),
6486
8152
  desc: prop.description || "--",
6487
- enum: prop.enum ? prop.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, { children: e }, e)) : "--"
8153
+ enum: prop.enum ? renderEnumTags(prop.enum, token) : "--"
6488
8154
  }));
6489
8155
  };
6490
8156
  const EndpointPage = () => {
@@ -6526,8 +8192,7 @@ const EndpointPage = () => {
6526
8192
  ".ant-tabs-tab": { paddingTop: "0" }
6527
8193
  },
6528
8194
  "& .ant-table": { backgroundColor: `${token.colorBgBase} !important` },
6529
- "& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` },
6530
- "& .ant-table-tbody > tr > td": { backgroundColor: `${token.colorBgBase} !important` }
8195
+ "& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` }
6531
8196
  },
6532
8197
  [scope("row-odd")]: { "& > td": { background: `${token.colorBgElevated} !important` } },
6533
8198
  [scope("row-even")]: { "& > td": { background: `${token.colorBgLayout} !important` } }
@@ -6654,7 +8319,7 @@ const EndpointPage = () => {
6654
8319
  }) }
6655
8320
  ] })]
6656
8321
  }),
6657
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$1, {
8322
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$2, {
6658
8323
  level: 3,
6659
8324
  style: {
6660
8325
  display: "flex",
@@ -6739,10 +8404,7 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
6739
8404
  const { focusedContent, transformedData } = useStore(({ view }) => view);
6740
8405
  const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
6741
8406
  [scope("inner-doc-container")]: {
6742
- flex: 1,
6743
8407
  minWidth: 0,
6744
- height: "100%",
6745
- overflow: "auto",
6746
8408
  borderRadius: token.borderRadius,
6747
8409
  padding: token.paddingXL
6748
8410
  },
@@ -6848,13 +8510,7 @@ const Codebox$1 = ({ code, language, wrapLongLines }) => {
6848
8510
  const [appTheme] = (0, react$1.useState)("DARK");
6849
8511
  const { token, theme: themeConfig } = antd.theme.useToken();
6850
8512
  const bodyBg = themeConfig.id == 1 ? token.colorBgContainer : "#1d2856";
6851
- const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: {
6852
- borderRadius: token.borderRadius,
6853
- height: "100%",
6854
- maxHeight: "100%",
6855
- overflow: "auto",
6856
- pre: { height: "100%" }
6857
- } }));
8513
+ const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: { borderRadius: token.borderRadius } }));
6858
8514
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6859
8515
  className: cx("codebox"),
6860
8516
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_syntax_highlighter.Light, {
@@ -6866,7 +8522,6 @@ const Codebox$1 = ({ code, language, wrapLongLines }) => {
6866
8522
  customStyle: {
6867
8523
  margin: 0,
6868
8524
  minHeight: "3rem",
6869
- overflowY: "auto",
6870
8525
  padding: "0.75rem 1rem 0.75rem 1.5rem",
6871
8526
  backgroundColor: bodyBg,
6872
8527
  fontSize: "0.75rem"
@@ -7134,6 +8789,18 @@ const transformOpenApiToDocs = (api) => {
7134
8789
  content: resolvedContent
7135
8790
  };
7136
8791
  }
8792
+ if (entry.responses) {
8793
+ const resolvedResponses = {};
8794
+ for (const [code, responseValue] of Object.entries(entry.responses)) if (responseValue.content) {
8795
+ const resolvedContent = {};
8796
+ for (const [contentType, contentValue] of Object.entries(responseValue.content)) resolvedContent[contentType] = { schema: resolveSchema(contentValue.schema, api.components) ?? contentValue.schema };
8797
+ resolvedResponses[code] = {
8798
+ ...responseValue,
8799
+ content: resolvedContent
8800
+ };
8801
+ } else resolvedResponses[code] = responseValue;
8802
+ entry.responses = resolvedResponses;
8803
+ }
7137
8804
  const matchedTags = (methodData.tags ?? []).filter((tag) => validTags.has(tag));
7138
8805
  if (matchedTags.length > 0) matchedTags.forEach((tag) => {
7139
8806
  if (!groupedPathsByTags[tag]) groupedPathsByTags[tag] = [];
@@ -7176,14 +8843,23 @@ const transformOpenApiToDocs = (api) => {
7176
8843
  const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onSave }) => {
7177
8844
  const [searchValue, setSearchValue] = (0, react$1.useState)("");
7178
8845
  const [mode, setMode] = (0, react$1.useState)("edit");
7179
- const [hasChanges, setHasChanges] = (0, react$1.useState)(false);
7180
8846
  const [bannerVisible, setBannerVisible] = (0, react$1.useState)(false);
7181
8847
  const [resetKey, setResetKey] = (0, react$1.useState)(0);
7182
- const [generalCollapsed, setGeneralCollapsed] = (0, react$1.useState)(false);
7183
- const [tagsCollapsed, setTagsCollapsed] = (0, react$1.useState)(false);
8848
+ const [generalCollapsed, setGeneralCollapsed] = (0, react$1.useState)(true);
8849
+ const [tagsCollapsed, setTagsCollapsed] = (0, react$1.useState)(true);
7184
8850
  const [endpointsCollapsed, setEndpointsCollapsed] = (0, react$1.useState)(false);
8851
+ const [saveConfirmModal, setSaveConfirmModal] = (0, react$1.useState)(false);
8852
+ const [resetConfirmModal, setResetConfirmModal] = (0, react$1.useState)(false);
8853
+ const [selectedEditItem, setSelectedEditItem] = (0, react$1.useState)({ type: "general" });
8854
+ const [errorBoxExpanded, setErrorBoxExpanded] = (0, react$1.useState)(false);
7185
8855
  const [localApiName, setLocalApiName] = (0, react$1.useState)("");
8856
+ const [apiNameTouched, setApiNameTouched] = (0, react$1.useState)(false);
7186
8857
  const [localDescription, setLocalDescription] = (0, react$1.useState)("");
8858
+ const [descriptionTouched, setDescriptionTouched] = (0, react$1.useState)(false);
8859
+ const hasApiNameError = apiNameTouched && (!localApiName.trim() || !/^[A-Za-z0-9_-]+$/.test(localApiName.trim()));
8860
+ const hasDescriptionError = descriptionTouched && !localDescription.trim();
8861
+ const hasGeneralError = hasApiNameError || hasDescriptionError;
8862
+ const [saveErrors, setSaveErrors] = (0, react$1.useState)([]);
7187
8863
  const [selectedUrl, setSelectedUrl] = (0, react$1.useState)("");
7188
8864
  const [endpointNames, setEndpointNames] = (0, react$1.useState)({});
7189
8865
  const [endpointDescs, setEndpointDescs] = (0, react$1.useState)({});
@@ -7205,6 +8881,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7205
8881
  const hasInitializedRef = (0, react$1.useRef)(false);
7206
8882
  const { useBreakpoint } = antd.Grid;
7207
8883
  const isMobile = !useBreakpoint().md;
8884
+ const allEndpoints = (0, react$1.useMemo)(() => selectedApi ? Object.values(selectedApi.tags ?? {}).flat() : [], [selectedApi]);
7208
8885
  (0, react$1.useEffect)(() => {
7209
8886
  return () => {
7210
8887
  resetStore();
@@ -7264,6 +8941,14 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7264
8941
  gap: token.marginLG,
7265
8942
  width: "100%"
7266
8943
  },
8944
+ [scope("content-scroll-area")]: {
8945
+ display: "grid",
8946
+ gridTemplateColumns: "minmax(0, 1fr) auto",
8947
+ flex: 1,
8948
+ gap: token.marginLG,
8949
+ overflow: "auto",
8950
+ minWidth: 0
8951
+ },
7267
8952
  [".delete-tag-confirm-modal .ant-modal-container"]: {
7268
8953
  "--ant-modal-content-padding": "0px !important",
7269
8954
  padding: "0 !important"
@@ -7342,15 +9027,18 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7342
9027
  }, [selectedApi]);
7343
9028
  const tagMetadata = (0, react$1.useMemo)(() => {
7344
9029
  if (!originalData || !selectedApi) return [];
7345
- const rawFile = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath);
7346
- if (!rawFile?.tags) return [];
7347
- return rawFile.tags.map((t) => ({
9030
+ const mapped = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath)?.tags?.map((t) => ({
7348
9031
  name: t.name,
7349
9032
  description: t.description,
7350
9033
  externalDocsUrl: t.externalDocs?.url,
7351
9034
  externalDocsDescription: t.externalDocs?.description,
7352
9035
  isDefault: t.name.toLowerCase() === "default"
7353
- }));
9036
+ })) ?? [];
9037
+ if (!mapped.some((t) => t.isDefault) && selectedApi.tags["default"]) mapped.push({
9038
+ name: "default",
9039
+ isDefault: true
9040
+ });
9041
+ return mapped;
7354
9042
  }, [originalData, selectedApi]);
7355
9043
  const initialEndpointResponseParams = (0, react$1.useMemo)(() => {
7356
9044
  if (!originalData || !selectedApi) return {};
@@ -7417,6 +9105,44 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7417
9105
  setEndpointParams(initialEndpointParams);
7418
9106
  setEndpointResponseParams(initialEndpointResponseParams);
7419
9107
  }, [selectedApi]);
9108
+ const hasChanges = (0, react$1.useMemo)(() => {
9109
+ if (!selectedApi) return false;
9110
+ if (localApiName !== (selectedApi.title || "")) return true;
9111
+ if (localDescription !== (selectedApi.description || "")) return true;
9112
+ if (JSON.stringify(localTags) !== JSON.stringify(tagMetadata)) return true;
9113
+ for (const [id, name] of Object.entries(endpointNames)) {
9114
+ const ep = allEndpoints.find((e) => e.id === id);
9115
+ if (ep && name !== (ep.summary ?? "")) return true;
9116
+ }
9117
+ for (const [id, desc] of Object.entries(endpointDescs)) {
9118
+ const ep = allEndpoints.find((e) => e.id === id);
9119
+ if (ep && desc !== (ep.description ?? "")) return true;
9120
+ }
9121
+ for (const [id, tags] of Object.entries(endpointTags)) {
9122
+ const ep = allEndpoints.find((e) => e.id === id);
9123
+ if (ep && JSON.stringify(tags) !== JSON.stringify(ep.tags ?? [])) return true;
9124
+ }
9125
+ if (JSON.stringify(endpointParams) !== JSON.stringify(initialEndpointParams)) return true;
9126
+ if (JSON.stringify(endpointResponseParams) !== JSON.stringify(initialEndpointResponseParams)) return true;
9127
+ return false;
9128
+ }, [
9129
+ selectedApi,
9130
+ localApiName,
9131
+ localDescription,
9132
+ localTags,
9133
+ tagMetadata,
9134
+ allEndpoints,
9135
+ endpointNames,
9136
+ endpointDescs,
9137
+ endpointTags,
9138
+ endpointParams,
9139
+ endpointResponseParams,
9140
+ initialEndpointParams,
9141
+ initialEndpointResponseParams
9142
+ ]);
9143
+ (0, react$1.useEffect)(() => {
9144
+ setBannerVisible(hasChanges);
9145
+ }, [hasChanges]);
7420
9146
  (0, react$1.useEffect)(() => {
7421
9147
  if (mode !== "view" || !selectedEndpoint) return;
7422
9148
  const epId = selectedEndpoint.id;
@@ -7467,7 +9193,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7467
9193
  isDefault: false
7468
9194
  };
7469
9195
  setLocalTags((prev) => [...prev, newTag]);
7470
- setHasChanges(true);
7471
9196
  setBannerVisible(true);
7472
9197
  };
7473
9198
  const handleUpdateTag = (updatedTag) => {
@@ -7479,7 +9204,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7479
9204
  externalDocsUrl: updatedTag.externalDocsLink,
7480
9205
  externalDocsDescription: updatedTag.externalDocsDescription
7481
9206
  } : t));
7482
- setHasChanges(true);
7483
9207
  setBannerVisible(true);
7484
9208
  };
7485
9209
  const handleDeleteTagConfirm = () => {
@@ -7489,7 +9213,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7489
9213
  open: false,
7490
9214
  tagName: ""
7491
9215
  });
7492
- setHasChanges(true);
7493
9216
  setBannerVisible(true);
7494
9217
  };
7495
9218
  const getEndpointsByTag = () => {
@@ -7509,8 +9232,10 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7509
9232
  return filtered;
7510
9233
  };
7511
9234
  const handleReset = () => {
7512
- setHasChanges(false);
7513
9235
  setBannerVisible(false);
9236
+ setApiNameTouched(false);
9237
+ setDescriptionTouched(false);
9238
+ setSaveErrors([]);
7514
9239
  setLocalApiName(selectedApi?.title ?? "");
7515
9240
  setLocalDescription(selectedApi?.description ?? "");
7516
9241
  setEndpointNames({});
@@ -7519,6 +9244,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7519
9244
  setEndpointParams(initialEndpointParams);
7520
9245
  setEndpointResponseParams(initialEndpointResponseParams);
7521
9246
  setResetKey((prev) => prev + 1);
9247
+ messageApi.success("Changes have been reset successfully.");
7522
9248
  };
7523
9249
  const handleSave = async () => {
7524
9250
  if (!selectedApi || !originalData) return;
@@ -7592,9 +9318,21 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7592
9318
  else delete methodObj["x-response-params"];
7593
9319
  }
7594
9320
  });
7595
- await onSave?.(cloned);
7596
- setHasChanges(false);
7597
- setBannerVisible(false);
9321
+ try {
9322
+ await onSave?.(cloned);
9323
+ setBannerVisible(false);
9324
+ setSaveErrors([]);
9325
+ messageApi.success("Changes have been saved and published successfully.");
9326
+ } catch (err) {
9327
+ let messages = [];
9328
+ if (err && typeof err === "object" && "errors" in err) {
9329
+ const e = err;
9330
+ messages = Array.isArray(e.errors) ? e.errors : [e.errors];
9331
+ } else if (err instanceof Error) messages = err.message.split("\n").filter(Boolean);
9332
+ else messages = [String(err)];
9333
+ setSaveErrors(messages);
9334
+ setSelectedEditItem({ type: "errors" });
9335
+ }
7598
9336
  };
7599
9337
  const handleResetSearch = () => {
7600
9338
  setSearchValue("");
@@ -7606,6 +9344,102 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7606
9344
  }
7607
9345
  window.location.pathname = "/";
7608
9346
  };
9347
+ (0, react$1.useEffect)(() => {
9348
+ setErrorBoxExpanded(false);
9349
+ }, [selectedEditItem]);
9350
+ const errorBox = saveErrors.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9351
+ style: {
9352
+ background: token.colorErrorBg,
9353
+ borderRadius: token.borderRadiusLG,
9354
+ padding: `${token.marginLG}px ${token.marginLG}px 48px`,
9355
+ width: "100%"
9356
+ },
9357
+ children: [
9358
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9359
+ style: {
9360
+ display: "flex",
9361
+ alignItems: "center",
9362
+ gap: token.marginXS
9363
+ },
9364
+ children: [selectedEditItem.type !== "errors" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
9365
+ onClick: () => setErrorBoxExpanded((prev) => !prev),
9366
+ style: {
9367
+ display: "flex",
9368
+ alignItems: "center",
9369
+ background: "transparent",
9370
+ border: "none",
9371
+ cursor: "pointer",
9372
+ padding: 0,
9373
+ lineHeight: 1
9374
+ },
9375
+ "aria-label": "Collapse",
9376
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.RightOutlined, { style: {
9377
+ fontSize: 14,
9378
+ color: token.colorError,
9379
+ transform: errorBoxExpanded ? "rotate(90deg)" : "none",
9380
+ transition: "transform 0.2s"
9381
+ } })
9382
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
9383
+ level: 3,
9384
+ style: {
9385
+ margin: 0,
9386
+ color: token.colorError
9387
+ },
9388
+ children: "Errors"
9389
+ })]
9390
+ }),
9391
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
9392
+ style: {
9393
+ color: token.colorError,
9394
+ fontSize: 16,
9395
+ lineHeight: "24px",
9396
+ marginTop: token.marginXS,
9397
+ marginBottom: token.marginSM
9398
+ },
9399
+ children: "Failed to update the OpenAPI documentation. Please resolve the following issues:"
9400
+ }),
9401
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Divider, { style: { margin: `${token.marginSM}px 0` } }),
9402
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
9403
+ style: {
9404
+ paddingLeft: token.marginLG,
9405
+ margin: 0
9406
+ },
9407
+ children: saveErrors.map((msg, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
9408
+ style: {
9409
+ color: token.colorText,
9410
+ marginBottom: token.marginXS
9411
+ },
9412
+ children: msg
9413
+ }, i))
9414
+ })
9415
+ ]
9416
+ }) : null;
9417
+ const errorBoxCollapsed = saveErrors.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
9418
+ onClick: () => setErrorBoxExpanded(true),
9419
+ style: {
9420
+ display: "flex",
9421
+ alignItems: "center",
9422
+ gap: token.marginXS,
9423
+ padding: `${token.paddingXS}px ${token.paddingLG}px`,
9424
+ background: token.colorErrorBg,
9425
+ borderRadius: token.borderRadiusLG,
9426
+ border: "none",
9427
+ cursor: "pointer",
9428
+ width: "100%",
9429
+ textAlign: "left"
9430
+ },
9431
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.RightOutlined, { style: {
9432
+ fontSize: 14,
9433
+ color: token.colorError
9434
+ } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
9435
+ style: {
9436
+ color: token.colorError,
9437
+ fontSize: token.fontSizeLG,
9438
+ fontWeight: 600
9439
+ },
9440
+ children: "Errors"
9441
+ })]
9442
+ }) : null;
7609
9443
  const switcherNode = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
7610
9444
  style: {
7611
9445
  display: "flex",
@@ -7664,158 +9498,321 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7664
9498
  apiName: selectedApi?.title || "API",
7665
9499
  mode,
7666
9500
  onModeChange: setMode,
7667
- onReset: handleReset,
7668
- onSave: handleSave,
9501
+ onReset: () => setResetConfirmModal(true),
9502
+ onSave: () => setSaveConfirmModal(true),
7669
9503
  hasChanges,
9504
+ hasErrors: hasGeneralError,
7670
9505
  switcherNode: isMobile ? switcherNode : void 0
7671
9506
  })
7672
9507
  }),
7673
9508
  bannerVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnsavedChangesBanner, { onClose: () => setBannerVisible(false) }),
7674
- mode === "edit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
7675
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7676
- className: cx("section"),
7677
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneralSection, {
7678
- apiName: localApiName,
7679
- authType: selectedApi?.authType || "",
7680
- version: selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion)?.version || "",
7681
- description: localDescription,
7682
- onApiNameChange: setLocalApiName,
7683
- onDescriptionChange: setLocalDescription,
7684
- collapsed: generalCollapsed,
7685
- onToggleCollapse: () => setGeneralCollapsed((c) => !c),
7686
- onChangeDetected: () => {
7687
- setHasChanges(true);
7688
- setBannerVisible(true);
7689
- }
7690
- })
7691
- }),
7692
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7693
- className: cx("section"),
7694
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagsSection, {
7695
- tags: localTags,
7696
- collapsed: tagsCollapsed,
7697
- onToggleCollapse: () => setTagsCollapsed((prev) => !prev),
7698
- onAddTag: () => setTagDrawerState({
7699
- open: true,
7700
- mode: "add"
9509
+ mode === "edit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9510
+ style: {
9511
+ display: "flex",
9512
+ gap: token.marginLG,
9513
+ flex: 1,
9514
+ minHeight: 0
9515
+ },
9516
+ children: [!isMobile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditModeSidebar, {
9517
+ selectedItem: selectedEditItem,
9518
+ onSelectItem: setSelectedEditItem,
9519
+ endpoints: allEndpoints,
9520
+ hasGeneralError,
9521
+ hasSaveErrors: saveErrors.length > 0
9522
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9523
+ style: {
9524
+ display: "flex",
9525
+ flexDirection: "column",
9526
+ gap: token.marginLG,
9527
+ flex: 1,
9528
+ overflow: "auto"
9529
+ },
9530
+ children: isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
9531
+ errorBox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9532
+ className: cx("section"),
9533
+ children: errorBox
7701
9534
  }),
7702
- onEditTag: (tag) => setTagDrawerState({
7703
- open: true,
7704
- mode: "edit",
7705
- initialValues: {
7706
- name: tag.name,
7707
- description: tag.description,
7708
- externalDocsDescription: tag.externalDocsDescription,
7709
- externalDocsLink: tag.externalDocsUrl
7710
- }
9535
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9536
+ className: cx("section"),
9537
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneralSection, {
9538
+ apiName: localApiName,
9539
+ authType: selectedApi?.authType || "",
9540
+ version: selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion)?.version || "",
9541
+ description: localDescription,
9542
+ onApiNameChange: (val) => {
9543
+ setApiNameTouched(true);
9544
+ setLocalApiName(val);
9545
+ },
9546
+ apiNameError: hasApiNameError,
9547
+ onDescriptionChange: (val) => {
9548
+ setDescriptionTouched(true);
9549
+ setLocalDescription(val);
9550
+ },
9551
+ descriptionError: hasDescriptionError,
9552
+ collapsed: generalCollapsed,
9553
+ onToggleCollapse: () => setGeneralCollapsed((c) => !c),
9554
+ onChangeDetected: () => {
9555
+ setBannerVisible(true);
9556
+ }
9557
+ })
9558
+ }),
9559
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9560
+ className: cx("section"),
9561
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagsSection, {
9562
+ tags: localTags,
9563
+ collapsed: tagsCollapsed,
9564
+ onToggleCollapse: () => setTagsCollapsed((prev) => !prev),
9565
+ onAddTag: () => setTagDrawerState({
9566
+ open: true,
9567
+ mode: "add"
9568
+ }),
9569
+ onEditTag: (tag) => setTagDrawerState({
9570
+ open: true,
9571
+ mode: "edit",
9572
+ initialValues: {
9573
+ name: tag.name,
9574
+ description: tag.description,
9575
+ externalDocsDescription: tag.externalDocsDescription,
9576
+ externalDocsLink: tag.externalDocsUrl
9577
+ }
9578
+ }),
9579
+ onDeleteTag: (tagName) => setDeleteTagModal({
9580
+ open: true,
9581
+ tagName
9582
+ })
9583
+ })
7711
9584
  }),
7712
- onDeleteTag: (tagName) => setDeleteTagModal({
7713
- open: true,
7714
- tagName
9585
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9586
+ className: cx("section"),
9587
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointsSection, {
9588
+ mode,
9589
+ endpointsByTag: getEndpointsByTag(),
9590
+ collapsed: endpointsCollapsed,
9591
+ onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
9592
+ endpointNames,
9593
+ endpointDescs,
9594
+ endpointTags,
9595
+ availableTags: localTags.map((t) => t.name),
9596
+ onEndpointNameChange: (id, val) => {
9597
+ setEndpointNames((prev) => ({
9598
+ ...prev,
9599
+ [id]: val
9600
+ }));
9601
+ setBannerVisible(true);
9602
+ },
9603
+ onEndpointDescChange: (id, val) => {
9604
+ setEndpointDescs((prev) => ({
9605
+ ...prev,
9606
+ [id]: val
9607
+ }));
9608
+ setBannerVisible(true);
9609
+ },
9610
+ onEndpointTagsChange: (id, val) => {
9611
+ setEndpointTags((prev) => ({
9612
+ ...prev,
9613
+ [id]: val
9614
+ }));
9615
+ setBannerVisible(true);
9616
+ },
9617
+ endpointParams,
9618
+ onAddParameter: (endpointId, param) => {
9619
+ setEndpointParams((prev) => ({
9620
+ ...prev,
9621
+ [endpointId]: [...prev[endpointId] ?? [], param]
9622
+ }));
9623
+ setBannerVisible(true);
9624
+ },
9625
+ onEditParameter: (endpointId, idx, param) => {
9626
+ setEndpointParams((prev) => ({
9627
+ ...prev,
9628
+ [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
9629
+ }));
9630
+ setBannerVisible(true);
9631
+ },
9632
+ onDeleteParameter: (endpointId, idx) => {
9633
+ setEndpointParams((prev) => ({
9634
+ ...prev,
9635
+ [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
9636
+ }));
9637
+ setBannerVisible(true);
9638
+ },
9639
+ endpointResponseParams,
9640
+ onAddResponseParameter: (endpointId, param) => {
9641
+ setEndpointResponseParams((prev) => ({
9642
+ ...prev,
9643
+ [endpointId]: [...prev[endpointId] ?? [], param]
9644
+ }));
9645
+ setBannerVisible(true);
9646
+ },
9647
+ onEditResponseParameter: (endpointId, idx, param) => {
9648
+ setEndpointResponseParams((prev) => ({
9649
+ ...prev,
9650
+ [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
9651
+ }));
9652
+ setBannerVisible(true);
9653
+ },
9654
+ onDeleteResponseParameter: (endpointId, idx) => {
9655
+ setEndpointResponseParams((prev) => ({
9656
+ ...prev,
9657
+ [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
9658
+ }));
9659
+ setBannerVisible(true);
9660
+ }
9661
+ }, resetKey)
7715
9662
  })
7716
- })
7717
- }),
7718
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7719
- className: cx("section"),
7720
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointsSection, {
7721
- mode,
7722
- endpointsByTag: getEndpointsByTag(),
7723
- collapsed: endpointsCollapsed,
7724
- onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
7725
- endpointNames,
7726
- endpointDescs,
7727
- endpointTags,
7728
- availableTags: localTags.map((t) => t.name),
7729
- onEndpointNameChange: (id, val) => {
7730
- setEndpointNames((prev) => ({
7731
- ...prev,
7732
- [id]: val
7733
- }));
7734
- setHasChanges(true);
7735
- setBannerVisible(true);
7736
- },
7737
- onEndpointDescChange: (id, val) => {
7738
- setEndpointDescs((prev) => ({
7739
- ...prev,
7740
- [id]: val
7741
- }));
7742
- setHasChanges(true);
7743
- setBannerVisible(true);
7744
- },
7745
- onEndpointTagsChange: (id, val) => {
7746
- setEndpointTags((prev) => ({
7747
- ...prev,
7748
- [id]: val
7749
- }));
7750
- setHasChanges(true);
7751
- setBannerVisible(true);
7752
- },
7753
- endpointParams,
7754
- onAddParameter: (endpointId, param) => {
7755
- setEndpointParams((prev) => ({
7756
- ...prev,
7757
- [endpointId]: [...prev[endpointId] ?? [], param]
7758
- }));
7759
- setHasChanges(true);
7760
- setBannerVisible(true);
7761
- },
7762
- onEditParameter: (endpointId, idx, param) => {
7763
- setEndpointParams((prev) => ({
7764
- ...prev,
7765
- [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
7766
- }));
7767
- setHasChanges(true);
7768
- setBannerVisible(true);
7769
- },
7770
- onDeleteParameter: (endpointId, idx) => {
7771
- setEndpointParams((prev) => ({
7772
- ...prev,
7773
- [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
7774
- }));
7775
- setHasChanges(true);
7776
- setBannerVisible(true);
7777
- },
7778
- endpointResponseParams,
7779
- onAddResponseParameter: (endpointId, param) => {
7780
- setEndpointResponseParams((prev) => ({
7781
- ...prev,
7782
- [endpointId]: [...prev[endpointId] ?? [], param]
7783
- }));
7784
- setHasChanges(true);
7785
- setBannerVisible(true);
7786
- },
7787
- onEditResponseParameter: (endpointId, idx, param) => {
7788
- setEndpointResponseParams((prev) => ({
7789
- ...prev,
7790
- [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
7791
- }));
7792
- setHasChanges(true);
7793
- setBannerVisible(true);
7794
- },
7795
- onDeleteResponseParameter: (endpointId, idx) => {
7796
- setEndpointResponseParams((prev) => ({
7797
- ...prev,
7798
- [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
7799
- }));
7800
- setHasChanges(true);
7801
- setBannerVisible(true);
7802
- }
7803
- }, resetKey)
7804
- })
7805
- ] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9663
+ ] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
9664
+ selectedEditItem.type === "errors" && errorBox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9665
+ className: cx("section"),
9666
+ children: errorBox
9667
+ }),
9668
+ selectedEditItem.type !== "errors" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: errorBoxExpanded && errorBox ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9669
+ className: cx("section"),
9670
+ children: errorBox
9671
+ }) : errorBoxCollapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9672
+ className: cx("section"),
9673
+ children: errorBoxCollapsed
9674
+ }) }),
9675
+ selectedEditItem.type === "general" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9676
+ className: cx("section"),
9677
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneralSection, {
9678
+ apiName: localApiName,
9679
+ authType: selectedApi?.authType || "",
9680
+ version: selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion)?.version || "",
9681
+ description: localDescription,
9682
+ onApiNameChange: (val) => {
9683
+ setApiNameTouched(true);
9684
+ setLocalApiName(val);
9685
+ },
9686
+ apiNameError: hasApiNameError,
9687
+ onDescriptionChange: (val) => {
9688
+ setDescriptionTouched(true);
9689
+ setLocalDescription(val);
9690
+ },
9691
+ descriptionError: hasDescriptionError,
9692
+ collapsed: generalCollapsed,
9693
+ onToggleCollapse: () => setGeneralCollapsed((c) => !c),
9694
+ onChangeDetected: () => {
9695
+ setBannerVisible(true);
9696
+ }
9697
+ })
9698
+ }),
9699
+ selectedEditItem.type === "tags" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9700
+ className: cx("section"),
9701
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagsSection, {
9702
+ tags: localTags,
9703
+ collapsed: tagsCollapsed,
9704
+ onToggleCollapse: () => setTagsCollapsed((prev) => !prev),
9705
+ onAddTag: () => setTagDrawerState({
9706
+ open: true,
9707
+ mode: "add"
9708
+ }),
9709
+ onEditTag: (tag) => setTagDrawerState({
9710
+ open: true,
9711
+ mode: "edit",
9712
+ initialValues: {
9713
+ name: tag.name,
9714
+ description: tag.description,
9715
+ externalDocsDescription: tag.externalDocsDescription,
9716
+ externalDocsLink: tag.externalDocsUrl
9717
+ }
9718
+ }),
9719
+ onDeleteTag: (tagName) => setDeleteTagModal({
9720
+ open: true,
9721
+ tagName
9722
+ })
9723
+ })
9724
+ }),
9725
+ selectedEditItem.type === "endpoint" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointsSection, {
9726
+ mode,
9727
+ endpointsByTag: getEndpointsByTag(),
9728
+ selectedEndpointKey: selectedEditItem.key,
9729
+ collapsed: endpointsCollapsed,
9730
+ onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
9731
+ endpointNames,
9732
+ endpointDescs,
9733
+ endpointTags,
9734
+ availableTags: localTags.map((t) => t.name),
9735
+ onEndpointNameChange: (id, val) => {
9736
+ setEndpointNames((prev) => ({
9737
+ ...prev,
9738
+ [id]: val
9739
+ }));
9740
+ setBannerVisible(true);
9741
+ },
9742
+ onEndpointDescChange: (id, val) => {
9743
+ setEndpointDescs((prev) => ({
9744
+ ...prev,
9745
+ [id]: val
9746
+ }));
9747
+ setBannerVisible(true);
9748
+ },
9749
+ onEndpointTagsChange: (id, val) => {
9750
+ setEndpointTags((prev) => ({
9751
+ ...prev,
9752
+ [id]: val
9753
+ }));
9754
+ setBannerVisible(true);
9755
+ },
9756
+ endpointParams,
9757
+ onAddParameter: (endpointId, param) => {
9758
+ setEndpointParams((prev) => ({
9759
+ ...prev,
9760
+ [endpointId]: [...prev[endpointId] ?? [], param]
9761
+ }));
9762
+ setBannerVisible(true);
9763
+ },
9764
+ onEditParameter: (endpointId, idx, param) => {
9765
+ setEndpointParams((prev) => ({
9766
+ ...prev,
9767
+ [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
9768
+ }));
9769
+ setBannerVisible(true);
9770
+ },
9771
+ onDeleteParameter: (endpointId, idx) => {
9772
+ setEndpointParams((prev) => ({
9773
+ ...prev,
9774
+ [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
9775
+ }));
9776
+ setBannerVisible(true);
9777
+ },
9778
+ endpointResponseParams,
9779
+ onAddResponseParameter: (endpointId, param) => {
9780
+ setEndpointResponseParams((prev) => ({
9781
+ ...prev,
9782
+ [endpointId]: [...prev[endpointId] ?? [], param]
9783
+ }));
9784
+ setBannerVisible(true);
9785
+ },
9786
+ onEditResponseParameter: (endpointId, idx, param) => {
9787
+ setEndpointResponseParams((prev) => ({
9788
+ ...prev,
9789
+ [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
9790
+ }));
9791
+ setBannerVisible(true);
9792
+ },
9793
+ onDeleteResponseParameter: (endpointId, idx) => {
9794
+ setEndpointResponseParams((prev) => ({
9795
+ ...prev,
9796
+ [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
9797
+ }));
9798
+ setBannerVisible(true);
9799
+ }
9800
+ }, resetKey)
9801
+ ] })
9802
+ })]
9803
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
7806
9804
  className: cx("docs-layout"),
7807
- children: [
7808
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {
7809
- searchValue,
7810
- setSearchValue
7811
- }),
7812
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MainContent, {
9805
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {
9806
+ searchValue,
9807
+ setSearchValue
9808
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9809
+ className: cx("content-scroll-area"),
9810
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MainContent, {
7813
9811
  handleVisitLandingPage: _handleVisitLandingPage,
7814
9812
  handleResetSearch,
7815
9813
  searchEnabled: !!searchValue
7816
- }),
7817
- !isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeboxSidebar$1, {})
7818
- ]
9814
+ }), !isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeboxSidebar$1, {})]
9815
+ })]
7819
9816
  }),
7820
9817
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddTagDrawer, {
7821
9818
  open: tagDrawerState.open,
@@ -7828,6 +9825,144 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7828
9825
  onAddTag: handleAddTag,
7829
9826
  onEditTag: handleUpdateTag
7830
9827
  }),
9828
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Modal, {
9829
+ open: saveConfirmModal,
9830
+ onCancel: () => setSaveConfirmModal(false),
9831
+ centered: true,
9832
+ title: null,
9833
+ footer: null,
9834
+ closable: false,
9835
+ width: 520,
9836
+ className: "delete-tag-confirm-modal",
9837
+ styles: {
9838
+ content: {
9839
+ padding: 0,
9840
+ borderRadius: 8,
9841
+ overflow: "hidden"
9842
+ },
9843
+ body: {
9844
+ padding: 0,
9845
+ margin: 0
9846
+ }
9847
+ },
9848
+ children: [
9849
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9850
+ className: cx("deleteModalHead"),
9851
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
9852
+ className: cx("deleteModalTitle"),
9853
+ children: "Save & Publish Changes"
9854
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
9855
+ className: cx("deleteModalCloseBtn"),
9856
+ onClick: () => setSaveConfirmModal(false),
9857
+ "aria-label": "Close",
9858
+ children: "×"
9859
+ })]
9860
+ }),
9861
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9862
+ className: cx("deleteModalContent"),
9863
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
9864
+ className: cx("deleteModalContentText"),
9865
+ children: "Are you sure you want to Save & Publish Changes?"
9866
+ })
9867
+ }),
9868
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9869
+ className: cx("deleteModalFooter"),
9870
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
9871
+ size: "middle",
9872
+ onClick: () => setSaveConfirmModal(false),
9873
+ style: {
9874
+ borderRadius: 8,
9875
+ height: 32,
9876
+ paddingInline: 15
9877
+ },
9878
+ children: "Cancel"
9879
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
9880
+ type: "primary",
9881
+ size: "middle",
9882
+ onClick: () => {
9883
+ setSaveConfirmModal(false);
9884
+ handleSave();
9885
+ },
9886
+ style: {
9887
+ borderRadius: 8,
9888
+ height: 32,
9889
+ paddingInline: 16
9890
+ },
9891
+ children: "Yes, Save & Publish"
9892
+ })]
9893
+ })
9894
+ ]
9895
+ }),
9896
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Modal, {
9897
+ open: resetConfirmModal,
9898
+ onCancel: () => setResetConfirmModal(false),
9899
+ centered: true,
9900
+ title: null,
9901
+ footer: null,
9902
+ closable: false,
9903
+ width: 520,
9904
+ className: "delete-tag-confirm-modal",
9905
+ styles: {
9906
+ content: {
9907
+ padding: 0,
9908
+ borderRadius: 8,
9909
+ overflow: "hidden"
9910
+ },
9911
+ body: {
9912
+ padding: 0,
9913
+ margin: 0
9914
+ }
9915
+ },
9916
+ children: [
9917
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9918
+ className: cx("deleteModalHead"),
9919
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
9920
+ className: cx("deleteModalTitle"),
9921
+ children: "Reset changes?"
9922
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
9923
+ className: cx("deleteModalCloseBtn"),
9924
+ onClick: () => setResetConfirmModal(false),
9925
+ "aria-label": "Close",
9926
+ children: "×"
9927
+ })]
9928
+ }),
9929
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
9930
+ className: cx("deleteModalContent"),
9931
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
9932
+ className: cx("deleteModalContentText"),
9933
+ children: "This will discard your unsaved changes."
9934
+ })
9935
+ }),
9936
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
9937
+ className: cx("deleteModalFooter"),
9938
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
9939
+ size: "middle",
9940
+ onClick: () => setResetConfirmModal(false),
9941
+ style: {
9942
+ borderRadius: 8,
9943
+ height: 32,
9944
+ paddingInline: 15
9945
+ },
9946
+ children: "Cancel"
9947
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
9948
+ size: "middle",
9949
+ onClick: () => {
9950
+ setResetConfirmModal(false);
9951
+ handleReset();
9952
+ },
9953
+ style: {
9954
+ borderRadius: 8,
9955
+ height: 32,
9956
+ paddingInline: 16,
9957
+ backgroundColor: "#faad14",
9958
+ borderColor: "#faad14",
9959
+ color: "#fff"
9960
+ },
9961
+ children: "Yes, Reset"
9962
+ })]
9963
+ })
9964
+ ]
9965
+ }),
7831
9966
  /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Modal, {
7832
9967
  open: deleteTagModal.open,
7833
9968
  onCancel: () => setDeleteTagModal({