Skip to content

Commit 909fbb6

Browse files
BrunoQuaresmaBrunoQuaresma
authored
fix(site): Upload template files on template version editor (#6222)
1 parent 4c79979 commit 909fbb6

File tree

10 files changed

+492
-42
lines changed

10 files changed

+492
-42
lines changed

‎site/jest.setup.ts

+8
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import { cleanup } from "@testing-library/react"
33
import crypto from "crypto"
44
import { server } from "./src/testHelpers/server"
55
import "jest-location-mock"
6+
import { TextEncoder, TextDecoder } from "util"
7+
import { Blob } from "buffer"
8+
9+
global.TextEncoder = TextEncoder
10+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Polyfill for jsdom
11+
global.TextDecoder = TextDecoder as any
12+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Polyfill for jsdom
13+
global.Blob = Blob as any
614

715
// Polyfill the getRandomValues that is used on utils/random.ts
816
Object.defineProperty(global.self, "crypto", {

‎site/js-untar.d.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
declare module "js-untar" {
2-
interface File {
2+
export interface File {
33
name: string
4+
mode: string
45
blob: Blob
6+
gid: number
7+
uid: number
8+
mtime: number
9+
gname: string
10+
uname: string
11+
type: "0" | "1" | "2" | "3" | "4" | "5" //https://en.wikipedia.org/wiki/Tar_(computing) on Type flag field
512
}
613

714
const Untar: (buffer: ArrayBuffer) => {
815
then: (
9-
resolve?: () => Promise<void>,
16+
resolve?: (files: File[]) => void,
1017
reject?: () => Promise<void>,
11-
progress: (file: File) => Promise<void>,
18+
progress?: (file: File) => Promise<void>,
1219
) => Promise<void>
1320
}
1421

‎site/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@
7676
"remark-gfm": "3.0.1",
7777
"rollup-plugin-visualizer": "5.9.0",
7878
"sourcemapped-stacktrace": "1.1.11",
79-
"tar-js": "^0.3.0",
8079
"ts-prune": "0.10.3",
8180
"tzdata": "1.0.30",
8281
"ua-parser-js": "1.0.33",

‎site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx

+13-6
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,21 @@ type Params = {
1616
export const TemplateVersionEditorPage: FC = () => {
1717
const { version: versionName, template: templateName } = useParams() as Params
1818
const orgId = useOrganizationId()
19-
const { isSuccess, data } = useTemplateVersionData(
20-
orgId,
21-
templateName,
22-
versionName,
23-
)
2419
const [editorState, sendEvent] = useMachine(templateVersionEditorMachine, {
2520
context: { orgId },
2621
})
22+
const { isSuccess, data } = useTemplateVersionData(
23+
{
24+
orgId,
25+
templateName,
26+
versionName,
27+
},
28+
{
29+
onSuccess(data) {
30+
sendEvent({ type: "INITIALIZE", untarFiles: data.untarFiles })
31+
},
32+
},
33+
)
2734

2835
return (
2936
<>
@@ -34,7 +41,7 @@ export const TemplateVersionEditorPage: FC = () => {
3441
{isSuccess && (
3542
<TemplateVersionEditor
3643
template={data.template}
37-
templateVersion={editorState.context.version || data.currentVersion}
44+
templateVersion={editorState.context.version || data.version}
3845
defaultFileTree={data.fileTree}
3946
onPreview={(fileTree) => {
4047
sendEvent({

‎site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/data.ts

+25-8
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,49 @@
1-
import { useQuery } from "@tanstack/react-query"
2-
import { getTemplateByName, getTemplateVersionByName } from "api/api"
1+
import { useQuery, UseQueryOptions } from "@tanstack/react-query"
2+
import { getFile, getTemplateByName, getTemplateVersionByName } from "api/api"
33
import { createTemplateVersionFileTree } from "util/templateVersion"
4+
import untar, { File as UntarFile } from "js-untar"
45

56
const getTemplateVersionData = async (
67
orgId: string,
78
templateName: string,
89
versionName: string,
910
) => {
10-
const [template, currentVersion] = await Promise.all([
11+
const [template, version] = await Promise.all([
1112
getTemplateByName(orgId, templateName),
1213
getTemplateVersionByName(orgId, templateName, versionName),
1314
])
14-
const fileTree = await createTemplateVersionFileTree(currentVersion)
15+
const tarFile = await getFile(version.job.file_id)
16+
let untarFiles: UntarFile[] = []
17+
await untar(tarFile).then((files) => {
18+
untarFiles = files
19+
})
20+
const fileTree = await createTemplateVersionFileTree(untarFiles)
1521

1622
return {
1723
template,
18-
currentVersion,
24+
version,
1925
fileTree,
26+
untarFiles,
2027
}
2128
}
2229

30+
type GetTemplateVersionResponse = Awaited<
31+
ReturnType<typeof getTemplateVersionData>
32+
>
33+
34+
type UseTemplateVersionDataParams = {
35+
orgId: string
36+
templateName: string
37+
versionName: string
38+
}
39+
2340
export const useTemplateVersionData = (
24-
orgId: string,
25-
templateName: string,
26-
versionName: string,
41+
{ templateName, versionName, orgId }: UseTemplateVersionDataParams,
42+
options?: UseQueryOptions<GetTemplateVersionResponse>,
2743
) => {
2844
return useQuery({
2945
queryKey: ["templateVersion", templateName, versionName],
3046
queryFn: () => getTemplateVersionData(orgId, templateName, versionName),
47+
...options,
3148
})
3249
}

‎site/src/util/tar.test.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { TarReader, TarWriter, ITarFileInfo, TarFileType } from "./tar"
2+
3+
const mtime = 1666666666666
4+
5+
test("tar", async () => {
6+
// Write
7+
const writer = new TarWriter()
8+
writer.addFile("a.txt", "hello", { mtime })
9+
writer.addFile("b.txt", new Blob(["world"]), { mtime })
10+
writer.addFile("c.txt", "", { mtime })
11+
writer.addFolder("etc", { mtime })
12+
writer.addFile("etc/d.txt", "", { mtime })
13+
const blob = await writer.write()
14+
15+
// Read
16+
const reader = new TarReader()
17+
const fileInfos = await reader.readFile(blob)
18+
verifyFile(fileInfos[0], reader.getTextFile(fileInfos[0].name) as string, {
19+
name: "a.txt",
20+
content: "hello",
21+
})
22+
verifyFile(fileInfos[1], reader.getTextFile(fileInfos[1].name) as string, {
23+
name: "b.txt",
24+
content: "world",
25+
})
26+
verifyFile(fileInfos[2], reader.getTextFile(fileInfos[2].name) as string, {
27+
name: "c.txt",
28+
content: "",
29+
})
30+
verifyFolder(fileInfos[3], {
31+
name: "etc",
32+
})
33+
verifyFile(fileInfos[4], reader.getTextFile(fileInfos[4].name) as string, {
34+
name: "etc/d.txt",
35+
content: "",
36+
})
37+
})
38+
39+
function verifyFile(
40+
info: ITarFileInfo,
41+
content: string,
42+
expected: { name: string; content: string },
43+
) {
44+
expect(info.name).toEqual(expected.name)
45+
expect(info.size).toEqual(expected.content.length)
46+
expect(content).toEqual(expected.content)
47+
}
48+
49+
function verifyFolder(info: ITarFileInfo, expected: { name: string }) {
50+
expect(info.name).toEqual(expected.name)
51+
expect(info.type).toEqual(TarFileType.Dir)
52+
}

0 commit comments

Comments
 (0)