Opening update CS page sends infinite requests when CS id does not ex…

…ist (#7828)

=

changelog.d/20240430_115445_boris_fixed_infinite_loading_nonexisting_cs.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- Opening update CS page sends infinite requests when CS id does not exist
+  (<https://github.com/cvat-ai/cvat/pull/7828>)

cvat-ui/src/components/update-cloud-storage-page/update-cloud-storage-page.tsx

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect, useState } from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { Row, Col } from 'antd/lib/grid';
 import Spin from 'antd/lib/spin';
@@ -22,16 +22,23 @@ interface ParamType {
 export default function UpdateCloudStoragePageComponent(): JSX.Element {
     const dispatch = useDispatch();
     const cloudStorageId = +useParams<ParamType>().id;
-    const isFetching = useSelector((state: CombinedState) => state.cloudStorages.fetching);
-    const isInitialized = useSelector((state: CombinedState) => state.cloudStorages.initialized);
-    const cloudStorages = useSelector((state: CombinedState) => state.cloudStorages.current);
-    const [cloudStorage] = cloudStorages.filter((_cloudStorage) => _cloudStorage.id === cloudStorageId);
+    const [requested, setRequested] = useState(false);
+    const {
+        isFetching,
+        isInitialized,
+        cloudStorage,
+    } = useSelector((state: CombinedState) => ({
+        isFetching: state.cloudStorages.fetching,
+        isInitialized: state.cloudStorages.initialized,
+        cloudStorage: state.cloudStorages.current.find((_cloudStorage) => _cloudStorage.id === cloudStorageId),
+    }), shallowEqual);
 
     useEffect(() => {
-        if (!cloudStorage && !isFetching) {
+        if (!cloudStorage && !requested && !isFetching) {
+            setRequested(true);
             dispatch(getCloudStoragesAsync({ id: cloudStorageId }));
         }
-    }, [isFetching]);
+    }, [requested, cloudStorage, isFetching]);
 
     if (!cloudStorage && !isInitialized) {
         return <Spin size='large' className='cvat-spinner' />;
@@ -42,7 +49,7 @@ export default function UpdateCloudStoragePageComponent(): JSX.Element {
             <Result
                 className='cvat-not-found'
                 status='404'
-                title={`Sorry, but the cloud storage #${cloudStorageId} was not found`}
+                title='Sorry, but the requested cloud storage was not found'
                 subTitle='Please, be sure id you requested exists and you have appropriate permissions'
             />
         );