feat(pci-rancher): define version of a rancher

packages/manager/apps/pci-rancher/src/_mock_/rancher-resource.ts

@@ -12,6 +12,10 @@ export const rancherPlan: RancherPlan[] = [
 ];
 
 export const rancherVersion: RancherVersion[] = [
+  {
+    name: 'v2.7.4',
+    status: 'AVAILABLE',
+  },
   {
     name: 'v2.7.5',
     status: 'UNAVAILABLE',

packages/manager/apps/pci-rancher/src/api/api.type.ts

@@ -105,4 +105,5 @@ export interface RancherPlan {
 export interface RancherVersion {
   name: string;
   status: RancherReferenceStatus;
+  description?: string;
 }

packages/manager/apps/pci-rancher/src/components/layout-helpers/CreateRancher/CreateRancher.test.tsx

@@ -172,5 +172,39 @@ describe('CreateRancher', () => {
 
       expect(banner).not.toBeNull();
     });
+
+    it('Given that I have the selected version null and the versions available, I should see the selected version to the available version with the highest name with the recommanded version description', async () => {
+      const screen = await setupSpecTest();
+      const versionActive = screen.getByLabelText('tile-v2.7.6');
+
+      expect(versionActive).not.toBeNull();
+      expect(versionActive).toHaveAttribute('checked');
+
+      const recommendedText =
+        dashboardTranslation.createRancherRecomendedVersion;
+
+      const childrenWithRecommendedText = Array.from(
+        versionActive.querySelectorAll('*'),
+      ).some((child) => child.textContent.includes(recommendedText));
+
+      expect(childrenWithRecommendedText).toBe(true);
+    });
+
+    it('Given that I have the selected version null and the versions available, I should see  the available version with other names than the highest name without the recommanded version description', async () => {
+      const screen = await setupSpecTest();
+      const versionNotActive = screen.getByLabelText('tile-v2.7.4');
+
+      expect(versionNotActive).not.toBeNull();
+      expect(versionNotActive).not.toHaveAttribute('checked');
+
+      const recommendedText =
+        dashboardTranslation.createRancherRecomendedVersion;
+
+      const childrenWithRecommendedText = Array.from(
+        versionNotActive.querySelectorAll('*'),
+      ).some((child) => child.textContent.includes(recommendedText));
+
+      expect(childrenWithRecommendedText).toBe(false);
+    });
   });
 });

packages/manager/apps/pci-rancher/src/components/layout-helpers/CreateRancher/CreateRancher.tsx

@@ -137,7 +137,19 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
     }
 
     if (selectedVersion === null && versions?.length) {
-      setSelectedVersion(versions?.filter((v) => v.status === 'AVAILABLE')[0]);
+      const availableVersions = versions.filter(
+        (version) => version.status === 'AVAILABLE',
+      );
+      const versionToBeSelected = availableVersions.reduce(
+        (maxVersion, currentVersion) => {
+          return currentVersion.name > maxVersion.name
+            ? currentVersion
+            : maxVersion;
+        },
+        availableVersions[0],
+      );
+      versionToBeSelected.description = t('createRancherRecomendedVersion');
+      setSelectedVersion(versionToBeSelected);
     }
   }, [versions, plans]);
 
@@ -157,6 +169,10 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
     );
   };
 
+  const sortedVersions: RancherVersion[] = versions?.sort((a, b) =>
+    b.name.localeCompare(a.name),
+  );
+
   return (
     <div>
       <Title>{t('createRancherTitle')}</Title>
@@ -269,16 +285,12 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
           </div>
         </Block>
         <div className="flex my-5">
-          {versions?.map((version) => (
+          {sortedVersions?.map((version) => (
             <TileSection
               key={version.name}
               isActive={version.name === selectedVersion?.name}
               name={version.name}
-              description={
-                version.name === selectedVersion?.name
-                  ? t('createRancherRecomendedVersion')
-                  : undefined
-              }
+              description={version.description}
               isDisabled={version.status !== 'AVAILABLE'}
               onClick={() => setSelectedVersion(version)}
             />