chore: display prompt error message (#32016)

Author: estrada9166

packages/app/src/prompt/PromptErrorMessage.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="max-h-[700px] w-[912px] overflow-auto bg-gray-1000 rounded mx-auto ring-[#9095AD40] ring-4 relative">
+    <div class="px-[24px] py-[12px] flex items-center justify-between border-b border-gray-900">
+      <div class="flex items-center gap-2">
+        <span class="text-white text-sm">cy.prompt</span>
+        <div class="w-[32px] h-[1px] bg-gray-900" />
+        <span class="text-gray-300 text-sm">Get code</span>
+      </div>
+      <IconActionDeleteLarge
+        stroke-color="gray-400"
+        class="cursor-pointer"
+        data-cy="close-modal-button"
+        @click="onClose"
+      />
+    </div>
+    <div
+      class="flex flex-col items-center justify-center h-[272px] p-[24px] gap-[24px]"
+      data-cy="error-message"
+    >
+      <IconTechnologyDashboardFail
+        size="48"
+        stroke-color="gray-500"
+        fill-color="gray-900"
+      />
+      <div class="flex flex-col gap-[4px] text-center">
+        <span class="text-white">Something went wrong</span>
+        <span class="text-gray-200 text-sm">
+          There was a problem with loading the prompt code. Our team has been
+          notified. If the problem persists, please try again later.
+        </span>
+      </div>
+    </div>
+
+    <div class="px-[24px] py-[12px] mt-[12px] border-t border-gray-900 bg-gray-950">
+      <Button
+        data-cy="close-modal-button"
+        @click="onClose"
+      >
+        Close
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  IconActionDeleteLarge,
+  IconTechnologyDashboardFail,
+} from '@cypress-design/vue-icon'
+import Button from '@cypress-design/vue-button'
+
+defineProps<{
+  onClose: () => void
+}>()
+</script>

packages/app/src/prompt/PromptGetCodeModal.vue

@@ -8,7 +8,14 @@
   >
     <div class="flex min-h-screen items-center justify-center">
       <DialogOverlay class="bg-gray-800 opacity-90 fixed sm:inset-0" />
-      <div ref="container" />
+      <PromptErrorMessage
+        v-if="hasError"
+        :on-close="closeModal"
+      />
+      <div
+        v-else
+        ref="container"
+      />
     </div>
   </Dialog>
 </template>
@@ -19,6 +26,7 @@ import { init, loadRemote } from '@module-federation/runtime'
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import type { CyPromptAppDefaultShape, GetCodeModalContentsShape } from './prompt-app-types'
 import { usePromptStore } from '../store/prompt-store'
+import PromptErrorMessage from './PromptErrorMessage.vue'
 
 interface CyPromptApp { default: CyPromptAppDefaultShape }
 
@@ -44,13 +52,13 @@ const closeModal = () => {
 }
 
 const container = ref<HTMLDivElement | null>(null)
-const error = ref<string | null>(null)
+const hasError = ref<boolean>(false)
 const ReactGetCodeModalContents = ref<GetCodeModalContentsShape | null>(null)
 const containerReactRootMap = new WeakMap<HTMLElement, Root>()
 const promptStore = usePromptStore()
 
 const maybeRenderReactComponent = () => {
-  if (!ReactGetCodeModalContents.value || !!error.value || !container.value) {
+  if (!ReactGetCodeModalContents.value || !!hasError.value || !container.value) {
     return
   }
 
@@ -122,15 +130,15 @@ init({
 // means that the bundle has been downloaded
 loadRemote<CyPromptApp>('cy-prompt').then((module) => {
   if (!module?.default) {
-    error.value = 'The panel was not loaded successfully'
+    hasError.value = true
 
     return
   }
 
   ReactGetCodeModalContents.value = module.default.GetCodeModalContents
   maybeRenderReactComponent()
 }).catch((e) => {
-  error.value = e.message
+  hasError.value = true
 })
 
 </script>

packages/app/src/prompt/PromptMoreInfoNeededModal.vue

@@ -8,7 +8,14 @@
   >
     <div class="flex min-h-screen items-center justify-center">
       <DialogOverlay class="bg-gray-800 opacity-90 fixed sm:inset-0" />
-      <div ref="container" />
+      <PromptErrorMessage
+        v-if="hasError"
+        :on-close="closeModal"
+      />
+      <div
+        v-else
+        ref="container"
+      />
     </div>
   </Dialog>
 </template>
@@ -19,6 +26,7 @@ import { init, loadRemote } from '@module-federation/runtime'
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import type { CyPromptAppDefaultShape, MoreInfoNeededModalContentsShape } from './prompt-app-types'
 import { usePromptStore } from '../store/prompt-store'
+import PromptErrorMessage from './PromptErrorMessage.vue'
 
 interface CyPromptApp { default: CyPromptAppDefaultShape }
 
@@ -44,13 +52,13 @@ const closeModal = () => {
 }
 
 const container = ref<HTMLDivElement | null>(null)
-const error = ref<string | null>(null)
+const hasError = ref<boolean>(false)
 const ReactMoreInfoNeededModalContents = ref<MoreInfoNeededModalContentsShape | null>(null)
 const containerReactRootMap = new WeakMap<HTMLElement, Root>()
 const promptStore = usePromptStore()
 
 const maybeRenderReactComponent = () => {
-  if (!ReactMoreInfoNeededModalContents.value || !!error.value || !container.value) {
+  if (!ReactMoreInfoNeededModalContents.value || !!hasError.value || !container.value) {
     return
   }
 
@@ -124,15 +132,15 @@ init({
 // means that the bundle has been downloaded
 loadRemote<CyPromptApp>('cy-prompt').then((module) => {
   if (!module?.default) {
-    error.value = 'The panel was not loaded successfully'
+    hasError.value = true
 
     return
   }
 
   ReactMoreInfoNeededModalContents.value = module.default.MoreInfoNeededModalContents
   maybeRenderReactComponent()
 }).catch((e) => {
-  error.value = e.message
+  hasError.value = true
 })
 
 </script>