feat: add sketch apply logic

.eslintrc.js

@@ -263,7 +263,7 @@ module.exports = {
         'react/no-unknown-property': 'error',
         'react/no-unsafe': 'off',
         'react/prop-types': 'off',
-        'react/react-in-jsx-scope': 'error',
+        'react/react-in-jsx-scope': 'off',
         'react/require-render-return': 'error',
         'react/self-closing-comp': ['error'],
         'key-spacing': ['error', {

app/common.less

@@ -8,4 +8,4 @@
 @lightBlue: #F3F6F9;
 @darkBlue: #465B7A;
 @lightBlack: #172F52;
-@headerBlack: #2F3A4A;
+@headerBlack: #2F3A4A;

app/components/CSVPreviewLink/index.tsx

@@ -48,10 +48,10 @@ const CSVPreviewLink = (props: IProps) => {
     <Popover
       destroyTooltipOnHide={true}
       overlayClassName={styles.popoverPreview}
-      visible={visible}
+      open={visible}
       trigger="click"
       arrowPointAtCenter
-      onVisibleChange={visible => setVisible(visible)}
+      onOpenChange={visible => setVisible(visible)}
       content={<div className={styles.csvPreview}>
         <Table
           className={cls({ [styles.noBackground]: !!onMapping })}

app/config/locale/en-US.json

@@ -51,7 +51,8 @@
     "space": "Space",
     "version": "Version",
     "statistics": "Statistics",
-    "duplicate": "Duplicate"
+    "duplicate": "Duplicate",
+    "sketch": "Schema drafting"
   },
   "doc": {
     "welcome": "Welcome to",
@@ -97,7 +98,8 @@
     "dstIdRequired": "Please select the destination VID",
     "vidRequired": "Please select the VID",
     "vidTypeRequired": "Vid type is required",
-    "fixStringLengthRequired": "fix string length limit is required"
+    "fixStringLengthRequired": "fix string length limit is required",
+    "spaceRequired": "Space is required"
   },
   "console": {
     "execTime": "Execution Time",
@@ -285,9 +287,11 @@
     "sketchInvalid": "The schema sketch is invalid, please check",
     "saveSuccess": "Save successfully",
     "saveReminder": "The current sketch has been modified but not saved, whether to continue to switch sketches?",
+    "saveTip": "The current sketch has been modified but not saved, please save first.",
     "confirmDelete": "Sure to delete?",
     "saveDraft": "Save draft",
-    "export": "Export"
-
+    "export": "Export",
+    "applySpaceTip": "The new schema will not overwrite the original schema in the space",
+    "sameSchemaWarning": "{content} already exists in the space, please change the {hasType} name or select another space."
   }
 }

app/config/locale/zh-CN.json

@@ -51,7 +51,8 @@
     "space": "图空间",
     "version": "版本",
     "statistics": "统计",
-    "duplicate": "复制"
+    "duplicate": "复制",
+    "sketch": "Schema 草图"
   },
   "doc": {
     "welcome": "欢迎使用",
@@ -97,7 +98,8 @@
     "dstIdRequired": "请选择终点 VID",
     "vidRequired": "请选择 VID",
     "vidTypeRequired": "请选择 VID 类型",
-    "fixStringLengthRequired": "请输入字符串固定长度"
+    "fixStringLengthRequired": "请输入字符串固定长度",
+    "spaceRequired": "图空间不能为空"
   },
   "console": {
     "execTime": "执行时间消耗",
@@ -285,8 +287,11 @@
     "sketchInvalid": "当前草图数据格式错误，请检查",
     "saveSuccess": "保存成功",
     "saveReminder": "当前草图有修改未保存，是否继续切换草图?",
+    "saveTip": "当前草图有修改未保存， 请先保存。",
     "confirmDelete": "请确认是否删除",
     "saveDraft": "保存草稿",
-    "export": "导出"
+    "export": "导出",
+    "applySpaceTip": "新的 schema 不会覆盖图空间中已有的 schema 信息",
+    "sameSchemaWarning": "图空间中已存在{content}，请修改{hasType}名称，或者选择其他图空间。"
   }
 }

app/interfaces/schema.ts

@@ -47,8 +47,8 @@ export interface IProperty {
   showType?: string;
 }
 
-export type IndexType = 'tag' | 'edge';
-export type ISchemaType = 'tag' | 'edge';
+export type IndexType = ISchemaEnum.Tag | ISchemaEnum.Edge;
+export type ISchemaType = ISchemaEnum.Tag | ISchemaEnum.Edge;
 export type AlterType = 'ADD' | 'DROP' | 'CHANGE' | 'TTL' | 'COMMENT';
 export interface IAlterConfig {
   fields?: IProperty[];
@@ -66,6 +66,10 @@ export interface IAlterForm {
   config: IAlterConfig;
 }
 
+export enum ISchemaEnum {
+  Tag = 'tag',
+  Edge ='edge',
+}
 export enum IJobStatus {
   Queue = 'QUEUE',
   Running = 'RUNNING',

app/interfaces/sketch.ts

@@ -1,4 +1,5 @@
 import { VEditorLine, VEditorNode } from '@vesoft-inc/veditor/types/Model/Schema';
+import { ISchemaEnum } from './schema';
 
 export interface IProperty {
   name: string;
@@ -7,7 +8,7 @@ export interface IProperty {
 }
 export interface ISketchNode extends VEditorNode {
   uuid?: string;
-  type: string;
+  type: ISchemaEnum.Tag;
   fill?: string;
   strokeColor?: string;
   properties: IProperty[];
@@ -18,7 +19,7 @@ export interface ISketchNode extends VEditorNode {
 
 export interface ISketchEdge extends VEditorLine {
   uuid?: string;
-  type?: string;
+  type: ISchemaEnum.Edge;
   fromPoint?: number;
   toPoint?: number;
   from: string;
@@ -29,11 +30,6 @@ export interface ISketchEdge extends VEditorLine {
   invalid: boolean;
 }
 
-export enum ISketchType {
-  SketchNode = 'tag',
-  SketchLine = 'edge',
-}
-
 export interface ISketch {
   id: string;
   name: string;

app/pages/Console/ExportModal.tsx

@@ -68,7 +68,7 @@ const ExportModal = (props: IProps) => {
       className={styles.exportNodeModal}
       footer={null}
       width="650px"
-      visible={visible}
+      open={visible}
       onCancel={onClose}
     >
       <Form {...layout} onFinish={handleExport} initialValues={{

app/pages/Console/FavoriteBtn.tsx

@@ -64,7 +64,7 @@ const FavoriteBtn = (props: IProps) => {
             </Button>
           </>
         }
-        visible={visible}
+        open={visible}
         className={styles.favoriteList}
         footer={null}
         onCancel={() => setVisible(false)}

app/pages/Console/HistoryBtn.tsx

@@ -66,7 +66,7 @@ const HistoryBtn = (props: IProps) => {
             </Button>
           </>
         }
-        visible={visible}
+        open={visible}
         className={styles.historyList}
         footer={null}
         onCancel={() => setVisible(false)}

app/pages/Console/OutputBox/ForceGraph/Menu/NodeStyleSetBtn/index.tsx

@@ -69,8 +69,8 @@ const NodeStyleSetBtn: React.FC<IProps> = (props: IProps) => {
           />
         }
         trigger={'click'}
-        visible={visible}
-        onVisibleChange={setVisible}
+        open={visible}
+        onOpenChange={setVisible}
       >
         <div className={styles.colorGroup}>
           {colorList.slice(0, 3).map((item) => (

app/pages/Import/TaskCreate/FileSelect/index.tsx

@@ -53,9 +53,9 @@ const FileSelect = (props: IProps) => {
     <Popover
       destroyTooltipOnHide={true}
       overlayClassName={styles.popoverFileSelect}
-      visible={visible}
+      open={visible}
       trigger="click"
-      onVisibleChange={visible => setVisible(visible)}
+      onOpenChange={visible => setVisible(visible)}
       content={<Form className={styles.fileSelectForm} onFinish={onFinish} layout="inline">
         <FormItem name="name" rules={[{ required: true }]}>
           <Select className={styles.fileSelect} showSearch={true} onDropdownVisibleChange={handleGetFiles} dropdownMatchSelectWidth={false}>

app/pages/Import/TaskCreate/PasswordInputModal/index.tsx

@@ -22,7 +22,7 @@ const PasswordInputModal = (props: IProps) => {
   return (
     <Modal
       title={intl.get('import.enterPassword')}
-      visible={visible}
+      open={visible}
       onCancel={() => handleCancel()}
       className={styles.passwordModal}
       footer={false}

app/pages/Import/TaskList/TaskItem/LogModal/index.tsx

@@ -131,7 +131,7 @@ const LogModal = (props: IProps) => {
         </Button>}
       </>}
       width="80%"
-      visible={visible}
+      open={visible}
       onCancel={onCancel}
       wrapClassName={styles.logModal}
       destroyOnClose={true}

app/pages/Import/TaskList/TemplateModal/index.tsx

@@ -90,7 +90,7 @@ const TemplateModal = (props: IProps) => {
   return (
     <Modal
       width="820px"
-      visible={visible}
+      open={visible}
       onCancel={onClose}
       className={styles.configImportModal}
       destroyOnClose={true}

app/pages/MainPage/Header/HelpMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useMemo, useContext } from 'react';
 import { Menu } from 'antd';
 import intl from 'react-intl-universal';
 import Icon from '@app/components/Icon';
@@ -11,16 +11,12 @@ import { useStore } from '@app/stores';
 import styles from './index.module.less';
 
 const HelpMenu = () => {
-  const { toggleLanguage } = useContext(LanguageContext);
+  const { toggleLanguage, currentLocale } = useContext(LanguageContext);
   const { global: { username, logout, version } } = useStore();
-  return <Menu
-    className={styles.helpMenu}
-    mode="horizontal"
-    theme="dark"
-    selectedKeys={[]}
-  >
-    <Menu.Item key="star">
-      <a
+  const items = useMemo(() => [
+    {
+      key: 'star',
+      label: <a
         className={styles.nebulaLink}
         href="https://github.com/vesoft-inc/nebula"
         target="_blank"
@@ -29,55 +25,66 @@ const HelpMenu = () => {
         data-track-label="from_navigation" rel="noreferrer">
         <Icon className={styles.navIcon} type="icon-studio-nav-github" />
       </a>
-    </Menu.Item>
-    <Menu.SubMenu 
-      key="language"
-      popupClassName={styles.langMenu}
-      popupOffset={[-35, 20]} 
-      title={<Icon className={styles.navIcon} type="icon-studio-nav-language" />}> 
-      {Object.keys(INTL_LOCALE_SELECT).map(locale => {
-        return (
-          <Menu.Item key={`language-${locale}`} onClick={() => toggleLanguage(INTL_LOCALE_SELECT[locale].NAME)}>
-            {INTL_LOCALE_SELECT[locale].TEXT}
-          </Menu.Item>
-        );
-      })}
-    </Menu.SubMenu>
-    <Menu.Item key="doc">
-      <Link className={styles.nebulaLink} to="/doc">
+    },
+    {
+      key: 'language',
+      label: <Icon className={styles.navIcon} type="icon-studio-nav-language" />,
+      popupClassName: styles.langMenu,
+      popupOffset: [-35, 20],
+      children: Object.keys(INTL_LOCALE_SELECT).map(locale => ({
+        key: `language-${locale}`,
+        onClick: () => toggleLanguage(INTL_LOCALE_SELECT[locale].NAME),
+        label: INTL_LOCALE_SELECT[locale].TEXT
+      }))
+    },
+    {
+      key: 'doc',
+      label: <Link className={styles.nebulaLink} to="/doc">
         <Icon className={styles.navIcon} type="icon-studio-nav-help" />
       </Link>
-    </Menu.Item>
-    <Menu.SubMenu 
-      key="user"
-      popupClassName={styles.accountMenu}
-      popupOffset={[-35, 20]}
-      title={<div>
+    },
+    {
+      key: 'user',
+      popupClassName: styles.accountMenu,
+      popupOffset: [-35, 20],
+      label: <div>
         <Avatar size="small" username={username}/>
-      </div>}>
-      <Menu.Item key="version-log">
-        <a
-          className={styles.nebulaLink}
-          data-track-category="navigation"
-          data-track-action="view_changelog"
-          href={intl.get('link.versionLogHref')}
-          target="_blank" rel="noreferrer"
-        >
-          <Icon className={styles.menuIcon} type="icon-studio-nav-version" />
-          {intl.get('menu.release')}
-        </a>
-      </Menu.Item>
-      <Menu.Item key="user-logout">
-        <span className={styles.nebulaLink} onClick={logout}>
-          <Icon className={styles.menuIcon} type="icon-studio-nav-clear" />
-          {intl.get('configServer.clear')}
-        </span>
-      </Menu.Item>
-      <Menu.Item key="version">
-        v{version}
-      </Menu.Item>
-    </Menu.SubMenu>
-  </Menu>;
+      </div>,
+      children: [
+        {
+          key: 'version-log',
+          label: <a
+            className={styles.nebulaLink}
+            data-track-category="navigation"
+            data-track-action="view_changelog"
+            href={intl.get('link.versionLogHref')}
+            target="_blank" rel="noreferrer"
+          >
+            <Icon className={styles.menuIcon} type="icon-studio-nav-version" />
+            {intl.get('menu.release')}
+          </a>  
+        },
+        {
+          key: 'user-logout',
+          label: <span className={styles.nebulaLink} onClick={logout}>
+            <Icon className={styles.menuIcon} type="icon-studio-nav-clear" />
+            {intl.get('configServer.clear')}
+          </span>
+        },
+        {
+          key: 'version',
+          label: `v${version}`
+        }
+      ]
+    }
+  ], [currentLocale]);
+  return <Menu
+    className={styles.helpMenu}
+    mode="horizontal"
+    theme="dark"
+    selectedKeys={[]}
+    items={items}
+  />;
 };
 
 export default observer(HelpMenu);