refactor(viewers): rewrite plaintext-viewer to be SSRed

Author: OliverDudgeon

components/DatasetsTable/DatasetDetails/DatasetDetails.tsx

@@ -10,10 +10,10 @@ import { Labels } from "../../labels/Labels";
 import { NewLabelButton } from "../../labels/NewLabelButton";
 import { ModalWrapper } from "../../modals/ModalWrapper";
 import { PageSection } from "../../PageSection";
-import { VersionInfoSection } from "./VersionInfoSection/VersionInfoSection";
 import { ManageDatasetEditorsSection } from "./ManageDatasetEditorsSection";
 import { NewVersionListItem } from "./NewVersionListItem";
 import { VersionActionsSection } from "./VersionActionsSection";
+import { VersionInfoSection } from "./VersionInfoSection";
 import { VersionViewSection } from "./VersionViewSection";
 import { WorkingVersionSection } from "./WorkingVersionSection";
 

components/DatasetsTable/DatasetDetails/VersionViewSection/DatasetPlainTextViewerListItem.tsx

@@ -2,8 +2,6 @@ import { Description } from "@mui/icons-material";
 import { ListItem, ListItemText } from "@mui/material";
 import NextLink from "next/link";
 
-import { APP_ROUTES } from "../../../../constants/routes";
-
 export interface DatasetPlainTextViewerListItemProps {
   datasetId: string;
   version: number;
@@ -17,7 +15,8 @@ export const DatasetPlainTextViewerListItem = ({
     <NextLink
       passHref
       href={{
-        pathname: APP_ROUTES.dataset.version(datasetId, version),
+        pathname: "/dataset/[datasetId]/[datasetVersion]",
+        query: { datasetId, datasetVersion: String(version) },
       }}
     >
       <ListItem button component="a" rel="noopener noreferrer" target="_blank">

components/DatasetsTable/DatasetDetails/VersionViewSection/VersionViewSection.tsx

@@ -29,7 +29,7 @@ export const VersionViewSection = ({ dataset, version }: VersionViewSectionProps
         component="a"
         href={
           process.env.NEXT_PUBLIC_BASE_PATH +
-          API_ROUTES.datasetVersion(dataset.dataset_id, version.version, true)
+          API_ROUTES.datasetVersion(dataset.dataset_id, version.version, "/api/viewer-proxy")
         }
         rel="noopener noreferrer"
         target="_blank"

components/DatasetsTable/DatasetDetails/WorkingVersionSection.tsx

@@ -61,7 +61,7 @@ export const WorkingVersionSection = ({
         <Box ml={2}>
           <DownloadButton
             disabled={!(version.processing_stage === "DONE")}
-            href={API_ROUTES.datasetVersion(dataset.dataset_id, version.version)}
+            href={API_ROUTES.datasetVersion(dataset.dataset_id, version.version, "/api/dm-api")}
             title="Download this version of the dataset"
           />
         </Box>

components/DocsNav.tsx

@@ -1,25 +1,22 @@
-import type { ComponentProps } from "react";
-
 import { Button } from "@mui/material";
-import type Link from "next/link";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
 
-type Links = Record<`/${string}`, ComponentProps<typeof Link>["href"]>;
-
-const links: Links = {
+const links = {
   "/docs/guided-tour": "Guided Tour",
   "/docs/how-to": "How To",
   "/docs/concepts": "Concepts guide",
 };
 
+type Routes = keyof typeof links;
+
 export const DocsNav = () => {
   const router = useRouter();
 
   return (
     <nav aria-label="Docs" role="navigation">
       {Object.entries(links).map(([href, title]) => (
-        <NextLink passHref href={href} key={href}>
+        <NextLink passHref href={{ pathname: href as Routes }} key={href}>
           <Button disabled={router.pathname === href}>{title}</Button>
         </NextLink>
       ))}

components/FileUpload/FileUpload.tsx

@@ -6,6 +6,7 @@ import { useGetFileTypes } from "@squonk/data-manager-client/type";
 
 import CloudUploadRoundedIcon from "@mui/icons-material/CloudUploadRounded";
 import { IconButton, Tooltip } from "@mui/material";
+import { captureException } from "@sentry/nextjs";
 import type { AxiosError } from "axios";
 
 import { useEnqueueError } from "../../hooks/useEnqueueStackError";
@@ -85,7 +86,8 @@ export const FileUpload = () => {
               setFiles(updatedFiles);
               enqueueError(errorMessage);
             } else {
-              enqueueError("Unknown error"); // TODO: Add Sentry
+              captureException(err);
+              enqueueError("Unknown error");
             }
           }
         });

components/PlaintextViewer.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable simple-import-sort/imports */
+import { Box, Chip, Divider, Paper, Typography } from "@mui/material";
+import fileSize from "filesize";
+
+import { useEffect } from "react";
+
+import Prism from "prismjs";
+import "prismjs/plugins/line-numbers/prism-line-numbers.js";
+import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+
+export interface PlaintextViewerProps {
+  /**
+   * Contents of a file to be displayed.
+   */
+  content: string;
+  /**
+   *
+   */
+  title: string;
+  originalContentLength: number | null;
+  truncated: boolean;
+  compressed: boolean;
+}
+
+/**
+ * Component which displays contents of a file. The contents are provided as string, which is then
+ * parsed into multiple lines and displayed.
+ */
+export const PlaintextViewer = ({
+  content,
+  title,
+  originalContentLength,
+  truncated,
+  compressed,
+}: PlaintextViewerProps) => {
+  const numberOfLines = content.split("\n").length;
+  const linesText = numberOfLines === 1 ? "line" : "lines";
+
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
+  return (
+    <Paper sx={{ marginY: 2 }}>
+      <Box
+        alignItems="center"
+        display="flex"
+        paddingX={2}
+        paddingY={1}
+        sx={{
+          bgcolor: (theme) => (theme.palette.mode === "light" ? "grey.200" : "grey.900"),
+          boxShadow: 0,
+          gap: 2,
+        }}
+      >
+        <Box alignItems="center" display="flex" flex="1 1 auto" sx={{ gap: 1 }}>
+          <Typography component="h1" fontFamily="monospace" sx={{ wordBreak: "break-all" }}>
+            <b>{title}</b>
+          </Typography>
+          <Divider flexItem orientation="vertical" />
+          <Typography>
+            {numberOfLines} {linesText} of{" "}
+            {originalContentLength ? fileSize(originalContentLength) : "unknown"}
+          </Typography>
+          {(compressed || truncated) && <Divider flexItem orientation="vertical" />}
+          {compressed && <Chip label="Decompressed" size="small" variant="outlined" />}
+          {truncated && <Chip label="Truncated" size="small" variant="outlined" />}
+        </Box>
+      </Box>
+      <Box paddingBottom={1} paddingX={1}>
+        <Box className="line-numbers" component="pre">
+          <code className="language-">{content}</code>
+        </Box>
+      </Box>
+    </Paper>
+  );
+};