fix(site): fix template editor filetree navigation

BrunoQuaresma · BrunoQuaresma · commit 8fdea1e1fe45 · 2023-12-18T14:21:54.000Z
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];
@@ -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,39 +71,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 +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
@@ -422,7 +422,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 }
               }}
               onRename={(file) => setRenameFileOpen(file)}
-              activePath={activePath}
             />
           </div>
 

Original file line number	Diff line number	Diff line change
`@@ -422,7 +422,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({`
`422`	`422`	`}`
`423`	`423`	`}}`
`424`	`424`	`onRename={(file) => setRenameFileOpen(file)}`
`425`		`- activePath={activePath}`
`426`	`425`	`/>`
`427`	`426`	`</div>`
`428`	`427`