feat: add space create page

mod: code review

app-v2/common.less

@@ -1,5 +1,6 @@
 @gray: #D5DDEB;
 @lightGray: #F8F8F8;
+@containerWidth: 1180px;
 
 @font-face {
 	font-family: 'Roboto-Black';
@@ -25,3 +26,8 @@
 	font-family: 'Roboto-Regular';
 	src: url(~@appv2/static/fonts/Roboto-Regular.ttf);
 }
+
+.center-layout {
+	width: @containerWidth;
+	margin: 0 auto;
+}

app-v2/components/Breadcrumb/index.less

@@ -5,7 +5,8 @@
 	font-size: 18px;
 	align-items: center;
 	display: flex;
-	padding-left: 40px;
+	padding-left: 0;
+	padding-right: 0;
 	.arrow-icon {
 		width: 23px;
 		height: 23px;

app-v2/components/Breadcrumb/index.tsx

@@ -1,4 +1,4 @@
-import { PageHeader } from 'antd';
+import { Breadcrumb, PageHeader } from 'antd';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -9,7 +9,7 @@ interface IProps {
     path: string;
     breadcrumbName: string;
   }[];
-  ExtraNode?: JSX.Element;
+  extraNode?: JSX.Element;
 }
 
 const itemRender = (route, _params, routes, _paths) => {
@@ -31,16 +31,24 @@ const itemRender = (route, _params, routes, _paths) => {
   );
 };
 
-const Breadcrumb: React.FC<IProps> = (props: IProps) => {
-  const { routes, ExtraNode } = props;
+const NebulaBreadcrumb: React.FC<IProps> = (props: IProps) => {
+  const { routes, extraNode } = props;
   return (
     <PageHeader
       title={null}
       className="nebula-breadcrumb"
-      breadcrumb={{ routes, itemRender }}
-      extra={ExtraNode}
+      breadcrumbRender={() => {
+        return <>
+          <Breadcrumb 
+            className="center-layout"
+            routes={routes} 
+            itemRender={itemRender} 
+          />
+          {extraNode}
+        </>;
+      }}
     />
   );
 };
 
-export default Breadcrumb;
+export default NebulaBreadcrumb;

app-v2/components/CodeMirror/index.less

@@ -0,0 +1,9 @@
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+	word-break: break-all !important;
+}
+
+.CodeMirror {
+	resize: vertical;
+	overflow: auto !important;
+}

app-v2/components/CodeMirror/index.tsx

@@ -0,0 +1,195 @@
+import CodeMirror from 'codemirror';
+import 'codemirror/addon/comment/comment';
+import 'codemirror/addon/display/autorefresh';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/keymap/sublime';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/meta';
+import 'codemirror/theme/monokai.css';
+import React from 'react';
+
+import { ban, keyWords, maxLineNum, operators } from '@appv2/config/nebulaQL';
+
+import './index.less';
+
+interface IProps {
+  options?: object;
+  value: string;
+  ref?: any;
+  width?: string;
+  height?: string;
+  onShiftEnter?: () => void;
+  onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onChangeLine?: () => void;
+}
+
+export default class ReactCodeMirror extends React.PureComponent<IProps, any> {
+  codemirror;
+  editor;
+  textarea;
+  constructor(props) {
+    super(props);
+  }
+  public componentDidMount() {
+    CodeMirror.defineMode('nebula', () => {
+      return {
+        token: stream => {
+          if (stream.eatSpace()) {
+            return null;
+          }
+          stream.eatWhile(/[\$:\w\u4e00-\u9fa5]/);
+          const cur = stream.current();
+          if (keyWords.some(item => item === cur)) {
+            return 'keyword';
+          } else if (operators.some(item => item === cur)) {
+            return 'def';
+          } else if (ban.some(item => item === cur)) {
+            return 'error';
+          }
+          stream.next();
+        },
+      };
+    });
+
+    CodeMirror.registerHelper('hint', 'nebula', cm => {
+      const cur = cm.getCursor();
+      const token = cm.getTokenAt(cur);
+      const str = token.string;
+      const start = token.start;
+      const end = cur.ch;
+
+      if (str === '') {
+        return;
+      }
+
+      const list = [...keyWords, ...operators, ...ban].filter(item => {
+        return item.indexOf(str) === 0;
+      });
+
+      if (list.length) {
+        return {
+          list,
+          from: CodeMirror.Pos(cur.line, start),
+          to: CodeMirror.Pos(cur.line, end),
+        };
+      }
+    });
+    this.renderCodeMirror();
+  }
+  renderCodeMirror() {
+    // parameters of the combined
+    const options = {
+      tabSize: 2,
+      fontSize: '14px',
+      autoCloseBrackets: true,
+      matchBrackets: true,
+      showCursorWhenSelecting: true,
+      lineWrapping: true,
+      // show number of rows
+      lineNumbers: true,
+      fullScreen: true,
+      mode: 'nebula',
+      ...this.props.options,
+    };
+    this.editor = CodeMirror.fromTextArea(this.textarea, options);
+    // Getting CodeMirror is used to get some of these constants
+    this.codemirror = CodeMirror;
+    // event
+    this.editor.on('change', this.codemirrorValueChange);
+    this.editor.on('keydown', this.keydown);
+    this.editor.on('blur', this.blur);
+    const { value, width, height } = this.props;
+    this.editor.setValue(value || '');
+    if (width || height) {
+      // set size
+      this.editor.setSize(width, height);
+    }
+  }
+
+  blur = instance => {
+    if (this.props.onBlur) {
+      this.props.onBlur(instance.doc.getValue());
+    }
+  };
+
+  keydown = (_, change) => {
+    if (change.shiftKey === true && change.keyCode === 13) {
+      if (this.props.onShiftEnter) {
+        this.props.onShiftEnter();
+      }
+      change.preventDefault();
+    }
+  };
+
+  codemirrorValueChange = (doc, change) => {
+    if (change.origin !== 'setValue') {
+      if (this.props.onChange) {
+        this.props.onChange(doc.getValue());
+      }
+    }
+    if (change.origin === '+input') {
+      CodeMirror.commands.autocomplete(this.editor, null, {
+        completeSingle: false,
+      });
+    }
+    if (
+      this.props.onChangeLine &&
+      (change.origin === '+delete' || change.origin === '+input')
+    ) {
+      this.props.onChangeLine();
+    }
+  };
+
+  async UNSAFE_componentWillReceiveProps(nextProps) {
+    const { options, value } = nextProps;
+    await this.setOptions(options);
+    if (value !== this.editor.getValue()) {
+      this.editor.setValue(value || '');
+      let line;
+      if (this.editor.lineCount() > maxLineNum) {
+        line = maxLineNum;
+      } else if (this.editor.lineCount() < 5) {
+        line = 5;
+      } else {
+        line = this.editor.lineCount();
+      }
+      this.editor.setSize(undefined, line * 24 + 10 + 'px');
+    }
+  }
+
+  async setOptions(options) {
+    if (typeof options === 'object') {
+      const mode = CodeMirror.findModeByName(options.mode);
+      if (mode && mode.mode) {
+        await import(`codemirror/mode/${mode.mode}/${mode.mode}.js`);
+      }
+      if (mode) {
+        options.mode = mode.mime;
+      }
+      Object.keys(options).forEach(name => {
+        if (options[name] && JSON.stringify(options[name])) {
+          this.editor.setOption(name, options[name]);
+        }
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  }
+
+  render() {
+    return (
+      <textarea
+        ref={instance => {
+          this.textarea = instance;
+        }}
+      />
+    );
+  }
+}

app-v2/components/GQLCodeMirror/index.less

@@ -0,0 +1,16 @@
+@import '~@appv2/common.less';
+.export-gql {
+	text-align: left;
+	margin-top: 24px;
+	background: #FFFFFF;
+	border: 1px solid @gray;
+	.ant-collapse-item {
+		border-bottom: none;
+	}
+	box-sizing: border-box;
+	border-radius: 3px;
+}
+
+.export-gql .ant-collapse-content-box div {
+	cursor: not-allowed;
+}

app-v2/components/GQLCodeMirror/index.tsx

@@ -0,0 +1,29 @@
+import { Collapse } from 'antd';
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import CodeMirror from '@appv2/components/CodeMirror';
+
+import './index.less';
+const Panel = Collapse.Panel;
+interface IOptions {
+  [propName: string]: any;
+}
+const GQLCodeMirror = (props: { currentGQL: string; option?: IOptions }) => {
+  const options = {
+    keyMap: 'sublime',
+    fullScreen: true,
+    mode: 'nebula',
+    readOnly: true,
+    ...props.option,
+  };
+  return (
+    <Collapse className="export-gql">
+      <Panel header={intl.get('common.exportNGQL')} key="ngql">
+        <CodeMirror value={props.currentGQL} options={options} height="80px" />
+      </Panel>
+    </Collapse>
+  );
+};
+
+export default GQLCodeMirror;

app-v2/config/locale/en-US.json

@@ -31,7 +31,7 @@
     "name": "Name",
     "operation": "Operations",
     "delete": "Delete",
-    "optionalParameters": "Optional Parameters",
+    "optional": "Optional",
     "exportNGQL": "View nGQL",
     "field": "Field",
     "relatedProperties": "Related Properties",
@@ -383,6 +383,7 @@
     "group": "Group",
     "comment": "Comment",
     "operations": "Operations",
-    "useSpaceErrTip": "Space not found. Trying to use a newly created graph space may fail because the creation is implemented asynchronously. To make sure the follow-up operations work as expected, Wait for two heartbeat cycles, i.e., 20 seconds."
+    "useSpaceErrTip": "Space not found. Trying to use a newly created graph space may fail because the creation is implemented asynchronously. To make sure the follow-up operations work as expected, Wait for two heartbeat cycles, i.e., 20 seconds.",
+    "spaceNameEnter": "Please enter the space name"
   }
 }

app-v2/config/locale/zh-CN.json

@@ -31,7 +31,7 @@
     "name": "名称",
     "operation": "操作",
     "delete": "删除",
-    "optionalParameters": "可选参数",
+    "optional": "可选",
     "exportNGQL": "对应的nGQL语句",
     "field": "字段",
     "relatedProperties": "相关属性",
@@ -379,6 +379,7 @@
     "group": "Group",
     "comment": "Comment",
     "operations": "操作",
-    "useSpaceErrTip": "图空间未找到。立刻尝试使用刚创建的图空间可能会失败，因为创建是异步实现的。为确保数据同步，后续操作能顺利进行，请等待 2 个心跳周期（20 秒）。"
+    "useSpaceErrTip": "图空间未找到。立刻尝试使用刚创建的图空间可能会失败，因为创建是异步实现的。为确保数据同步，后续操作能顺利进行，请等待 2 个心跳周期（20 秒）。",
+    "spaceNameEnter": "请输入图空间名称"
   }
 }

app-v2/config/rules.ts

@@ -1,4 +1,4 @@
-import { NAME_REGEX, POSITIVE_INTEGER_REGEX } from '#app/utils/constant';
+import { NAME_REGEX, POSITIVE_INTEGER_REGEX } from '@appv2/utils/constant';
 
 export const hostRulesFn = intl => [
   {

app-v2/interfaces/schema.ts

@@ -43,6 +43,7 @@ export interface IProperty {
   value?: string;
   allowNull?: boolean;
   fixedLength?: string;
+  comment?: string;
 }
 
 export type IndexType = 'TAG' | 'EDGE';

app-v2/pages/Import/TaskCreate/index.less

@@ -1,7 +1,7 @@
 @import '~@appv2/common.less';
 .nebula-import-create {
   .create-form {
-    padding: 32px 35px 100px;
+    padding: 32px 0 100px;
     .basic-config {
       border-bottom: 1px solid @gray;
     }

app-v2/pages/Import/TaskCreate/index.tsx

@@ -131,7 +131,7 @@ const TaskCreate = () => {
   return (
     <div className="nebula-import-create">
       <Breadcrumb routes={routes} />
-      <div className="create-form">
+      <div className="create-form  center-layout">
         <Form className="basic-config" layout="vertical" {...formItemLayout}>
           <Row>
             <Col span={12}>