From c0cd3386e09fdd2ee7f538b1b189a756a2427a3c Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Mon, 8 Dec 2025 19:00:49 +0000 Subject: [PATCH 1/3] feat(site): add icons for .sh, .json, and .yaml files in template editor Added specific icons for common file types in the template file tree: - .sh files: TerminalIcon (terminal/shell scripts) - .json files: BracesIcon (JSON data files) - .yaml/.yml files: FileCodeIcon (YAML configuration files) These icons help users quickly identify file types at a glance. --- .../modules/templates/TemplateFiles/TemplateFileTree.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx index c4c0c7e041d46..c70059348346b 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx @@ -4,8 +4,11 @@ import MenuItem from "@mui/material/MenuItem"; import { SimpleTreeView, TreeItem } from "@mui/x-tree-view"; import { DockerIcon } from "components/Icons/DockerIcon"; import { + BracesIcon, ChevronDownIcon, ChevronRightIcon, + FileCodeIcon, + TerminalIcon, TextAlignStartIcon, } from "lucide-react"; import { @@ -99,6 +102,12 @@ export const TemplateFileTree: FC = ({ icon = FileTypeMarkdown; } else if (filename.endsWith("Dockerfile")) { icon = DockerIcon; + } else if (filename.endsWith(".sh")) { + icon = TerminalIcon; + } else if (filename.endsWith(".json")) { + icon = BracesIcon; + } else if (filename.endsWith(".yaml") || filename.endsWith(".yml")) { + icon = FileCodeIcon; } return ( From 4dfbbfeca9bbf30d494d6189a2a2b32af6d0ef9c Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Mon, 8 Dec 2025 19:22:22 +0000 Subject: [PATCH 2/3] docs(storybook): update example story to showcase new file type icons Updated the main example story to include files with the new icons: - Shell scripts (.sh) - terminal icon - JSON files (.json) - braces icon - YAML files (.yml) - file code icon - Markdown (.md) and Dockerfile icons This shows all icon types in a single realistic file tree example. --- .../templates/TemplateFiles/TemplateFileTree.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx index 45191a2320a3f..33541c5ab3448 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx @@ -8,8 +8,14 @@ const fileTree: FileTree = { "main.tf": "resource aws_instance my_instance {}", "variables.tf": "variable my_var {}", "outputs.tf": "output my_output {}", + "README.md": "# Example\n\nThis is an example.", + "install.sh": "#!/bin/bash\necho 'Installing...'", + "config.json": '{"name": "example"}', + "docker-compose.yml": "version: '3'", + Dockerfile: "FROM ubuntu:latest", folder: { "nested.tf": "resource aws_instance my_instance {}", + "setup.sh": "#!/bin/bash\necho 'Setting up...'", }, }; From f1ea6b3094ecc4618b5965ec5eb898c6446cd842 Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Wed, 10 Dec 2025 08:31:59 +0000 Subject: [PATCH 3/3] fmt --- site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx index 0b06025a18bbd..929b78113533d 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx @@ -10,7 +10,7 @@ import { FileCodeIcon, FileIcon, FolderIcon, - TerminalIcon, + TerminalIcon, } from "lucide-react"; import { type CSSProperties,