Show source code in the template

coder · BrunoQuaresma · Mar 21, 2023 · Mar 20, 2023 · Mar 20, 2023 · Mar 20, 2023
commit 09280114d14a669e75b7eec4010607c960b085df
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
@@ -130,6 +130,17 @@ 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>

diff --git a/site/src/pages/TemplateFilesPage/TemplateFilesPage.tsx b/site/src/pages/TemplateFilesPage/TemplateFilesPage.tsx
@@ -0,0 +1,76 @@
+import { useQuery } from "@tanstack/react-query"
+import { getPreviousTemplateVersionByName } from "api/api"
+import { TemplateVersion } from "api/typesGenerated"
+import { Loader } from "components/Loader/Loader"
+import { TemplateFiles } from "components/TemplateFiles/TemplateFiles"
+import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
+import { useOrganizationId } from "hooks/useOrganizationId"
+import { useTab } from "hooks/useTab"
+import { FC } from "react"
+import { Helmet } from "react-helmet-async"
+import { pageTitle } from "util/page"
+import { getTemplateVersionFiles } from "util/templateVersion"
+
+const fetchTemplateFiles = async (
+  organizationId: string,
+  templateName: string,
+  activeVersion: TemplateVersion,
+) => {
+  const previousVersion = await getPreviousTemplateVersionByName(
+    organizationId,
+    templateName,
+    activeVersion.name,
+  )
+  const loadFilesPromises: ReturnType<typeof getTemplateVersionFiles>[] = []
+  loadFilesPromises.push(getTemplateVersionFiles(activeVersion))
+  if (previousVersion) {
+    loadFilesPromises.push(getTemplateVersionFiles(previousVersion))
+  }
+  const [currentFiles, previousFiles] = await Promise.all(loadFilesPromises)
+  return {
+    currentFiles,
+    previousFiles,
+  }
+}
+
+const useTemplateFiles = (
+  organizationId: string,
+  templateName: string,
+  activeVersion: TemplateVersion,
+) =>
+  useQuery({
+    queryKey: ["templateFiles", templateName],
+    queryFn: () =>
+      fetchTemplateFiles(organizationId, templateName, activeVersion),
+  })
+
+const TemplateFilesPage: FC = () => {
+  const { template, activeVersion } = useTemplateLayoutContext()
+  const orgId = useOrganizationId()
+  const tab = useTab("file", "0")
+  const { data: templateFiles } = useTemplateFiles(
+    orgId,
+    template.name,
+    activeVersion,
+  )
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle(`${template?.name} · Source Code`)}</title>
+      </Helmet>
+
+      {templateFiles ? (
+        <TemplateFiles
+          currentFiles={templateFiles.currentFiles}
+          previousFiles={templateFiles.previousFiles}
+          tab={tab}
+        />
+      ) : (
+        <Loader />
+      )}
+    </>
+  )
+}
+
+export default TemplateFilesPage