coder · BrunoQuaresma · Feb 16, 2023 · Feb 15, 2023 · Feb 15, 2023 · Feb 15, 2023
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -3,6 +3,14 @@ import { cleanup } from "@testing-library/react"
 import crypto from "crypto"
 import { server } from "./src/testHelpers/server"
 import "jest-location-mock"
+import { TextEncoder, TextDecoder } from "util"
+import { Blob } from "buffer"
+
+global.TextEncoder = TextEncoder
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Polyfill for jsdom
+global.TextDecoder = TextDecoder as any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Polyfill for jsdom
+global.Blob = Blob as any
 
 // Polyfill the getRandomValues that is used on utils/random.ts
 Object.defineProperty(global.self, "crypto", {

diff --git a/site/js-untar.d.ts b/site/js-untar.d.ts
@@ -1,14 +1,21 @@
 declare module "js-untar" {
-  interface File {
+  export interface File {
     name: string
+    mode: string
     blob: Blob
+    gid: number
+    uid: number
+    mtime: number
+    gname: string
+    uname: string
+    type: "0" | "1" | "2" | "3" | "4" | "5" //https://en.wikipedia.org/wiki/Tar_(computing) on Type flag field
   }
 
   const Untar: (buffer: ArrayBuffer) => {
     then: (
-      resolve?: () => Promise<void>,
+      resolve?: (files: File[]) => void,
       reject?: () => Promise<void>,
-      progress: (file: File) => Promise<void>,
+      progress?: (file: File) => Promise<void>,
     ) => Promise<void>
   }
 

diff --git a/site/package.json b/site/package.json
@@ -76,7 +76,6 @@
     "remark-gfm": "3.0.1",
     "rollup-plugin-visualizer": "5.9.0",
     "sourcemapped-stacktrace": "1.1.11",
-    "tar-js": "^0.3.0",
     "ts-prune": "0.10.3",
     "tzdata": "1.0.30",
     "ua-parser-js": "1.0.33",

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -16,14 +16,21 @@ type Params = {
 export const TemplateVersionEditorPage: FC = () => {
   const { version: versionName, template: templateName } = useParams() as Params
   const orgId = useOrganizationId()
-  const { isSuccess, data } = useTemplateVersionData(
-    orgId,
-    templateName,
-    versionName,
-  )
   const [editorState, sendEvent] = useMachine(templateVersionEditorMachine, {
     context: { orgId },
   })
+  const { isSuccess, data } = useTemplateVersionData(
+    {
+      orgId,
+      templateName,
+      versionName,
+    },
+    {
+      onSuccess(data) {
+        sendEvent({ type: "INITIALIZE", untarFiles: data.untarFiles })
+      },
+    },
+  )
 
   return (
     <>
@@ -34,7 +41,7 @@ export const TemplateVersionEditorPage: FC = () => {
       {isSuccess && (
         <TemplateVersionEditor
           template={data.template}
-          templateVersion={editorState.context.version || data.currentVersion}
+          templateVersion={editorState.context.version || data.version}
           defaultFileTree={data.fileTree}
           onPreview={(fileTree) => {
             sendEvent({

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/data.ts b/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/data.ts
@@ -1,32 +1,49 @@
-import { useQuery } from "@tanstack/react-query"
-import { getTemplateByName, getTemplateVersionByName } from "api/api"
+import { useQuery, UseQueryOptions } from "@tanstack/react-query"
+import { getFile, getTemplateByName, getTemplateVersionByName } from "api/api"
 import { createTemplateVersionFileTree } from "util/templateVersion"
+import untar, { File as UntarFile } from "js-untar"
 
 const getTemplateVersionData = async (
   orgId: string,
   templateName: string,
   versionName: string,
 ) => {
-  const [template, currentVersion] = await Promise.all([
+  const [template, version] = await Promise.all([
     getTemplateByName(orgId, templateName),
     getTemplateVersionByName(orgId, templateName, versionName),
   ])
-  const fileTree = await createTemplateVersionFileTree(currentVersion)
+  const tarFile = await getFile(version.job.file_id)
+  let untarFiles: UntarFile[] = []
+  await untar(tarFile).then((files) => {
+    untarFiles = files
+  })
+  const fileTree = await createTemplateVersionFileTree(untarFiles)
 
   return {
     template,
-    currentVersion,
+    version,
     fileTree,
+    untarFiles,
   }
 }
 
+type GetTemplateVersionResponse = Awaited<
+  ReturnType<typeof getTemplateVersionData>
+>
+
+type UseTemplateVersionDataParams = {
+  orgId: string
+  templateName: string
+  versionName: string
+}
+
 export const useTemplateVersionData = (
-  orgId: string,
-  templateName: string,
-  versionName: string,
+  { templateName, versionName, orgId }: UseTemplateVersionDataParams,
+  options?: UseQueryOptions<GetTemplateVersionResponse>,
 ) => {
   return useQuery({
     queryKey: ["templateVersion", templateName, versionName],
     queryFn: () => getTemplateVersionData(orgId, templateName, versionName),
+    ...options,
   })
 }
diff --git a/site/src/util/tar.test.ts b/site/src/util/tar.test.ts
@@ -0,0 +1,52 @@
+import { TarReader, TarWriter, ITarFileInfo, TarFileType } from "./tar"
+
+const mtime = 1666666666666
+
+test("tar", async () => {
+  // Write
+  const writer = new TarWriter()
+  writer.addFile("a.txt", "hello", { mtime })
+  writer.addFile("b.txt", new Blob(["world"]), { mtime })
+  writer.addFile("c.txt", "", { mtime })
+  writer.addFolder("etc", { mtime })
+  writer.addFile("etc/d.txt", "", { mtime })
+  const blob = await writer.write()
+
+  // Read
+  const reader = new TarReader()
+  const fileInfos = await reader.readFile(blob)
+  verifyFile(fileInfos[0], reader.getTextFile(fileInfos[0].name) as string, {
+    name: "a.txt",
+    content: "hello",
+  })
+  verifyFile(fileInfos[1], reader.getTextFile(fileInfos[1].name) as string, {
+    name: "b.txt",
+    content: "world",
+  })
+  verifyFile(fileInfos[2], reader.getTextFile(fileInfos[2].name) as string, {
+    name: "c.txt",
+    content: "",
+  })
+  verifyFolder(fileInfos[3], {
+    name: "etc",
+  })
+  verifyFile(fileInfos[4], reader.getTextFile(fileInfos[4].name) as string, {
+    name: "etc/d.txt",
+    content: "",
+  })
+})
+
+function verifyFile(
+  info: ITarFileInfo,
+  content: string,
+  expected: { name: string; content: string },
+) {
+  expect(info.name).toEqual(expected.name)
+  expect(info.size).toEqual(expected.content.length)
+  expect(content).toEqual(expected.content)
+}
+
+function verifyFolder(info: ITarFileInfo, expected: { name: string }) {
+  expect(info.name).toEqual(expected.name)
+  expect(info.type).toEqual(TarFileType.Dir)
+}