Avoid extra request to shared storage, fixed extra re-renders (cvat-a…

…i#5915)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
Resolved cvat-ai#5845 

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [ ] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [x] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

cvat-ui/src/actions/share-actions.ts

@@ -29,7 +29,7 @@ const shareActions = {
 
 export type ShareActions = ActionUnion<typeof shareActions>;
 
-export function loadShareDataAsync(directory: string): ThunkAction {
+export function loadShareDataAsync(directory: string): ThunkAction<Promise<ShareFileInfo[]>> {
     return async (dispatch): Promise<ShareFileInfo[]> => {
         try {
             dispatch(shareActions.loadShareData());

cvat-ui/src/components/file-manager/file-manager.tsx

@@ -19,6 +19,7 @@ import { EventDataNode } from 'rc-tree/lib/interface';
 
 import config from 'config';
 import { CloudStorage } from 'reducers';
+import CVATLoadingSpinner from 'components/common/loading-spinner';
 import CloudStorageTab from './cloud-storages-tab';
 import LocalFiles from './local-files';
 
@@ -38,8 +39,9 @@ interface State {
 }
 
 interface Props {
+    sharedStorageInitialized: boolean;
+    sharedStorageFetching: boolean;
     treeData: (TreeNodeNormal & { mime_type: string })[];
-    share: any;
     many: boolean;
     onLoadData: (key: string) => Promise<any>;
     onChangeActiveKey(key: string): void;
@@ -55,7 +57,6 @@ export class FileManager extends React.PureComponent<Props, State> {
     public constructor(props: Props) {
         super(props);
         this.cloudStorageTabFormRef = React.createRef<FormInstance>();
-        const { onLoadData } = this.props;
 
         this.state = {
             files: {
@@ -69,8 +70,15 @@ export class FileManager extends React.PureComponent<Props, State> {
             expandedKeys: [],
             active: 'local',
         };
+    }
+
+    public componentDidUpdate(): void {
+        const { active } = this.state;
+        const { onLoadData, sharedStorageInitialized, sharedStorageFetching } = this.props;
 
-        onLoadData('/');
+        if (active === 'share' && !sharedStorageInitialized && !sharedStorageFetching) {
+            onLoadData('/');
+        }
     }
 
     private handleUploadCloudStorageFiles = (cloudStorageFiles: string[]): void => {
@@ -156,12 +164,19 @@ export class FileManager extends React.PureComponent<Props, State> {
         }
 
         const { SHARE_MOUNT_GUIDE_URL } = config;
-        const { treeData, onUploadShareFiles, onLoadData } = this.props;
+        const {
+            treeData, sharedStorageInitialized, onUploadShareFiles, onLoadData,
+        } = this.props;
         const { expandedKeys, files } = this.state;
 
         return (
             <Tabs.TabPane key='share' tab='Connected file share'>
-                {treeData[0].children && treeData[0].children.length ? (
+                {!sharedStorageInitialized && (
+                    <div className='cvat-share-tree-initialization'>
+                        <CVATLoadingSpinner />
+                    </div>
+                )}
+                {sharedStorageInitialized && !!treeData[0].children?.length && (
                     <Tree
                         className='cvat-share-tree'
                         checkable
@@ -196,7 +211,8 @@ export class FileManager extends React.PureComponent<Props, State> {
                         }}
                         treeData={getTreeNodes(treeData)}
                     />
-                ) : (
+                )}
+                {sharedStorageInitialized && !treeData[0].children?.length && (
                     <div className='cvat-empty-share-tree'>
                         <Empty />
                         <Paragraph className='cvat-text-color'>

cvat-ui/src/components/file-manager/styles.scss

@@ -4,11 +4,17 @@
 
 @import '../../base.scss';
 
-.cvat-share-tree {
+.cvat-share-tree-initialization {
     height: 32 * $grid-unit-size;
 }
 
+.cvat-share-tree {
+    @extend .cvat-share-tree-initialization;
+}
+
 .cvat-empty-share-tree {
+    @extend .cvat-share-tree-initialization;
+
     > .ant-typography {
         margin-top: 10px;
     }

cvat-ui/src/containers/file-manager/file-manager.tsx

@@ -29,36 +29,20 @@ interface OwnProps {
 }
 
 interface StateToProps {
-    treeData: (TreeNodeNormal & { mime_type: string })[];
-    share: any;
+    treeData: ShareItem;
+    sharedStorageInitialized: boolean;
+    sharedStorageFetching: boolean;
 }
 
 interface DispatchToProps {
     getTreeData(key: string): Promise<ShareFileInfo[]>;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
-    function convert(items: ShareItem[], path?: string): (TreeNodeNormal & { mime_type: string })[] {
-        return items.map(
-            (item): (TreeNodeNormal & { mime_type: string }) => {
-                const isLeaf = item.type !== 'DIR';
-                const key = `${path}${item.name}${isLeaf ? '' : '/'}`;
-                return {
-                    key,
-                    isLeaf,
-                    title: item.name || 'root',
-                    mime_type: item.mime_type,
-                    children: convert(item.children, key),
-                };
-            },
-        );
-    }
-
-    const { root } = state.share;
-
     return {
-        treeData: convert([root], ''),
-        share: state.share,
+        treeData: state.share.root,
+        sharedStorageInitialized: state.share.initialized,
+        sharedStorageFetching: state.share.fetching,
     };
 }
 
@@ -71,15 +55,54 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
 
 type Props = StateToProps & DispatchToProps & OwnProps;
 
-export class FileManagerContainer extends React.PureComponent<Props> {
+interface State {
+    treeData: (TreeNodeNormal & {
+        mime_type: string;
+    })[];
+    prevRoot: ShareItem | null;
+}
+
+export class FileManagerContainer extends React.PureComponent<Props, State> {
     private managerComponentRef: any;
 
     public constructor(props: Props) {
         super(props);
 
+        this.state = {
+            treeData: [],
+            prevRoot: null,
+        };
+
         this.managerComponentRef = React.createRef();
     }
 
+    static getDerivedStateFromProps(props: Props, state: State): State | null {
+        function convert(items: ShareItem[], path?: string): (TreeNodeNormal & { mime_type: string })[] {
+            return items.map(
+                (item): (TreeNodeNormal & { mime_type: string }) => {
+                    const isLeaf = item.type !== 'DIR';
+                    const key = `${path}${item.name}${isLeaf ? '' : '/'}`;
+                    return {
+                        key,
+                        isLeaf,
+                        title: item.name || 'root',
+                        mime_type: item.mime_type,
+                        children: convert(item.children, key),
+                    };
+                },
+            );
+        }
+
+        if (state.prevRoot !== props.treeData) {
+            return {
+                prevRoot: props.treeData,
+                treeData: convert([props.treeData], ''),
+            };
+        }
+
+        return null;
+    }
+
     private handleUploadShareFiles = (keys: string[]): Promise<void> => new Promise(() => {
         const { onUploadShareFiles, getTreeData } = this.props;
         const getItemTreeDataByPath = (data: any, partsPath: string[]): any => {
@@ -95,7 +118,7 @@ export class FileManagerContainer extends React.PureComponent<Props> {
             type: string;
             mime_type: string;
         }[]> => {
-            const { treeData } = this.props;
+            const { treeData } = this.state;
             let files: {
                 key: string;
                 type: string;
@@ -150,20 +173,22 @@ export class FileManagerContainer extends React.PureComponent<Props> {
 
     public render(): JSX.Element {
         const {
-            treeData,
-            share,
+            sharedStorageInitialized,
+            sharedStorageFetching,
             getTreeData,
             many,
             onChangeActiveKey,
             onUploadLocalFiles,
             onUploadRemoteFiles,
             onUploadCloudStorageFiles,
         } = this.props;
+        const { treeData } = this.state;
 
         return (
             <FileManagerComponent
                 treeData={treeData}
-                share={share}
+                sharedStorageInitialized={sharedStorageInitialized}
+                sharedStorageFetching={sharedStorageFetching}
                 many={many}
                 onLoadData={getTreeData}
                 onUploadLocalFiles={onUploadLocalFiles}

cvat-ui/src/reducers/index.ts

@@ -336,6 +336,8 @@ export interface ShareItem {
 
 export interface ShareState {
     root: ShareItem;
+    fetching: boolean;
+    initialized: boolean;
 }
 
 export interface ModelAttribute {

cvat-ui/src/reducers/share-reducer.ts

@@ -8,9 +8,12 @@ import { AuthActionTypes, AuthActions } from 'actions/auth-actions';
 import { ShareState, ShareFileInfo, ShareItem } from '.';
 
 const defaultState: ShareState = {
+    initialized: false,
+    fetching: false,
     root: {
         name: '',
         type: 'DIR',
+        mime_type: '',
         children: [],
     },
 };
@@ -20,6 +23,12 @@ export default function (
     action: ShareActions | AuthActions | BoundariesActions,
 ): ShareState {
     switch (action.type) {
+        case ShareActionTypes.LOAD_SHARE_DATA: {
+            return {
+                ...state,
+                fetching: true,
+            };
+        }
         case ShareActionTypes.LOAD_SHARE_DATA_SUCCESS: {
             const { values } = action.payload;
             const { directory } = action.payload;
@@ -42,6 +51,20 @@ export default function (
 
             return {
                 ...state,
+
+                // to correct work we destruct root element
+                // to let know app that the structure has been updated
+                root: { ...state.root },
+
+                initialized: state.initialized || directory === '/',
+                fetching: false,
+            };
+        }
+        case ShareActionTypes.LOAD_SHARE_DATA_FAILED: {
+            return {
+                ...state,
+                fetching: false,
+                initialized: true,
             };
         }
         case BoundariesActionTypes.RESET_AFTER_ERROR: