Keep user navigation from URL

coder · BrunoQuaresma · Feb 7, 2024 · Feb 2, 2024 · Feb 2, 2024 · Feb 2, 2024
commit 4403a183cce24e7e4c1abbe565a688848a9de00d
@@ -151,6 +151,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       aria-label="Files"
+      defaultExpanded={activePath ? expandablePaths(activePath) : []}
       defaultSelected={activePath}
     >
       {Object.keys(fileTree)
@@ -234,3 +235,12 @@ const FileTypeMarkdown: FC = () => (
     <polygon points="22.955 20.636 18.864 16.136 21.591 16.136 21.591 11.364 24.318 11.364 24.318 16.136 27.045 16.136 22.955 20.636" />
   </svg>
 );
+
+const expandablePaths = (path: string) => {
+  const paths = path.split("/");
+  const result = [];
+  for (let i = 1; i < paths.length; i++) {
+    result.push(paths.slice(0, i).join("/"));
+  }
+  return result;
+};
@@ -30,7 +30,6 @@ import {
   isFolder,
   moveFile,
   removeFile,
-  traverse,
   updateFile,
 } from "utils/filetree";
 import {
@@ -83,20 +82,10 @@ export interface TemplateVersionEditorProps {
   defaultTab?: Tab;
   provisionerTags: Record<string, string>;
   onUpdateProvisionerTags: (tags: Record<string, string>) => void;
+  activePath: string | undefined;
+  onActivePathChange: (path: string | undefined) => void;
 }
 
-const findInitialFile = (fileTree: FileTree): string | undefined => {
-  let initialFile: string | undefined;
-
-  traverse(fileTree, (content, filename, path) => {
-    if (filename.endsWith(".tf")) {
-      initialFile = path;
-    }
-  });
-
-  return initialFile;
-};
-
 export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   disablePreview,
   disableUpdate,
@@ -121,6 +110,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   defaultTab,
   provisionerTags,
   onUpdateProvisionerTags,
+  activePath,
+  onActivePathChange,
 }) => {
   const theme = useTheme();
   const [selectedTab, setSelectedTab] = useState<Tab>(defaultTab);
@@ -129,9 +120,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   const [deleteFileOpen, setDeleteFileOpen] = useState<string>();
   const [renameFileOpen, setRenameFileOpen] = useState<string>();
   const [dirty, setDirty] = useState(false);
-  const [activePath, setActivePath] = useState<string | undefined>(() =>
-    findInitialFile(fileTree),
-  );
 
   const triggerPreview = useCallback(() => {
     onPreview(fileTree);
@@ -382,7 +370,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 checkExists={(path) => existsFile(path, fileTree)}
                 onConfirm={(path) => {
                   setFileTree((fileTree) => createFile(path, fileTree, ""));
-                  setActivePath(path);
+                  onActivePathChange(path);
                   setCreateFileOpen(false);
                   setDirty(true);
                 }}
@@ -397,7 +385,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                   );
                   setDeleteFileOpen(undefined);
                   if (activePath === deleteFileOpen) {
-                    setActivePath(undefined);
+                    onActivePathChange(undefined);
                   }
                   setDirty(true);
                 }}
@@ -420,7 +408,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                   setFileTree((fileTree) =>
                     moveFile(renameFileOpen, newPath, fileTree),
                   );
-                  setActivePath(newPath);
+                  onActivePathChange(newPath);
                   setRenameFileOpen(undefined);
                   setDirty(true);
                 }}
@@ -431,7 +419,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               onDelete={(file) => setDeleteFileOpen(file)}
               onSelect={(filePath) => {
                 if (!isFolder(filePath, fileTree)) {
-                  setActivePath(filePath);
+                  onActivePathChange(filePath);
                 }
               }}
               onRename={(file) => setRenameFileOpen(file)}

@@ -1,7 +1,7 @@
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { TemplateVersionEditor } from "./TemplateVersionEditor";
 import { useOrganizationId } from "contexts/auth/useOrganizationId";
 import { pageTitle } from "utils/page";
@@ -76,6 +76,20 @@ export const TemplateVersionEditorPage: FC = () => {
   const [lastSuccessfulPublishedVersion, setLastSuccessfulPublishedVersion] =
     useState<TemplateVersion>();
 
+  // File navigation
+  const [searchParams, setSearchParams] = useSearchParams();
+  // It can be undefined when a selected file is deleted
+  const activePath: string | undefined =
+    searchParams.get("path") ?? findInitialFile(fileTree ?? {});
+  const onActivePathChange = (path: string | undefined) => {
+    if (path) {
+      searchParams.set("path", path);
+    } else {
+      searchParams.delete("path");
+    }
+    setSearchParams(searchParams);
+  };
+
   const navigateToVersion = (version: TemplateVersion) => {
     return navigate(
       `/templates/${templateName}/versions/${version.name}/edit`,
@@ -122,6 +136,8 @@ export const TemplateVersionEditorPage: FC = () => {
 
       {templateQuery.data && templateVersionQuery.data && fileTree ? (
         <TemplateVersionEditor
+          activePath={activePath}
+          onActivePathChange={onActivePathChange}
           template={templateQuery.data}
           templateVersion={templateVersionQuery.data}
           defaultFileTree={fileTree}
@@ -372,4 +388,16 @@ const publishVersion = async (options: {
   return Promise.all(publishActions);
 };
 
+const findInitialFile = (fileTree: FileTree): string | undefined => {
+  let initialFile: string | undefined;
+
+  traverse(fileTree, (content, filename, path) => {
+    if (filename.endsWith(".tf")) {
+      initialFile = path;
+    }
+  });
+
+  return initialFile;
+};
+
 export default TemplateVersionEditorPage;