Add latest changes from gitlab-org/gitlab@master

3 files changed, 67 insertions, 4 deletions

diff --git a/app/assets/javascripts/environments/components/new_environment.vue b/app/assets/javascripts/environments/components/new_environment.vue
index 4b58d133817..3fcfd27a476 100644
--- a/app/assets/javascripts/environments/components/new_environment.vue
+++ b/app/assets/javascripts/environments/components/new_environment.vue
@@ -2,13 +2,16 @@
 import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import createEnvironment from '../graphql/mutations/create_environment.mutation.graphql';
 import EnvironmentForm from './environment_form.vue';
 
 export default {
   components: {
     EnvironmentForm,
   },
-  inject: ['projectEnvironmentsPath'],
+  mixins: [glFeatureFlagsMixin()],
+  inject: ['projectEnvironmentsPath', 'projectPath'],
   data() {
     return {
       environment: {
@@ -23,6 +26,45 @@ export default {
       this.environment = env;
     },
     onSubmit() {
+      if (this.glFeatures?.environmentSettingsToGraphql) {
+        this.createWithGraphql();
+      } else {
+        this.createWithAxios();
+      }
+    },
+    async createWithGraphql() {
+      this.loading = true;
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: createEnvironment,
+          variables: {
+            input: {
+              name: this.environment.name,
+              externalUrl: this.environment.externalUrl,
+              projectPath: this.projectPath,
+            },
+          },
+        });
+
+        const { errors } = data.environmentCreate;
+
+        if (errors.length > 0) {
+          throw new Error(errors[0]?.message ?? errors[0]);
+        }
+
+        const { path } = data.environmentCreate.environment;
+
+        if (path) {
+          visitUrl(path);
+        }
+      } catch (error) {
+        const { message } = error;
+        createAlert({ message });
+      } finally {
+        this.loading = false;
+      }
+    },
+    createWithAxios() {
       this.loading = true;
       axios
         .post(this.projectEnvironmentsPath, {
diff --git a/app/assets/javascripts/environments/graphql/mutations/create_environment.mutation.graphql b/app/assets/javascripts/environments/graphql/mutations/create_environment.mutation.graphql
new file mode 100644
index 00000000000..99330ecca80
--- /dev/null
+++ b/app/assets/javascripts/environments/graphql/mutations/create_environment.mutation.graphql
@@ -0,0 +1,9 @@
+mutation createEnvironment($input: EnvironmentCreateInput!) {
+  environmentCreate(input: $input) {
+    environment {
+      id
+      path
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/environments/new.js b/app/assets/javascripts/environments/new.js
index 76aaf809d17..5dd112ac5e6 100644
--- a/app/assets/javascripts/environments/new.js
+++ b/app/assets/javascripts/environments/new.js
@@ -1,11 +1,23 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import NewEnvironment from './components/new_environment.vue';
+import { apolloProvider } from './graphql/client';
 
-export default (el) =>
-  new Vue({
+Vue.use(VueApollo);
+
+export default (el) => {
+  if (!el) {
+    return null;
+  }
+
+  const { projectEnvironmentsPath, projectPath } = el.dataset;
+
+  return new Vue({
     el,
-    provide: { projectEnvironmentsPath: el.dataset.projectEnvironmentsPath },
+    apolloProvider: apolloProvider(),
+    provide: { projectEnvironmentsPath, projectPath },
     render(h) {
       return h(NewEnvironment);
     },
   });
+};