fix(appreg): don't show app reg modal title while state is pending (#490

)
Kong · Apr 12, 2024 · 43e4658 · 43e4658
1 parent 74e3af1
commit 43e4658
Showing 1 changed file with 21 additions and 15 deletions.
diff --git a/src/components/ViewSpecRegistrationModal.vue b/src/components/ViewSpecRegistrationModal.vue
@@ -3,13 +3,13 @@
     data-testid="application-registration-modal"
     class="application-registration-modal"
     :is-visible="isVisible"
-    :title="applications.length ? modalText.title : helpText.applicationRegistration.noApplications"
+    :title="modalText.title"
     @proceed="submitSelection"
     @canceled="closeModal"
   >
     <template #header-content>
       <span class="color-text_colors-primary">
-        {{ applications.length ? modalText.title : helpText.applicationRegistration.noApplications }}
+        {{ modalText.title }}
       </span>
     </template>
     <template #body-content>
@@ -232,21 +232,27 @@ export default defineComponent({
       })
     )
 
+    const defaultModalText = helpText.applicationRegistration.modalApplicationRegistrationDefault
+    const successModalText = helpText.applicationRegistration.modalApplicationRegistrationStatusIsPending
+
+    const defaultModalTitle = computed(() => {
+      if (currentState.value.matches('pending')) {
+        return ''
+      }
+
+      if (applications.value.length) {
+        return defaultModalText.title(props.product?.name, props.version?.name)
+      }
+
+      return helpText.applicationRegistration.noApplications
+    })
+
     const modalText = computed(() => {
-      const defaultModal = helpText.applicationRegistration.modalApplicationRegistrationDefault
-      const successModal = helpText.applicationRegistration.modalApplicationRegistrationStatusIsPending
+      if (currentState.value.matches('success_application_status_is_pending')) {
+        return successModalText
+      }
 
-      return {
-        default: {
-          title: defaultModal.title(props.product?.name, props.version?.name),
-          buttonText: defaultModal.buttonText
-        },
-        success: {
-          title: successModal.title,
-          body: successModal.body,
-          buttonText: successModal.buttonText
-        }
-      }[currentState.value.matches('success_application_status_is_pending') ? 'success' : 'default']
+      return { ...defaultModalText, title: defaultModalTitle.value, body: '' }
     })
 
     const authStrategyId = computed(() => {