Add version param to install dnp page

packages/admin-ui/src/pages/installer/components/InstallDnpContainer.tsx

@@ -13,13 +13,13 @@ import ErrorView from "components/ErrorView";
 import { getProgressLogsByDnp } from "services/isInstallingLogs/selectors";
 
 const InstallDnpContainer: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
+  const { id, version } = useParams<{ id: string; version: string }>();
   const progressLogsByDnp = useSelector(getProgressLogsByDnp);
 
   // TODO: return a beautiful error page
   if (!id) return <div>No ID provided in route parameters.</div>;
 
-  const { data: dnp, error, isValidating } = useApi.fetchDnpRequest({ id });
+  const { data: dnp, error, isValidating } = useApi.fetchDnpRequest({ id, version });
 
   // Get progressLogs
   const dnpName = dnp?.dnpName;

packages/admin-ui/src/pages/installer/components/InstallerRoot.tsx

@@ -105,7 +105,7 @@ const InstallerRoot: React.FC = () => {
             element={
               <Routes>
                 <Route index element={<route.component />} />
-                <Route path=":id/*" element={<InstallDnpContainer />} />
+                <Route path=":id/:version?/*" element={<InstallDnpContainer />} />
               </Routes>
             }
           />

packages/admin-ui/src/pages/installer/components/dappnodeDappstore/InstallerDnp.tsx

@@ -82,7 +82,17 @@ export const InstallerDnp: React.FC = () => {
           }
         ]
       });
-    } else navigate(encodeURIComponent(id));
+    } else {
+      // Check if version has been defined like dnpName:version
+      const [dnpName, version] = id.split(":");
+
+      const encodedDnpName = encodeURIComponent(dnpName);
+      const encodedVersion = version ? encodeURIComponent(version) : null;
+
+      const pkgPath = encodedVersion ? `${encodedDnpName}/${encodedVersion}` : encodedDnpName;
+
+      navigate(pkgPath);
+    }
   }
 
   function onCategoryChange(category: string) {

packages/dappmanager/src/calls/fetchDnpRequest.ts

@@ -19,8 +19,8 @@ import {
 import { Manifest, SetupWizardField } from "@dappnode/types";
 import { logs } from "@dappnode/logger";
 
-export async function fetchDnpRequest({ id }: { id: string }): Promise<RequestedDnp> {
-  const mainRelease = await dappnodeInstaller.getRelease(id);
+export async function fetchDnpRequest({ id, version }: { id: string; version?: string }): Promise<RequestedDnp> {
+  const mainRelease = await dappnodeInstaller.getRelease(id, version);
 
   const settings: UserSettingsAllDnps = {};
   const specialPermissions: SpecialPermissionAllDnps = {};
@@ -69,6 +69,7 @@ export async function fetchDnpRequest({ id }: { id: string }): Promise<Requested
       name: dnpName,
       ver: reqVersion
     });
+
     compatibleDnps = mapValues(state, (nextVersion, dnpName) => ({
       from: currentVersions[dnpName],
       to: nextVersion

packages/installer/src/calls/packageGetData.ts

@@ -8,14 +8,18 @@ import { DappnodeInstaller } from "../dappnodeInstaller.js";
 // TODO: find a proper place for these functions. The functions inside this file
 // are not used as the other files within this same folder
 
-export async function packageGetData(dappnodeInstaller: DappnodeInstaller, dnpName: string): Promise<PackageItemData> {
+export async function packageGetData(
+  dappnodeInstaller: DappnodeInstaller,
+  dnpName: string,
+  version?: string
+): Promise<PackageItemData> {
   const cachedDnp = db.pkgItemMetadata.get(dnpName);
   if (cachedDnp) {
     // Update cache in the background
     eventBus.runStakerCacheUpdate.emit({ dnpName });
     return cachedDnp;
   } else {
-    const repository = await dappnodeInstaller.getRelease(dnpName);
+    const repository = await dappnodeInstaller.getRelease(dnpName, version);
     const dataDnp = packagePickItemData(repository);
     db.pkgItemMetadata.set(dnpName, dataDnp);
     return dataDnp;

packages/types/src/routes.ts

@@ -259,7 +259,7 @@ export interface Routes {
   /**
    * Fetch extended info about a new DNP
    */
-  fetchDnpRequest: (kwargs: { id: string }) => Promise<RequestedDnp>;
+  fetchDnpRequest: (kwargs: { id: string; version?: string }) => Promise<RequestedDnp>;
 
   /**
    * Returns the user action logs. This logs are stored in a different