From 7cdcbb5376d5c407bbf1a16551e1cfe57657aeb7 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Wed, 15 May 2024 18:27:33 +0800
Subject: [PATCH] Fix edit page UI (#6083)

* 01 change add new page dialog

* 02 open first page when page load

* fix init wiki do not have page
---
 .../pages/wiki2/css/add-new-page-dialog.css   |  3 +++
 frontend/src/pages/wiki2/index.js             | 17 +++++++++++-
 .../view-structure/add-new-page-dialog.js     | 27 +++++++++++++------
 3 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/pages/wiki2/css/add-new-page-dialog.css

diff --git a/frontend/src/pages/wiki2/css/add-new-page-dialog.css b/frontend/src/pages/wiki2/css/add-new-page-dialog.css
new file mode 100644
index 0000000000..43d6acb915
--- /dev/null
+++ b/frontend/src/pages/wiki2/css/add-new-page-dialog.css
@@ -0,0 +1,3 @@
+.add-new-page-dialog .modal-footer .loading-icon {
+  margin: 0;
+}
diff --git a/frontend/src/pages/wiki2/index.js b/frontend/src/pages/wiki2/index.js
index 52042cdb3e..8994d76355 100644
--- a/frontend/src/pages/wiki2/index.js
+++ b/frontend/src/pages/wiki2/index.js
@@ -80,10 +80,16 @@ class Wiki extends Component {
   getWikiConfig = () => {
     wikiAPI.getWiki2Config(wikiId).then(res => {
       const { wiki_config, repo_id } = res.data.wiki;
+      const config = new WikiConfig(JSON.parse(wiki_config) || {});
       this.setState({
-        config: new WikiConfig(JSON.parse(wiki_config) || {}),
+        config,
         isConfigLoading: false,
         repoId: repo_id,
+      }, () => {
+        const pageId = this.getFirstPageId(config);
+        if (pageId) {
+          this.setCurrentPage(pageId);
+        }
       });
     }).catch((error) => {
       let errorMsg = Utils.getErrorMsg(error);
@@ -107,6 +113,15 @@ class Wiki extends Component {
     });
   };
 
+  getFirstPageId = (config) => {
+    const item = config.navigation[0] || {};
+    if (item.type === 'page') {
+      return item.id;
+    } else if (item.type === 'folder') {
+      return item.children[0].id;
+    }
+  };
+
   loadSidePanel = (initialPath) => {
     if (hasIndex) {
       this.loadIndexNode();
diff --git a/frontend/src/pages/wiki2/view-structure/add-new-page-dialog.js b/frontend/src/pages/wiki2/view-structure/add-new-page-dialog.js
index a1f887f303..e064f151fb 100644
--- a/frontend/src/pages/wiki2/view-structure/add-new-page-dialog.js
+++ b/frontend/src/pages/wiki2/view-structure/add-new-page-dialog.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Button } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Label, Input, Button } from 'reactstrap';
 import { gettext, repoID } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import Loading from '../../../components/loading';
 
+import '../css/add-new-page-dialog.css';
+
 const propTypes = {
   toggle: PropTypes.func.isRequired,
   onAddNewPage: PropTypes.func,
@@ -56,6 +58,13 @@ class AddNewPageDialog extends React.Component {
     }
   };
 
+  handleKeyDown = (e) => {
+    if (e.keyCode === 13) {
+      e.preventDefault();
+      this.onSubmit();
+    }
+  };
+
   toggle = () => {
     this.props.toggle();
   };
@@ -111,15 +120,17 @@ class AddNewPageDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
+      <Modal isOpen={true} toggle={this.toggle} autoFocus={false} className='add-new-page-dialog'>
         <ModalHeader toggle={this.toggle}>{gettext('Add page')}</ModalHeader>
         <ModalBody className='pr-4'>
-          <Form>
-            <FormGroup>
-              <Label>{gettext('Page name')}</Label>
-              <Input value={this.state.pageName} onChange={this.handleChange} autoFocus={true} />
-            </FormGroup>
-          </Form>
+          <Label>{gettext('Page name')}</Label>
+          <Input
+            className="mb-4"
+            value={this.state.pageName}
+            onChange={this.handleChange}
+            autoFocus={true}
+            onKeyDown={this.handleKeyDown}
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>