feat: add info icon into toolbar

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/header-toolbar.js

@@ -1,5 +1,6 @@
 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';
@@ -7,6 +8,10 @@ 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';
 
@@ -37,6 +42,10 @@ class HeaderToolbar extends React.Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      currentDirent: null,
+      dirPath: '/',
+    };
   }
 
   downloadFile = () => {
@@ -53,6 +62,61 @@ class HeaderToolbar extends React.Component {
     window.location.href = editorApi.getParentDictionaryUrl();
   };
 
+  componentDidMount() {
+    this.calculateDirPath();
+    this.getDirentList();
+  }
+
+  onArticleInfoToggle = () => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE);
+  };
+
+  calculateDirPath = () => {
+    const { filePath } = window.app.pageOptions;
+    const dirPath = filePath.substring(0, filePath.lastIndexOf('/') || 0);
+    this.setState({ dirPath: dirPath || '/' });
+  };
+
+  getDirentList = () => {
+    const { repoID, filePath } = window.app.pageOptions;
+    return seafileAPI.listDir(repoID, this.state.dirPath, { 'with_thumbnail': true }).then(res => {
+      res.data.dirent_list.forEach(item => {
+        const dirent = new Dirent(item);
+        if (Utils.joinPath(item.parent_dir, item.name) === filePath) {
+          this.setState({ currentDirent: dirent });
+        }
+      });
+    }).catch((err) => {
+      Utils.getErrorMsg(err, true);
+    });
+  };
+
+  onArticleInfoDetailToggle = () => {
+    const { repoID, filePath } = window.app.pageOptions;
+    const { currentDirent } = this.state;
+    const repoInfo = { permission: 'rw' };
+
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(EXTERNAL_EVENTS.ON_ARTICLE_INFO_DETAIL_TOGGLE, {
+      component: EmbeddedFileDetails,
+      props: {
+        repoID: repoID,
+        repoInfo: repoInfo,
+        dirent: currentDirent,
+        path: filePath,
+        type: 'global',
+        onClose: this.onArticleInfoToggle,
+        width: 300,
+        component: {
+          headerComponent: {
+            closeIcon: (<i className="iconfont icon-x"></i>)
+          }
+        }
+      }
+    });
+  };
+
   render() {
     let { contentChanged, saving, isLocked, lockedByMe } = this.props;
 
@@ -94,6 +158,17 @@ class HeaderToolbar extends React.Component {
                     onMouseDown={this.props.toggleLockFile}
                   />
                 )}
+                {canGenerateShareLink && (
+                  <ButtonItem
+                    id='info'
+                    text={gettext('Info')}
+                    icon='info'
+                    onClick={() => {
+                      this.onArticleInfoDetailToggle();
+                      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 }}',