Replace and fix some other areas of bad code

Signed-off-by: Tyler Critchlow <tylerdarincritchlow@gmail.com>

Author: tylercritchlow

pkg/rancher-desktop/pages/Volumes.vue

@@ -72,6 +72,8 @@ import SortableTable from '@pkg/components/SortableTable';
 import {ContainerEngine} from '@pkg/config/settings';
 import {ipcRenderer} from '@pkg/utils/ipcRenderer';
 
+const MAX_PATH_LENGTH = 40;
+
 export default Vue.extend({
   name:       'Volumes',
   title:      'Volumes',
@@ -121,7 +123,7 @@ export default Vue.extend({
         return {
           ...volume,
           volumeName: volume.Name,
-          created: volume.CreatedAt ? new Date(volume.Created).toLocaleDateString() : '',
+          created: volume.CreatedAt ? new Date(volume.CreatedAt).toLocaleDateString() : '',
           mountpoint: volume.Mountpoint || '',
           driver: volume.Driver || '',
           availableActions: [
@@ -139,20 +141,19 @@ export default Vue.extend({
               bulkAction: 'deleteVolume',
             },
           ],
-          deleteVolume: (...args) => {
-            this.deleteVolume(...(args?.length > 0 ? args : [volume]));
-          },
-          browseFiles: () => {
-            this.$router.push({name: 'volumes-files-name', params: {name: volume.Name}});
-          },
+          deleteVolume: this.createDeleteVolumeHandler(volume),
+          browseFiles: this.createBrowseFilesHandler(volume),
         };
       });
     },
-    isNerdCtl() {
+    isContainerdEngine() {
       return this.settings?.containerEngine?.name === ContainerEngine.CONTAINERD;
     },
+    isNerdCtl() {
+      return this.isContainerdEngine;
+    },
     supportsNamespaces() {
-      return this.settings?.containerEngine?.name === ContainerEngine.CONTAINERD;
+      return this.isContainerdEngine;
     },
     selectedNamespace() {
       return this.supportsNamespaces ? this.settings?.containers.namespace : undefined;
@@ -283,20 +284,24 @@ export default Vue.extend({
         console.error(`Error executing command ${command}`, error);
       }
     },
+    createDeleteVolumeHandler(volume) {
+      return (...args) => {
+        this.deleteVolume(...(args?.length > 0 ? args : [volume]));
+      };
+    },
+    createBrowseFilesHandler(volume) {
+      return () => {
+        this.$router.push({name: 'volumes-files-name', params: {name: volume.Name}});
+      };
+    },
     shortSha(sha) {
-      const prefix = 'sha256:';
-
-      if (sha && sha.startsWith(prefix)) {
-        const startIndex = sha.indexOf(prefix) + prefix.length;
-        const actualSha = sha.slice(startIndex);
-
-        return `${ sha.slice(0, startIndex) }${ actualSha.slice(0, 3) }..${ actualSha.slice(-3) }`;
-      }
+      if (!sha?.startsWith('sha256:')) return sha || '';
 
-      return sha || '';
+      const hash = sha.replace('sha256:', '');
+      return `sha256:${hash.slice(0, 3)}..${hash.slice(-3)}`;
     },
     shortPath(path) {
-      if (!path || path.length <= 40) {
+      if (!path || path.length <= MAX_PATH_LENGTH) {
         return path || '';
       }
 
@@ -308,7 +313,7 @@ export default Vue.extend({
       }
 
       // Show tooltip for sha256 hashes or long paths
-      if (text.startsWith('sha256:') || text.length > 40) {
+      if (text.startsWith('sha256:') || text.length > MAX_PATH_LENGTH) {
         return {content: text};
       }
 

pkg/rancher-desktop/pages/volumes/files/_name.vue

@@ -137,11 +137,11 @@ export default Vue.extend({
   computed: {
     ...mapGetters('k8sManager', {isK8sReady: 'isReady'}),
     volumeName() {
-      const name = this.$route.params.name;
-      if (!name || !/^[a-zA-Z0-9._-]+$/.test(name)) {
-        throw new Error('Invalid volume name format');
-      }
-      return name;
+      return this.$route.params.name || '';
+    },
+    isValidVolumeName() {
+      const name = this.volumeName;
+      return name && /^[a-zA-Z0-9._-]+$/.test(name);
     },
     hasNamespaceSelected() {
       return this.settings?.containerEngine?.name === ContainerEngine.CONTAINERD && this.settings?.containers?.namespace;
@@ -154,20 +154,29 @@ export default Vue.extend({
   },
   watch: {
     '$route.query.path': {
-      handler(newPath) {
+      async handler(newPath) {
         const path = newPath || '/';
         if (this.currentPath !== path) {
           this.currentPath = path;
           if (this.ddClient && this.volumeExists) {
             this.isLoading = true;
-            this.listFiles();
+            try {
+              await this.listFiles();
+            } catch (error) {
+              console.error('Error in path watcher:', error);
+            }
           }
         }
       },
       immediate: false
     }
   },
   mounted() {
+    if (!this.isValidVolumeName) {
+      this.error = this.t('volumes.files.invalidVolumeName', {name: this.volumeName});
+      return;
+    }
+
     this.$store.dispatch('page/setHeader', {
       title: this.t('volumes.files.title'),
       description: this.volumeName,
@@ -246,23 +255,28 @@ export default Vue.extend({
         );
 
         // Only treat stderr as an error if it's not a warning or pull progress
-        if (stderr &&
-          !stderr.includes('level=warning') &&
-          !stderr.includes('Pulling from') &&
-          !stderr.includes('Pull complete') &&
-          !stderr.includes('Downloaded') &&
-          !stderr.includes('Downloading') &&
-          !stderr.includes('Waiting') &&
-          !stderr.includes('Verifying') &&
-          !stderr.includes('Extracting')) {
+        const nonErrorPatterns = [
+          'level=warning', 'Pulling from', 'Pull complete',
+          'Downloaded', 'Downloading', 'Waiting', 'Verifying', 'Extracting'
+        ];
+        const isRealError = stderr && !nonErrorPatterns.some(pattern => stderr.includes(pattern));
+        if (isRealError) {
           throw new Error(stderr);
         }
 
         this.files = this.parseLsOutput(stdout);
         this.isLoading = false;
       } catch (error) {
+        const errorSources = [
+          error?.message,
+          error?.stderr,
+          error?.error,
+          typeof error === 'string' ? error : null,
+          'Failed to list files'
+        ];
+
         console.error('Error listing files:', error);
-        this.error = this.t('volumes.files.listError', {error: error.message});
+        this.error = this.t('volumes.files.listError', {error: errorSources.find(msg => msg)});
         this.isLoading = false;
       }
     },
@@ -330,31 +344,7 @@ export default Vue.extend({
         return 'icon icon-folder';
       }
 
-      const ext = file.name.split('.').pop().toLowerCase();
-      const iconMap = {
-        txt: 'icon-file-text',
-        log: 'icon-file-text',
-        json: 'icon-file-code',
-        yaml: 'icon-file-code',
-        yml: 'icon-file-code',
-        xml: 'icon-file-code',
-        html: 'icon-file-code',
-        js: 'icon-file-code',
-        ts: 'icon-file-code',
-        css: 'icon-file-code',
-        sh: 'icon-terminal',
-        bash: 'icon-terminal',
-        zip: 'icon-file-zip',
-        tar: 'icon-file-zip',
-        gz: 'icon-file-zip',
-        jpg: 'icon-image',
-        jpeg: 'icon-image',
-        png: 'icon-image',
-        gif: 'icon-image',
-        svg: 'icon-image',
-      };
-
-      return `icon ${iconMap[ext] || 'icon-file'}`;
+      return 'icon icon-file';
     },
     formatSize(bytes) {
       if (bytes === 0) return '0 B';