@digi-frontend/dgate-api-documentation 4.0.3 → 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 +2858 -729
  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 +2854 -725
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -637,7 +637,8 @@ const getSidebarStyles$1 = (token, scope) => ({
637
637
  backgroundColor: token.colorBgContainer,
638
638
  overflowY: "auto",
639
639
  overflowX: "clip",
640
- borderRadius: token.borderRadius
640
+ borderRadius: token.borderRadius,
641
+ height: "100%"
641
642
  },
642
643
  [scope("content")]: { padding: token.padding },
643
644
  [scope("controls")]: {
@@ -1097,8 +1098,8 @@ const Sidebar$1 = ({ searchValue, setSearchValue }) => {
1097
1098
  };
1098
1099
  return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(re_resizable.Resizable, {
1099
1100
  as: "aside",
1100
- minWidth: 300,
1101
- maxWidth: 386,
1101
+ minWidth: 240,
1102
+ maxWidth: 240,
1102
1103
  enable: {
1103
1104
  top: false,
1104
1105
  right: true,
@@ -1110,7 +1111,7 @@ const Sidebar$1 = ({ searchValue, setSearchValue }) => {
1110
1111
  topLeft: false
1111
1112
  },
1112
1113
  defaultSize: {
1113
- width: 333,
1114
+ width: 240,
1114
1115
  height: "100%"
1115
1116
  },
1116
1117
  className: cx("sider"),
@@ -1741,7 +1742,7 @@ const handleStatusColor = (code) => {
1741
1742
  };
1742
1743
  //#endregion
1743
1744
  //#region src/view/components/EndpointPage/EndpointPage.tsx
1744
- const { Title: Title$7, Paragraph: Paragraph$1 } = antd.Typography;
1745
+ const { Title: Title$8, Paragraph: Paragraph$1 } = antd.Typography;
1745
1746
  const requestColumns$1 = [
1746
1747
  {
1747
1748
  title: "Parameter",
@@ -1760,7 +1761,7 @@ const requestColumns$1 = [
1760
1761
  }
1761
1762
  ];
1762
1763
  const responseColumns$1 = [...requestColumns$1];
1763
- 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) => {
1764
1765
  let typeLabel = p.schema?.type;
1765
1766
  if (p.schema?.type === "array" && p.schema?.items?.type) typeLabel = `${p.schema.type}_${p.schema.items.type}`;
1766
1767
  return {
@@ -1769,17 +1770,17 @@ const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required ===
1769
1770
  p.name,
1770
1771
  typeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1771
1772
  style: {
1772
- color: "rgba(0,0,0,0.45)",
1773
+ color: colors.typeLabel,
1773
1774
  marginLeft: "0.25rem",
1774
1775
  marginRight: "0.25rem"
1775
1776
  },
1776
1777
  children: typeLabel
1777
1778
  }),
1778
1779
  p.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1779
- style: { color: "red" },
1780
+ style: { color: colors.required },
1780
1781
  children: "*"
1781
1782
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1782
- style: { color: "#52C41A" },
1783
+ style: { color: colors.optional },
1783
1784
  children: "Optional"
1784
1785
  })
1785
1786
  ] }),
@@ -1787,7 +1788,7 @@ const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required ===
1787
1788
  enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, { children: e }, e)) : "--"
1788
1789
  };
1789
1790
  });
1790
- const buildHeaderData$1 = (headers) => {
1791
+ const buildHeaderData$1 = (headers, colors) => {
1791
1792
  if (!headers) return [];
1792
1793
  return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
1793
1794
  let typeLabel = header.schema?.type;
@@ -1798,17 +1799,17 @@ const buildHeaderData$1 = (headers) => {
1798
1799
  name,
1799
1800
  typeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1800
1801
  style: {
1801
- color: "rgba(0,0,0,0.45)",
1802
+ color: colors.typeLabel,
1802
1803
  marginLeft: "0.25rem",
1803
1804
  marginRight: "0.25rem"
1804
1805
  },
1805
1806
  children: typeLabel
1806
1807
  }),
1807
1808
  header.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1808
- style: { color: "red" },
1809
+ style: { color: colors.required },
1809
1810
  children: "*"
1810
1811
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1811
- style: { color: "#52C41A" },
1812
+ style: { color: colors.optional },
1812
1813
  children: "Optional"
1813
1814
  })
1814
1815
  ] }, idx),
@@ -1821,17 +1822,13 @@ const EndpointPage$1 = () => {
1821
1822
  const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag } = useStore(({ view }) => view);
1822
1823
  const [endpointTooltip, setEndpointTooltip] = (0, react$1.useState)("Copy endpoint");
1823
1824
  const [selectedServer, setSelectedServer] = (0, react$1.useState)(0);
1824
- const { cx } = useStyle("EndpointPage", (token, scope) => ({
1825
+ const { cx, token } = useStyle("EndpointPage", (token, scope) => ({
1825
1826
  [scope("docs-endpoint-container")]: {
1826
1827
  display: "flex",
1827
1828
  flexDirection: "column",
1828
- gap: token.marginLG,
1829
- height: "100%"
1830
- },
1831
- [scope("content")]: {
1832
- width: "100%",
1833
- height: "100%"
1829
+ gap: token.marginLG
1834
1830
  },
1831
+ [scope("content")]: { width: "100%" },
1835
1832
  [scope("code")]: {
1836
1833
  background: "unset",
1837
1834
  borderRadius: token.borderRadius,
@@ -1855,12 +1852,19 @@ const EndpointPage$1 = () => {
1855
1852
  padding: "0px 0.75rem 0.75rem 0.75rem",
1856
1853
  ".ant-tabs-tab": { paddingTop: "0" }
1857
1854
  }
1858
- }
1855
+ },
1856
+ [scope("row-odd")]: { "& > td": { background: `${token.colorBgLayout} !important` } },
1857
+ [scope("row-even")]: { "& > td": { background: `${token.colorBgContainer} !important` } }
1859
1858
  }));
1860
1859
  const methodStyle = methodColors$1[selectedEndpoint?.method];
1861
- const headerParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || []);
1862
- const pathParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || []);
1863
- 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);
1864
1868
  const requestTabs = [
1865
1869
  {
1866
1870
  key: "header",
@@ -1870,7 +1874,8 @@ const EndpointPage$1 = () => {
1870
1874
  dataSource: headerParams,
1871
1875
  pagination: false,
1872
1876
  bordered: true,
1873
- size: "small"
1877
+ size: "small",
1878
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
1874
1879
  })
1875
1880
  },
1876
1881
  {
@@ -1881,7 +1886,8 @@ const EndpointPage$1 = () => {
1881
1886
  dataSource: pathParams,
1882
1887
  pagination: false,
1883
1888
  bordered: true,
1884
- size: "small"
1889
+ size: "small",
1890
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
1885
1891
  })
1886
1892
  },
1887
1893
  {
@@ -1892,12 +1898,13 @@ const EndpointPage$1 = () => {
1892
1898
  dataSource: queryParams,
1893
1899
  pagination: false,
1894
1900
  bordered: true,
1895
- size: "small"
1901
+ size: "small",
1902
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
1896
1903
  })
1897
1904
  }
1898
1905
  ].filter((t) => t !== null);
1899
1906
  const responseHeaders = (selectedEndpoint?.responses?.[selectedStatusCode || 200])?.headers;
1900
- const responseHeaderData = buildHeaderData$1(responseHeaders);
1907
+ const responseHeaderData = buildHeaderData$1(responseHeaders, paramColors);
1901
1908
  selectedApi?.servers?.map((server, index) => ({
1902
1909
  value: index,
1903
1910
  label: `${server.url}${selectedEndpoint?.path || ""}`
@@ -1941,7 +1948,7 @@ const EndpointPage$1 = () => {
1941
1948
  display: "flex",
1942
1949
  flexDirection: "row",
1943
1950
  alignItems: "center",
1944
- color: "rgba(0,0,0,0.45)",
1951
+ color: token.colorTextQuaternary,
1945
1952
  gap: "0.25rem"
1946
1953
  },
1947
1954
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: selectedEndpoint?.tagName || "default" })
@@ -1956,7 +1963,7 @@ const EndpointPage$1 = () => {
1956
1963
  }) }
1957
1964
  ] })]
1958
1965
  }),
1959
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$7, {
1966
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$8, {
1960
1967
  level: 3,
1961
1968
  children: [
1962
1969
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, {
@@ -2006,7 +2013,8 @@ const EndpointPage$1 = () => {
2006
2013
  dataSource: responseHeaderData,
2007
2014
  pagination: false,
2008
2015
  bordered: true,
2009
- size: "small"
2016
+ size: "small",
2017
+ rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
2010
2018
  })
2011
2019
  })
2012
2020
  ]
@@ -2043,9 +2051,9 @@ const MainContent$1 = ({ searchEnabled, handleResetSearch, handleVisitLandingPag
2043
2051
  const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
2044
2052
  [scope("inner-doc-container")]: {
2045
2053
  backgroundColor: token.colorBgContainer,
2054
+ flex: 1,
2055
+ minWidth: 0,
2046
2056
  height: "100%",
2047
- width: "100%",
2048
- maxHeight: "100%",
2049
2057
  overflow: "auto",
2050
2058
  borderRadius: token.borderRadius,
2051
2059
  padding: token.paddingXL
@@ -2130,8 +2138,8 @@ const MainContent$1 = ({ searchEnabled, handleResetSearch, handleVisitLandingPag
2130
2138
  //#endregion
2131
2139
  //#region src/view/components/ApiPage/components/ApiDocumentationBar.tsx
2132
2140
  const { useBreakpoint: useBreakpoint$4 } = antd.Grid;
2133
- const { Title: Title$5 } = antd.Typography;
2134
- 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 }) => {
2135
2143
  const isMobile = !useBreakpoint$4().md;
2136
2144
  const { wrapSSR, cx, token } = useStyle("ApiDocumentationBar", (token, scope) => ({
2137
2145
  [scope("root")]: {
@@ -2243,7 +2251,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2243
2251
  className: cx("title-section"),
2244
2252
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
2245
2253
  title: apiName,
2246
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title$5, {
2254
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title$6, {
2247
2255
  level: 3,
2248
2256
  ellipsis: true,
2249
2257
  style: {
@@ -2267,7 +2275,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2267
2275
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
2268
2276
  size: "large",
2269
2277
  type: "primary",
2270
- disabled: !hasChanges,
2278
+ disabled: !hasChanges || hasErrors,
2271
2279
  onClick: onSave,
2272
2280
  children: "Save"
2273
2281
  })]
@@ -2281,7 +2289,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2281
2289
  className: cx("title-section"),
2282
2290
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
2283
2291
  title: `${apiName} API Documentation`,
2284
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$5, {
2292
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$6, {
2285
2293
  level: 3,
2286
2294
  style: {
2287
2295
  margin: 0,
@@ -2325,7 +2333,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2325
2333
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
2326
2334
  size: "large",
2327
2335
  type: "primary",
2328
- disabled: !hasChanges,
2336
+ disabled: !hasChanges || hasErrors,
2329
2337
  onClick: onSave,
2330
2338
  children: "Save & Publish Changes"
2331
2339
  })]
@@ -2336,14 +2344,16 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
2336
2344
  //#endregion
2337
2345
  //#region src/view/components/ApiPage/components/GeneralSection.tsx
2338
2346
  const { useBreakpoint: useBreakpoint$3 } = antd.Grid;
2339
- 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 }) => {
2340
2348
  const isMobile = !useBreakpoint$3().md;
2341
2349
  const { wrapSSR, cx, token } = useStyle("GeneralSection", (token, scope) => ({
2342
2350
  [scope("root")]: {
2343
2351
  display: "flex",
2344
2352
  flexDirection: "column",
2345
- borderRadius: token.borderRadius,
2346
- overflow: "hidden",
2353
+ gap: token.margin,
2354
+ padding: `${token.marginLG}px ${token.marginLG}px 48px`,
2355
+ background: token.colorBgElevated,
2356
+ borderRadius: token.borderRadiusLG,
2347
2357
  width: "100%"
2348
2358
  },
2349
2359
  [scope("head")]: {
@@ -2357,15 +2367,20 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
2357
2367
  [scope("body")]: {
2358
2368
  display: "flex",
2359
2369
  flexDirection: "column",
2360
- gap: token.paddingLG,
2370
+ gap: token.margin,
2361
2371
  padding: token.paddingLG,
2362
- paddingBottom: token.paddingXXL ?? 48,
2363
2372
  background: token.colorBgElevated,
2364
2373
  borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
2365
2374
  },
2375
+ [scope("fields")]: {
2376
+ display: "flex",
2377
+ flexDirection: "column",
2378
+ gap: token.margin,
2379
+ width: "100%"
2380
+ },
2366
2381
  [scope("row")]: {
2367
2382
  display: "flex",
2368
- gap: token.paddingLG,
2383
+ gap: token.margin,
2369
2384
  width: "100%"
2370
2385
  },
2371
2386
  [scope("field")]: {
@@ -2384,108 +2399,91 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
2384
2399
  paddingBottom: token.paddingXS,
2385
2400
  lineHeight: "22px"
2386
2401
  },
2387
- [scope("label-required")]: {
2402
+ [scope("required")]: {
2388
2403
  color: token.colorError,
2389
2404
  fontSize: token.fontSize
2390
- },
2391
- [scope("count")]: {
2392
- alignSelf: "flex-end",
2393
- fontSize: token.fontSize,
2394
- color: token.colorTextDescription,
2395
- marginTop: token.marginXXS
2396
2405
  }
2397
2406
  }));
2398
- return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2399
- className: cx("root"),
2400
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2401
- className: cx("head"),
2402
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
2403
- level: 4,
2404
- style: {
2405
- margin: 0,
2406
- color: token.colorTextHeading
2407
- },
2408
- children: "General"
2409
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
2410
- type: "text",
2411
- size: "large",
2412
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.UpCircleOutlined, { style: { fontSize: 18 } }),
2413
- onClick: onToggleCollapse,
2414
- style: {
2415
- transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
2416
- transition: "transform 0.2s"
2417
- }
2418
- })]
2419
- }), !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2420
- className: cx("body"),
2421
- style: isMobile ? {
2422
- padding: token.paddingMD,
2423
- paddingBottom: token.paddingXXL ?? 48
2424
- } : void 0,
2425
- 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", {
2426
2441
  className: cx("row"),
2427
2442
  style: isMobile ? { flexDirection: "column" } : void 0,
2428
- children: [
2429
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2430
- className: cx("field"),
2431
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2432
- className: cx("label"),
2433
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "API Name" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2434
- className: cx("label-required"),
2435
- children: "*"
2436
- })]
2437
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2438
- size: "large",
2439
- value: apiName,
2440
- onChange: (e) => {
2441
- onApiNameChange(e.target.value);
2442
- onChangeDetected?.();
2443
- },
2444
- maxLength: 35,
2445
- showCount: true
2446
- })]
2447
- }),
2448
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2449
- className: cx("field"),
2450
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2451
- className: cx("label"),
2452
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Authentication Type" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2453
- className: cx("label-required"),
2454
- children: "*"
2455
- })]
2456
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2457
- size: "large",
2458
- value: authType,
2459
- 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: "*"
2460
2454
  })]
2461
- }),
2462
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2463
- className: cx("field"),
2464
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2465
- className: cx("label"),
2466
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Version" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2467
- className: cx("label-required"),
2468
- children: "*"
2469
- })]
2470
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
2471
- size: "large",
2472
- value: version,
2473
- 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: "*"
2474
2467
  })]
2475
- })
2476
- ]
2477
- }), /* @__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", {
2478
2476
  className: cx("field"),
2479
- style: { width: "100%" },
2480
2477
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2481
2478
  className: cx("label"),
2482
2479
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Description" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
2483
- className: cx("label-required"),
2480
+ className: cx("required"),
2484
2481
  children: "*"
2485
2482
  })]
2486
2483
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
2487
2484
  size: "large",
2488
2485
  value: description,
2486
+ status: descriptionError ? "error" : void 0,
2489
2487
  onChange: (e) => {
2490
2488
  onDescriptionChange(e.target.value);
2491
2489
  onChangeDetected?.();
@@ -2497,64 +2495,138 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
2497
2495
  resize: "vertical"
2498
2496
  }
2499
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
+ }
2500
2521
  })]
2522
+ }), !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2523
+ className: cx("body"),
2524
+ children: fieldsContent
2501
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]
2502
2536
  }));
2503
2537
  };
2504
2538
  //#endregion
2505
2539
  //#region src/assets/trash.tsx
2506
- const Trash = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
2507
- 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",
2508
2606
  fill: "none",
2509
2607
  xmlns: "http://www.w3.org/2000/svg",
2510
2608
  ...props,
2511
2609
  children: [
2512
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mask", {
2513
- id: "path-1-inside-1_17984_239034",
2514
- fill: "white",
2515
- 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" })
2516
- }),
2517
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2518
- 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",
2519
- fill: "#FF4D4F",
2520
- mask: "url(#path-1-inside-1_17984_239034)"
2521
- }),
2522
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2523
- 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",
2524
- fill: "#FF4D4F"
2525
- }),
2526
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2527
- 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",
2528
- stroke: "#FF4D4F",
2529
- strokeWidth: "1.5",
2530
- strokeLinecap: "round",
2531
- strokeLinejoin: "round"
2532
- }),
2533
2610
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2534
- 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",
2535
- 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",
2536
2613
  strokeWidth: "1.5",
2537
2614
  strokeLinecap: "round",
2538
2615
  strokeLinejoin: "round"
2539
2616
  }),
2540
2617
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2541
- 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",
2542
- 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",
2543
2620
  strokeWidth: "1.5",
2621
+ strokeMiterlimit: "10",
2544
2622
  strokeLinecap: "round",
2545
2623
  strokeLinejoin: "round"
2546
2624
  }),
2547
2625
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2548
- d: "M18.7476 23.375H21.2451",
2549
- stroke: "#FF4D4F",
2550
- strokeWidth: "1.5",
2551
- strokeLinecap: "round",
2552
- strokeLinejoin: "round"
2553
- }),
2554
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
2555
- d: "M18.125 20.375H21.875",
2556
- stroke: "#FF4D4F",
2626
+ d: "M11.1826 3.11328C11.6851 4.90578 13.0876 6.30828 14.8876 6.81828",
2627
+ stroke: "currentColor",
2557
2628
  strokeWidth: "1.5",
2629
+ strokeMiterlimit: "10",
2558
2630
  strokeLinecap: "round",
2559
2631
  strokeLinejoin: "round"
2560
2632
  })
@@ -3206,7 +3278,8 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
3206
3278
  //#endregion
3207
3279
  //#region src/view/components/ApiPage/components/EndpointsSection.tsx
3208
3280
  const { useBreakpoint: useBreakpoint$2 } = antd.Grid;
3209
- const PAGE_SIZE = 5;
3281
+ const PAGE_SIZE = 4;
3282
+ const VIEW_PAGE_SIZE = 4;
3210
3283
  const getStatusCodeColor = (code, token) => {
3211
3284
  const n = parseInt(code, 10);
3212
3285
  if (n >= 400 && n < 500) return {
@@ -3226,8 +3299,24 @@ const buildViewParamRows = (params) => params.map((p, idx) => ({
3226
3299
  description: p.description ?? "",
3227
3300
  enum: p.enum ?? []
3228
3301
  }));
3229
- 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 }) => {
3230
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]);
3231
3320
  const [paramDrawerOpen, setParamDrawerOpen] = (0, react$1.useState)(false);
3232
3321
  const [paramDrawerEndpointId, setParamDrawerEndpointId] = (0, react$1.useState)(null);
3233
3322
  const [paramDrawerMode, setParamDrawerMode] = (0, react$1.useState)("add");
@@ -3274,10 +3363,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3274
3363
  [scope("root")]: {
3275
3364
  display: "flex",
3276
3365
  flexDirection: "column",
3277
- borderRadius: token.borderRadius,
3278
- overflow: "hidden",
3279
3366
  width: "100%",
3280
- 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
+ }
3281
3373
  },
3282
3374
  [scope("head")]: {
3283
3375
  display: "flex",
@@ -3326,15 +3418,12 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3326
3418
  display: "flex",
3327
3419
  alignItems: "center",
3328
3420
  justifyContent: "center",
3329
- width: 64,
3330
- padding: `0 ${token.paddingXS}px`,
3421
+ padding: "0 15px",
3331
3422
  borderRadius: token.borderRadius,
3332
- border: "1px solid",
3333
3423
  fontSize: token.fontSize,
3334
3424
  fontWeight: 400,
3335
3425
  lineHeight: "22px",
3336
- whiteSpace: "nowrap",
3337
- alignSelf: "stretch"
3426
+ whiteSpace: "nowrap"
3338
3427
  },
3339
3428
  [scope("endpoint-path")]: {
3340
3429
  fontSize: token.fontSizeLG,
@@ -3415,7 +3504,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3415
3504
  overflow: "hidden"
3416
3505
  },
3417
3506
  [scope("code-area")]: {
3418
- background: "#1d2856",
3507
+ background: token.colorBgSpotlight,
3419
3508
  padding: "10px 12px",
3420
3509
  fontFamily: "Cairo, sans-serif",
3421
3510
  fontSize: 14,
@@ -3427,7 +3516,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3427
3516
  display: "block"
3428
3517
  },
3429
3518
  [scope("code-footer")]: {
3430
- background: "#161d40",
3519
+ background: token.colorBgSpotlight,
3431
3520
  padding: 12,
3432
3521
  borderBottomLeftRadius: 8,
3433
3522
  borderBottomRightRadius: 8,
@@ -3584,26 +3673,36 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3584
3673
  gap: 8
3585
3674
  },
3586
3675
  [scope("param-edit-btn")]: {
3587
- width: 32,
3588
- height: 32,
3676
+ width: 40,
3677
+ height: 40,
3589
3678
  padding: 0,
3679
+ lineHeight: 1,
3590
3680
  display: "flex",
3591
3681
  alignItems: "center",
3592
3682
  justifyContent: "center",
3593
- 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",
3594
3687
  color: token.colorPrimary,
3688
+ "& .ant-btn-icon": {
3689
+ display: "flex",
3690
+ alignItems: "center",
3691
+ justifyContent: "center"
3692
+ },
3595
3693
  "&:hover": {
3596
3694
  borderColor: `${token.colorPrimary} !important`,
3597
3695
  color: `${token.colorPrimary} !important`
3598
3696
  }
3599
3697
  },
3600
3698
  [scope("param-delete-btn")]: {
3601
- width: 32,
3602
- height: 32,
3699
+ width: 40,
3700
+ height: 40,
3603
3701
  padding: 0,
3604
3702
  display: "flex",
3605
3703
  alignItems: "center",
3606
- justifyContent: "center"
3704
+ justifyContent: "center",
3705
+ "& svg path[mask]": { display: "none" }
3607
3706
  },
3608
3707
  [".delete-param-confirm-modal .ant-modal-container"]: {
3609
3708
  "--ant-modal-content-padding": "0px !important",
@@ -3927,36 +4026,1162 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3927
4026
  }
3928
4027
  }
3929
4028
  ];
3930
- return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
3931
- className: cx("root"),
3932
- children: [
3933
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
3934
- className: cx("head"),
3935
- 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, {
3936
4050
  level: 4,
3937
4051
  style: {
3938
4052
  margin: 0,
3939
4053
  color: token.colorTextHeading
3940
4054
  },
3941
- children: "Endpoints"
3942
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
3943
- type: "text",
3944
- size: "large",
3945
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.UpCircleOutlined, { style: { fontSize: 18 } }),
3946
- onClick: onToggleCollapse,
3947
- style: {
3948
- transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
3949
- transition: "transform 0.2s"
3950
- }
3951
- })]
3952
- }),
3953
- !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
3954
- className: cx("body"),
3955
- children: Object.values(endpointsByTag).flat().map((ep) => {
3956
- const isExpanded = expandedId === ep.id;
3957
- const methodColor = methodColors$1[ep.method];
3958
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
3959
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
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", {
3960
5185
  className: cx("endpoint-row"),
3961
5186
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
3962
5187
  className: cx("endpoint-card", isExpanded ? "endpoint-card-active" : ""),
@@ -3998,49 +5223,95 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
3998
5223
  className: cx("view-params-title"),
3999
5224
  children: "Request"
4000
5225
  })
4001
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
4002
- dataSource: buildViewParamRows(endpointParams[ep.id] ?? []),
4003
- columns: viewParamColumns,
4004
- pagination: false,
4005
- rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
4006
- size: "small",
4007
- bordered: true
4008
- })]
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
+ })()]
4009
5248
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4010
5249
  className: cx("view-params-card"),
4011
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4012
- className: cx("view-params-header"),
4013
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4014
- className: cx("view-params-title"),
4015
- children: "Response"
4016
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Select, {
4017
- className: cx("view-status-select-sm"),
4018
- popupClassName: "status-code-dropdown",
4019
- value: selectedStatusCodes[ep.id] ?? (Object.keys(ep.responses ?? {}).includes("200") ? "200" : Object.keys(ep.responses ?? {})[0]),
4020
- onChange: (val) => setSelectedStatusCodes((prev) => ({
4021
- ...prev,
4022
- [ep.id]: val
4023
- })),
4024
- options: Object.keys(ep.responses ?? {}).map((code) => ({
4025
- value: code,
4026
- label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
4027
- className: cx("status-label"),
4028
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4029
- className: cx("status-dot"),
4030
- style: { background: getStatusCodeColor(code, antdToken).dot }
4031
- }), /* @__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")
4032
5296
  })
4033
- })),
4034
- size: "middle"
4035
- })]
4036
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
4037
- dataSource: buildViewParamRows(endpointResponseParams[ep.id] ?? []),
4038
- columns: viewParamColumns,
4039
- pagination: false,
4040
- rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
4041
- size: "small",
4042
- bordered: true
4043
- })]
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
+ ]
4044
5315
  })]
4045
5316
  }),
4046
5317
  isExpanded && mode !== "view" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4060,7 +5331,9 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4060
5331
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
4061
5332
  size: "large",
4062
5333
  value: endpointNames[ep.id] ?? ep.summary ?? "",
4063
- onChange: (e) => onEndpointNameChange(ep.id, e.target.value)
5334
+ onChange: (e) => onEndpointNameChange(ep.id, e.target.value),
5335
+ maxLength: 100,
5336
+ showCount: true
4064
5337
  })]
4065
5338
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4066
5339
  className: cx("form-field"),
@@ -4293,9 +5566,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4293
5566
  style: {
4294
5567
  padding: 0,
4295
5568
  lineHeight: 1,
4296
- width: 32,
4297
- height: 32,
4298
- fontSize: 20
5569
+ width: 40,
5570
+ height: 40
4299
5571
  },
4300
5572
  className: cx("param-delete-btn"),
4301
5573
  onClick: () => setDeleteParamModal({
@@ -4307,7 +5579,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4307
5579
  })
4308
5580
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4309
5581
  ghost: true,
4310
- 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
+ },
4311
5592
  className: cx("param-edit-btn"),
4312
5593
  onClick: () => {
4313
5594
  setDrawerSource("request");
@@ -4404,14 +5685,15 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4404
5685
  className: cx("param-actions"),
4405
5686
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4406
5687
  danger: true,
4407
- type: "text",
4408
5688
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4409
- height: 32,
4410
- width: 32
5689
+ width: 32,
5690
+ height: 32
4411
5691
  }),
4412
5692
  style: {
4413
5693
  padding: 0,
4414
- lineHeight: 1
5694
+ lineHeight: 1,
5695
+ width: 40,
5696
+ height: 40
4415
5697
  },
4416
5698
  className: cx("param-delete-btn"),
4417
5699
  onClick: () => setDeleteParamModal({
@@ -4423,7 +5705,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4423
5705
  })
4424
5706
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4425
5707
  ghost: true,
4426
- 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
+ },
4427
5718
  className: cx("param-edit-btn"),
4428
5719
  onClick: () => {
4429
5720
  setDrawerSource("request");
@@ -4732,9 +6023,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4732
6023
  style: {
4733
6024
  padding: 0,
4734
6025
  lineHeight: 1,
4735
- width: 32,
4736
- height: 32,
4737
- fontSize: 20
6026
+ width: 40,
6027
+ height: 40
4738
6028
  },
4739
6029
  className: cx("param-delete-btn"),
4740
6030
  onClick: () => setDeleteParamModal({
@@ -4746,7 +6036,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4746
6036
  })
4747
6037
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4748
6038
  ghost: true,
4749
- 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
+ },
4750
6049
  className: cx("param-edit-btn"),
4751
6050
  onClick: () => {
4752
6051
  setDrawerSource("response");
@@ -4843,7 +6142,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4843
6142
  className: cx("param-actions"),
4844
6143
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4845
6144
  ghost: true,
4846
- 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
+ },
4847
6155
  className: cx("param-edit-btn"),
4848
6156
  onClick: () => {
4849
6157
  setDrawerSource("response");
@@ -4854,14 +6162,15 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
4854
6162
  }
4855
6163
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
4856
6164
  danger: true,
4857
- type: "text",
4858
6165
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
4859
- height: 18,
4860
- width: 18
6166
+ width: 32,
6167
+ height: 32
4861
6168
  }),
4862
6169
  style: {
4863
6170
  padding: 0,
4864
- lineHeight: 1
6171
+ lineHeight: 1,
6172
+ width: 40,
6173
+ height: 40
4865
6174
  },
4866
6175
  className: cx("param-delete-btn"),
4867
6176
  onClick: () => setDeleteParamModal({
@@ -5102,7 +6411,7 @@ const UnsavedChangesBanner = ({ onClose }) => {
5102
6411
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Alert, {
5103
6412
  className: cx("alert"),
5104
6413
  type: "warning",
5105
- message: "There are changes you made may not be saved",
6414
+ message: "There are changes you made that may not be saved",
5106
6415
  closable: true,
5107
6416
  onClose,
5108
6417
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.ExclamationCircleFilled, {}),
@@ -5113,57 +6422,50 @@ const UnsavedChangesBanner = ({ onClose }) => {
5113
6422
  //#endregion
5114
6423
  //#region src/view/components/ApiPage/components/TagsSection.tsx
5115
6424
  const { useBreakpoint: useBreakpoint$1 } = antd.Grid;
5116
- const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
6425
+ const TAGS_PAGE_SIZE = 8;
6426
+ const TagsSection = ({ tags, collapsed, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
5117
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);
5118
6433
  const { wrapSSR, cx, token } = useStyle("TagsSection", (token, scope) => ({
5119
6434
  [scope("root")]: {
5120
6435
  display: "flex",
5121
6436
  flexDirection: "column",
5122
- borderRadius: token.borderRadius,
5123
- overflow: "hidden",
5124
- width: "100%",
5125
- flexShrink: 0
6437
+ gap: token.margin,
6438
+ padding: token.marginLG,
6439
+ background: token.colorBgElevated,
6440
+ borderRadius: token.borderRadiusLG,
6441
+ width: "100%"
5126
6442
  },
5127
6443
  [scope("head")]: {
5128
6444
  display: "flex",
5129
6445
  alignItems: "center",
5130
6446
  justifyContent: "space-between",
5131
- padding: `${token.paddingXS}px ${token.paddingLG}px`,
5132
- background: token.colorPrimaryBg,
5133
- borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
5134
- },
5135
- [scope("head-actions")]: {
5136
- display: "flex",
5137
- alignItems: "center",
5138
- gap: token.margin
6447
+ width: "100%"
5139
6448
  },
5140
- [scope("body")]: {
6449
+ [scope("tags-list")]: {
5141
6450
  display: "flex",
5142
6451
  flexDirection: "column",
5143
- gap: 0,
5144
- padding: token.paddingLG,
5145
- background: token.colorBgElevated,
5146
- borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
6452
+ width: "100%"
5147
6453
  },
5148
6454
  [scope("tag-row")]: {
5149
6455
  display: "flex",
5150
6456
  alignItems: "center",
5151
6457
  justifyContent: "space-between",
5152
- height: 50,
5153
- paddingTop: token.controlHeightLG,
5154
- paddingBottom: token.controlHeightLG,
5155
- paddingRight: token.paddingLG,
5156
- borderBottom: `1px solid ${token.colorBorder}`,
5157
- width: "100%"
5158
- },
5159
- [scope("tag-row-last")]: {
5160
- borderBottom: "none",
5161
- paddingBottom: token.marginLG
6458
+ minHeight: 50,
6459
+ paddingTop: 12,
6460
+ paddingBottom: 12,
6461
+ width: "100%",
6462
+ borderBottom: `1px solid ${token.colorBorder}`
5162
6463
  },
6464
+ [scope("tag-row-last")]: { borderBottom: "none" },
5163
6465
  [scope("tag-info")]: {
5164
6466
  display: "flex",
5165
6467
  alignItems: "center",
5166
- gap: 32,
6468
+ gap: token.marginXL,
5167
6469
  flex: 1,
5168
6470
  minWidth: 0
5169
6471
  },
@@ -5199,32 +6501,13 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5199
6501
  alignItems: "center",
5200
6502
  gap: token.margin
5201
6503
  },
5202
- [scope("btn-delete")]: {
5203
- width: 40,
5204
- height: 40,
5205
- border: `1px solid ${token.colorError}`,
5206
- borderRadius: token.borderRadius,
5207
- display: "flex",
5208
- alignItems: "center",
5209
- justifyContent: "center"
5210
- },
5211
- [scope("btn-edit")]: {
5212
- width: 40,
5213
- height: 40,
5214
- border: `1px solid ${token.colorBorder}`,
5215
- borderRadius: token.borderRadius,
5216
- background: token.colorBgContainer,
5217
- boxShadow: "0px 2px 0px 0px rgba(0,0,0,0.02)",
5218
- display: "flex",
5219
- alignItems: "center",
5220
- justifyContent: "center"
5221
- },
5222
6504
  [scope("tag-row-mobile")]: {
5223
6505
  display: "flex",
5224
6506
  flexDirection: "row",
5225
6507
  alignItems: "flex-start",
5226
6508
  justifyContent: "space-between",
5227
6509
  gap: 8,
6510
+ paddingTop: 12,
5228
6511
  paddingBottom: token.margin,
5229
6512
  borderBottom: `1px solid ${token.colorBorder}`,
5230
6513
  width: "100%",
@@ -5254,16 +6537,176 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5254
6537
  display: "flex",
5255
6538
  flexDirection: "column",
5256
6539
  gap: 0,
5257
- padding: token.paddingMD,
5258
- background: token.colorBgElevated,
5259
- borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
5260
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
+ }
5261
6601
  }
5262
6602
  }));
5263
- return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5264
- 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%" },
5265
6708
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5266
- className: cx("head"),
6709
+ className: cx("head-collapse"),
5267
6710
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
5268
6711
  level: 4,
5269
6712
  style: {
@@ -5272,7 +6715,11 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5272
6715
  },
5273
6716
  children: "Tags"
5274
6717
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5275
- className: cx("head-actions"),
6718
+ style: {
6719
+ display: "flex",
6720
+ alignItems: "center",
6721
+ gap: token.marginXS
6722
+ },
5276
6723
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5277
6724
  ghost: true,
5278
6725
  type: "primary",
@@ -5291,208 +6738,149 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
5291
6738
  }
5292
6739
  })]
5293
6740
  })]
5294
- }), !collapsed && (isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5295
- className: cx("body-mobile"),
5296
- children: tags.map((tag, index) => {
5297
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5298
- className: cx("tag-row-mobile", index === tags.length - 1 ? "tag-row-mobile-last" : ""),
5299
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5300
- 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" : ""),
5301
6771
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5302
- className: cx("tag-col-mobile"),
5303
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5304
- className: cx("col-label"),
5305
- style: {
5306
- fontSize: token.fontSize,
5307
- lineHeight: "20px"
5308
- },
5309
- children: "Tag Name:"
5310
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5311
- className: cx("col-value"),
5312
- style: {
5313
- fontSize: token.fontSize,
5314
- lineHeight: "20px",
5315
- overflow: "hidden",
5316
- textOverflow: "ellipsis",
5317
- whiteSpace: "nowrap"
5318
- },
5319
- children: tag.name
5320
- })]
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
+ ]
5321
6836
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5322
- className: cx("tag-col-mobile"),
5323
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5324
- className: cx("col-label"),
5325
- style: {
5326
- fontSize: token.fontSize,
5327
- lineHeight: "20px"
5328
- },
5329
- 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
+ })
5330
6856
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5331
- title: tag.description && tag.description.length > 20 ? tag.description : "",
5332
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5333
- 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),
5334
6862
  style: {
5335
- fontSize: token.fontSize,
5336
- lineHeight: "20px",
5337
- overflow: "hidden",
5338
- textOverflow: "ellipsis",
5339
- whiteSpace: "nowrap",
5340
- maxWidth: 140,
5341
- display: "block"
5342
- },
5343
- children: tag.description ?? "-"
6863
+ width: 32,
6864
+ height: 32,
6865
+ padding: 0,
6866
+ lineHeight: 1,
6867
+ ...!tag.isDefault && { color: "#A146B3" }
6868
+ }
5344
6869
  })
5345
6870
  })]
5346
6871
  })]
5347
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5348
- className: cx("tag-actions"),
5349
- style: {
5350
- paddingTop: 6,
5351
- flexShrink: 0
5352
- },
5353
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5354
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5355
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5356
- danger: true,
5357
- type: "text",
5358
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
5359
- width: 32,
5360
- height: 32
5361
- }),
5362
- disabled: tag.isDefault,
5363
- onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
5364
- style: {
5365
- width: 40,
5366
- height: 40,
5367
- padding: 0,
5368
- lineHeight: 1
5369
- }
5370
- })
5371
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5372
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5373
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5374
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, { style: { fontSize: 18 } }),
5375
- disabled: tag.isDefault,
5376
- onClick: () => !tag.isDefault && onEditTag?.(tag),
5377
- style: {
5378
- width: 32,
5379
- height: 32,
5380
- padding: 0,
5381
- lineHeight: 1
5382
- }
5383
- })
5384
- })]
5385
- })]
5386
- }, tag.name);
5387
- })
5388
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5389
- className: cx("body"),
5390
- children: tags.map((tag, index) => {
5391
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5392
- className: cx("tag-row", index === tags.length - 1 ? "tag-row-last" : ""),
5393
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5394
- className: cx("tag-info"),
5395
- children: [
5396
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5397
- className: cx("tag-col"),
5398
- style: { width: 200 },
5399
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5400
- className: cx("col-label"),
5401
- children: "Tag Name"
5402
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5403
- className: cx("col-value"),
5404
- children: tag.name
5405
- })]
5406
- }),
5407
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5408
- className: cx("tag-col"),
5409
- style: { width: 280 },
5410
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5411
- className: cx("col-label"),
5412
- children: "Description"
5413
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5414
- title: tag.description && tag.description.length > 30 ? tag.description : "",
5415
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5416
- className: cx("col-value"),
5417
- style: {
5418
- overflow: "hidden",
5419
- textOverflow: "ellipsis",
5420
- whiteSpace: "nowrap",
5421
- maxWidth: 280,
5422
- display: "block"
5423
- },
5424
- children: tag.description ?? "-"
5425
- })
5426
- })]
5427
- }),
5428
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5429
- className: cx("tag-col"),
5430
- style: {
5431
- flex: 1,
5432
- minWidth: 0
5433
- },
5434
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5435
- className: cx("col-label"),
5436
- children: "External Docs"
5437
- }), tag.externalDocsUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5438
- title: tag.externalDocsUrl.length > 25 ? tag.externalDocsUrl : "",
5439
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
5440
- href: tag.externalDocsUrl,
5441
- target: "_blank",
5442
- rel: "noreferrer",
5443
- className: cx("col-value-link"),
5444
- style: {
5445
- overflow: "hidden",
5446
- textOverflow: "ellipsis",
5447
- whiteSpace: "nowrap",
5448
- display: "block"
5449
- },
5450
- children: tag.externalDocsUrl
5451
- })
5452
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
5453
- className: cx("col-value"),
5454
- children: "-"
5455
- })]
5456
- })
5457
- ]
5458
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5459
- className: cx("tag-actions"),
5460
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5461
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5462
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5463
- danger: true,
5464
- type: "text",
5465
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash, {
5466
- width: 32,
5467
- height: 32
5468
- }),
5469
- disabled: tag.isDefault,
5470
- onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
5471
- style: {
5472
- width: 40,
5473
- height: 40,
5474
- padding: 0,
5475
- lineHeight: 1
5476
- }
5477
- })
5478
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5479
- title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
5480
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
5481
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, { style: { fontSize: 18 } }),
5482
- disabled: tag.isDefault,
5483
- onClick: () => !tag.isDefault && onEditTag?.(tag),
5484
- style: {
5485
- width: 32,
5486
- height: 32,
5487
- padding: 0,
5488
- lineHeight: 1
5489
- }
5490
- })
5491
- })]
5492
- })]
5493
- }, 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")
5494
6882
  })
5495
- }))]
6883
+ ]
5496
6884
  }));
5497
6885
  };
5498
6886
  //#endregion
@@ -5636,13 +7024,6 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5636
7024
  if (open && mode === "edit" && initialValues) form.setFieldsValue(initialValues);
5637
7025
  if (!open) form.resetFields();
5638
7026
  }, [open]);
5639
- (0, react$1.useEffect)(() => {
5640
- if (!extDocsDesc?.trim()) form.setFields([{
5641
- name: "externalDocsLink",
5642
- value: void 0,
5643
- errors: []
5644
- }]);
5645
- }, [extDocsDesc]);
5646
7027
  (0, react$1.useEffect)(() => {
5647
7028
  if (extDocsDesc?.trim()) form.validateFields(["externalDocsLink"]).catch(() => {});
5648
7029
  }, [extDocsLink, extDocsDesc]);
@@ -5798,7 +7179,14 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5798
7179
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
5799
7180
  showCount: true,
5800
7181
  maxLength: 25,
5801
- 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
+ }
5802
7190
  })
5803
7191
  }),
5804
7192
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Form.Item, {
@@ -5823,19 +7211,11 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5823
7211
  return Promise.reject(/* @__PURE__ */ new Error("Please enter a valid URL"));
5824
7212
  }
5825
7213
  } }],
5826
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
5827
- title: !isLinkEnabled ? "You need to add the External Docs Description first." : "",
5828
- color: "rgba(0,0,0,0.85)",
5829
- placement: "topLeft",
5830
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
5831
- showCount: true,
5832
- maxLength: 512,
5833
- placeholder: "External Docs Link",
5834
- disabled: !isLinkEnabled,
5835
- onChange: (e) => {
5836
- form.setFieldValue("externalDocsLink", e.target.value);
5837
- }
5838
- })
7214
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
7215
+ showCount: true,
7216
+ maxLength: 500,
7217
+ placeholder: "External Docs Link",
7218
+ disabled: !isLinkEnabled
5839
7219
  })
5840
7220
  })
5841
7221
  ]
@@ -5912,6 +7292,251 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
5912
7292
  })
5913
7293
  ] }));
5914
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
+ };
5915
7540
  token.colorPrimary, token.colorSuccess, token.colorError, token.colorWarning, token["volcano.5"], token["geekblue.6"], token["purple.5"], token["volcano.4"];
5916
7541
  const darkerMethodColors = {
5917
7542
  GET: {
@@ -6082,9 +7707,10 @@ const filterTreeData = (data, searchText) => {
6082
7707
  const getSidebarStyles = (token, scope) => ({
6083
7708
  [scope("sider")]: {
6084
7709
  backgroundColor: token.colorBgElevated,
7710
+ overflowY: "auto",
6085
7711
  overflowX: "clip",
6086
7712
  borderRadius: token.borderRadius,
6087
- height: "auto"
7713
+ height: "100%"
6088
7714
  },
6089
7715
  [scope("content")]: { padding: token.padding },
6090
7716
  [scope("controls")]: {
@@ -6352,10 +7978,7 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
6352
7978
  });
6353
7979
  if (isMobile) return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
6354
7980
  className: cx("sider"),
6355
- style: {
6356
- width: "100%",
6357
- height: "100%"
6358
- },
7981
+ style: { height: "100%" },
6359
7982
  children: inner
6360
7983
  }));
6361
7984
  return wrapSSR(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(re_resizable.Resizable, {
@@ -6382,7 +8005,48 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
6382
8005
  };
6383
8006
  //#endregion
6384
8007
  //#region src/view/console/EndpointPage/EndpointPage.tsx
6385
- 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
+ };
6386
8050
  const requestColumns = [
6387
8051
  {
6388
8052
  title: "Parameter",
@@ -6425,7 +8089,7 @@ const buildRequestData = (params, token) => [...params].sort((a, b) => a.require
6425
8089
  })
6426
8090
  ] }),
6427
8091
  desc: p.description || "--",
6428
- 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) : "--"
6429
8093
  };
6430
8094
  });
6431
8095
  const buildHeaderData = (headers, token) => {
@@ -6454,7 +8118,7 @@ const buildHeaderData = (headers, token) => {
6454
8118
  })
6455
8119
  ] }, idx),
6456
8120
  desc: header.description || "--",
6457
- 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) : "--"
6458
8122
  };
6459
8123
  });
6460
8124
  };
@@ -6486,7 +8150,7 @@ const buildRequestBodyData = (requestBody, token) => {
6486
8150
  })
6487
8151
  ] }),
6488
8152
  desc: prop.description || "--",
6489
- 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) : "--"
6490
8154
  }));
6491
8155
  };
6492
8156
  const EndpointPage = () => {
@@ -6497,13 +8161,9 @@ const EndpointPage = () => {
6497
8161
  [scope("docs-endpoint-container")]: {
6498
8162
  display: "flex",
6499
8163
  flexDirection: "column",
6500
- gap: token.marginLG,
6501
- height: "100%"
6502
- },
6503
- [scope("content")]: {
6504
- width: "100%",
6505
- height: "100%"
8164
+ gap: token.marginLG
6506
8165
  },
8166
+ [scope("content")]: { width: "100%" },
6507
8167
  [scope("code")]: {
6508
8168
  background: "unset",
6509
8169
  borderRadius: token.borderRadius,
@@ -6532,8 +8192,7 @@ const EndpointPage = () => {
6532
8192
  ".ant-tabs-tab": { paddingTop: "0" }
6533
8193
  },
6534
8194
  "& .ant-table": { backgroundColor: `${token.colorBgBase} !important` },
6535
- "& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` },
6536
- "& .ant-table-tbody > tr > td": { backgroundColor: `${token.colorBgBase} !important` }
8195
+ "& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` }
6537
8196
  },
6538
8197
  [scope("row-odd")]: { "& > td": { background: `${token.colorBgElevated} !important` } },
6539
8198
  [scope("row-even")]: { "& > td": { background: `${token.colorBgLayout} !important` } }
@@ -6660,7 +8319,7 @@ const EndpointPage = () => {
6660
8319
  }) }
6661
8320
  ] })]
6662
8321
  }),
6663
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$1, {
8322
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Title$2, {
6664
8323
  level: 3,
6665
8324
  style: {
6666
8325
  display: "flex",
@@ -6745,12 +8404,9 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
6745
8404
  const { focusedContent, transformedData } = useStore(({ view }) => view);
6746
8405
  const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
6747
8406
  [scope("inner-doc-container")]: {
6748
- width: "100%",
6749
- height: "auto",
8407
+ minWidth: 0,
6750
8408
  borderRadius: token.borderRadius,
6751
- padding: token.paddingXL,
6752
- overflow: "hidden",
6753
- minWidth: 0
8409
+ padding: token.paddingXL
6754
8410
  },
6755
8411
  [scope("centered")]: {
6756
8412
  display: "flex",
@@ -6854,13 +8510,7 @@ const Codebox$1 = ({ code, language, wrapLongLines }) => {
6854
8510
  const [appTheme] = (0, react$1.useState)("DARK");
6855
8511
  const { token, theme: themeConfig } = antd.theme.useToken();
6856
8512
  const bodyBg = themeConfig.id == 1 ? token.colorBgContainer : "#1d2856";
6857
- const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: {
6858
- borderRadius: token.borderRadius,
6859
- height: "100%",
6860
- maxHeight: "100%",
6861
- overflow: "auto",
6862
- pre: { height: "100%" }
6863
- } }));
8513
+ const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: { borderRadius: token.borderRadius } }));
6864
8514
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6865
8515
  className: cx("codebox"),
6866
8516
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_syntax_highlighter.Light, {
@@ -6872,7 +8522,6 @@ const Codebox$1 = ({ code, language, wrapLongLines }) => {
6872
8522
  customStyle: {
6873
8523
  margin: 0,
6874
8524
  minHeight: "3rem",
6875
- overflowY: "auto",
6876
8525
  padding: "0.75rem 1rem 0.75rem 1.5rem",
6877
8526
  backgroundColor: bodyBg,
6878
8527
  fontSize: "0.75rem"
@@ -7140,6 +8789,18 @@ const transformOpenApiToDocs = (api) => {
7140
8789
  content: resolvedContent
7141
8790
  };
7142
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
+ }
7143
8804
  const matchedTags = (methodData.tags ?? []).filter((tag) => validTags.has(tag));
7144
8805
  if (matchedTags.length > 0) matchedTags.forEach((tag) => {
7145
8806
  if (!groupedPathsByTags[tag]) groupedPathsByTags[tag] = [];
@@ -7182,14 +8843,23 @@ const transformOpenApiToDocs = (api) => {
7182
8843
  const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onSave }) => {
7183
8844
  const [searchValue, setSearchValue] = (0, react$1.useState)("");
7184
8845
  const [mode, setMode] = (0, react$1.useState)("edit");
7185
- const [hasChanges, setHasChanges] = (0, react$1.useState)(false);
7186
8846
  const [bannerVisible, setBannerVisible] = (0, react$1.useState)(false);
7187
8847
  const [resetKey, setResetKey] = (0, react$1.useState)(0);
7188
- const [generalCollapsed, setGeneralCollapsed] = (0, react$1.useState)(false);
7189
- 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);
7190
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);
7191
8855
  const [localApiName, setLocalApiName] = (0, react$1.useState)("");
8856
+ const [apiNameTouched, setApiNameTouched] = (0, react$1.useState)(false);
7192
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)([]);
7193
8863
  const [selectedUrl, setSelectedUrl] = (0, react$1.useState)("");
7194
8864
  const [endpointNames, setEndpointNames] = (0, react$1.useState)({});
7195
8865
  const [endpointDescs, setEndpointDescs] = (0, react$1.useState)({});
@@ -7211,6 +8881,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7211
8881
  const hasInitializedRef = (0, react$1.useRef)(false);
7212
8882
  const { useBreakpoint } = antd.Grid;
7213
8883
  const isMobile = !useBreakpoint().md;
8884
+ const allEndpoints = (0, react$1.useMemo)(() => selectedApi ? Object.values(selectedApi.tags ?? {}).flat() : [], [selectedApi]);
7214
8885
  (0, react$1.useEffect)(() => {
7215
8886
  return () => {
7216
8887
  resetStore();
@@ -7257,8 +8928,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7257
8928
  display: "flex",
7258
8929
  flexDirection: "column",
7259
8930
  gap: token.marginLG,
7260
- height: "100%",
7261
- overflowY: "auto"
8931
+ height: "100%"
7262
8932
  },
7263
8933
  [scope("section")]: {
7264
8934
  flexShrink: 0,
@@ -7266,11 +8936,19 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7266
8936
  },
7267
8937
  [scope("docs-layout")]: {
7268
8938
  display: "flex",
7269
- flexShrink: 0,
7270
- height: "auto",
8939
+ flex: 1,
8940
+ minHeight: 0,
7271
8941
  gap: token.marginLG,
7272
8942
  width: "100%"
7273
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
+ },
7274
8952
  [".delete-tag-confirm-modal .ant-modal-container"]: {
7275
8953
  "--ant-modal-content-padding": "0px !important",
7276
8954
  padding: "0 !important"
@@ -7349,15 +9027,18 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7349
9027
  }, [selectedApi]);
7350
9028
  const tagMetadata = (0, react$1.useMemo)(() => {
7351
9029
  if (!originalData || !selectedApi) return [];
7352
- const rawFile = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath);
7353
- if (!rawFile?.tags) return [];
7354
- return rawFile.tags.map((t) => ({
9030
+ const mapped = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath)?.tags?.map((t) => ({
7355
9031
  name: t.name,
7356
9032
  description: t.description,
7357
9033
  externalDocsUrl: t.externalDocs?.url,
7358
9034
  externalDocsDescription: t.externalDocs?.description,
7359
9035
  isDefault: t.name.toLowerCase() === "default"
7360
- }));
9036
+ })) ?? [];
9037
+ if (!mapped.some((t) => t.isDefault) && selectedApi.tags["default"]) mapped.push({
9038
+ name: "default",
9039
+ isDefault: true
9040
+ });
9041
+ return mapped;
7361
9042
  }, [originalData, selectedApi]);
7362
9043
  const initialEndpointResponseParams = (0, react$1.useMemo)(() => {
7363
9044
  if (!originalData || !selectedApi) return {};
@@ -7424,6 +9105,44 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7424
9105
  setEndpointParams(initialEndpointParams);
7425
9106
  setEndpointResponseParams(initialEndpointResponseParams);
7426
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]);
7427
9146
  (0, react$1.useEffect)(() => {
7428
9147
  if (mode !== "view" || !selectedEndpoint) return;
7429
9148
  const epId = selectedEndpoint.id;
@@ -7474,7 +9193,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7474
9193
  isDefault: false
7475
9194
  };
7476
9195
  setLocalTags((prev) => [...prev, newTag]);
7477
- setHasChanges(true);
7478
9196
  setBannerVisible(true);
7479
9197
  };
7480
9198
  const handleUpdateTag = (updatedTag) => {
@@ -7486,7 +9204,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7486
9204
  externalDocsUrl: updatedTag.externalDocsLink,
7487
9205
  externalDocsDescription: updatedTag.externalDocsDescription
7488
9206
  } : t));
7489
- setHasChanges(true);
7490
9207
  setBannerVisible(true);
7491
9208
  };
7492
9209
  const handleDeleteTagConfirm = () => {
@@ -7496,7 +9213,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7496
9213
  open: false,
7497
9214
  tagName: ""
7498
9215
  });
7499
- setHasChanges(true);
7500
9216
  setBannerVisible(true);
7501
9217
  };
7502
9218
  const getEndpointsByTag = () => {
@@ -7516,8 +9232,10 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7516
9232
  return filtered;
7517
9233
  };
7518
9234
  const handleReset = () => {
7519
- setHasChanges(false);
7520
9235
  setBannerVisible(false);
9236
+ setApiNameTouched(false);
9237
+ setDescriptionTouched(false);
9238
+ setSaveErrors([]);
7521
9239
  setLocalApiName(selectedApi?.title ?? "");
7522
9240
  setLocalDescription(selectedApi?.description ?? "");
7523
9241
  setEndpointNames({});
@@ -7526,6 +9244,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7526
9244
  setEndpointParams(initialEndpointParams);
7527
9245
  setEndpointResponseParams(initialEndpointResponseParams);
7528
9246
  setResetKey((prev) => prev + 1);
9247
+ messageApi.success("Changes have been reset successfully.");
7529
9248
  };
7530
9249
  const handleSave = async () => {
7531
9250
  if (!selectedApi || !originalData) return;
@@ -7599,9 +9318,21 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7599
9318
  else delete methodObj["x-response-params"];
7600
9319
  }
7601
9320
  });
7602
- await onSave?.(cloned);
7603
- setHasChanges(false);
7604
- 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
+ }
7605
9336
  };
7606
9337
  const handleResetSearch = () => {
7607
9338
  setSearchValue("");
@@ -7613,6 +9344,102 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7613
9344
  }
7614
9345
  window.location.pathname = "/";
7615
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;
7616
9443
  const switcherNode = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
7617
9444
  style: {
7618
9445
  display: "flex",
@@ -7662,6 +9489,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7662
9489
  });
7663
9490
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
7664
9491
  className: cx("documentation-container"),
9492
+ style: { overflow: mode === "view" ? "hidden" : "auto" },
7665
9493
  children: [
7666
9494
  contextHolder,
7667
9495
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -7670,158 +9498,321 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7670
9498
  apiName: selectedApi?.title || "API",
7671
9499
  mode,
7672
9500
  onModeChange: setMode,
7673
- onReset: handleReset,
7674
- onSave: handleSave,
9501
+ onReset: () => setResetConfirmModal(true),
9502
+ onSave: () => setSaveConfirmModal(true),
7675
9503
  hasChanges,
9504
+ hasErrors: hasGeneralError,
7676
9505
  switcherNode: isMobile ? switcherNode : void 0
7677
9506
  })
7678
9507
  }),
7679
9508
  bannerVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnsavedChangesBanner, { onClose: () => setBannerVisible(false) }),
7680
- mode === "edit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
7681
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7682
- className: cx("section"),
7683
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneralSection, {
7684
- apiName: localApiName,
7685
- authType: selectedApi?.authType || "",
7686
- version: selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion)?.version || "",
7687
- description: localDescription,
7688
- onApiNameChange: setLocalApiName,
7689
- onDescriptionChange: setLocalDescription,
7690
- collapsed: generalCollapsed,
7691
- onToggleCollapse: () => setGeneralCollapsed((c) => !c),
7692
- onChangeDetected: () => {
7693
- setHasChanges(true);
7694
- setBannerVisible(true);
7695
- }
7696
- })
7697
- }),
7698
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7699
- className: cx("section"),
7700
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagsSection, {
7701
- tags: localTags,
7702
- collapsed: tagsCollapsed,
7703
- onToggleCollapse: () => setTagsCollapsed((prev) => !prev),
7704
- onAddTag: () => setTagDrawerState({
7705
- open: true,
7706
- 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
7707
9534
  }),
7708
- onEditTag: (tag) => setTagDrawerState({
7709
- open: true,
7710
- mode: "edit",
7711
- initialValues: {
7712
- name: tag.name,
7713
- description: tag.description,
7714
- externalDocsDescription: tag.externalDocsDescription,
7715
- externalDocsLink: tag.externalDocsUrl
7716
- }
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
+ })
7717
9584
  }),
7718
- onDeleteTag: (tagName) => setDeleteTagModal({
7719
- open: true,
7720
- 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)
7721
9662
  })
7722
- })
7723
- }),
7724
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7725
- className: cx("section"),
7726
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointsSection, {
7727
- mode,
7728
- endpointsByTag: getEndpointsByTag(),
7729
- collapsed: endpointsCollapsed,
7730
- onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
7731
- endpointNames,
7732
- endpointDescs,
7733
- endpointTags,
7734
- availableTags: localTags.map((t) => t.name),
7735
- onEndpointNameChange: (id, val) => {
7736
- setEndpointNames((prev) => ({
7737
- ...prev,
7738
- [id]: val
7739
- }));
7740
- setHasChanges(true);
7741
- setBannerVisible(true);
7742
- },
7743
- onEndpointDescChange: (id, val) => {
7744
- setEndpointDescs((prev) => ({
7745
- ...prev,
7746
- [id]: val
7747
- }));
7748
- setHasChanges(true);
7749
- setBannerVisible(true);
7750
- },
7751
- onEndpointTagsChange: (id, val) => {
7752
- setEndpointTags((prev) => ({
7753
- ...prev,
7754
- [id]: val
7755
- }));
7756
- setHasChanges(true);
7757
- setBannerVisible(true);
7758
- },
7759
- endpointParams,
7760
- onAddParameter: (endpointId, param) => {
7761
- setEndpointParams((prev) => ({
7762
- ...prev,
7763
- [endpointId]: [...prev[endpointId] ?? [], param]
7764
- }));
7765
- setHasChanges(true);
7766
- setBannerVisible(true);
7767
- },
7768
- onEditParameter: (endpointId, idx, param) => {
7769
- setEndpointParams((prev) => ({
7770
- ...prev,
7771
- [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
7772
- }));
7773
- setHasChanges(true);
7774
- setBannerVisible(true);
7775
- },
7776
- onDeleteParameter: (endpointId, idx) => {
7777
- setEndpointParams((prev) => ({
7778
- ...prev,
7779
- [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
7780
- }));
7781
- setHasChanges(true);
7782
- setBannerVisible(true);
7783
- },
7784
- endpointResponseParams,
7785
- onAddResponseParameter: (endpointId, param) => {
7786
- setEndpointResponseParams((prev) => ({
7787
- ...prev,
7788
- [endpointId]: [...prev[endpointId] ?? [], param]
7789
- }));
7790
- setHasChanges(true);
7791
- setBannerVisible(true);
7792
- },
7793
- onEditResponseParameter: (endpointId, idx, param) => {
7794
- setEndpointResponseParams((prev) => ({
7795
- ...prev,
7796
- [endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
7797
- }));
7798
- setHasChanges(true);
7799
- setBannerVisible(true);
7800
- },
7801
- onDeleteResponseParameter: (endpointId, idx) => {
7802
- setEndpointResponseParams((prev) => ({
7803
- ...prev,
7804
- [endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
7805
- }));
7806
- setHasChanges(true);
7807
- setBannerVisible(true);
7808
- }
7809
- }, resetKey)
7810
- })
7811
- ] }) : /* @__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", {
7812
9804
  className: cx("docs-layout"),
7813
- children: [
7814
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {
7815
- searchValue,
7816
- setSearchValue
7817
- }),
7818
- /* @__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, {
7819
9811
  handleVisitLandingPage: _handleVisitLandingPage,
7820
9812
  handleResetSearch,
7821
9813
  searchEnabled: !!searchValue
7822
- }),
7823
- !isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeboxSidebar$1, {})
7824
- ]
9814
+ }), !isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeboxSidebar$1, {})]
9815
+ })]
7825
9816
  }),
7826
9817
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddTagDrawer, {
7827
9818
  open: tagDrawerState.open,
@@ -7834,6 +9825,144 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
7834
9825
  onAddTag: handleAddTag,
7835
9826
  onEditTag: handleUpdateTag
7836
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
+ }),
7837
9966
  /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Modal, {
7838
9967
  open: deleteTagModal.open,
7839
9968
  onCancel: () => setDeleteTagModal({