Merge pull request #415 from rstudio/dotnomad/create-destination-modal

Create add destination form page and flow

web/src/router.ts

@@ -2,15 +2,17 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router';
 
-import ProjectPage from 'src/components/ProjectPage.vue';
+import ProjectPage from 'src/views/project-page/ProjectPage.vue';
+import AddNewDeployment from 'src/views/add-new-deployment/AddNewDeployment.vue';
 import ExistingDeploymentDestinationPageVue from 'src/views/existing-deployment-destination/ExistingDeploymentDestinationPage.vue';
 import NewDeploymentDestinationPageVue from 'src/views/new-deployment-destination/NewDeploymentDestinationPage.vue';
 import PublishProcessPageVue from 'src/components/PublishProcessPage.vue';
 
 const routes = [
   { name: 'root', path: '/', redirect: { name: 'project' } },
   { name: 'project', path: '/project', component: ProjectPage },
-  { name: 'newDeployment', path: '/new-deployment/:account', component: NewDeploymentDestinationPageVue },
+  { name: 'addNewDeployment', path: '/add-new-deployment', component: AddNewDeployment },
+  { name: 'newDeployment', path: '/new-deployment/:account/:contentId?', component: NewDeploymentDestinationPageVue },
   { name: 'deployments', path: '/deployments/:id', component: ExistingDeploymentDestinationPageVue },
   { name: 'progress', path: '/progress', component: PublishProcessPageVue },
   { name: 'default', path: '/:pathMatch(.*)*', redirect: '/' },

web/src/utils/accounts.ts

@@ -0,0 +1,12 @@
+// Copyright (C) 2023 by Posit Software, PBC.
+
+import { Account } from 'src/api';
+
+export const calculateName = (account: Account) => {
+  if (account.authType === 'token-key') {
+    return account.accountName;
+  } else if (account.authType === 'api-key') {
+    return 'Using API Key';
+  }
+  return '';
+};

web/src/views/add-new-deployment/AccountRadio.vue

@@ -0,0 +1,82 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <q-item
+    tag="label"
+    class="q-my-sm row items-center"
+    :class="activeClass"
+  >
+    <q-item-section
+      avatar
+      top
+      class="col-1"
+    >
+      <q-radio
+        v-model="radioModel"
+        name="account"
+        :val="account.name"
+      />
+    </q-item-section>
+    <q-item-section
+      class="q-ml-md"
+    >
+      <q-item-label>
+        {{ account.name }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="account-caption"
+      >
+        Account: {{ calculateName(account) }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="account-url"
+      >
+        URL: {{ account.url }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="q-pt-sm account-credential"
+      >
+        Credentials managed by: {{ account.source }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue';
+import { Account } from 'src/api';
+import { calculateName } from 'src/utils/accounts';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  account: {
+    type: Object as PropType<Account>,
+    required: true,
+  },
+});
+
+const radioModel = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  }
+});
+
+const selected = computed(() => {
+  return props.account.name === props.modelValue;
+});
+
+const activeClass = computed(() => {
+  return selected.value ? 'account-item-selected' : 'account-item-not-selected';
+});
+
+</script>

web/src/views/add-new-deployment/AddNewDeployment.vue

@@ -0,0 +1,80 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <q-form
+    class="q-gutter-md"
+    @reset="resetForm"
+    @submit.prevent="navigateToNewDestinationPage"
+  >
+    <div class="q-pa-sm">
+      <q-list>
+        <AccountRadio
+          v-for="account in accounts"
+          :key="account.name"
+          v-model="selectedAccountName"
+          :account="account"
+        />
+      </q-list>
+    </div>
+
+    <q-input
+      v-model="contentId"
+      label="Content ID"
+      hint="Optional"
+    />
+
+    <div class="flex row reverse">
+      <q-btn
+        :to="destinationPage"
+        type="submit"
+        color="primary"
+        label="Add"
+      />
+      <q-btn
+        type="reset"
+        class="q-mr-sm"
+        label="Cancel"
+        @click="router.back()"
+      />
+    </div>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { Account, useApi } from 'src/api';
+import { computed, ref } from 'vue';
+import { RouteLocationRaw, useRouter } from 'vue-router';
+
+import AccountRadio from 'src/views/add-new-deployment/AccountRadio.vue';
+
+const accounts = ref<Account[]>([]);
+const selectedAccountName = ref<string>('');
+const contentId = ref<string>('');
+
+const api = useApi();
+const router = useRouter();
+
+async function getAccounts() {
+  const response = await api.accounts.getAll();
+  accounts.value = response.data.accounts;
+}
+
+function resetForm() {
+  selectedAccountName.value = '';
+  contentId.value = '';
+}
+
+const destinationPage = computed<RouteLocationRaw>(() => ({
+  name: 'newDeployment',
+  params: {
+    account: selectedAccountName.value,
+    contentId: contentId.value,
+  },
+}));
+
+function navigateToNewDestinationPage() {
+  router.push(destinationPage.value);
+}
+
+getAccounts();
+</script>

web/src/views/new-deployment-destination/NewDeploymentDestinationPage.vue

@@ -3,6 +3,7 @@
 <template>
   <NewDestinationHeader
     :account-name="accountName"
+    :content-id="contentId"
     class="q-mt-md"
   />
 </template>
@@ -23,4 +24,12 @@ const accountName = computed(() => {
   return route.params.account;
 });
 
+const contentId = computed(() => {
+  // route param can be either string | string[]
+  if (Array.isArray(route.params.contentId)) {
+    return route.params.contentId[0] || undefined;
+  }
+  return route.params.contentId || undefined;
+});
+
 </script>

web/src/views/new-deployment-destination/NewDestinationHeader.vue

@@ -5,6 +5,9 @@
     <div class="col text-center col-6">
       <div>Destination Summary</div>
       <div>New Deployment to {{ destinationURL }}</div>
+      <div v-if="contentId">
+        Content ID: {{ contentId }}
+      </div>
     </div>
     <div class="col-3">
       <SelectAccount
@@ -43,6 +46,7 @@ const emit = defineEmits(['publish']);
 
 const props = defineProps({
   accountName: { type: String, required: true },
+  contentId: { type: String, default: undefined, required: false },
 });
 
 const onPublish = async() => {
@@ -51,6 +55,7 @@ const onPublish = async() => {
   try {
     await api.deployments.publish(
       props.accountName,
+      props.contentId,
     );
     disablePublishing.value = false;
   } catch (e) {

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

@@ -4,6 +4,11 @@
   <h1>Project Page</h1>
 
   <h2>Destinations</h2>
+
+  <q-btn :to="{ name: 'addNewDeployment' }">
+    Add Destination
+  </q-btn>
+
   <ul
     v-for="deployment in deployments"
     :key="deployment.id"