feat(web): support function editor with lsp

.vscode/settings.json

@@ -43,6 +43,7 @@
     "ciphertext",
     "cloudbin",
     "clsx",
+    "codingame",
     "coll",
     "compat",
     "containerd",
@@ -76,6 +77,7 @@
     "logtostderr",
     "mchid",
     "millicores",
+    "mimetypes",
     "MINIO",
     "moby",
     "mongorestore",

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "install": "lerna exec npm install --parallel",
     "lint": "lerna run lint --parallel",
-    "lint-staged": "lerna exec --since HEAD --parallel -- lint-staged",
+    "lint-staged": "lerna exec --since HEAD --parallel -- lint-staged --no-stash",
     "build": "lerna run build --parallel",
     "watch": "lerna run watch --parallel",
     "prepublishOnly": "npm run build",
@@ -41,4 +41,4 @@
     "lint-staged": "^15.1.0",
     "typescript": "5.0.4"
   }
-}
+}

web/package.json

@@ -1,9 +1,10 @@
 {
   "name": "web",
   "private": true,
+  "type": "module",
   "version": "1.0.0-beta.14",
   "scripts": {
-    "dev": "vite",
+    "dev": "node --experimental-import-meta-resolve ./node_modules/vite/bin/vite.js",
     "build": "tsc && node --max_old_space_size=32768 ./node_modules/vite/bin/vite.js build",
     "tsc": "tsc",
     "preview": "vite preview",
@@ -15,8 +16,14 @@
     "@chakra-ui/anatomy": "^2.1.1",
     "@chakra-ui/icons": "^2.0.19",
     "@chakra-ui/react": "^2.6.1",
+    "@codingame/monaco-vscode-configuration-service-override": "~1.82.3",
+    "@codingame/monaco-vscode-textmate-service-override": "~1.82.3",
+    "@codingame/monaco-vscode-theme-defaults-default-extension": "~1.82.3",
+    "@codingame/monaco-vscode-theme-service-override": "~1.82.3",
+    "@codingame/monaco-vscode-typescript-basics-default-extension": "~1.82.3",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@monaco-editor/react": "^4.6.0",
     "@patternfly/react-log-viewer": "^5.0.0",
     "@sentry/integrations": "^7.73.0",
     "@sentry/react": "^7.73.0",
@@ -36,7 +43,8 @@
     "immer": "^10.0.2",
     "laf-client-sdk": "1.0.0-beta.14",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.38.0",
+    "monaco-editor": "~0.43.0",
+    "monaco-languageclient": "~6.5.1",
     "pako": "^2.1.0",
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
@@ -59,6 +67,9 @@
     "simplebar-react": "^3.2.4",
     "ts-key-enum": "^2.0.12",
     "uuid": "^9.0.0",
+    "vscode": "npm:@codingame/monaco-vscode-api@>=1.82.3 <1.83.0",
+    "vscode-languageclient": "~8.1.0",
+    "vscode-ws-jsonrpc": "~3.0.0",
     "zustand": "^4.3.8"
   },
   "devDependencies": {
@@ -71,6 +82,9 @@
     "@types/react-syntax-highlighter": "^15.5.6",
     "@types/react-window": "^1.8.8",
     "@types/uuid": "^9.0.1",
+    "@types/vscode": "~1.82.0",
+    "@typescript-eslint/eslint-plugin": "~6.7.4",
+    "@typescript-eslint/parser": "~6.7.4",
     "@vitejs/plugin-react-swc": "^3.3.1",
     "autoprefixer": "^10.4.14",
     "click-to-react-component": "^1.0.8",
@@ -87,4 +101,4 @@
     "*.{ts,tsx,js}": "eslint --fix",
     "*.{css,scss}": "stylelint --fix"
   }
-}
+}

web/public/locales/en/translation.json

@@ -236,6 +236,11 @@
     "FontSize": "Font Size",
     "FuncListDisplay": "Function List Display",
     "ListDisplay": "List Display",
+    "EditorLanguageServer": "Editor Language Server",
+    "isOpenLanguageServer": "Enable or Close Language server (only effective when the app config is above 0.5C 1G)",
+    "Editor": "Editor",
+    "FuncList": "Function List",
+    "EditorMode": "Editor Mode",
     "OldLogs": "Old Logs",
     "MonitorSetting": "Resource Monitor",
     "DatabaseMonitor": "Database monitor",
@@ -714,6 +719,23 @@
     "Export": "Export",
     "logs": "Logs"
   },
+  "KeyCannotBeEmpty": "Key can't be empty",
+  "ValueCannotBeEmpty": "Value can't be empty",
+  "AddENV": "Add ENV",
+  "LSP": {
+    "InitLanguageServer": "Click to reconnect to language server",
+    "LanguageServerClosed": "Language Server Disconnected",
+    "LanguageServerError": "Language Server Error",
+    "InitializingLanguageServer": "Initializing Language Server",
+    "StartLanguageServer": "Click on 'Settings' on the left to enable the language server.",
+    "EnableLanguageServer": "Click on 'Settings' on the left to enable the language server.",
+    "LanguageServerNotEnable": "Language server not enabled"
+  },
+  "KeyAlreadyExists": "Key already exists",
+  "SettingPanal": {
+    "EditorSettings": "Editor Settings",
+    "FunctionListSettings": "Function list settings"
+  },
   "Deprecated": "Deprecated",
   "All": "All",
   "DatabaseMonitor": {

web/public/locales/zh-CN/translation.json

@@ -236,6 +236,11 @@
     "FontSize": "字体大小",
     "FuncListDisplay": "函数列表显示",
     "ListDisplay": "列表显示",
+    "EditorLanguageServer": "编辑器语言服务",
+    "isOpenLanguageServer": "是否开启语言服务（仅在应用配置高于 0.5C 1G 时生效）",
+    "Editor": "编辑器",
+    "FuncList": "函数列表",
+    "EditorMode": "使用编辑器模式",
     "OldLogs": "旧版日志",
     "MonitorSetting": "资源监控",
     "DatabaseMonitor": "数据库监控",
@@ -714,6 +719,23 @@
     "Export": "导出",
     "logs": "日志"
   },
+  "KeyCannotBeEmpty": "Key 不能为空",
+  "ValueCannotBeEmpty": "Value 不能为空",
+  "AddENV": "新增环境变量",
+  "LSP": {
+    "InitLanguageServer": "点击以重新连接语言服务器",
+    "LanguageServerClosed": "语言服务器断开",
+    "LanguageServerError": "语言服务器错误",
+    "InitializingLanguageServer": "正在初始化语言服务",
+    "StartLanguageServer": "点击左侧”设置”启用语言服务器",
+    "EnableLanguageServer": "点击左侧”设置”启用语言服务器",
+    "LanguageServerNotEnable": "未启用语言服务"
+  },
+  "KeyAlreadyExists": "key 已经存在",
+  "SettingPanal": {
+    "EditorSettings": "编辑器设置",
+    "FunctionListSettings": "函数列表设置"
+  },
   "Deprecated": "已弃用",
   "All": "全部",
   "DatabaseMonitor": {

web/public/locales/zh/translation.json

@@ -236,6 +236,11 @@
     "FontSize": "字体大小",
     "FuncListDisplay": "函数列表显示",
     "ListDisplay": "列表显示",
+    "EditorLanguageServer": "编辑器语言服务",
+    "isOpenLanguageServer": "是否开启语言服务（仅在应用配置高于 0.5C 1G 时生效）",
+    "Editor": "编辑器",
+    "FuncList": "函数列表",
+    "EditorMode": "使用编辑器模式",
     "OldLogs": "旧版日志",
     "MonitorSetting": "资源监控",
     "DatabaseMonitor": "数据库监控",
@@ -714,6 +719,23 @@
     "Export": "导出",
     "logs": "日志"
   },
+  "KeyCannotBeEmpty": "Key 不能为空",
+  "ValueCannotBeEmpty": "Value 不能为空",
+  "AddENV": "新增环境变量",
+  "LSP": {
+    "InitLanguageServer": "点击以重新连接语言服务器",
+    "LanguageServerClosed": "语言服务器断开",
+    "LanguageServerError": "语言服务器错误",
+    "InitializingLanguageServer": "正在初始化语言服务",
+    "StartLanguageServer": "点击左侧”设置”启用语言服务器",
+    "EnableLanguageServer": "点击左侧”设置”启用语言服务器",
+    "LanguageServerNotEnable": "未启用语言服务"
+  },
+  "KeyAlreadyExists": "key 已经存在",
+  "SettingPanal": {
+    "EditorSettings": "编辑器设置",
+    "FunctionListSettings": "函数列表设置"
+  },
   "Deprecated": "已弃用",
   "All": "全部",
   "DatabaseMonitor": {

web/src/components/EditableTable/EditableTr/index.tsx

@@ -124,7 +124,7 @@ const EditableTr = function (props: {
       {column.map((item: TColumnItem) => {
         const { width, key, editable = true, validate, editComponent } = item;
         return (
-          <Td maxWidth={width || undefined} key={key}>
+          <Td maxWidth={width || undefined} key={key} className="!py-[10px]">
             <FormControl isInvalid={invalidData && !invalidData[key].isValidate}>
               {editComponent ? (
                 editComponent({
@@ -142,39 +142,39 @@ const EditableTr = function (props: {
                   onChange={(e: any) => handleChange(e, key, validate)}
                   disabled={!editable && !isCreate}
                   placeholder={`${t("InputTip").toString()} ${key}`}
+                  className="!bg-lafWhite-500 !pl-2"
+                  style={{ fontFamily: "Inter" }}
                 />
               )}
               <FormErrorMessage>{invalidData && invalidData[key].errorInfo}</FormErrorMessage>
             </FormControl>
           </Td>
         );
       })}
-      <Td maxWidth="150px">
-        <>
-          <TextButton
-            text={configuration?.saveButtonText ? configuration.saveButtonText : t("Confirm")}
-            type="submit"
-            onClick={() => {
-              let flag = true;
-              for (let { validate, key } of column) {
-                flag = validate && !handleValidate(key, formData[key], validate) ? false : flag;
-                if (!flag) {
-                  break;
-                }
+      <Td className="mr-1 flex justify-end !py-[18px]">
+        <TextButton
+          text={configuration?.saveButtonText ? configuration.saveButtonText : t("Confirm")}
+          type="submit"
+          onClick={() => {
+            let flag = true;
+            for (let { validate, key } of column) {
+              flag = validate && !handleValidate(key, formData[key], validate) ? false : flag;
+              if (!flag) {
+                break;
               }
-              if (flag) {
-                onSave(formData);
-              }
-            }}
-          />
-          <TextButton
-            text={configuration?.cancelButtonText ? configuration.cancelButtonText : t("Cancel")}
-            className="ml-4"
-            onClick={() => {
-              onCancel(formData[configuration.key]);
-            }}
-          />
-        </>
+            }
+            if (flag) {
+              onSave(formData);
+            }
+          }}
+        />
+        <TextButton
+          text={configuration?.cancelButtonText ? configuration.cancelButtonText : t("Cancel")}
+          className="ml-3"
+          onClick={() => {
+            onCancel(formData[configuration.key]);
+          }}
+        />
       </Td>
     </>
   );

web/src/components/EditableTable/NormalTr/index.tsx

@@ -1,11 +1,10 @@
-import { EditIcon } from "@chakra-ui/icons";
 import { Td } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { t } from "i18next";
 
-import { RecycleDeleteIcon } from "@/components/CommonIcon";
+import { EditIconLine, RecycleDeleteIcon } from "@/components/CommonIcon";
 import IconWrap from "@/components/IconWrap";
 
-import ConfirmButton from "../../ConfirmButton";
 import { TColumnItem, TConfiguration } from "../EditableTr";
 
 import styles from "../index.module.scss";
@@ -18,6 +17,7 @@ const NormalTr = function (props: {
   configuration: TConfiguration;
 }) {
   const { data, column, configuration, onEdit, onDelete } = props;
+  const darkMode = useColorMode().colorMode === "dark";
   return (
     <>
       {column.map((item: TColumnItem) => {
@@ -27,34 +27,28 @@ const NormalTr = function (props: {
           </Td>
         );
       })}
-      <Td className="mr-2 flex items-end justify-end">
+      <Td className="mr-4 flex items-end justify-end">
         {configuration?.operationButtonsRender ? configuration.operationButtonsRender(data) : null}
         {!configuration?.hiddenEditButton ? (
           <IconWrap
-            className="mr-2"
+            className="mr-4"
             tooltip={
               configuration?.editButtonText ? configuration.editButtonText : t("Edit").toString()
             }
             size={20}
+            onClick={() => onEdit(data[configuration.key])}
           >
-            <EditIcon fontSize={15} onClick={() => onEdit(data[configuration.key])} />
+            <EditIconLine color={darkMode ? "white" : "black"} size={12} />
           </IconWrap>
         ) : null}
-        <ConfirmButton
-          onSuccessAction={() => onDelete(data[configuration.key])}
-          headerText={
+        <IconWrap
+          tooltip={
             configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
           }
-          bodyText={t("DeleteConfirm")}
+          onClick={() => onDelete(data[configuration.key])}
         >
-          <IconWrap
-            tooltip={
-              configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
-            }
-          >
-            <RecycleDeleteIcon fontSize={15} />
-          </IconWrap>
-        </ConfirmButton>
+          <RecycleDeleteIcon fontSize={15} />
+        </IconWrap>
       </Td>
     </>
   );

web/src/components/EditableTable/index.module.scss

@@ -2,4 +2,5 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-family: Inter;
 }