Update security policy editor rule button styling

- update styling to match add alert button
- refactor components to pull out i18n strings
  from the template
- update namespaces of some i18n strings

Changelog: changed
EE: true

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/network_policy_editor.vue

@@ -33,12 +33,22 @@ import PolicyRuleBuilder from './policy_rule_builder.vue';
 export default {
   EDITOR_MODES,
   i18n: {
+    actions: s__('SecurityOrchestration|Actions'),
+    addRule: s__('SecurityOrchestration|Add rule'),
+    defaultTrafficBehavior: s__(
+      'NetworkPolicies|Traffic that does not match any rule will be blocked.',
+    ),
+    description: __('Description'),
     toggleLabel: s__('SecurityOrchestration|Policy status'),
     PARSING_ERROR_MESSAGE,
+    name: __('Name'),
     noEnvironmentDescription: s__(
-      'SecurityOrchestration|Network Policies can be used to limit which network traffic is allowed between containers inside the cluster.',
+      'NetworkPolicies|Network Policies can be used to limit which network traffic is allowed between containers inside the cluster.',
     ),
     noEnvironmentButton: __('Learn more'),
+    policyPreview: s__('SecurityOrchestration|Policy preview'),
+    rules: s__('SecurityOrchestration|Rules'),
+    unparseable: s__('SecurityOrchestration|Unable to parse policy'),
   },
   components: {
     GlEmptyState,
@@ -199,11 +209,11 @@ export default {
         {{ $options.i18n.PARSING_ERROR_MESSAGE }}
       </gl-alert>
 
-      <gl-form-group :label="s__('NetworkPolicies|Name')" label-for="policyName">
+      <gl-form-group :label="$options.i18n.name" label-for="policyName">
         <gl-form-input id="policyName" v-model="policy.name" :disabled="hasParsingError" />
       </gl-form-group>
 
-      <gl-form-group :label="s__('NetworkPolicies|Description')" label-for="policyDescription">
+      <gl-form-group :label="$options.i18n.description" label-for="policyDescription">
         <gl-form-textarea
           id="policyDescription"
           v-model="policy.description"
@@ -217,7 +227,7 @@ export default {
 
       <dim-disable-container data-testid="rule-builder-container" :disabled="hasParsingError">
         <template #title>
-          <h4>{{ s__('NetworkPolicies|Rules') }}</h4>
+          <h4>{{ $options.i18n.rules }}</h4>
         </template>
 
         <template #disabled>
@@ -240,19 +250,19 @@ export default {
           @remove="removeRule(index)"
         />
 
-        <div class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-mb-5">
-          <gl-button variant="link" data-testid="add-rule" @click="addRule">{{
-            s__('Network Policy|New rule')
-          }}</gl-button>
+        <div
+          class="gl-p-5 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-mb-5 gl-bg-gray-10"
+        >
+          <gl-button variant="link" data-testid="add-rule" icon="plus" @click="addRule">
+            {{ $options.i18n.addRule }}
+          </gl-button>
         </div>
       </dim-disable-container>
 
       <dim-disable-container data-testid="policy-action-container" :disabled="hasParsingError">
         <template #title>
-          <h4>{{ s__('NetworkPolicies|Actions') }}</h4>
-          <p>
-            {{ s__('NetworkPolicies|Traffic that does not match any rule will be blocked.') }}
-          </p>
+          <h4>{{ $options.i18n.actions }}</h4>
+          <p>{{ $options.i18n.defaultTrafficBehavior }}</p>
         </template>
 
         <template #disabled>
@@ -268,11 +278,11 @@ export default {
     <template #rule-editor-preview>
       <dim-disable-container data-testid="policy-preview-container" :disabled="hasParsingError">
         <template #title>
-          <h5>{{ s__('NetworkPolicies|Policy preview') }}</h5>
+          <h5>{{ $options.i18n.policyPreview }}</h5>
         </template>
 
         <template #disabled>
-          <policy-preview :policy-yaml="s__('NetworkPolicies|Unable to parse policy')" />
+          <policy-preview :policy-yaml="$options.i18n.unparsable" />
         </template>
 
         <policy-preview :policy-yaml="policyYaml" :policy-description="humanizedPolicy" />

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_alert_picker.vue

 <script>
 import { GlAlert, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import getAgentCount from '../../graphql/queries/get_agent_count.query.graphql';
 
 export default {
@@ -11,10 +11,11 @@ export default {
     AGENT_REQUIRED: s__(
       'NetworkPolicies|Please %{installLinkStart}install%{installLinkEnd} and %{configureLinkStart}configure a Kubernetes Agent for this project%{configureLinkEnd} to enable alerts.',
     ),
-    BUTTON_LABEL: s__('NetworkPolicies|+ Add alert'),
+    BUTTON_LABEL: s__('NetworkPolicies|Add alert'),
     HIGH_VOLUME_WARNING: s__(
       `NetworkPolicies|Alerts are intended to be selectively used for a limited number of events that are potentially concerning and warrant a manual review. Alerts should not be used as a substitute for a SIEM or a logging tool. High volume alerts are likely to be dropped so as to preserve the stability of GitLab's integration with Kubernetes.`,
     ),
+    REMOVE: __('Remove'),
   },
   components: {
     GlAlert,
@@ -102,6 +103,7 @@ export default {
         variant="link"
         category="primary"
         data-testid="add-alert"
+        icon="plus"
         :disabled="!isAgentInstalled"
         @click="$emit('update-alert', !policyAlert)"
       >
@@ -127,7 +129,7 @@ export default {
           data-testid="remove-alert"
           icon="remove"
           category="tertiary"
-          :aria-label="__('Remove')"
+          :aria-label="$options.i18n.REMOVE"
           @click="$emit('update-alert', !policyAlert)"
         />
       </div>

locale/gitlab.pot

@@ -22095,9 +22095,6 @@ msgstr ""
 msgid "Network"
 msgstr ""
 
-msgid "Network Policy|New rule"
-msgstr ""
-
 msgid "NetworkPolicies|%{ifLabelStart}if%{ifLabelEnd} %{ruleType} %{isLabelStart}is%{isLabelEnd} %{ruleDirection} %{ruleSelector} %{directionLabelStart}and is inbound from a%{directionLabelEnd} %{rule} %{portsLabelStart}on%{portsLabelEnd} %{ports}"
 msgstr ""
 
@@ -22119,16 +22116,13 @@ msgstr ""
 msgid "NetworkPolicies|%{strongOpen}any%{strongClose} port"
 msgstr ""
 
-msgid "NetworkPolicies|+ Add alert"
-msgstr ""
-
 msgid "NetworkPolicies|.yaml"
 msgstr ""
 
 msgid "NetworkPolicies|.yaml mode"
 msgstr ""
 
-msgid "NetworkPolicies|Actions"
+msgid "NetworkPolicies|Add alert"
 msgstr ""
 
 msgid "NetworkPolicies|Alerts are intended to be selectively used for a limited number of events that are potentially concerning and warrant a manual review. Alerts should not be used as a substitute for a SIEM or a logging tool. High volume alerts are likely to be dropped so as to preserve the stability of GitLab's integration with Kubernetes."
@@ -22164,9 +22158,6 @@ msgstr ""
 msgid "NetworkPolicies|Deny all traffic"
 msgstr ""
 
-msgid "NetworkPolicies|Description"
-msgstr ""
-
 msgid "NetworkPolicies|Edit policy"
 msgstr ""
 
@@ -22191,10 +22182,10 @@ msgstr ""
 msgid "NetworkPolicies|Kubernetes error: %{error}"
 msgstr ""
 
-msgid "NetworkPolicies|Name"
+msgid "NetworkPolicies|Network"
 msgstr ""
 
-msgid "NetworkPolicies|Network"
+msgid "NetworkPolicies|Network Policies can be used to limit which network traffic is allowed between containers inside the cluster."
 msgstr ""
 
 msgid "NetworkPolicies|Network traffic"
@@ -22224,9 +22215,6 @@ msgstr ""
 msgid "NetworkPolicies|Policy editor"
 msgstr ""
 
-msgid "NetworkPolicies|Policy preview"
-msgstr ""
-
 msgid "NetworkPolicies|Rule"
 msgstr ""
 
@@ -22236,9 +22224,6 @@ msgstr ""
 msgid "NetworkPolicies|Rule mode is unavailable for this policy. In some cases, we cannot parse the YAML file back into the rules editor."
 msgstr ""
 
-msgid "NetworkPolicies|Rules"
-msgstr ""
-
 msgid "NetworkPolicies|Save changes"
 msgstr ""
 
@@ -22251,9 +22236,6 @@ msgstr ""
 msgid "NetworkPolicies|Traffic that does not match any rule will be blocked."
 msgstr ""
 
-msgid "NetworkPolicies|Unable to parse policy"
-msgstr ""
-
 msgid "NetworkPolicies|all DNS names"
 msgstr ""
 
@@ -29682,6 +29664,12 @@ msgstr ""
 msgid "SecurityOrchestration|Action"
 msgstr ""
 
+msgid "SecurityOrchestration|Actions"
+msgstr ""
+
+msgid "SecurityOrchestration|Add rule"
+msgstr ""
+
 msgid "SecurityOrchestration|All policies"
 msgstr ""
 
@@ -29715,9 +29703,6 @@ msgstr ""
 msgid "SecurityOrchestration|Network"
 msgstr ""
 
-msgid "SecurityOrchestration|Network Policies can be used to limit which network traffic is allowed between containers inside the cluster."
-msgstr ""
-
 msgid "SecurityOrchestration|New policy"
 msgstr ""
 
@@ -29733,6 +29718,9 @@ msgstr ""
 msgid "SecurityOrchestration|Policy editor"
 msgstr ""
 
+msgid "SecurityOrchestration|Policy preview"
+msgstr ""
+
 msgid "SecurityOrchestration|Policy status"
 msgstr ""
 
@@ -29742,6 +29730,9 @@ msgstr ""
 msgid "SecurityOrchestration|Rule"
 msgstr ""
 
+msgid "SecurityOrchestration|Rules"
+msgstr ""
+
 msgid "SecurityOrchestration|Scan Execution"
 msgstr ""
 
@@ -29775,6 +29766,9 @@ msgstr ""
 msgid "SecurityOrchestration|To widen your search, change filters above or select a different security policy project."
 msgstr ""
 
+msgid "SecurityOrchestration|Unable to parse policy"
+msgstr ""
+
 msgid "SecurityOrchestration|Update scan execution policies"
 msgstr ""