Merge branch 'main' into sagerb-support-dismissed-deployment

posit-dev · Jan 16, 2025 · 4637edc · 4637edc
2 parents 03d4bda + 743cc3c
commit 4637edc
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 38 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`"
         />
@@ -124,37 +124,42 @@
     >
       <vscode-divider class="home-view-divider" />
 
-      <div v-if="home.publishInProgress">
-        <div class="deployment-in-progress-container">
-          <div class="progress-container">
-            <vscode-progress-ring class="progress-ring" />
-            <div class="progress-desc">
-              <div data-automation="deployment-progress">
-                Deployment in Progress...
-              </div>
-              <p class="progress-log-anchor">
-                <a
-                  class="webview-link"
-                  role="button"
-                  @click="onViewPublishingLog"
-                  >View Log</a
+      <div
+        v-if="home.publishInProgress"
+        class="deployment-in-progress-container"
+      >
+        <vscode-progress-ring class="progress-ring" />
+        <div class="flex-grow">
+          <div class="deployment-summary-container">
+            <div class="progress-container">
+              <div class="progress-desc">
+                <h4
+                  data-automation="deployment-progress"
+                  class="deployment-summary-title"
                 >
-              </p>
+                  Deployment in Progress...
+                </h4>
+              </div>
             </div>
+            <ActionToolbar
+              title="Logs"
+              :actions="[]"
+              :context-menu="contextMenuVSCodeContext"
+            />
           </div>
-          <ActionToolbar
-            title="Logs"
-            :actions="[]"
-            :context-menu="contextMenuVSCodeContext"
-          />
+          <p class="progress-log-anchor">
+            <a class="webview-link" role="button" @click="onViewPublishingLog">
+              View Log
+            </a>
+          </p>
         </div>
       </div>
       <div v-else>
         <div
           class="deployment-summary-container"
           data-automation="deploy-status"
         >
-          <h4 class="deployment-summary">
+          <h4 class="deployment-summary-title">
             {{ lastStatusDescription }}
           </h4>
           <ActionToolbar
@@ -248,7 +253,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";
@@ -350,13 +355,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(() => {
@@ -557,13 +562,10 @@ const viewContent = () => {
 
 .deployment-in-progress-container {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .deployment-summary-container {
   display: flex;
-  align-items: center;
   justify-content: space-between;
   align-items: baseline;
 }
@@ -610,7 +612,8 @@ const viewContent = () => {
   margin-top: 1.33em;
 }
 
-.deployment-summary {
+.deployment-summary-title {
+  margin-block-start: 1.33em;
   margin-bottom: 5px;
 }
 
@@ -649,10 +652,11 @@ const viewContent = () => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-top: 10px;
 }
 
 .progress-ring {
+  flex-grow: 0;
+  margin-top: 1.33em;
   margin-right: 10px;
 }
 
@@ -663,7 +667,7 @@ const viewContent = () => {
 }
 
 .progress-log-anchor {
-  margin-top: 5px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 </style>
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);
+      }
     }
   }
 }

diff --git a/extensions/vscode/webviews/homeView/src/style.css b/extensions/vscode/webviews/homeView/src/style.css
@@ -22,6 +22,14 @@ body {
   width: 100%;
 }
 
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
 .text-sm {
   font-size: 11px;
 }