Add edit button

BrunoQuaresma · BrunoQuaresma · commit 0c2ffc93d09e · 2024-02-05T17:31:22.000Z
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -6,6 +6,8 @@ import RadioButtonCheckedOutlined from "@mui/icons-material/RadioButtonCheckedOu
 import { FileTree } from "utils/filetree";
 import set from "lodash/fp/set";
 import { TemplateFileTree } from "./TemplateFileTree";
+import { Link } from "react-router-dom";
+import EditOutlined from "@mui/icons-material/EditOutlined";
 
 const languageByExtension: Record<string, string> = {
   tf: "hcl",
@@ -24,11 +26,15 @@ interface TemplateFilesProps {
    * Files used to compare with current files
    */
   baseFiles?: TemplateVersionFiles;
+  versionName: string;
+  templateName: string;
 }
 
 export const TemplateFiles: FC<TemplateFilesProps> = ({
   currentFiles,
   baseFiles,
+  versionName,
+  templateName,
 }) => {
   const filenames = Object.keys(currentFiles);
   const theme = useTheme();
@@ -48,10 +54,6 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
     [baseFiles, currentFiles],
   );
 
-  const filesWithDiff = filenames.filter(
-    (filename) => fileInfo(filename).hasDiff && false,
-  );
-
   const fileTree: FileTree = useMemo(() => {
     let tree: FileTree = {};
     for (const filename of filenames) {
@@ -63,58 +65,6 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 
   return (
     <div>
-      {filesWithDiff.length > 0 && (
-        <div
-          css={{
-            display: "flex",
-            alignItems: "center",
-            gap: 16,
-            marginBottom: 24,
-          }}
-        >
-          <span
-            css={(theme) => ({
-              fontSize: 13,
-              fontWeight: 500,
-              color: theme.roles.warning.fill.outline,
-            })}
-          >
-            {filesWithDiff.length} files have changes
-          </span>
-          <ul
-            css={{
-              listStyle: "none",
-              margin: 0,
-              padding: 0,
-              display: "flex",
-              alignItems: "center",
-              gap: 4,
-            }}
-          >
-            {filesWithDiff.map((filename) => (
-              <li key={filename}>
-                <a
-                  href={`#${encodeURIComponent(filename)}`}
-                  css={{
-                    textDecoration: "none",
-                    color: theme.roles.warning.fill.text,
-                    fontSize: 13,
-                    fontWeight: 500,
-                    backgroundColor: theme.roles.warning.background,
-                    display: "inline-block",
-                    padding: "0 8px",
-                    borderRadius: 4,
-                    border: `1px solid ${theme.roles.warning.fill.solid}`,
-                    lineHeight: "1.6",
-                  }}
-                >
-                  {filename}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
       <div css={{ display: "flex", alignItems: "flex-start", gap: 32 }}>
         <div css={styles.sidebar}>
           <TemplateFileTree
@@ -162,6 +112,27 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
                         }}
                       />
                     )}
+
+                    <div css={{ marginLeft: "auto" }}>
+                      <Link
+                        to={`/templates/${templateName}/versions/${versionName}/edit?path=${filename}`}
+                        css={{
+                          display: "flex",
+                          gap: 4,
+                          alignItems: "center",
+                          fontSize: 14,
+                          color: theme.palette.text.secondary,
+                          textDecoration: "none",
+
+                          "&:hover": {
+                            color: theme.palette.text.primary,
+                          },
+                        }}
+                      >
+                        <EditOutlined css={{ fontSize: "inherit" }} />
+                        Edit
+                      </Link>
+                    </div>
                   </header>
                   <SyntaxHighlighter
                     language={
diff --git a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
@@ -29,7 +29,12 @@ const TemplateFilesPage: FC = () => {
       </Helmet>
 
       {previousFiles && currentFiles ? (
-        <TemplateFiles currentFiles={currentFiles} baseFiles={previousFiles} />
+        <TemplateFiles
+          currentFiles={currentFiles}
+          baseFiles={previousFiles}
+          versionName={activeVersion.name}
+          templateName={template.name}
+        />
       ) : (
         <Loader />
       )}
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -97,7 +97,12 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
               />
             </Stats>
 
-            <TemplateFiles currentFiles={currentFiles} baseFiles={baseFiles} />
+            <TemplateFiles
+              currentFiles={currentFiles}
+              baseFiles={baseFiles}
+              templateName={templateName}
+              versionName={versionName}
+            />
           </>
         )}
       </Stack>
