Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

7 files changed, 95 insertions, 25 deletions

diff --git a/app/assets/javascripts/error_tracking_settings/components/app.vue b/app/assets/javascripts/error_tracking_settings/components/app.vue
index d188574e721..e12d9cc2b07 100644
--- a/app/assets/javascripts/error_tracking_settings/components/app.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormCheckbox, GlFormRadioGroup, GlFormRadio } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import ErrorTrackingForm from './error_tracking_form.vue';
 import ProjectDropdown from './project_dropdown.vue';
@@ -10,6 +10,8 @@ export default {
     GlButton,
     GlFormCheckbox,
     GlFormGroup,
+    GlFormRadioGroup,
+    GlFormRadio,
     ProjectDropdown,
   },
   props: {
@@ -22,6 +24,10 @@ export default {
       type: String,
       required: true,
     },
+    initialIntegrated: {
+      type: String,
+      required: true,
+    },
     initialProject: {
       type: String,
       required: false,
@@ -49,12 +55,20 @@ export default {
       'isProjectInvalid',
       'projectSelectionLabel',
     ]),
-    ...mapState(['enabled', 'projects', 'selectedProject', 'settingsLoading', 'token']),
+    ...mapState([
+      'enabled',
+      'integrated',
+      'projects',
+      'selectedProject',
+      'settingsLoading',
+      'token',
+    ]),
   },
   created() {
     this.setInitialState({
       apiHost: this.initialApiHost,
       enabled: this.initialEnabled,
+      integrated: this.initialIntegrated,
       project: this.initialProject,
       token: this.initialToken,
       listProjectsEndpoint: this.listProjectsEndpoint,
@@ -62,7 +76,13 @@ export default {
     });
   },
   methods: {
-    ...mapActions(['setInitialState', 'updateEnabled', 'updateSelectedProject', 'updateSettings']),
+    ...mapActions([
+      'setInitialState',
+      'updateEnabled',
+      'updateIntegrated',
+      'updateSelectedProject',
+      'updateSettings',
+    ]),
     handleSubmit() {
       this.updateSettings();
     },
@@ -76,27 +96,44 @@ export default {
       :label="s__('ErrorTracking|Enable error tracking')"
       label-for="error-tracking-enabled"
     >
-      <gl-form-checkbox
-        id="error-tracking-enabled"
-        :checked="enabled"
-        @change="updateEnabled($event)"
-      >
+      <gl-form-checkbox id="error-tracking-enabled" :checked="enabled" @change="updateEnabled">
         {{ s__('ErrorTracking|Active') }}
       </gl-form-checkbox>
     </gl-form-group>
-    <error-tracking-form />
-    <div class="form-group">
-      <project-dropdown
-        :has-projects="hasProjects"
-        :invalid-project-label="invalidProjectLabel"
-        :is-project-invalid="isProjectInvalid"
-        :dropdown-label="dropdownLabel"
-        :project-selection-label="projectSelectionLabel"
-        :projects="projects"
-        :selected-project="selectedProject"
-        :token="token"
-        @select-project="updateSelectedProject"
-      />
+    <gl-form-group
+      :label="s__('ErrorTracking|Error tracking backend')"
+      data-testid="tracking-backend-settings"
+    >
+      <gl-form-radio-group name="explicit" :checked="integrated" @change="updateIntegrated">
+        <gl-form-radio name="error-tracking-integrated" :value="false">
+          {{ __('Sentry') }}
+          <template #help>
+            {{ __('Requires you to deploy or set up cloud-hosted Sentry.') }}
+          </template>
+        </gl-form-radio>
+        <gl-form-radio name="error-tracking-integrated" :value="true">
+          {{ __('GitLab') }}
+          <template #help>
+            {{ __('Uses GitLab as a lightweight alternative to Sentry.') }}
+          </template>
+        </gl-form-radio>
+      </gl-form-radio-group>
+    </gl-form-group>
+    <div v-if="!integrated" class="js-sentry-setting-form" data-testid="sentry-setting-form">
+      <error-tracking-form />
+      <div class="form-group">
+        <project-dropdown
+          :has-projects="hasProjects"
+          :invalid-project-label="invalidProjectLabel"
+          :is-project-invalid="isProjectInvalid"
+          :dropdown-label="dropdownLabel"
+          :project-selection-label="projectSelectionLabel"
+          :projects="projects"
+          :selected-project="selectedProject"
+          :token="token"
+          @select-project="updateSelectedProject"
+        />
+      </div>
     </div>
     <gl-button
       :disabled="settingsLoading"
diff --git a/app/assets/javascripts/error_tracking_settings/index.js b/app/assets/javascripts/error_tracking_settings/index.js
index ce315963723..324b3292834 100644
--- a/app/assets/javascripts/error_tracking_settings/index.js
+++ b/app/assets/javascripts/error_tracking_settings/index.js
@@ -5,7 +5,15 @@ import createStore from './store';
 export default () => {
   const formContainerEl = document.querySelector('.js-error-tracking-form');
   const {
-    dataset: { apiHost, enabled, project, token, listProjectsEndpoint, operationsSettingsEndpoint },
+    dataset: {
+      apiHost,
+      enabled,
+      integrated,
+      project,
+      token,
+      listProjectsEndpoint,
+      operationsSettingsEndpoint,
+    },
   } = formContainerEl;
 
   return new Vue({
@@ -16,6 +24,7 @@ export default () => {
         props: {
           initialApiHost: apiHost,
           initialEnabled: enabled,
+          initialIntegrated: integrated,
           initialProject: project,
           initialToken: token,
           listProjectsEndpoint,
diff --git a/app/assets/javascripts/error_tracking_settings/store/actions.js b/app/assets/javascripts/error_tracking_settings/store/actions.js
index d402d0336d9..972ad58c617 100644
--- a/app/assets/javascripts/error_tracking_settings/store/actions.js
+++ b/app/assets/javascripts/error_tracking_settings/store/actions.js
@@ -79,6 +79,10 @@ export const updateEnabled = ({ commit }, enabled) => {
   commit(types.UPDATE_ENABLED, enabled);
 };
 
+export const updateIntegrated = ({ commit }, integrated) => {
+  commit(types.UPDATE_INTEGRATED, integrated);
+};
+
 export const updateToken = ({ commit }, token) => {
   commit(types.UPDATE_TOKEN, token);
   commit(types.RESET_CONNECT);
diff --git a/app/assets/javascripts/error_tracking_settings/store/mutation_types.js b/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
index bf3df383ddc..2cfa14c9b64 100644
--- a/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
+++ b/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
@@ -6,6 +6,7 @@ export const UPDATE_API_HOST = 'UPDATE_API_HOST';
 export const UPDATE_CONNECT_ERROR = 'UPDATE_CONNECT_ERROR';
 export const UPDATE_CONNECT_SUCCESS = 'UPDATE_CONNECT_SUCCESS';
 export const UPDATE_ENABLED = 'UPDATE_ENABLED';
+export const UPDATE_INTEGRATED = 'UPDATE_INTEGRATED';
 export const UPDATE_SELECTED_PROJECT = 'UPDATE_SELECTED_PROJECT';
 export const UPDATE_SETTINGS_LOADING = 'UPDATE_SETTINGS_LOADING';
 export const UPDATE_TOKEN = 'UPDATE_TOKEN';
diff --git a/app/assets/javascripts/error_tracking_settings/store/mutations.js b/app/assets/javascripts/error_tracking_settings/store/mutations.js
index 2242169aa1e..a1b43ccaaee 100644
--- a/app/assets/javascripts/error_tracking_settings/store/mutations.js
+++ b/app/assets/javascripts/error_tracking_settings/store/mutations.js
@@ -20,9 +20,18 @@ export default {
   },
   [types.SET_INITIAL_STATE](
     state,
-    { apiHost, enabled, project, token, listProjectsEndpoint, operationsSettingsEndpoint },
+    {
+      apiHost,
+      enabled,
+      integrated,
+      project,
+      token,
+      listProjectsEndpoint,
+      operationsSettingsEndpoint,
+    },
   ) {
     state.enabled = parseBoolean(enabled);
+    state.integrated = parseBoolean(integrated);
     state.apiHost = apiHost;
     state.token = token;
     state.listProjectsEndpoint = listProjectsEndpoint;
@@ -38,6 +47,9 @@ export default {
   [types.UPDATE_ENABLED](state, enabled) {
     state.enabled = enabled;
   },
+  [types.UPDATE_INTEGRATED](state, integrated) {
+    state.integrated = integrated;
+  },
   [types.UPDATE_TOKEN](state, token) {
     state.token = token;
   },
diff --git a/app/assets/javascripts/error_tracking_settings/store/state.js b/app/assets/javascripts/error_tracking_settings/store/state.js
index ab616f11e83..ee5597abeb3 100644
--- a/app/assets/javascripts/error_tracking_settings/store/state.js
+++ b/app/assets/javascripts/error_tracking_settings/store/state.js
@@ -1,6 +1,7 @@
 export default () => ({
   apiHost: '',
   enabled: false,
+  integrated: false,
   token: '',
   projects: [],
   isLoadingProjects: false,
diff --git a/app/assets/javascripts/error_tracking_settings/utils.js b/app/assets/javascripts/error_tracking_settings/utils.js
index 5d18ac8e802..7ef5f7bbd34 100644
--- a/app/assets/javascripts/error_tracking_settings/utils.js
+++ b/app/assets/javascripts/error_tracking_settings/utils.js
@@ -1,6 +1,12 @@
 export const projectKeys = ['name', 'organizationName', 'organizationSlug', 'slug'];
 
-export const transformFrontendSettings = ({ apiHost, enabled, token, selectedProject }) => {
+export const transformFrontendSettings = ({
+  apiHost,
+  enabled,
+  integrated,
+  token,
+  selectedProject,
+}) => {
   const project = selectedProject
     ? {
         slug: selectedProject.slug,
@@ -10,7 +16,7 @@ export const transformFrontendSettings = ({ apiHost, enabled, token, selectedPro
       }
     : null;
 
-  return { api_host: apiHost || null, enabled, token: token || null, project };
+  return { api_host: apiHost || null, enabled, integrated, token: token || null, project };
 };
 
 export const getDisplayName = (project) => `${project.organizationName} | ${project.slug}`;