coder · BrunoQuaresma · Mar 21, 2023 · Mar 20, 2023 · Mar 20, 2023 · Mar 20, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -125,10 +125,12 @@ const TemplateVariablesPage = lazy(
 const WorkspaceSettingsPage = lazy(
   () => import("./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"),
 )
-
 const CreateTokenPage = lazy(
   () => import("./pages/CreateTokenPage/CreateTokenPage"),
 )
+const TemplateFilesPage = lazy(
+  () => import("./pages/TemplateFilesPage/TemplateFilesPage"),
+)
 
 export const AppRouter: FC = () => {
   return (
@@ -162,6 +164,7 @@ export const AppRouter: FC = () => {
                       path="permissions"
                       element={<TemplatePermissionsPage />}
                     />
+                    <Route path="files" element={<TemplateFilesPage />} />
                   </Route>
 
                   <Route path="workspace" element={<CreateWorkspacePage />} />

diff --git a/site/src/components/TemplateFiles/TemplateFiles.tsx b/site/src/components/TemplateFiles/TemplateFiles.tsx
@@ -0,0 +1,150 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { DockerIcon } from "components/Icons/DockerIcon"
+import { MarkdownIcon } from "components/Icons/MarkdownIcon"
+import { TerraformIcon } from "components/Icons/TerraformIcon"
+import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter"
+import { UseTabResult } from "hooks/useTab"
+import { FC } from "react"
+import { combineClasses } from "util/combineClasses"
+import { TemplateVersionFiles } from "util/templateVersion"
+
+const iconByExtension: Record<string, JSX.Element> = {
+  tf: <TerraformIcon />,
+  md: <MarkdownIcon />,
+  mkd: <MarkdownIcon />,
+  Dockerfile: <DockerIcon />,
+}
+
+const getExtension = (filename: string) => {
+  if (filename.includes(".")) {
+    const [_, extension] = filename.split(".")
+    return extension
+  }
+
+  return filename
+}
+
+const languageByExtension: Record<string, string> = {
+  tf: "hcl",
+  md: "markdown",
+  mkd: "markdown",
+  Dockerfile: "dockerfile",
+}
+
+export const TemplateFiles: FC<{
+  currentFiles: 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 && previousFiles[selectedFilename]
+
+  return (
+    <div className={styles.files}>
+      <div className={styles.tabs}>
+        {filenames.map((filename, index) => {
+          const tabValue = index.toString()
+          const extension = getExtension(filename)
+          const icon = iconByExtension[extension]
+          const hasDiff =
+            previousFiles &&
+            previousFiles[filename] &&
+            currentFiles[filename] !== previousFiles[filename]
+
+          return (
+            <button
+              className={combineClasses({
+                [styles.tab]: true,
+                [styles.tabActive]: tabValue === tab.value,
+              })}
+              onClick={() => {
+                tab.set(tabValue)
+              }}
+              key={filename}
+            >
+              {icon}
+              {filename}
+              {hasDiff && <div className={styles.tabDiff} />}
+            </button>
+          )
+        })}
+      </div>
+
+      <SyntaxHighlighter
+        value={currentFile}
+        compareWith={previousFile}
+        language={languageByExtension[getExtension(selectedFilename)]}
+      />
+    </div>
+  )
+}
+const useStyles = makeStyles((theme) => ({
+  tabs: {
+    display: "flex",
+    alignItems: "baseline",
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    gap: 1,
+  },
+
+  tab: {
+    background: "transparent",
+    border: 0,
+    padding: theme.spacing(0, 3),
+    display: "flex",
+    alignItems: "center",
+    height: theme.spacing(6),
+    opacity: 0.85,
+    cursor: "pointer",
+    gap: theme.spacing(0.5),
+    position: "relative",
+
+    "& svg": {
+      width: 22,
+      maxHeight: 16,
+    },
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+
+  tabActive: {
+    opacity: 1,
+    background: theme.palette.action.hover,
+
+    "&:after": {
+      content: '""',
+      display: "block",
+      height: 1,
+      width: "100%",
+      bottom: 0,
+      left: 0,
+      backgroundColor: theme.palette.secondary.dark,
+      position: "absolute",
+    },
+  },
+
+  tabDiff: {
+    height: 6,
+    width: 6,
+    backgroundColor: theme.palette.warning.light,
+    borderRadius: "100%",
+    marginLeft: theme.spacing(0.5),
+  },
+
+  codeWrapper: {
+    background: theme.palette.background.paperLight,
+  },
+
+  files: {
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
+  },
+
+  prism: {
+    borderRadius: 0,
+  },
+}))
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -1,36 +1,56 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { useMachine } from "@xstate/react"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { createContext, FC, Suspense, useContext } from "react"
 import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom"
 import { combineClasses } from "util/combineClasses"
-import {
-  TemplateContext,
-  templateMachine,
-} from "xServices/template/templateXService"
 import { Margins } from "components/Margins/Margins"
 import { Stack } from "components/Stack/Stack"
-import { Permissions } from "xServices/auth/authXService"
 import { Loader } from "components/Loader/Loader"
-import { usePermissions } from "hooks/usePermissions"
 import { TemplatePageHeader } from "./TemplatePageHeader"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import {
+  checkAuthorization,
+  getTemplateByName,
+  getTemplateVersion,
+} from "api/api"
+import { useQuery } from "@tanstack/react-query"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+
+const templatePermissions = (templateId: string) => ({
+  canUpdateTemplate: {
+    object: {
+      resource_type: "template",
+      resource_id: templateId,
+    },
+    action: "update",
+  },
+})
 
-const useTemplateName = () => {
-  const { template } = useParams()
+const fetchTemplate = async (orgId: string, templateName: string) => {
+  const template = await getTemplateByName(orgId, templateName)
+  const [activeVersion, permissions] = await Promise.all([
+    getTemplateVersion(template.active_version_id),
+    checkAuthorization({
+      checks: templatePermissions(template.id),
+    }),
+  ])
 
-  if (!template) {
-    throw new Error("No template found in the URL")
+  return {
+    template,
+    activeVersion,
+    permissions,
   }
-
-  return template
 }
 
-type TemplateLayoutContextValue = {
-  context: TemplateContext
-  permissions?: Permissions
+const useTemplateData = (orgId: string, templateName: string) => {
+  return useQuery({
+    queryKey: ["template", templateName],
+    queryFn: () => fetchTemplate(orgId, templateName),
+  })
 }
 
+type TemplateLayoutContextValue = Awaited<ReturnType<typeof fetchTemplate>>
+
 const TemplateLayoutContext = createContext<
   TemplateLayoutContextValue | undefined
 >(undefined)
@@ -50,38 +70,30 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
 }) => {
   const navigate = useNavigate()
   const styles = useStyles()
-  const organizationId = useOrganizationId()
-  const templateName = useTemplateName()
-  const [templateState, _] = useMachine(templateMachine, {
-    context: {
-      templateName,
-      organizationId,
-    },
-  })
-  const {
-    template,
-    permissions: templatePermissions,
-    getTemplateError,
-  } = templateState.context
-  const permissions = usePermissions()
+  const orgId = useOrganizationId()
+  const { template } = useParams() as { template: string }
+  const templateData = useTemplateData(orgId, template)
+  const dashboard = useDashboard()
 
-  if (getTemplateError) {
+  if (templateData.error) {
     return (
       <div className={styles.error}>
-        <AlertBanner severity="error" error={getTemplateError} />
+        <AlertBanner severity="error" error={templateData.error} />
       </div>
     )
   }
 
-  if (!template || !templatePermissions) {
+  if (templateData.isLoading || !templateData.data) {
     return <Loader />
   }
 
   return (
     <>
       <TemplatePageHeader
-        template={template}
-        permissions={templatePermissions}
+        template={templateData.data.template}
+        activeVersion={templateData.data.activeVersion}
+        permissions={templateData.data.permissions}
+        canEditFiles={dashboard.experiments.includes("template_editor")}
         onDeleteTemplate={() => {
           navigate("/templates")
         }}
@@ -92,7 +104,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
           <Stack direction="row" spacing={0.25}>
             <NavLink
               end
-              to={`/templates/${template.name}`}
+              to={`/templates/${template}`}
               className={({ isActive }) =>
                 combineClasses([
                   styles.tabItem,
@@ -103,7 +115,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
               Summary
             </NavLink>
             <NavLink
-              to={`/templates/${template.name}/permissions`}
+              to={`/templates/${template}/permissions`}
               className={({ isActive }) =>
                 combineClasses([
                   styles.tabItem,
@@ -113,14 +125,23 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
             >
               Permissions
             </NavLink>
+            <NavLink
+              to={`/templates/${template}/files`}
+              className={({ isActive }) =>
+                combineClasses([
+                  styles.tabItem,
+                  isActive ? styles.tabItemActive : undefined,
+                ])
+              }
+            >
+              Source Code
+            </NavLink>
           </Stack>
         </Margins>
       </div>
 
       <Margins>
-        <TemplateLayoutContext.Provider
-          value={{ permissions, context: templateState.context }}
-        >
+        <TemplateLayoutContext.Provider value={templateData.data}>
           <Suspense fallback={<Loader />}>{children}</Suspense>
         </TemplateLayoutContext.Provider>
       </Margins>

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import { MockTemplate } from "testHelpers/entities"
+import { MockTemplate, MockTemplateVersion } from "testHelpers/entities"
 import {
   TemplatePageHeader,
   TemplatePageHeaderProps,
@@ -12,6 +12,9 @@ export default {
     template: {
       defaultValue: MockTemplate,
     },
+    activeVersion: {
+      defaultValue: MockTemplateVersion,
+    },
     permissions: {
       defaultValue: {
         canUpdateTemplate: true,