Merge pull request #494 from rstudio/dotnomad/config-card

Create and style DeploymentCard component

web/src/style.css

@@ -1,3 +1,24 @@
 .max-width-md {
   max-width: 800px;
 }
+
+.body--light {
+  --focus-shadow-color: 0, 0, 0;
+  --focus-shadow-color-opacity: 0.14;
+  --focus-shadow-border-color: 0, 0, 0;
+  --focus-shadow-border-color-opacity: 0.2;
+}
+
+.body--dark {
+  --focus-shadow-color: 255, 255, 255;
+  --focus-shadow-color-opacity: 0.18;
+  --focus-shadow-border-color: 255, 255, 255;
+  --focus-shadow-border-color-opacity: 0.25;
+}
+
+.focus-shadow:focus,
+.focus-shadow:focus-within {
+  --focus-shadow: 0 0 0 4px rgba(var(--focus-shadow-color), var(--focus-shadow-color-opacity));
+  --border-shadow: 0 0 1px 1px rgba(var(--focus-shadow-border-color), var(--focus-shadow-border-color-opacity));
+  box-shadow: var(--focus-shadow), var(--border-shadow);
+}

web/src/utils/date.ts

@@ -3,7 +3,7 @@
 export function formatDateString(dateString: string) {
   return new Date(`${dateString}`).toLocaleDateString('en-US', {
     day: '2-digit',
-    month: 'long',
+    month: 'short',
     year: 'numeric',
   });
 }

web/src/views/project-page/DeploymentCard.vue

@@ -0,0 +1,99 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <div class="deployment-card focus-shadow">
+    <RouterLink :to="`/deployments/${deployment.id}`">
+      <span
+        class="link-fill"
+        aria-hidden="true"
+      />
+
+      <p class="card-title">
+        {{ deployment.saveName }}
+      </p>
+      <div class="card-details">
+        <p>{{ deployment.serverUrl }}</p>
+        <p>{{ deployment.id }}</p>
+        <p>Last Published on {{ formatDateString(deployment.deployedAt) }}</p>
+      </div>
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { RouterLink } from 'vue-router';
+
+import { Deployment } from 'src/api';
+import { formatDateString } from 'src/utils/date';
+
+defineProps({
+  deployment: {
+    type: Object as PropType<Deployment>,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.deployment-card {
+    position: relative;
+    border-radius: 8px;
+    border: 1px solid;
+    padding: 24px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:focus {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+
+      .link-fill {
+        position: absolute;
+        inset: 0px;
+      }
+    }
+
+    .card-title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .card-details {
+      margin-top: 12px;
+
+      & > :not([hidden]) ~ :not([hidden]) {
+        margin-top: 8px;
+      }
+    }
+
+    p {
+      margin: unset;
+      padding: unset;
+    }
+}
+
+.body--light {
+  .deployment-card {
+    background-color: white;
+    border-color: $grey-4;
+
+    &:hover {
+      border-color: $grey-6;
+    }
+  }
+}
+
+.body--dark {
+  .deployment-card {
+    border-color: $grey-8;
+
+    &:hover {
+      border-color: $grey-6;
+    }
+  }
+}
+</style>

web/src/views/project-page/ProjectPage.vue

@@ -13,16 +13,13 @@
     Add Destination
   </q-btn>
 
-  <ul
-    v-for="deployment in deployments"
-    :key="deployment.id"
-  >
-    <li>
-      <RouterLink :to="`/deployments/${deployment.id}`">
-        {{ deployment.serverUrl }}
-      </RouterLink>
-    </li>
-  </ul>
+  <div class="card-grid">
+    <DeploymentCard
+      v-for="deployment in deployments"
+      :key="deployment.id"
+      :deployment="deployment"
+    />
+  </div>
 
   <h2>Configurations</h2>
   <ul
@@ -40,11 +37,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { RouterLink } from 'vue-router';
 
 import { useApi } from 'src/api';
 import { Deployment, isDeploymentError } from 'src/api/types/deployments';
 import { Configuration, ConfigurationError, isConfigurationError } from 'src/api/types/configurations';
+import DeploymentCard from './DeploymentCard.vue';
 
 const api = useApi();
 const deployments = ref<Deployment[]>([]);
@@ -65,3 +62,11 @@ async function getConfigurations() {
 getDeployments();
 getConfigurations();
 </script>
+
+<style scoped lang="scss">
+.card-grid {
+  margin-top: 24px;
+  display: grid;
+  grid-gap: 28px;
+}
+</style>