<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Work on this issue](https://contributors.gitlab.com/manage-issue?action=work&projectId=278964&issueIid=510496) - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=510496) </details> <!--IssueSummary end--> ## Problem to solve This issue represents a finding from our work to audit features belonging to ~"group::source code". See the [analysis in Figma](https://www.figma.com/design/7UQAtMGbZtEeqiaiBMqah5/Dark-mode-%3E-Source-Code-Group?node-id=19-667&p=f&t=FbNy3i0ybTtzHfDa-0) for more information. See the [overview video](https://youtu.be/0wEmZLcF_CU) 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 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> ```