Update Solution Card Text

This Commit updates the Order of Preference
on the Solution Card Text whenever the
Solution Text is defined it will be displayed.
Remediation Text serves as a Fallback Option.

ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card.vue

@@ -24,7 +24,7 @@ export default {
   },
   computed: {
     solutionText() {
-      return (this.remediation && this.remediation.summary) || this.solution;
+      return this.solution || (this.remediation && this.remediation.summary);
     },
     showCreateMergeRequestMsg() {
       return !this.hasMr && Boolean(this.remediation) && this.hasDownload;

ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue

@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     solutionText() {
-      return (this.remediation && this.remediation.summary) || this.solution;
+      return this.solution || (this.remediation && this.remediation.summary);
     },
     showCreateMergeRequestMsg() {
       return !this.hasMr && Boolean(this.remediation) && this.hasDownload;

ee/changelogs/unreleased/remediation-solution-text-update.yml

+---
+title: Change Auto Remediation Text from Remediation Summary to Solution
+merge_request: 48678
+author:
+type: changed

ee/spec/frontend/vue_shared/security_reports/components/solution_card_spec.js

@@ -38,10 +38,24 @@ describe('Solution Card', () => {
       createComponent({ propsData: { remediation, hasRemediation: true } });
     });
 
-    it('renders the solution text', () => {
+    it('renders the remediation summary', () => {
       expect(findSolutionText().text()).toBe(remediation.summary);
     });
 
+    describe('with remediation and solution', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({ solution });
+      });
+
+      it('renders the solution title', () => {
+        expect(findSolutionTitle().text()).toBe('Solution');
+      });
+
+      it('takes the value of solution, if both are defined', () => {
+        expect(findSolutionText().text()).toBe(solution);
+      });
+    });
+
     describe('with download patch', () => {
       beforeEach(() => {
         wrapper.setProps({ hasDownload: true });

ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import component from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
-import { trimText } from 'helpers/text_helper';
 import { s__ } from '~/locale';
 
 describe('Solution Card', () => {
@@ -20,22 +19,21 @@ describe('Solution Card', () => {
       it('takes the value of solution', () => {
         const propsData = { solution };
         wrapper = shallowMount(Component, { propsData });
-
-        expect(wrapper.vm.solutionText).toEqual(solution);
+        expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
       });
 
       it('takes the summary from a remediation', () => {
         const propsData = { remediation };
         wrapper = shallowMount(Component, { propsData });
-
-        expect(wrapper.vm.solutionText).toEqual(remediation.summary);
+        expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(
+          `Solution: ${remediation.summary}`,
+        );
       });
 
-      it('takes the summary from a remediation, if both are defined', () => {
+      it('takes the value of solution, if both are defined', () => {
         const propsData = { remediation, solution };
         wrapper = shallowMount(Component, { propsData });
-
-        expect(wrapper.vm.solutionText).toEqual(remediation.summary);
+        expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
       });
     });
   });
@@ -48,7 +46,7 @@ describe('Solution Card', () => {
       });
 
       it('renders the solution text and label', () => {
-        expect(trimText(wrapper.find('.card-body').text())).toContain(`Solution: ${solution}`);
+        expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
       });
 
       it('does not render the card footer', () => {
@@ -67,7 +65,7 @@ describe('Solution Card', () => {
       });
 
       it('renders the solution text and label', () => {
-        expect(trimText(wrapper.find('.card-body').text())).toContain(
+        expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(
           `Solution: ${remediation.summary}`,
         );
       });
@@ -86,7 +84,7 @@ describe('Solution Card', () => {
         });
 
         it('renders the create a merge request to implement this solution message', () => {
-          expect(wrapper.find('.card-footer').text()).toContain(
+          expect(wrapper.find('.card-footer').text()).toMatch(
             s__(
               'ciReport|Create a merge request to implement this solution, or download and apply the patch manually.',
             ),