Moves the CODEOWNERS tip into the Vue approvals app

Instead of the tip being in the HAML view, it is now
in the Vue app.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/284212

changelogs/unreleased/ph-284212-moveCodeownersTipToVueApp.yml

+---
+title: Moved CODEOWNERS tip into approvals Vue app
+merge_request: 54830
+author:
+type: changed

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

 <script>
-import { GlSafeHtmlDirective, GlAccordion, GlAccordionItem } from '@gitlab/ui';
+import { GlSafeHtmlDirective, GlAccordion, GlAccordionItem, GlSprintf, GlLink } from '@gitlab/ui';
 import { mapState } from 'vuex';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, n__, sprintf, s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import App from '../app.vue';
@@ -11,6 +12,8 @@ export default {
   components: {
     GlAccordion,
     GlAccordionItem,
+    GlSprintf,
+    GlLink,
     App,
     MrRules,
     MrRulesHiddenInputs,
@@ -23,6 +26,8 @@ export default {
     ...mapState({
       rules: (state) => state.approvals.rules,
       canOverride: (state) => state.settings.canOverride,
+      canUpdateApprovers: (state) => state.settings.canUpdateApprovers,
+      showCodeOwnerTip: (state) => state.settings.showCodeOwnerTip,
     }),
     accordionTitle() {
       return s__('ApprovalRule|Approval rules');
@@ -95,6 +100,7 @@ export default {
       return null;
     },
   },
+  codeOwnerHelpPage: helpPagePath('user/project/code_owners'),
 };
 </script>
 
@@ -110,7 +116,28 @@ export default {
       <gl-accordion-item :title="accordionTitle">
         <app>
           <mr-rules slot="rules" />
-          <mr-rules-hidden-inputs slot="footer" />
+          <div slot="footer">
+            <mr-rules-hidden-inputs />
+            <div
+              v-if="canUpdateApprovers && showCodeOwnerTip"
+              class="form-text text-muted"
+              data-testid="codeowners-tip"
+            >
+              <gl-sprintf
+                :message="
+                  __(
+                    'Tip: add a %{linkStart}CODEOWNERS%{linkEnd} to automatically add approvers based on file paths and file types.',
+                  )
+                "
+              >
+                <template #link="{ content }">
+                  <gl-link :href="$options.codeOwnerHelpPage" target="_blank">{{
+                    content
+                  }}</gl-link>
+                </template>
+              </gl-sprintf>
+            </div>
+          </div>
         </app>
       </gl-accordion-item>
     </gl-accordion>

ee/app/assets/javascripts/approvals/mount_mr_edit.js

@@ -20,6 +20,8 @@ export default function mountApprovalInput(el) {
     ...el.dataset,
     prefix: 'mr-edit',
     canEdit: parseBoolean(el.dataset.canEdit),
+    canUpdateApprovers: parseBoolean(el.dataset.canUpdateApprovers),
+    showCodeOwnerTip: parseBoolean(el.dataset.showCodeOwnerTip),
     allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
     canOverride: parseBoolean(el.dataset.canOverride),
   });

ee/app/views/shared/issuable/_approver_suggestion.haml

@@ -2,9 +2,13 @@
 - presenter = local_assigns.fetch(:presenter)
 
 - can_update_approvers = can?(current_user, :update_approvers, issuable)
+- approver_presenter = MergeRequestApproverPresenter.new(issuable, skip_user: current_user)
+- show_code_owner_tip = approver_presenter.show_code_owner_tips?
 
 #js-mr-approvals-input{ data: { 'project_id': @target_project.id,
   'can_edit': can?(current_user, :update_approvers, issuable).to_s,
+  'can_update_approvers': can_update_approvers.to_s,
+  'show_code_owner_tip': show_code_owner_tip.to_s,
   'allow_multi_rule': @target_project.multiple_approval_rules_available?.to_s,
   'can-override': @target_project.can_override_approvers?.to_s,
   'mr_id': issuable.iid,
@@ -12,9 +16,7 @@
   'eligible_approvers_docs_path': help_page_path('user/project/merge_requests/merge_request_approvals', anchor: 'eligible-approvers'),
   'project_settings_path': presenter.api_project_approval_settings_path } }
   = sprite_icon('spinner', size: 24, css_class: 'gl-spinner')
-- if can_update_approvers
-  - approver_presenter = MergeRequestApproverPresenter.new(issuable, skip_user: current_user)
-  - if approver_presenter.show_code_owner_tips?
+- if can_update_approvers && show_code_owner_tip && Feature.disabled?(:mr_collapsed_approval_rules, @project, default_enabled: :yaml)
   .form-text.text-muted
     = _('Tip: add a')
     = link_to 'CODEOWNERS', help_page_path('user/project/code_owners'), target: '_blank', tabindex: -1

ee/spec/frontend/approvals/components/mr_edit/app_spec.js

@@ -41,6 +41,15 @@ describe('EE Approvals MREditApp', () => {
     axiosMock.restore();
   });
 
+  it('renders CODEOWNERS tip', () => {
+    store.state.settings.canUpdateApprovers = true;
+    store.state.settings.showCodeOwnerTip = true;
+
+    factory(true);
+
+    expect(wrapper.find('[data-testid="codeowners-tip"]').exists()).toBe(true);
+  });
+
   describe('with empty rules', () => {
     beforeEach(() => {
       store.modules.approvals.state.rules = [];

locale/gitlab.pot

@@ -30967,6 +30967,9 @@ msgstr ""
 msgid "Tip: add a"
 msgstr ""
 
+msgid "Tip: add a %{linkStart}CODEOWNERS%{linkEnd} to automatically add approvers based on file paths and file types."
+msgstr ""
+
 msgid "Title"
 msgstr ""