From 8fdea1e1fe451e4a4ef1fc4a7e7396f8e5ea5892 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Dec 2023 14:21:54 +0000
Subject: [PATCH 1/2] fix(site): fix template editor filetree navigation

---
 .../FileTreeView.tsx                          | 39 ++++++++-----------
 .../TemplateVersionEditor.tsx                 |  1 -
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
index 5f83f92d924a7..0acf576d2b066 100644
--- a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
@@ -8,6 +8,7 @@ import { type CSSProperties, type FC, useState } from "react";
 import { css } from "@emotion/react";
 import { FileTree } from "utils/filetree";
 import { DockerIcon } from "components/Icons/DockerIcon";
+import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined";
 
 const sortFileTree = (fileTree: FileTree) => (a: string, b: string) => {
   const contentA = fileTree[a];
@@ -32,25 +33,26 @@ interface FileTreeViewProps {
   onDelete: (path: string) => void;
   onRename: (path: string) => void;
   fileTree: FileTree;
-  activePath?: string;
 }
 
 export const FileTreeView: FC<FileTreeViewProps> = ({
   fileTree,
-  activePath,
   onDelete,
   onRename,
   onSelect,
 }) => {
   const [contextMenu, setContextMenu] = useState<ContextMenu | undefined>();
-
   const buildTreeItems = (
     filename: string,
     content?: FileTree | string,
     parentPath?: string,
   ): JSX.Element => {
     const currentPath = parentPath ? `${parentPath}/${filename}` : filename;
-    let icon: JSX.Element | null = null;
+    const isFolder = typeof content === "object";
+    let icon: JSX.Element | null = isFolder ? null : (
+      <FormatAlignLeftOutlined />
+    );
+
     if (filename.endsWith(".tf")) {
       icon = <FileTypeTerraform />;
     }
@@ -69,25 +71,16 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
         css={(theme) => css`
           overflow: hidden;
           user-select: none;
-          height: 32px;
-
-          &:focus:not(.active) > .MuiTreeItem-content {
-            background: ${theme.palette.action.hover};
-            color: ${theme.palette.text.primary};
-          }
-
-          &:not(:focus):not(.active) > .MuiTreeItem-content:hover {
-            background: ${theme.palette.action.hover};
-            color: ${theme.palette.text.primary};
-          }
 
           & > .MuiTreeItem-content {
             padding: 2px 16px;
             color: ${theme.palette.text.secondary};
+            height: 32px;
 
             & svg {
-              width: 16px;
-              height: 16px;
+              width: 12px;
+              height: 12px;
+              color: ${theme.palette.text.secondary};
             }
 
             & > .MuiTreeItem-label {
@@ -95,13 +88,14 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
               font-size: 13px;
               color: inherit;
             }
-          }
 
-          &.active {
-            & > .MuiTreeItem-content {
+            &.Mui-selected {
               color: ${theme.palette.text.primary};
               background: ${theme.colors.gray[14]};
-              pointer-events: none;
+            }
+
+            &.Mui-focused {
+              box-shadow: inset 0 0 0 1px ${theme.palette.primary.main};
             }
           }
 
@@ -114,7 +108,6 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
             }
           }
         `}
-        className={currentPath === activePath ? "active" : ""}
         onClick={() => {
           onSelect(currentPath);
         }}
@@ -138,7 +131,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
           } as CSSProperties
         }
       >
-        {typeof content === "object" ? (
+        {isFolder ? (
           Object.keys(content)
             .sort(sortFileTree(content))
             .map((filename) => {
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 960b81a0e481e..28c0ed217e502 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -422,7 +422,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 }
               }}
               onRename={(file) => setRenameFileOpen(file)}
-              activePath={activePath}
             />
           </div>
 

From b251b5b4be9d3bcbf92cfa72ca44512ac6859436 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Dec 2023 17:01:35 +0000
Subject: [PATCH 2/2] Fix active path

---
 site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx      | 3 +++
 .../pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx  | 1 +
 2 files changed, 4 insertions(+)

diff --git a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
index 0acf576d2b066..c2e753cdb2bc6 100644
--- a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
@@ -33,10 +33,12 @@ interface FileTreeViewProps {
   onDelete: (path: string) => void;
   onRename: (path: string) => void;
   fileTree: FileTree;
+  activePath?: string;
 }
 
 export const FileTreeView: FC<FileTreeViewProps> = ({
   fileTree,
+  activePath,
   onDelete,
   onRename,
   onSelect,
@@ -150,6 +152,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       aria-label="Files"
+      defaultSelected={activePath}
     >
       {Object.keys(fileTree)
         .sort(sortFileTree(fileTree))
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 28c0ed217e502..960b81a0e481e 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -422,6 +422,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 }
               }}
               onRename={(file) => setRenameFileOpen(file)}
+              activePath={activePath}
             />
           </div>