Merge pull request #6859 from haiwen/feat-add-article-info-icon

feat: add info icon into toolbar

frontend/package.json

@@ -13,7 +13,7 @@
     "@seafile/resumablejs": "1.1.16",
     "@seafile/sdoc-editor": "1.0.95",
     "@seafile/seafile-calendar": "0.0.28",
-    "@seafile/seafile-editor": "^1.0.116",
+    "@seafile/seafile-editor": "^1.0.118",
     "@seafile/sf-metadata-ui-component": "^0.0.40",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/react-codemirror": "^4.19.4",

frontend/src/index.js

@@ -5,13 +5,20 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from './_i18n/i18n-seafile-editor';
 import MarkdownEditor from './pages/markdown-editor';
 import Loading from './components/loading';
+import { CollaboratorsProvider, EnableMetadataProvider } from './metadata';
 
 import './index.css';
 
+const { repoID } = window.app.pageOptions;
+
 ReactDom.render(
   <I18nextProvider i18n={ i18n } >
     <Suspense fallback={<Loading />}>
-      <MarkdownEditor />
+      <EnableMetadataProvider repoID={repoID} >
+        <CollaboratorsProvider repoID={repoID}>
+          <MarkdownEditor />
+        </CollaboratorsProvider>
+      </EnableMetadataProvider>
     </Suspense>
   </I18nextProvider>,
   document.getElementById('root')

frontend/src/pages/markdown-editor/header-toolbar/button-group.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 class ButtonGroup extends React.PureComponent {
   render() {
     return (
-      <div className={'btn-group ' + this.props.className} role={'group'}>
+      <div className={classnames('btn-group', this.props.className)} role={'group'}>
         {this.props.children}
       </div>
     );

frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js

@@ -1,17 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EXTERNAL_EVENTS, EventBus } from '@seafile/seafile-editor';
 import { gettext, canGenerateShareLink, isPro, mediaUrl, canLockUnlockFile } from '../../../utils/constants';
 import ButtonGroup from './button-group';
 import ButtonItem from './button-item';
 import CollabUsersButton from './collab-users-button';
 import MoreMenu from './more-menu';
 import FileInfo from './file-info';
 import Icon from '../../../components/icon';
+import EmbeddedFileDetails from '../../../components/dirent-detail/embedded-file-details';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { Utils } from '../../../utils/utils';
+import Dirent from '../../../../src/models/dirent';
 
 import '../css/header-toolbar.css';
 
 const { seafileCollabServer } = window.app.config;
-const { canDownloadFile } = window.app.pageOptions;
+const { canDownloadFile, repoID, filePath } = window.app.pageOptions;
 
 const propTypes = {
   editorApi: PropTypes.object.isRequired,
@@ -37,6 +42,10 @@ class HeaderToolbar extends React.Component {
 
   constructor(props) {
     super(props);
+    this.dirPath = filePath.substring(0, filePath.lastIndexOf('/') || 0) || '/';
+    this.isFileInfoShow = false;
+    this.currentDirent = null;
+    this.helpInfoToggleSubscribe = null;
   }
 
   downloadFile = () => {
@@ -53,6 +62,60 @@ class HeaderToolbar extends React.Component {
     window.location.href = editorApi.getParentDictionaryUrl();
   };
 
+  componentDidMount() {
+    this.getDirentList();
+
+    const eventBus = EventBus.getInstance();
+    this.helpInfoToggleSubscribe = eventBus.subscribe(EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, this.handleHelpClick);
+  }
+
+  componentWillUnmount() {
+    this.helpInfoToggleSubscribe && this.helpInfoToggleSubscribe();
+  }
+
+  handleHelpClick = () => {
+    this.isFileInfoShow = false;
+  };
+
+  getDirentList = () => {
+    return seafileAPI.listDir(repoID, this.dirPath, { 'with_thumbnail': true }).then(res => {
+      const direntList = res.data.dirent_list || [];
+      for (let i = 0; i < direntList.length; i++) {
+        const item = direntList[i];
+        const dirent = new Dirent(item);
+        if (Utils.joinPath(item.parent_dir, item.name) === filePath) {
+          this.currentDirent = dirent;
+          break;
+        }
+      }
+    }).catch((err) => {
+      Utils.getErrorMsg(err, true);
+    });
+  };
+
+  onArticleInfoToggle = () => {
+    const repoInfo = { permission: this.currentDirent.permission };
+    const eventBus = EventBus.getInstance();
+
+    eventBus.dispatch(EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, this.isFileInfoShow ? null : {
+      component: EmbeddedFileDetails,
+      props: {
+        repoID: repoID,
+        repoInfo: repoInfo,
+        dirent: this.currentDirent,
+        path: filePath,
+        onClose: this.onArticleInfoToggle,
+        width: 300,
+        component: {
+          headerComponent: {
+            closeIcon: (<i className="iconfont icon-x"></i>)
+          }
+        }
+      }
+    });
+    this.isFileInfoShow = !this.isFileInfoShow;
+  };
+
   render() {
     let { contentChanged, saving, isLocked, lockedByMe } = this.props;
 
@@ -94,6 +157,12 @@ class HeaderToolbar extends React.Component {
                     onMouseDown={this.props.toggleLockFile}
                   />
                 )}
+                <ButtonItem
+                  id="file-info"
+                  text={gettext('Info')}
+                  icon='info'
+                  onMouseDown={this.onArticleInfoToggle}
+                />
                 {canGenerateShareLink && (
                   <ButtonItem
                     id='shareBtn'

seahub/templates/markdown_file_view_react.html

@@ -62,6 +62,7 @@
                   canLockUnlockFile: {% if can_lock_unlock_file %}true{% else %}false{% endif %},
                   canDownloadFile: {% if can_download_file %}true{% else %}false{% endif %},
                   fileDownloadURL: {% if file_download_url %}'{{ file_download_url|escapejs }}'{% else %}''{% endif %},
+                  enableMetadataManagement: {% if enable_metadata_management %} true {% else %} false {% endif %},
               },
              userInfo: {
                username: '{{ user.username }}',