['tag edit'] fixup for 'tag edit' in 'dir view - file details panel' & 'markdown file view - info panel' (#5962)

frontend/src/components/dirent-detail/detail-list-view.js

@@ -13,6 +13,7 @@ import ConfirmApplyFolderPropertiesDialog from '../dialog/confirm-apply-folder-p
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
   repoID: PropTypes.string.isRequired,
+  repoTags: PropTypes.array.isRequired,
   dirent: PropTypes.object.isRequired,
   direntType: PropTypes.string.isRequired,
   direntDetail: PropTypes.object.isRequired,
@@ -150,6 +151,7 @@ class DetailListView extends React.Component {
         {this.state.isEditFileTagShow &&
           <EditFileTagPopover
             repoID={this.props.repoID}
+            repoTags={this.props.repoTags}
             filePath={direntPath}
             fileTagList={fileTagList}
             toggleCancel={this.onEditFileTagToggle}

frontend/src/components/dirent-detail/dirent-details.js

@@ -17,6 +17,7 @@ const propTypes = {
   onItemDetailsClose: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
   direntDetailPanelTab: PropTypes.string,
+  repoTags: PropTypes.array,
   fileTags: PropTypes.array,
 };
 
@@ -119,6 +120,7 @@ class DirentDetail extends React.Component {
               dirent={this.props.dirent || folderDirent}
               direntType={this.state.direntType}
               direntDetail={this.state.direntDetail}
+              repoTags={this.props.repoTags}
               fileTagList={dirent ? dirent.file_tags : fileTags}
               onFileTagChanged={this.props.onFileTagChanged}
             />

frontend/src/components/popover/edit-filetag-popover.js

@@ -37,8 +37,8 @@ class EditFileTagPopover extends React.Component {
     let color = this.generateRandomColor();
     let repoID = this.props.repoID;
     seafileAPI.createRepoTag(repoID, name, color).then((res) => {
-      let repoTagID = res.data.repo_tag.repo_tag_id;
-      this.onRepoTagCreated(repoTagID);
+      const { repo_tag: newTag } = res.data;
+      this.onRepoTagCreated(newTag);
       this.setState({
         searchVal: '',
         highlightIndex: -1,
@@ -49,10 +49,14 @@ class EditFileTagPopover extends React.Component {
     });
   };
 
-  onRepoTagCreated = (repoTagID) => {
-    let {repoID, filePath} = this.props;
+  onRepoTagCreated = (newTag) => {
+    const { repoID, filePath } = this.props;
+    const { repo_tag_id: repoTagID } = newTag;
     seafileAPI.addFileTag(repoID, filePath, repoTagID).then(() => {
       this.props.onFileTagChanged();
+      if (this.props.onNewRepoTagAdded) {
+        this.props.onNewRepoTagAdded(newTag);
+      }
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -196,6 +200,7 @@ EditFileTagPopover.propTypes = {
   repoTags: PropTypes.array.isRequired,
   toggleCancel: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
+  onNewRepoTagAdded: PropTypes.func
 };
 
 export default EditFileTagPopover;

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -356,6 +356,7 @@ class LibContentContainer extends React.Component {
                   path={this.props.path}
                   dirent={this.state.currentDirent}
                   currentRepoInfo={this.props.currentRepoInfo}
+                  repoTags={this.props.repoTags}
                   fileTags={this.props.isViewFile ? this.props.fileTags : []}
                   onFileTagChanged={this.props.onFileTagChanged}
                   onItemDetailsClose={this.props.closeDirentDetail}

frontend/src/pages/markdown-editor/detail-list-view/index.js

@@ -1,9 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import Icon from '../../../components/icon';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import RepoTag from '../../../models/repo-tag';
+import toaster from '../../../components/toast';
+import Icon from '../../../components/icon';
 import EditFileTagPopover from '../../../components/popover/edit-filetag-popover';
 import FileTagList from '../../../components/file-tag-list';
 
@@ -23,16 +26,43 @@ class DetailListView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      repoTags: [],
       isEditFileTagShow: false
     };
   }
 
+  componentDidMount() {
+    seafileAPI.listRepoTags(repoID).then(res => {
+      let repoTags = [];
+      res.data.repo_tags.forEach(item => {
+        const repoTag = new RepoTag(item);
+        repoTags.push(repoTag);
+      });
+      this.setState({
+        repoTags: repoTags
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onNewRepoTagAdded = (newTag) => {
+    const repoTag = new RepoTag(newTag);
+    const { repoTags: newTags } = this.state;
+    newTags.push(repoTag);
+    this.setState({
+      repoTags: newTags
+    });
+  };
+
   onEditFileTagToggle = () => {
     this.setState({isEditFileTagShow: !this.state.isEditFileTagShow});
   };
 
   render() {
     const { fileInfo } = this.props;
+    const { repoTags } = this.state;
     return (
       <Fragment>
         <div className="dirent-table-container p-2">
@@ -57,10 +87,12 @@ class DetailListView extends React.Component {
         {this.state.isEditFileTagShow &&
           <EditFileTagPopover
             repoID={repoID}
+            repoTags={repoTags}
             filePath={filePath}
             fileTagList={this.props.fileTagList}
             toggleCancel={this.onEditFileTagToggle}
             onFileTagChanged={this.props.onFileTagChanged}
+            onNewRepoTagAdded={this.onNewRepoTagAdded}
             target={'file-tag-container-icon'}
             isEditFileTagShow={this.state.isEditFileTagShow}
           />