diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx index 684272503d01a..999df793105a3 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx @@ -27,6 +27,7 @@ import type { MonacoEditorProps } from "./MonacoEditor"; import { Language } from "./PublishTemplateVersionDialog"; import TemplateVersionEditorPage, { findEntrypointFile, + getActivePath, } from "./TemplateVersionEditorPage"; const { API } = apiModule; @@ -413,6 +414,34 @@ function renderEditorPage(queryClient: QueryClient) { ); } +describe("Get active path", () => { + it("empty path", () => { + const ft: FileTree = { + "main.tf": "foobar", + }; + const searchParams = new URLSearchParams({ path: "" }); + const activePath = getActivePath(searchParams, ft); + expect(activePath).toBe("main.tf"); + }); + it("invalid path", () => { + const ft: FileTree = { + "main.tf": "foobar", + }; + const searchParams = new URLSearchParams({ path: "foobaz" }); + const activePath = getActivePath(searchParams, ft); + expect(activePath).toBe("main.tf"); + }); + it("valid path", () => { + const ft: FileTree = { + "main.tf": "foobar", + "foobar.tf": "foobaz", + }; + const searchParams = new URLSearchParams({ path: "foobar.tf" }); + const activePath = getActivePath(searchParams, ft); + expect(activePath).toBe("foobar.tf"); + }); +}); + describe("Find entrypoint", () => { it("empty tree", () => { const ft: FileTree = {}; diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx index 0158c872aed50..0339d6df506f6 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx @@ -20,7 +20,7 @@ import { type FC, useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useNavigate, useParams, useSearchParams } from "react-router-dom"; -import { type FileTree, traverse } from "utils/filetree"; +import { type FileTree, existsFile, traverse } from "utils/filetree"; import { pageTitle } from "utils/page"; import { TarReader, TarWriter } from "utils/tar"; import { createTemplateVersionFileTree } from "utils/templateVersion"; @@ -88,9 +88,8 @@ export const TemplateVersionEditorPage: FC = () => { useState(); // File navigation - // It can be undefined when a selected file is deleted - const activePath: string | undefined = - searchParams.get("path") ?? findEntrypointFile(fileTree ?? {}); + const activePath = getActivePath(searchParams, fileTree || {}); + const onActivePathChange = (path: string | undefined) => { if (path) { searchParams.set("path", path); @@ -392,4 +391,15 @@ export const findEntrypointFile = (fileTree: FileTree): string | undefined => { return initialFile; }; +export const getActivePath = ( + searchParams: URLSearchParams, + fileTree: FileTree, +): string | undefined => { + const selectedPath = searchParams.get("path"); + if (selectedPath && existsFile(selectedPath, fileTree)) { + return selectedPath; + } + return findEntrypointFile(fileTree); +}; + export default TemplateVersionEditorPage; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy