Show update branch message when MR branch diverged from target branch

Previously, the staleness message shown for the security report on an MR
was determined using this (pseudo-code) logic:

    if target_branch_security_report_is_older_than_7_days:
      if mr_branch_diverged_from_target_branch:
        render "Update your branch with latest changes from target branch"
      else:
        render "Run a new pipeline for target branch"

This change un-nests the logic so that each condition (whether the
target branch's latest security report is older than 7 days; whether the
MR branch has diverged from the target branch) alone produces the
relevant warning message. That is, the logic has changed to this:

    if mr_branch_diverged_from_target_branch:
      render "Update your branch with latest changes from target branch"
    else if target_branch_security_report_is_older_than_7_days:
      render "Run a new pipeline for target branch"

This means that the mr_branch_diverged_from_target_branch warning will
now almost always be shown for highly active projects. This is because
the security report for an MR is based on the comparison of the security
report of the latest HEAD of the target branch and the HEAD of the MR
branch, and therefore won't give entirely correct results if the two
have diverged.

The target_branch_security_report_is_older_than_7_days message will
continue to be shown with the same frequency.

This change also aligns the implementation with the documented[doc]
behaviour.

While this is now more correct, it may be a bit more noisy than the
previous behaviour. There is future work planned[1] to use the merge
base for the comparison instead, which would improve this further.

Finally, this also:
 - refactors the component tests to conform a bit more to our current
   standards;
 - replaces some Bootstrap utility classes with GitLab UI classess.

Addresses part of https://gitlab.com/gitlab-org/gitlab/-/issues/267504.

[1]: https://gitlab.com/gitlab-org/gitlab/-/issues/295167
[doc]: https://docs.gitlab.com/13.12/ee/user/application_security/index.html#outdated-security-reports

Changelog: changed
EE: true

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -309,7 +309,7 @@ export default {
     isMRActive() {
       return this.mrState !== mrStates.merged && this.mrState !== mrStates.closed;
     },
-    isMRBranchOutdated() {
+    hasDivergedFromTargetBranch() {
       return this.divergedCommitsCount > 0;
     },
     hasDastScannedResources() {
@@ -482,10 +482,10 @@ export default {
       </gl-button>
     </template>
 
-    <template v-if="isMRActive && isBaseSecurityReportOutOfDate" #sub-heading>
-      <div class="text-secondary-700 text-1">
+    <template v-if="isMRActive" #sub-heading>
+      <div class="gl-text-gray-700 gl-font-sm">
         <gl-sprintf
-          v-if="isMRBranchOutdated"
+          v-if="hasDivergedFromTargetBranch"
           :message="
             __(
               'Security report is out of date. Please update your branch with the latest changes from the target branch (%{targetBranchName})',
@@ -493,12 +493,12 @@ export default {
           "
         >
           <template #targetBranchName>
-            <gl-link class="text-1" :href="targetBranchTreePath">{{ targetBranch }}</gl-link>
+            <gl-link class="gl-font-sm" :href="targetBranchTreePath">{{ targetBranch }}</gl-link>
           </template>
         </gl-sprintf>
 
         <gl-sprintf
-          v-else
+          v-else-if="isBaseSecurityReportOutOfDate"
           :message="
             __(
               'Security report is out of date. Run %{newPipelineLinkStart}a new pipeline%{newPipelineLinkEnd} for the target branch (%{targetBranchName})',
@@ -506,12 +506,12 @@ export default {
           "
         >
           <template #newPipelineLink="{ content }">
-            <gl-link class="text-1" :href="`${newPipelinePath}?ref=${targetBranch}`">{{
+            <gl-link class="gl-font-sm" :href="`${newPipelinePath}?ref=${targetBranch}`">{{
               content
             }}</gl-link>
           </template>
           <template #targetBranchName>
-            <gl-link class="text-1" :href="targetBranchTreePath">{{ targetBranch }}</gl-link>
+            <gl-link class="gl-font-sm" :href="targetBranchTreePath">{{ targetBranch }}</gl-link>
           </template>
         </gl-sprintf>
       </div>