Merge pull request #2294 from posit-dev/sagerb-increase-prominence-of…

…-entrypoint Update QuickPickItem and EvenEasierDeploy to show entrypoint more prominently.
posit-dev · Sep 24, 2024 · da36fad · da36fad
2 parents fbe9982 + 8f215ba
commit da36fad
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 60 deletions.
diff --git a/extensions/vscode/src/types/messages/hostToWebviewMessages.ts b/extensions/vscode/src/types/messages/hostToWebviewMessages.ts
@@ -27,6 +27,7 @@ export enum HostToWebviewMessageType {
   UPDATE_R_PACKAGES = "updateRPackages",
   SHOW_DISABLE_OVERLAY = "showDisableOverlay",
   HIDE_DISABLE_OVERLAY = "hideDisableOverlay",
+  SET_PATH_SEPARATOR = "setPathSeparator",
 }
 
 export type AnyHostToWebviewMessage<
@@ -53,7 +54,8 @@ export type HostToWebviewMessage =
   | UpdatePythonPackages
   | UpdateRPackages
   | ShowDisableOverlayMsg
-  | HideDisableOverlayMsg;
+  | HideDisableOverlayMsg
+  | SetPathSeparatorMsg;
 
 export function isHostToWebviewMessage(msg: any): msg is HostToWebviewMessage {
   return (
@@ -70,7 +72,8 @@ export function isHostToWebviewMessage(msg: any): msg is HostToWebviewMessage {
     msg.kind === HostToWebviewMessageType.UPDATE_PYTHON_PACKAGES ||
     msg.kind === HostToWebviewMessageType.UPDATE_R_PACKAGES ||
     msg.kind === HostToWebviewMessageType.SHOW_DISABLE_OVERLAY ||
-    msg.kind === HostToWebviewMessageType.HIDE_DISABLE_OVERLAY
+    msg.kind === HostToWebviewMessageType.HIDE_DISABLE_OVERLAY ||
+    msg.kind === HostToWebviewMessageType.SET_PATH_SEPARATOR
   );
 }
 
@@ -152,3 +155,10 @@ export type ShowDisableOverlayMsg =
 
 export type HideDisableOverlayMsg =
   AnyHostToWebviewMessage<HostToWebviewMessageType.HIDE_DISABLE_OVERLAY>;
+
+export type SetPathSeparatorMsg = AnyHostToWebviewMessage<
+  HostToWebviewMessageType.SET_PATH_SEPARATOR,
+  {
+    separator: string;
+  }
+>;
diff --git a/extensions/vscode/src/views/homeView.ts b/extensions/vscode/src/views/homeView.ts
@@ -277,6 +277,15 @@ export class HomeViewProvider implements WebviewViewProvider, Disposable {
   }
 
   private async onInitializingMsg() {
+    // inform webview of the platform specific path separator
+    // (path package is a node library, wrapper for browser doesn't seem to work in webview correctly)
+    this.webviewConduit.sendMsg({
+      kind: HostToWebviewMessageType.SET_PATH_SEPARATOR,
+      content: {
+        separator: path.sep,
+      },
+    });
+
     // send back the data needed. Optimize request for initialization...
     await this.refreshAll(false, true);
     this.setInitializationContext(HomeViewInitialized.initialized);
@@ -1076,15 +1085,26 @@ export class HomeViewProvider implements WebviewViewProvider, Disposable {
         }
 
         let details = [];
-        if (!isRelativePathRoot(contentRecord.projectDir)) {
-          details.push(`${contentRecord.projectDir}${path.sep}`);
-        }
         if (credential?.name) {
           details.push(credential.name);
         } else {
           details.push(`Missing Credential for ${contentRecord.serverUrl}`);
           problem = true;
         }
+
+        if (isRelativePathRoot(contentRecord.projectDir)) {
+          if (config && !isConfigurationError(config)) {
+            details.push(config.configuration.entrypoint);
+          }
+        } else {
+          if (config && !isConfigurationError(config)) {
+            details.push(
+              `${contentRecord.projectDir}${path.sep}${config.configuration.entrypoint}`,
+            );
+          } else {
+            details.push(`${contentRecord.projectDir}${path.sep}`);
+          }
+        }
         const detail = details.join(" • ");
 
         let lastMatch =

diff --git a/extensions/vscode/webviews/homeView/package-lock.json b/extensions/vscode/webviews/homeView/package-lock.json
diff --git a/extensions/vscode/webviews/homeView/src/HostConduitService.ts b/extensions/vscode/webviews/homeView/src/HostConduitService.ts
@@ -13,6 +13,7 @@ import {
   UpdatePythonPackages,
   UpdateRPackages,
   RefreshFilesMsg,
+  SetPathSeparatorMsg,
 } from "../../../src/types/messages/hostToWebviewMessages";
 import {
   WebviewToHostMessage,
@@ -83,11 +84,17 @@ const onMessageFromHost = (msg: HostToWebviewMessage): void => {
       return onShowDisableOverlayMsg();
     case HostToWebviewMessageType.HIDE_DISABLE_OVERLAY:
       return onHideDisableOverlayMsg();
+    case HostToWebviewMessageType.SET_PATH_SEPARATOR:
+      return onSetPathSeparatorMsg(msg);
     default:
       console.warn(`unexpected command: ${JSON.stringify(msg)}`);
   }
 };
 
+const onSetPathSeparatorMsg = (msg: SetPathSeparatorMsg) => {
+  useHomeStore().platformFileSeparator = msg.content.separator;
+};
+
 const onInitializingRequestCompleteMsg = () => {
   useHomeStore().initializingRequestComplete = true;
 };

diff --git a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
@@ -18,33 +18,16 @@
       <div class="deployment-control" v-on="{ click: onSelectDeployment }">
         <QuickPickItem
           :label="deploymentTitle"
-          :detail="deploymentSubTitle"
+          :details="deploymentSubTitles"
           :title="toolTipText"
+          :data-automation="`entrypoint-label`"
         />
         <div
           class="select-indicator codicon codicon-chevron-down"
           aria-hidden="true"
         />
       </div>
 
-      <div
-        v-if="
-          home.selectedConfiguration &&
-          !isConfigurationError(home.selectedConfiguration) &&
-          home.selectedConfiguration?.configuration?.entrypoint
-        "
-        class="deployment-details-container"
-      >
-        <div class="deployment-details-row">
-          <span
-            class="deployment-details-label"
-            data-automation="entrypoint-label"
-            >{{ home.selectedConfiguration.configuration.entrypoint }}</span
-          >
-          <span class="deployment-details-info"> (selected as entrypoint)</span>
-        </div>
-      </div>
-
       <p v-if="isConfigEntryMissing">
         No Config Entry in Deployment record -
         {{ home.selectedContentRecord?.saveName }}.
@@ -84,7 +67,7 @@
     <div v-else class="deployment-control" v-on="{ click: onSelectDeployment }">
       <QuickPickItem
         label="Select..."
-        detail="(new or existing)"
+        :details="['(new or existing)']"
         data-automation="select-deployment"
       />
       <div
@@ -191,8 +174,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-
+import { computed } from "vue";
 import {
   Configuration,
   isPreContentRecord,
@@ -338,13 +320,43 @@ const deploymentTitle = computed(() => {
   return result.title;
 });
 
-const deploymentSubTitle = computed(() => {
+const deploymentSubTitles = computed(() => {
+  const subTitles: string[] = [];
+  subTitles.push(credentialSubTitle.value);
+  if (entrypointSubTitle.value) {
+    subTitles.push(entrypointSubTitle.value);
+  }
+  return subTitles;
+});
+
+const credentialSubTitle = computed(() => {
   if (home.serverCredential?.name) {
     return `${home.serverCredential.name}`;
   }
   return `Missing Credential for ${home.selectedContentRecord?.serverUrl}`;
 });
 
+const entrypointSubTitle = computed(() => {
+  if (
+    home.selectedConfiguration &&
+    !isConfigurationError(home.selectedConfiguration)
+  ) {
+    const contentRecord = home.selectedContentRecord;
+    const config = home.selectedConfiguration;
+    if (contentRecord) {
+      let subTitle = "";
+      if (contentRecord.projectDir !== ".") {
+        subTitle = `${contentRecord.projectDir}${home.platformFileSeparator}`;
+      }
+      if (!isConfigInError.value) {
+        subTitle += config.configuration.entrypoint;
+      }
+      return subTitle;
+    }
+  }
+  return "ProjectDir and Entrypoint not determined";
+});
+
 const isCredentialMissing = computed((): boolean => {
   return Boolean(home.selectedContentRecord && !home.serverCredential);
 });
@@ -385,11 +397,20 @@ const isPreContentRecordWithoutID = computed(() => {
 });
 
 const toolTipText = computed(() => {
+  let entrypoint = "unknown";
+  if (
+    home.selectedConfiguration &&
+    !isConfigurationError(home.selectedConfiguration) &&
+    home.selectedConfiguration.configuration.entrypoint
+  ) {
+    entrypoint = home.selectedConfiguration.configuration.entrypoint;
+  }
   return `Deployment Details
 - Deployment Record: ${home.selectedContentRecord?.saveName || "<undefined>"}
 - Configuration File: ${home.selectedConfiguration?.configurationName || "<undefined>"}
 - Credential In Use: ${home.serverCredential?.name || "<undefined>"}
 - Project Dir: ${home.selectedContentRecord?.projectDir || "<undefined>"}
+- Entrypoint: ${entrypoint}
 - Server URL: ${home.serverCredential?.url || "<undefined>"}`;
 });
 
@@ -552,31 +573,4 @@ const viewContent = () => {
   margin-top: 5px;
   margin-bottom: 0px;
 }
-
-.deployment-details-container {
-  margin-bottom: 0.5rem;
-
-  .deployment-details-row {
-    display: flex;
-    align-items: center;
-
-    .deployment-details-label {
-      font-size: 0.9em;
-      line-height: normal;
-      opacity: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: pre;
-    }
-
-    .deployment-details-info {
-      font-size: 0.8em;
-      line-height: normal;
-      opacity: 0.7;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: pre;
-    }
-  }
-}
 </style>
diff --git a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
@@ -11,7 +11,7 @@
         </span>
       </div>
     </div>
-    <div class="quick-pick-row">
+    <div v-for="detail in details" class="quick-pick-row">
       <span class="quick-pick-detail">{{ detail }}</span>
     </div>
   </div>
@@ -21,7 +21,7 @@
 defineProps<{
   label: string;
   description?: string;
-  detail: string;
+  details: string[];
   codicon?: string;
 }>();
 </script>

diff --git a/extensions/vscode/webviews/homeView/src/stores/home.ts b/extensions/vscode/webviews/homeView/src/stores/home.ts
@@ -18,6 +18,7 @@ import { DeploymentSelector } from "../../../../src/types/shared";
 import { splitFilesOnInclusion } from "src/utils/files";
 
 export const useHomeStore = defineStore("home", () => {
+  const platformFileSeparator = ref<string>("/");
   const publishInProgress = ref(false);
 
   const contentRecords = ref<(ContentRecord | PreContentRecord)[]>([]);
@@ -232,6 +233,7 @@ export const useHomeStore = defineStore("home", () => {
   });
 
   return {
+    platformFileSeparator,
     showDisabledOverlay,
     publishInProgress,
     contentRecords,

diff --git a/test/vscode-ui/test/specs/nested-fastapi-deployment.spec.ts b/test/vscode-ui/test/specs/nested-fastapi-deployment.spec.ts
@@ -53,7 +53,7 @@ describe("Nested Fast API Deployment", () => {
     // switch out of iframe
     await browser.switchToFrame(null);
     const myConfig = browser.$(
-      `aria/my fastapi app, fastapi-simple${sep} • my connect server, Existing`,
+      `aria/my connect server • fastapi-simple${sep}simple.py`,
     );
     await expect(myConfig).toExist();
     myConfig.click();
@@ -94,7 +94,8 @@ describe("Nested Fast API Deployment", () => {
 
   it("can confirm Deployment Details", async () => {
     const deploymentName = await $('[data-automation="entrypoint-label"]');
-    await expect(deploymentName).toHaveText("simple.py");
+    const deploymentDetails = `my fastapi app\nmy connect server\nfastapi-simple${sep}simple.py`;
+    await expect(deploymentName).toHaveText(deploymentDetails);
   });
 
   it("can confirm Deployment Status", async () => {