fix: fix issues (#611)

mod: code review

app/index.tsx

@@ -70,7 +70,7 @@ const App = () => {
  },
  components: {
  Menu: {
- colorItemBg: '#2f3a4a',
+ itemBg: '#2f3a4a',
  colorPrimary: '#2f80ed',
  margin: 20,
  },

app/pages/Console/OutputBox/ForceGraph/DisplayPanel/ExpandForm/index.tsx

@@ -1,4 +1,5 @@
 import { Tabs } from 'antd';
+import { v4 as uuidv4 } from 'uuid';
 import { useEffect, useState } from 'react';
 import { LinkObject, NodeObject } from '@vesoft-inc/force-graph';
 import { useI18n } from '@vesoft-inc/i18n';
@@ -9,7 +10,7 @@ interface IProps {
  data: {
  nodes: NodeObject[];
  links: LinkObject[];
- },
+ };
  spaceVidType: string;
 }
 
@@ -23,17 +24,17 @@ const DisplayComponent = (props: IProps) => {
  links: LinkObject[];
  }>({
  nodes: [],
- links: []
+ links: [],
  });
  useEffect(() => {
  setList({
  nodes: flattenVertex(nodes),
- links: flattenEdge(links)
+ links: flattenEdge(links),
  });
  }, [data]);
 
  const flattenVertex = (data) => {
- return data.map(item => {
+ return data.map((item) => {
  const _data = [
  {
  key: 'Tag',
@@ -46,9 +47,9 @@ const DisplayComponent = (props: IProps) => {
  },
  ] as any;
  const properties = item.properties;
- Object.keys(properties).forEach(property => {
+ Object.keys(properties).forEach((property) => {
  const valueObj = properties[property];
- Object.keys(valueObj).forEach(field => {
+ Object.keys(valueObj).forEach((field) => {
  _data.push({
  key: `${property}.${field}`,
  value: valueObj[field],
@@ -59,8 +60,8 @@ const DisplayComponent = (props: IProps) => {
  });
  };
 
- const flattenEdge = data => {
- return data.map(item => {
+ const flattenEdge = (data) => {
+ return data.map((item) => {
  const _data = [
  {
  key: 'id',
@@ -69,7 +70,7 @@ const DisplayComponent = (props: IProps) => {
  ];
  const name = item.edgeType;
  const properties = item.properties;
- Object.keys(properties).forEach(property => {
+ Object.keys(properties).forEach((property) => {
  const value = properties[property];
  _data.push({
  key: `${name}.${property}`,
@@ -82,25 +83,21 @@ const DisplayComponent = (props: IProps) => {
  const items = [
  {
  label: intl.get('import.vertexText') + `(${nodes.length})`,
- key: 'nodes'
+ key: 'nodes',
  },
  {
  label: intl.get('import.edgeText') + `(${links.length})`,
- key: 'links'
+ key: 'links',
  },
  ];
  return (
  <div className={styles.displayExpand}>
  <Tabs className={styles.headerTab} onChange={setTab} defaultActiveKey={tab} items={items} />
  <div className={styles.content}>
- {list[tab].length > 0 && list[tab].map((item: NodeObject | LinkObject, index) => (
- <ExpandItem
- key={index}
- data={item}
- title={`${tab} ${index + 1}`}
- index={index}
- />
- ))}
+ {list[tab].length > 0 &&
+ list[tab].map((item: NodeObject | LinkObject, index) => (
+ <ExpandItem key={uuidv4()} data={item} title={`${tab} ${index + 1}`} index={index} />
+ ))}
  </div>
  </div>
  );

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

@@ -75,7 +75,7 @@ const SchemaConfig = (props: IProps) => {
  const resetFileSource = useCallback(
  (item: ITagFileItem | IEdgeFileItem, file: IImportFile) => {
  const index = configItem.files.findIndex((f) => f === item);
- const payload = { file, props: [...configItem.props] };
+ const payload = { file, props: [...configItem.props] } as any;
  // @ts-ignore
  configItem.resetFileItem(
  index,
@@ -102,7 +102,7 @@ const SchemaConfig = (props: IProps) => {
 
  // @ts-ignore
  const clearFileSource = useCallback(
- (item: ITagFileItem | IEdgeFileItem) => configItem.deleteFileItem(item),
+ (item: ITagFileItem | IEdgeFileItem) => configItem.deleteFileItem(item as any),
  [configItem],
  );
  return (

app/pages/Import/TaskList/index.tsx

@@ -24,7 +24,7 @@ const TaskList = () => {
  const { dataImport, global, moduleConfiguration } = useStore();
  const isMounted = useRef(true);
  const [page, setPage] = useState(1);
- const { intl } = useI18n();
+ const { intl, currentLocale } = useI18n();
  const history = useHistory();
  const { taskList, getTaskList, stopTask, deleteTask } = dataImport;
  const { username, host } = global;
@@ -117,7 +117,7 @@ const TaskList = () => {
  btnLabel: intl.get('import.start'),
  },
  ],
- [],
+ [currentLocale],
  );
  return (
  <div className={styles.nebulaDataImport}>

app/pages/Schema/SchemaConfig/List/CommonLayout/index.module.less

@@ -17,6 +17,15 @@
  }
  }
  }
+ .btnCreate > a::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: transparent;
+ content: '';
+ }
  .operation {
  display: flex;
  button {

app/pages/Schema/SchemaConfig/List/CommonLayout/index.tsx

@@ -8,6 +8,7 @@ import EmptyTableTip from '@app/components/EmptyTableTip';
 import { IndexType } from '@app/interfaces/schema';
 import Search from '../Search';
 import styles from './index.module.less';
+import cls from 'classnames';
 
 interface IProps {
  onSearch: (value) => void;
@@ -23,22 +24,23 @@ const CommonLayout = (props: IProps) => {
  const { onSearch, data, columns, loading, renderExpandInfo, children, type, indexType } = props;
  const [expandKeys, setExpandKeys] = useState<any[]>([]);
  const { intl } = useI18n();
- const handleRowClick = row => {
+ const handleRowClick = (row) => {
  const { name: key } = row;
  const keys = expandKeys.includes(key) ? [] : [key];
  setExpandKeys(keys);
  };
  return (
  <div className={styles.schemaConfigList}>
  <div className={styles.header}>
- <Button type="primary" className="studioAddBtn">
+ <Button type="primary" className={cls('studioAddBtn', styles.btnCreate)}>
  <Link
  to={`/schema/${type}/create${indexType ? `?type=${indexType}` : ''}`}
  data-track-category="navigation"
  data-track-action={`view_${type}_create`}
  data-track-label={`from_${type}_list`}
  >
- <Icon className="studioAddBtnIcon" type="icon-studio-btn-add" />{intl.get('common.create')}
+ <Icon className="studioAddBtnIcon" type="icon-studio-btn-add" />
+ {intl.get('common.create')}
  </Link>
  </Button>
  <Search onSearch={onSearch} type={type.toLowerCase()} />
@@ -48,10 +50,10 @@ const CommonLayout = (props: IProps) => {
  dataSource={data}
  columns={columns}
  expandable={{
- expandedRowRender: record => renderExpandInfo(record, intl),
+ expandedRowRender: (record) => renderExpandInfo(record, intl),
  expandRowByClick: true,
  expandedRowKeys: expandKeys,
- onExpand: (_, record) => handleRowClick(record)
+ onExpand: (_, record) => handleRowClick(record),
  }}
  loading={loading}
  rowKey="name"

app/pages/Schema/index.module.less

@@ -27,6 +27,15 @@
  }
  .btnCreate {
  margin-bottom: 12px;
+ > a::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: transparent;
+ content: '';
+ }
  }
  .tableSpaceList {
  :global {

app/pages/Schema/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Popconfirm, Table, message, Popover, Form, Input, Dropdown, Menu, Tooltip, MenuProps } from 'antd';
+import { Button, Popconfirm, Table, message, Popover, Form, Input, Dropdown, Tooltip } from 'antd';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useI18n } from '@vesoft-inc/i18n';
 import Icon from '@app/components/Icon';

app/pages/SketchModeling/SchemaConfig/index.tsx

@@ -35,13 +35,13 @@ const SchemaConfig: React.FC = () => {
  const prevName = sketchModel.active?.name;
  const name = form.getFieldValue('name');
  const data = sketchModel.editor?.schema.getData();
- if(!data || name === prevName) return false;
+ if (!data || name === prevName) return false;
  let invalid = false;
  data.nodes.forEach((item) => {
- if(item.uuid === sketchModel.active?.uuid || !item.name) {
+ if (item.uuid === sketchModel.active?.uuid || !item.name) {
  return;
  }
- if(item.name === name) {
+ if (item.name === name) {
  invalid = true;
  item.invalid = true;
  sketchModel.editor.graph.node.updateNode(item, true);
@@ -51,10 +51,10 @@ const SchemaConfig: React.FC = () => {
  }
  });
  data.lines.forEach((item) => {
- if(item.uuid === sketchModel.active?.uuid || !item.name) {
+ if (item.uuid === sketchModel.active?.uuid || !item.name) {
  return;
  }
- if(item.name === name) {
+ if (item.name === name) {
  invalid = true;
  item.invalid = true;
  sketchModel.editor.graph.line.updateLine(item, true);
@@ -66,24 +66,38 @@ const SchemaConfig: React.FC = () => {
  invalid && form.setFields([{ name: 'name', errors: [intl.get('sketch.uniqName')] }]);
  return invalid;
  };
- const handleUpdate:FormProps['onFieldsChange'] = useCallback(
+ const handleUpdate: FormProps['onFieldsChange'] = useCallback(
  debounce((changed, allValues) => {
  const changedFileds = changed.map((item) => item.name[0]);
  const formValues = form.getFieldsValue();
- if(!flag && sketchModel.active?.invalid) {
+ if (!flag && sketchModel.active?.invalid) {
  form.validateFields(changedFileds);
  flag = !flag;
  }
  const hasSameName = validateSameName();
- const hasError = allValues.some((item) => item.errors.length > 0);
+ let hasError;
+ const validatedValues = allValues.filter((item) => item.validated);
+ if (validatedValues.length > 0) {
+ hasError = validatedValues.some((item) => item.errors.length > 0);
+ }
+ // const hasError = allValues.some((item) => item.errors.length > 0);
  // hack delete the row of properties, but allValues is not update immediately, need to validate again
  // name.length > 1 means as least 1 row of properties
- if(hasError && allValues.some(item => item.name.length > 1 && item.name[0] === 'properties' && item.value === undefined)) {
+ if (
+ hasError &&
+ allValues.some((item) => item.name.length > 1 && item.name[0] === 'properties' && item.value === undefined)
+ ) {
  form.validateFields(changedFileds);
  }
- update({ ...formValues, invalid: hasError || hasSameName });
+ let invalid = sketchModel.active?.invalid;
+ if (hasError !== undefined) {
+ invalid = hasSameName || hasError;
+ } else {
+ invalid = invalid || hasSameName;
+ }
+ update({ ...formValues, invalid });
  }, 300),
- []
+ [],
  );
  const handleDelete = useCallback(() => {
  deleteElement(active.type);
@@ -93,10 +107,9 @@ const SchemaConfig: React.FC = () => {
  if (!active) {
  return;
  }
-
  const { name, comment, properties, invalid } = active;
  form.setFieldsValue({ name, comment, properties });
- if(invalid) {
+ if (invalid) {
  validateSameName();
  form.validateFields();
  }
@@ -108,7 +121,7 @@ const SchemaConfig: React.FC = () => {
 
  const handleCheck = (changedValues) => {
  const { properties } = changedValues;
- if (properties && properties.some(i => i.name !== undefined)) {
+ if (properties && properties.some((i) => i.name !== undefined)) {
  form.validateFields([['properties']]);
  }
  };

app/pages/Welcome/index.module.less

@@ -295,6 +295,11 @@
  :global(.ant-btn-block) {
  background-color: @blue;
  }
+ .docLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
  }
 }
 

app/pages/Welcome/index.tsx

@@ -305,7 +305,10 @@ function Welcome(props: IProps) {
  const gql = await fetch(`${process.env.CDN_PATH || '/'}datasets/${space.fileName}.ngql`).then((r) => r.text());
  setSpaceLoading({ spaceName: space.spaceName, leftTime: initLoadingTime, progressModalOpen: true });
  const downloadRes = await service.batchExecNGQL({
- gqls: gql.split('\n').map(line => line.startsWith(':') ? line.replace(/;$/gm, '') : line).filter(Boolean)
+ gqls: gql
+ .split('\n')
+ .map((line) => (line.startsWith(':') ? line.replace(/;$/gm, '') : line))
+ .filter(Boolean),
  });
  setSpaceLoading({ spaceName: undefined, leftTime: 0, progressModalOpen: false });
  clearSpaceLoadingTimeout();
@@ -479,10 +482,8 @@ function Welcome(props: IProps) {
  <p className={styles.docTitle}>{doc.title}</p>
  <p className={styles.docTip}>{doc.tip}</p>
  </div>
- <Button type="primary" block>
- <a href={doc.link} target="_blank" rel="noreferrer">
- {intl.get('doc.start')}
- </a>
+ <Button className={styles.docLink} type="primary" block href={doc.link} target="_blank">
+ {intl.get('doc.start')}
  </Button>
  </div>
  </Col>

app/stores/import.ts

@@ -119,7 +119,7 @@ class ImportSchemaConfigItem<T extends ISchemaEnum, F = T extends ISchemaEnum.Ed
 
  deleteFileItem = (fileItem: F) => this.files.remove(fileItem);
 
- resetFileItem = (index: number, item: F) => {
+ resetFileItem = (index: number, item: any) => {
  // this.files.
  this.files.splice(index, 1, item);
  };