feat: update tag/edge edit page (#128)

mod: code review
vesoft-inc · Feb 24, 2022 · 4f77a95 · 4f77a95
1 parent e1935f5
commit 4f77a95
Show file tree

Hide file tree

Showing 40 changed files with 1,603 additions and 261 deletions.
diff --git a/app-v2/app.less b/app-v2/app.less
@@ -25,6 +25,10 @@
 	src: url(~@appv2/static/fonts/Roboto-Regular.ttf);
 }
 
+#app {
+	font-family: Roboto-Regular, sans-serif;
+}
+
 .center-layout {
 	width: @containerWidth;
 	margin: 0 auto;
@@ -38,7 +42,7 @@
 }
 
 .ant-radio-group.nebula-tab-group {
-	background: #e9edef;
+	background: @lightGray;
 	border-radius: 20px;
 	padding: 4px;
 	min-width: 400px;
@@ -81,8 +85,6 @@
 .ant-btn.primary-btn {
 	color: @blue;
 	border-color: @blue;
-	display: inline-flex;
-	align-items: center;
 
 	svg {
 		width: 20px;
@@ -137,3 +139,28 @@
 	}
 }
 
+.studio-form-footer {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	z-index: 10;
+	width: 100%;
+	height: 98px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #fff;
+	box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.1);
+
+	button {
+		width: 236px;
+
+		&:not(:last-child) {
+			margin-right: 50px;
+		}
+	}
+}
+
+.ant-form-item-label label {
+	font-family: Roboto-Bold, sans-serif;
+}
diff --git a/app-v2/common.less b/app-v2/common.less
@@ -1,6 +1,8 @@
 @gray: #D5DDEB;
-@lightGray: #F8F8F8;
+@lightWhite: #F8F8F8;
 @containerWidth: 1180px;
 @darkGray: #8697B0;
 @red: #EB5757;
 @blue: #2F80ED;
+@lightGray: #E9EDEF;
+@lightBlue: #F3F6F9;
diff --git a/app-v2/components/CSVPreviewLink/index.less b/app-v2/components/CSVPreviewLink/index.less
@@ -1,3 +1,4 @@
+@import '~@appv2/common.less';
 .popover-preview {
 	max-width: 80%;
 }
@@ -12,7 +13,7 @@
 		}
 		.ant-table-tbody {
 			tr {
-				background-color: #F3F6F9;
+				background-color: @lightBlue;
 			}
 		}
 	}

diff --git a/app-v2/config/locale/en-US.json b/app-v2/config/locale/en-US.json
@@ -327,17 +327,7 @@
     "vidTypeDescription": "Specifies the data type of vertex IDs (VIDs) in a graph space. ",
     "createSuccess": "Create Successfully",
     "defineFields": "Define Properties",
-    "setTTL": "Set TTL",
     "uniqProperty": "Property name cannot be duplicated",
-    "timestampFormat": "Supported data inserting methods: <br />1. call function now()  <br />2. call function timestamp(), for example: timestamp('2021-07-05T06:18:43.984000')  <br />3. Input the timestamp directly, namely the number of seconds from 1970-01-01 00:00:00",
-    "dateFormat": "Supported data inserting methods: <br />Call function date(), for example: date('2021-03-17')",
-    "timeFormat": "Supported data inserting methods: <br />Call function time(), for example: time('17:53:59')",
-    "datetimeFormat": "Supported data inserting methods: <br />Call function datetime(), for example: datetime('2021-03-17T17:53:59')",
-    "geographyFormat": "Supported data inserting methods: <br /> Call function ST_GeogFromText(), for example:ST_GeogFromText('POINT(6 10)')",
-    "geography(point)Format": "Supported data inserting methods: <br /> Call function ST_GeogFromText('POINT()'), for example:ST_GeogFromText('POINT(6 10)')",
-    "geography(linestring)Format": "Supported data inserting methods: <br /> Call function ST_GeogFromText('LINESTRING()'), for example:ST_GeogFromText('LINESTRING(3 4,10 50,20 25)')",
-    "geography(polygon)Format": "Supported data inserting methods: <br /> Call function ST_GeogFromText('POLYGON()'), for example:ST_GeogFromText('POLYGON((1 1,5 1,5 5,1 5,1 1),(2 2,2 3,3 3,3 2,2 2))')",
-    "durationFormat": "Supported data inserting methods: <br /> Call function duration(<map>), for example:duration({years: 1, seconds: 0})",
     "cancelOperation": "Do you want to close this panel",
     "cancelPropmt": "If you close the panel, the configuration will be deleted automatically. Are you sure that you want to close the panel?",
     "fieldDisabled": "A TTL configuration is set for this property, so it cannot be edited. If you want to edit this property, delete the TTL configuration.",
@@ -386,6 +376,19 @@
     "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.",
     "spaceNameEnter": "Please enter the space name",
-    "propertyCount": "Property Num"
+    "propertyCount": "Property Num",
+    "configTypeList": "{space} {type} List",
+    "configTypeAction": "{action} {type}",
+    "defineFields": "Define Properties",
+    "timestampFormat": "Supported data inserting methods: <br />1. call function now()  <br />2. call function timestamp(), for example: timestamp('2021-07-05T06:18:43.984000')  <br />3. Input the timestamp directly, namely the number of seconds from 1970-01-01 00:00:00",
+    "dateFormat": "Supported data inserting methods: <br />Call function date(), for example: date('2021-03-17')",
+    "timeFormat": "Supported data inserting methods: <br />Call function time(), for example: time('17:53:59')",
+    "datetimeFormat": "Supported data inserting methods: <br />Call function datetime(), for example: datetime('2021-03-17T17:53:59')",
+    "geographyFormat": "Supported data inserting methods: <br /> Call function ST_GeogFromText(), for example:ST_GeogFromText('POINT(6 10)')",
+    "geography(point)Format": "Supported data inserting methods: <br /> Call function ST_GeogFromText('POINT()'), for example:ST_GeogFromText('POINT(6 10)')",
+    "geography(linestring)Format": "Supported data inserting methods: <br /> Call function ST_GeogFromText('LINESTRING()'), for example:ST_GeogFromText('LINESTRING(3 4,10 50,20 25)')",
+    "geography(polygon)Format": "Supported data inserting methods: <br /> Call function ST_GeogFromText('POLYGON()'), for example:ST_GeogFromText('POLYGON((1 1,5 1,5 5,1 5,1 1),(2 2,2 3,3 3,3 2,2 2))')",
+    "durationFormat": "Supported data inserting methods: <br /> Call function duration(<map>), for example:duration({years: 1, seconds: 0})",
+    "setTTL": "Set TTL (Time To Live)"
   }
 }
diff --git a/app-v2/config/locale/zh-CN.json b/app-v2/config/locale/zh-CN.json
@@ -323,17 +323,7 @@
     "vidTypeDescription": "vid type 指定图空间中点 ID（VID）的数据类型。",
     "createSuccess": "创建成功",
     "defineFields": "定义属性",
-    "setTTL": "设置TTL",
     "uniqProperty": "属性名称不允许重名",
-    "timestampFormat": "时间类型支持插入方式: <br />1. 调用函数 now()  <br />2. 调用函数 timestamp()，例如：timestamp('2021-07-05T06:18:43.984000')  <br />3. 直接输入时间戳，即从 1970-01-01 00:00:00 开始的秒数",
-    "dateFormat": "日期类型支持插入方式: <br /> 调用函数 date()，例如：date('2021-03-17')",
-    "timeFormat": "时间类型支持插入方式: <br /> 调用函数 time()，例如time('17:53:59')",
-    "datetimeFormat": "日期时间类型支持插入方式: <br /> 调用函数 datetime()，例如：datetime('2021-03-17T17:53:59')",
-    "geographyFormat": "geo 类型支持插入方式: <br /> 调用函数 ST_GeogFromText()，例如：ST_GeogFromText('POINT(6 10)')",
-    "geography(point)Format": "geo(point) 类型支持插入方式: <br /> 调用函数 ST_GeogFromText('POINT()')，例如：ST_GeogFromText('POINT(6 10)')",
-    "geography(linestring)Format": "geo(linestring) 类型支持插入方式: <br /> 调用函数 ST_GeogFromText('LINESTRING()')，例如：ST_GeogFromText('LINESTRING(3 4,10 50,20 25)')",
-    "geography(polygon)Format": "geo(polygon) 类型支持插入方式: <br /> 调用函数 ST_GeogFromText('POLYGON()')，例如：ST_GeogFromText('POLYGON((1 1,5 1,5 5,1 5,1 1),(2 2,2 3,3 3,3 2,2 2))')",
-    "durationFormat": "duration 类型支持插入方式: <br /> 调用函数 duration(<map>)，例如：duration({years: 1, seconds: 0})",
     "cancelOperation": "是否取消配置并关闭面板",
     "cancelPropmt": "关闭面板将删除所有属性，是否继续？",
     "fieldDisabled": "该属性被 ttl_col 引用，不支持更改操作，如要更改，请先更新 ttl",
@@ -382,6 +372,19 @@
     "operations": "操作",
     "useSpaceErrTip": "图空间未找到。立刻尝试使用刚创建的图空间可能会失败，因为创建是异步实现的。为确保数据同步，后续操作能顺利进行，请等待 2 个心跳周期（20 秒）。",
     "spaceNameEnter": "请输入图空间名称",
-    "propertyCount": "属性数量"
+    "propertyCount": "属性数量",
+    "configTypeList": "{space} {type}列表",
+    "configTypeAction": "{action}{type}",
+    "defineFields": "定义属性",
+    "timestampFormat": "时间类型支持插入方式: <br />1. 调用函数 now()  <br />2. 调用函数 timestamp()，例如：timestamp('2021-07-05T06:18:43.984000')  <br />3. 直接输入时间戳，即从 1970-01-01 00:00:00 开始的秒数",
+    "dateFormat": "日期类型支持插入方式: <br /> 调用函数 date()，例如：date('2021-03-17')",
+    "timeFormat": "时间类型支持插入方式: <br /> 调用函数 time()，例如time('17:53:59')",
+    "datetimeFormat": "日期时间类型支持插入方式: <br /> 调用函数 datetime()，例如：datetime('2021-03-17T17:53:59')",
+    "geographyFormat": "geo 类型支持插入方式: <br /> 调用函数 ST_GeogFromText()，例如：ST_GeogFromText('POINT(6 10)')",
+    "geography(point)Format": "geo(point) 类型支持插入方式: <br /> 调用函数 ST_GeogFromText('POINT()')，例如：ST_GeogFromText('POINT(6 10)')",
+    "geography(linestring)Format": "geo(linestring) 类型支持插入方式: <br /> 调用函数 ST_GeogFromText('LINESTRING()')，例如：ST_GeogFromText('LINESTRING(3 4,10 50,20 25)')",
+    "geography(polygon)Format": "geo(polygon) 类型支持插入方式: <br /> 调用函数 ST_GeogFromText('POLYGON()')，例如：ST_GeogFromText('POLYGON((1 1,5 1,5 5,1 5,1 1),(2 2,2 3,3 3,3 2,2 2))')",
+    "durationFormat": "duration 类型支持插入方式: <br /> 调用函数 duration(<map>)，例如：duration({years: 1, seconds: 0})",
+    "setTTL": "设置TTL（存活时间）"
   }
 }
diff --git a/app-v2/interfaces/schema.ts b/app-v2/interfaces/schema.ts
@@ -44,9 +44,11 @@ export interface IProperty {
   allowNull?: boolean;
   fixedLength?: string;
   comment?: string;
+  showType?: string;
 }
 
-export type IndexType = 'TAG' | 'EDGE';
+export type IndexType = 'tag' | 'edge';
+export type ISchemaType = 'tag' | 'edge';
 export type AlterType = 'ADD' | 'DROP' | 'CHANGE' | 'TTL' | 'COMMENT';
 export interface IAlterConfig {
   fields?: IProperty[];
@@ -55,4 +57,11 @@ export interface IAlterConfig {
     col?: string;
     duration?: string;
   };
-}
+}
+
+export interface IAlterForm {
+  type: ISchemaType;
+  name: string;
+  action: AlterType;
+  config: IAlterConfig;
+}
diff --git a/app-v2/pages/Import/FileUpload/index.tsx b/app-v2/pages/Import/FileUpload/index.tsx
@@ -63,21 +63,19 @@ const FileUpload = () => {
         if (file.content) {
           return (
             <div className="operation">
-              <div>
-                <CSVPreviewLink file={file} btnType="default">
-                  <Icon type="icon-btn-detail" />
-                </CSVPreviewLink>
-                <Popconfirm
-                  onConfirm={() => asyncDeleteFile(index)}
-                  title={intl.get('common.ask')}
-                  okText={intl.get('common.ok')}
-                  cancelText={intl.get('common.cancel')}
-                >
-                  <Button className="warning-btn">
-                    <Icon type="icon-btn-delete" />
-                  </Button>
-                </Popconfirm>
-              </div>
+              <CSVPreviewLink file={file} btnType="default">
+                <Icon type="icon-btn-detail" />
+              </CSVPreviewLink>
+              <Popconfirm
+                onConfirm={() => asyncDeleteFile(index)}
+                title={intl.get('common.ask')}
+                okText={intl.get('common.ok')}
+                cancelText={intl.get('common.cancel')}
+              >
+                <Button className="warning-btn">
+                  <Icon type="icon-btn-delete" />
+                </Button>
+              </Popconfirm>
             </div>
           );
         }

diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/index.less b/app-v2/pages/Import/TaskCreate/SchemaConfig/index.less
@@ -1,6 +1,6 @@
 @import '~@appv2/common.less';
 .config-collapse {
-  background: #F3F6F9;
+  background: @lightBlue;
   border: 1px solid @gray;
   box-sizing: border-box;
   border-radius: 6px;

diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/index.tsx b/app-v2/pages/Import/TaskCreate/SchemaConfig/index.tsx
@@ -73,7 +73,7 @@ const SchemaConfig = (props: IProps) => {
           {type === 'vertices' && data.tags.map((tag, tagIndex) => <TagConfig key={tagIndex} file={data.file} tag={tag} tagIndex={tagIndex} configIndex={configIndex} />)}
           {type === 'edge' && <EdgeConfig configIndex={configIndex} edge={data} />}
           {type === 'vertices' && <div className="btns">
-            <Button className="primary-btn studio-add-btn-icon" onClick={() => addTag(configIndex)}>
+            <Button className="primary-btn studio-add-btn" onClick={() => addTag(configIndex)}>
               <Icon className="studio-add-btn-icon" type="icon-btn-add" />
               {intl.get('import.addTag')}
             </Button>

diff --git a/app-v2/pages/Import/TaskCreate/index.less b/app-v2/pages/Import/TaskCreate/index.less
@@ -2,6 +2,9 @@
 .nebula-import-create {
   .create-form {
     padding: 32px 0 100px;
+    label {
+      font-family: Roboto-Bold;
+    }
     .basic-config {
       border-bottom: 1px solid @gray;
     }
@@ -22,23 +25,6 @@
       margin-right: 20px;
     }
   }
-  .footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    height: 98px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #FFFFFF;
-    box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.1);
-    button {
-      width: 236px;
-      &:not(:last-child) {
-        margin-right: 50px;
-      }
-    }
-  }
   .label::after {
     content: ':';
     padding-right: 5px;

diff --git a/app-v2/pages/Import/TaskCreate/index.tsx b/app-v2/pages/Import/TaskCreate/index.tsx
@@ -119,6 +119,11 @@ const TaskCreate = () => {
       edgesConfig: []
     });
   };
+  const handleSpaceChange = (space: string) => {
+    clearConfig();
+    updateSpaceInfo(space);
+  };
+
   useEffect(() => {
     asyncGetTaskDir();
     getSpaces();
@@ -131,12 +136,12 @@ const TaskCreate = () => {
   return (
     <div className="nebula-import-create">
       <Breadcrumb routes={routes} />
-      <div className="create-form  center-layout">
+      <div className="create-form center-layout">
         <Form className="basic-config" layout="vertical" {...formItemLayout}>
           <Row>
             <Col span={12}>
               <Form.Item label={intl.get('common.space')} required={true}>
-                <Select value={currentSpace} onChange={value => updateSpaceInfo(value)}>
+                <Select value={currentSpace} onChange={value => handleSpaceChange(value)}>
                   {spaces.map(space => (
                     <Option value={space} key={space}>
                       {space}
@@ -181,7 +186,7 @@ const TaskCreate = () => {
           </Form>
         </div>
       </div>
-      <div className="footer">
+      <div className="studio-form-footer">
         <Button onClick={() => history.push('/import/tasks')}>{intl.get('common.cancel')}</Button>
         <Button type="primary" disabled={
           basicConfig.taskName === ''

diff --git a/app-v2/pages/MainPage/Header/HelpMenu/index.tsx b/app-v2/pages/MainPage/Header/HelpMenu/index.tsx
@@ -62,13 +62,13 @@ const HelpMenu = () => {
           href={intl.get('link.versionLogHref')}
           target="_blank" rel="noreferrer"
         >
-          <Icon className="menu-icon" type="icon-btn-save" />
+          <Icon className="menu-icon" type="icon-nav-version" />
           {intl.get('menu.release')}
         </a>
       </Menu.Item>
       <Menu.Item key="user-logout">
         <span className="nebula-link" onClick={logout}>
-          <Icon className="menu-icon" type="icon-btn-save" />
+          <Icon className="menu-icon" type="icon-nav-clear" />
           {intl.get('configServer.clear')}
         </span>
       </Menu.Item>

diff --git a/app-v2/pages/MainPage/routes.tsx b/app-v2/pages/MainPage/routes.tsx
@@ -2,7 +2,7 @@ import { lazy } from 'react';
 
 const Schema = lazy(() => import('@appv2/pages/Schema'));
 const SpaceCreate = lazy(() => import('@appv2/pages/Schema/SpaceCreate'));
-const SpaceConfig = lazy(() => import('@appv2/pages/Schema/SpaceConfig'));
+const SchemaConfig = lazy(() => import('@appv2/pages/Schema/SchemaConfig'));
 const Import = lazy(() => import('@appv2/pages/Import'));
 const TaskCreate = lazy(() => import('@appv2/pages/Import/TaskCreate'));
 
@@ -20,7 +20,7 @@ export const RoutesList = [
   },
   {
     path: '/schema/:space/:type?/:action?/:module?',
-    component: SpaceConfig,
+    component: SchemaConfig,
   },
   {
     path: '/import/create',