new project Vue component handles redundant env name validation

js/components/forms/new_project.js

@@ -32,7 +32,8 @@ export default {
     ).map(createEnvironment)
 
     return {
-      showError: false,
+      showMissingError: false,
+      showUniqueError: false,
       environments,
       name,
     }
@@ -44,7 +45,11 @@ export default {
 
   updated: function() {
     if (this.environmentsHaveNames()) {
-      this.showError = false
+      this.showMissingError = false
+    }
+
+    if (this.envNamesAreUnique()) {
+      this.showUniqueError = false
     }
   },
 
@@ -63,8 +68,13 @@ export default {
       return this.environments.every((e) => e.name !== "")
     },
 
+    envNamesAreUnique: function () {
+      const names = this.environments.map((e) => e.name)
+      return [...new Set(names)].length == this.environments.length
+    },
+
     validateAndOpenModal: function (modalName) {
-      const textInputs = this.$children.reduce((previous, newVal) => {
+      const childrenValid = this.$children.reduce((previous, newVal) => {
         // display textInput error if it is not valid
         if (!newVal.showValid) {
           newVal.showError = true
@@ -73,12 +83,19 @@ export default {
         return newVal.showValid && previous
       }, true)
 
-      const isValid = textInputs && this.environmentsHaveNames()
+      const hasNames = this.environmentsHaveNames()
+      const uniqNames = this.envNamesAreUnique()
 
-      if (isValid) {
+      if (!hasNames) {
+        this.showMissingError = true
+      }
+
+      if (!uniqNames) {
+        this.showUniqueError = true
+      }
+
+      if (childrenValid && hasNames && uniqNames) {
         this.openModal(modalName)
-      } else {
-        this.showError = true
       }
     }
   }

templates/fragments/edit_project_form.html

@@ -42,14 +42,12 @@
       </div>
     </div>
 
-    {% if form.environment_names.errors %}
+    <div v-if="showMissingError">
-      {% for error in form.environment_names.errors %}
-        {{ Alert(error, level="error") }}
-      {% endfor %}
-    {% endif %}
-    <div v-if="showError">
       {{ Alert("Provide at least one environment name.", level="error") }}
     </div>
+    <div v-if="showUniqueError">
+      {{ Alert("Environment names must be unique.", level="error") }}
+    </div>
 
       <div class="block-list project-list-item">
         <header class="block-list__header block-list__header--grow">