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

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) => {

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,

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 () => {

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()
-  })
-  return files
-}
-
-export const filterTemplateFilesByExtension = (
-  files: TemplateVersionFiles,
-  extensions: string[],
-): TemplateVersionFiles => {
-  return Object.keys(files).reduce((filteredFiles, filename) => {
     const [_, extension] = filename.split(".")
 
-    return extensions.includes(extension)
-      ? { ...filteredFiles, [filename]: files[filename] }
-      : filteredFiles
-  }, {} as TemplateVersionFiles)
+    if (allowedExtensions.includes(extension)) {
+      blobs[filename] = file.blob
+    }
+  })
+
+  await Promise.all(
+    Object.entries(blobs).map(async ([filename, blob]) => {
+      files[filename] = await blob.text()
+    }),
+  )
+
+  return files
 }

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"])
       },
     },
   },