diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx index 1a1b3056a4..c775f691e6 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx @@ -29,8 +29,11 @@ const CreateTemplatePage: FC = () => { onCreateVersion: setTemplateVersion, onTemplateVersionChanges: setTemplateVersion, }); + // Ephemeral router state tells TemplateFilesPage to show a + // one-time banner with agent skill and docs links. navigate( `${getLink(linkToTemplate(options.organization, template.name))}/files`, + { state: { justCreated: true } }, ); }, onOpenBuildLogsDrawer: () => setIsBuildLogsOpen(true), diff --git a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx index 0189a523c9..e393785674 100644 --- a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx +++ b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx @@ -1,19 +1,33 @@ -import type { FC } from "react"; +import { ExternalLinkIcon } from "lucide-react"; +import { type FC, useEffect } from "react"; import { useQuery } from "react-query"; -import { useParams } from "react-router"; +import { useLocation, useNavigate, useParams } from "react-router"; import { previousTemplateVersion, templateFiles, } from "#/api/queries/templates"; +import { Alert, AlertDescription, AlertTitle } from "#/components/Alert/Alert"; +import { Button } from "#/components/Button/Button"; import { Loader } from "#/components/Loader/Loader"; import { TemplateFiles } from "#/modules/templates/TemplateFiles/TemplateFiles"; import { useTemplateLayoutContext } from "#/pages/TemplatePage/TemplateLayout"; +import { docs } from "#/utils/docs"; import { getTemplatePageTitle } from "../utils"; const TemplateFilesPage: FC = () => { const { organization: organizationName = "default" } = useParams() as { organization?: string; }; + const location = useLocation(); + const navigate = useNavigate(); + const locationState = location.state as { justCreated?: boolean } | null; + const justCreated = locationState?.justCreated === true; + + useEffect(() => { + if (justCreated) { + navigate(location.pathname, { replace: true, state: {} }); + } + }, [justCreated, navigate, location.pathname]); const { template, activeVersion } = useTemplateLayoutContext(); const { data: currentFiles } = useQuery( templateFiles(activeVersion.job.file_id), @@ -39,6 +53,42 @@ const TemplateFilesPage: FC = () => { <> {getTemplatePageTitle("Source Code", template)} + {justCreated && ( + + + Awesome, you just created a new template! + + + To customize it further you can edit the Terraform or Coder Template + directly. You can use our template agent skill to help you. + +
+ + +
+
+ )} + {shouldDisplayFiles ? (