From c0322ec32b71fa35a5c5375c962f4ebd75d8ddd4 Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Thu, 18 Jan 2024 09:00:58 -0800
Subject: [PATCH 1/5] Use a deployment pinia store

---
 web/src/App.vue                               |   4 +
 web/src/api/resources/Deployments.ts          |   6 +-
 web/src/api/types/deployments.ts              |  13 +-
 web/src/api/types/error.ts                    |   1 +
 web/src/stores/deployments.ts                 | 115 ++++++++++++++++++
 web/src/stores/events.ts                      |   9 ++
 web/src/utils/urls.ts                         |   8 ++
 .../add-new-deployment/AddNewDeployment.vue   |  46 ++++---
 web/src/views/deployment/DeploymentHeader.vue |   3 +-
 web/src/views/deployment/DeploymentPage.vue   |  76 ++++++------
 web/src/views/project-page/DeploymentCard.vue |   9 +-
 .../project-page/DeploymentErrorCard.vue      |  59 +++++++++
 .../views/project-page/DeploymentsSection.vue |  90 ++++----------
 .../views/project-page/PreDeploymentCard.vue  |  31 +++++
 web/src/views/project-page/ProjectPage.vue    |   1 +
 15 files changed, 334 insertions(+), 137 deletions(-)
 create mode 100644 web/src/stores/deployments.ts
 create mode 100644 web/src/utils/urls.ts
 create mode 100644 web/src/views/project-page/DeploymentErrorCard.vue
 create mode 100644 web/src/views/project-page/PreDeploymentCard.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index a6f42821f..1272a6995 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -23,6 +23,7 @@ import { useQuasar } from 'quasar';
 import AppHeader from 'src/components/AppHeader.vue';
 import { onBeforeUnmount } from 'vue';
 import { useEventStore } from 'src/stores/events';
+import { useDeploymentStore } from 'src/stores/deployments';
 
 const $q = useQuasar();
 $q.dark.set('auto');
@@ -34,6 +35,9 @@ onBeforeUnmount(() => {
   eventStore.closeEventStream();
 });
 
+// Let's start population of the deployments as quickly as possible
+useDeploymentStore();
+
 </script>
 
 <style lang="scss">
diff --git a/web/src/api/resources/Deployments.ts b/web/src/api/resources/Deployments.ts
index 21bad694a..aa0f7c66b 100644
--- a/web/src/api/resources/Deployments.ts
+++ b/web/src/api/resources/Deployments.ts
@@ -2,7 +2,7 @@
 
 import { AxiosInstance } from 'axios';
 
-import { Deployment, DeploymentRecordError, PreDeployment } from 'src/api/types/deployments';
+import { Deployment, DeploymentError, PreDeployment } from 'src/api/types/deployments';
 
 export class Deployments {
   private client: AxiosInstance;
@@ -15,7 +15,7 @@ export class Deployments {
   // 200 - success
   // 500 - internal server error
   getAll() {
-    return this.client.get<Array<Deployment | PreDeployment | DeploymentRecordError>>(
+    return this.client.get<Array<Deployment | PreDeployment | DeploymentError>>(
       '/deployments',
     );
   }
@@ -26,7 +26,7 @@ export class Deployments {
   // 500 - internal server error
   get(id: string) {
     const encodedId = encodeURIComponent(id);
-    return this.client.get<Deployment | PreDeployment | DeploymentRecordError>(
+    return this.client.get<Deployment | PreDeployment | DeploymentError>(
       `deployments/${encodedId}`,
     );
   }
diff --git a/web/src/api/types/deployments.ts b/web/src/api/types/deployments.ts
index e41ee86dd..79ad29640 100644
--- a/web/src/api/types/deployments.ts
+++ b/web/src/api/types/deployments.ts
@@ -16,7 +16,7 @@ export type DeploymentLocation = {
   deploymentPath: string;
 }
 
-export type DeploymentRecordError = {
+export type DeploymentError = {
   error: AgentError,
   state: DeploymentState.ERROR,
 } & DeploymentLocation
@@ -41,22 +41,23 @@ export type Deployment = {
   files: string[],
   deployedAt: string,
   state: DeploymentState.DEPLOYED,
+  deploymentError: AgentError | null,
 } & DeploymentRecord & Configuration;
 
-export function isDeploymentRecordError(
-  d: Deployment | PreDeployment | DeploymentRecordError
-): d is DeploymentRecordError {
+export function isDeploymentError(
+  d: Deployment | PreDeployment | DeploymentError
+): d is DeploymentError {
   return d.state === DeploymentState.ERROR;
 }
 
 export function isPreDeployment(
-  d: Deployment | PreDeployment | DeploymentRecordError
+  d: Deployment | PreDeployment | DeploymentError
 ): d is PreDeployment {
   return d.state === DeploymentState.NEW;
 }
 
 export function isDeployment(
-  d: Deployment | PreDeployment | DeploymentRecordError
+  d: Deployment | PreDeployment | DeploymentError
 ): d is Deployment {
   return d.state === DeploymentState.DEPLOYED;
 }
diff --git a/web/src/api/types/error.ts b/web/src/api/types/error.ts
index 1cbe3d520..8dcdbbcd9 100644
--- a/web/src/api/types/error.ts
+++ b/web/src/api/types/error.ts
@@ -3,6 +3,7 @@
 export type AgentError = {
     code: string;
     msg: string;
+    operation: string;
     data: {
         [key: string]: unknown
     };
diff --git a/web/src/stores/deployments.ts b/web/src/stores/deployments.ts
new file mode 100644
index 000000000..6b34a6a9f
--- /dev/null
+++ b/web/src/stores/deployments.ts
@@ -0,0 +1,115 @@
+// Copyright (C) 2023 by Posit Software, PBC.
+
+import { defineStore } from 'pinia';
+import { useApi } from 'src/api';
+import { computed, ref } from 'vue';
+import { router } from 'src/router';
+import { getStatusFromError, newFatalErrorRouteLocation } from 'src/utils/errors';
+import { sortByDateString } from 'src/utils/date';
+
+import {
+  Deployment,
+  DeploymentError,
+  isDeploymentError,
+  isPreDeployment,
+  PreDeployment,
+} from 'src/api/types/deployments';
+
+export const useDeploymentStore = defineStore('deployment', () => {
+  // key is deployment saveName
+  type DeploymentMap = Record<string, Deployment | PreDeployment | DeploymentError>;
+
+  const deploymentMap = ref<DeploymentMap>({});
+
+  const api = useApi();
+
+  const refreshDeployments = async() => {
+    try {
+      const newDeploymentMap: DeploymentMap = {};
+
+      // API Returns:
+      // 200 - success
+      // 500 - internal server error
+      const response = (await api.deployments.getAll()).data;
+      response.forEach((deployment) => {
+        if (isDeploymentError(deployment)) {
+          newDeploymentMap[deployment.deploymentName] = deployment;
+        } else {
+          newDeploymentMap[deployment.saveName] = deployment;
+        }
+      });
+      deploymentMap.value = newDeploymentMap;
+    } catch (error: unknown) {
+      router.push(newFatalErrorRouteLocation(error, 'deployments::getDeployments()'));
+    }
+  };
+
+  const hasDeployments = computed(() => Object.keys(deploymentMap.value).length > 0);
+
+  const refreshDeployment = async(deploymentName: string) => {
+    try {
+      // API Returns:
+      // 200 - success
+      // 404 - not found
+      // 500 - internal server error
+      const response = await api.deployments.get(deploymentName);
+      const deployment = response.data;
+      if (isDeploymentError(deployment)) {
+        deploymentMap.value[deployment.deploymentName] = deployment;
+      } else {
+        deploymentMap.value[deployment.saveName] = deployment;
+      }
+    } catch (error: unknown) {
+      if (getStatusFromError(error) === 404) {
+        // deployment no longer exists, remove from the map.
+        delete deploymentMap.value[deploymentName];
+        return;
+      }
+      // For this page, we send all errors to the fatal error page, including 404
+      router.push(newFatalErrorRouteLocation(error, `deployments::getDeployment(${name})`));
+    }
+  };
+
+  const sortedDeployments = computed(() => {
+    const result: Array<Deployment | PreDeployment | DeploymentError> = [];
+    const deploymentErrors: Array<DeploymentError> = [];
+    const preDeployments: Array<PreDeployment> = [];
+    const deployments: Array<Deployment> = [];
+    Object.keys(deploymentMap.value).forEach(
+      deploymentName => {
+        const deployment = deploymentMap.value[deploymentName];
+        if (isDeploymentError(deployment)) {
+          deploymentErrors.push(deployment);
+        } else if (isPreDeployment(deployment)) {
+          preDeployments.push(deployment);
+        } else {
+          deployments.push(deployment);
+        }
+      }
+    );
+    deploymentErrors.sort((a, b) => {
+      return a.deploymentName.localeCompare(b.deploymentName, undefined, { sensitivity: 'base' });
+    });
+    preDeployments.sort((a, b) => {
+      return a.deploymentName.localeCompare(b.deploymentName, undefined, { sensitivity: 'base' });
+    });
+    deployments.sort((a, b) => {
+      return sortByDateString(a.deployedAt, b.deployedAt);
+    });
+
+    return result.concat(deploymentErrors, preDeployments, deployments);
+  });
+
+  const init = () => {
+    refreshDeployments();
+  };
+  init();
+
+  return {
+    refreshDeployments,
+    refreshDeployment,
+    sortedDeployments,
+    hasDeployments,
+    deploymentMap,
+  };
+});
diff --git a/web/src/stores/events.ts b/web/src/stores/events.ts
index c4e0eb8c5..d6356a7e8 100644
--- a/web/src/stores/events.ts
+++ b/web/src/stores/events.ts
@@ -54,6 +54,7 @@ import {
 } from 'src/plugins/eventStream';
 
 import { computed, ref } from 'vue';
+import { useDeploymentStore } from './deployments';
 
 export type PublishStepCompletionStatus =
 'notStarted' | 'inProgress' | 'success' | 'error';
@@ -313,6 +314,7 @@ export const useEventStore = defineStore('event', () => {
   };
 
   const onPublishSuccess = (msg: PublishSuccess) => {
+    const deployments = useDeploymentStore();
     const localId = getLocalId(msg);
 
     if (currentPublishStatus.value.localId === localId) {
@@ -324,9 +326,13 @@ export const useEventStore = defineStore('event', () => {
       currentPublishStatus.value.contentId = msg.data.contentId;
     }
     publishInProgess.value = false;
+    if (currentPublishStatus.value.saveName) {
+      deployments.refreshDeployment(currentPublishStatus.value.saveName);
+    }
   };
 
   const onPublishFailure = (msg: PublishFailure) => {
+    const deployments = useDeploymentStore();
     const localId = getLocalId(msg);
 
     if (currentPublishStatus.value.localId === localId) {
@@ -335,6 +341,9 @@ export const useEventStore = defineStore('event', () => {
       publishStatus.error = splitMsgIntoKeyValuePairs(msg.data);
     }
     publishInProgess.value = false;
+    if (currentPublishStatus.value.saveName) {
+      deployments.refreshDeployment(currentPublishStatus.value.saveName);
+    }
   };
 
   const onPublishCheckCapabilitiesStart = (msg: PublishCheckCapabilitiesStart) => {
diff --git a/web/src/utils/urls.ts b/web/src/utils/urls.ts
new file mode 100644
index 000000000..dba0fb48b
--- /dev/null
+++ b/web/src/utils/urls.ts
@@ -0,0 +1,8 @@
+// Copyright (C) 2024 by Posit Software, PBC.
+
+export const normalizeURL = (url: string) => {
+  if (!url.endsWith('/')) {
+    url += '/';
+  }
+  return url;
+};
diff --git a/web/src/views/add-new-deployment/AddNewDeployment.vue b/web/src/views/add-new-deployment/AddNewDeployment.vue
index 1fdfe84a7..3ab7469e8 100644
--- a/web/src/views/add-new-deployment/AddNewDeployment.vue
+++ b/web/src/views/add-new-deployment/AddNewDeployment.vue
@@ -60,21 +60,22 @@
 import { Account, useApi } from 'src/api';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { Deployment, isDeploymentRecordError } from 'src/api/types/deployments';
+import { isDeploymentError } from 'src/api/types/deployments';
 
 import AccountRadio from 'src/views/add-new-deployment/AccountRadio.vue';
 import { newFatalErrorRouteLocation } from 'src/utils/errors';
 import PButton from 'src/components/PButton.vue';
 import PLink from 'src/components/PLink.vue';
+import { useDeploymentStore } from 'src/stores/deployments';
 
 const accounts = ref<Account[]>([]);
 const selectedAccountName = ref<string>('');
 const deploymentName = ref<string>('');
-const deployments = ref<Deployment[]>([]);
 const navigationInProgress = ref<boolean>(false);
 
 const api = useApi();
 const router = useRouter();
+const deployments = useDeploymentStore();
 
 async function getAccounts() {
   try {
@@ -91,27 +92,20 @@ async function getAccounts() {
   }
 }
 
-async function getDeployments() {
-  try {
-    // API Returns:
-    // 200 - success
-    // 500 - internal server error
-    const response = (await api.deployments.getAll()).data;
-    deployments.value = response.filter<Deployment>((d): d is Deployment => {
-      return !isDeploymentRecordError(d);
-    });
-  } catch (error: unknown) {
-    router.push(newFatalErrorRouteLocation(error, 'ProjectPage::getDeployments()'));
-  }
-}
-
 const deploymentNameError = computed(() => {
   if (!deploymentName.value) {
     return 'A unique deployment name must be provided.';
   }
   if (
-    deployments.value.find(
-      (deployment) => deployment.saveName.toLowerCase() === deploymentName.value.toLowerCase()
+    deployments.sortedDeployments.find(
+      (deployment) => {
+        if (isDeploymentError(deployment)) {
+          return (
+            deployment.deploymentName.toLocaleLowerCase() === deploymentName.value.toLowerCase()
+          );
+        }
+        return deployment.saveName.toLowerCase() === deploymentName.value.toLowerCase();
+      }
     )
   ) {
     return 'Deployment name already in use. Please supply a unique name.';
@@ -137,6 +131,11 @@ const navigateToDeploymentPage = async() => {
   } catch (error: unknown) {
     router.push(newFatalErrorRouteLocation(error, 'navigateToDeploymentPage::createNew()'));
   }
+  try {
+    await deployments.refreshDeployment(deploymentName.value);
+  } catch (error: unknown) {
+    router.push(newFatalErrorRouteLocation(error, 'navigateToDeploymentPage::refreshDeployment()'));
+  }
   router.push({
     name: 'deployments',
     params: {
@@ -154,7 +153,15 @@ const generateDefaultName = () => {
   do {
     id += 1;
     const trialName = `Untitled-${id}`;
-    if (!deployments.value.find((deployment) => deployment.saveName === trialName)) {
+
+    if (!deployments.sortedDeployments.find(
+      (deployment) => {
+        if (isDeploymentError(deployment)) {
+          return deployment.deploymentName.toLocaleLowerCase() === trialName.toLowerCase();
+        }
+        return deployment.saveName.toLowerCase() === trialName.toLowerCase();
+      }
+    )) {
       defaultName = trialName;
     }
   } while (!defaultName);
@@ -163,7 +170,6 @@ const generateDefaultName = () => {
 
 const init = async() => {
   getAccounts();
-  await getDeployments();
   deploymentName.value = generateDefaultName();
 };
 init();
diff --git a/web/src/views/deployment/DeploymentHeader.vue b/web/src/views/deployment/DeploymentHeader.vue
index 7b1fbded5..6ec924088 100644
--- a/web/src/views/deployment/DeploymentHeader.vue
+++ b/web/src/views/deployment/DeploymentHeader.vue
@@ -122,6 +122,7 @@ import { useEventStore } from 'src/stores/events';
 import { formatDateString } from 'src/utils/date';
 import { newFatalErrorRouteLocation } from 'src/utils/errors';
 import { useRouter } from 'vue-router';
+import { normalizeURL } from 'src/utils/urls';
 
 const api = useApi();
 const eventStore = useEventStore();
@@ -255,7 +256,7 @@ watch(
   ],
   () => {
     const credentials = accounts.value.filter(
-      (account: Account) => account.url === props.deployment.serverUrl
+      (account: Account) => normalizeURL(account.url) === normalizeURL(props.deployment.serverUrl)
     );
     filteredAccountList.value = credentials;
   },
diff --git a/web/src/views/deployment/DeploymentPage.vue b/web/src/views/deployment/DeploymentPage.vue
index e3645bf76..09cce9b5f 100644
--- a/web/src/views/deployment/DeploymentPage.vue
+++ b/web/src/views/deployment/DeploymentPage.vue
@@ -2,10 +2,11 @@
 
 <template>
   <DeploymentHeader
-    v-if="deployment && defaultConfig"
+    v-if="deployment && !isDeploymentError(deployment) && defaultConfig"
     :deployment="deployment"
     :config-error="isConfigurationError(defaultConfig) ? defaultConfig : undefined"
     :preferred-account="props.preferredAccount"
+    @deploy="onDeployInitiated"
   />
   <DeploymentSection
     v-if="deployment"
@@ -28,11 +29,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useDeploymentStore } from 'src/stores/deployments';
 
 import { Configuration, ConfigurationError, isConfigurationError, useApi } from 'src/api';
-import { Deployment, PreDeployment, isDeploymentRecordError } from 'src/api/types/deployments';
+import { isDeploymentError } from 'src/api/types/deployments';
 import {
   newFatalErrorRouteLocation,
 } from 'src/utils/errors';
@@ -45,8 +47,10 @@ import DeploymentSection from 'src/components/DeploymentSection.vue';
 const route = useRoute();
 const router = useRouter();
 const api = useApi();
+const deployments = useDeploymentStore();
 
-const deployment = ref<Deployment | PreDeployment>();
+// keep track if the user initiated publishing or not
+let publishInitiated = false;
 
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
@@ -62,6 +66,23 @@ const deploymentName = computed(():string => {
   return route.params.name;
 });
 
+const deployment = computed(() => {
+  return deployments.deploymentMap[deploymentName.value];
+});
+
+watch(
+  () => deployment.value,
+  () => {
+    if (!deployment.value || isDeploymentError(deployment.value)) {
+      // go to fatal error page.
+      router.push(newFatalErrorRouteLocation(
+        new Error('Invalid Value for Deployment Object'),
+        'DeploymentPage::deployment()',
+      ));
+    }
+  }
+);
+
 const configurationSubTitles = computed(() => {
   return [
     `Using ${defaultConfig.value?.configurationPath}`,
@@ -81,48 +102,25 @@ const fileSubTitles = computed(() => {
   ];
 });
 
-const getDeployment = async() => {
-  try {
-    if (!deploymentName.value) {
-      deployment.value = undefined;
-      return;
-    }
-    // API Returns:
-    // 200 - success
-    // 404 - not found
-    // 500 - internal server error
-    const response = await api.deployments.get(deploymentName.value);
-    const d = response.data;
-    if (isDeploymentRecordError(d)) {
-      // let the fatal error page handle this deployment error.
-      // we're in a header, they can't fix it here.
-      throw new Error(d.error.msg);
-    } else {
-      deployment.value = d;
-    }
-  } catch (error: unknown) {
-    // For this page, we send all errors to the fatal error page, including 404
-    router.push(newFatalErrorRouteLocation(error, 'DeploymentPage::getDeployment()'));
-  }
-};
-
 const defaultConfig = computed(() => {
   return configurations.value.find((c) => c.configurationName === 'default');
 });
 
+const onDeployInitiated = () => {
+  publishInitiated = true;
+};
+
+// Refresh the main deployment list on exit if we haven't published.
+// This handles the add new, but did not publish scenaro.
+onBeforeUnmount(() => {
+  if (!publishInitiated && deploymentName.value) {
+    deployments.refreshDeployment(deploymentName.value);
+  }
+});
+
 async function getConfigurations() {
   const response = await api.configurations.getAll();
   configurations.value = response.data;
 }
-
 getConfigurations();
-
-watch(
-  () => route.params,
-  () => {
-    getDeployment();
-  },
-  { immediate: true }
-);
-
 </script>
diff --git a/web/src/views/project-page/DeploymentCard.vue b/web/src/views/project-page/DeploymentCard.vue
index df6fbc7b1..c93d6f1bb 100644
--- a/web/src/views/project-page/DeploymentCard.vue
+++ b/web/src/views/project-page/DeploymentCard.vue
@@ -5,7 +5,9 @@
     :to="{ name: 'deployments', params: { name: `${deployment.saveName}` }}"
     :title="deployment.saveName"
   >
-    <div class="space-between-y-sm">
+    <div
+      class="space-between-y-sm"
+    >
       <p>{{ deployment.serverUrl }}</p>
       <p>{{ deployment.id }}</p>
       <DeployProgressLine
@@ -22,7 +24,7 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue';
 
-import { Deployment } from 'src/api';
+import { Deployment, isPreDeployment } from 'src/api';
 import { formatDateString } from 'src/utils/date';
 import { useEventStore } from 'src/stores/events';
 import PCard from 'src/components/PCard.vue';
@@ -38,6 +40,9 @@ const props = defineProps({
 });
 
 const showProgressLine = computed(() => {
+  if (isPreDeployment(props.deployment)) {
+    return false;
+  }
   return (
     eventStore.isPublishActiveByID(props.deployment.id) ||
     (
diff --git a/web/src/views/project-page/DeploymentErrorCard.vue b/web/src/views/project-page/DeploymentErrorCard.vue
new file mode 100644
index 000000000..2a9fc18cb
--- /dev/null
+++ b/web/src/views/project-page/DeploymentErrorCard.vue
@@ -0,0 +1,59 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <PCard
+    :title="deploymentError.deploymentName"
+  >
+    <div class="space-between-sm">
+      <p class="text-bold">
+        An error has been detected: {{ deploymentError.error.code }}
+      </p>
+      <p class="error-msg">
+        {{ deploymentError.error.msg }}
+      </p>
+      <p
+        v-for="(value, name, index) in scrubbedErrorData"
+        :key="index"
+        class="error-data"
+      >
+        {{ name }}: {{ value }}
+      </p>
+    </div>
+  </PCard>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue';
+
+import { DeploymentError } from 'src/api';
+import PCard from 'src/components/PCard.vue';
+
+const props = defineProps({
+  deploymentError: {
+    type: Object as PropType<DeploymentError>,
+    required: true,
+  },
+});
+
+const scrubbedErrorData = computed(() => {
+  const result = {
+    ...props.deploymentError.error.data,
+  };
+  if (result.file) {
+    delete result.file;
+  }
+  return result;
+});
+
+</script>
+
+<style scoped lang="scss">
+.error-msg {
+  text-wrap: wrap;
+}
+.error-data {
+  margin-left: 15px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+</style>
diff --git a/web/src/views/project-page/DeploymentsSection.vue b/web/src/views/project-page/DeploymentsSection.vue
index 920dc6c6c..861b1656b 100644
--- a/web/src/views/project-page/DeploymentsSection.vue
+++ b/web/src/views/project-page/DeploymentsSection.vue
@@ -13,7 +13,6 @@
         Your project has been deployed to:
       </p>
     </div>
-
     <PButton
       v-if="hasDeployments"
       hierarchy="primary"
@@ -22,21 +21,27 @@
       New Deployment
     </PButton>
   </div>
-
-  <ErrorBanner
-    :error-messages="errorMessages"
-    @dismiss="dismissError"
-  />
-
   <div
     v-if="hasDeployments"
     class="card-grid"
   >
-    <DeploymentCard
-      v-for="deployment in sortedDeployments"
-      :key="deployment.id"
-      :deployment="deployment"
-    />
+    <div
+      v-for="(deployment, i) in deployments.sortedDeployments"
+      :key="i"
+    >
+      <DeploymentErrorCard
+        v-if="isDeploymentError(deployment)"
+        :deployment-error="deployment"
+      />
+      <PreDeploymentCard
+        v-if="isPreDeployment(deployment)"
+        :pre-deployment="deployment"
+      />
+      <DeploymentCard
+        v-if="!isDeploymentError(deployment) && !isPreDeployment(deployment)"
+        :deployment="deployment"
+      />
+    </div>
   </div>
   <div v-else>
     <PCard
@@ -63,68 +68,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
+import { useDeploymentStore } from 'src/stores/deployments';
+import { isDeploymentError, isPreDeployment } from 'src/api';
 
-import { Deployment, DeploymentRecordError, isDeploymentRecordError, useApi } from 'src/api';
-import { ErrorMessages, buildErrorBannerMessage, newFatalErrorRouteLocation } from 'src/utils/errors';
-import { sortByDateString } from 'src/utils/date';
-import { router } from 'src/router';
 import DeploymentCard from './DeploymentCard.vue';
+import PreDeploymentCard from './PreDeploymentCard.vue';
+import DeploymentErrorCard from './DeploymentErrorCard.vue';
 import PButton from 'src/components/PButton.vue';
 import PCard from 'src/components/PCard.vue';
-import ErrorBanner from 'src/components/ErrorBanner.vue';
 
-const api = useApi();
-const deployments = ref<Deployment[]>([]);
-const errorMessages = ref<ErrorMessages>([]);
+const deployments = useDeploymentStore();
 
 const hasDeployments = computed(() => {
-  return deployments.value.length > 0;
-});
-
-const sortedDeployments = computed(() => {
-  return [...deployments.value].sort((a, b) => {
-    return sortByDateString(a.deployedAt, b.deployedAt);
-  });
+  return deployments.sortedDeployments.length > 0;
 });
-
-const dismissError = () => {
-  errorMessages.value = [];
-};
-
-async function getDeployments() {
-  try {
-    // API Returns:
-    // 200 - success
-    // 500 - internal server error
-    const response = (await api.deployments.getAll()).data;
-    deployments.value = response.filter<Deployment>((d): d is Deployment => {
-      return !isDeploymentRecordError(d);
-    });
-    const deploymentErrors: DeploymentRecordError[] = response.filter(isDeploymentRecordError);
-    if (deploymentErrors) {
-      // We will show deployment errors on this page, while all other pages
-      // route these towards the fatal error page. This is because the user
-      // can see the list of deployments for their project and hopefully is
-      // in a position of resolving issues.
-      errorMessages.value = [];
-      deploymentErrors.forEach((d) => {
-        return errorMessages.value.push(
-          buildErrorBannerMessage(
-            d.error.msg,
-            `Please correct errors within the indicated deployment file(s).
-            The files will not appear on the list below until they are valid and
-            you have reloaded this page.`,
-          ),
-        );
-      });
-    }
-  } catch (error: unknown) {
-    router.push(newFatalErrorRouteLocation(error, 'ProjectPage::getDeployments()'));
-  }
-}
-
-await getDeployments();
 </script>
 
 <style scoped lang="scss">
diff --git a/web/src/views/project-page/PreDeploymentCard.vue b/web/src/views/project-page/PreDeploymentCard.vue
new file mode 100644
index 000000000..9aa314ae3
--- /dev/null
+++ b/web/src/views/project-page/PreDeploymentCard.vue
@@ -0,0 +1,31 @@
+<!-- Copyright (C) 2024 by Posit Software, PBC. -->
+
+<template>
+  <PCard
+    :to="{ name: 'deployments', params: { name: `${preDeployment.saveName}` }}"
+    :title="preDeployment.saveName"
+  >
+    <div
+      class="space-between-y-sm"
+    >
+      <p>{{ preDeployment.serverUrl }}</p>
+      <p>An ID will be created on first deployment.</p>
+      <p>Never has been deployed.</p>
+    </div>
+  </PCard>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+import { PreDeployment } from 'src/api';
+import PCard from 'src/components/PCard.vue';
+
+defineProps({
+  preDeployment: {
+    type: Object as PropType<PreDeployment>,
+    required: true,
+  },
+});
+
+</script>
diff --git a/web/src/views/project-page/ProjectPage.vue b/web/src/views/project-page/ProjectPage.vue
index eae3fc251..a6eb915ce 100644
--- a/web/src/views/project-page/ProjectPage.vue
+++ b/web/src/views/project-page/ProjectPage.vue
@@ -81,6 +81,7 @@ import DeploymentsSection from './DeploymentsSection.vue';
 
 const api = useApi();
 const router = useRouter();
+
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
 async function getConfigurations() {

From 29555b7250bbd8aafa7a387958ab4db36ffb5fa3 Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Thu, 18 Jan 2024 12:52:05 -0800
Subject: [PATCH 2/5] no need for extra refresh.

---
 web/src/views/deployment/DeploymentPage.vue | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/web/src/views/deployment/DeploymentPage.vue b/web/src/views/deployment/DeploymentPage.vue
index 8f2d4258c..49d0410c9 100644
--- a/web/src/views/deployment/DeploymentPage.vue
+++ b/web/src/views/deployment/DeploymentPage.vue
@@ -6,7 +6,6 @@
     :deployment="deployment"
     :config-error="isConfigurationError(defaultConfig) ? defaultConfig : undefined"
     :preferred-account="props.preferredAccount"
-    @deploy="onDeployInitiated"
   />
   <DeploymentSection
     v-if="deployment"
@@ -29,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useDeploymentStore } from 'src/stores/deployments';
 
@@ -49,9 +48,6 @@ const router = useRouter();
 const api = useApi();
 const deployments = useDeploymentStore();
 
-// keep track if the user initiated publishing or not
-let publishInitiated = false;
-
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
 const props = defineProps({
@@ -106,18 +102,6 @@ const defaultConfig = computed(() => {
   return configurations.value.find((c) => c.configurationName === 'default');
 });
 
-const onDeployInitiated = () => {
-  publishInitiated = true;
-};
-
-// Refresh the main deployment list on exit if we haven't published.
-// This handles the add new, but did not publish scenaro.
-onBeforeUnmount(() => {
-  if (!publishInitiated && deploymentName.value) {
-    deployments.refreshDeployment(deploymentName.value);
-  }
-});
-
 async function getConfigurations() {
   const response = await api.configurations.getAll();
   configurations.value = response.data;

From 23d632a2870dfd71759fd828255c35e4c5a25241 Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Thu, 18 Jan 2024 13:54:45 -0800
Subject: [PATCH 3/5] don't need normalize URL any longer.

---
 web/src/utils/urls.ts                         | 8 --------
 web/src/views/deployment/DeploymentHeader.vue | 3 +--
 2 files changed, 1 insertion(+), 10 deletions(-)
 delete mode 100644 web/src/utils/urls.ts

diff --git a/web/src/utils/urls.ts b/web/src/utils/urls.ts
deleted file mode 100644
index dba0fb48b..000000000
--- a/web/src/utils/urls.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright (C) 2024 by Posit Software, PBC.
-
-export const normalizeURL = (url: string) => {
-  if (!url.endsWith('/')) {
-    url += '/';
-  }
-  return url;
-};
diff --git a/web/src/views/deployment/DeploymentHeader.vue b/web/src/views/deployment/DeploymentHeader.vue
index cbeb4521b..e3a895daf 100644
--- a/web/src/views/deployment/DeploymentHeader.vue
+++ b/web/src/views/deployment/DeploymentHeader.vue
@@ -122,7 +122,6 @@ import { useEventStore } from 'src/stores/events';
 import { formatDateString } from 'src/utils/date';
 import { newFatalErrorRouteLocation } from 'src/utils/errors';
 import { useRouter } from 'vue-router';
-import { normalizeURL } from 'src/utils/urls';
 
 const api = useApi();
 const eventStore = useEventStore();
@@ -255,7 +254,7 @@ watch(
   ],
   () => {
     const credentials = accounts.value.filter(
-      (account: Account) => normalizeURL(account.url) === normalizeURL(props.deployment.serverUrl)
+      (account: Account) => account.url === props.deployment.serverUrl
     );
     filteredAccountList.value = credentials;
   },

From cb7699d74fe6190c5d4f95607dd97a261bfe32cb Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Tue, 23 Jan 2024 12:20:14 -0800
Subject: [PATCH 4/5] PR updates

---
 web/src/router.ts                             |  1 +
 web/src/stores/deployments.ts                 |  5 +++++
 web/src/views/deployment/DeploymentPage.vue   | 19 +++++--------------
 web/src/views/project-page/DeploymentCard.vue |  9 ++-------
 .../views/project-page/DeploymentsSection.vue | 14 +++++---------
 5 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/web/src/router.ts b/web/src/router.ts
index a56dc84b9..be0fbf5da 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -17,6 +17,7 @@ const routes = [
     path: '/deployments/:name',
     component: DeploymentPage,
     props: (route: RouteLocationNormalizedLoaded) => ({
+      name: route.params.name,
       preferredAccount: route.query.preferredAccount,
     }),
   },
diff --git a/web/src/stores/deployments.ts b/web/src/stores/deployments.ts
index 6b34a6a9f..292bd760b 100644
--- a/web/src/stores/deployments.ts
+++ b/web/src/stores/deployments.ts
@@ -23,6 +23,10 @@ export const useDeploymentStore = defineStore('deployment', () => {
 
   const api = useApi();
 
+  const getDeploymentRef = (deploymentName: string) => {
+    return computed(() => deploymentMap.value[deploymentName]);
+  };
+
   const refreshDeployments = async() => {
     try {
       const newDeploymentMap: DeploymentMap = {};
@@ -111,5 +115,6 @@ export const useDeploymentStore = defineStore('deployment', () => {
     sortedDeployments,
     hasDeployments,
     deploymentMap,
+    getDeploymentRef,
   };
 });
diff --git a/web/src/views/deployment/DeploymentPage.vue b/web/src/views/deployment/DeploymentPage.vue
index e49ab5afa..1432f039e 100644
--- a/web/src/views/deployment/DeploymentPage.vue
+++ b/web/src/views/deployment/DeploymentPage.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useDeploymentStore } from 'src/stores/deployments';
 
 import {
@@ -50,7 +50,6 @@ import FileTree from 'src/components/FileTree.vue';
 import DeploymentHeader from './DeploymentHeader.vue';
 import DeploymentSection from 'src/components/DeploymentSection.vue';
 
-const route = useRoute();
 const router = useRouter();
 const api = useApi();
 const deployments = useDeploymentStore();
@@ -58,20 +57,11 @@ const deployments = useDeploymentStore();
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
 const props = defineProps({
+  name: { type: String, required: true },
   preferredAccount: { type: String, required: false, default: undefined },
 });
 
-const deploymentName = computed(():string => {
-  // route param can be either string | string[]
-  if (Array.isArray(route.params.name)) {
-    return route.params.name[0];
-  }
-  return route.params.name;
-});
-
-const deployment = computed(() => {
-  return deployments.deploymentMap[deploymentName.value];
-});
+const deployment = deployments.getDeploymentRef(props.name);
 
 watch(
   () => deployment.value,
@@ -83,7 +73,8 @@ watch(
         'DeploymentPage::deployment()',
       ));
     }
-  }
+  },
+  { immediate: true }
 );
 
 const configurationSubTitles = computed(() => {
diff --git a/web/src/views/project-page/DeploymentCard.vue b/web/src/views/project-page/DeploymentCard.vue
index c93d6f1bb..3738b9fb4 100644
--- a/web/src/views/project-page/DeploymentCard.vue
+++ b/web/src/views/project-page/DeploymentCard.vue
@@ -5,9 +5,7 @@
     :to="{ name: 'deployments', params: { name: `${deployment.saveName}` }}"
     :title="deployment.saveName"
   >
-    <div
-      class="space-between-y-sm"
-    >
+    <diV class="space-between-y-sm">
       <p>{{ deployment.serverUrl }}</p>
       <p>{{ deployment.id }}</p>
       <DeployProgressLine
@@ -24,7 +22,7 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue';
 
-import { Deployment, isPreDeployment } from 'src/api';
+import { Deployment } from 'src/api';
 import { formatDateString } from 'src/utils/date';
 import { useEventStore } from 'src/stores/events';
 import PCard from 'src/components/PCard.vue';
@@ -40,9 +38,6 @@ const props = defineProps({
 });
 
 const showProgressLine = computed(() => {
-  if (isPreDeployment(props.deployment)) {
-    return false;
-  }
   return (
     eventStore.isPublishActiveByID(props.deployment.id) ||
     (
diff --git a/web/src/views/project-page/DeploymentsSection.vue b/web/src/views/project-page/DeploymentsSection.vue
index 861b1656b..f31c4bdd7 100644
--- a/web/src/views/project-page/DeploymentsSection.vue
+++ b/web/src/views/project-page/DeploymentsSection.vue
@@ -7,14 +7,14 @@
         Deployments
       </h2>
       <p
-        v-if="hasDeployments"
+        v-if="deployments.hasDeployments"
         class="q-mt-xs"
       >
         Your project has been deployed to:
       </p>
     </div>
     <PButton
-      v-if="hasDeployments"
+      v-if="deployments.hasDeployments"
       hierarchy="primary"
       :to="{ name: 'addNewDeployment' }"
     >
@@ -22,12 +22,12 @@
     </PButton>
   </div>
   <div
-    v-if="hasDeployments"
+    v-if="deployments.hasDeployments"
     class="card-grid"
   >
     <div
-      v-for="(deployment, i) in deployments.sortedDeployments"
-      :key="i"
+      v-for="deployment in deployments.sortedDeployments"
+      :key="deployment.deploymentName"
     >
       <DeploymentErrorCard
         v-if="isDeploymentError(deployment)"
@@ -68,7 +68,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useDeploymentStore } from 'src/stores/deployments';
 import { isDeploymentError, isPreDeployment } from 'src/api';
 
@@ -80,9 +79,6 @@ import PCard from 'src/components/PCard.vue';
 
 const deployments = useDeploymentStore();
 
-const hasDeployments = computed(() => {
-  return deployments.sortedDeployments.length > 0;
-});
 </script>
 
 <style scoped lang="scss">

From db5c76c238e6856ae78d0e9f0a75f03a29617434 Mon Sep 17 00:00:00 2001
From: Bill Sager <sager.bill@gmail.com>
Date: Tue, 23 Jan 2024 13:11:05 -0800
Subject: [PATCH 5/5] Update web/src/views/project-page/DeploymentCard.vue

Co-authored-by: Jordan Jensen <jordan.jensen@rstudio.com>
---
 web/src/views/project-page/DeploymentCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/views/project-page/DeploymentCard.vue b/web/src/views/project-page/DeploymentCard.vue
index 3738b9fb4..df6fbc7b1 100644
--- a/web/src/views/project-page/DeploymentCard.vue
+++ b/web/src/views/project-page/DeploymentCard.vue
@@ -5,7 +5,7 @@
     :to="{ name: 'deployments', params: { name: `${deployment.saveName}` }}"
     :title="deployment.saveName"
   >
-    <diV class="space-between-y-sm">
+    <div class="space-between-y-sm">
       <p>{{ deployment.serverUrl }}</p>
       <p>{{ deployment.id }}</p>
       <DeployProgressLine