feat: sf metadata display (#6249)

* feat: sf metadata display

* feat: update code

* feat: update code

* feat: lock react version

* feat: bug

* feat: optimize code

* feat: update transalte

* feat: update transalte

* feat: rebase code

* Feat: update code

* Feat: update code

---------

Co-authored-by: 杨国璇 <ygx@192.168.1.5>
Co-authored-by: 杨国璇 <ygx@Hello-word.local>
Co-authored-by: 杨国璇 <ygx@192.168.1.13>

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { SeafileMetadata } from '../../metadata';
 import { Utils } from '../../utils/utils';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot, lang, mediaUrl } from '../../utils/constants';
 import SeafileMarkdownViewer from '../seafile-markdown-viewer';
 
 const propTypes = {
@@ -48,6 +49,22 @@ class DirColumnFile extends React.Component {
         <div className="message err-tip">{gettext('File does not exist.')}</div>
       );
     }
+
+    if (this.props.content === '__sf-metadata') {
+      window.sfMetadata = {
+        siteRoot,
+        lang,
+        mediaUrl,
+      };
+
+      return (
+        <div className="w-100 h-100 o-hidden d-flex" style={{ paddingRight: 10, flexDirection: 'column', alignItems: 'center' }}>
+          <div className="" style={{ width: '100%', height: 10, zIndex: 7, transform: 'translateZ(1000px)', position: 'relative', background: '#fff' }}></div>
+          <SeafileMetadata repoID={this.props.repoID} />
+        </div>
+      );
+    }
+
     return (
       <SeafileMarkdownViewer
         isTOCShow={false}

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

@@ -63,7 +63,7 @@ class DirColumnNav extends React.Component {
 
   onNodeClick = (node) => {
     this.setState({opNode: node});
-    if (Utils.imageCheck(node.object.name)) {
+    if (Utils.imageCheck(node?.object?.name || '')) {
       this.showNodeImagePopup(node);
       return;
     }
@@ -268,7 +268,7 @@ class DirColumnNav extends React.Component {
             repoID={this.props.repoID}
           />
         </TreeSection>
-        <DirViews repoID={this.props.repoID} userPerm={this.props.userPerm} />
+        <DirViews repoID={this.props.repoID} currentPath={this.props.currentPath} userPerm={this.props.userPerm} onNodeClick={this.onNodeClick}/>
       </>
     );
   };

frontend/src/components/dir-view-mode/dir-views/index.js

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import TreeSection from '../../tree-section';
-import MetadataStatusManagementDialog from '../../metadata-manage/metadata-status-manage-dialog';
-import metadataManagerAPI from '../../metadata-manage/api';
+import { MetadataStatusManagementDialog, MetadataTreeView } from '../../../metadata';
+import metadataAPI from '../../../metadata/api';
 import toaster from '../../toast';
-import MetadataViews from '../../metadata-manage/metadata-views';
 
 import './index.css';
 
-const DirViews = ({ userPerm, repoID }) => {
+const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
   const enableMetadataManagement = useMemo(() => {
     return window.app.pageOptions.enableMetadataManagement;
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -33,7 +32,7 @@ const DirViews = ({ userPerm, repoID }) => {
       return;
     }
 
-    const repoMetadataManagementEnabledStatusRes = metadataManagerAPI.getRepoMetadataManagementEnabledStatus(repoID);
+    const repoMetadataManagementEnabledStatusRes = metadataAPI.getMetadataStatus(repoID);
     Promise.all([repoMetadataManagementEnabledStatusRes]).then(results => {
       const [repoMetadataManagementEnabledStatusRes] = results;
       setMetadataStatus(repoMetadataManagementEnabledStatusRes.data.enabled);
@@ -65,7 +64,7 @@ const DirViews = ({ userPerm, repoID }) => {
   return (
     <>
       <TreeSection title={gettext('Views')} moreKey={{ name: 'views' }} moreOperations={moreOperations} moreOperationClick={moreOperationClick}>
-        {!loading && metadataStatus && (<MetadataViews repoID={repoID} />)}
+        {!loading && metadataStatus && (<MetadataTreeView repoID={repoID} currentPath={currentPath} onNodeClick={onNodeClick} />)}
       </TreeSection>
       {showMetadataStatusManagementDialog && (
         <MetadataStatusManagementDialog value={metadataStatus} repoID={repoID} toggle={closeMetadataManagementDialog} submit={toggleMetadataStatus} />
@@ -77,6 +76,8 @@ const DirViews = ({ userPerm, repoID }) => {
 DirViews.propTypes = {
   userPerm: PropTypes.string,
   repoID: PropTypes.string,
+  currentPath: PropTypes.string,
+  onNodeClick: PropTypes.func,
 };
 
 export default DirViews;