Add pipeline execution conditions section

- update text
- update tests

ee/app/assets/javascripts/security_orchestration/components/policy_editor/pipeline_execution/constants.js

@@ -4,8 +4,6 @@ export const DEFAULT_PIPELINE_EXECUTION_POLICY = `type: pipeline_execution_polic
 name: ''
 description: ''
 enabled: true
-rules:
-  - foo: bar
 actions:
   - foo: bar
 `;

ee/app/assets/javascripts/security_orchestration/components/policy_editor/pipeline_execution/editor_component.vue

@@ -8,24 +8,22 @@ import {
   PARSING_ERROR_MESSAGE,
   SECURITY_POLICY_ACTIONS,
   ACTIONS_LABEL,
-  RULES_LABEL,
 } from '../constants';
 import EditorLayout from '../editor_layout.vue';
 import DimDisableContainer from '../dim_disable_container.vue';
 import RuleSection from './rule/rule_section.vue';
 import ActionSection from './action/action_section.vue';
 import { createPolicyObject, policyToYaml } from './utils';
-import { DEFAULT_PIPELINE_EXECUTION_POLICY } from './constants';
+import { CONDITIONS_LABEL, DEFAULT_PIPELINE_EXECUTION_POLICY } from './constants';
 
 export default {
   ACTION: 'actions',
-  RULE: 'rules',
   EDITOR_MODE_RULE,
   EDITOR_MODE_YAML,
   SECURITY_POLICY_ACTIONS,
   i18n: {
     ACTIONS_LABEL,
-    RULES_LABEL,
+    CONDITIONS_LABEL,
     PARSING_ERROR_MESSAGE,
     notOwnerButtonText: __('Learn more'),
   },
@@ -107,21 +105,14 @@ export default {
     <template #rules>
       <dim-disable-container :disabled="hasParsingError">
         <template #title>
-          <h4>{{ $options.i18n.RULES_LABEL }}</h4>
+          <h4>{{ $options.i18n.CONDITIONS_LABEL }}</h4>
         </template>
 
         <template #disabled>
           <div class="gl-bg-gray-10 gl-rounded-base gl-p-6"></div>
         </template>
 
-        <rule-section
-          v-for="(rule, index) in policy.rules"
-          :key="rule.id"
-          :data-testid="`rule-${index}`"
-          class="gl-mb-4"
-          :init-rule="rule"
-          :rule-index="index"
-        />
+        <rule-section class="gl-mb-4" />
       </dim-disable-container>
     </template>
 

ee/app/assets/javascripts/security_orchestration/components/policy_editor/pipeline_execution/rule/rule_section.vue

 <script>
-import { RULES_LABEL } from '../../constants';
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   i18n: {
-    RULES_LABEL,
+    conditionText: s__(
+      'SecurityOrchestration|Configure your conditions in the pipeline execution file. %{linkStart}What can pipeline execution do?%{linkEnd}',
+    ),
+    helpPageLink: helpPagePath('user/application_security/policies/pipeline-execution-policies'),
+  },
+  components: {
+    GlLink,
+    GlSprintf,
   },
 };
 </script>
 
 <template>
-  <div>{{ $options.i18n.RULES_LABEL }}</div>
+  <div
+    class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-3 security-policies-bg-gray-10 gl-rounded-base gl-p-5"
+  >
+    <gl-sprintf :message="$options.i18n.conditionText">
+      <template #link="{ content }">
+        <gl-link :href="$options.i18n.helpPageLink" target="_blank">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </div>
 </template>

ee/spec/frontend/security_orchestration/components/policy_editor/pipeline_execution/editor_component_spec.js

@@ -35,10 +35,14 @@ describe('RuleSection', () => {
     factory();
     expect(findPolicyEditorLayout().exists()).toBe(true);
     expect(findActionSection().exists()).toBe(true);
-    expect(findRuleSection().exists()).toBe(true);
     expect(findEmptyState().exists()).toBe(false);
   });
 
+  it('renders the rule section', () => {
+    factory();
+    expect(findRuleSection().exists()).toBe(true);
+  });
+
   it('renders the empty page', () => {
     factory({ provide: { disableScanPolicyUpdate: true } });
     expect(findPolicyEditorLayout().exists()).toBe(false);

ee/spec/frontend/security_orchestration/components/policy_editor/pipeline_execution/rule/rule_section_spec.js

+import { GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RuleSection from 'ee/security_orchestration/components/policy_editor/pipeline_execution/rule/rule_section.vue';
 
@@ -12,11 +13,28 @@ describe('RuleSection', () => {
       provide: {
         ...provide,
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   };
 
-  it('renders', () => {
+  const findGlSprintf = () => wrapper.findComponent(GlSprintf);
+  const findGlLink = () => wrapper.findComponent(GlLink);
+
+  it('renders text', () => {
+    factory();
+    expect(findGlSprintf().text()).toBe(
+      'Configure your conditions in the pipeline execution file.',
+    );
+  });
+
+  it('renders link', () => {
     factory();
-    expect(wrapper.find('div').exists()).toBe(true);
+    expect(findGlLink().exists()).toBe(true);
+    expect(findGlLink().text()).toBe('What can pipeline execution do?');
+    expect(findGlLink().attributes('href')).toBe(
+      '/help/user/application_security/policies/pipeline-execution-policies',
+    );
   });
 });

locale/gitlab.pot

@@ -45949,6 +45949,9 @@ msgstr ""
 msgid "SecurityOrchestration|Compliance framework has no projects"
 msgstr ""
+msgid "SecurityOrchestration|Configure your conditions in the pipeline execution file. %{linkStart}What can pipeline execution do?%{linkEnd}"
+msgstr ""
+
 msgid "SecurityOrchestration|Create more robust vulnerability rules and apply them to all your projects."
 msgstr ""