feat: secretnote support scql (#13)

* feat: add project for scql * feat: optimize notification style * feat: add ccl config feature * feat: add scql editor feature * feat: optimize project style * feat: extrator override style * feat: optimize ccl config * feat: add view ccl feature * feat: change scql to first router * feat: add scql output rendermime * feat: use monaco editor for sql * feat: add complete feature for sql editor * fix: ensure extension url by --mode args * feat: replace lodash to lodash-es * chore: upgrade typescript to v5 * chore: change dev script name * chore(ci): fix errors due to hatch updates (#14) --------- Co-authored-by: Tony Wu <[email protected]>
secretflow · Dec 21, 2023 · e5527ee · e5527ee
1 parent 758e197
commit e5527ee
Show file tree

Hide file tree

Showing 104 changed files with 18,036 additions and 957 deletions.
diff --git a/.vscode/cspell.json b/.vscode/cspell.json
@@ -6,6 +6,7 @@
   "language": "en",
   // words - list of words to be always considered correct
   "words": [
+    "ahooks",
     "aiofiles",
     "antd",
     "antv",
@@ -18,6 +19,7 @@
     "dagre",
     "dbaeumer",
     "difizen",
+    "dtype",
     "elkjs",
     "elts",
     "ename",

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "[css]": {
     "editor.codeActionsOnSave": {
-      "source.fixAll.stylelint": true
+      "source.fixAll.stylelint": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2
@@ -40,8 +40,8 @@
   },
   "[python]": {
     "editor.codeActionsOnSave": {
-      "source.fixAll": true,
-      "source.organizeImports": true
+      "source.fixAll": "explicit",
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "ms-python.black-formatter",
     "editor.formatOnSave": true
@@ -92,5 +92,10 @@
     "--cov-report=html"
   ],
   "python.testing.unittestEnabled": false,
-  "python.testing.pytestEnabled": true
+  "python.testing.pytestEnabled": true,
+  "[javascript][javascriptreact][typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  }
 }
diff --git a/package.json b/package.json
@@ -7,10 +7,10 @@
   "description": "Notebook suite for SecretFlow",
   "scripts": {
     "bootstrap": "./scripts/setup_all.sh",
+    "start": "nx run-many -t dev",
     "postinstall": "is-ci || husky install",
     "changeset": "changeset",
     "clean": "git clean -fX .",
-    "dev:all": "nx run-many -t dev",
     "format:black": "python -m black --check examples",
     "format:prettier": "prettier --check --ignore-unknown .",
     "ci:setup": "nx run-many -p tag:postinstall -t setup:umi -t build",

diff --git a/packages/secretnote/.umirc.ts b/packages/secretnote/.umirc.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'umi';
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 export default defineConfig({
   // This is not portable at all
@@ -7,8 +8,12 @@ export default defineConfig({
   favicons: ['/secretnote/favicon.svg'],
   exportStatic: {},
   routes: [
-    { path: '/', component: 'secretnote' },
+    { path: '/', redirect: '/secretflow' },
+    { path: '/secretflow', component: 'secretflow' },
     { path: '/preview', component: 'preview' },
+    { path: '/scql', redirect: '/scql/project' },
+    { path: '/scql/project', component: 'scql-project' },
+    { path: '/scql/project/:id', component: 'scql-workspace' },
   ],
   // devtool: 'source-map',
   writeToDisk: true,
@@ -44,4 +49,8 @@ export default defineConfig({
   ],
   mfsu: false,
   npmClient: 'pnpm',
+  chainWebpack(memo) {
+    memo.plugin('monaco').use(MonacoWebpackPlugin);
+  },
+  esbuildMinifyIIFE: true,
 });
diff --git a/packages/secretnote/package.json b/packages/secretnote/package.json
@@ -58,10 +58,13 @@
     "classnames": "^2.3.2",
     "d3-dsv": "^3.0.1",
     "endent": "^2.1.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1",
+    "lodash-es": "^4.17.21",
     "lucide-react": "^0.284.0",
+    "monaco-editor": "^0.45.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "smoothie": "^1.36.1",
+    "sql-formatter": "^15.0.2",
+    "syntax-parser": "^1.0.18",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.2",
     "umi": "^4.0.86",
@@ -74,8 +77,7 @@
   "devDependencies": {
     "@types/canvas-confetti": "^1.6.1",
     "@types/d3-dsv": "^3.0.4",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/lodash.throttle": "^4.1.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "babel-plugin-parameter-decorator": "^1.0.16",

diff --git a/packages/secretnote/src/components/dropdown-menu/index.tsx b/packages/secretnote/src/components/dropdown-menu/index.tsx
@@ -15,6 +15,10 @@ interface IProps {
 function DropdownMenu(props: IProps) {
   const { items, onClick, icon, trigger } = props;
 
+  if (items.length === 0) {
+    return null;
+  }
+
   return (
     <Dropdown
       placement="bottomLeft"

diff --git a/packages/secretnote/src/components/log-viewer/hooks/useThrottle.ts b/packages/secretnote/src/components/log-viewer/hooks/useThrottle.ts
@@ -1,4 +1,4 @@
-import throttle from 'lodash.throttle';
+import { throttle } from 'lodash-es';
 import { useRef, useCallback, useEffect } from 'react';
 
 type Callback = () => void;

diff --git a/packages/secretnote/src/components/markdown-editor/index.less b/packages/secretnote/src/components/markdown-editor/index.less
@@ -1,4 +1,6 @@
 .ProseMirror {
+  font-size: 14px;
+
   p {
     margin-bottom: 0.8em;
   }
@@ -41,10 +43,10 @@
   }
 
   .code {
-    padding: 0.25rem 0.35rem;
+    padding: 0.15rem 0.25rem;
     border-radius: 0.375rem;
-    background-color: #e7e5e4;
-    font-weight: 500;
+    background-color: #f1f1f0;
+    font-weight: 300;
   }
 
   .horizontal {

diff --git a/packages/secretnote/src/global.less b/packages/secretnote/src/global.less
@@ -1,3 +1,5 @@
+@import url('override.less');
+
 html,
 body {
   height: 100%;
@@ -13,10 +15,6 @@ body {
   background: #b7d7fb !important;
 }
 
-.rc-tooltip-inner {
-  min-height: auto !important;
-}
-
 p {
   margin: 0;
 }
diff --git a/packages/secretnote/src/modules/editor/model.ts b/packages/secretnote/src/modules/editor/model.ts
@@ -13,7 +13,7 @@ import {
   prop,
   transient,
 } from '@difizen/mana-app';
-import debounce from 'lodash.debounce';
+import { debounce } from 'lodash-es';
 
 import { SecretNoteKernelManager } from '@/modules/kernel';
 import { SecretNoteServerManager } from '@/modules/server';

diff --git a/packages/secretnote/src/modules/file/index.less b/packages/secretnote/src/modules/file/index.less
@@ -2,60 +2,5 @@
   padding-left: 12px;
   background-color: var(--mana-secretnote-sidebar-background);
   color: var(--mana-secretnote-text-color);
-  font-size: 12px;
-
-  .ant-tree-treenode {
-    &:hover::before {
-      background-color: var(--mana-secretnote-li-hover-background) !important;
-    }
-
-    .ant-tree-switcher {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &.ant-tree-switcher_close {
-        transform: rotate(-90deg);
-      }
-    }
-  }
-
-  .ant-tree-switcher-noop {
-    width: 0;
-  }
-
-  .secretnote-tree-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1px 4px 1px 1px;
-    color: var(--mana-secretnote-text-color);
-
-    .ant-dropdown-trigger {
-      visibility: hidden;
-    }
-
-    &:hover .ant-dropdown-trigger {
-      visibility: visible;
-    }
-
-    .ant-space-item {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .ant-tree-treenode-selected {
-    .ant-tree-switcher {
-      color: var(--mana-secretnote-text-color) !important;
-    }
-
-    &::before {
-      background-color: var(--mana-secretnote-li-hover-background) !important;
-    }
-
-    .ant-tree-node-selected {
-      color: var(--mana-secretnote-text-color) !important;
-    }
-  }
+  font-size: 13px;
 }
diff --git a/packages/secretnote/src/modules/file/service.ts b/packages/secretnote/src/modules/file/service.ts
@@ -3,10 +3,8 @@ import { ContentsManager } from '@difizen/libro-jupyter';
 import { inject, prop, singleton } from '@difizen/mana-app';
 import type { DataNode } from 'antd/es/tree';
 
-import { downloadFileByUrl as download, ERROR_CODE } from '@/utils';
-import { getServerUrl } from '@/utils';
+import { downloadFileByUrl as download } from '@/utils';
 
-import type { IServer } from '../server';
 import { SecretNoteServerManager } from '../server';
 
 export const BASE_PATH = '/';
@@ -44,7 +42,7 @@ export class FileService {
 
       try {
         const list = await this.contentsManager.get(BASE_PATH, {
-          baseUrl: getServerUrl(server).baseUrl,
+          baseUrl: this.serverManager.getServerUrl(server).baseUrl,
           content: true,
         });
 
@@ -81,7 +79,7 @@ export class FileService {
       return false;
     }
     const list = await this.contentsManager.get(BASE_PATH, {
-      baseUrl: getServerUrl(server).baseUrl,
+      baseUrl: this.serverManager.getServerUrl(server).baseUrl,
       content: true,
     });
 
@@ -91,29 +89,26 @@ export class FileService {
   async uploadFile(nodeData: DataNode, name: string, content: string) {
     const serverId = nodeData.key as string;
     const server = await this.serverManager.getServerDetail(serverId);
-    if (!server) {
-      return ERROR_CODE.SERVER_NOT_FOUND;
+    if (server) {
+      const baseUrl = this.serverManager.getServerUrl(server).baseUrl;
+      const path = `${BASE_PATH}/${name}`;
+      await this.contentsManager.save(path, {
+        content,
+        baseUrl,
+        name,
+        path,
+        type: 'file',
+        format: 'text',
+      });
     }
-    const baseUrl = getServerUrl(server).baseUrl;
-    const path = `${BASE_PATH}/${name}`;
-    await this.contentsManager.save(path, {
-      content,
-      baseUrl,
-      name,
-      path,
-      type: 'file',
-      format: 'text',
-    });
-
-    return ERROR_CODE.NO_ERROR;
   }
 
   async downloadFile(nodeData: DataNode) {
     const { serverId, path } = this.parseNodeKey(nodeData.key as string);
     const server = await this.serverManager.getServerDetail(serverId);
     if (server) {
       const data = await this.contentsManager.getDownloadUrl(path, {
-        baseUrl: getServerUrl(server).baseUrl,
+        baseUrl: this.serverManager.getServerUrl(server).baseUrl,
       });
       download(data, nodeData.title as string);
     }
@@ -127,7 +122,7 @@ export class FileService {
     const server = await this.serverManager.getServerDetail(serverId);
     if (server) {
       await this.contentsManager.delete(path, {
-        baseUrl: getServerUrl(server).baseUrl,
+        baseUrl: this.serverManager.getServerUrl(server).baseUrl,
       });
       await this.getFileTree();
     }
@@ -138,7 +133,7 @@ export class FileService {
     const server = await this.serverManager.getServerDetail(serverId);
     if (server) {
       const data = await this.contentsManager.get(decodedPath, {
-        baseUrl: getServerUrl(server).baseUrl,
+        baseUrl: this.serverManager.getServerUrl(server).baseUrl,
         content: true,
       });
       return data;

diff --git a/packages/secretnote/src/modules/file/view.tsx b/packages/secretnote/src/modules/file/view.tsx
@@ -26,7 +26,7 @@ import {
 import { DropdownMenu } from '@/components/dropdown-menu';
 import type { Menu } from '@/components/dropdown-menu';
 import { SideBarContribution } from '@/modules/layout';
-import { ERROR_CODE, getErrorMessage, readFile } from '@/utils';
+import { readFile } from '@/utils';
 
 import './index.less';
 import { FileService, FILE_EXTS } from './service';
@@ -78,12 +78,14 @@ export const FileComponent = () => {
 
   const uploadFile = async (nodeData: DataNode, file: File) => {
     const content = await readFile(file);
-    const code = await fileService.uploadFile(nodeData, file.name, content);
-    if (code !== ERROR_CODE.NO_ERROR) {
-      message.error(getErrorMessage(code));
-    } else {
+    try {
+      await fileService.uploadFile(nodeData, file.name, content);
       await fileService.getFileTree();
       message.success(l10n.t('文件上传成功'));
+    } catch (e) {
+      if (e instanceof Error) {
+        message.error(e.message);
+      }
     }
   };
 
@@ -147,7 +149,7 @@ export const FileComponent = () => {
     ];
 
     return (
-      <div className="secretnote-tree-title">
+      <div className="ant-tree-title-content">
         <span>
           <Space>
             {getFileIcon(nodeData)}

diff --git a/packages/secretnote/src/modules/integration/index.less b/packages/secretnote/src/modules/integration/index.less
@@ -13,7 +13,7 @@
     padding-right: 8px;
     padding-left: 12px;
     color: var(--mana-secretnote-text-color);
-    font-size: 12px;
+    font-size: 13px;
 
     .title {
       display: flex;