Do safe request

BrunoQuaresma · BrunoQuaresma · commit 1c0535623b13 · 2022-12-06T22:23:34.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -231,14 +231,32 @@ export const getTemplateVersionByName = async (
   return response.data
 }
 
+export type GetPreviousTemplateVersionByNameResponse =
+  | TypesGen.TemplateVersion
+  | undefined
+
 export const getPreviousTemplateVersionByName = async (
   organizationId: string,
   versionName: string,
-): Promise<TypesGen.TemplateVersion> => {
-  const response = await axios.get<TypesGen.TemplateVersion>(
-    `/api/v2/organizations/${organizationId}/templateversions/${versionName}/previous`,
-  )
-  return response.data
+): Promise<GetPreviousTemplateVersionByNameResponse> => {
+  try {
+    const response = await axios.get<TypesGen.TemplateVersion>(
+      `/api/v2/organizations/${organizationId}/templateversions/${versionName}/previous`,
+    )
+    return response.data
+  } catch (error) {
+    // When there is no previous version, like the first version of a template,
+    // the API returns 404 so in this case we can safely return undefined
+    if (
+      axios.isAxiosError(error) &&
+      error.response &&
+      error.response.status === 404
+    ) {
+      return undefined
+    }
+
+    throw error
+  }
 }
 
 export const updateTemplateMeta = async (
diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -19,7 +19,7 @@ export const SyntaxHighlighter: FC<{
       minimap: {
         enabled: false,
       },
-      renderSideBySide: false,
+      renderSideBySide: true,
       readOnly: true,
     },
   }
@@ -31,7 +31,7 @@ export const SyntaxHighlighter: FC<{
   return (
     <div className={styles.wrapper}>
       {hasDiff ? (
-        <DiffEditor original={value} modified={compareWith} {...commonProps} />
+        <DiffEditor original={compareWith} modified={value} {...commonProps} />
       ) : (
         <Editor value={value} {...commonProps} />
       )}
diff --git a/site/src/components/SyntaxHighlighter/coderTheme.ts b/site/src/components/SyntaxHighlighter/coderTheme.ts
@@ -206,7 +206,7 @@ export const coderTheme = (theme: Theme): Record<string, any> => ({
     },
   ],
   colors: {
-    "editor.foreground": hslToHex(theme.palette.text.secondary),
+    "editor.foreground": hslToHex(theme.palette.text.primary),
     "editor.background": hslToHex(theme.palette.background.paper),
     "editor.selectionBackground": hslToHex(theme.palette.action.hover),
     "editor.lineHighlightBackground": hslToHex(
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -40,14 +40,14 @@ const getExtension = (filename: string) => {
 
 const Files: FC<{
   currentFiles: TemplateVersionFiles
-  previousFiles: TemplateVersionFiles
+  previousFiles?: TemplateVersionFiles
   tab: UseTabResult
 }> = ({ currentFiles, previousFiles, tab }) => {
   const styles = useStyles()
   const filenames = Object.keys(currentFiles)
   const selectedFilename = filenames[Number(tab.value)]
   const currentFile = currentFiles[selectedFilename]
-  const previousFile = previousFiles[selectedFilename]
+  const previousFile = previousFiles && previousFiles[selectedFilename]
 
   return (
     <div className={styles.files}>
@@ -56,7 +56,10 @@ const Files: FC<{
           const tabValue = index.toString()
           const extension = getExtension(filename)
           const icon = iconByExtension[extension]
-          const hasDiff = currentFiles[filename] !== previousFiles[filename]
+          const hasDiff =
+            previousFiles &&
+            previousFiles[filename] &&
+            currentFiles[filename] !== previousFiles[filename]
 
           return (
             <button
@@ -112,7 +115,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
         <PageHeaderTitle>{versionName}</PageHeaderTitle>
       </PageHeader>
 
-      {(!currentFiles || !previousFiles) && !error && <Loader />}
+      {!currentFiles && !error && <Loader />}
 
       <Stack spacing={4}>
         {Boolean(error) && <AlertBanner severity="error" error={error} />}
diff --git a/site/src/xServices/templateVersion/templateVersionXService.ts b/site/src/xServices/templateVersion/templateVersionXService.ts
@@ -1,5 +1,6 @@
 import {
   getPreviousTemplateVersionByName,
+  GetPreviousTemplateVersionByNameResponse,
   getTemplateVersionByName,
 } from "api/api"
 import { TemplateVersion } from "api/typesGenerated"
@@ -29,8 +30,8 @@ export const templateVersionMachine = createMachine(
       services: {} as {
         loadVersions: {
           data: {
-            currentVersion: TemplateVersion
-            previousVersion: TemplateVersion
+            currentVersion: GetPreviousTemplateVersionByNameResponse
+            previousVersion: GetPreviousTemplateVersionByNameResponse
           }
         }
         loadFiles: {
@@ -108,23 +109,29 @@ export const templateVersionMachine = createMachine(
         if (!currentVersion) {
           throw new Error("Version is not defined")
         }
-        if (!previousVersion) {
-          throw new Error("Previous version is not defined")
-        }
+        const loadFilesPromises: ReturnType<typeof getTemplateVersionFiles>[] =
+          []
         const allowedExtensions = ["tf", "md"]
         const allowedFiles = ["Dockerfile"]
-        const [currentFiles, previousFiles] = await Promise.all([
+        loadFilesPromises.push(
           getTemplateVersionFiles(
             currentVersion,
             allowedExtensions,
             allowedFiles,
           ),
-          getTemplateVersionFiles(
-            previousVersion,
-            allowedExtensions,
-            allowedFiles,
-          ),
-        ])
+        )
+        if (previousVersion) {
+          loadFilesPromises.push(
+            getTemplateVersionFiles(
+              previousVersion,
+              allowedExtensions,
+              allowedFiles,
+            ),
+          )
+        }
+        const [currentFiles, previousFiles] = await Promise.all(
+          loadFilesPromises,
+        )
         return {
           currentFiles,
           previousFiles,
