2021-01-03 14:25:43 +05:30
< script >
import {
GlFormGroup ,
GlFormInput ,
2021-01-29 00:20:46 +05:30
GlFormInputGroup ,
2021-01-03 14:25:43 +05:30
GlModal ,
GlTooltipDirective ,
GlLoadingIcon ,
GlSprintf ,
GlLink ,
GlIcon ,
} from '@gitlab/ui' ;
import { s _ _ , _ _ } from '~/locale' ;
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue' ;
import Callout from '~/vue_shared/components/callout.vue' ;
export default {
components : {
GlFormGroup ,
GlFormInput ,
2021-01-29 00:20:46 +05:30
GlFormInputGroup ,
2021-01-03 14:25:43 +05:30
GlModal ,
ModalCopyButton ,
GlIcon ,
Callout ,
GlLoadingIcon ,
GlSprintf ,
GlLink ,
} ,
directives : {
GlTooltip : GlTooltipDirective ,
} ,
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 ,
} ,
} ,
inject : [
'projectName' ,
'featureFlagsHelpPagePath' ,
'unleashApiUrl' ,
'featureFlagsClientExampleHelpPagePath' ,
'featureFlagsClientLibrariesHelpPagePath' ,
] ,
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' ) ,
} ,
data ( ) {
return {
enteredProjectName : '' ,
} ;
} ,
computed : {
cancelActionProps ( ) {
return {
text : this . $options . translations . cancelActionLabel ,
} ;
} ,
canRegenerateInstanceId ( ) {
return this . canUserRotateToken && this . enteredProjectName === this . projectName ;
} ,
regenerateInstanceIdActionProps ( ) {
return this . canUserRotateToken
? {
text : this . $options . translations . instanceIdRegenerateActionLabel ,
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"
: action - cancel = "cancelActionProps"
: action - primary = "regenerateInstanceIdActionProps"
@ canceled = "clearState"
@ hide = "clearState"
@ primary . prevent = "rotateToken"
>
< template # modal -title >
{ { $options . translations . modalTitle } }
< / 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 }" >
< gl-link
: href = "featureFlagsClientLibrariesHelpPagePath"
target = "_blank"
data - testid = "help-client-link"
>
{ { content } }
< / gl-link >
< / template >
< template # docsLink = "{ content }" >
< gl-link :href = "featureFlagsHelpPagePath" target = "_blank" data -testid = " help -link " > { {
content
} } < / gl-link >
< / template >
< / gl-sprintf >
< / p >
< callout category = "warning" >
< 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 }" >
< gl-link :href = "featureFlagsClientExampleHelpPagePath" target = "_blank" > { {
content
} } < / gl-link >
< / template >
< / gl-sprintf >
< / callout >
2021-01-29 00:20:46 +05:30
< 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 >
2021-01-03 14:25:43 +05:30
< modal-copy-button
: text = "unleashApiUrl"
: title = "$options.translations.apiUrlCopyText"
: modal - id = "modalId"
/ >
2021-01-29 00:20:46 +05:30
< / template >
< / gl-form-input-group >
< / gl-form-group >
< gl-form-group :label = "$options.translations.instanceIdLabelText" label -for = " instance_id " >
< gl-form-input-group >
< gl-form-input
2021-01-03 14:25:43 +05:30
id = "instance_id"
: value = "instanceId"
type = "text"
name = "instance_id"
readonly
: disabled = "isRotating"
/ >
< gl-loading-icon
v - if = "isRotating"
2021-01-29 00:20:46 +05:30
class = "gl-absolute gl-align-self-center gl-right-5 gl-mr-7"
2021-01-03 14:25:43 +05:30
/ >
2021-01-29 00:20:46 +05:30
< template # append >
2021-01-03 14:25:43 +05:30
< modal-copy-button
: text = "instanceId"
: title = "$options.translations.instanceIdCopyText"
: modal - id = "modalId"
: disabled = "isRotating"
/ >
2021-01-29 00:20:46 +05:30
< / template >
< / gl-form-input-group >
< / gl-form-group >
2021-01-03 14:25:43 +05:30
< div
v - if = "hasRotateError"
2021-01-29 00:20:46 +05:30
class = "gl-text-red-500 gl-display-flex gl-align-items-center gl-font-weight-normal gl-mb-3"
2021-01-03 14:25:43 +05:30
>
2021-01-29 00:20:46 +05:30
< gl-icon name = "warning" class = "gl-mr-2" / >
2021-01-03 14:25:43 +05:30
< span > { { $options . translations . instanceIdRegenerateError } } < / span >
< / div >
< callout
v - if = "canUserRotateToken"
category = "danger"
: message = "$options.translations.instanceIdRegenerateText"
/ >
< 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 >
< / gl-sprintf >
< / p >
< gl-form-group >
< gl-form-input
v - if = "canUserRotateToken"
id = "project_name_verification"
v - model = "enteredProjectName"
name = "project_name"
type = "text"
: disabled = "isRotating"
/ >
< / gl-form-group >
< / gl-modal >
< / template >