fix(site): fix template editor filetree navigation (coder#11260)

BrunoQuaresma · web-flow · commit e84d89353f40 · 2023-12-18T14:21:24.000-03:00
Close coder#11203
diff --git 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];
@@ -43,14 +44,17 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
   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,39 +73,31 @@ 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 {
               margin-left: 4px;
               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 +110,6 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
             }
           }
         `}
-        className={currentPath === activePath ? "active" : ""}
         onClick={() => {
           onSelect(currentPath);
         }}
@@ -138,7 +133,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
           } as CSSProperties
         }
       >
-        {typeof content === "object" ? (
+        {isFolder ? (
           Object.keys(content)
             .sort(sortFileTree(content))
             .map((filename) => {
@@ -157,6 +152,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       aria-label="Files"
+      defaultSelected={activePath}
     >
       {Object.keys(fileTree)
         .sort(sortFileTree(fileTree))
