Commit 6ab4229e authored by Filipa Lacerda's avatar Filipa Lacerda

Fixes group buttons in FF table

Moves modal outside of each row, it was rendering
1 modalbox per row, it only renders 1 now.

Updates label for `*` scope to include `All environments`
parent 59222ce7
<script>
import _ from 'underscore';
import { s__, sprintf } from '~/locale';
import { GlButton, GlModal, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlModal,
Icon,
},
directives: {
GlModalDirective,
GlTooltip: GlTooltipDirective,
},
props: {
deleteFeatureFlagUrl: {
type: String,
required: true,
},
featureFlagName: {
type: String,
required: true,
},
modalId: {
type: String,
required: true,
},
csrfToken: {
type: String,
required: true,
},
},
computed: {
message() {
return sprintf(
s__('FeatureFlags|Feature flag %{name} will be removed. Are you sure?'),
{
name: _.escape(this.featureFlagName),
},
false,
);
},
title() {
return sprintf(
s__('FeatureFlags|Delete %{name}?'),
{
name: _.escape(this.featureFlagName),
},
false,
);
},
},
methods: {
onSubmit() {
this.$refs.form.submit();
},
},
};
</script>
<template>
<div class="d-inline-block">
<gl-button
v-gl-tooltip.hover.bottom="__('Delete')"
v-gl-modal-directive="modalId"
class="js-feature-flag-delete-button"
variant="danger"
>
<icon name="remove" :size="16" />
</gl-button>
<gl-modal
:title="title"
:ok-title="s__('FeatureFlags|Delete feature flag')"
:modal-id="modalId"
title-tag="h4"
ok-variant="danger"
@ok="onSubmit"
>
{{ message }}
<form ref="form" :action="deleteFeatureFlagUrl" method="post" class="js-requires-input">
<input ref="method" type="hidden" name="_method" value="delete" />
<input :value="csrfToken" type="hidden" name="authenticity_token" />
</form>
</gl-modal>
</div>
</template>
<script>
import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
import _ from 'underscore';
import { GlButton, GlLink, GlTooltipDirective, GlModalDirective, GlModal } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import DeleteFeatureFlag from './delete_feature_flag.vue';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
DeleteFeatureFlag,
GlButton,
GlLink,
Icon,
GlModal,
},
directives: {
GlModalDirective,
GlTooltip: GlTooltipDirective,
},
props: {
......@@ -24,12 +25,53 @@ export default {
required: true,
},
},
data() {
return {
deleteFeatureFlagUrl: null,
deleteFeatureFlagName: null,
};
},
computed: {
modalTitle() {
return sprintf(
s__('FeatureFlags|Delete %{name}?'),
{
name: _.escape(this.deleteFeatureFlagName),
},
false,
);
},
deleteModalMessage() {
return sprintf(
s__('FeatureFlags|Feature flag %{name} will be removed. Are you sure?'),
{
name: _.escape(this.deleteFeatureFlagName),
},
false,
);
},
modalId() {
return 'delete-feature-flag';
},
},
methods: {
scopeTooltipText(scope) {
return !scope.active
? sprintf(s__('Inactive flag for %{scope}'), { scope: scope.environment_scope })
? sprintf(s__('FeatureFlags|Inactive flag for %{scope}'), {
scope: scope.environment_scope,
})
: '';
},
scopeName(name) {
return name === '*' ? s__('FeatureFlags|* (All environments)') : name;
},
setDeleteModalData(featureFlag) {
this.deleteFeatureFlagUrl = featureFlag.destroy_path;
this.deleteFeatureFlagName = featureFlag.name;
},
onSubmit() {
this.$refs.form.submit();
},
},
};
</script>
......@@ -52,9 +94,9 @@ export default {
<div class="table-section section-10" role="gridcell">
<div class="table-mobile-header" role="rowheader">{{ s__('FeatureFlags|Status') }}</div>
<div class="table-mobile-content js-feature-flag-status">
<span v-if="featureFlag.active" class="badge badge-success">{{
s__('FeatureFlags|Active')
}}</span>
<span v-if="featureFlag.active" class="badge badge-success">
{{ s__('FeatureFlags|Active') }}
</span>
<span v-else class="badge badge-danger">{{ s__('FeatureFlags|Inactive') }}</span>
</div>
</div>
......@@ -84,7 +126,7 @@ export default {
v-gl-tooltip.hover="scopeTooltipText(scope)"
class="badge append-right-8 prepend-top-2"
:class="{ 'badge-active': scope.active, 'badge-inactive': !scope.active }"
>{{ scope.environment_scope }}</span
>{{ scopeName(scope.environment_scope) }}</span
>
</div>
</div>
......@@ -95,23 +137,41 @@ export default {
<gl-button
v-gl-tooltip.hover.bottom="__('Edit')"
class="js-feature-flag-edit-button"
:href="featureFlag.edit_path"
variant="outline-primary"
:href="featureFlag.edit_path"
>
<icon name="pencil" :size="16" />
</gl-button>
</template>
<template v-if="featureFlag.destroy_path">
<delete-feature-flag
:delete-feature-flag-url="featureFlag.destroy_path"
:feature-flag-name="featureFlag.name"
:modal-id="`delete-feature-flag-${featureFlag.id}`"
:csrf-token="csrfToken"
/>
<gl-button
v-gl-tooltip.hover.bottom="__('Delete')"
v-gl-modal-directive="modalId"
class="js-feature-flag-delete-button"
variant="danger"
@click="setDeleteModalData(featureFlag)"
>
<icon name="remove" :size="16" />
</gl-button>
</template>
</div>
</div>
</div>
</template>
<gl-modal
:title="modalTitle"
:ok-title="s__('FeatureFlags|Delete feature flag')"
:modal-id="modalId"
title-tag="h4"
ok-variant="danger"
@ok="onSubmit"
>
{{ deleteModalMessage }}
<form ref="form" :action="deleteFeatureFlagUrl" method="post" class="js-requires-input">
<input ref="method" type="hidden" name="_method" value="delete" />
<input :value="csrfToken" type="hidden" name="authenticity_token" />
</form>
</gl-modal>
</div>
</template>
......@@ -32,7 +32,7 @@ describe('Feature Flag table', () => {
const status = featureFlag.active ? 'Active' : 'Inactive';
expect(vm.$el.querySelector('.js-feature-flag-status')).not.toBeNull();
expect(vm.$el.querySelector('.js-feature-flag-status').textContent).toEqual(status);
expect(vm.$el.querySelector('.js-feature-flag-status').textContent.trim()).toEqual(status);
});
it('Should render a feature flag column', () => {
......
......@@ -3803,6 +3803,9 @@ msgstr ""
msgid "Feature Flags"
msgstr ""
msgid "FeatureFlags|* (All environments)"
msgstr ""
msgid "FeatureFlags|API URL"
msgstr ""
......@@ -3854,6 +3857,9 @@ msgstr ""
msgid "FeatureFlags|Inactive"
msgstr ""
msgid "FeatureFlags|Inactive flag for %{scope}"
msgstr ""
msgid "FeatureFlags|Install a %{docs_link_start}compatible client library%{docs_link_end} and specify the API URL, application name, and instance ID during the configuration setup."
msgstr ""
......@@ -4975,9 +4981,6 @@ msgstr ""
msgid "In the next step, you'll be able to select the projects you want to import."
msgstr ""
msgid "Inactive flag for %{scope}"
msgstr ""
msgid "Include a Terms of Service agreement and Privacy Policy that all users must accept."
msgstr ""
......
Markdown is supported
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