2019-07-07 11:18:12 +05:30
< script >
2019-12-26 22:10:19 +05:30
import { mapActions , mapState } from 'vuex' ;
import { GlFormInput } from '@gitlab/ui' ;
2019-07-07 11:18:12 +05:30
import Icon from '~/vue_shared/components/icon.vue' ;
2019-12-26 22:10:19 +05:30
import LoadingButton from '~/vue_shared/components/loading_button.vue' ;
2019-07-07 11:18:12 +05:30
export default {
2019-12-26 22:10:19 +05:30
components : { GlFormInput , Icon , LoadingButton } ,
2019-07-07 11:18:12 +05:30
computed : {
2019-12-26 22:10:19 +05:30
... mapState ( [ 'apiHost' , 'connectError' , 'connectSuccessful' , 'isLoadingProjects' , 'token' ] ) ,
2019-07-07 11:18:12 +05:30
tokenInputState ( ) {
return this . connectError ? false : null ;
} ,
} ,
2019-12-26 22:10:19 +05:30
methods : {
... mapActions ( [ 'fetchProjects' , 'updateApiHost' , 'updateToken' ] ) ,
} ,
2019-07-07 11:18:12 +05:30
} ;
< / script >
< template >
< div >
< div class = "form-group" >
< label class = "label-bold" for = "error-tracking-api-host" > { { _ _ ( 'Sentry API URL' ) } } < / label >
< div class = "row" >
< div class = "col-8 col-md-9 gl-pr-0" >
2019-10-12 21:52:04 +05:30
<!-- eslint - disable @ gitlab / vue - i18n / no - bare - attribute - strings -- >
2019-07-07 11:18:12 +05:30
< gl-form-input
id = "error-tracking-api-host"
: value = "apiHost"
2019-12-26 22:10:19 +05:30
: disabled = "isLoadingProjects"
2019-07-07 11:18:12 +05:30
placeholder = "https://mysentryserver.com"
2019-12-26 22:10:19 +05:30
@ input = "updateApiHost"
2019-07-07 11:18:12 +05:30
/ >
2020-01-01 13:55:28 +05:30
< p class = "form-text text-muted" >
{ {
s _ _ (
"ErrorTracking|If you self-host Sentry, enter the full URL of your Sentry instance. If you're using Sentry's hosted solution, enter https://sentry.io" ,
)
} }
< / p >
2019-10-12 21:52:04 +05:30
<!-- eslint - enable @ gitlab / vue - i18n / no - bare - attribute - strings -- >
2019-07-07 11:18:12 +05:30
< / div >
< / div >
< / div >
< div class = "form-group" : class = "{ 'gl-show-field-errors': connectError }" >
2019-09-30 21:07:59 +05:30
< label class = "label-bold" for = "error-tracking-token" >
{ { s _ _ ( 'ErrorTracking|Auth Token' ) } }
< / label >
2019-07-07 11:18:12 +05:30
< div class = "row" >
< div class = "col-8 col-md-9 gl-pr-0" >
< gl-form-input
id = "error-tracking-token"
: value = "token"
: state = "tokenInputState"
2019-12-26 22:10:19 +05:30
: disabled = "isLoadingProjects"
@ input = "updateToken"
2019-07-07 11:18:12 +05:30
/ >
< / div >
< div class = "col-4 col-md-3 gl-pl-0" >
2019-12-26 22:10:19 +05:30
< loading-button
class = "js-error-tracking-connect prepend-left-5 d-inline-flex"
: label = "isLoadingProjects ? __('Connecting') : __('Connect')"
: loading = "isLoadingProjects"
@ click = "fetchProjects"
/ >
2019-07-07 11:18:12 +05:30
< icon
v - show = "connectSuccessful"
class = "js-error-tracking-connect-success prepend-left-5 text-success align-middle"
: aria - label = "__('Projects Successfully Retrieved')"
name = "check-circle"
/ >
< / div >
< / div >
< p v-if = "connectError" class="gl-field-error" >
{ { s _ _ ( 'ErrorTracking|Connection has failed. Re-check Auth Token and try again.' ) } }
< / p >
< p v -else class = "form-text text-muted" >
{ {
s _ _ (
"ErrorTracking|After adding your Auth Token, use the 'Connect' button to load projects" ,
)
} }
< / p >
< / div >
< / div >
< / template >