Merge pull request #2535 from posit-dev/dotnomad/selection-icons

Use icons with deployment selection details
posit-dev · Jan 16, 2025 · 743cc3c · 743cc3c
2 parents c37a077 + 8214c33
commit 743cc3c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git 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`"
         />
@@ -246,7 +246,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";
@@ -348,13 +348,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
@@ -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,11 +51,17 @@ defineProps<{
       .quick-pick-label-container {
         .quick-pick-label {
           font-weight: 600;
-          padding-bottom: 4px;
+          margin-bottom: 4px;
         }
       }
     }
 
+    &:not(:last-child) {
+      .quick-pick-detail {
+        margin-bottom: 2px;
+      }
+    }
+
     .quick-pick-icon {
       vertical-align: text-bottom;
       padding-right: 6px;
@@ -85,6 +100,10 @@ defineProps<{
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: pre;
+
+      .quick-pick-icon {
+        font-size: var(--vscode-font-size);
+      }
     }
   }
 }