web/satellite: close upload pop-up

This change closes that upload pop up when a different project or bucket is entered into, since clicking on objects in the pop-up that don't belong to the current project/bucket will result in an error.

Change-Id: I6a929566f0cee97fcf2e230e5a0453b4ebf29a4a

web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue

@@ -47,6 +47,8 @@ import { useNotify } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useConfigStore } from '@/store/modules/configStore';
 import { MODALS } from '@/utils/constants/appStatePopUps';
+import { useProjectsStore } from '@/store/modules/projectsStore';
+import { useBucketsStore } from '@/store/modules/bucketsStore';
 
 import UploadItem from '@/components/modals/objectUpload/UploadItem.vue';
 
@@ -57,7 +59,9 @@ import FailedIcon from '@/../static/images/modals/objectUpload/failed.svg';
 
 const obStore = useObjectBrowserStore();
 const appStore = useAppStore();
+const bucketsStore = useBucketsStore();
 const notify = useNotify();
+const projectsStore = useProjectsStore();
 const config = useConfigStore();
 
 const isExpanded = ref<boolean>(false);
@@ -230,6 +234,20 @@ function startInterval(): void {
     interval.value = int;
 }
 
+watch(() => projectsStore.state.selectedProject, (value, oldValue) => {
+    if (value.id === oldValue.id || !appStore.state.isUploadingModal) {
+        return;
+    }
+    closeModal();
+});
+
+watch(() =>  bucketsStore.state.fileComponentBucketName, (value, oldValue) => {
+    if (value === oldValue || !appStore.state.isUploadingModal) {
+        return;
+    }
+    closeModal();
+});
+
 watch(() => objectsInProgress.value.length, () => {
     if (!interval.value) {
         startDate.value = Date.now();

web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue

@@ -23,7 +23,7 @@
                         <v-expansion-panel-title color="">
                             <span>{{ statusLabel }}</span>
                             <template v-if="isClosable" #actions>
-                                <v-icon icon="mdi-close" @click="v1AppStore.setUploadingModal(false)" />
+                                <v-icon icon="mdi-close" @click="closeDialog" />
                             </template>
                         </v-expansion-panel-title>
                         <v-progress-linear
@@ -268,13 +268,32 @@ function startInterval(): void {
     interval.value = int;
 }
 
+function closeDialog(): void {
+    obStore.clearUploading();
+    v1AppStore.setUploadingModal(false);
+}
+
 watch(() => objectsInProgress.value.length, () => {
     if (!interval.value) {
         startDate.value = Date.now();
         startInterval();
     }
 });
 
+watch(() => projectsStore.state.selectedProject, (value, oldValue) => {
+    if (value.id === oldValue.id || !isObjectsUploadModal.value) {
+        return;
+    }
+    closeDialog();
+});
+
+watch(bucketName, (value, oldValue) => {
+    if (value === oldValue || !isObjectsUploadModal.value) {
+        return;
+    }
+    closeDialog();
+});
+
 onMounted(() => {
     startInterval();
 });