[Settings > Merge requests] Remove surrounding form group component for Security Approvals card

Problem to solve

This issue represents a finding from our work to audit features belonging to groupsource code. See the analysis in Figma for more information. See the overview video for guidance on how to review this analysis.

Screenshots

Proposal

Remove surrounding form group component for Security Approvals card

Implementation guide

Remove the gl-form-group element in ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue:

diff --git a/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue b/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue
index ac1002559520..cdfe9e77cca6 100644
--- a/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue
+++ b/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue
@@ -54,45 +54,43 @@ export default {
 </script>
 
 <template>
-  <gl-form-group>
-    <crud-component :title="$options.i18n.securityApprovals" icon="shield" :count="policies.length">
-      <template #description>
-        {{ $options.i18n.description }}
-        <gl-link :href="$options.scanResultPolicyHelpPagePath" target="_blank" class="gl-text-sm"
-          >{{ $options.i18n.learnMore }}.</gl-link
-        >
-      </template>
-      <template #actions>
-        <gl-button category="secondary" size="small" :href="newPolicyPath">
-          {{ $options.i18n.createPolicy }}
-        </gl-button>
-      </template>
+  <crud-component :title="$options.i18n.securityApprovals" icon="shield" :count="policies.length">
+    <template #description>
+      {{ $options.i18n.description }}
+      <gl-link :href="$options.scanResultPolicyHelpPagePath" target="_blank" class="gl-text-sm"
+        >{{ $options.i18n.learnMore }}.</gl-link
+      >
+    </template>
+    <template #actions>
+      <gl-button category="secondary" size="small" :href="newPolicyPath">
+        {{ $options.i18n.createPolicy }}
+      </gl-button>
+    </template>
 
-      <container :rules="policies">
-        <template #thead="{ name, approvalsRequired, branches }">
-          <tr class="!gl-table-row">
-            <th class="!gl-w-1/2">{{ name }}</th>
-            <th>{{ branches }}</th>
-            <th>{{ approvalsRequired }}</th>
-            <th></th>
-          </tr>
-        </template>
-        <template #tbody>
-          <tr v-if="!hasPolicies">
-            <td colspan="4" class="gl-p-5 gl-text-center gl-text-subtle">
-              {{ $options.i18n.noPolicies }}.
-            </td>
-          </tr>
-          <template v-for="(policy, index) in policies" v-else>
-            <scan-result-policy
-              :key="`${policy.name}-policy`"
-              :policy="policy"
-              @toggle="selectionChanged(index)"
-            />
-            <policy-details :key="`${policy.name}-details`" :policy="policy" />
-          </template>
+    <container :rules="policies">
+      <template #thead="{ name, approvalsRequired, branches }">
+        <tr class="!gl-table-row">
+          <th class="!gl-w-1/2">{{ name }}</th>
+          <th>{{ branches }}</th>
+          <th>{{ approvalsRequired }}</th>
+          <th></th>
+        </tr>
+      </template>
+      <template #tbody>
+        <tr v-if="!hasPolicies">
+          <td colspan="4" class="gl-p-5 gl-text-center gl-text-subtle">
+            {{ $options.i18n.noPolicies }}.
+          </td>
+        </tr>
+        <template v-for="(policy, index) in policies" v-else>
+          <scan-result-policy
+            :key="`${policy.name}-policy`"
+            :policy="policy"
+            @toggle="selectionChanged(index)"
+          />
+          <policy-details :key="`${policy.name}-details`" :policy="policy" />
         </template>
-      </container>
-    </crud-component>
-  </gl-form-group>
+      </template>
+    </container>
+  </crud-component>
 </template>