Add restriction for updating nginx-ingress

WAF settings will be read-only if there is
a new version available

app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue

@@ -93,7 +93,10 @@ export default {
       return [UPDATING].includes(this.ingress.status);
     },
     saveButtonDisabled() {
-      return [UNINSTALLING, UPDATING, INSTALLING].includes(this.ingress.status);
+      return (
+        [UNINSTALLING, UPDATING, INSTALLING].includes(this.ingress.status) ||
+        this.ingress.updateAvailable
+      );
     },
     saveButtonLabel() {
       return this.saving ? __('Saving') : __('Save changes');
@@ -105,13 +108,14 @@ export default {
      *     neither getting installed nor updated.
      */
     showButtons() {
-      return (
-        this.saving || (this.hasValueChanged && [INSTALLED, UPDATED].includes(this.ingress.status))
-      );
+      return this.saving || this.valuesChangedByUser;
     },
     modSecurityModeName() {
       return this.modes[this.ingress.modsecurity_mode].name;
     },
+    valuesChangedByUser() {
+      return this.hasValueChanged && [INSTALLED, UPDATED].includes(this.ingress.status);
+    },
   },
   methods: {
     updateApplication() {

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -59,6 +59,7 @@ export default class ClusterStore {
           isEditingModSecurityEnabled: false,
           isEditingModSecurityMode: false,
           updateFailed: false,
+          updateAvailable: false,
         },
         cert_manager: {
           ...applicationInitialState,
@@ -213,6 +214,7 @@ export default class ClusterStore {
       if (appId === INGRESS) {
         this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
         this.state.applications.ingress.externalHostname = serverAppEntry.external_hostname;
+        this.state.applications.ingress.updateAvailable = updateAvailable;
         if (!this.state.applications.ingress.isEditingModSecurityEnabled) {
           this.state.applications.ingress.modsecurity_enabled = serverAppEntry.modsecurity_enabled;
         }

changelogs/unreleased/add_restriction_for_ingress_update.yml

+---
+title: WAF settings will be read-only if there is a new version of ingress available
+merge_request: 27845
+author:
+type: changed

spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js

@@ -14,6 +14,7 @@ describe('IngressModsecuritySettings', () => {
     status: 'installable',
     installed: false,
     modsecurity_mode: 'logging',
+    updateAvailable: false,
   };
 
   const createComponent = (props = defaultProps) => {
@@ -61,6 +62,11 @@ describe('IngressModsecuritySettings', () => {
         expect(findCancelButton().exists()).toBe(true);
       });
 
+      it('enables related toggle and buttons', () => {
+        expect(findSaveButton().attributes().disabled).toBeUndefined();
+        expect(findCancelButton().attributes().disabled).toBeUndefined();
+      });
+
       describe('with dropdown changed by the user', () => {
         beforeEach(() => {
           findModSecurityDropdown().vm.$children[1].$emit('click');
@@ -105,6 +111,25 @@ describe('IngressModsecuritySettings', () => {
           expect(findCancelButton().exists()).toBe(false);
         });
       });
+
+      describe('with a new version available', () => {
+        beforeEach(() => {
+          wrapper.setProps({
+            ingress: {
+              ...defaultProps,
+              installed: true,
+              status: 'installed',
+              modsecurity_enabled: true,
+              updateAvailable: true,
+            },
+          });
+        });
+
+        it('disables related toggle and buttons', () => {
+          expect(findSaveButton().attributes().disabled).toBe('true');
+          expect(findCancelButton().attributes().disabled).toBe('true');
+        });
+      });
     });
 
     it('triggers set event to be propagated with the current modsecurity value', () => {