This MR removes direct data manipulation

As part of Vue 3 migration
overriding method behavior and
direct data manipulation
should be avoided

app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue

@@ -3,6 +3,7 @@ import { GlButton, GlDrawer, GlForm, GlFormGroup, GlFormRadioGroup } from '@gitl
 import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 import { s__, __ } from '~/locale';
 import csrf from '~/lib/utils/csrf';
+import { CATEGORY_OPTIONS } from '~/abuse_reports/components/constants';
 
 export default {
   name: 'AbuseCategorySelector',
@@ -40,19 +41,7 @@ export default {
     label: s__('ReportAbuse|Why are you reporting this user?'),
     next: __('Next'),
   },
-  categoryOptions: [
-    { value: 'spam', text: s__("ReportAbuse|They're posting spam.") },
-    { value: 'offensive', text: s__("ReportAbuse|They're being offensive or abusive.") },
-    { value: 'phishing', text: s__("ReportAbuse|They're phishing.") },
-    { value: 'crypto', text: s__("ReportAbuse|They're crypto mining.") },
-    {
-      value: 'credentials',
-      text: s__("ReportAbuse|They're posting personal information or credentials."),
-    },
-    { value: 'copyright', text: s__("ReportAbuse|They're violating a copyright or trademark.") },
-    { value: 'malware', text: s__("ReportAbuse|They're posting malware.") },
-    { value: 'other', text: s__('ReportAbuse|Something else.') },
-  ],
+  CATEGORY_OPTIONS,
   data() {
     return {
       selected: '',
@@ -109,7 +98,7 @@ export default {
         <gl-form-group :label="$options.i18n.label" label-class="gl-text-black-normal">
           <gl-form-radio-group
             v-model="selected"
-            :options="$options.categoryOptions"
+            :options="$options.CATEGORY_OPTIONS"
             name="abuse_report[category]"
             required
           />

app/assets/javascripts/abuse_reports/components/constants.js

+import { s__ } from '~/locale';
+
+export const CATEGORY_OPTIONS = [
+  { value: 'spam', text: s__("ReportAbuse|They're posting spam.") },
+  { value: 'offensive', text: s__("ReportAbuse|They're being offensive or abusive.") },
+  { value: 'phishing', text: s__("ReportAbuse|They're phishing.") },
+  { value: 'crypto', text: s__("ReportAbuse|They're crypto mining.") },
+  {
+    value: 'credentials',
+    text: s__("ReportAbuse|They're posting personal information or credentials."),
+  },
+  { value: 'copyright', text: s__("ReportAbuse|They're violating a copyright or trademark.") },
+  { value: 'malware', text: s__("ReportAbuse|They're posting malware.") },
+  { value: 'other', text: s__('ReportAbuse|Something else.') },
+];

spec/frontend/abuse_reports/components/abuse_category_selector_spec.js

@@ -2,6 +2,7 @@ import { GlDrawer, GlForm, GlFormGroup, GlFormRadioGroup } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
+import { CATEGORY_OPTIONS } from '~/abuse_reports/components/constants';
 
 jest.mock('~/lib/utils/common_utils', () => ({
   contentTop: jest.fn(),
@@ -54,7 +55,7 @@ describe('AbuseCategorySelector', () => {
     });
 
     it('renders title', () => {
-      expect(findTitle().text()).toBe(wrapper.vm.$options.i18n.title);
+      expect(findTitle().text()).toBe('Report abuse to administrator');
     });
 
     it('emits close-drawer event', async () => {
@@ -88,12 +89,12 @@ describe('AbuseCategorySelector', () => {
 
     it('renders label', () => {
       expect(findFormGroup().exists()).toBe(true);
-      expect(findFormGroup().attributes('label')).toBe(wrapper.vm.$options.i18n.label);
+      expect(findFormGroup().attributes('label')).toBe('Why are you reporting this user?');
     });
 
     it('renders radio group', () => {
       expect(findRadioGroup().exists()).toBe(true);
-      expect(findRadioGroup().props('options')).toEqual(wrapper.vm.$options.categoryOptions);
+      expect(findRadioGroup().props('options')).toEqual(CATEGORY_OPTIONS);
       expect(findRadioGroup().attributes('name')).toBe('abuse_report[category]');
       expect(findRadioGroup().attributes('required')).not.toBeUndefined();
     });
@@ -116,7 +117,7 @@ describe('AbuseCategorySelector', () => {
 
     it('renders submit button', () => {
       expect(findSubmitFormButton().exists()).toBe(true);
-      expect(findSubmitFormButton().text()).toBe(wrapper.vm.$options.i18n.next);
+      expect(findSubmitFormButton().text()).toBe('Next');
     });
   });
 });