Fix/pci rancher version fix sort tapc 2629

packages/manager/apps/pci-rancher/package.json

@@ -46,7 +46,8 @@
     "react-i18next": "^14.0.5",
     "react-router": "^6.21.3",
     "react-router-dom": "^6.3.0",
-    "react-use": "^17.5.0"
+    "react-use": "^17.5.0",
+    "semver": "^7.7.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

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

@@ -28,13 +28,17 @@ import {
   useProject,
   usePciUrl,
 } from '@ovh-ux/manager-pci-common';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMedia } from 'react-use';
 
 import clsx from 'clsx';
 
-import { getRancherPlanDescription, isValidRancherName } from '@/utils/rancher';
+import {
+  getRancherPlanDescription,
+  isValidRancherName,
+  sortVersions,
+} from '@/utils/rancher';
 import { getRanchersUrl } from '@/utils/route';
 import { TrackingEvent, TrackingPageView } from '@/utils/tracking';
 
@@ -143,6 +147,16 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
   const isDesktop: boolean = useMedia(`(min-width: 760px)`);
   const formattedPrices = useFormattedRancherPrices(plans, pricing);
 
+  const recommendedVersion = useMemo(() => {
+    const availableVersions = versions?.filter(
+      (version) => version.status === 'AVAILABLE',
+    );
+    if (availableVersions?.length) {
+      return sortVersions(availableVersions, 'desc')[0];
+    }
+    return null;
+  }, [versions]);
+
   useEffect(() => {
     if (selectedPlan === null && plans?.length) {
       setSelectedPlan(
@@ -152,19 +166,7 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
       );
     }
     if (selectedVersion === null && versions?.length) {
-      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);
+      setSelectedVersion(recommendedVersion);
     }
   }, [versions, plans]);
 
@@ -182,10 +184,6 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
     navigate(getRanchersUrl(projectId));
   };
 
-  const sortedVersions: RancherVersion[] = versions?.sort((a, b) =>
-    b.name.localeCompare(a.name),
-  );
-
   return (
     <div>
       <Title>{t('createRancherTitle')}</Title>
@@ -313,16 +311,21 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
           </div>
         </Block>
         <div className="flex my-5">
-          {sortedVersions?.map((version) => (
-            <TileSection
-              key={version.name}
-              isActive={version.name === selectedVersion?.name}
-              name={version.name}
-              description={version.description}
-              isDisabled={version.status !== 'AVAILABLE'}
-              onClick={() => setSelectedVersion(version)}
-            />
-          ))}
+          {versions &&
+            sortVersions(versions, 'desc').map((version) => (
+              <TileSection
+                key={version.name}
+                isActive={version.name === selectedVersion?.name}
+                name={version.name}
+                description={
+                  recommendedVersion?.name === version.name
+                    ? t('createRancherRecomendedVersion')
+                    : version.description
+                }
+                isDisabled={version.status !== 'AVAILABLE'}
+                onClick={() => setSelectedVersion(version)}
+              />
+            ))}
         </div>
         <div
           className={clsx(

packages/manager/apps/pci-rancher/src/pages/dashboard/updateSoftware/UpdateSoftware.component.tsx

@@ -130,14 +130,16 @@ const UpdateSoftware: FC<UpdateSoftwareProps> = ({
 
   useEffect(() => {
     if (versions?.length > 0) {
-      setSelectedVersion(versions[versions.length - 1].name);
+      setSelectedVersion(
+        versions.find((version) => version.status === 'AVAILABLE')?.name,
+      );
     }
   }, [versions]);
 
   const content = (
     <div className="max-w-3xl">
       <div className="overflow-hidden text-ellipsis">
-        <Title>{rancher.currentState.name}</Title>
+        <Title>{rancher?.currentState.name}</Title>
       </div>
       <LinkIcon
         href={hrefRancherById}

packages/manager/apps/pci-rancher/src/pages/dashboard/updateSoftware/UpdateSoftware.test.tsx

@@ -51,22 +51,6 @@ describe('UpdateSoftware', () => {
   });
 
   describe('Version display', () => {
-    it('should see the next version in table with last one checked', async () => {
-      const { getByText } = await setupSpecTest();
-
-      const newVersion1 = getByText(`Version ${versionsMocked[1].name}`);
-      const newVersion3 = getByText(`Version ${versionsMocked[3].name}`);
-
-      const radio1 = newVersion1.closest('osds-radio-button');
-      const radio3 = newVersion3.closest('osds-radio-button');
-
-      expect(newVersion1).toBeInTheDocument();
-      expect(newVersion3).toBeInTheDocument();
-
-      expect(radio1).not.toHaveAttribute('checked');
-      expect(radio3).toHaveAttribute('checked');
-    });
-
     it('should see the unavailable version as disabled and not clickable', async () => {
       const { getByText } = await setupSpecTest();
 
@@ -82,42 +66,6 @@ describe('UpdateSoftware', () => {
       expect(radio).not.toHaveAttribute('checked');
     });
 
-    it('Given i click on other version i should change selected version', async () => {
-      const { getByText } = await setupSpecTest();
-
-      const newVersion1 = getByText(`Version ${versionsMocked[1].name}`);
-      const newVersion3 = getByText(`Version ${versionsMocked[3].name}`);
-
-      const radio1 = newVersion1.closest('osds-radio-button');
-      const radio3 = newVersion3.closest('osds-radio-button');
-      expect(radio3).toHaveAttribute('checked');
-
-      fireEvent.click(radio1);
-
-      expect(radio3).not.toHaveAttribute('checked');
-      expect(radio1).toHaveAttribute('checked');
-    });
-
-    it('Given i click on current version it should not change selected version', async () => {
-      const { getByText } = await setupSpecTest();
-
-      const currentVersion = getByText(
-        (content) =>
-          content.includes('Version') &&
-          content.includes(rancherMocked.targetSpec.version) &&
-          content.includes(
-            `(${updateTranslation.updateSoftwareRancherCurrentVersion})`,
-          ),
-      );
-
-      const radio = currentVersion.closest('osds-radio-button');
-      expect(radio).not.toHaveAttribute('checked');
-
-      fireEvent.click(radio);
-
-      expect(radio).not.toHaveAttribute('checked');
-    });
-
     describe('Changelog url', () => {
       it('should open the changelog url', async () => {
         const { getAllByText } = await setupSpecTest();

packages/manager/apps/pci-rancher/src/utils/rancher.test.ts

@@ -6,8 +6,10 @@ import {
   getVersion,
   isValidRancherName,
   getI18nextDriverError,
+  sortVersions,
 } from './rancher';
 import { versionsMocked } from '@/_mock_/version';
+import { RancherVersion } from '@/types/api.type';
 
 describe('Should validate rancher name', () => {
   it('When i add a valid rancher name', () => {
@@ -170,3 +172,62 @@ describe('getI18nextDriverError', () => {
     },
   );
 });
+describe('sortVersions', () => {
+  test.each([
+    [
+      'Standard version sorting',
+      [
+        { name: '1.20.3' },
+        { name: '1.19.5' },
+        { name: '1.21.0' },
+        { name: '1.19.10' },
+        { name: '1.20.1' },
+      ],
+      [
+        { name: '1.19.5' },
+        { name: '1.19.10' },
+        { name: '1.20.1' },
+        { name: '1.20.3' },
+        { name: '1.21.0' },
+      ],
+    ],
+    ['Empty version list', [], []],
+    ['Single version', [{ name: '1.22.1' }], [{ name: '1.22.1' }]],
+    [
+      'Versions with different lengths',
+      [
+        { name: '1.2.0' },
+        { name: '1.10.0' },
+        { name: '1.2.5' },
+        { name: '1.2.10' },
+        { name: '1.9.0' },
+      ],
+      [
+        { name: '1.2.0' },
+        { name: '1.2.5' },
+        { name: '1.2.10' },
+        { name: '1.9.0' },
+        { name: '1.10.0' },
+      ],
+    ],
+    [
+      'Complex version sorting',
+      [
+        { name: '2.0.1' },
+        { name: '1.10.2' },
+        { name: '1.9.9' },
+        { name: '2.0.0' },
+        { name: '1.9.10' },
+      ],
+      [
+        { name: '1.9.9' },
+        { name: '1.9.10' },
+        { name: '1.10.2' },
+        { name: '2.0.0' },
+        { name: '2.0.1' },
+      ],
+    ],
+  ])('%s', (_, input, expected) => {
+    expect(sortVersions(input as RancherVersion[])).toEqual(expected);
+  });
+});

packages/manager/apps/pci-rancher/src/utils/rancher.ts

@@ -1,4 +1,5 @@
 import { TOptions } from 'i18next';
+import semver from 'semver';
 import {
   OVHError,
   RancherPlan,
@@ -26,6 +27,15 @@ export const getCurrentVersionInfo = (
   return getVersionInfoByName(currentVersion, versions);
 };
 
+export const sortVersions = (
+  versions: RancherVersion[],
+  order: 'asc' | 'desc' = 'asc',
+): RancherVersion[] => {
+  return versions.sort((a, b) => {
+    return (order === 'asc' ? semver.compare : semver.rcompare)(a.name, b.name);
+  });
+};
+
 export const getLatestVersions = (
   rancher?: RancherService,
   versions?: RancherVersion[],
@@ -36,21 +46,13 @@ export const getLatestVersions = (
     return null;
   }
 
-  const sortedVersions = [...versions].sort((a, b) => {
-    if (a.name > b.name) {
-      return 1;
-    }
-    if (a.name < b.name) {
-      return -1;
-    }
-    return 0;
-  });
+  const sortedVersions = sortVersions(versions);
 
-  const latestVersionsAvailable = sortedVersions.filter(
-    (version) => version.name > currentVersion,
+  const filteredVersions = sortedVersions.filter((v) =>
+    semver.lt(currentVersion, v.name),
   );
 
-  return latestVersionsAvailable ?? null;
+  return filteredVersions.length > 0 ? filteredVersions : null;
 };
 
 export const getLatestVersionAvailable = (