Skip to content

Commit 8fdea1e

Browse files
committed
fix(site): fix template editor filetree navigation
1 parent eb78175 commit 8fdea1e

File tree

2 files changed

+16
-24
lines changed

2 files changed

+16
-24
lines changed

site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { type CSSProperties, type FC, useState } from "react";
88
import { css } from "@emotion/react";
99
import { FileTree } from "utils/filetree";
1010
import { DockerIcon } from "components/Icons/DockerIcon";
11+
import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined";
1112

1213
const sortFileTree = (fileTree: FileTree) => (a: string, b: string) => {
1314
const contentA = fileTree[a];
@@ -32,25 +33,26 @@ interface FileTreeViewProps {
3233
onDelete: (path: string) => void;
3334
onRename: (path: string) => void;
3435
fileTree: FileTree;
35-
activePath?: string;
3636
}
3737

3838
export const FileTreeView: FC<FileTreeViewProps> = ({
3939
fileTree,
40-
activePath,
4140
onDelete,
4241
onRename,
4342
onSelect,
4443
}) => {
4544
const [contextMenu, setContextMenu] = useState<ContextMenu | undefined>();
46-
4745
const buildTreeItems = (
4846
filename: string,
4947
content?: FileTree | string,
5048
parentPath?: string,
5149
): JSX.Element => {
5250
const currentPath = parentPath ? `${parentPath}/${filename}` : filename;
53-
let icon: JSX.Element | null = null;
51+
const isFolder = typeof content === "object";
52+
let icon: JSX.Element | null = isFolder ? null : (
53+
<FormatAlignLeftOutlined />
54+
);
55+
5456
if (filename.endsWith(".tf")) {
5557
icon = <FileTypeTerraform />;
5658
}
@@ -69,39 +71,31 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
6971
css={(theme) => css`
7072
overflow: hidden;
7173
user-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-
}
8374
8475
& > .MuiTreeItem-content {
8576
padding: 2px 16px;
8677
color: ${theme.palette.text.secondary};
78+
height: 32px;
8779
8880
& svg {
89-
width: 16px;
90-
height: 16px;
81+
width: 12px;
82+
height: 12px;
83+
color: ${theme.palette.text.secondary};
9184
}
9285
9386
& > .MuiTreeItem-label {
9487
margin-left: 4px;
9588
font-size: 13px;
9689
color: inherit;
9790
}
98-
}
9991
100-
&.active {
101-
& > .MuiTreeItem-content {
92+
&.Mui-selected {
10293
color: ${theme.palette.text.primary};
10394
background: ${theme.colors.gray[14]};
104-
pointer-events: none;
95+
}
96+
97+
&.Mui-focused {
98+
box-shadow: inset 0 0 0 1px ${theme.palette.primary.main};
10599
}
106100
}
107101
@@ -114,7 +108,6 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
114108
}
115109
}
116110
`}
117-
className={currentPath === activePath ? "active" : ""}
118111
onClick={() => {
119112
onSelect(currentPath);
120113
}}
@@ -138,7 +131,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
138131
} as CSSProperties
139132
}
140133
>
141-
{typeof content === "object" ? (
134+
{isFolder ? (
142135
Object.keys(content)
143136
.sort(sortFileTree(content))
144137
.map((filename) => {

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
422422
}
423423
}}
424424
onRename={(file) => setRenameFileOpen(file)}
425-
activePath={activePath}
426425
/>
427426
</div>
428427

0 commit comments

Comments
 (0)