Fixes a bug where server errors were blocking the form submission

Separates out the state of the input and whether the value of the input
is deemed valid. This allows the form to be resubmitted and if the
server errors are resolved, process the form

ee/app/assets/javascripts/status_checks/components/form.vue

@@ -49,23 +49,30 @@ export default {
   },
   computed: {
     isValid() {
-      return this.nameState && this.urlState && this.branchesState;
+      return this.isValidName && this.isValidUrl && this.isValidBranches;
+    },
+    isValidBranches() {
+      return this.branches.every((branch) => isEqual(branch, ANY_BRANCH) || isNumber(branch?.id));
+    },
+    isValidName() {
+      return Boolean(this.name);
+    },
+    isValidUrl() {
+      return Boolean(this.url) && isSafeURL(this.url);
     },
     branchesState() {
-      return !this.showValidation || this.checkBranchesValidity(this.branches);
+      return !this.showValidation || this.isValidBranches;
     },
     nameState() {
       return (
         !this.showValidation ||
-        (this.checkNameValidity(this.name) &&
-          !this.serverValidationErrors.includes(NAME_TAKEN_SERVER_ERROR))
+        (this.isValidName && !this.serverValidationErrors.includes(NAME_TAKEN_SERVER_ERROR))
       );
     },
     urlState() {
       return (
         !this.showValidation ||
-        (this.checkUrlValidity(this.url) &&
-          !this.serverValidationErrors.includes(URL_TAKEN_SERVER_ERROR))
+        (this.isValidUrl && !this.serverValidationErrors.includes(URL_TAKEN_SERVER_ERROR))
       );
     },
     invalidNameMessage() {
@@ -105,15 +112,6 @@ export default {
 
       this.branchesApiFailed = hasErrored;
     },
-    checkBranchesValidity(branches) {
-      return branches.every((branch) => isEqual(branch, ANY_BRANCH) || isNumber(branch?.id));
-    },
-    checkNameValidity(name) {
-      return Boolean(name);
-    },
-    checkUrlValidity(url) {
-      return Boolean(url) && isSafeURL(url);
-    },
   },
   i18n: {
     form: {

ee/spec/frontend/status_checks/components/form_spec.js

@@ -111,11 +111,19 @@ describe('Status checks form', () => {
     it('shows the serverValidationErrors if given', async () => {
       createWrapper({
         serverValidationErrors: [NAME_TAKEN_SERVER_ERROR, URL_TAKEN_SERVER_ERROR],
+        statusCheck,
       });
 
       await findForm().trigger('submit');
 
-      expect(wrapper.emitted('submit')).toBe(undefined);
+      expect(wrapper.emitted('submit')).toContainEqual([
+        {
+          branches: statusCheck.protectedBranches,
+          name: statusCheck.name,
+          url: statusCheck.externalUrl,
+        },
+      ]);
+
       expect(inputsAreValid()).toBe(false);
       expect(findNameValidation().props('invalidFeedback')).toBe('Name is already taken.');
       expect(findUrlValidation().props('invalidFeedback')).toBe(