From 6c5e7ada3998d25fcfafd598879b4e1e7864c7f6 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 14 Dec 2023 14:22:15 -0800
Subject: [PATCH] Display add Destination PCard if no deployments

---
 web/src/views/project-page/ProjectPage.vue | 34 ++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/web/src/views/project-page/ProjectPage.vue b/web/src/views/project-page/ProjectPage.vue
index ac00e0e5e..9dce1944d 100644
--- a/web/src/views/project-page/ProjectPage.vue
+++ b/web/src/views/project-page/ProjectPage.vue
@@ -12,6 +12,7 @@
       </h2>
 
       <PButton
+        v-if="hasDeployments"
         hierarchy="primary"
         :to="{ name: 'addNewDeployment' }"
       >
@@ -19,13 +20,37 @@
       </PButton>
     </div>
 
-    <div class="card-grid">
+    <div
+      v-if="hasDeployments"
+      class="card-grid"
+    >
       <DeploymentCard
         v-for="deployment in deployments"
         :key="deployment.id"
         :deployment="deployment"
       />
     </div>
+    <div v-else>
+      <PCard
+        :to="{ name: 'addNewDeployment' }"
+      >
+        <div class="flex column items-center">
+          <q-icon
+            name="add"
+            size="2rem"
+          />
+          <h3 class="text-body1 text-weight-medium q-mt-sm">
+            Add a New Destination
+          </h3>
+          <p class="q-mt-xs text-low-contrast">
+            This project hasn't been published yet.
+          </p>
+          <p class="text-low-contrast">
+            Get started by adding a destination.
+          </p>
+        </div>
+      </PCard>
+    </div>
 
     <h2 class="text-h6">
       Configurations
@@ -46,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useApi } from 'src/api';
 import { Deployment, isDeploymentError } from 'src/api/types/deployments';
@@ -55,11 +80,16 @@ import ConfigCard from './ConfigCard.vue';
 import DeploymentCard from './DeploymentCard.vue';
 import FileTree from 'src/components/FileTree.vue';
 import PButton from 'src/components/PButton.vue';
+import PCard from 'src/components/PCard.vue';
 
 const api = useApi();
 const deployments = ref<Deployment[]>([]);
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
+const hasDeployments = computed(() => {
+  return deployments.value.length > 0;
+});
+
 async function getDeployments() {
   const response = (await api.deployments.getAll()).data;
   deployments.value = response.filter<Deployment>((d): d is Deployment => {