Add alert when invalid policies are blocking enforcement

What does this MR do and why?

Create a new alert if there are policies with deprecated properties that are preventing the enforcement of all the policies

• if one policy has deprecated properties, none of the policies will be enforced
• create new alert to show if policies are not being enforced
• with the breaking changes, the users found it confusing that all the policies disappeared. Now that we are adding the policies back to the page, we need to indicated to the user that the policies are not being applied because there are invalid policies in the list
• this MR can be merged before the backend work because it will not affect anything

Changelog: changed

EE: true

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Scenario	Screenshot
has invalid policies
does not have invalid policies

Scenario	Before	After
Popover

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

Testing the UI

1. Upload a GitLab Ultimate license
2. Apply the below patch

Patch

diff --git a/ee/app/assets/javascripts/security_orchestration/components/policies/app.vue b/ee/app/assets/javascripts/security_orchestration/components/policies/app.vue
index b512a948b997..179454e9e7ed 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policies/app.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policies/app.vue
@@ -32,7 +32,7 @@ export default {
 <template>
   <div>
     <list-header
-      :has-invalid-policies="hasInvalidPolicies"
+      :has-invalid-policies="true || hasInvalidPolicies"
       @update-policy-list="handleUpdatePolicyList"
     />
     <list-component
diff --git a/ee/app/assets/javascripts/security_orchestration/components/policies/list_component.vue b/ee/app/assets/javascripts/security_orchestration/components/policies/list_component.vue
index e0492ae80263..fc692dde2e1b 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policies/list_component.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policies/list_component.vue
@@ -461,9 +461,9 @@ export default {
           <span v-else class="gl-sr-only">{{ $options.i18n.statusDisabled }}</span>
 
           <breaking-changes-icon
-            v-if="showBreakingChangesIcon(deprecatedProperties)"
+            v-if="true || showBreakingChangesIcon(deprecatedProperties)"
             :id="name"
-            :deprecated-properties="deprecatedProperties"
+            :deprecated-properties="['match_on_inclusion'] || deprecatedProperties"
           />
         </div>
       </template>

3. Navigate to a project => Secure => Policies
4. Verify the alert appears correctly
5. Verify the icon popovers appear correctly

Testing this with actual data

1. Upload a GitLab Ultimate license
2. Cherry pick the commits from List invalid policies (!150725 - merged) into the branch
3. Navigate to a project
4. Create the following file at .gitlab/security-policies/policy.yml

approval_policy:
- name: Policy with deprecated values
  description: The GitLab legal team requires approval
  enabled: true
  rules:
  - type: license_finding
    branches:
    - spooky-stuff
    match_on_inclusion: false
    license_types:
    - 3dfx Glide License
    license_states:
    - newly_detected
  actions:
  - type: require_approval
    approvals_required: 1
    role_approvers:
    - maintainer
    - owner
  approval_settings:
    block_unprotecting_branches: false
    prevent_pushing_and_force_pushing: true

5. Navigate to the project => Secure => Policies => Edit policy project => Link the project to itself
6. Verify the banner for the invalid properties show up