From 75d9ec18d4853419b34c3f34550c25444c6afc59 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Tue, 14 Jan 2025 14:46:10 -0800
Subject: [PATCH 1/2] Use icons with deployment selection details

---
 .../src/components/EvenEasierDeploy.vue       | 14 +++++------
 .../homeView/src/components/QuickPickItem.vue | 23 ++++++++++++++++---
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
index b7fd1c854..d198f3332 100644
--- a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
+++ b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
@@ -18,7 +18,7 @@
       <div class="deployment-control" v-on="{ click: onSelectDeployment }">
         <QuickPickItem
           :label="deploymentTitle"
-          :details="deploymentSubTitles"
+          :details="deploymentDetails"
           :title="toolTipText"
           :data-automation="`entrypoint-label`"
         />
@@ -241,7 +241,7 @@ import { filterConfigurationsToValidAndType } from "../../../../src/utils/filter
 import { useHostConduitService } from "src/HostConduitService";
 import { useHomeStore } from "src/stores/home";
 
-import QuickPickItem from "src/components/QuickPickItem.vue";
+import QuickPickItem, { IconDetail } from "src/components/QuickPickItem.vue";
 import ActionToolbar from "src/components/ActionToolbar.vue";
 import DeployButton from "src/components/DeployButton.vue";
 import TextStringWithAnchor from "./TextStringWithAnchor.vue";
@@ -343,13 +343,13 @@ const deploymentTitle = computed(() => {
   return result.title;
 });
 
-const deploymentSubTitles = computed(() => {
-  const subTitles: string[] = [];
-  subTitles.push(credentialSubTitle.value);
+const deploymentDetails = computed(() => {
+  const details: IconDetail[] = [];
+  details.push({ icon: "codicon-server", text: credentialSubTitle.value });
   if (entrypointSubTitle.value) {
-    subTitles.push(entrypointSubTitle.value);
+    details.push({ icon: "codicon-file", text: entrypointSubTitle.value });
   }
-  return subTitles;
+  return details;
 });
 
 const credentialSubTitle = computed(() => {
diff --git a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
index f191d929e..a98c960e1 100644
--- a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
+++ b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
@@ -12,16 +12,25 @@
       </div>
     </div>
     <div v-for="detail in details" class="quick-pick-row">
-      <span class="quick-pick-detail">{{ detail }}</span>
+      <div v-if="isIconDetail(detail)" class="quick-pick-detail">
+        <div class="quick-pick-icon codicon" :class="detail.icon" />
+        <span>{{ detail.text }}</span>
+      </div>
+      <span v-else class="quick-pick-detail">{{ detail }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+export type IconDetail = { icon: string; text: string };
+
+const isIconDetail = (detail: string | IconDetail): detail is IconDetail =>
+  typeof detail === "object" && "icon" in detail && "text" in detail;
+
 defineProps<{
   label: string;
   description?: string;
-  details: string[];
+  details: Array<string | IconDetail>;
   codicon?: string;
 }>();
 </script>
@@ -42,7 +51,7 @@ defineProps<{
       .quick-pick-label-container {
         .quick-pick-label {
           font-weight: 600;
-          padding-bottom: 4px;
+          margin-bottom: 4px;
         }
       }
     }
@@ -85,6 +94,14 @@ defineProps<{
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: pre;
+
+      &:not(:last-child) {
+        margin-bottom: 2px;
+      }
+
+      .quick-pick-icon {
+        font-size: var(--vscode-font-size);
+      }
     }
   }
 }

From 8214c33fc31a73b091c022127606699d94731d03 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Tue, 14 Jan 2025 16:57:46 -0800
Subject: [PATCH 2/2] Correct quick-pick-detail margin-bottom

---
 .../webviews/homeView/src/components/QuickPickItem.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
index a98c960e1..2a740209f 100644
--- a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
+++ b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
@@ -56,6 +56,12 @@ defineProps<{
       }
     }
 
+    &:not(:last-child) {
+      .quick-pick-detail {
+        margin-bottom: 2px;
+      }
+    }
+
     .quick-pick-icon {
       vertical-align: text-bottom;
       padding-right: 6px;
@@ -95,10 +101,6 @@ defineProps<{
       text-overflow: ellipsis;
       white-space: pre;
 
-      &:not(:last-child) {
-        margin-bottom: 2px;
-      }
-
       .quick-pick-icon {
         font-size: var(--vscode-font-size);
       }