2020-10-01 21:08:36 +00:00
< script >
import { GlAlert , GlLoadingIcon , GlToggle } from '@gitlab/ui' ;
2020-10-09 00:08:41 +00:00
import { mapState , mapActions } from 'vuex' ;
2020-10-01 21:08:36 +00:00
import axios from '~/lib/utils/axios_utils' ;
import { sprintf , s _ _ } from '~/locale' ;
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin' ;
2020-12-03 21:09:35 +00:00
import { LEGACY _FLAG } from '../constants' ;
2020-10-01 21:08:36 +00:00
import FeatureFlagForm from './form.vue' ;
export default {
components : {
GlAlert ,
GlLoadingIcon ,
GlToggle ,
FeatureFlagForm ,
} ,
mixins : [ glFeatureFlagMixin ( ) ] ,
2020-10-20 06:09:03 +00:00
inject : {
showUserCallout : { } ,
2020-10-01 21:08:36 +00:00
userCalloutId : {
default : '' ,
} ,
userCalloutsPath : {
default : '' ,
} ,
} ,
data ( ) {
return {
userShouldSeeNewFlagAlert : this . showUserCallout ,
} ;
} ,
translations : {
legacyFlagAlert : s _ _ (
'FeatureFlags|GitLab is moving to a new way of managing feature flags, and in 13.4, this feature flag will become read-only. Please create a new feature flag.' ,
) ,
legacyReadOnlyFlagAlert : s _ _ (
'FeatureFlags|GitLab is moving to a new way of managing feature flags. This feature flag is read-only, and it will be removed in 14.0. Please create a new feature flag.' ,
) ,
} ,
computed : {
... mapState ( [
2020-10-09 00:08:41 +00:00
'path' ,
2020-10-01 21:08:36 +00:00
'error' ,
'name' ,
'description' ,
'scopes' ,
'strategies' ,
'isLoading' ,
'hasError' ,
'iid' ,
'active' ,
'version' ,
] ) ,
title ( ) {
return this . iid
? ` ^ ${ this . iid } ${ this . name } `
: sprintf ( s _ _ ( 'Edit %{name}' ) , { name : this . name } ) ;
} ,
deprecated ( ) {
2020-12-03 21:09:35 +00:00
return this . version === LEGACY _FLAG ;
2020-10-01 21:08:36 +00:00
} ,
deprecatedAndEditable ( ) {
return this . deprecated && ! this . hasLegacyReadOnlyFlags ;
} ,
deprecatedAndReadOnly ( ) {
return this . deprecated && this . hasLegacyReadOnlyFlags ;
} ,
hasLegacyReadOnlyFlags ( ) {
return (
this . glFeatures . featureFlagsLegacyReadOnly &&
! this . glFeatures . featureFlagsLegacyReadOnlyOverride
) ;
} ,
} ,
created ( ) {
2020-10-09 00:08:41 +00:00
return this . fetchFeatureFlag ( ) ;
2020-10-01 21:08:36 +00:00
} ,
methods : {
2020-10-09 00:08:41 +00:00
... mapActions ( [ 'updateFeatureFlag' , 'fetchFeatureFlag' , 'toggleActive' ] ) ,
2020-10-01 21:08:36 +00:00
dismissNewVersionFlagAlert ( ) {
this . userShouldSeeNewFlagAlert = false ;
axios . post ( this . userCalloutsPath , {
feature _name : this . userCalloutId ,
} ) ;
} ,
} ,
} ;
< / script >
< template >
< div >
2020-10-29 18:09:11 +00:00
< gl -loading -icon v -if = " isLoading " size = "xl" class = "gl-mt-7" / >
2020-10-01 21:08:36 +00:00
< template v -else -if = " ! isLoading & & ! hasError " >
< gl -alert v-if ="deprecatedAndEditable" variant="warning" :dismissible="false" class="gl-my-5" >
{ { $options . translations . legacyFlagAlert } }
< / g l - a l e r t >
< gl -alert v-if ="deprecatedAndReadOnly" variant="warning" :dismissible="false" class="gl-my-5" >
{ { $options . translations . legacyReadOnlyFlagAlert } }
< / g l - a l e r t >
< div class = "gl-display-flex gl-align-items-center gl-mb-4 gl-mt-4" >
< gl -toggle
: value = "active"
data - testid = "feature-flag-status-toggle"
data - track - event = "click_button"
data - track - label = "feature_flag_toggle"
class = "gl-mr-4"
@ change = "toggleActive"
/ >
< h3 class = "page-title gl-m-0" > { { title } } < / h3 >
< / div >
< div v-if ="error.length" class="alert alert-danger" >
< p v-for ="(message, index) in error" :key="index" class="gl-mb-0" > {{ message }} < / p >
< / div >
< feature -flag -form
: name = "name"
: description = "description"
: scopes = "scopes"
: strategies = "strategies"
: cancel - path = "path"
: submit - text = "__('Save changes')"
: active = "active"
: version = "version"
2020-12-23 21:10:24 +00:00
@ handleSubmit = "(data) => updateFeatureFlag(data)"
2020-10-01 21:08:36 +00:00
/ >
< / template >
< / div >
< / template >