feat(site): add icons for .sh, .json, and .y[a]ml files in template editor (#21171)

matifali · web-flow · commit ed3bb76c9bba · 2025-12-10T21:19:25.000+01:00
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) <img width="260" height="290" alt="image" src="https://github.com/user-attachments/assets/a470f4bc-fc2c-4e2d-8067-a9fbbfe32e42" /> These icons help users quickly identify file types at a glance in the template editor.
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
@@ -10,7 +10,9 @@ const fileTree: FileTree = {
 	"outputs.tf": "output my_output {}",
 	"README.md": "# Example\n\nThis is an example.",
 	"install.sh": "#!/bin/bash\necho 'Installing...'",
-	"config.txt": "key=value",
+	"config.json": '{"name": "example"}',
+	"docker-compose.yml": "version: '3'",
+	Dockerfile: "FROM ubuntu:latest",
 	"app.py": "print('Hello')",
 	folder: {
 		"nested.tf": "resource aws_instance my_instance {}",
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -4,10 +4,13 @@ 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,
 	FileIcon,
 	FolderIcon,
+	TerminalIcon,
 } from "lucide-react";
 import {
 	type CSSProperties,
@@ -100,6 +103,12 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
 			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;
 		} else {
 			// Default icon for files without a specific icon.
 			icon = FileIcon;
