Ensure that Azure managed disks are consistent across pools

shell/assets/translations/en-us.yaml

@@ -22,6 +22,7 @@ generic:
   back: Back
   cancel: Cancel
   confirm: Confirm
+  update: Update
   colorPicker: Color picker
   clear: Clear
   clearAll: Clear All
@@ -1877,6 +1878,9 @@ cluster:
         label: Location
       managedDisks:
         label: Use Managed Disks
+        modal:
+          header: Update all machine pools? 
+          body: Azure does not allow mixing managed and unmanaged disks. Do you want to update all machine pools to use the new setting?
       managedDisksSize:
         label: Managed Disk Size
       nsg:

shell/machine-config/azure-managed-disks-modal.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { RcButton } from '@components/RcButton';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+interface Props {
+  onUpdate: Function;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['close']);
+
+const close = () => {
+  emit('close');
+};
+
+const update = () => {
+  props.onUpdate();
+  close();
+};
+
+const store = useStore();
+const { t } = useI18n(store);
+
+</script>
+
+<template>
+  <div class="modal-header">
+    {{ t('cluster.machineConfig.azure.managedDisks.modal.header') }}
+  </div>
+  <div class="modal-body">
+    <div>
+      {{ t('cluster.machineConfig.azure.managedDisks.modal.body') }}
+    </div>
+  </div>
+  <div class="modal-footer">
+    <rc-button @click="update">
+      {{ t('generic.update') }}
+    </rc-button>
+    <rc-button
+      secondary
+      @click="close"
+    >
+      {{ t('generic.cancel') }}
+    </rc-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.modal-header {
+  font-size: 1.25rem;
+  line-height: calc(1.75 / 1.25);
+  padding: 1rem;
+}
+
+.modal-body {
+  padding: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.modal-footer {
+  display: flex;
+  gap: 1rem;
+  flex-direction: row-reverse;
+  padding: 10px 20px;
+}
+</style>

shell/machine-config/azure.vue

@@ -17,6 +17,7 @@ import { findBy } from '@shell/utils/array';
 import KeyValue from '@shell/components/form/KeyValue';
 import { RadioGroup } from '@components/Form/Radio';
 import { _CREATE, _EDIT } from '@shell/config/query-params';
+import azureManagedDisksModal from '@shell/machine-config/azure-managed-disks-modal.vue';
 
 export const azureEnvironments = [
   { value: 'AzurePublicCloud' },
@@ -96,7 +97,7 @@ const storageTypes = [
 ];
 
 export default {
-  emits: ['expandAdvanced', 'error'],
+  emits: ['expandAdvanced', 'error', 'validationChanged'],
 
   components: {
     ArrayList,
@@ -128,6 +129,10 @@ export default {
       type:    Boolean,
       default: false
     },
+    machinePools: {
+      type:     Array,
+      required: true,
+    },
   },
 
   async fetch() {
@@ -238,7 +243,7 @@ export default {
       if (neu && (!this.value.managedDisks || !this.value.enablePublicIpStandardSku || !this.value.staticPublicIp)) {
         this.$emit('expandAdvanced');
       }
-    }
+    },
   },
 
   computed: {
@@ -419,6 +424,17 @@ export default {
 
       this.value.nsg = `rancher-managed-${ randomStr(8) }`;
     }
+
+    /**
+     * Override the default managedDisks value to match the base pool.
+     * Azure does not allow mixing managed and unmanaged disks.
+     **/
+    if (
+      (this.mode === _EDIT || this.mode === _CREATE) &&
+      this.machinePools.length > 1
+    ) {
+      this.value.managedDisks = this.machinePools[0].config.managedDisks;
+    }
   },
 
   methods: {
@@ -496,7 +512,25 @@ export default {
       // set will take precedent and the zone will not be saved.
         this.value.availabilitySet = null;
       }
-    }
+    },
+    openManagedDisksModal() {
+      if (this.machinePools.length <= 1) {
+        this.value.managedDisks = !this.value.managedDisks;
+
+        return;
+      }
+
+      this.$shell.modal.open(
+        azureManagedDisksModal,
+        { props: { onUpdate: this.updateAllManagedDisks } }
+      );
+    },
+    updateAllManagedDisks() {
+      this.value.managedDisks = !this.value.managedDisks;
+      this.machinePools.forEach((machinePool) => {
+        machinePool.config.managedDisks = this.value.managedDisks;
+      });
+    },
   },
 };
 </script>
@@ -838,10 +872,11 @@ export default {
         </div>
         <div class="col span-6 inline-banner-container">
           <Checkbox
-            v-model:value="value.managedDisks"
+            :value="value.managedDisks"
             :mode="mode"
             :label="t('cluster.machineConfig.azure.managedDisks.label')"
             :disabled="disabled"
+            @update:value="openManagedDisksModal"
           />
           <Banner
             v-if="value.availabilityZone && !value.managedDisks"