Break new-application JS component into form steps

js/components/forms/new_application/environments.js

@@ -0,0 +1,110 @@
+import FormMixin from '../../../mixins/form'
+import textinput from '../../text_input'
+import * as R from 'ramda'
+
+const createEnvironment = name => ({ name })
+
+export default {
+  name: 'application-environments',
+
+  mixins: [FormMixin],
+
+  components: {
+    textinput,
+  },
+
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: function() {
+    const { environment_names, name } = this.initialData
+
+    const environments = (environment_names.length > 0
+      ? environment_names
+      : ['Development', 'Testing', 'Staging', 'Production']
+    ).map(createEnvironment)
+
+    return {
+      validations: [
+        {
+          func: this.hasEnvironments,
+          message: 'Provide at least one environment name.',
+        },
+        {
+          func: this.environmentsHaveNames,
+          message: 'Environment names cannot be empty.',
+        },
+        {
+          func: this.envNamesAreUnique,
+          message: 'Environment names must be unique.',
+        },
+      ],
+      errors: [],
+      environments,
+      name,
+      changed: true,
+    }
+  },
+
+  mounted: function() {
+    this.$root.$on('onEnvironmentAdded', this.addEnvironment)
+    this.validate()
+  },
+
+  methods: {
+    addEnvironment: function(_event) {
+      this.changed = false
+      this.environments.push(createEnvironment(''))
+    },
+
+    removeEnvironment: function(index) {
+      if (this.environments.length > 1) {
+        this.environments.splice(index, 1)
+      }
+      this.validate()
+    },
+
+    validate: function() {
+      // Only take first error message
+      this.errors = R.pipe(
+        R.map(validation =>
+          !validation.func() ? validation.message : undefined
+        ),
+        R.filter(Boolean),
+        R.take(1)
+      )(this.validations)
+      this.invalid = this.errors.length > 0
+    },
+
+    hasEnvironments: function() {
+      return (
+        this.environments.length > 0 &&
+        this.environments.some(e => e.name !== '')
+      )
+    },
+
+    environmentsHaveNames: function() {
+      if (this.environments.length > 1) {
+        // only want to display this error if we have multiple envs and one or
+        // more do not have names
+        return this.environments.every(e => e.name !== '')
+      } else {
+        return true
+      }
+    },
+
+    envNamesAreUnique: function() {
+      const names = this.environments.map(e => e.name)
+      return names.every((n, index) => names.indexOf(n) === index)
+    },
+
+    onInput: function(e) {
+      this.changed = true
+      this.validate()
+    },
+  },
+}

js/components/forms/new_application/name_and_description.js

@@ -0,0 +1,19 @@
+import FormMixin from '../../../mixins/form'
+import textinput from '../../text_input'
+import * as R from 'ramda'
+
+export default {
+  name: 'application-name-and-description',
+
+  mixins: [FormMixin],
+
+  components: {
+    textinput,
+  },
+
+  data: function() {
+    return {
+      errors: [],
+    }
+  },
+}