From 096f27ff94d25947d395dc463144085eb56f9677 Mon Sep 17 00:00:00 2001
From: Vikalp Rusia <vikalprusia@gmail.com>
Date: Thu, 3 Oct 2024 13:05:22 +0530
Subject: [PATCH 1/4] Trim image when the event is raised

Signed-off-by: Vikalp Rusia <vikalprusia@gmail.com>
---
 pkg/rancher-desktop/components/ImagesFormAdd.vue | 2 +-
 pkg/rancher-desktop/pages/images/add.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/rancher-desktop/components/ImagesFormAdd.vue b/pkg/rancher-desktop/components/ImagesFormAdd.vue
index bf05eef8606..7164028fc1c 100644
--- a/pkg/rancher-desktop/components/ImagesFormAdd.vue
+++ b/pkg/rancher-desktop/components/ImagesFormAdd.vue
@@ -74,7 +74,7 @@ export default Vue.extend({
 
   methods: {
     submit() {
-      this.$emit('click', { action: this.action, image: this.image });
+      this.$emit('click', { action: this.action, image: this.image.trim() });
     },
   },
 });
diff --git a/pkg/rancher-desktop/pages/images/add.vue b/pkg/rancher-desktop/pages/images/add.vue
index 9749811b1d1..76e0f06560e 100644
--- a/pkg/rancher-desktop/pages/images/add.vue
+++ b/pkg/rancher-desktop/pages/images/add.vue
@@ -90,7 +90,7 @@ export default {
       this.imageOutputCuller = getImageOutputCuller(command);
     },
     doImageAction({ action, image }) {
-      this.imageToPull = image.trim();
+      this.imageToPull = image;
       if (action === 'pull') {
         this.doPullAnImage();
       }

From 9cdaf4156a95cd0951e16cc86560660fbb25f57a Mon Sep 17 00:00:00 2001
From: Vikalp Rusia <vikalprusia@gmail.com>
Date: Fri, 4 Oct 2024 00:36:05 +0530
Subject: [PATCH 2/4] Added flag for opening/closing of status bar using events

Signed-off-by: Vikalp Rusia <vikalprusia@gmail.com>
---
 .../components/BackendProgress.vue            |  5 ++-
 .../components/NetworkStatus.vue              | 10 ++++--
 pkg/rancher-desktop/components/StatusBar.vue  | 14 +++++++-
 .../components/StatusBarItem.vue              | 36 ++++++++++++++++---
 pkg/rancher-desktop/components/Version.vue    |  8 ++++-
 5 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/pkg/rancher-desktop/components/BackendProgress.vue b/pkg/rancher-desktop/components/BackendProgress.vue
index 3e95aaff4ed..39aaabf67e7 100644
--- a/pkg/rancher-desktop/components/BackendProgress.vue
+++ b/pkg/rancher-desktop/components/BackendProgress.vue
@@ -58,7 +58,9 @@ class BackendProgress extends Vue {
   }
 
   get progressBusy(): boolean {
-    return this.progressIndeterminate || this.progress.current < this.progress.max;
+    const busy= this.progressIndeterminate || this.progress.current < this.progress.max;
+    this.$emit('progressBarisOpen', busy);
+    return busy;
   }
 
   /** Return a string describing the elapsed time or progress. */
@@ -129,6 +131,7 @@ export default BackendProgress;
     white-space: nowrap;
     align-items: center;
     flex: 1;
+    background-color: aqua;
 
     .details {
       text-align: end;
diff --git a/pkg/rancher-desktop/components/NetworkStatus.vue b/pkg/rancher-desktop/components/NetworkStatus.vue
index b09513d9f37..51dd7c5d703 100644
--- a/pkg/rancher-desktop/components/NetworkStatus.vue
+++ b/pkg/rancher-desktop/components/NetworkStatus.vue
@@ -14,6 +14,10 @@ export default Vue.extend({
       type:    Boolean,
       default: false,
     },
+    isProgressBarVisible: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return { networkStatus: true };
@@ -63,15 +67,17 @@ export default Vue.extend({
     <i
       v-if="icon"
       class="item-icon"
-      :class="icon"
+      :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
     />
     <span
       class="item-label"
+      :class="{'make-label-invisible': isProgressBarVisible}"
     >
       <b>{{ t('product.networkStatus') }}:</b>
     </span>
     <span
       class="item-value"
+      :class="{'make-value-invisible': isProgressBarVisible}"
     >
       {{ networkStatusLabel }}
     </span>
@@ -97,7 +103,7 @@ export default Vue.extend({
     }
   }
 
-  @media (max-width: 900px) {
+  @media (max-width: 450px) {
     .icon-dot {
       vertical-align: top;
       padding: 0;
diff --git a/pkg/rancher-desktop/components/StatusBar.vue b/pkg/rancher-desktop/components/StatusBar.vue
index 2469dd09770..8163f6ed775 100644
--- a/pkg/rancher-desktop/components/StatusBar.vue
+++ b/pkg/rancher-desktop/components/StatusBar.vue
@@ -55,6 +55,16 @@ export default Vue.extend({
       ];
     },
   },
+  data() {
+    return {
+      isProgressBarVisible: false,
+    };
+  },
+  methods:{
+    updateProgressBarVisiblity(isOpen: boolean) {
+      this.isProgressBarVisible = isOpen;
+    }
+  },
 });
 </script>
 
@@ -69,13 +79,14 @@ export default Vue.extend({
           :sub-component="item.component"
           :data="item.data"
           :icon="item.icon"
+          :isProgressBarVisible="isProgressBarVisible"
           class="status-bar-item"
         >
         </status-bar-item>
       </template>
     </div>
     <div class="right-column">
-      <BackendProgress class="progress" />
+      <BackendProgress id="right" class="progress" @progressBarisOpen="updateProgressBarVisiblity"/>
     </div>
   </footer>
 </template>
@@ -98,6 +109,7 @@ footer {
     display: flex;
     justify-content: flex-end;
     flex: 1;
+    background-color: purple;
   }
 
   .status-bar-item {
diff --git a/pkg/rancher-desktop/components/StatusBarItem.vue b/pkg/rancher-desktop/components/StatusBarItem.vue
index ef8ded8ff7c..9830a3768d6 100644
--- a/pkg/rancher-desktop/components/StatusBarItem.vue
+++ b/pkg/rancher-desktop/components/StatusBarItem.vue
@@ -26,6 +26,10 @@ export default Vue.extend({
       type:     String,
       required: true,
     },
+    isProgressBarVisible: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     getSubComponent(): VueConstructor | undefined {
@@ -61,20 +65,23 @@ export default Vue.extend({
       <img
         v-if="isSvgIcon"
         class="item-icon icon-svg"
+        :class="{'make-icon-inline': isProgressBarVisible}"
         :src="svgIconPath"
       >
       <i
         v-else
         class="item-icon"
-        :class="icon"
-      />
+        :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
+        />
       <span
         class="item-label"
+        :class="{'make-label-invisible': isProgressBarVisible}"
       >
         <b>{{ t(data.label.bar) }}:</b>
       </span>
       <span
         class="item-value"
+        :class="{'make-value-invisible': isProgressBarVisible}"
       >
         {{ data.value }}
       </span>
@@ -84,6 +91,7 @@ export default Vue.extend({
       v-if="subComponent"
       :icon="icon"
       :is-status-bar-item="true"
+      :isProgressBarVisible="isProgressBarVisible"
     ></component>
   </div>
 </template>
@@ -108,7 +116,7 @@ export default Vue.extend({
     }
   }
 
-  @media (max-width: 1000px) {
+  @media (max-width: 500px) {
     .item-label, ::v-deep .item-label {
       display: none;
     }
@@ -118,7 +126,7 @@ export default Vue.extend({
     }
   }
 
-  @media (max-width: 900px) {
+  @media (max-width: 450px) {
     .item-value, ::v-deep .item-value {
       display: none;
     }
@@ -127,5 +135,25 @@ export default Vue.extend({
       display: inline;
     }
   }
+
+  @media (max-width: 1000px) {
+    .make-label-invisible, ::v-deep .make-label-invisible {
+      display: none;
+    }
+
+    .make-icon-inline, ::v-deep .make-icon-inline {
+      display: inline;
+    }
+  }
+
+  @media (max-width: 900px) {
+    .make-value-invisible, ::v-deep .make-value-invisible {
+      display: none;
+    }
+
+    .make-icon-inline, ::v-deep .make-icon-inline {
+      display: inline;
+    }
+  }
 }
 </style>
diff --git a/pkg/rancher-desktop/components/Version.vue b/pkg/rancher-desktop/components/Version.vue
index 5d7f2710a73..02a11108bbb 100644
--- a/pkg/rancher-desktop/components/Version.vue
+++ b/pkg/rancher-desktop/components/Version.vue
@@ -12,6 +12,10 @@ export default Vue.extend({
       type:    Boolean,
       default: false,
     },
+    isProgressBarVisible: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return { version: this.t('product.versionChecking') };
@@ -42,15 +46,17 @@ export default Vue.extend({
     <i
       v-if="icon"
       class="item-icon"
-      :class="icon"
+      :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
     />
     <span
       class="item-label"
+      :class="{'make-label-invisible': isProgressBarVisible}"
     >
       <b>{{ t('product.version') }}:</b>
     </span>
     <span
       class="item-value"
+      :class="{'make-value-invisible': isProgressBarVisible}"
     >
       {{ version }}
     </span>

From ba1ef598fe3fc803490c3bb16eeedf3f6f412188 Mon Sep 17 00:00:00 2001
From: Vikalp Rusia <vikalprusia@gmail.com>
Date: Fri, 4 Oct 2024 00:45:13 +0530
Subject: [PATCH 3/4] refactored code

Signed-off-by: Vikalp Rusia <vikalprusia@gmail.com>
---
 .../components/BackendProgress.vue            |  5 +++--
 .../components/NetworkStatus.vue              |  2 +-
 pkg/rancher-desktop/components/StatusBar.vue  | 19 ++++++++-----------
 .../components/StatusBarItem.vue              |  6 +++---
 pkg/rancher-desktop/components/Version.vue    |  2 +-
 5 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/pkg/rancher-desktop/components/BackendProgress.vue b/pkg/rancher-desktop/components/BackendProgress.vue
index 39aaabf67e7..2d39987754a 100644
--- a/pkg/rancher-desktop/components/BackendProgress.vue
+++ b/pkg/rancher-desktop/components/BackendProgress.vue
@@ -58,8 +58,10 @@ class BackendProgress extends Vue {
   }
 
   get progressBusy(): boolean {
-    const busy= this.progressIndeterminate || this.progress.current < this.progress.max;
+    const busy = this.progressIndeterminate || this.progress.current < this.progress.max;
+
     this.$emit('progressBarisOpen', busy);
+
     return busy;
   }
 
@@ -131,7 +133,6 @@ export default BackendProgress;
     white-space: nowrap;
     align-items: center;
     flex: 1;
-    background-color: aqua;
 
     .details {
       text-align: end;
diff --git a/pkg/rancher-desktop/components/NetworkStatus.vue b/pkg/rancher-desktop/components/NetworkStatus.vue
index 51dd7c5d703..e1cbb5644b9 100644
--- a/pkg/rancher-desktop/components/NetworkStatus.vue
+++ b/pkg/rancher-desktop/components/NetworkStatus.vue
@@ -15,7 +15,7 @@ export default Vue.extend({
       default: false,
     },
     isProgressBarVisible: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
   },
diff --git a/pkg/rancher-desktop/components/StatusBar.vue b/pkg/rancher-desktop/components/StatusBar.vue
index 8163f6ed775..ef0c6cdaa40 100644
--- a/pkg/rancher-desktop/components/StatusBar.vue
+++ b/pkg/rancher-desktop/components/StatusBar.vue
@@ -14,7 +14,10 @@ type BarItem = {
 
 export default Vue.extend({
   components: { BackendProgress, StatusBarItem },
-  computed:   {
+  data() {
+    return { isProgressBarVisible: false };
+  },
+  computed: {
     ...mapGetters('preferences', ['getPreferences']),
     kubernetesVersion(): string {
       return this.getPreferences.kubernetes.version;
@@ -55,15 +58,10 @@ export default Vue.extend({
       ];
     },
   },
-  data() {
-    return {
-      isProgressBarVisible: false,
-    };
-  },
-  methods:{
+  methods: {
     updateProgressBarVisiblity(isOpen: boolean) {
       this.isProgressBarVisible = isOpen;
-    }
+    },
   },
 });
 </script>
@@ -79,14 +77,14 @@ export default Vue.extend({
           :sub-component="item.component"
           :data="item.data"
           :icon="item.icon"
-          :isProgressBarVisible="isProgressBarVisible"
+          :is-progress-bar-visible="isProgressBarVisible"
           class="status-bar-item"
         >
         </status-bar-item>
       </template>
     </div>
     <div class="right-column">
-      <BackendProgress id="right" class="progress" @progressBarisOpen="updateProgressBarVisiblity"/>
+      <BackendProgress id="right" class="progress" @progressBarisOpen="updateProgressBarVisiblity" />
     </div>
   </footer>
 </template>
@@ -109,7 +107,6 @@ footer {
     display: flex;
     justify-content: flex-end;
     flex: 1;
-    background-color: purple;
   }
 
   .status-bar-item {
diff --git a/pkg/rancher-desktop/components/StatusBarItem.vue b/pkg/rancher-desktop/components/StatusBarItem.vue
index 9830a3768d6..c42b87afa5b 100644
--- a/pkg/rancher-desktop/components/StatusBarItem.vue
+++ b/pkg/rancher-desktop/components/StatusBarItem.vue
@@ -27,7 +27,7 @@ export default Vue.extend({
       required: true,
     },
     isProgressBarVisible: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
   },
@@ -72,7 +72,7 @@ export default Vue.extend({
         v-else
         class="item-icon"
         :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
-        />
+      />
       <span
         class="item-label"
         :class="{'make-label-invisible': isProgressBarVisible}"
@@ -91,7 +91,7 @@ export default Vue.extend({
       v-if="subComponent"
       :icon="icon"
       :is-status-bar-item="true"
-      :isProgressBarVisible="isProgressBarVisible"
+      :is-progress-bar-visible="isProgressBarVisible"
     ></component>
   </div>
 </template>
diff --git a/pkg/rancher-desktop/components/Version.vue b/pkg/rancher-desktop/components/Version.vue
index 02a11108bbb..9982807ee1b 100644
--- a/pkg/rancher-desktop/components/Version.vue
+++ b/pkg/rancher-desktop/components/Version.vue
@@ -13,7 +13,7 @@ export default Vue.extend({
       default: false,
     },
     isProgressBarVisible: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
   },

From 1bfab2b3f69365e7e8500f990a4471b249e1c72b Mon Sep 17 00:00:00 2001
From: Vikalp Rusia <vikalprusia@gmail.com>
Date: Fri, 4 Oct 2024 01:05:17 +0530
Subject: [PATCH 4/4] Fix spelling

Signed-off-by: Vikalp Rusia <vikalprusia@gmail.com>
---
 pkg/rancher-desktop/components/StatusBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/rancher-desktop/components/StatusBar.vue b/pkg/rancher-desktop/components/StatusBar.vue
index ef0c6cdaa40..adf7cd010a5 100644
--- a/pkg/rancher-desktop/components/StatusBar.vue
+++ b/pkg/rancher-desktop/components/StatusBar.vue
@@ -59,7 +59,7 @@ export default Vue.extend({
     },
   },
   methods: {
-    updateProgressBarVisiblity(isOpen: boolean) {
+    updateProgressBarVisibility(isOpen: boolean) {
       this.isProgressBarVisible = isOpen;
     },
   },
@@ -84,7 +84,7 @@ export default Vue.extend({
       </template>
     </div>
     <div class="right-column">
-      <BackendProgress id="right" class="progress" @progressBarisOpen="updateProgressBarVisiblity" />
+      <BackendProgress id="right" class="progress" @progressBarisOpen="updateProgressBarVisibility" />
     </div>
   </footer>
 </template>