Improve topic avatar copy

Include the name in the copy

Changelog: fixed

app/assets/javascripts/admin/topics/components/remove_avatar.vue

 <script>
 import { uniqueId } from 'lodash';
-import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
 import csrf from '~/lib/utils/csrf';
 
@@ -8,11 +8,12 @@ export default {
   components: {
     GlButton,
     GlModal,
+    GlSprintf,
   },
   directives: {
     GlModal: GlModalDirective,
   },
-  inject: ['path'],
+  inject: ['path', 'name'],
   data() {
     return {
       modalId: uniqueId('remove-topic-avatar-'),
@@ -25,8 +26,8 @@ export default {
   },
   i18n: {
     remove: __('Remove avatar'),
-    title: __('Confirm remove avatar'),
-    body: __('Avatar will be removed. Are you sure?'),
+    title: __('Remove topic avatar'),
+    body: __('Topic avatar for %{name} will be removed. This cannot be undone.'),
   },
   modal: {
     actionPrimary: {
@@ -57,7 +58,9 @@ export default {
       :modal-id="modalId"
       size="sm"
       @primary="deleteApplication"
-      >{{ $options.i18n.body }}
+      ><gl-sprintf :message="$options.i18n.body"
+        ><template #name>{{ name }}</template></gl-sprintf
+      >
       <form ref="deleteForm" method="post" :action="path">
         <input type="hidden" name="_method" value="delete" />
         <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />

app/assets/javascripts/admin/topics/index.js

@@ -8,12 +8,13 @@ export default () => {
     return false;
   }
 
-  const { path } = el.dataset;
+  const { path, name } = el.dataset;
 
   return new Vue({
     el,
     provide: {
       path,
+      name,
     },
     render(h) {
       return h(RemoveAvatar);

app/views/admin/topics/_form.html.haml

@@ -27,7 +27,7 @@
         = topic_icon(@topic, alt: _('Topic avatar'), class: 'avatar topic-avatar s90')
     = render 'shared/choose_avatar_button', f: f
     - 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?
     .form-actions

locale/gitlab.pot

@@ -9424,9 +9424,6 @@ msgstr ""
 msgid "Confirm new password"
 msgstr ""
 
-msgid "Confirm remove avatar"
-msgstr ""
-
 msgid "Confirm user"
 msgstr ""
 
@@ -30947,6 +30944,9 @@ msgstr ""
 msgid "Remove time estimate"
 msgstr ""
 
+msgid "Remove topic avatar"
+msgstr ""
+
 msgid "Remove user"
 msgstr ""
 
@@ -39156,6 +39156,9 @@ msgstr ""
 msgid "Topic avatar"
 msgstr ""
 
+msgid "Topic avatar for %{name} will be removed. This cannot be undone."
+msgstr ""
+
 msgid "Topic name"
 msgstr ""
 

spec/frontend/admin/topics/components/remove_avatar_spec.js

-import { GlButton, GlModal } from '@gitlab/ui';
+import { GlButton, GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import RemoveAvatar from '~/admin/topics/components/remove_avatar.vue';
 
 const modalID = 'fake-id';
 const path = 'topic/path/1';
+const name = 'Topic 1';
 
 jest.mock('lodash/uniqueId', () => () => 'fake-id');
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
@@ -16,10 +17,14 @@ describe('RemoveAvatar', () => {
     wrapper = shallowMount(RemoveAvatar, {
       provide: {
         path,
+        name,
       },
       directives: {
         GlModal: createMockDirective(),
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   };
 
@@ -55,8 +60,8 @@ describe('RemoveAvatar', () => {
       const modal = findModal();
 
       expect(modal.exists()).toBe(true);
-      expect(modal.props('title')).toBe('Confirm remove avatar');
-      expect(modal.text()).toBe('Avatar will be removed. Are you sure?');
+      expect(modal.props('title')).toBe('Remove topic avatar');
+      expect(modal.text()).toBe(`Topic avatar for ${name} will be removed. This cannot be undone.`);
     });
 
     it('contains the correct modal ID', () => {