Optimize hasInvalidPolicy code

- remove unnecessary elements

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/lib/from_yaml.js

@@ -132,9 +132,9 @@ const hasUnsupportedAttribute = (manifest) => {
     return !Object.keys(object).every((item) => allowedValues.includes(item));
   };
 
-  const hasInvalidPolicy = (type) => {
+  const hasInvalidPolicy = (ingress = [], egress = []) => {
     let isInvalidPolicy = false;
-    manifest.spec[type].forEach((item) => {
+    [...ingress, ...egress].forEach((item) => {
       isInvalidPolicy = hasInvalidKey(item, ruleKeys);
       if (item.toPorts?.length && !isInvalidPolicy) {
         item.toPorts.forEach((entry) => {
@@ -158,11 +158,8 @@ const hasUnsupportedAttribute = (manifest) => {
   if (manifest?.spec && !isUnsupported) {
     isUnsupported = hasInvalidKey(manifest.spec, specKeys);
   }
-  if (manifest?.spec?.ingress?.length && !isUnsupported) {
-    isUnsupported = hasInvalidPolicy('ingress');
-  }
-  if (manifest?.spec?.egress?.length && !isUnsupported) {
-    isUnsupported = hasInvalidPolicy('egress');
+  if (!isUnsupported && (manifest?.spec?.ingress?.length || manifest?.spec?.egress?.length)) {
+    isUnsupported = hasInvalidPolicy(manifest.spec.ingress, manifest.spec.egress);
   }
 
   return isUnsupported;

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

@@ -237,35 +237,29 @@ export default {
 
     <div class="row">
       <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
-        <gl-form-group :disabled="hasParsingError">
-          <gl-form-group :label="s__('NetworkPolicies|Policy type')" label-for="policyType">
-            <gl-form-select
-              id="policyType"
-              value="networkPolicy"
-              :options="$options.policyTypes"
-              disabled
-            />
-          </gl-form-group>
+        <gl-form-group :label="s__('NetworkPolicies|Policy type')" label-for="policyType">
+          <gl-form-select
+            id="policyType"
+            value="networkPolicy"
+            :options="$options.policyTypes"
+            disabled
+          />
         </gl-form-group>
       </div>
       <div class="col-sm-6 col-md-6 col-lg-5 col-xl-4">
-        <gl-form-group :disabled="hasParsingError" data-testid="policy-name">
-          <gl-form-group
-            :disabled="hasParsingError"
-            :label="s__('NetworkPolicies|Name')"
-            label-for="policyName"
-          >
-            <gl-form-input id="policyName" v-model="policy.name" />
-          </gl-form-group>
+        <gl-form-group :label="s__('NetworkPolicies|Name')" label-for="policyName">
+          <gl-form-input id="policyName" v-model="policy.name" :disabled="hasParsingError" />
         </gl-form-group>
       </div>
     </div>
     <div class="row">
       <div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">
-        <gl-form-group :disabled="hasParsingError" data-testid="policy-description">
-          <gl-form-group :label="s__('NetworkPolicies|Description')" label-for="policyDescription">
-            <gl-form-textarea id="policyDescription" v-model="policy.description" />
-          </gl-form-group>
+        <gl-form-group :label="s__('NetworkPolicies|Description')" label-for="policyDescription">
+          <gl-form-textarea
+            id="policyDescription"
+            v-model="policy.description"
+            :disabled="hasParsingError"
+          />
         </gl-form-group>
       </div>
     </div>

ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_editor_spec.js.snap

@@ -52,18 +52,16 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
     <div
       class="col-sm-6 col-md-4 col-lg-3 col-xl-2"
     >
-      <gl-form-group-stub>
-        <gl-form-group-stub
-          label="Policy type"
-          label-for="policyType"
-        >
-          <gl-form-select-stub
-            disabled=""
-            id="policyType"
-            options="[object Object]"
-            value="networkPolicy"
-          />
-        </gl-form-group-stub>
+      <gl-form-group-stub
+        label="Policy type"
+        label-for="policyType"
+      >
+        <gl-form-select-stub
+          disabled=""
+          id="policyType"
+          options="[object Object]"
+          value="networkPolicy"
+        />
       </gl-form-group-stub>
     </div>
      
@@ -71,17 +69,13 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
       class="col-sm-6 col-md-6 col-lg-5 col-xl-4"
     >
       <gl-form-group-stub
-        data-testid="policy-name"
+        label="Name"
+        label-for="policyName"
       >
-        <gl-form-group-stub
-          label="Name"
-          label-for="policyName"
-        >
-          <gl-form-input-stub
-            id="policyName"
-            value=""
-          />
-        </gl-form-group-stub>
+        <gl-form-input-stub
+          id="policyName"
+          value=""
+        />
       </gl-form-group-stub>
     </div>
   </div>
@@ -93,18 +87,14 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
       class="col-sm-12 col-md-10 col-lg-8 col-xl-6"
     >
       <gl-form-group-stub
-        data-testid="policy-description"
+        label="Description"
+        label-for="policyDescription"
       >
-        <gl-form-group-stub
-          label="Description"
-          label-for="policyDescription"
-        >
-          <gl-form-textarea-stub
-            id="policyDescription"
-            noresize="true"
-            value=""
-          />
-        </gl-form-group-stub>
+        <gl-form-textarea-stub
+          id="policyDescription"
+          noresize="true"
+          value=""
+        />
       </gl-form-group-stub>
     </div>
   </div>

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_editor_spec.js

@@ -79,10 +79,9 @@ spec:
   const findYAMLParsingAlert = () => wrapper.findByTestId('parsing-alert');
   const findNetworkPolicyEditor = () => wrapper.findByTestId('network-policy-editor');
   const findPolicyAlertPicker = () => wrapper.find(PolicyAlertPicker);
-  const findPolicyDescriptionContainer = () => wrapper.findByTestId('policy-description');
+  const findPolicyDescription = () => wrapper.find("[id='policyDescription']");
   const findPolicyEnableContainer = () => wrapper.findByTestId('policy-enable');
-  const findPolicyNameContainer = () => wrapper.findByTestId('policy-name');
-  const findPolicyName = () => findPolicyNameContainer().find("[id='policyName']");
+  const findPolicyName = () => wrapper.find("[id='policyName']");
   const findSavePolicy = () => wrapper.findByTestId('save-policy');
   const findDeletePolicy = () => wrapper.findByTestId('delete-policy');
   const findEditorModeToggle = () => wrapper.findByTestId('editor-mode');
@@ -280,11 +279,11 @@ spec:
     });
 
     it('disables policy name field', () => {
-      expect(findPolicyNameContainer().attributes().disabled).toBe('true');
+      expect(findPolicyName().attributes().disabled).toBe('true');
     });
 
     it('disables policy description field', () => {
-      expect(findPolicyDescriptionContainer().attributes().disabled).toBe('true');
+      expect(findPolicyDescription().attributes().disabled).toBe('true');
     });
 
     it('disables policy enable/disable toggle', () => {