Improve Export Applications modal

dashboard/package.json

@@ -7,7 +7,7 @@
     "node": ">=12"
   },
   "dependencies": {
-    "@rancher/shell": "^0.3.17",
+    "@rancher/shell": "^0.3.20",
     "core-js": "3.21.1",
     "css-loader": "6.7.3",
     "@types/lodash": "4.14.184",

dashboard/pkg/epinio/dialog/ExportAppDialog.vue

@@ -26,24 +26,34 @@ export default {
       required: true
     }
   },
+
   data() {
     return {
       config: {
         title:       this.t('promptRemove.title'),
         applyMode:   'export',
         applyAction: this.exportApplicationManifest,
       },
-      zipParts:        this.resources[0].applicationParts.filter((part) => part !== APPLICATION_PARTS.MANIFEST),
-      showProgressBar: false,
-      downloadingPart: null,
-      progressBar:     0,
-      colorStops:      { 0: '--primary', 100: '--primary' },
+      zipParts:           this.resources[0].applicationParts.filter((part) => part !== APPLICATION_PARTS.MANIFEST),
+      showProgressBar:    false,
+      downloadingPart:    null,
+      cancelTokenSources: {},
+      progressBar:        0,
+      colorStops:         { 0: '--primary', 100: '--primary' },
     };
   },
 
+  mounted() {
+    document.addEventListener('keyup', this.escapeHandler);
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('keyup', this.escapeHandler);
+  },
+
   methods: {
     async exportApplicationManifest() {
-      this.showProgressBar = true;
+      this.enableDownload();
       const resource = this.resources[0];
 
       const chartZip = async(files) => {
@@ -72,12 +82,21 @@ export default {
           [part]: await this.fetchPart(resource, part),
         }), Promise.resolve({}));
 
+        if (Object.values(partsData).some((part) => !part)) {
+          return;
+        }
+
         this.progressBar = 100;
         await chartZip(partsData);
       }
     },
 
+    getCancelToken() {
+      return this.$store.$axios.CancelToken;
+    },
+
     async fetchPart(resource, part) {
+      this.cancelTokenSources[part] = this.getCancelToken().source();
       this.downloadingPart = part;
 
       return await resource.fetchPart(
@@ -90,17 +109,63 @@ export default {
             if (total) {
               this.progressBar += Math.round((progressEvent.loaded * 100) / total) * partsWeight[part];
             }
-          }
-        });
+          },
+          cancelToken: this.cancelTokenSources[part].token
+        }).catch((thrown) => {
+        if (!this.$store.$axios.isCancel(thrown)) {
+          this.disableDownload();
+
+          // Override only messages of server errors
+          const message = thrown.message ?? this.t('epinio.applications.export.chartValuesImages.error', { part });
+
+          throw new Error(message);
+        }
+      });
+    },
+
+    fetchCancel() {
+      // Cancel pending api requests, see https://axios-http.com/docs/cancellation
+      Object.keys(this.cancelTokenSources).forEach((part) => this.cancelTokenSources[part].cancel(`${ part } part: download cancelled.`));
     },
+
+    close() {
+      if (this.$route.hash !== '#manifest') {
+        this.fetchCancel();
+      }
+      this.$emit('close');
+    },
+
+    escapeHandler(e) {
+      if (e.key === 'Escape') {
+        this.close();
+      }
+    },
+
+    resetErrors() {
+      if (this.$refs.genericPrompt) {
+        this.$refs.genericPrompt.errors = [];
+      }
+    },
+
+    enableDownload() {
+      this.resetErrors();
+      this.showProgressBar = true;
+    },
+
+    disableDownload() {
+      this.fetchCancel();
+      this.showProgressBar = false;
+      this.progressBar = 0;
+    }
   }
 };
 </script>
 
 <template>
   <GenericPrompt
+    ref="genericPrompt"
     v-bind="config"
-    @close="$emit('close')"
+    @close="close"
   >
     <h4
       slot="title"
@@ -110,7 +175,7 @@ export default {
     </h4>
 
     <template slot="body">
-      <Tabbed>
+      <Tabbed @changed="resetErrors">
         <Tab
           label-key="epinio.applications.export.manifest.title"
           name="manifest"

dashboard/pkg/epinio/l10n/en-us.yaml

@@ -165,6 +165,7 @@ epinio:
             values: Values
             chart: Chart
             image: Image
+        error: Server Error, download of { part } part failed.
 
     steps:
       basics:

dashboard/pkg/epinio/models/applications.js

@@ -580,8 +580,9 @@ export default class EpinioApplicationModel extends EpinioNamespacedResource {
   exportApp(resources = this) {
     this.$dispatch('promptModal', {
       resources,
-      component:  'ExportAppDialog',
-      modalWidth: '450px',
+      component:           'ExportAppDialog',
+      modalWidth:          '450px',
+      closeOnClickOutside: false,
     });
   }
 

dashboard/yarn.lock

@@ -2975,10 +2975,10 @@
   dependencies:
     lodash.debounce "4.0.8"
 
-"@rancher/shell@^0.3.17":
-  version "0.3.17"
-  resolved "https://registry.yarnpkg.com/@rancher/shell/-/shell-0.3.17.tgz#899200934880131ebd01a7bd8bd9704204afe26c"
-  integrity sha512-WlAJL73NsjOxwdqHrghy59K108nWLOldIObraWetLTQEiZGpV2TTMo9CRFeQLQaEdosM2sJoki/NGYyTDxeeEw==
+"@rancher/shell@^0.3.20":
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@rancher/shell/-/shell-0.3.20.tgz#6e9d30d5b6b6788fe3b3b029180f2fdefcb45c6c"
+  integrity sha512-Ux7vKtHohQ96DwK18gR0DZgmEfUEsMo4WrojTFzubVk9XRSOpnm2WOZJEH6SeYB0dTo6XbfhhpsVhfJGGrrBOg==
   dependencies:
     "@aws-sdk/client-ec2" "3.1.0"
     "@aws-sdk/client-eks" "3.1.0"