fix: Syntax highlighting with long lines and untar content with emojis (#5098)

BrunoQuaresma · web-flow · commit 2a46702fc5bf · 2022-11-15T20:09:54.000Z
diff --git a/site/js-untar.d.ts b/site/js-untar.d.ts
@@ -1,7 +1,7 @@
 declare module "js-untar" {
   interface File {
     name: string
-    readAsString: () => string
+    blob: Blob
   }
 
   const Untar: (buffer: ArrayBuffer) => {
diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -30,6 +30,9 @@ const useStyles = makeStyles((theme) => ({
     background: theme.palette.background.paperLight,
     borderRadius: theme.shape.borderRadius,
     padding: theme.spacing(2, 3),
+    // Line breaks are broken when used with line numbers on react-syntax-highlighter
+    // https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/483
+    overflowX: "auto",
 
     "& code": {
       color: theme.palette.text.secondary,
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPage.test.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPage.test.tsx
@@ -12,11 +12,9 @@ const TEMPLATE_NAME = "coder-ts"
 const VERSION_NAME = "12345"
 const TERRAFORM_FILENAME = "main.tf"
 const README_FILENAME = "readme.md"
-const GPG_FILENAME = "key.gpg"
 const TEMPLATE_VERSION_FILES = {
   [TERRAFORM_FILENAME]: "{}",
   [README_FILENAME]: "Readme",
-  [GPG_FILENAME]: "Some sensitive info",
 }
 
 const setup = async () => {
@@ -38,10 +36,9 @@ const setup = async () => {
 describe("TemplateVersionPage", () => {
   beforeEach(setup)
 
-  it("shows the tf and md files only", () => {
+  it("shows files", () => {
     expect(screen.queryByText(TERRAFORM_FILENAME)).toBeInTheDocument()
     expect(screen.queryByText(README_FILENAME)).toBeInTheDocument()
-    expect(screen.queryByText(GPG_FILENAME)).not.toBeInTheDocument()
   })
 
   it("shows the right content when click on the file name", async () => {
diff --git a/site/src/util/templateVersion.ts b/site/src/util/templateVersion.ts
@@ -9,26 +9,27 @@ export type TemplateVersionFiles = Record<string, string>
 
 export const getTemplateVersionFiles = async (
   version: TemplateVersion,
+  allowedExtensions: string[],
 ): Promise<TemplateVersionFiles> => {
   const files: TemplateVersionFiles = {}
   const tarFile = await getFile(version.job.file_id)
+  const blobs: Record<string, Blob> = {}
+
   await untar(tarFile).then(undefined, undefined, async (file) => {
     const paths = file.name.split("/")
     const filename = paths[paths.length - 1]
-    files[filename] = file.readAsString()
+    const [_, extension] = filename.split(".")
+
+    if (allowedExtensions.includes(extension)) {
+      blobs[filename] = file.blob
+    }
   })
-  return files
-}
 
-export const filterTemplateFilesByExtension = (
-  files: TemplateVersionFiles,
-  extensions: string[],
-): TemplateVersionFiles => {
-  return Object.keys(files).reduce((filteredFiles, filename) => {
-    const [_, extension] = filename.split(".")
+  await Promise.all(
+    Object.entries(blobs).map(async ([filename, blob]) => {
+      files[filename] = await blob.text()
+    }),
+  )
 
-    return extensions.includes(extension)
-      ? { ...filteredFiles, [filename]: files[filename] }
-      : filteredFiles
-  }, {} as TemplateVersionFiles)
+  return files
 }
diff --git a/site/src/xServices/templateVersion/templateVersionXService.ts b/site/src/xServices/templateVersion/templateVersionXService.ts
@@ -1,7 +1,6 @@
 import { getTemplateVersionByName } from "api/api"
 import { TemplateVersion } from "api/typesGenerated"
 import {
-  filterTemplateFilesByExtension,
   getTemplateVersionFiles,
   TemplateVersionFiles,
 } from "util/templateVersion"
@@ -86,10 +85,7 @@ export const templateVersionMachine = createMachine(
         if (!version) {
           throw new Error("Version is not defined")
         }
-        return filterTemplateFilesByExtension(
-          await getTemplateVersionFiles(version),
-          ["tf", "md"],
-        )
+        return getTemplateVersionFiles(version, ["tf", "md"])
       },
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`declare module "js-untar" {`
`2`	`2`	`interface File {`
`3`	`3`	`name: string`
`4`		`- readAsString: () => string`
	`4`	`+ blob: Blob`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`const Untar: (buffer: ArrayBuffer) => {`