@rancher/shell 2.0.1 → 2.0.2

package/config/router/navigation-guards/runtime-extension-route.js

@@ -0,0 +1,31 @@
+import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
+import { routeRequiresAuthentication } from '@shell/utils/router';
+
+export function install(router, context) {
+  router.beforeEach((to, from, next) => runtimeExtensionRoute(to, from, next, context));
+}
+
+export async function runtimeExtensionRoute(to, from, next, { store }) {
+  if (!routeRequiresAuthentication(to) || to.name !== '404') {
+    return next();
+  }
+
+  try {
+    // Handle the loading of dynamic plugins (Harvester) because we only want to attempt to load those plugins and routes if we first couldn't find a page.
+    // We should probably get rid of this concept entirely and just load plugins at the start.
+    await store.dispatch('loadManagement');
+    const newLocation = await dynamicPluginLoader.check({ route: { path: window.location.pathname }, store });
+
+    // If we have a new location, double check that it's actually valid
+    const resolvedRoute = newLocation?.path ? store.app.router.resolve({ path: newLocation.path.replace(/^\/{0,1}dashboard/, '') }) : null;
+
+    if (resolvedRoute?.route.matched.length) {
+      // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
+      return next(resolvedRoute.resolved.path);
+    }
+  } catch (e) {
+    console.error('Failed to load harvester', e); // eslint-disable-line no-console
+  }
+
+  next();
+}

package/config/router/routes.js

@@ -41,6 +41,7 @@ export default [
     path:      '',
     component: () => interopDefault(import('@shell/components/templates/home.vue')),
     meta:      { requiresAuthentication: true },
+    name:      'home_layout',
     children:  [
       {
         path:      '/home',
@@ -484,4 +485,12 @@ export default [
         component: () => interopDefault(import('@shell/pages/c/_cluster/_product/_resource/_namespace/_id.vue')),
         name:      'c-cluster-product-resource-namespace-id'
       }]
-  }];
+  },
+  {
+    path:      '*',
+    name:      '404',
+    component: () => interopDefault(import('@shell/pages/404.vue')),
+    meta:      { requiresAuthentication: true },
+  },
+
+];

package/config/uiplugins.js

@@ -68,6 +68,36 @@ export const UI_PLUGIN_METADATA = {
   DISPLAY_NAME:      'displayName',
 };
 
+export const EXTENSIONS_INCOMPATIBILITY_TYPES = {
+  UI:             'uiVersion',
+  EXTENSIONS_API: 'extensionsApiVersion',
+  KUBE:           'kubeVersion',
+  HOST:           'host'
+};
+
+export const EXTENSIONS_INCOMPATIBILITY_DATA = {
+  UI: {
+    type:           EXTENSIONS_INCOMPATIBILITY_TYPES.UI,
+    cardMessageKey: 'plugins.incompatibleRancherVersion',
+    tooltipKey:     'plugins.info.requiresRancherVersion',
+  },
+  EXTENSIONS_API: {
+    type:           EXTENSIONS_INCOMPATIBILITY_TYPES.EXTENSIONS_API,
+    cardMessageKey: 'plugins.incompatibleUiExtensionsApiVersion',
+    tooltipKey:     'plugins.info.requiresExtensionApiVersion',
+  },
+  KUBE: {
+    type:           EXTENSIONS_INCOMPATIBILITY_TYPES.KUBE,
+    cardMessageKey: 'plugins.incompatibleKubeVersion',
+    tooltipKey:     'plugins.info.requiresKubeVersion',
+  },
+  HOST: {
+    type:           EXTENSIONS_INCOMPATIBILITY_TYPES.HOST,
+    cardMessageKey: 'plugins.incompatibleHost',
+    tooltipKey:     'plugins.info.requiresHost',
+  }
+};
+
 export function isUIPlugin(chart) {
   return !!chart?.versions.find((v) => {
     return v.annotations && v.annotations[UI_PLUGIN_ANNOTATION_NAME] === UI_PLUGIN_ANNOTATION_VALUE;
@@ -91,130 +121,169 @@ export function uiPluginAnnotation(chart, name) {
   return undefined;
 }
 
+/**
+ * Parse the rancher version string
+ */
+function parseRancherVersion(v) {
+  let parsedRancherVersion = semver.coerce(v)?.version;
+  const splitArr = parsedRancherVersion.split('.');
+
+  // this is a scenario where we are on a "head" version of some sort... we can't infer the patch version from it
+  // so we apply a big patch version number to make sure we follow through with the minor
+  if (v.includes('-') && splitArr?.length === 3) {
+    parsedRancherVersion = `${ splitArr[0] }.${ splitArr[1] }.999`;
+  }
+
+  return parsedRancherVersion;
+}
+
 // i18n-uses plugins.error.generic, plugins.error.api, plugins.error.host
 
-// Should we load a plugin, based on the metadata returned by the backend?
-// Returns error key string or false
-export function shouldNotLoadPlugin(plugin, rancherVersion, loadedPlugins) {
-  if (!plugin.name || !plugin.version || !plugin.endpoint) {
+/**
+ * Whether an extension should be loaded based on the metadata returned by the backend in the UIPlugins resource instance
+ * @returns String || Boolean
+ */
+export function shouldNotLoadPlugin(UIPluginResource, rancherVersion, loadedPlugins) {
+  if (!UIPluginResource.name || !UIPluginResource.version || !UIPluginResource.endpoint) {
     return 'plugins.error.generic';
   }
 
-  // Plugin specified a required extension API version
+  // Extension chart specified a required extension API version
   // we are propagating the annotations in pkg/package.json for any extension
   // inside the "spec.plugin.metadata" property of UIPlugin resource
-  const requiredAPI = plugin.spec?.plugin?.metadata?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_VERSION];
+  const requiredUiExtensionsVersion = UIPluginResource.spec?.plugin?.metadata?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_VERSION];
+  // semver.coerce will get rid of any suffix on the version numbering (-rc, -head, etc)
+  const parsedUiExtensionsApiVersion = semver.coerce(UI_EXTENSIONS_API_VERSION)?.version || UI_EXTENSIONS_API_VERSION;
+  const parsedRancherVersion = rancherVersion ? parseRancherVersion(rancherVersion) : '';
 
-  if (requiredAPI && !semver.satisfies(UI_EXTENSIONS_API_VERSION, requiredAPI)) {
+  if (requiredUiExtensionsVersion && !semver.satisfies(parsedUiExtensionsApiVersion, requiredUiExtensionsVersion)) {
     return 'plugins.error.api';
   }
 
   // Host application
-  const requiredHost = plugin.metadata?.[UI_PLUGIN_METADATA.EXTENSIONS_HOST];
+  const requiredHost = UIPluginResource.metadata?.[UI_PLUGIN_METADATA.EXTENSIONS_HOST];
 
   if (requiredHost && requiredHost !== UI_PLUGIN_HOST_APP) {
     return 'plugins.error.host';
   }
 
   // Rancher version
-  if (rancherVersion) {
-    const requiredRancherVersion = plugin.metadata?.[UI_PLUGIN_METADATA.RANCHER_VERSION];
+  if (parsedRancherVersion) {
+    const requiredRancherVersion = UIPluginResource.metadata?.[UI_PLUGIN_METADATA.RANCHER_VERSION];
 
-    if (requiredRancherVersion && !semver.satisfies(rancherVersion, requiredRancherVersion)) {
+    if (requiredRancherVersion && !semver.satisfies(parsedRancherVersion, requiredRancherVersion)) {
       return 'plugins.error.version';
     }
   }
 
   // check if a builtin extension has been loaded before - improve developer experience
-  const checkLoaded = loadedPlugins.find((p) => p?.name === plugin?.name);
+  const checkLoaded = loadedPlugins.find((p) => p?.name === UIPluginResource?.name);
 
   if (checkLoaded && checkLoaded.builtin) {
     return 'plugins.error.developerPkg';
   }
 
-  if (plugin.metadata?.[UI_PLUGIN_LABELS.CATALOG]) {
+  if (UIPluginResource.metadata?.[UI_PLUGIN_LABELS.CATALOG]) {
     return true;
   }
 
   return false;
 }
 
-// Can a chart version be used for this Rancher (based on the annotations on the chart)?
-export function isSupportedChartVersion(versionsData) {
-  const { version, rancherVersion, kubeVersion } = versionsData;
+/**
+ * Wether an extension version is available to be installed, based on the annotations present in the Helm chart version
+ * backend may not automatically "limit" a particular version but dashboard will disable that version for install with this check
+ * @returns Boolean || Object
+ */
+export function isSupportedChartVersion(versionData, returnObj = false) {
+  const { version, rancherVersion, kubeVersion } = versionData;
 
-  // Plugin specified a required extension API version
-  const requiredAPI = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_VERSION];
+  // semver.coerce will get rid of any suffix on the version numbering (-rc, -head, etc)
+  const parsedRancherVersion = rancherVersion ? parseRancherVersion(rancherVersion) : '';
+  const requiredUiVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.UI_VERSION];
+  const requiredKubeVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.KUBE_VERSION];
+  const versionObj = { ...version };
 
-  if (requiredAPI && !semver.satisfies(UI_EXTENSIONS_API_VERSION, requiredAPI)) {
-    return false;
-  }
+  // reset compatibility property
+  versionObj.isVersionCompatible = true;
+  versionObj.versionIncompatibilityData = {};
 
-  // Host application
-  const requiredHost = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_HOST];
+  // check "catalog.cattle.io/kube-version" annotation
+  // we keep it as first check since there is a card notification to be displayed
+  // in case an extension version installed has an incompatibility with the kube version and is not loaded
+  if (kubeVersion && requiredKubeVersion && !semver.satisfies(kubeVersion, requiredKubeVersion)) {
+    if (!returnObj) {
+      return false;
+    }
 
-  if (requiredHost && requiredHost !== UI_PLUGIN_HOST_APP) {
-    return false;
+    versionObj.isVersionCompatible = false;
+    versionObj.versionIncompatibilityData = Object.assign({}, EXTENSIONS_INCOMPATIBILITY_DATA.KUBE);
+    versionObj.versionIncompatibilityData.required = requiredKubeVersion;
+
+    return versionObj;
   }
 
-  // Rancher version
-  if (rancherVersion) {
+  // we aren't on a "published" version of Rancher and therefore in a "-head" or similar
+  // Backend will NOT block an extension version from being available IF we are on HEAD versions!!
+  // we need to enforce that check if we are on a HEAD world
+  if (rancherVersion && rancherVersion.includes('-')) {
     const requiredRancherVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.RANCHER_VERSION];
 
-    if (requiredRancherVersion && !semver.satisfies(rancherVersion, requiredRancherVersion)) {
-      return false;
+    if (parsedRancherVersion && !semver.satisfies(parsedRancherVersion, requiredRancherVersion)) {
+      if (!returnObj) {
+        return false;
+      }
+
+      versionObj.isVersionCompatible = false;
+      versionObj.versionIncompatibilityData = Object.assign({}, EXTENSIONS_INCOMPATIBILITY_DATA.UI);
+      versionObj.versionIncompatibilityData.required = requiredRancherVersion;
+
+      return versionObj;
     }
   }
 
-  // Kube version
-  if (kubeVersion) {
-    const requiredKubeVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.KUBE_VERSION];
+  // check host application
+  const requiredHost = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_HOST];
 
-    if (requiredKubeVersion && !semver.satisfies(kubeVersion, requiredKubeVersion)) {
+  if (requiredHost && requiredHost !== UI_PLUGIN_HOST_APP) {
+    if (!returnObj) {
       return false;
     }
-  }
 
-  return true;
-}
-
-export function isChartVersionAvailableForInstall(versionsData, returnObj = false) {
-  const { version, rancherVersion, kubeVersion } = versionsData;
+    versionObj.isVersionCompatible = false;
+    versionObj.versionIncompatibilityData = Object.assign({}, EXTENSIONS_INCOMPATIBILITY_DATA.HOST);
+    versionObj.versionIncompatibilityData.required = requiredHost;
 
-  const parsedRancherVersion = rancherVersion.split('-')?.[0];
-  const regexHashString = new RegExp('^[A-Za-z0-9]{9}$');
-  const isRancherVersionHashString = regexHashString.test(rancherVersion);
-  const requiredUiVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.UI_VERSION];
-  const requiredKubeVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.KUBE_VERSION];
-  const versionObj = { ...version };
+    return versionObj;
+  }
 
-  versionObj.isCompatibleWithUi = true;
-  versionObj.isCompatibleWithKubeVersion = true;
+  // check "catalog.cattle.io/ui-extensions-version" annotation
+  const requiredUiExtensionsApiVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_VERSION];
+  const parsedUiExtensionsApiVersion = semver.coerce(UI_EXTENSIONS_API_VERSION)?.version || UI_EXTENSIONS_API_VERSION;
 
-  // if it's a head version of Rancher, then we skip the validation and enable them all
-  if (!isRancherVersionHashString && requiredUiVersion && !semver.satisfies(parsedRancherVersion, requiredUiVersion)) {
+  if (requiredUiExtensionsApiVersion && parsedUiExtensionsApiVersion && !semver.satisfies(parsedUiExtensionsApiVersion, requiredUiExtensionsApiVersion)) {
     if (!returnObj) {
       return false;
     }
-    versionObj.isCompatibleWithUi = false;
-    versionObj.requiredUiVersion = requiredUiVersion;
 
-    if (returnObj) {
-      return versionObj;
-    }
+    versionObj.isVersionCompatible = false;
+    versionObj.versionIncompatibilityData = Object.assign({}, EXTENSIONS_INCOMPATIBILITY_DATA.EXTENSIONS_API);
+    versionObj.versionIncompatibilityData.required = requiredUiExtensionsApiVersion;
+
+    return versionObj;
   }
 
-  // check kube version
-  if (kubeVersion && requiredKubeVersion && !semver.satisfies(kubeVersion, requiredKubeVersion)) {
+  // check "catalog.cattle.io/ui-version" annotation
+  if (requiredUiVersion && parsedRancherVersion && !semver.satisfies(parsedRancherVersion, requiredUiVersion)) {
     if (!returnObj) {
       return false;
     }
-    versionObj.isCompatibleWithKubeVersion = false;
-    versionObj.requiredKubeVersion = requiredKubeVersion;
 
-    if (returnObj) {
-      return versionObj;
-    }
+    versionObj.isVersionCompatible = false;
+    versionObj.versionIncompatibilityData = Object.assign({}, EXTENSIONS_INCOMPATIBILITY_DATA.UI);
+    versionObj.versionIncompatibilityData.required = requiredUiVersion;
+
+    return versionObj;
   }
 
   if (returnObj) {

package/core/plugin.ts

@@ -132,6 +132,11 @@ export class Plugin implements IPlugin {
         console.warn(`Layouts have been deprecated. We still have parent routes which use the same name and styling as the previous layouts. You should specify a parent, we're currently setting the parent to 'default'`); // eslint-disable-line no-console
         parentOverride = 'default';
       }
+
+      // Fix for Home page components with wrong layout - need to ensure the parentOverride is set
+      if (typelessRoute.component && typelessRoute.name === 'home' && typelessRoute.path === '/home') {
+        parentOverride = 'home_layout';
+      }
     }
 
     route.meta = {

package/core/plugins.js

@@ -90,6 +90,10 @@ export default function(context, inject, vueApp) {
               delete window[oldPlugin.id];
 
               delete plugins[oldPlugin.id];
+
+              const oldElement = document.getElementById(oldPlugin.id);
+
+              oldElement.parentElement.removeChild(oldElement);
             });
           }
 
@@ -124,7 +128,9 @@ export default function(context, inject, vueApp) {
             };
 
             element.onerror = (e) => {
-            // Massage the error into something useful
+              element.parentElement.removeChild(element);
+
+              // Massage the error into something useful
               const errorMessage = `Failed to load script from '${ e.target.src }'`;
 
               console.error(errorMessage, e); // eslint-disable-line no-console

package/detail/catalog.cattle.io.app.vue

@@ -9,7 +9,8 @@ import RelatedResources from '@shell/components/RelatedResources';
 import jsyaml from 'js-yaml';
 import merge from 'lodash/merge';
 import { CATALOG } from '@shell/config/types';
-import { sortBy } from '~shell/utils/sort';
+import { sortBy } from '@shell/utils/sort';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   name: 'DetailRelease',
@@ -30,9 +31,15 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
+    const promises = {
+      catalog:       this.$store.dispatch('catalog/load'),
+      allOperations: this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION }),
+      secrets:       this.value.fetchValues(true),
+    };
 
-    this.allOperations = await this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION });
+    const res = await allHash(promises);
+
+    this.allOperations = res.allOperations;
   },
 
   computed: {
@@ -45,7 +52,7 @@ export default {
     },
 
     valuesYaml() {
-      const combined = merge(merge({}, this.value?.spec?.chart?.values || {}), this.value?.spec?.values || {});
+      const combined = merge(merge({}, this.value?.chartValues || {}), this.value?.values || {});
 
       return jsyaml.dump(combined);
     },
@@ -95,6 +102,12 @@ export default {
       }
     },
   },
+
+  watch: {
+    'value.secretId'(neu, old) {
+      this.value.fetchValues(true);
+    }
+  },
 };
 </script>
 

package/detail/fleet.cattle.io.cluster.vue

@@ -6,6 +6,7 @@ import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
 import { MANAGEMENT, FLEET } from '@shell/config/types';
 import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
+import { allHash } from 'utils/promise';
 
 export default {
   name: 'FleetDetailCluster',
@@ -27,17 +28,18 @@ export default {
 
   async fetch() {
     const clusterId = this.value?.metadata?.labels[FLEET_LABELS.CLUSTER_NAME];
-
-    this.rancherCluster = await this.$store.dispatch('management/find', {
-      type: MANAGEMENT.CLUSTER,
-      id:   clusterId
+    const hash = await allHash({
+      rancherCluster: this.$store.dispatch('management/find', {
+        type: MANAGEMENT.CLUSTER,
+        id:   clusterId
+      }),
+      repos:             this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }),
+      workspaces:        this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }),
+      bundleDeployments: this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT })
     });
 
-    this.allRepos = await this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO });
-
-    await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
-
-    await this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT });
+    this.rancherCluster = hash.rancherCluster;
+    this.allRepos = hash.repos;
   },
 
   data() {

package/detail/fleet.cattle.io.gitrepo.vue

@@ -40,7 +40,7 @@ export default {
   },
   computed: {
     gitRepoHasClusters() {
-      return this.value?.clusterResourceStatus?.length;
+      return this.value.status.desiredReadyClusters;
     },
     clusterSchema() {
       return this.$store.getters['management/schemaFor'](FLEET.CLUSTER);

package/edit/provisioning.cattle.io.cluster/__tests__/Basics.test.ts

@@ -27,19 +27,36 @@ const defaultComputed = {
 const mockAgentArgs = { 'cloud-provider-name': { options: [], profile: { options: [{ anything: 'yes' }] } } };
 const mockServerArgs = { disable: {}, cni: { options: [] } };
 
-const rke2Versions =
-  [
-    {
-      id: 'v1.25.0+rke2r1', value: 'v1.25.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
-    },
-    {
-      id: 'v1.24.0+rke2r1', value: 'v1.24.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
-    },
-    {
-      id: 'v1.23.0+rke2r1', value: 'v1.23.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
-    }
-  ];
+const rke2Versions = [
+  {
+    id: 'v1.31.0+rke2r1', value: 'v1.31.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.30.0+rke2r1', value: 'v1.30.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.29.1+rke2r1', value: 'v1.29.1+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.25.0+rke2r1', value: 'v1.25.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.24.0+rke2r1', value: 'v1.24.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.23.0+rke2r1', value: 'v1.23.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  }
+];
 const k3sVersions = [
+  {
+    id: 'v1.31.0+k3s1', value: 'v1.31.0+k3s1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.30.0+k3s1', value: 'v1.30.0+k3s1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.29.1+k3s1', value: 'v1.29.1+k3s1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
   {
     id: 'v1.25.0+k3s1', value: 'v1.25.0+k3s1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
   },
@@ -88,7 +105,7 @@ const newOffValue = { ipv6: { enabled: false } };
 const bmOnValue = { bandwidthManager: { enabled: true } };
 const bmOffValue = { bandwidthManager: { enabled: false } };
 
-function createBasicsTab(version : string, userChartValues: any) {
+function createBasicsTab(version : string, userChartValues: any, options = {}) {
   const k8s = mockVersionOptions.find((v) => v.id === version) || mockVersionOptions[0];
   const label = 'whatever';
   const wrapper = mount(Basics, {
@@ -122,6 +139,7 @@ function createBasicsTab(version : string, userChartValues: any) {
       showCloudProvider:           false,
       unsupportedCloudProvider:    false,
       cloudProviderOptions:        [{ label: 'Default - RKE2 Embedded', value: '' }],
+      ...options
     },
     computed: defaultComputed,
     mocks:    {
@@ -470,4 +488,59 @@ describe('component: Basics', () => {
 
     expect(JSON.stringify(latest)).toStrictEqual(expected);
   });
+
+  it.each([
+    ['create', true, true, '%cluster.banner.cloudProviderUnsupportedAzure%'],
+    ['create', false, true, undefined],
+    ['create', true, false, undefined],
+    ['edit', true, true, undefined],
+    ['view', true, true, undefined],
+  ])('should display Unsupported Azure provider warning message', (mode, showCloudProvider, isAzureProviderUnsupported, warningMessage) => {
+    const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
+      mode,
+      showCloudProvider,
+      isAzureProviderUnsupported,
+      canAzureMigrateOnEdit: true
+    });
+
+    const cloudProviderUnsupportedAzureWarningMessage = wrapper.find('[data-testid="clusterBasics__showCloudProviderUnsupportedAzureWarning"]')?.element?.textContent;
+
+    expect(cloudProviderUnsupportedAzureWarningMessage).toBe(warningMessage);
+  });
+
+  it.each([
+    ['edit', true, true, '%cluster.banner.cloudProviderMigrateAzure%'],
+    ['edit', false, true, undefined],
+    ['edit', true, false, undefined],
+    ['create', true, true, undefined],
+    ['view', true, true, undefined],
+  ])('should display Azure Migration warning message', (mode, showCloudProvider, canAzureMigrateOnEdit, warningMessage) => {
+    const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
+      mode,
+      showCloudProvider,
+      canAzureMigrateOnEdit,
+      isAzureProviderUnsupported: true,
+    });
+
+    const cloudProviderMigrateAzureWarningMessage = wrapper.find('[data-testid="clusterBasics__showCloudProviderMigrateAzureWarning"]')?.element?.textContent;
+
+    expect(cloudProviderMigrateAzureWarningMessage).toBe(warningMessage);
+  });
+
+  it.each([
+    ['create', true, false],
+    ['edit', false, true],
+    ['edit', true, false],
+    ['view', true, false],
+  ])('should disable Cloud Provider', (mode, canAzureMigrateOnEdit, disabled) => {
+    const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
+      mode,
+      showCloudProvider: true,
+      canAzureMigrateOnEdit,
+    });
+
+    const cloudProvider = wrapper.find('[data-testid="clusterBasics__cloudProvider"]');
+
+    expect(cloudProvider.props().disabled).toBe(disabled);
+  });
 });