Commit 9e7db9b1 authored by Clement Ho's avatar Clement Ho
Browse files

Merge branch 'add-feature-flag-toggle--edit' into 'master'

Add Feature Flag Toggle to Edit Page

See merge request gitlab-org/gitlab!20860
parents 74abc282 9102f701
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon, GlToggle } from '@gitlab/ui';
import { createNamespacedHelpers } from 'vuex';
import { sprintf, s__ } from '~/locale';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -12,6 +12,7 @@ export default {
store,
components: {
GlLoadingIcon,
GlToggle,
FeatureFlagForm,
},
mixins: [glFeatureFlagMixin()],
......@@ -30,7 +31,16 @@ export default {
},
},
computed: {
...mapState(['error', 'name', 'description', 'scopes', 'isLoading', 'hasError', 'iid']),
...mapState([
'error',
'name',
'description',
'scopes',
'isLoading',
'hasError',
'iid',
'active',
]),
title() {
return this.hasFeatureFlagsIID
? `^${this.iid} ${this.name}`
......@@ -39,13 +49,22 @@ export default {
hasFeatureFlagsIID() {
return this.glFeatures.featureFlagIID && this.iid;
},
hasFeatureFlagToggle() {
return this.glFeatures.featureFlagToggle;
},
},
created() {
this.setPath(this.path);
return this.setEndpoint(this.endpoint).then(() => this.fetchFeatureFlag());
},
methods: {
...mapActions(['updateFeatureFlag', 'setEndpoint', 'setPath', 'fetchFeatureFlag']),
...mapActions([
'updateFeatureFlag',
'setEndpoint',
'setPath',
'fetchFeatureFlag',
'toggleActive',
]),
},
};
</script>
......@@ -54,7 +73,15 @@ export default {
<gl-loading-icon v-if="isLoading" />
 
<template v-else-if="!isLoading && !hasError">
<h3 class="page-title">{{ title }}</h3>
<div class="d-flex align-items-center mb-3 mt-3">
<gl-toggle
v-if="hasFeatureFlagToggle"
:value="active"
class="m-0 mr-3"
@change="toggleActive"
/>
<h3 class="page-title m-0">{{ title }}</h3>
</div>
 
<div v-if="error.length" class="alert alert-danger">
<p v-for="(message, index) in error" :key="index" class="mb-0">{{ message }}</p>
......@@ -67,6 +94,7 @@ export default {
:cancel-path="path"
:submit-text="__('Save changes')"
:environments-endpoint="environmentsEndpoint"
:active="active || !hasFeatureFlagToggle"
@handleSubmit="data => updateFeatureFlag(data)"
/>
</template>
......
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { GlToggle } from '@gitlab/ui';
import Form from 'ee/feature_flags/components/form.vue';
import editModule from 'ee/feature_flags/store/modules/edit';
import EditFeatureFlag from 'ee/feature_flags/components/edit_feature_flag.vue';
......@@ -20,7 +21,7 @@ describe('Edit feature flag form', () => {
},
});
 
const factory = () => {
const factory = (featureFlagToggle = true) => {
wrapper = shallowMount(localVue.extend(EditFeatureFlag), {
localVue,
propsData: {
......@@ -30,6 +31,7 @@ describe('Edit feature flag form', () => {
},
provide: {
glFeatures: {
featureFlagToggle,
featureFlagIID: true,
},
},
......@@ -44,7 +46,7 @@ describe('Edit feature flag form', () => {
mock.onGet(`${TEST_HOST}/feature_flags.json'`).replyOnce(200, {
id: 21,
iid: 5,
active: false,
active: true,
created_at: '2019-01-17T17:27:39.778Z',
updated_at: '2019-01-17T17:27:39.778Z',
name: 'feature_flag',
......@@ -76,6 +78,26 @@ describe('Edit feature flag form', () => {
expect(wrapper.find('h3').text()).toContain('^5');
});
 
it('should render the toggle', () => {
expect(wrapper.find(GlToggle).exists()).toBe(true);
});
it('should set the value of the toggle to whether or not the flag is active', () => {
expect(wrapper.find(GlToggle).props('value')).toBe(true);
});
describe('without featureFlagToggle', () => {
beforeEach(done => {
wrapper.destroy();
factory(false);
setImmediate(() => done());
});
it('should not render the toggle', () => {
expect(wrapper.find(GlToggle).exists()).toBe(false);
});
});
describe('with error', () => {
it('should render the error', () => {
store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment