2020-10-01 21:08:36 +00:00
< script >
import {
GlFormGroup ,
GlFormInput ,
2020-10-30 21:08:52 +00:00
GlFormInputGroup ,
2020-10-01 21:08:36 +00:00
GlModal ,
GlTooltipDirective ,
GlLoadingIcon ,
GlSprintf ,
GlLink ,
GlIcon ,
2020-12-14 18:09:48 +00:00
GlAlert ,
2020-10-01 21:08:36 +00:00
} from '@gitlab/ui' ;
import { s _ _ , _ _ } from '~/locale' ;
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue' ;
export default {
components : {
GlFormGroup ,
GlFormInput ,
2020-10-30 21:08:52 +00:00
GlFormInputGroup ,
2020-10-01 21:08:36 +00:00
GlModal ,
ModalCopyButton ,
GlIcon ,
GlLoadingIcon ,
GlSprintf ,
GlLink ,
2020-12-14 18:09:48 +00:00
GlAlert ,
2020-10-01 21:08:36 +00:00
} ,
directives : {
GlTooltip : GlTooltipDirective ,
} ,
2021-01-11 21:10:36 +00:00
inject : [
'projectName' ,
'featureFlagsHelpPagePath' ,
'unleashApiUrl' ,
'featureFlagsClientExampleHelpPagePath' ,
'featureFlagsClientLibrariesHelpPagePath' ,
] ,
2020-10-01 21:08:36 +00:00
props : {
instanceId : {
type : String ,
required : true ,
} ,
modalId : {
type : String ,
required : false ,
default : 'configure-feature-flags' ,
} ,
isRotating : {
type : Boolean ,
required : true ,
} ,
hasRotateError : {
type : Boolean ,
required : true ,
} ,
canUserRotateToken : {
type : Boolean ,
required : true ,
} ,
} ,
2020-10-15 09:08:41 +00:00
translations : {
cancelActionLabel : _ _ ( 'Close' ) ,
modalTitle : s _ _ ( 'FeatureFlags|Configure feature flags' ) ,
apiUrlLabelText : s _ _ ( 'FeatureFlags|API URL' ) ,
apiUrlCopyText : _ _ ( 'Copy URL' ) ,
instanceIdLabelText : s _ _ ( 'FeatureFlags|Instance ID' ) ,
instanceIdCopyText : _ _ ( 'Copy ID' ) ,
instanceIdRegenerateError : _ _ ( 'Unable to generate new instance ID' ) ,
instanceIdRegenerateText : _ _ (
'Regenerating the instance ID can break integration depending on the client you are using.' ,
) ,
instanceIdRegenerateActionLabel : _ _ ( 'Regenerate instance ID' ) ,
} ,
2020-10-01 21:08:36 +00:00
data ( ) {
return {
enteredProjectName : '' ,
} ;
} ,
computed : {
cancelActionProps ( ) {
return {
2020-10-15 09:08:41 +00:00
text : this . $options . translations . cancelActionLabel ,
2021-02-22 18:10:55 +00:00
attributes : [
{
category : 'secondary' ,
} ,
] ,
2020-10-01 21:08:36 +00:00
} ;
} ,
canRegenerateInstanceId ( ) {
return this . canUserRotateToken && this . enteredProjectName === this . projectName ;
} ,
regenerateInstanceIdActionProps ( ) {
return this . canUserRotateToken
? {
2020-10-15 09:08:41 +00:00
text : this . $options . translations . instanceIdRegenerateActionLabel ,
2020-10-01 21:08:36 +00:00
attributes : [
{
category : 'secondary' ,
disabled : ! this . canRegenerateInstanceId ,
loading : this . isRotating ,
variant : 'danger' ,
} ,
] ,
}
: null ;
} ,
} ,
methods : {
clearState ( ) {
this . enteredProjectName = '' ;
} ,
rotateToken ( ) {
this . $emit ( 'token' ) ;
this . clearState ( ) ;
} ,
} ,
} ;
< / script >
< template >
< gl -modal
: modal - id = "modalId"
2021-02-22 18:10:55 +00:00
: action - primary = "cancelActionProps"
: action - secondary = "regenerateInstanceIdActionProps"
@ secondary . prevent = "rotateToken"
2020-10-01 21:08:36 +00:00
@ hide = "clearState"
2021-02-22 18:10:55 +00:00
@ primary = "clearState"
2020-10-01 21:08:36 +00:00
>
< template # modal -title >
2020-10-15 09:08:41 +00:00
{ { $options . translations . modalTitle } }
2020-10-01 21:08:36 +00:00
< / template >
< p >
< gl -sprintf
: message = "
s _ _ (
'FeatureFlags|Install a %{docsLinkAnchoredStart}compatible client library%{docsLinkAnchoredEnd} and specify the API URL, application name, and instance ID during the configuration setup. %{docsLinkStart}More Information%{docsLinkEnd}' ,
)
"
>
< template # docsLinkAnchored = "{ content }" >
2020-10-15 09:08:41 +00:00
< gl -link
: href = "featureFlagsClientLibrariesHelpPagePath"
target = "_blank"
data - testid = "help-client-link"
>
2020-10-01 21:08:36 +00:00
{ { content } }
< / g l - l i n k >
< / template >
< template # docsLink = "{ content }" >
< gl -link :href ="featureFlagsHelpPagePath" target = "_blank" data -testid = " help -link " > { {
content
} } < / g l - l i n k >
< / template >
< / g l - s p r i n t f >
< / p >
2020-12-14 18:09:48 +00:00
< gl -alert variant = "warning" class = "gl-mb-5" :dismissible ="false" >
2020-10-01 21:08:36 +00:00
< gl -sprintf
: message = "
s _ _ (
'FeatureFlags|Set the Unleash client application name to the name of the environment your application runs in. This value is used to match environment scopes. See the %{linkStart}example client configuration%{linkEnd}.' ,
)
"
>
< template # link = "{ content }" >
2020-10-15 09:08:41 +00:00
< gl -link :href ="featureFlagsClientExampleHelpPagePath" target = "_blank" > { {
content
} } < / g l - l i n k >
2020-10-01 21:08:36 +00:00
< / template >
< / g l - s p r i n t f >
2020-12-14 18:09:48 +00:00
< / g l - a l e r t >
2020-10-30 21:08:52 +00:00
< gl -form -group :label ="$options.translations.apiUrlLabelText" label -for = " api -url " >
< gl -form -input -group id = "api-url" :value ="unleashApiUrl" readonly type = "text" name = "api-url" >
< template # append >
2020-10-01 21:08:36 +00:00
< modal -copy -button
2020-10-15 09:08:41 +00:00
: text = "unleashApiUrl"
: title = "$options.translations.apiUrlCopyText"
2020-10-01 21:08:36 +00:00
: modal - id = "modalId"
/ >
2020-10-30 21:08:52 +00:00
< / template >
< / g l - f o r m - i n p u t - g r o u p >
< / g l - f o r m - g r o u p >
< gl -form -group :label ="$options.translations.instanceIdLabelText" label -for = " instance_id " >
< gl -form -input -group >
< gl -form -input
2020-10-01 21:08:36 +00:00
id = "instance_id"
: value = "instanceId"
type = "text"
name = "instance_id"
readonly
: disabled = "isRotating"
/ >
< gl -loading -icon
v - if = "isRotating"
2020-10-30 21:08:52 +00:00
class = "gl-absolute gl-align-self-center gl-right-5 gl-mr-7"
2020-10-01 21:08:36 +00:00
/ >
2020-10-30 21:08:52 +00:00
< template # append >
2020-10-01 21:08:36 +00:00
< modal -copy -button
: text = "instanceId"
2020-10-15 09:08:41 +00:00
: title = "$options.translations.instanceIdCopyText"
2020-10-01 21:08:36 +00:00
: modal - id = "modalId"
: disabled = "isRotating"
/ >
2020-10-30 21:08:52 +00:00
< / template >
< / g l - f o r m - i n p u t - g r o u p >
< / g l - f o r m - g r o u p >
2020-10-01 21:08:36 +00:00
< div
v - if = "hasRotateError"
2020-10-30 21:08:52 +00:00
class = "gl-text-red-500 gl-display-flex gl-align-items-center gl-font-weight-normal gl-mb-3"
2020-10-01 21:08:36 +00:00
>
2020-10-30 21:08:52 +00:00
< gl -icon name = "warning" class = "gl-mr-2" / >
2020-10-15 09:08:41 +00:00
< span > { { $options . translations . instanceIdRegenerateError } } < / span >
2020-10-01 21:08:36 +00:00
< / div >
2020-12-14 18:09:48 +00:00
< gl -alert v-if ="canUserRotateToken" variant="danger" class="gl-mb-5" :dismissible ="false" >
{ { $options . translations . instanceIdRegenerateText } }
< / g l - a l e r t >
2020-10-01 21:08:36 +00:00
< p v-if ="canUserRotateToken" data-testid="prevent-accident-text" >
< gl -sprintf
: message = "
s _ _ (
'FeatureFlags|To prevent accidental actions we ask you to confirm your intention. Please type %{projectName} to proceed or close this modal to cancel.' ,
)
"
>
< template # projectName >
< span class = "gl-font-weight-bold gl-text-red-500" > { { projectName } } < / span >
< / template >
< / g l - s p r i n t f >
< / p >
< gl -form -group >
< gl -form -input
v - if = "canUserRotateToken"
id = "project_name_verification"
v - model = "enteredProjectName"
name = "project_name"
type = "text"
: disabled = "isRotating"
/ >
< / g l - f o r m - g r o u p >
< / g l - m o d a l >
< / template >