@@ -8,6 +8,7 @@ import { type CSSProperties, type FC, useState } from "react";
88import { css } from "@emotion/react" ;
99import { FileTree } from "utils/filetree" ;
1010import { DockerIcon } from "components/Icons/DockerIcon" ;
11+ import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined" ;
1112
1213const sortFileTree = ( fileTree :FileTree ) => ( a :string , b :string ) => {
1314const contentA = fileTree [ a ] ;
@@ -43,14 +44,17 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
4344 onSelect,
4445} ) => {
4546const [ contextMenu , setContextMenu ] = useState < ContextMenu | undefined > ( ) ;
46-
4747const buildTreeItems = (
4848filename :string ,
4949content ?:FileTree | string ,
5050parentPath ?:string ,
5151) :JSX . Element => {
5252const currentPath = parentPath ?`${ parentPath } ${ filename } :filename ;
53- let icon :JSX . Element | null = null ;
53+ const isFolder = typeof content === "object" ;
54+ let icon :JSX . Element | null = isFolder ?null :(
55+ < FormatAlignLeftOutlined />
56+ ) ;
57+
5458if ( filename . endsWith ( ".tf" ) ) {
5559icon = < FileTypeTerraform /> ;
5660}
@@ -69,39 +73,31 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
6973css = { ( theme ) => css `
7074overflow : hidden;
7175user-select : none;
72- height : 32px ;
73-
74- & : focus : not (.active )> .MuiTreeItem-content {
75- background : ${ theme . palette . action . hover }
76- color : ${ theme . palette . text . primary }
77- }
78-
79- & : not (: focus ): not (.active )> .MuiTreeItem-content : hover {
80- background : ${ theme . palette . action . hover }
81- color : ${ theme . palette . text . primary }
82- }
8376
8477& > .MuiTreeItem-content {
8578padding : 2px 16px ;
8679color : ${ theme . palette . text . secondary }
80+ height : 32px ;
8781
8882& svg {
89- width : 16px ;
90- height : 16px ;
83+ width : 12px ;
84+ height : 12px ;
85+ color : ${ theme . palette . text . secondary }
9186 }
9287
9388& > .MuiTreeItem-label {
9489margin-left : 4px ;
9590font-size : 13px ;
9691color : inherit;
9792 }
98- }
9993
100- & .active {
101- & > .MuiTreeItem-content {
94+ & .Mui-selected {
10295color : ${ theme . palette . text . primary }
10396background : ${ theme . colors . gray [ 14 ] }
104- pointer-events : none;
97+ }
98+
99+ & .Mui-focused {
100+ box-shadow : inset0 0 0 1px ${ theme . palette . primary . main }
105101 }
106102 }
107103
@@ -114,7 +110,6 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
114110 }
115111 }
116112 ` }
117- className = { currentPath === activePath ?"active" :"" }
118113onClick = { ( ) => {
119114onSelect ( currentPath ) ;
120115} }
@@ -138,7 +133,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
138133} as CSSProperties
139134}
140135>
141- { typeof content === "object" ?(
136+ { isFolder ?(
142137Object . keys ( content )
143138. sort ( sortFileTree ( content ) )
144139. map ( ( filename ) => {
@@ -157,6 +152,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
157152defaultCollapseIcon = { < ExpandMoreIcon /> }
158153defaultExpandIcon = { < ChevronRightIcon /> }
159154aria-label = "Files"
155+ defaultSelected = { activePath }
160156>
161157{ Object . keys ( fileTree )
162158. sort ( sortFileTree ( fileTree ) )