Commit f0f866aa authored by Illya Klymov's avatar Illya Klymov

Merge branch '293729-gl-accordion-for-approval-rules' into 'master'

Convert Approval Rules to use GlAccordion

See merge request gitlab-org/gitlab!52031
parents d0b75f21 193f439d
<script> <script>
import { uniqueId } from 'lodash'; import { GlSafeHtmlDirective, GlAccordion, GlAccordionItem } from '@gitlab/ui';
import {
GlIcon,
GlButton,
GlCollapse,
GlCollapseToggleDirective,
GlSafeHtmlDirective,
} from '@gitlab/ui';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { __, n__, sprintf } from '~/locale'; import { __, n__, sprintf, s__ } from '~/locale';
import App from '../app.vue'; import App from '../app.vue';
import MrRules from './mr_rules.vue'; import MrRules from './mr_rules.vue';
import MrRulesHiddenInputs from './mr_rules_hidden_inputs.vue'; import MrRulesHiddenInputs from './mr_rules_hidden_inputs.vue';
export default { export default {
components: { components: {
GlIcon, GlAccordion,
GlButton, GlAccordionItem,
GlCollapse,
App, App,
MrRules, MrRules,
MrRulesHiddenInputs, MrRulesHiddenInputs,
}, },
directives: { directives: {
CollapseToggle: GlCollapseToggleDirective,
SafeHtml: GlSafeHtmlDirective, SafeHtml: GlSafeHtmlDirective,
}, },
mixins: [glFeatureFlagsMixin()], mixins: [glFeatureFlagsMixin()],
data() {
return {
collapseId: uniqueId('approval-rules-expandable-section-'),
isCollapsed: false,
};
},
computed: { computed: {
...mapState({ ...mapState({
rules: (state) => state.approvals.rules, rules: (state) => state.approvals.rules,
canOverride: (state) => state.settings.canOverride, canOverride: (state) => state.settings.canOverride,
}), }),
toggleIcon() { accordionTitle() {
return this.isCollapsed ? 'chevron-down' : 'chevron-right'; return s__('ApprovalRule|Approval rules');
}, },
isCollapseFeatureEnabled() { isCollapseFeatureEnabled() {
return this.glFeatures.mergeRequestReviewers && this.glFeatures.mrCollapsedApprovalRules; return this.glFeatures.mergeRequestReviewers && this.glFeatures.mrCollapsedApprovalRules;
...@@ -120,26 +105,15 @@ export default { ...@@ -120,26 +105,15 @@ export default {
class="gl-mb-0 gl-text-gray-500" class="gl-mb-0 gl-text-gray-500"
data-testid="collapsedSummaryText" data-testid="collapsedSummaryText"
></p> ></p>
<gl-button
v-if="canOverride"
v-collapse-toggle="collapseId"
variant="link"
button-text-classes="flex"
>
<gl-icon :name="toggleIcon" class="mr-1" />
<span>{{ s__('ApprovalRule|Approval rules') }}</span>
</gl-button>
<gl-collapse <gl-accordion>
:id="collapseId" <gl-accordion-item :title="accordionTitle">
v-model="isCollapsed" <app>
class="gl-mt-3 gl-ml-5 gl-mb-5 gl-transition-medium" <mr-rules slot="rules" />
> <mr-rules-hidden-inputs slot="footer" />
<app> </app>
<mr-rules slot="rules" /> </gl-accordion-item>
<mr-rules-hidden-inputs slot="footer" /> </gl-accordion>
</app>
</gl-collapse>
</div> </div>
<app v-else> <app v-else>
<mr-rules slot="rules" /> <mr-rules slot="rules" />
......
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