Settings: added api docs sections using stoplight

Author: raheeliftikhar5

client/package.json

@@ -85,7 +85,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.13.0",
     "simplebar": "^6.2.5",
-    "swagger-ui-react": "^5.17.12",
     "tui-image-editor": "^3.15.3"
   }
 }

client/packages/lowcoder/package.json

@@ -29,6 +29,7 @@
     "@rjsf/core": "^5.15.1",
     "@rjsf/utils": "^5.15.1",
     "@rjsf/validator-ajv8": "^5.15.1",
+    "@stoplight/elements": "^8.1.3",
     "@types/lodash": "^4.14.194",
     "@types/node": "^16.7.13",
     "@types/react": "^18.2.45",
@@ -128,6 +129,7 @@
     "vite-plugin-checker": "^0.5.1",
     "vite-plugin-dynamic-import": "^1.5.0",
     "vite-plugin-html": "^3.2.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.6.0"
   }

client/packages/lowcoder/src/app.tsx

@@ -28,7 +28,6 @@ import {
   ORG_AUTH_FORGOT_PASSWORD_URL,
   ORG_AUTH_RESET_PASSWORD_URL,
 } from "constants/routesURL";
-
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Helmet } from "react-helmet";
@@ -189,7 +188,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
             <LazyRoute path={`${COMPONENT_DOC_URL}/:name`} component={LazyComponentDoc} />
             <LazyRoute path={`/playground/:name/:dsl`} component={LazyComponentPlayground} />
             <Redirect to={`${COMPONENT_DOC_URL}/input`} path="/components" />
-
             {developEnv() && (
               <>
                 <LazyRoute path="/debug_comp/:name" component={LazyDebugComp} />

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2199,6 +2199,7 @@ export const en = {
     "theme": "Themes",
     "plugin": "Plugins",
     "advanced": "Advanced",
+    "apiDocs": "API Docs",
     "lab": "Lab",
     "branding": "Branding",
     "oauthProviders": "User Authentication",

client/packages/lowcoder/src/pages/setting/apiDocs/index.tsx

@@ -0,0 +1,15 @@
+import '@stoplight/elements/styles.min.css';
+
+import { API } from '@stoplight/elements';
+import React from 'react';
+
+const ApiDocs: React.FC = () => {
+  return (
+    <API
+      basePath="lowcoder-api"
+      apiDescriptionUrl="https://api-service.lowcoder.cloud/api/docs/api-docs"
+    />
+  );
+};
+
+export default ApiDocs;

client/packages/lowcoder/src/pages/setting/settingHome.tsx

@@ -26,6 +26,7 @@ import { selectSystemConfig } from "redux/selectors/configSelectors";
 import { enableCustomBrand } from "util/featureFlagUtils";
 import FreeLimitTag from "pages/common/freeLimitTag";
 import { Helmet } from "react-helmet";
+import ApiDocs from "./apiDocs";
 
 enum SettingPageEnum {
   UserGroups = "permission",
@@ -34,6 +35,7 @@ enum SettingPageEnum {
   Theme = "theme",
   Branding = "branding",
   Advanced = "advanced",
+  ApiDocs = "apiDocs",
   OAuthProvider = "oauth-provider",
   AppUsage = "app-usage",
   Environments = "environments",
@@ -71,6 +73,11 @@ export function SettingHome() {
       label: trans("settings.advanced"),
       icon: <LeftSettingIcon width={"20px"}/>,
     },
+    {
+      key: SettingPageEnum.ApiDocs,
+      label: trans("settings.apiDocs"),
+      icon: <LeftSettingIcon width={"20px"}/>,
+    },
 
     // Premium features
 
@@ -148,6 +155,7 @@ export function SettingHome() {
         {selectKey === SettingPageEnum.Audit && <AuditSetting />}
         {selectKey === SettingPageEnum.Branding && <BrandingSetting />}
         {selectKey === SettingPageEnum.Advanced && <AdvancedSetting />}
+        {selectKey === SettingPageEnum.ApiDocs && <ApiDocs />}
       </TwoColumnSettingPageContent>
     </>
   );

client/packages/lowcoder/vite.config.mts

@@ -12,6 +12,7 @@ import dynamicImport from 'vite-plugin-dynamic-import';
 import { ensureLastSlash } from "./src/dev-utils/util";
 import { buildVars } from "./src/dev-utils/buildVars";
 import { globalDepPlugin } from "./src/dev-utils/globalDepPlguin";
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 dotenv.config();
 
@@ -157,6 +158,7 @@ export const viteConfig: UserConfig = {
     }),
     isVisualizerEnabled && visualizer(),
     dynamicImport(),
+    nodePolyfills({ include: ['process'] }),
   ].filter(Boolean),
 };