Fix matchConditions on edit and after thrown error

pkg/kubewarden/chart/kubewarden/admission/MatchConditions.vue

@@ -97,16 +97,23 @@ export default {
   },
 
   methods: {
+    emitUpdate() {
+      this.$emit('update:matchConditions', this.matchConditions);
+    },
+
     addCondition() {
       this.matchConditions.push({ name: '', expression: '' });
+      this.emitUpdate();
     },
 
     removeCondition(index) {
       this.matchConditions.splice(index, 1);
+      this.emitUpdate();
     },
 
     handleInput(e, index) {
       this.$set(this.matchConditions[index], 'expression', e);
+      this.emitUpdate();
     }
   }
 };
@@ -141,7 +148,7 @@ export default {
           </button>
         </div>
 
-        <h4>Expression</h4>
+        <h4>{{ t('kubewarden.policyConfig.matchConditions.expression.label') }}</h4>
         <CodeMirror
           :ref="`cm-${ index }`"
           :value="condition.expression"
@@ -153,7 +160,13 @@ export default {
       </InfoBox>
     </div>
 
-    <button v-if="!isView" data-testid="kw-policy-match-condition-add" type="button" class="btn role-tertiary add" @click="addCondition">
+    <button
+      v-if="!isView"
+      data-testid="kw-policy-match-condition-add"
+      type="button"
+      class="btn role-tertiary add"
+      @click="addCondition"
+    >
       {{ t('kubewarden.policyConfig.matchConditions.add') }}
     </button>
   </div>

pkg/kubewarden/chart/kubewarden/admission/index.vue

@@ -109,6 +109,14 @@ export default {
 
     setActiveTab(tab) {
       this.activeTab = tab;
+    },
+
+    updateMatchConditions(matchConditions) {
+      if ( !this.chartValues.policy.spec ) {
+        this.$set(this.chartValues.policy, 'spec', {});
+      }
+
+      this.$set(this.chartValues.policy.spec, 'matchConditions', matchConditions);
     }
   }
 };
@@ -164,7 +172,7 @@ export default {
     </template>
 
     <Tab name="matchConditions" :label="t('kubewarden.policyConfig.tabs.matchConditions')" :weight="95" @active="setActiveTab('matchConditions')">
-      <MatchConditions v-model="chartValues" :active-tab="activeTab" :mode="mode" />
+      <MatchConditions v-model="chartValues" :active-tab="activeTab" :mode="mode" @update:matchConditions="updateMatchConditions" />
     </Tab>
 
     <Tab name="rules" :label="t('kubewarden.policyConfig.tabs.rules')" :weight="94">

pkg/kubewarden/components/Policies/Create.vue

@@ -61,8 +61,6 @@ export default ({
   mixins: [CreateEditView],
 
   async fetch() {
-    this.errors = [];
-
     if ( this.hasArtifactHub ) {
       await this.getPackages();
     }
@@ -73,7 +71,6 @@ export default ({
 
   data() {
     return {
-      errors:            [],
       bannerTitle:       null,
       shortDescription:  null,
       loadingPackages:   false,
@@ -91,6 +88,7 @@ export default ({
 
       hasCustomPolicy: false,
       yamlOption:      VALUES_STATE.FORM,
+      finishAttempts:  0,
 
       // Steps
       stepPolicies: {
@@ -296,21 +294,46 @@ export default ({
         }
 
         removeEmptyAttrs(out); // Clean up empty values from questions
-        merge(this.value, out);
+
+        if ( this.finishAttempts > 0 ) {
+          // Remove keys that are not in the new spec
+          Object.keys(this.value.spec).forEach((key) => {
+            if ( !(key in out.spec) ) {
+              this.$delete(this.value.spec, key);
+            }
+          });
+
+          // Then, set or update the remaining keys
+          Object.keys(out.spec).forEach((key) => {
+            this.$set(this.value.spec, key, out.spec[key]);
+          });
+        } else {
+          merge(this.value, out);
+        }
 
         // If create new namespace option is selected, create the ns before saving the policy
         if ( this.chartType === KUBEWARDEN.ADMISSION_POLICY && this.chartValues?.isNamespaceNew ) {
           await this.createNamespace(this.value?.metadata?.namespace);
         }
 
-        await this.save(event);
+        await this.attemptSave(event);
       } catch (e) {
-        handleGrowl({ error: e, store: this.$store });
-
         console.error('Error creating policy', e); // eslint-disable-line no-console
       }
     },
 
+    async attemptSave(event) {
+      await this.save(event);
+
+      // Check for errors set by the mixin
+      if ( this.errors && this.errors.length > 0 ) {
+        const error = new Error('Save operation failed');
+
+        this.finishAttempts++;
+        throw error; // Force an error to be caught in the finish method
+      }
+    },
+
     /** Fetch packages from ArtifactHub repository */
     async getPackages() {
       this.repository = await this.value.artifactHubRepo();

pkg/kubewarden/edit/policies.kubewarden.io.admissionpolicy.vue

@@ -84,3 +84,9 @@ export default {
     />
   </CruResource>
 </template>
+
+<style lang="scss" scoped>
+::v-deep .cru__footer {
+  z-index: 1;
+}
+</style>

pkg/kubewarden/edit/policies.kubewarden.io.clusteradmissionpolicy.vue

@@ -82,6 +82,7 @@ export default {
   <Create v-if="isCreate" :value="value" :mode="mode" />
   <CruResource
     v-else
+    :errors="errors"
     :resource="value"
     :mode="realMode"
     :can-yaml="false"
@@ -94,3 +95,9 @@ export default {
     />
   </CruResource>
 </template>
+
+<style lang="scss" scoped>
+::v-deep .cru__footer {
+  z-index: 1;
+}
+</style>

pkg/kubewarden/l10n/en-us.yaml

@@ -241,6 +241,8 @@ kubewarden:
       description: Match Conditions use <a href="https://kubernetes.io/docs/reference/using-api/cel/" target="_blank" rel="noopener noreferrer nofollow">CEL expressions</a> to define fine-grained request filtering for policies, evaluating conditions before applying policy rules. This field only takes effect if the Kubernetes cluster has the <code>AdmissionWebhookMatchConditions</code> feature gate enabled.
       name:
         placeholder: e.g. exclude-resource
+      expression:
+        label: Expression
     module:
       label: Module
       tooltip: This is the WebAssembly module that holds the validation or mutation logic.