Improve ArkoseLabs challenge UX

This does a few UX improvements to the ArkoseLabs challenge:
- We now show the "complete challenge" error only if the ArkoseLabs
  iframe was actually shown. This prevents the container from showing up
  in cases where the challenge is being suppressed.
- If the verification process was triggered as a result of submitting
  the form, we now re-submit the form if the chalenge is being
  suppressed. This fixes weird states where you might have to manually
  submit the form twice if you had filled in your information fast
  enough.

ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue

@@ -58,11 +58,8 @@ export default {
     };
   },
   computed: {
-    isVisible() {
-      return this.arkoseLabsIframeShown || this.showErrorContainer;
-    },
     showErrorContainer() {
-      return this.showArkoseNeededError || this.showArkoseFailure;
+      return (this.arkoseLabsIframeShown && this.showArkoseNeededError) || this.showArkoseFailure;
     },
   },
   watch: {
@@ -91,6 +88,7 @@ export default {
       }
 
       e.preventDefault();
+      this.submitOnSuppress = true;
       if (!this.arkoseInitialized) {
         // If the challenge hasn't been initialized yet, we trigger a check now to make sure it
         // wasn't skipped by submitting the form without the username field ever losing the focus.
@@ -102,7 +100,6 @@ export default {
       }
     },
     async checkAndSubmit(form) {
-      this.submitOnSuppress = true;
       await this.checkIfNeedsChallenge();
       if (!this.arkoseInitialized) {
         // If the challenge still hasn't been initialized, the user definitely doesn't need one and
@@ -194,16 +191,17 @@ export default {
 </script>
 
 <template>
-  <div v-show="isVisible">
+  <div>
+    <dom-element-listener :selector="usernameSelector" @blur="checkIfNeedsChallenge" />
+    <dom-element-listener :selector="formSelector" @submit="onSubmit" />
     <input
       v-if="arkoseInitialized"
       :name="$options.VERIFICATION_TOKEN_INPUT_NAME"
       type="hidden"
       :value="arkoseToken"
     />
-    <dom-element-listener :selector="usernameSelector" @blur="checkIfNeedsChallenge" />
-    <dom-element-listener :selector="formSelector" @submit="onSubmit" />
     <div
+      v-show="arkoseLabsIframeShown"
       class="gl-display-flex gl-justify-content-center gl-mt-3 gl-mb-n3"
       :class="arkoseContainerClass"
       data-testid="arkose-labs-challenge"

ee/spec/frontend/arkose_labs/components/sign_in_arkose_app_spec.js

@@ -41,6 +41,7 @@ describe('SignInArkoseApp', () => {
   const findSignInForm = () => findByTestId('sign-in-form');
   const findUsernameInput = () => findByTestId('username-field');
   const findSignInButton = () => findByTestId('sign-in-button');
+  const findChallengeContainer = () => wrapper.findByTestId('arkose-labs-challenge');
   const findArkoseLabsErrorMessage = () => wrapper.findByTestId('arkose-labs-error-message');
   const findArkoseLabsVerificationTokenInput = () =>
     wrapper.find('input[name="arkose_labs_token"]');
@@ -211,6 +212,7 @@ describe('SignInArkoseApp', () => {
       itInitializesArkoseLabs();
 
       it('shows ArkoseLabs error when submitting the form', async () => {
+        onShown();
         submitForm();
         await nextTick();
 
@@ -219,12 +221,12 @@ describe('SignInArkoseApp', () => {
       });
 
       it('un-hides the challenge container once the iframe has been shown', async () => {
-        expect(wrapper.isVisible()).toBe(false);
+        expect(findChallengeContainer().isVisible()).toBe(false);
 
         onShown();
         await nextTick();
 
-        expect(wrapper.isVisible()).toBe(true);
+        expect(findChallengeContainer().isVisible()).toBe(true);
       });
 
       it('shows an error alert if the challenge fails to load', async () => {