Encrypted repo do not support metadata (#6959)

* encrypted-repo-do-not-support-metadata

* remove useless

* encrypted repo detail image

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

@@ -1,16 +1,14 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import TreeSection from '../tree-section';
 import { MetadataStatusManagementDialog, MetadataFaceRecognitionDialog, MetadataTreeView, useMetadata } from '../../metadata';
 import ExtensionPrompts from './extension-prompts';
+import { seafileAPI } from '../../utils/seafile-api';
 
 const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
-  const enableMetadataManagement = useMemo(() => {
-    return window.app.pageOptions.enableMetadataManagement;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [window.app.pageOptions.enableMetadataManagement]);
 
+  const [enableMetadataManagement, setEnableMetadataManagement] = useState(false);
   const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
   const [showMetadataFaceRecognitionDialog, setShowMetadataFaceRecognitionDialog] = useState(false);
   const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition, navigation } = useMetadata();
@@ -25,6 +23,16 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
     return operations;
   }, [enableMetadataManagement, enableMetadata, currentRepoInfo]);
 
+  useEffect(() => {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      if (res.data.encrypted) {
+        setEnableMetadataManagement(false);
+      } else {
+        setEnableMetadataManagement(window.app.pageOptions.enableMetadataManagement);
+      }
+    });
+  }, [repoID]);
+
   const moreOperationClick = useCallback((operationKey) => {
     switch (operationKey) {
       case 'extended-properties': {

frontend/src/components/dirent-detail/dirent-details/index.css

@@ -1,4 +1,4 @@
-.detail-body .detail-image-thumbnail {
+.detail-body .detail-image {
   height: 144px;
   width: 100%;
   flex-shrink: 0;
@@ -9,7 +9,7 @@
   overflow: hidden;
 }
 
-.detail-body .detail-image-thumbnail .thumbnail {
+.detail-body .detail-image>img {
   border: 0;
   border-radius: 0;
   float: none;

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

@@ -79,11 +79,16 @@ class DirentDetails extends React.Component {
     if (!dirent) return null;
     const isImg = Utils.imageCheck(dirent.name);
     if (!isImg) return null;
-    const { repoID, path } = this.props;
+    const { repoID, path, currentRepoInfo } = this.props;
-    const bigIconUrl = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForGrid}` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
+    let src = '';
+    if (currentRepoInfo.encrypted) {
+      src = `${siteRoot}repo/${repoID}/raw` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
+    } else {
+      src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForGrid}` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
+    }
     return (
-      <div className="detail-image-thumbnail">
+      <div className="detail-image">
-        <img src={bigIconUrl} alt="" className="thumbnail" />
+        <img src={src} alt="" />
       </div>
     );
   };

frontend/src/metadata/hooks/enable-metadata.js

@@ -1,19 +1,27 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import metadataAPI from '../api';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
+import { seafileAPI } from '../../utils/seafile-api';
 
 // This hook provides content related to seahub interaction, such as whether to enable extended attributes
 const EnableMetadataContext = React.createContext(null);
 
 export const EnableMetadataProvider = ({ repoID, children }) => {
-  const enableMetadataManagement = useMemo(() => {
-    return window.app.pageOptions.enableMetadataManagement;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [window.app.pageOptions.enableMetadataManagement]);
 
+  const [enableMetadataManagement, setEnableMetadataManagement] = useState(false);
   const [enableMetadata, setEnableExtendedProperties] = useState(false);
 
+  useEffect(() => {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      if (res.data.encrypted) {
+        setEnableMetadataManagement(false);
+      } else {
+        setEnableMetadataManagement(window.app.pageOptions.enableMetadataManagement);
+      }
+    });
+  }, [repoID]);
+
   useEffect(() => {
     if (!enableMetadataManagement) {
       return;

frontend/src/metadata/hooks/metadata.js

@@ -1,20 +1,17 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import metadataAPI from '../api';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
 import { gettext } from '../../utils/constants';
 import { PRIVATE_FILE_TYPE } from '../../constants';
 import { FACE_RECOGNITION_VIEW_ID } from '../constants';
+import { seafileAPI } from '../../utils/seafile-api';
 
 // This hook provides content related to seahub interaction, such as whether to enable extended attributes, views data, etc.
 const MetadataContext = React.createContext(null);
 
 export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView, children }) => {
-  const enableMetadataManagement = useMemo(() => {
+  const [enableMetadataManagement, setEnableMetadataManagement] = useState(false);
-    return window.app.pageOptions.enableMetadataManagement;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [window.app.pageOptions.enableMetadataManagement]);
-
   const [enableMetadata, setEnableExtendedProperties] = useState(false);
   const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
   const [showFirstView, setShowFirstView] = useState(false);
@@ -23,6 +20,16 @@ export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView,
   const [, setCount] = useState(0);
   const viewsMap = useRef({});
 
+  useEffect(() => {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      if (res.data.encrypted) {
+        setEnableMetadataManagement(false);
+      } else {
+        setEnableMetadataManagement(window.app.pageOptions.enableMetadataManagement);
+      }
+    });
+  }, [repoID]);
+
   const cancelURLView = useCallback(() => {
     // If attribute extension is turned off, unmark the URL
     const { origin, pathname, search } = window.location;