Merge pull request #802 from posit-dev/dotnomad/p-link

Create PLink component for handling web and VSCode router links

web/src/components/AppHeader.vue

@@ -5,8 +5,8 @@
     <q-toolbar class="publisher-layout">
       <AppMenu />
       <q-toolbar-title>
-        <router-link
-          class="posit-logo-link"
+        <PLink
+          class="posit-logo-link text-white"
           :to="{ name: 'root' }"
         >
           <WhitePositLogo
@@ -16,7 +16,7 @@
             alt="Posit PBC Logo"
           />
           <span class="q-pl-xs">Publisher</span>
-        </router-link>
+        </PLink>
       </q-toolbar-title>
       <q-btn
         flat
@@ -29,10 +29,9 @@
 </template>
 
 <script setup lang="ts">
-
 import AppMenu from 'src/components/AppMenu.vue';
+import PLink from 'src/components/PLink.vue';
 import WhitePositLogo from 'src/components/icons/WhitePositLogo.vue';
-
 </script>
 
 <style scoped lang="scss">
@@ -43,7 +42,6 @@ import WhitePositLogo from 'src/components/icons/WhitePositLogo.vue';
 
 .posit-logo-link {
   text-decoration: none;
-  color: white;
 
   & > * {
     vertical-align: middle;

web/src/components/PCard.vue

@@ -5,51 +5,48 @@
     class="p-card focus-shadow truncate"
     :class="{ hoverable: to }"
   >
-    <component
-      :is="to ? RouterLink : 'div'"
-      :to="to"
-    >
-      <span
-        v-if="to"
-        class="link-fill"
-        aria-hidden="true"
+    <div class="card-header flex no-wrap items-center">
+      <q-icon
+        v-if="icon"
+        :name="icon"
+        size="20px"
+        class="q-mr-sm"
       />
 
-      <div class="card-header flex no-wrap items-center">
-        <q-icon
-          v-if="icon"
-          :name="icon"
-          size="20px"
-          class="q-mr-sm"
-        />
-
-        <h3
-          v-if="title"
-          class="card-title truncate"
-        >
-          {{ title }}
-        </h3>
-
-        <q-tooltip
-          v-if="titleTooltip"
-          class="text-body2"
-          anchor="top left"
-          self="bottom middle"
-          max-width="300px"
-          :offset="[0, 10]"
-        >
-          {{ titleTooltip }}
-        </q-tooltip>
-      </div>
-
-      <slot />
-    </component>
+      <h3
+        v-if="title"
+        class="card-title truncate"
+      >
+        {{ title }}
+      </h3>
+
+      <q-tooltip
+        v-if="titleTooltip"
+        class="text-body2"
+        anchor="top left"
+        self="bottom middle"
+        max-width="300px"
+        :offset="[0, 10]"
+      >
+        {{ titleTooltip }}
+      </q-tooltip>
+    </div>
+
+    <slot />
+
+    <PLink
+      v-if="to"
+      class="link-fill no-outline"
+      :to="to"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue';
-import { RouteLocationRaw, RouterLink } from 'vue-router';
+import { RouteLocationRaw } from 'vue-router';
+
+import PLink from 'src/components/PLink.vue';
 
 defineProps({
   to: {
@@ -90,11 +87,13 @@ defineProps({
         outline: 2px solid transparent;
         outline-offset: 2px;
       }
+    }
 
-      .link-fill {
-        position: absolute;
-        inset: 0px;
-      }
+    .link-fill {
+      display: block;
+      position: absolute;
+      inset: 0;
+      z-index: 1;
     }
 
     .card-header {

web/src/components/PLink.vue

@@ -0,0 +1,47 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <span
+    v-if="vscode"
+    class="vscode-router-link cursor-pointer"
+    tabindex="0"
+    @click="navigate"
+    @keyup.enter="navigate"
+  >
+    <slot />
+  </span>
+  <RouterLink
+    v-else
+    v-bind="props"
+  >
+    <slot />
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { RouterLink, RouterLinkProps, useRouter } from 'vue-router';
+
+import { vscode } from 'src/vscode';
+
+const router = useRouter();
+
+const props = defineProps<RouterLinkProps>();
+
+function navigate() {
+  router.push(props.to);
+}
+</script>
+
+<style lang="scss" scoped>
+span.vscode-router-link {
+  color: var(--vscode-textLink-foreground);
+
+  &:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:hover {
+    color: var(--vscode-textLink-activeForeground);
+  }
+}
+</style>

web/src/views/existing-deployment/ExistingDeploymentHeader.vue

@@ -72,12 +72,12 @@
                 :id="deployment.id"
                 :current-tense="showDeployStatusAsCurrent"
               />
-              <RouterLink
+              <PLink
                 v-if="showLogsLink"
                 :to="routerLocation"
               >
                 View summarized deployment logs
-              </RouterLink>
+              </PLink>
             </div>
           </div>
         </div>
@@ -91,6 +91,7 @@
 import { ref, watch, PropType, computed } from 'vue';
 
 import { Account, ConfigurationError, Deployment, useApi } from 'src/api';
+import PLink from 'src/components/PLink.vue';
 import SelectAccount from 'src/components/SelectAccount.vue';
 import PButton from 'src/components/PButton.vue';
 import DeployProgressSummary from 'src/components/DeployProgressSummary.vue';

web/src/views/new-deployment/NewDeploymentHeader.vue

@@ -76,12 +76,12 @@
                 :id="deployingLocalId"
                 :current-tense="showDeployStatusAsCurrent"
               />
-              <RouterLink
+              <PLink
                 v-if="showLogsLink"
                 :to="{name: 'progress'}"
               >
                 View summarized deployment logs
-              </RouterLink>
+              </PLink>
             </div>
           </div>
         </div>
@@ -95,6 +95,7 @@
 import { PropType, computed, ref, watch } from 'vue';
 import { Account, ConfigurationError, useApi } from 'src/api';
 
+import PLink from 'src/components/PLink.vue';
 import SelectAccount from 'src/components/SelectAccount.vue';
 import DeployProgressSummary from 'src/components/DeployProgressSummary.vue';