Commit 68e27596 authored by Frédéric Caplette's avatar Frédéric Caplette

Merge branch '356140-update-copy-for-the-remove-topic-avatar-modal' into 'master'

Resolve "Update copy for the remove topic avatar modal"

See merge request gitlab-org/gitlab!83093
parents 0d26b0c3 d399c7f3
<script> <script>
import { uniqueId } from 'lodash'; import { uniqueId } from 'lodash';
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import { GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
import csrf from '~/lib/utils/csrf'; import csrf from '~/lib/utils/csrf';
...@@ -8,11 +8,12 @@ export default { ...@@ -8,11 +8,12 @@ export default {
components: { components: {
GlButton, GlButton,
GlModal, GlModal,
GlSprintf,
}, },
directives: { directives: {
GlModal: GlModalDirective, GlModal: GlModalDirective,
}, },
inject: ['path'], inject: ['path', 'name'],
data() { data() {
return { return {
modalId: uniqueId('remove-topic-avatar-'), modalId: uniqueId('remove-topic-avatar-'),
...@@ -25,8 +26,8 @@ export default { ...@@ -25,8 +26,8 @@ export default {
}, },
i18n: { i18n: {
remove: __('Remove avatar'), remove: __('Remove avatar'),
title: __('Confirm remove avatar'), title: __('Remove topic avatar'),
body: __('Avatar will be removed. Are you sure?'), body: __('Topic avatar for %{name} will be removed. This cannot be undone.'),
}, },
modal: { modal: {
actionPrimary: { actionPrimary: {
...@@ -57,7 +58,9 @@ export default { ...@@ -57,7 +58,9 @@ export default {
:modal-id="modalId" :modal-id="modalId"
size="sm" size="sm"
@primary="deleteApplication" @primary="deleteApplication"
>{{ $options.i18n.body }} ><gl-sprintf :message="$options.i18n.body"
><template #name>{{ name }}</template></gl-sprintf
>
<form ref="deleteForm" method="post" :action="path"> <form ref="deleteForm" method="post" :action="path">
<input type="hidden" name="_method" value="delete" /> <input type="hidden" name="_method" value="delete" />
<input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
......
...@@ -8,12 +8,13 @@ export default () => { ...@@ -8,12 +8,13 @@ export default () => {
return false; return false;
} }
const { path } = el.dataset; const { path, name } = el.dataset;
return new Vue({ return new Vue({
el, el,
provide: { provide: {
path, path,
name,
}, },
render(h) { render(h) {
return h(RemoveAvatar); return h(RemoveAvatar);
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
= topic_icon(@topic, alt: _('Topic avatar'), class: 'avatar topic-avatar s90') = topic_icon(@topic, alt: _('Topic avatar'), class: 'avatar topic-avatar s90')
= render 'shared/choose_avatar_button', f: f = render 'shared/choose_avatar_button', f: f
- if @topic.avatar? - if @topic.avatar?
.js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic) } } .js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic), name: @topic.name } }
- if @topic.new_record? - if @topic.new_record?
.form-actions .form-actions
......
...@@ -9424,9 +9424,6 @@ msgstr "" ...@@ -9424,9 +9424,6 @@ msgstr ""
msgid "Confirm new password" msgid "Confirm new password"
msgstr "" msgstr ""
msgid "Confirm remove avatar"
msgstr ""
msgid "Confirm user" msgid "Confirm user"
msgstr "" msgstr ""
...@@ -30947,6 +30944,9 @@ msgstr "" ...@@ -30947,6 +30944,9 @@ msgstr ""
msgid "Remove time estimate" msgid "Remove time estimate"
msgstr "" msgstr ""
msgid "Remove topic avatar"
msgstr ""
msgid "Remove user" msgid "Remove user"
msgstr "" msgstr ""
...@@ -39156,6 +39156,9 @@ msgstr "" ...@@ -39156,6 +39156,9 @@ msgstr ""
msgid "Topic avatar" msgid "Topic avatar"
msgstr "" msgstr ""
msgid "Topic avatar for %{name} will be removed. This cannot be undone."
msgstr ""
msgid "Topic name" msgid "Topic name"
msgstr "" msgstr ""
......
import { GlButton, GlModal } from '@gitlab/ui'; import { GlButton, GlModal, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import RemoveAvatar from '~/admin/topics/components/remove_avatar.vue'; import RemoveAvatar from '~/admin/topics/components/remove_avatar.vue';
const modalID = 'fake-id'; const modalID = 'fake-id';
const path = 'topic/path/1'; const path = 'topic/path/1';
const name = 'Topic 1';
jest.mock('lodash/uniqueId', () => () => 'fake-id'); jest.mock('lodash/uniqueId', () => () => 'fake-id');
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
...@@ -16,10 +17,14 @@ describe('RemoveAvatar', () => { ...@@ -16,10 +17,14 @@ describe('RemoveAvatar', () => {
wrapper = shallowMount(RemoveAvatar, { wrapper = shallowMount(RemoveAvatar, {
provide: { provide: {
path, path,
name,
}, },
directives: { directives: {
GlModal: createMockDirective(), GlModal: createMockDirective(),
}, },
stubs: {
GlSprintf,
},
}); });
}; };
...@@ -55,8 +60,8 @@ describe('RemoveAvatar', () => { ...@@ -55,8 +60,8 @@ describe('RemoveAvatar', () => {
const modal = findModal(); const modal = findModal();
expect(modal.exists()).toBe(true); expect(modal.exists()).toBe(true);
expect(modal.props('title')).toBe('Confirm remove avatar'); expect(modal.props('title')).toBe('Remove topic avatar');
expect(modal.text()).toBe('Avatar will be removed. Are you sure?'); expect(modal.text()).toBe(`Topic avatar for ${name} will be removed. This cannot be undone.`);
}); });
it('contains the correct modal ID', () => { it('contains the correct modal ID', () => {
......
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