fix(results-page): fix viewer links on job results

Author: OliverDudgeon

components/results/details/JobDetails/JobLink.tsx

@@ -18,7 +18,7 @@ const getPath = (contains: string) => {
     .split("/")
     .filter((part) => part !== ".")
     // Filter empty parts
-    .filter((part) => Boolean(part));
+    .filter((part) => !!part);
 
   return path;
 };
@@ -58,7 +58,6 @@ const getFilePathAndName = (path: string[]) => {
  */
 export const JobLink = ({ projectId, path: originalPath, type }: JobLinkProps) => {
   const { query } = useRouter();
-
   const path = getPath(originalPath);
   const { resolvedPath, containsGlob } = getResolvedPath(path);
   const displayPath = path.join("/");

constants/routes.ts

@@ -5,7 +5,9 @@ type Proxy = "/api/dm-api" | "/api/viewer-proxy" | "";
 
 export const API_ROUTES = {
   projectFile: (projectId: string, path: string, fileName: string, proxy: Proxy = "") =>
-    `${proxy}/project/${projectId}/file?path=${path}&file=${fileName}`,
+    `${proxy}/project/${projectId}/file?path=${encodeURIComponent(path)}&file=${encodeURIComponent(
+      fileName,
+    )}`,
   datasetVersion: (datasetId: string, version: number, proxy: Proxy = "") =>
     `${proxy}/dataset/${datasetId}/${version}`,
 };

pages/project/file.tsx

@@ -21,8 +21,8 @@ export const getServerSideProps: GetServerSideProps<FileProps> = async ({ req, r
   let { path } = query;
   const { file, project } = query;
 
-  if (path === undefined || typeof file !== "string" || typeof project !== "string") {
-    return createErrorProps(res, 500, "File, path or project are not valid");
+  if (typeof file !== "string" || typeof project !== "string") {
+    return createErrorProps(res, 500, "File or project are not valid");
   }
 
   path = pathFromQuery(path);
@@ -42,10 +42,14 @@ export const File = (props: FileProps) => {
 
   const { query } = useRouter();
 
-  const { file, project, path } = query;
+  const { file, project } = query;
+  let { path = [] } = query;
 
-  if (typeof path !== "string" || typeof file !== "string" || typeof project !== "string") {
-    return <NextError statusCode={400} />;
+  if (Array.isArray(path)) {
+    path = path.join("/");
+  }
+  if (typeof file !== "string" || typeof project !== "string") {
+    return <NextError statusCode={400} statusMessage="File or project are invalid" />;
   }
 
   const title = (path.endsWith("/") ? path : path + "/") + file;

utils/paths.ts

@@ -1,4 +1,4 @@
-export const pathFromQuery = (query: string | string[]) => {
+export const pathFromQuery = (query: string | string[] | undefined = "") => {
   if (query.length === 0) {
     return "/";
   } else if (typeof query === "string") {