synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-08-07 05:49:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Close https://github.com/coder/coder/issues/11203
This commit is contained in:
Bruno Quaresma
2023-12-18 14:21:24 -03:00
committed by GitHub
parent ff61475239
commit e84d89353f
1 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
View File

@@ -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,25 +73,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 +90,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 +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))