[dir view] removed related info & function for 'readme.md' in the top info bar (#5720)

frontend/src/components/dialog/readme-dialog.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { MarkdownViewer } from '@seafile/seafile-editor';
-import Loading from '../../components/loading';
-import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, mediaUrl } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
-import toaster from '../toast';
-
-const propTypes = {
-  repoID: PropTypes.string.isRequired,
-  filePath: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  href: PropTypes.string,
-  toggleCancel: PropTypes.func.isRequired,
-};
-
-class ReadmeDialog extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      readmeContent: null,
-      isLoading: true,
-    };
-  }
-
-  componentDidMount() {
-    seafileAPI.getFileDownloadLink(this.props.repoID, this.props.filePath).then(res => {
-      seafileAPI.getFileContent(res.data).then(res => {
-        this.setState({
-          readmeContent: res.data,
-          isLoading: false,
-        });
-      });
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  render() {
-    return (
-      <Modal isOpen={true} toggle={this.props.toggleCancel} className="readme-dialog" size="lg">
-        <ModalHeader>{this.props.fileName}
-          <a className="readme-dialog-edit" href={this.props.href} target='_blank' rel="noreferrer"><i className="fa fa-pencil-alt"></i></a>
-        </ModalHeader>
-        <ModalBody>
-          {this.state.isLoading ?
-            <Loading />:
-            <MarkdownViewer
-              markdownContent={this.state.readmeContent}
-              showTOC={false}
-              scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-            />
-          }
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggleCancel}>{gettext('Close')}</Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-ReadmeDialog.propTypes = propTypes;
-
-export default ReadmeDialog;

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -40,7 +40,6 @@ const propTypes = {
   isRepoInfoBarShow: PropTypes.bool.isRequired,
   draftCounts: PropTypes.number.isRequired,
   usedRepoTags: PropTypes.array.isRequired,
-  readmeMarkdown: PropTypes.object,
   updateUsedRepoTags: PropTypes.func.isRequired,
   // list
   isDirentListLoading: PropTypes.bool.isRequired,
@@ -201,7 +200,6 @@ class DirColumnView extends React.Component {
               enableDirPrivateShare={this.props.enableDirPrivateShare}
               isRepoInfoBarShow={this.props.isRepoInfoBarShow}
               usedRepoTags={this.props.usedRepoTags}
-              readmeMarkdown={this.props.readmeMarkdown}
               draftCounts={this.props.draftCounts}
               updateUsedRepoTags={this.props.updateUsedRepoTags}
               isDirentListLoading={this.props.isDirentListLoading}

frontend/src/components/dir-view-mode/dir-grid-view.js

@@ -8,7 +8,6 @@ const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   currentRepoInfo: PropTypes.object.isRequired,
-  readmeMarkdown: PropTypes.object,
   draftCounts: PropTypes.number,
   usedRepoTags: PropTypes.array.isRequired,
   updateUsedRepoTags: PropTypes.func.isRequired,
@@ -53,7 +52,6 @@ class DirGridView extends React.Component {
           <RepoInfoBar
             repoID={this.props.repoID}
             currentPath={this.props.path}
-            readmeMarkdown={this.props.readmeMarkdown}
             draftCounts={this.props.draftCounts}
             usedRepoTags={this.props.usedRepoTags}
             updateUsedRepoTags={this.props.updateUsedRepoTags}

frontend/src/components/dir-view-mode/dir-list-view.js

@@ -13,7 +13,6 @@ const propTypes = {
   enableDirPrivateShare: PropTypes.bool.isRequired,
   isRepoInfoBarShow: PropTypes.bool.isRequired,
   usedRepoTags: PropTypes.array.isRequired,
-  readmeMarkdown: PropTypes.object,
   draftCounts: PropTypes.number,
   updateUsedRepoTags: PropTypes.func.isRequired,
   isDirentListLoading: PropTypes.bool.isRequired,
@@ -64,7 +63,6 @@ class DirListView extends React.Component {
           <RepoInfoBar
             repoID={this.props.repoID}
             currentPath={this.props.path}
-            readmeMarkdown={this.props.readmeMarkdown}
             draftCounts={this.props.draftCounts}
             usedRepoTags={this.props.usedRepoTags}
             updateUsedRepoTags={this.props.updateUsedRepoTags}

frontend/src/components/repo-info-bar.js

@@ -3,17 +3,13 @@ import PropTypes from 'prop-types';
 import ModalPortal from './modal-portal';
 import ListTaggedFilesDialog from './dialog/list-taggedfiles-dialog';
 import ListRepoDraftsDialog from './dialog/list-repo-drafts-dialog';
-import ReadmeDialog from './dialog/readme-dialog';
-import { siteRoot, gettext } from '../utils/constants';
-import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
 
 import '../css/repo-info-bar.css';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
-  currentPath: PropTypes.string.isRequired,
   usedRepoTags: PropTypes.array.isRequired,
-  readmeMarkdown: PropTypes.object,
   draftCounts: PropTypes.number,
   updateUsedRepoTags: PropTypes.func,
   onFileTagChanged: PropTypes.func,
@@ -29,15 +25,14 @@ class RepoInfoBar extends React.Component {
     this.state = {
       currentTag: null,
       isListTaggedFileShow: false,
-      showRepoDrafts: false,
-      showReadmeDialog: false,
+      showRepoDrafts: false
     };
   }
 
   onListTaggedFiles = (currentTag) => {
     this.setState({
       currentTag: currentTag,
-      isListTaggedFileShow: !this.state.isListTaggedFileShow,
+      isListTaggedFileShow: !this.state.isListTaggedFileShow
     });
   };
 
@@ -53,25 +48,14 @@ class RepoInfoBar extends React.Component {
     });
   };
 
-  toggleReadme = () => {
-    this.setState({
-      showReadmeDialog: !this.state.showReadmeDialog
-    });
-  };
-
   render() {
-    let { repoID, currentPath, usedRepoTags, readmeMarkdown, draftCounts, className } = this.props;
+    let { repoID, usedRepoTags, draftCounts, className } = this.props;
 
     // to be compatible with the existing code
-    if (readmeMarkdown === undefined) {
-      readmeMarkdown = null;
-    }
     if (draftCounts === undefined) {
       draftCounts = 0;
     }
 
-    let href = readmeMarkdown !== null ? siteRoot + 'lib/' + repoID + '/file' + Utils.joinPath(currentPath, readmeMarkdown.name) +  '?mode=edit' : '';
-    let filePath = readmeMarkdown !== null ? currentPath + readmeMarkdown.name : '';
     return (
       <div className={`repo-info-bar ${className ? className : ''}`}>
         {usedRepoTags.length > 0 && (
@@ -89,19 +73,7 @@ class RepoInfoBar extends React.Component {
             })}
           </ul>
         )}
-        <div className={(usedRepoTags.length > 0 && readmeMarkdown) ? 'file-info-list mt-1' : 'file-info-list'}>
-          {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) > 1) &&
-            <span className="file-info" onClick={this.toggleReadme}>
-              <span className="info-icon sf2-icon-readme"></span>
-              <span className="used-tag-name">{readmeMarkdown.name}</span>
-            </span>
-          }
-          {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) < 2) &&
-            <span className="file-info">
-              <span className="info-icon sf2-icon-readme"></span>
-              <a className="used-tag-name" href={href} target='_blank' rel="noreferrer">{readmeMarkdown.name}</a>
-            </span>
-          }
+        <div className={usedRepoTags.length > 0 ? 'file-info-list mt-1' : 'file-info-list'}>
           {draftCounts > 0 &&
             <span className="file-info">
               <span className="info-icon sf2-icon-drafts"></span>
@@ -136,17 +108,6 @@ class RepoInfoBar extends React.Component {
           </ModalPortal>
         )}
 
-        {this.state.showReadmeDialog && (
-          <ModalPortal>
-            <ReadmeDialog
-              toggleCancel={this.toggleReadme}
-              repoID={repoID}
-              filePath={filePath}
-              href={href}
-              fileName={readmeMarkdown.name}
-            />
-          </ModalPortal>
-        )}
       </div>
     );
   }