From 2b866e0883d170480ea669da8f6efcdfeeb4c38a Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 28 Mar 2023 18:34:28 +0000
Subject: [PATCH] feat(sitte): Show main.tf file first on template files page

---
 site/src/hooks/useTab.ts                      |  2 +-
 .../TemplateFilesPage/TemplateFilesPage.tsx   | 31 ++++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/site/src/hooks/useTab.ts b/site/src/hooks/useTab.ts
index e1dee44a5c878..846a98c2f0ef4 100644
--- a/site/src/hooks/useTab.ts
+++ b/site/src/hooks/useTab.ts
@@ -13,7 +13,7 @@ export const useTab = (tabKey: string, defaultValue: string): UseTabResult => {
     value,
     set: (value: string) => {
       searchParams.set(tabKey, value)
-      setSearchParams(searchParams)
+      setSearchParams(searchParams, { replace: true })
     },
   }
 }
diff --git a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
index f5af6182a5734..88b0729aa5a03 100644
--- a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
@@ -6,10 +6,13 @@ import { TemplateFiles } from "components/TemplateFiles/TemplateFiles"
 import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { useTab } from "hooks/useTab"
-import { FC } from "react"
+import { FC, useEffect } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
-import { getTemplateVersionFiles } from "util/templateVersion"
+import {
+  getTemplateVersionFiles,
+  TemplateVersionFiles,
+} from "util/templateVersion"
 
 const fetchTemplateFiles = async (
   organizationId: string,
@@ -44,15 +47,35 @@ const useTemplateFiles = (
       fetchTemplateFiles(organizationId, templateName, activeVersion),
   })
 
+const useFileTab = (templateFiles: TemplateVersionFiles | undefined) => {
+  // Tabs The default tab is the tab that has main.tf but until we loads the
+  // files and check if main.tf exists we don't know which tab is the default
+  // one so we just use empty string
+  const tab = useTab("file", "")
+  const isLoaded = tab.value !== ""
+  useEffect(() => {
+    if (templateFiles && !isLoaded) {
+      const terraformFileIndex = Object.keys(templateFiles).indexOf("main.tf")
+      // If main.tf exists use the index if not just use the first tab
+      tab.set(terraformFileIndex !== -1 ? terraformFileIndex.toString() : "0")
+    }
+  }, [isLoaded, tab, templateFiles])
+
+  return {
+    ...tab,
+    isLoaded,
+  }
+}
+
 const TemplateFilesPage: FC = () => {
   const { template, activeVersion } = useTemplateLayoutContext()
   const orgId = useOrganizationId()
-  const tab = useTab("file", "0")
   const { data: templateFiles } = useTemplateFiles(
     orgId,
     template.name,
     activeVersion,
   )
+  const tab = useFileTab(templateFiles?.currentFiles)
 
   return (
     <>
@@ -60,7 +83,7 @@ const TemplateFilesPage: FC = () => {
         <title>{pageTitle(`${template?.name} · Source Code`)}</title>
       </Helmet>
 
-      {templateFiles ? (
+      {templateFiles && tab.isLoaded ? (
         <TemplateFiles
           currentFiles={templateFiles.currentFiles}
           previousFiles={templateFiles.previousFiles}