Display security approval rules when creating a new project - Implement Vulnerability-Check/License-Check rows

Parent Issue: #31922 (closed)

Tasks #	Description	frontend issue	frontend weight
1	Implement Action/Mutations for Security Configuration endpoint	#229827 (closed)	frontend-weight3
2	This issue -> Implement Vulnerability-Check/License-Check rows	#229825 (closed)	frontend-weight5
3	Implement tooltips in `unconfigured_approval_rule' component	#229828 (closed)	frontend-weight3

Description

Implement the License-Check and Vulnerability-Check rows to show in the unconfigured state, and the configured state (same as unconfigured but show 'Enable' button)

Implementation Plan

• Create generic unconfigured_approval_rule' component in ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/`

It should also have a prop to show/hide the "Enable" button. prop for tooltip links, prop for description text, should emit an event for the Enable button click event.

• Create wrapper unconfigured_approval_rules component that iterates for License-Check and Vulnerability-Check using unconfigured_approval_rule component in ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/

• At the bottom of the ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue add ``unconfigured_approval_rules` component to bottom of template

• Clicking the "Enable" button opens the existing add approval modal with the modal name disabled and prefilled with approval name License-Check or Vulnerability-Check

• Implement logic to hide License-Check and Vulnerability-Check and `unconfigured_approval_rule' component when the approval rules exist.

• Implement unit tests for unconfigured_approval_rule' and unconfigured_approval_rules` component

Testing

Engineer to implement applicable unit tests to exercise component functions

SET to add test for approval rules to end to end test suite