Use text links in MR approval settings section of UI

Text is preferred to icons according to Pajamas design system.

Changelog: other
EE: true

ee/app/assets/javascripts/approvals/components/approval_settings_checkbox.vue

@@ -51,7 +51,7 @@ export default {
     },
   },
   i18n: {
-    helpLabel: __('Help'),
+    helpLinkText: __('Learn more.'),
     lockIconTitle: __('Setting enforced'),
   },
 };
@@ -72,12 +72,7 @@ export default {
       />
     </template>
     <gl-link :href="href" target="_blank">
-      <gl-icon
-        data-testid="help-icon"
-        name="question-o"
-        :aria-label="$options.i18n.helpLabel"
-        :size="16"
-      />
+      {{ $options.i18n.helpLinkText }}
     </gl-link>
   </gl-form-checkbox>
 </template>

ee/spec/frontend/approvals/components/approval_settings_checkbox_spec.js

@@ -33,7 +33,6 @@ describe('ApprovalSettingsCheckbox', () => {
   const findLink = () => wrapper.findComponent(GlLink);
   const findPopover = () => wrapper.findComponent(GlPopover);
   const findLockIcon = () => wrapper.findByTestId('lock-icon');
-  const findHelpIcon = () => wrapper.findByTestId('help-icon');
 
   afterEach(() => {
     wrapper.destroy();
@@ -45,15 +44,15 @@ describe('ApprovalSettingsCheckbox', () => {
     });
 
     it('shows the label', () => {
-      expect(findCheckbox().text()).toBe(label);
+      expect(findCheckbox().text()).toContain(label);
     });
 
-    it('sets the correct help link', () => {
-      expect(findLink().attributes('href')).toBe(`/help/${APPROVALS_HELP_PATH}#${anchor}`);
+    it('shows the help text', () => {
+      expect(findCheckbox().text()).toContain('Learn more.');
     });
 
-    it('shows a help icon', () => {
-      expect(findHelpIcon().props('name')).toBe('question-o');
+    it('sets the correct help link', () => {
+      expect(findLink().attributes('href')).toBe(`/help/${APPROVALS_HELP_PATH}#${anchor}`);
     });
   });