feat: rename face recognition view (#7164)

* feat: rename face recognition view

* feat: optimize code

---------

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

frontend/src/metadata/hooks/metadata.js

@@ -7,6 +7,7 @@ import { PRIVATE_FILE_TYPE } from '../../constants';
 import { FACE_RECOGNITION_VIEW_ID, VIEW_TYPE } from '../constants';
 import { useMetadataStatus } from '../../hooks';
 import { updateFavicon } from '../utils/favicon';
+import { getViewName } from '../utils/view';
 
 // This hook provides content related to seahub interaction, such as whether to enable extended attributes, views data, etc.
 const MetadataContext = React.createContext(null);
@@ -30,7 +31,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
         const { navigation, views } = res.data;
         if (Array.isArray(views)) {
           views.forEach(view => {
-            viewsMap.current[view._id] = view;
+            viewsMap.current[view._id] = { ...view, name: getViewName(view) };
           });
         }
         setNavigation(navigation);
@@ -91,7 +92,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
       const view = res.data.view;
       let newNavigation = navigation.slice(0);
       newNavigation.push({ _id: view._id, type: 'view' });
-      viewsMap.current[view._id] = view;
+      viewsMap.current[view._id] = { ...view, name: getViewName(view) };
       setNavigation(newNavigation);
       selectView(view);
       successCallback && successCallback();
@@ -156,7 +157,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
     if (newValue === enableFaceRecognition) return;
     if (newValue) {
       toaster.success(gettext('Recognizing portraits. Please refresh the page later.'));
-      addView(gettext('Photos - classified by people'), VIEW_TYPE.FACE_RECOGNITION, () => {}, () => {});
+      addView('_people', VIEW_TYPE.FACE_RECOGNITION, () => {}, () => {});
     } else {
       if (viewsMap.current[FACE_RECOGNITION_VIEW_ID]) {
         let isSelected = false;

frontend/src/metadata/metadata-tree-view/view-item/index.js

@@ -50,9 +50,7 @@ const ViewItem = ({
   const operations = useMemo(() => {
     if (!canUpdate) return [];
     if (view._id === FACE_RECOGNITION_VIEW_ID) {
-      return [
+      return [];
-        { key: 'rename', value: gettext('Rename') },
-      ];
     }
     let value = [
       { key: 'rename', value: gettext('Rename') },
@@ -240,19 +238,21 @@ const ViewItem = ({
             <Icon symbol={VIEW_TYPE_ICON[view.type] || 'table'} className="metadata-views-icon" />
           </div>
         </div>
-        <div className="right-icon" id={`metadata-view-dropdown-item-${view._id}`} >
+        {operations.length > 0 && (
-          {highlight && (
+          <div className="right-icon" id={`metadata-view-dropdown-item-${view._id}`} >
-            <ItemDropdownMenu
+            {highlight && (
-              item={{ name: 'metadata-view' }}
+              <ItemDropdownMenu
-              toggleClass="sf3-font sf3-font-more"
+                item={{ name: 'metadata-view' }}
-              freezeItem={freezeItem}
+                toggleClass="sf3-font sf3-font-more"
-              unfreezeItem={unfreezeItem}
+                freezeItem={freezeItem}
-              getMenuList={() => operations}
+                unfreezeItem={unfreezeItem}
-              onMenuItemClick={operationClick}
+                getMenuList={() => operations}
-              menuStyle={isMobile ? { zIndex: 1050 } : {}}
+                onMenuItemClick={operationClick}
-            />
+                menuStyle={isMobile ? { zIndex: 1050 } : {}}
-          )}
+              />
-        </div>
+            )}
+          </div>
+        )}
       </div>
     </>
   );

frontend/src/metadata/utils/view/core.js

@@ -1,7 +1,20 @@
+import { gettext } from '../../../utils/constants';
+import { VIEW_TYPE } from '../../constants';
 import { getValidFilters } from '../filter';
 import { getValidGroupbys } from '../group';
 import { getValidSorts } from '../sort';
 
+/**
+ * Get view name
+ * @param {object} view e.g. { type, name, _id }
+ * @returns view name, string
+ */
+const getViewName = (view = {}) => {
+  const { type, name } = view;
+  if (type === VIEW_TYPE.FACE_RECOGNITION) return gettext('People');
+  return name;
+};
+
 /**
  * Get view by id
  * @param {array} views e.g. [{ _id, ... }, ...]
@@ -85,6 +98,7 @@ const getViewShownColumns = (view, columns) => {
 };
 
 export {
+  getViewName,
   getViewById,
   getViewByName,
   isDefaultView,

frontend/src/metadata/utils/view/index.js

@@ -1,4 +1,5 @@
 export {
+  getViewName,
   getViewById,
   getViewByName,
   isDefaultView,