feat: metadata all tags scroll (#7115)

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

frontend/src/tag/hooks/tags.js

@@ -18,6 +18,7 @@ const TagsContext = React.createContext(null);
 export const TagsProvider = ({ repoID, currentPath, selectTagsView, children, ...params }) => {
 
   const [isLoading, setLoading] = useState(true);
+  const [isReloading, setReloading] = useState(false);
   const [tagsData, setTagsData] = useState(null);
 
   const storeRef = useRef(null);
@@ -39,14 +40,14 @@ export const TagsProvider = ({ repoID, currentPath, selectTagsView, children, ..
   }, []);
 
   const reloadTags = useCallback(() => {
-    setLoading(true);
+    setReloading(true);
     storeRef.current.reload(PER_LOAD_NUMBER).then(() => {
       setTagsData(storeRef.current.data);
-      setLoading(false);
+      setReloading(false);
     }).catch(error => {
       const errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
-      setLoading(false);
+      setReloading(false);
     });
   }, []);
 
@@ -93,6 +94,7 @@ export const TagsProvider = ({ repoID, currentPath, selectTagsView, children, ..
   const handelSelectTag = useCallback((tag, isSelected) => {
     if (isSelected) return;
     const id = getTagId(tag);
+    setReloading(id === ALL_TAGS_ID);
     const node = {
       children: [],
       path: '/' + PRIVATE_FILE_TYPE.TAGS_PROPERTIES + '/' + id,
@@ -225,6 +227,7 @@ export const TagsProvider = ({ repoID, currentPath, selectTagsView, children, ..
   return (
     <TagsContext.Provider value={{
       isLoading,
+      isReloading,
       tagsData,
       store: storeRef.current,
       context: contextRef.current,

frontend/src/tag/views/all-tags/index.js

@@ -10,7 +10,7 @@ import './index.css';
 const AllTags = ({ ...params }) => {
   const [displayTag, setDisplayTag] = useState('');
 
-  const { isLoading, tagsData, context } = useTags();
+  const { isLoading, isReloading, tagsData, context } = useTags();
 
   useEffect(() => {
     const eventBus = context.eventBus;
@@ -28,7 +28,7 @@ const AllTags = ({ ...params }) => {
     setDisplayTag(tagID);
   }, [displayTag]);
 
-  if (isLoading) return (<CenteredLoading />);
+  if (isLoading || isReloading) return (<CenteredLoading />);
 
   if (displayTag) {
     return (<TagFiles { ...params } tagID={displayTag} onChangeDisplayTag={onChangeDisplayTag} />);

frontend/src/tag/views/all-tags/main/index.css

@@ -5,7 +5,7 @@
   flex-direction: column;
   overflow-y: scroll;
   width: 100%;
-  padding: 0 16px 16px;
+  padding: 0 1rem 10rem;
 }
 
 .sf-metadata-tags-table .sf-metadata-tags-table-header {

frontend/src/tag/views/all-tags/main/index.js

@@ -1,13 +1,33 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../../../utils/constants';
 import Tag from './tag';
 import EmptyTip from '../../../../components/empty-tip';
 import { getTagId } from '../../../utils/cell/core';
+import { debounce } from '../../../../metadata/utils/common';
+import { isCellValueChanged } from '../../../../metadata/utils/cell';
 
 import './index.css';
 
-const Main = ({ context, tags, onChangeDisplayTag }) => {
+const Main = React.memo(({ context, tags, onChangeDisplayTag }) => {
+  const tableRef = useRef(null);
+
+  useEffect(() => {
+    if (!tableRef.current) return;
+    const currentLocalStorage = context.localStorage;
+    const lastScrollTop = currentLocalStorage.getItem('scroll_top') || 0;
+    if (lastScrollTop) {
+      tableRef.current.scrollTop = Number(lastScrollTop);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handelScroll = debounce(() => {
+    const currentLocalStorage = context.localStorage;
+    const currentScrollTop = tableRef.current.scrollTop || 0;
+    currentLocalStorage.setItem('scroll_top', currentScrollTop);
+  }, 200);
+
   if (tags.length === 0) {
     return (
       <div className="w-100 h-100 d-flex align-items-center justify-content-center">
@@ -17,7 +37,7 @@ const Main = ({ context, tags, onChangeDisplayTag }) => {
   }
 
   return (
-    <div className="sf-metadata-tags-table">
+    <div className="sf-metadata-tags-table" ref={tableRef} onScroll={handelScroll}>
       <div className="sf-metadata-tags-table-header sf-metadata-tags-table-row">
         <div className="sf-metadata-tags-table-cell">{gettext('Tag')}</div>
         <div className="sf-metadata-tags-table-cell">{gettext('File count')}</div>
@@ -29,7 +49,9 @@ const Main = ({ context, tags, onChangeDisplayTag }) => {
       })}
     </div>
   );
-};
+}, (props, nextProps) => {
+  return !isCellValueChanged(props.tags, nextProps.tags);
+});
 
 Main.propTypes = {
   context: PropTypes.object,