Merge branch '477254-add-more-whitespace-to-merge-topics-modal' into 'master'

Resolve "Add more whitespace to Merge Topics Modal"

Closes #477254

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/161787



Merged-by: Himanshu Kapoor <info@fleon.org>
Approved-by: Jack Chapman <jachapman@gitlab.com>
Approved-by: Dan MH <dmizzi-harris@gitlab.com>
Approved-by: Himanshu Kapoor <info@fleon.org>
Reviewed-by: Jack Chapman <jachapman@gitlab.com>
Co-authored-by: Vanessa Otto <votto@gitlab.com>

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

@@ -5,6 +5,8 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import csrf from '~/lib/utils/csrf';
 import TopicSelect from './topic_select.vue';
 
+const formId = 'merge-topics-form';
+
 export default {
   components: {
     GlAlert,
@@ -43,6 +45,8 @@ export default {
         attributes: {
           variant: 'danger',
           disabled: !this.validSelectedTopics,
+          type: 'submit',
+          form: formId,
         },
       };
     },
@@ -54,9 +58,6 @@ export default {
     selectTargetTopic(topic) {
       this.targetTopic = topic;
     },
-    mergeTopics() {
-      this.$refs.mergeForm.submit();
-    },
   },
   i18n: {
     title: s__('MergeTopics|Merge topics'),
@@ -70,6 +71,7 @@ export default {
     warningRemoveTopic: s__('MergeTopics|%{sourceTopic} will be removed'),
     warningMoveProjects: s__('MergeTopics|All assigned projects will be moved to %{targetTopic}'),
   },
+  formId,
   modal: {
     id: 'merge-topics',
     actionSecondary: {
@@ -93,7 +95,6 @@ export default {
       :action-secondary="$options.modal.actionSecondary"
       :modal-id="$options.modal.id"
       size="sm"
-      @primary="mergeTopics"
     >
       <p>{{ $options.i18n.body }}</p>
       <topic-select
@@ -130,7 +131,7 @@ export default {
         </ul>
         {{ $options.i18n.warningBody }}
       </gl-alert>
-      <form ref="mergeForm" method="post" :action="path">
+      <form :id="$options.formId" method="post" :action="path">
         <input type="hidden" name="_method" value="post" />
         <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
         <input type="hidden" name="source_topic_id" :value="sourceTopicId" />

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

 <script>
-import { GlAvatarLabeled, GlCollapsibleListbox } from '@gitlab/ui';
+import { GlAvatarLabeled, GlCollapsibleListbox, GlFormGroup } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { s__, n__ } from '~/locale';
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
@@ -9,6 +9,7 @@ export default {
   components: {
     GlAvatarLabeled,
     GlCollapsibleListbox,
+    GlFormGroup,
   },
   props: {
     selectedTopic: {
@@ -95,8 +96,10 @@ export default {
 </script>
 
 <template>
-  <div>
-    <label v-if="labelText" :id="labelId">{{ labelText }}</label>
+  <gl-form-group :id="labelId">
+    <template #label>
+      {{ labelText }}
+    </template>
     <gl-collapsible-listbox
       v-model="selected"
       block
@@ -125,5 +128,5 @@ export default {
         {{ searchSummary }}
       </template>
     </gl-collapsible-listbox>
-  </div>
+  </gl-form-group>
 </template>

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

-import { GlAvatarLabeled, GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
+import { GlAvatarLabeled, GlCollapsibleListbox, GlListboxItem, GlFormGroup } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -95,13 +95,15 @@ describe('TopicSelect', () => {
   });
 
   it('renders label', () => {
+    const labelText = 'my label';
+
     createComponent({
       props: {
-        labelText: 'my label',
+        labelText,
       },
     });
 
-    expect(wrapper.find('label').text()).toBe('my label');
+    expect(wrapper.findComponent(GlFormGroup).text()).toContain(labelText);
   });
 
   it('renders dropdown items', () => {