Make UpgradablePackages CSV downloadable

trento-project · Oct 24, 2024 · 9d60434 · 9d60434
1 parent 1cc9a11
commit 9d60434
Showing 1 changed file with 45 additions and 41 deletions.
diff --git a/assets/js/pages/UpgradablePackagesPage/UpgradablePackages.jsx b/assets/js/pages/UpgradablePackagesPage/UpgradablePackages.jsx
@@ -19,57 +19,65 @@ export default function UpgradablePackages({
   const [search, setSearch] = useState('');
 
   const enrichedPackages = upgradablePackages.map((packageDetails) => {
-      const { name, from_version, from_release, to_version, to_release, arch } =
-        packageDetails;
+    const { name, from_version, from_release, to_version, to_release, arch } =
+      packageDetails;
 
-      console.log(packageDetails)
+    return {
+      ...packageDetails,
+      installed_package: `${name}-${from_version}-${from_release}.${arch}`,
+      latest_package: `${name}-${to_version}-${to_release}.${arch}`,
+    };
+  });
+
+  const displayedPackages = enrichedPackages.filter(
+    ({ name, patches }) =>
+      containsSubstring(name, search) ||
+      patches
+        .map(({ advisory }) => containsSubstring(advisory, search))
+        .includes(true)
+  );
+
+  const [csvURL, setCsvURL] = useState(null);
+
+  useEffect(() => {
+    if (patchesLoading || !enrichedPackages.length) {
+      setCsvURL(null);
+      return noop;
+    }
+
+    const csvPackages = enrichedPackages.map((packageDetails) => {
+      const advisories = packageDetails.patches.map((it) => it.advisory);
 
       return {
         ...packageDetails,
-        installed_package: `${name}-${from_version}-${from_release}.${arch}`,
-        latest_package: `${name}-${to_version}-${to_release}.${arch}`,
+        patches: JSON.stringify(advisories),
       };
     });
 
-  const displayedPackages = enrichedPackages
-    .filter(
-      ({ name, patches }) =>
-        containsSubstring(name, search) ||
-        patches
-          .map(({ advisory }) => containsSubstring(advisory, search))
-          .includes(true)
-    );
-
-  const [csvURL, setCsvURL] = useState(null);
-
-  useEffect(() => {
     setCsvURL(
-      enrichedPackages.length > 0
-        ? URL.createObjectURL?.(
-            new File(
-              [
-                Papa.unparse(
-                  {
-                    fields: ['installed_package', 'latest_package', 'patches'],
-                    data: enrichedPackages,
-                    // TODO: Papa can not parse lists. Make a helper which JSON encodes the array beforehand (Python Pandas does it this way)
-                  },
-                  { header: true }
-                ),
-              ],
-              `${hostName}-patches.csv`,
-              { type: 'text/csv' }
-            )
-          )
-        : null
+      URL.createObjectURL?.(
+        new File(
+          [
+            Papa.unparse(
+              {
+                fields: ['installed_package', 'latest_package', 'patches'],
+                data: csvPackages,
+              },
+              { header: true }
+            ),
+          ],
+          `${hostName}-patches.csv`,
+          { type: 'text/csv' }
+        )
+      )
     );
 
     return () => {
       if (csvURL) {
         URL.revokeObjectURL?.(csvURL);
       }
     };
-  }, [enrichedPackages]);
+  }, [enrichedPackages.length, patchesLoading]);
 
   return (
     <>
@@ -87,11 +95,7 @@ export default function UpgradablePackages({
             prefix={<EOS_SEARCH size="l" />}
           />
           <a href={csvURL} download={`${hostName}-upgradable-packages.csv`}>
-            <Button
-              className="w-max"
-              type="primary-white"
-              disabled={enrichedPackages.length <= 0 || !csvURL}
-            >
+            <Button className="w-max" type="primary-white" disabled={!csvURL}>
               download csv
             </Button>
           </a>