diff options
Diffstat (limited to 'app/assets/javascripts/error_tracking_settings/components/app.vue')
-rw-r--r-- | app/assets/javascripts/error_tracking_settings/components/app.vue | 79 |
1 files changed, 58 insertions, 21 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" |