From d9107ff046d83e75a2132360a15bffd4f7f46937 Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 26 Oct 2023 14:09:16 -0700
Subject: [PATCH 1/5] Style PublishStep if passed an Error Log

---
 .../components/publishProcess/PublishStep.vue | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/web/src/components/publishProcess/PublishStep.vue b/web/src/components/publishProcess/PublishStep.vue
index c4a61282e..ddbe1aa1e 100644
--- a/web/src/components/publishProcess/PublishStep.vue
+++ b/web/src/components/publishProcess/PublishStep.vue
@@ -5,8 +5,12 @@
     :name="name"
     title="This is a step"
     :icon="icon"
-    :active-icon="icon"
+    :active-icon="hasError ? 'warning' : icon"
+    :active-color="hasError ? 'red' : undefined"
     :header-nav="true"
+    :error="hasError"
+    error-icon="warning"
+    error-color="red"
   >
     <div
       class="text-bold q-pa-sm summaryClass"
@@ -22,7 +26,12 @@
         :key="index"
       >
         <q-item-section>
-          {{ log }}
+          <template v-if="isErrorLog(log)">
+            <span class="text-red text-weight-medium">{{ log.msg }}</span>
+          </template>
+          <template v-else>
+            {{ log }}
+          </template>
         </q-item-section>
       </q-item>
     </q-list>
@@ -30,18 +39,33 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue';
+import { PropType, computed } from 'vue';
 import { useColorStore } from 'src/stores/color';
 import { colorToHex } from 'src/utils/colorValues';
 
+type AdvancedLog = {
+  msg: string,
+  type?: 'error',
+}
+export type Log = string | AdvancedLog
+
+function isAdvancedLog(log: Log): log is AdvancedLog {
+  return !(typeof log === 'string' || log instanceof String);
+}
+function isErrorLog(log: Log): log is AdvancedLog & { type: 'error' } {
+  return isAdvancedLog(log) && log.type === 'error';
+}
+
 const colorStore = useColorStore();
 
-defineProps({
+const props = defineProps({
   name: { type: [String, Number], required: true },
   icon: { type: String, required: true },
   summary: { type: String, required: true },
-  logs: { type: Array as PropType<string[]>, required: false, default: () => [] },
+  logs: { type: Array as PropType<Log[]>, required: false, default: () => [] },
 });
+
+const hasError = computed(() => props.logs.some(log => isErrorLog(log)));
 </script>
 
 <style scoped>

From 6a6ef177414c52b8707735a179adbe2ffbbdb57c Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 26 Oct 2023 14:09:42 -0700
Subject: [PATCH 2/5] Capture publish/createDeployment/failure events

---
 .../publishProcess/steps/CreateDeployment.vue         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/components/publishProcess/steps/CreateDeployment.vue b/web/src/components/publishProcess/steps/CreateDeployment.vue
index 6fd3ecc8c..2a917621c 100644
--- a/web/src/components/publishProcess/steps/CreateDeployment.vue
+++ b/web/src/components/publishProcess/steps/CreateDeployment.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
 
 defineProps({
@@ -25,7 +25,7 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<string[]>([]);
+const messages = ref<Log[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/createDeployment/start', (msg) => {
   messages.value.push(msg.data.message);
@@ -36,9 +36,16 @@ const successCb = $eventStream.addEventMonitorCallback('publish/createDeployment
   done.value = true;
   emit('done');
 });
+const errorCb = $eventStream.addEventMonitorCallback('publish/createDeployment/failure', (msg) => {
+  messages.value.push({
+    msg: msg.data.message,
+    type: 'error',
+  });
+});
 
 onBeforeUnmount(() => {
   $eventStream.delEventFilterCallback(startCb);
   $eventStream.delEventFilterCallback(successCb);
+  $eventStream.delEventFilterCallback(errorCb);
 });
 </script>

From 4f3238cf4073ad9468788451c3b5f3471d41cfeb Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Thu, 26 Oct 2023 14:15:35 -0700
Subject: [PATCH 3/5] Listen to failure events in publishProcess steps

---
 .../components/publishProcess/steps/CreateBundle.vue  | 11 +++++++++--
 .../components/publishProcess/steps/DeployBundle.vue  | 11 +++++++++--
 .../publishProcess/steps/RestorePythonEnvironment.vue | 11 +++++++++--
 .../components/publishProcess/steps/RunContent.vue    | 11 +++++++++--
 .../components/publishProcess/steps/UploadBundle.vue  | 11 +++++++++--
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/web/src/components/publishProcess/steps/CreateBundle.vue b/web/src/components/publishProcess/steps/CreateBundle.vue
index 93acac429..0c2763a15 100644
--- a/web/src/components/publishProcess/steps/CreateBundle.vue
+++ b/web/src/components/publishProcess/steps/CreateBundle.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
 
 defineProps({
@@ -25,7 +25,7 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<string[]>([]);
+const messages = ref<Log[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/createBundle/start', (msg) => {
   messages.value.push(msg.data.message);
@@ -39,11 +39,18 @@ const successCb = $eventStream.addEventMonitorCallback('publish/createBundle/suc
   done.value = true;
   emit('done');
 });
+const failureCb = $eventStream.addEventMonitorCallback('publish/createBundle/failure', (msg) => {
+  messages.value.push({
+    msg: msg.data.message,
+    type: 'error'
+  });
+});
 
 onBeforeUnmount(() => {
   $eventStream.delEventFilterCallback(startCb);
   $eventStream.delEventFilterCallback(logCb);
   $eventStream.delEventFilterCallback(successCb);
+  $eventStream.delEventFilterCallback(failureCb);
 });
 </script>
 
diff --git a/web/src/components/publishProcess/steps/DeployBundle.vue b/web/src/components/publishProcess/steps/DeployBundle.vue
index ad13e818e..b2434c769 100644
--- a/web/src/components/publishProcess/steps/DeployBundle.vue
+++ b/web/src/components/publishProcess/steps/DeployBundle.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
 
 defineProps({
@@ -25,7 +25,7 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<string[]>([]);
+const messages = ref<Log[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/deployBundle/start', (msg) => {
   messages.value.push(msg.data.message);
@@ -36,10 +36,17 @@ const successCb = $eventStream.addEventMonitorCallback('publish/deployBundle/suc
   done.value = true;
   emit('done');
 });
+const failureCb = $eventStream.addEventMonitorCallback('publish/deployBundle/failure', (msg) => {
+  messages.value.push({
+    msg: msg.data.message,
+    type: 'error'
+  });
+});
 
 onBeforeUnmount(() => {
   $eventStream.delEventFilterCallback(startCb);
   $eventStream.delEventFilterCallback(successCb);
+  $eventStream.delEventFilterCallback(failureCb);
 });
 </script>
 
diff --git a/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue b/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue
index d8d9c3345..0a09a0bd6 100644
--- a/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue
+++ b/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
 
 defineProps({
@@ -25,7 +25,7 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<string[]>([]);
+const messages = ref<Log[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv/start', (msg) => {
   messages.value.push(msg.data.message);
@@ -42,12 +42,19 @@ const successCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv
   done.value = true;
   emit('start');
 });
+const failureCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv/failure', (msg) => {
+  messages.value.push({
+    msg: msg.data.message,
+    type: 'error'
+  });
+});
 
 onBeforeUnmount(() => {
   $eventStream.delEventFilterCallback(startCb);
   $eventStream.delEventFilterCallback(logCb);
   $eventStream.delEventFilterCallback(progressCb);
   $eventStream.delEventFilterCallback(successCb);
+  $eventStream.delEventFilterCallback(failureCb);
 });
 </script>
 
diff --git a/web/src/components/publishProcess/steps/RunContent.vue b/web/src/components/publishProcess/steps/RunContent.vue
index 02952634f..484c4891e 100644
--- a/web/src/components/publishProcess/steps/RunContent.vue
+++ b/web/src/components/publishProcess/steps/RunContent.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
 
 defineProps({
@@ -25,7 +25,7 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<string[]>([]);
+const messages = ref<Log[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/runContent/start', (msg) => {
   messages.value.push(msg.data.message);
@@ -39,11 +39,18 @@ const successCb = $eventStream.addEventMonitorCallback('publish/runContent/succe
   done.value = true;
   emit('done');
 });
+const failureCb = $eventStream.addEventMonitorCallback('publish/runContent/failure', (msg) => {
+  messages.value.push({
+    msg: msg.data.message,
+    type: 'error'
+  });
+});
 
 onBeforeUnmount(() => {
   $eventStream.delEventFilterCallback(startCb);
   $eventStream.delEventFilterCallback(logCb);
   $eventStream.delEventFilterCallback(successCb);
+  $eventStream.delEventFilterCallback(failureCb);
 });
 </script>
 
diff --git a/web/src/components/publishProcess/steps/UploadBundle.vue b/web/src/components/publishProcess/steps/UploadBundle.vue
index 4c58df4c9..bd2d199e5 100644
--- a/web/src/components/publishProcess/steps/UploadBundle.vue
+++ b/web/src/components/publishProcess/steps/UploadBundle.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
 
 defineProps({
@@ -25,7 +25,7 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<string[]>([]);
+const messages = ref<Log[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/uploadBundle/start', (msg) => {
   messages.value.push(msg.data.message);
@@ -36,10 +36,17 @@ const successCb = $eventStream.addEventMonitorCallback('publish/uploadBundle/suc
   done.value = true;
   emit('done');
 });
+const failureCb = $eventStream.addEventMonitorCallback('publish/uploadBundle/failure', (msg) => {
+  messages.value.push({
+    msg: msg.data.message,
+    type: 'error'
+  });
+});
 
 onBeforeUnmount(() => {
   $eventStream.delEventFilterCallback(startCb);
   $eventStream.delEventFilterCallback(successCb);
+  $eventStream.delEventFilterCallback(failureCb);
 });
 </script>
 

From 79fdf6ed20d034a28d081247d4a2c9082b3757ab Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 1 Nov 2023 16:04:24 -0700
Subject: [PATCH 4/5] Use EventStreamMessage for logs in PublishStep

---
 web/src/api/types/events.ts                   | 10 +++++++
 .../components/publishProcess/PublishStep.vue | 26 +++++--------------
 .../publishProcess/steps/CreateBundle.vue     | 18 ++++++-------
 .../publishProcess/steps/CreateDeployment.vue | 16 +++++-------
 .../publishProcess/steps/DeployBundle.vue     | 16 +++++-------
 .../steps/RestorePythonEnvironment.vue        | 20 +++++++-------
 .../publishProcess/steps/RunContent.vue       | 18 ++++++-------
 .../publishProcess/steps/UploadBundle.vue     | 16 +++++-------
 8 files changed, 63 insertions(+), 77 deletions(-)

diff --git a/web/src/api/types/events.ts b/web/src/api/types/events.ts
index 5fb174fdd..b5f567856 100644
--- a/web/src/api/types/events.ts
+++ b/web/src/api/types/events.ts
@@ -152,6 +152,16 @@ export interface EventStreamMessage {
   error?: string,
 }
 
+export interface EventStreamMessageWithError extends EventStreamMessage {
+  error: string;
+}
+
+export function isErrorEventStreamMessage(
+  msg: EventStreamMessage
+): msg is EventStreamMessageWithError {
+  return msg.error !== undefined;
+}
+
 export type OnMessageEventSourceCallback = <T extends EventStreamMessage>(msg: T) => void;
 
 export function isEventStreamMessage(o: object): o is EventStreamMessage {
diff --git a/web/src/components/publishProcess/PublishStep.vue b/web/src/components/publishProcess/PublishStep.vue
index ddbe1aa1e..510994bce 100644
--- a/web/src/components/publishProcess/PublishStep.vue
+++ b/web/src/components/publishProcess/PublishStep.vue
@@ -22,15 +22,15 @@
       class="logClass"
     >
       <q-item
-        v-for="(log, index) in logs"
+        v-for="(msg, index) in messages"
         :key="index"
       >
         <q-item-section>
-          <template v-if="isErrorLog(log)">
-            <span class="text-red text-weight-medium">{{ log.msg }}</span>
+          <template v-if="isErrorEventStreamMessage(msg)">
+            <span class="text-red text-weight-medium">{{ msg.data.message }}</span>
           </template>
           <template v-else>
-            {{ log }}
+            {{ msg.data.message }}
           </template>
         </q-item-section>
       </q-item>
@@ -42,19 +42,7 @@
 import { PropType, computed } from 'vue';
 import { useColorStore } from 'src/stores/color';
 import { colorToHex } from 'src/utils/colorValues';
-
-type AdvancedLog = {
-  msg: string,
-  type?: 'error',
-}
-export type Log = string | AdvancedLog
-
-function isAdvancedLog(log: Log): log is AdvancedLog {
-  return !(typeof log === 'string' || log instanceof String);
-}
-function isErrorLog(log: Log): log is AdvancedLog & { type: 'error' } {
-  return isAdvancedLog(log) && log.type === 'error';
-}
+import { EventStreamMessage, isErrorEventStreamMessage } from 'src/api/types/events';
 
 const colorStore = useColorStore();
 
@@ -62,10 +50,10 @@ const props = defineProps({
   name: { type: [String, Number], required: true },
   icon: { type: String, required: true },
   summary: { type: String, required: true },
-  logs: { type: Array as PropType<Log[]>, required: false, default: () => [] },
+  messages: { type: Array as PropType<EventStreamMessage[]>, required: false, default: () => [] },
 });
 
-const hasError = computed(() => props.logs.some(log => isErrorLog(log)));
+const hasError = computed(() => props.messages.some(msg => isErrorEventStreamMessage(msg)));
 </script>
 
 <style scoped>
diff --git a/web/src/components/publishProcess/steps/CreateBundle.vue b/web/src/components/publishProcess/steps/CreateBundle.vue
index 0c2763a15..7e3630794 100644
--- a/web/src/components/publishProcess/steps/CreateBundle.vue
+++ b/web/src/components/publishProcess/steps/CreateBundle.vue
@@ -7,15 +7,16 @@
     icon="compress"
     summary="Collecting and bundling up the files included in your project, so that they can be uploaded to the server within a bundle."
     :done="done"
-    :logs="messages"
+    :messages="messages"
   />
 </template>
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
+import { EventStreamMessage } from 'src/api/types/events';
 
 defineProps({
   name: { type: [String, Number], required: true },
@@ -25,25 +26,22 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<Log[]>([]);
+const messages = ref<EventStreamMessage[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/createBundle/start', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   emit('start');
 });
 const logCb = $eventStream.addEventMonitorCallback('publish/createBundle/log', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
 });
 const successCb = $eventStream.addEventMonitorCallback('publish/createBundle/success', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   done.value = true;
   emit('done');
 });
 const failureCb = $eventStream.addEventMonitorCallback('publish/createBundle/failure', (msg) => {
-  messages.value.push({
-    msg: msg.data.message,
-    type: 'error'
-  });
+  messages.value.push(msg);
 });
 
 onBeforeUnmount(() => {
diff --git a/web/src/components/publishProcess/steps/CreateDeployment.vue b/web/src/components/publishProcess/steps/CreateDeployment.vue
index 2a917621c..a0cb00658 100644
--- a/web/src/components/publishProcess/steps/CreateDeployment.vue
+++ b/web/src/components/publishProcess/steps/CreateDeployment.vue
@@ -7,15 +7,16 @@
     icon="create_new_folder"
     summary="Registering the deployment object with the Posit Connect Server."
     :done="done"
-    :logs="messages"
+    :messages="messages"
   />
 </template>
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
+import { EventStreamMessage } from 'src/api/types/events';
 
 defineProps({
   name: { type: [String, Number], required: true },
@@ -25,22 +26,19 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<Log[]>([]);
+const messages = ref<EventStreamMessage[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/createDeployment/start', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   emit('start');
 });
 const successCb = $eventStream.addEventMonitorCallback('publish/createDeployment/success', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   done.value = true;
   emit('done');
 });
 const errorCb = $eventStream.addEventMonitorCallback('publish/createDeployment/failure', (msg) => {
-  messages.value.push({
-    msg: msg.data.message,
-    type: 'error',
-  });
+  messages.value.push(msg);
 });
 
 onBeforeUnmount(() => {
diff --git a/web/src/components/publishProcess/steps/DeployBundle.vue b/web/src/components/publishProcess/steps/DeployBundle.vue
index b2434c769..72c946346 100644
--- a/web/src/components/publishProcess/steps/DeployBundle.vue
+++ b/web/src/components/publishProcess/steps/DeployBundle.vue
@@ -7,15 +7,16 @@
     icon="publish"
     summary="Associating the uploaded bundle with the deployment object."
     :done="done"
-    :logs="messages"
+    :messages="messages"
   />
 </template>
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
+import { EventStreamMessage } from 'src/api/types/events';
 
 defineProps({
   name: { type: [String, Number], required: true },
@@ -25,22 +26,19 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<Log[]>([]);
+const messages = ref<EventStreamMessage[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/deployBundle/start', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   emit('start');
 });
 const successCb = $eventStream.addEventMonitorCallback('publish/deployBundle/success', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   done.value = true;
   emit('done');
 });
 const failureCb = $eventStream.addEventMonitorCallback('publish/deployBundle/failure', (msg) => {
-  messages.value.push({
-    msg: msg.data.message,
-    type: 'error'
-  });
+  messages.value.push(msg);
 });
 
 onBeforeUnmount(() => {
diff --git a/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue b/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue
index 0a09a0bd6..9f14b0841 100644
--- a/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue
+++ b/web/src/components/publishProcess/steps/RestorePythonEnvironment.vue
@@ -7,15 +7,16 @@
     icon="move_down"
     summary="Installing the dependent python packages on the server in order to reproduce your runtime environment."
     :done="done"
-    :logs="messages"
+    :messages="messages"
   />
 </template>
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
+import { EventStreamMessage } from 'src/api/types/events';
 
 defineProps({
   name: { type: [String, Number], required: true },
@@ -25,28 +26,25 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<Log[]>([]);
+const messages = ref<EventStreamMessage[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv/start', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   emit('start');
 });
 const logCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv/log', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
 });
 const progressCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv/progress', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
 });
 const successCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv/success', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   done.value = true;
   emit('start');
 });
 const failureCb = $eventStream.addEventMonitorCallback('publish/restorePythonEnv/failure', (msg) => {
-  messages.value.push({
-    msg: msg.data.message,
-    type: 'error'
-  });
+  messages.value.push(msg);
 });
 
 onBeforeUnmount(() => {
diff --git a/web/src/components/publishProcess/steps/RunContent.vue b/web/src/components/publishProcess/steps/RunContent.vue
index 484c4891e..242d4fad7 100644
--- a/web/src/components/publishProcess/steps/RunContent.vue
+++ b/web/src/components/publishProcess/steps/RunContent.vue
@@ -7,15 +7,16 @@
     icon="sync"
     summary="Performing execution checks ahead of applying settings."
     :done="done"
-    :logs="messages"
+    :messages="messages"
   />
 </template>
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
+import { EventStreamMessage } from 'src/api/types/events';
 
 defineProps({
   name: { type: [String, Number], required: true },
@@ -25,25 +26,22 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<Log[]>([]);
+const messages = ref<EventStreamMessage[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/runContent/start', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   emit('start');
 });
 const logCb = $eventStream.addEventMonitorCallback('publish/runContent/log', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
 });
 const successCb = $eventStream.addEventMonitorCallback('publish/runContent/success', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   done.value = true;
   emit('done');
 });
 const failureCb = $eventStream.addEventMonitorCallback('publish/runContent/failure', (msg) => {
-  messages.value.push({
-    msg: msg.data.message,
-    type: 'error'
-  });
+  messages.value.push(msg);
 });
 
 onBeforeUnmount(() => {
diff --git a/web/src/components/publishProcess/steps/UploadBundle.vue b/web/src/components/publishProcess/steps/UploadBundle.vue
index bd2d199e5..4ce7d032e 100644
--- a/web/src/components/publishProcess/steps/UploadBundle.vue
+++ b/web/src/components/publishProcess/steps/UploadBundle.vue
@@ -7,15 +7,16 @@
     icon="login"
     summary="Transferring the files from your local workstation to the server."
     :done="done"
-    :logs="messages"
+    :messages="messages"
   />
 </template>
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
 
-import PublishStep, { Log } from 'src/components/publishProcess/PublishStep.vue';
+import PublishStep from 'src/components/publishProcess/PublishStep.vue';
 import { useEventStream } from 'src/plugins/eventStream';
+import { EventStreamMessage } from 'src/api/types/events';
 
 defineProps({
   name: { type: [String, Number], required: true },
@@ -25,22 +26,19 @@ const emit = defineEmits(['start', 'done']);
 const $eventStream = useEventStream();
 
 const done = ref(false);
-const messages = ref<Log[]>([]);
+const messages = ref<EventStreamMessage[]>([]);
 
 const startCb = $eventStream.addEventMonitorCallback('publish/uploadBundle/start', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   emit('start');
 });
 const successCb = $eventStream.addEventMonitorCallback('publish/uploadBundle/success', (msg) => {
-  messages.value.push(msg.data.message);
+  messages.value.push(msg);
   done.value = true;
   emit('done');
 });
 const failureCb = $eventStream.addEventMonitorCallback('publish/uploadBundle/failure', (msg) => {
-  messages.value.push({
-    msg: msg.data.message,
-    type: 'error'
-  });
+  messages.value.push(msg);
 });
 
 onBeforeUnmount(() => {

From 66f712d016da405f945967b1888ccdaec2488dbd Mon Sep 17 00:00:00 2001
From: Jordan Jensen <jordan.jensen@rstudio.com>
Date: Wed, 1 Nov 2023 16:11:51 -0700
Subject: [PATCH 5/5] Use color store for text-error CSS class

---
 web/src/components/publishProcess/PublishStep.vue | 6 +++++-
 web/src/stores/color.ts                           | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/components/publishProcess/PublishStep.vue b/web/src/components/publishProcess/PublishStep.vue
index 510994bce..6e56d3c89 100644
--- a/web/src/components/publishProcess/PublishStep.vue
+++ b/web/src/components/publishProcess/PublishStep.vue
@@ -27,7 +27,7 @@
       >
         <q-item-section>
           <template v-if="isErrorEventStreamMessage(msg)">
-            <span class="text-red text-weight-medium">{{ msg.data.message }}</span>
+            <span class="text-error text-weight-medium">{{ msg.data.message }}</span>
           </template>
           <template v-else>
             {{ msg.data.message }}
@@ -69,4 +69,8 @@ const hasError = computed(() => props.messages.some(msg => isErrorEventStreamMes
   background-color: v-bind('colorToHex(colorStore.activePallete.progress.log.background)');
   border: solid v-bind('colorToHex(colorStore.activePallete.progress.summary.border)') 1px;
 }
+
+.text-error {
+  color: v-bind('colorToHex(colorStore.activePallete.textError)')
+}
 </style>
diff --git a/web/src/stores/color.ts b/web/src/stores/color.ts
index 284b850af..fa0dfe370 100644
--- a/web/src/stores/color.ts
+++ b/web/src/stores/color.ts
@@ -18,6 +18,7 @@ export const useColorStore = defineStore('color', () => {
       textInput: {
         active: 'grey-1',
       },
+      textError: 'red',
       outline: 'grey-6',
       icon: {
         fill: 'grey-4',
@@ -90,6 +91,7 @@ export const useColorStore = defineStore('color', () => {
       textInput: {
         active: 'grey-10',
       },
+      textError: 'red',
       outline: 'grey-10',
       icon: {
         fill: 'grey-8',