Create empty state when Protected Environment has no approval rules

Problem:

From: !111862 (comment 1290890837)

With the introduction of Multiple approval rules - Protected environments are not allowed to have no deployment rules, but are allowed to have no approval rules. Currently when a protected environment has no approval rules, it is shown in the table like the screenshot below, which causes the UI to look unfinished and as if something hasn't loaded:

Example

Solution:

We'll probably want to add in some empty-state communication to help explain why the UI looks as it does.

Design:

Implementation guide

1. Update edit_protected_environment_rules_card component:
   • Ensure that the template is rendered if there are no rules present
   • Add a new slot for the empty-state which is rendered when there are no rules provided
   • Use similar styles for the empty state block: gl-border-t gl-p-5 gl-bg-white
   • Currently, there's a conditional border rendering (:class="{ 'gl-border-t': rules.length }"). We don't need the condition anymore as we want to render the border in any case.
2. Update edit_protected_environments_list component to use the newly added empty-state slot:
   • Add translated string into the $options.i18n object (the text is s__('ProtectedEnvironments|This environment has no approval rules set up. %{linkStart}Learn more about deployment approvals.%{linkEnd}')
   • Use the GlSprintf component for rendering the string with the link
   • Use the HelpPageLink shared component to render a link to the docs ( the link is ci/environments/deployment_approvals)
3. Update corresponding tests.