Autoscaler followup

shell/assets/translations/en-us.yaml

@@ -2258,6 +2258,9 @@ cluster:
       baseUnit: Machines
       min: Min
       max: Max
+      validation:
+        isAutoscalerMaxGreaterThanMin: The max machines count must be equal or exceed the min machine count.
+      etcdControlPlaneWarning: We don't recommend using Autoscaler with machine pools that have the etcd or Control Plane roles. You can modify the yaml if you want to override the current value.
     name:
       label: Pool Name
       placeholder: A random one will be generated by default

shell/components/PopoverCard.vue

@@ -42,7 +42,7 @@ watch(
   <div
     class="popover-card-base"
     :class="{open: showPopover}"
-    @mouseleave="showPopover=false"
+    @mouseleave="showPopover=false; focusOpen=false"
     @keydown.escape="showPopover=false; focusOpen=false"
   >
     <v-dropdown
@@ -87,7 +87,7 @@ watch(
             <template #heading-action>
               <slot
                 name="heading-action"
-                :close="() => {showPopover=true; focusOpen=true;}"
+                :close="() => {showPopover=false; focusOpen=false;}"
               />
             </template>
             <slot name="card-body" />

shell/components/__tests__/PopoverCard.test.ts

@@ -167,7 +167,7 @@ describe('component: PopoverCard.vue', () => {
       expect(wrapper.find('.card-body-content').text()).toBe('Card Body');
     });
 
-    it('should pass a (buggy) close function to the heading-action slot', async() => {
+    it('should pass a close function to the heading-action slot', async() => {
       const wrapper = createWrapper({}, {
         'heading-action': `
           <template #heading-action="{ close }">
@@ -181,16 +181,12 @@ describe('component: PopoverCard.vue', () => {
       expect(wrapper.vm.showPopover).toBe(true);
       expect(wrapper.vm.focusOpen).toBe(true);
 
-      // Set to closed state to test the "close" function
-      wrapper.vm.showPopover = false;
-      wrapper.vm.focusOpen = false;
-
       // Click the button that uses the `close` slot prop
       await wrapper.find('.close-button').trigger('click');
 
       // Due to the bug, this should be true, not false
-      expect(wrapper.vm.showPopover).toBe(true);
-      expect(wrapper.vm.focusOpen).toBe(true);
+      expect(wrapper.vm.showPopover).toBe(false);
+      expect(wrapper.vm.focusOpen).toBe(false);
     });
 
     it('should allow overriding the entire card via the card slot', async() => {

shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue

@@ -100,6 +100,14 @@ export default {
       MACHINE_POOL_VALIDATION,
 
       fvFormRuleSets: MACHINE_POOL_VALIDATION.RULESETS,
+      fvExtraRules:   {
+        isAutoscalerMaxGreaterThanMin: () => {
+          const min = this.value?.pool?.autoscalingMinSize || 0;
+          const max = this.value?.pool?.autoscalingMaxSize || 0;
+
+          return max - min >= 0 ? undefined : this.t('cluster.machinePool.autoscaler.validation.isAutoscalerMaxGreaterThanMin');
+        }
+      }
     };
   },
 
@@ -159,7 +167,18 @@ export default {
         this.$emit('validationChanged', newValue);
       },
       deep: true
-    }
+    },
+
+    'value.pool.etcdRole'(neu) {
+      if (neu) {
+        this.isAutoscalerEnabled = false;
+      }
+    },
+    'value.pool.controlPlaneRole'(neu) {
+      if (neu) {
+        this.isAutoscalerEnabled = false;
+      }
+    },
   },
 
   /**
@@ -282,7 +301,7 @@ export default {
       </div>
       <div class="col span-4">
         <LabeledInput
-          v-if="!isAutoscalerEnabled"
+          v-if="!isAutoscalerFeatureEnabled || !isAutoscalerEnabled"
           v-model:value.number="value.pool.quantity"
           :mode="mode"
           :label="t('cluster.machinePool.quantity.label')"
@@ -415,11 +434,16 @@ export default {
             <h4>
               {{ t('cluster.machinePool.autoscaler.heading') }}
             </h4>
+            <Banner
+              v-if="value.pool.etcdRole || value.pool.controlPlaneRole"
+              color="warning"
+              label-key="cluster.machinePool.autoscaler.etcdControlPlaneWarning"
+            />
             <Checkbox
               v-model:value="isAutoscalerEnabled"
               :mode="mode"
               :label="t('cluster.machinePool.autoscaler.enable', undefined, true)"
-              :disabled="busy"
+              :disabled="value.pool.etcdRole || value.pool.controlPlaneRole || busy"
             />
           </div>
         </div>
@@ -435,6 +459,8 @@ export default {
               :placeholder="t('containerResourceLimit.cpuPlaceholder')"
               :mode="mode"
               :base-unit="t('cluster.machinePool.autoscaler.baseUnit')"
+              :rules="fvGetAndReportPathRules(MACHINE_POOL_VALIDATION.FIELDS.AUTOSCALER_MIN)"
+              :disabled="value.pool.etcdRole || value.pool.controlPlaneRole || busy"
             />
           </div>
           <div class="col span-4">
@@ -445,7 +471,8 @@ export default {
               :placeholder="t('containerResourceLimit.cpuPlaceholder')"
               :mode="mode"
               :base-unit="t('cluster.machinePool.autoscaler.baseUnit')"
-              :disabled="busy"
+              :rules="fvGetAndReportPathRules(MACHINE_POOL_VALIDATION.FIELDS.AUTOSCALER_MAX)"
+              :disabled="value.pool.etcdRole || value.pool.controlPlaneRole || busy"
             />
           </div>
         </div>

shell/utils/validators/machine-pool.ts

@@ -1,6 +1,8 @@
 const FIELDS = {
-  NAME:     'pool.name',
-  QUANTITY: 'pool.quantity'
+  NAME:           'pool.name',
+  QUANTITY:       'pool.quantity',
+  AUTOSCALER_MIN: 'pool.autoscalingMinSize',
+  AUTOSCALER_MAX: 'pool.autoscalingMaxSize'
 };
 
 const RULESETS = [
@@ -11,7 +13,15 @@ const RULESETS = [
   {
     path:  FIELDS.NAME,
     rules: ['required'],
-  }
+  },
+  {
+    path:  FIELDS.AUTOSCALER_MIN,
+    rules: ['isPositive', 'isAutoscalerMaxGreaterThanMin'],
+  },
+  {
+    path:  FIELDS.AUTOSCALER_MAX,
+    rules: ['isPositive', 'isAutoscalerMaxGreaterThanMin'],
+  },
 ];
 
 export const MACHINE_POOL_VALIDATION = {