1 files changed, 146 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/components/environment_form.vue b/app/assets/javascripts/environments/components/environment_form.vue
new file mode 100644
index 00000000000..6db8fe24e72
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_form.vue
@@ -0,0 +1,146 @@
+<script>
+import { GlButton, GlForm, GlFormGroup, GlFormInput, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { isAbsolute } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    environment: {
+      required: true,
+      type: Object,
+    },
+    title: {
+      required: true,
+      type: String,
+    },
+    cancelPath: {
+      required: true,
+      type: String,
+    },
+    loading: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+  },
+  i18n: {
+    header: __('Environments'),
+    helpMessage: __(
+      'Environments allow you to track deployments of your application. %{linkStart}More information%{linkEnd}.',
+    ),
+    nameLabel: __('Name'),
+    nameFeedback: __('This field is required'),
+    urlLabel: __('External URL'),
+    urlFeedback: __('The URL should start with http:// or https://'),
+    save: __('Save'),
+    cancel: __('Cancel'),
+  },
+  helpPagePath: helpPagePath('ci/environments/index.md'),
+  data() {
+    return {
+      visited: {
+        name: null,
+        url: null,
+      },
+    };
+  },
+  computed: {
+    valid() {
+      return {
+        name: this.visited.name && this.environment.name !== '',
+        url: this.visited.url && isAbsolute(this.environment.externalUrl),
+      };
+    },
+  },
+  methods: {
+    onChange(env) {
+      this.$emit('change', env);
+    },
+    visit(field) {
+      this.visited[field] = true;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <h3 class="page-title">
+      {{ title }}
+    </h3>
+    <hr />
+    <div class="row gl-mt-3 gl-mb-3">
+      <div class="col-lg-3">
+        <h4 class="gl-mt-0">
+          {{ $options.i18n.header }}
+        </h4>
+        <p>
+          <gl-sprintf :message="$options.i18n.helpMessage">
+            <template #link="{ content }">
+              <gl-link :href="$options.helpPagePath">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </div>
+      <gl-form
+        id="new_environment"
+        :aria-label="title"
+        class="col-lg-9"
+        @submit.prevent="$emit('submit')"
+      >
+        <gl-form-group
+          :label="$options.i18n.nameLabel"
+          label-for="environment_name"
+          :state="valid.name"
+          :invalid-feedback="$options.i18n.nameFeedback"
+        >
+          <gl-form-input
+            id="environment_name"
+            :value="environment.name"
+            :state="valid.name"
+            name="environment[name]"
+            required
+            @input="onChange({ ...environment, name: $event })"
+            @blur="visit('name')"
+          />
+        </gl-form-group>
+        <gl-form-group
+          :label="$options.i18n.urlLabel"
+          :state="valid.url"
+          :invalid-feedback="$options.i18n.urlFeedback"
+          label-for="environment_external_url"
+        >
+          <gl-form-input
+            id="environment_external_url"
+            :value="environment.externalUrl"
+            :state="valid.url"
+            name="environment[external_url]"
+            type="url"
+            @input="onChange({ ...environment, externalUrl: $event })"
+            @blur="visit('url')"
+          />
+        </gl-form-group>
+
+        <div class="form-actions">
+          <gl-button
+            :loading="loading"
+            type="submit"
+            variant="confirm"
+            name="commit"
+            class="js-no-auto-disable"
+            >{{ $options.i18n.save }}</gl-button
+          >
+          <gl-button :href="cancelPath">{{ $options.i18n.cancel }}</gl-button>
+        </div>
+      </gl-form>
+    </div>
+  </div>
+</template>