Feb 7, 2024 · Feb 2, 2024 · Feb 2, 2024 · Feb 2, 2024 · Feb 2, 2024 · Feb 2, 2024
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
    activePath: "folder/nested.tf",
  },
 };

 export const GroupEmptyFolders: Story = {
  args: {
    fileTree: {
      "main.tf": "resource aws_instance my_instance {}",
      "variables.tf": "variable my_var {}",
      "outputs.tf": "output my_output {}",
      folder: {
        "other-folder": {
          another: {
            "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
  Label,
 }) => {
  const [contextMenu, setContextMenu] = useState<ContextMenu | undefined>();

  const isFolder = (content?: FileTree | string): content is FileTree =>
    typeof content === "object";

  const buildTreeItems = (
    filename: string,
    content?: FileTree | string,
    parentPath?: string,
  ): JSX.Element => {
    const currentPath = parentPath ? `${parentPath}/${filename}` : filename;
    const isFolder = typeof content === "object";
    let icon: JSX.Element | null = isFolder ? null : (
    // Used to group empty folders in one single label like VSCode does
    const shouldGroupFolderLabel =
      isFolder(content) &&
      Object.keys(content).length === 1 &&
      isFolder(Object.keys(content)[0]);

    let icon: JSX.Element | null = isFolder(content) ? null : (
      <FormatAlignLeftOutlined />
    );

        key={currentPath}
        label={
          Label ? (
            <Label path={currentPath} filename={filename} isFolder={isFolder} />
            <Label
              path={currentPath}
              filename={filename}
              isFolder={isFolder(content)}
            />
          ) : (
            filename
          )
          } as CSSProperties
        }
      >
        {isFolder &&
        {isFolder(content) &&
          Object.keys(content)
            .sort(sortFileTree(content))
            .map((filename) => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,3 +49,20 @@ export const NestedOpen: Story = {
		activePath: "folder/nested.tf",
		},
		};

		export const GroupEmptyFolders: Story = {
		args: {
		fileTree: {
		"main.tf": "resource aws_instance my_instance {}",
		"variables.tf": "variable my_var {}",
		"outputs.tf": "output my_output {}",
		folder: {
		"other-folder": {
		another: {
		"nested.tf": "resource aws_instance my_instance {}",
		},
		},
		},
		},
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,14 +46,23 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
		Label,
		}) => {
		const [contextMenu, setContextMenu] = useState<ContextMenu \| undefined>();

		const isFolder = (content?: FileTree \| string): content is FileTree =>
		typeof content === "object";

		const buildTreeItems = (
		filename: string,
		content?: FileTree \| string,
		parentPath?: string,
		): JSX.Element => {
		const currentPath = parentPath ? `${parentPath}/${filename}` : filename;
		const isFolder = typeof content === "object";
		let icon: JSX.Element \| null = isFolder ? null : (
		// Used to group empty folders in one single label like VSCode does
		const shouldGroupFolderLabel =
		isFolder(content) &&
		Object.keys(content).length === 1 &&
		isFolder(Object.keys(content)[0]);

		let icon: JSX.Element \| null = isFolder(content) ? null : (
		<FormatAlignLeftOutlined />
		);

Expand All		@@ -73,7 +82,11 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
		key={currentPath}
		label={
		Label ? (
		<Label path={currentPath} filename={filename} isFolder={isFolder} />
		<Label
		path={currentPath}
		filename={filename}
		isFolder={isFolder(content)}
		/>
		) : (
		filename
		)
Expand DownExpand Up		@@ -143,7 +156,7 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
		} as CSSProperties
		}
		>
		{isFolder &&
		{isFolder(content) &&
		Object.keys(content)
		.sort(sortFileTree(content))
		.map((filename) => {
Expand Down