Merge pull request #595 from rstudio/dotnomad/destination-empty-state

Create Destination empty state button to add destination
posit-dev · Dec 14, 2023 · 7046ae0 · 7046ae0
2 parents 5f5a895 + 6c5e7ad
commit 7046ae0
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/web/src/components/PCard.vue b/web/src/components/PCard.vue
@@ -98,7 +98,7 @@ defineProps({
     }
 
     .card-header {
-      &:not(:last-child) {
+      &:not(:empty) {
         margin-bottom: 12px;
       }
     }

diff --git a/web/src/style.css b/web/src/style.css
@@ -116,3 +116,10 @@ h1, h2, h3, h4, h5, h6, p {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.body--light .text-low-contrast {
+  color: #757575;
+}
+.body--dark .text-low-contrast {
+  color: #9e9e9e;
+}
diff --git a/web/src/views/project-page/ProjectPage.vue b/web/src/views/project-page/ProjectPage.vue
@@ -12,20 +12,45 @@
       </h2>
 
       <PButton
+        v-if="hasDeployments"
         hierarchy="primary"
         :to="{ name: 'addNewDeployment' }"
       >
         Add Destination
       </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 => {