Sort csv content by alphabet like in the ui (#3135)

* Sort csv content by alphabet

* Export csv like in ui

assets/js/common/UpgradablePackagesList/UpgradablePackagesList.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { noop } from 'lodash';
 
 import Button from '@common/Button';
@@ -11,21 +11,17 @@ function UpgradablePackagesList({
   upgradablePackages = upgradablePackagesDefault,
   patchesLoading,
   onPatchClick = noop,
+  sortDirection = 'asc',
+  toggleSortDirection = () => {},
 }) {
-  const [sortDirection, setSortDirection] = useState('asc');
-
-  const toggleSortDirection = () => {
-    if (sortDirection === 'asc') {
-      setSortDirection('desc');
-    } else {
-      setSortDirection('asc');
-    }
-  };
-
+  const [sortBy, setSortBy] = useState(sortDirection);
   const sortByLatestPackage = createStringSortingPredicate(
     'latestPackage',
-    sortDirection
+    sortBy
   );
+  useEffect(() => {
+    setSortBy(sortDirection);
+  }, [sortDirection]);
 
   const config = {
     pagination: true,
@@ -40,7 +36,7 @@ function UpgradablePackagesList({
         title: 'Latest Package',
         key: 'latestPackage',
         sortable: true,
-        sortDirection,
+        sortDirection: sortBy,
         handleClick: () => toggleSortDirection(),
         render: (content, _) => <div>{content}</div>,
       },

assets/js/common/UpgradablePackagesList/UpgradablePackagesList.stories.jsx

@@ -1,4 +1,4 @@
-import { upgradablePackageFactory } from '@lib/test-utils/factories/relevantPatches';
+import { csvDataupgradablePackageFactory } from '@lib/test-utils/factories/relevantPatches';
 import UpgradablePackagesList from './UpgradablePackagesList';
 
 export default {
@@ -30,14 +30,14 @@ export const Default = {
   args: {
     hostname: 'Example Host',
     patchesLoading: false,
-    upgradablePackages: upgradablePackageFactory.buildList(2),
+    upgradablePackages: csvDataupgradablePackageFactory.buildList(2),
   },
 };
 
 export const PatchesLoading = {
   args: {
     hostname: 'Example Host',
     patchesLoading: true,
-    upgradablePackages: upgradablePackageFactory.buildList(2),
+    upgradablePackages: csvDataupgradablePackageFactory.buildList(2),
   },
 };

assets/js/lib/test-utils/factories/relevantPatches.js

@@ -22,7 +22,7 @@ export const patchForPackageFactory = Factory.define(({ sequence }) => ({
   last_modified_date: faker.date.anytime().toString(),
 }));
 
-export const upgradablePackageFactory = Factory.define(() => ({
+export const csvDataupgradablePackageFactory = Factory.define(() => ({
   installedPackage: `Package ${faker.animal.cat()}`,
   latestPackage: faker.system.semver(),
   patches: [{ advisory: faker.animal.cat() }],

assets/js/pages/UpgradablePackagesPage/UpgradablePackages.jsx

@@ -9,6 +9,19 @@ import Input from '@common/Input';
 import Button from '@common/Button';
 import { containsSubstring } from '@lib/filter';
 
+const sortCsvContent = (content, sortingDirection) => {
+  if (content.length <= 1) {
+    return content;
+  }
+
+  return content.sort((packageA, packageB) => {
+    const comparison = packageA.latest_package.localeCompare(
+      packageB.latest_package
+    );
+    return sortingDirection === 'asc' ? comparison : -comparison;
+  });
+};
+
 export default function UpgradablePackages({
   hostName,
   upgradablePackages,
@@ -18,6 +31,14 @@ export default function UpgradablePackages({
 }) {
   const [search, setSearch] = useState('');
   const [csvURL, setCsvURL] = useState(null);
+  const [sortDirection, setSortDirection] = useState('asc');
+
+  const toggleSortDirection = () => {
+    setSortDirection((prevDirection) =>
+      prevDirection === 'asc' ? 'desc' : 'asc'
+    );
+  };
+
   const enrichedPackages = upgradablePackages.map((packageDetails) => {
     const {
       name,
@@ -62,7 +83,6 @@ export default function UpgradablePackages({
     if (csvURL) {
       URL.revokeObjectURL(csvURL);
     }
-
     setCsvURL(
       enrichedPackages.length > 0
         ? URL.createObjectURL?.(
@@ -71,7 +91,7 @@ export default function UpgradablePackages({
                 Papa.unparse(
                   {
                     fields: ['installed_package', 'latest_package', 'patches'],
-                    data: csvContent,
+                    data: sortCsvContent(csvContent, sortDirection),
                   },
                   { header: true }
                 ),
@@ -88,7 +108,7 @@ export default function UpgradablePackages({
         URL.revokeObjectURL(csvURL);
       }
     };
-  }, [enrichedPackages.length, patchesLoading]);
+  }, [enrichedPackages.length, patchesLoading, sortDirection]);
 
   return (
     <>
@@ -117,6 +137,8 @@ export default function UpgradablePackages({
         upgradablePackages={filteredPackages}
         onPatchClick={onPatchClick}
         onLoad={onLoad}
+        toggleSortDirection={toggleSortDirection}
+        sortDirection={sortDirection}
       />
     </>
   );

assets/js/pages/UpgradablePackagesPage/UpgradablePackages.test.jsx

@@ -5,7 +5,6 @@ import '@testing-library/jest-dom';
 import { noop } from 'lodash';
 import { faker } from '@faker-js/faker';
 import { upgradablePackageFactory } from '@lib/test-utils/factories/upgradablePackage';
-
 import { renderWithRouter as render } from '@lib/test-utils';
 
 import UpgradablePackages from './UpgradablePackages';