diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx index d81c2156970e3..c36a5bca18d02 100644 --- a/site/src/pages/TemplatePage/TemplateLayout.tsx +++ b/site/src/pages/TemplatePage/TemplateLayout.tsx @@ -20,6 +20,7 @@ import { import { useQuery } from "react-query"; import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom"; import { TemplatePageHeader } from "./TemplatePageHeader"; +import { TemplateStats } from "./TemplateStats"; const templatePermissions = ( templateId: string, @@ -132,9 +133,6 @@ export const TemplateLayout: FC = ({ - - Summary - Docs @@ -143,6 +141,9 @@ export const TemplateLayout: FC = ({ Source Code )} + + Resources + Versions diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx index 98e9fc6df378e..e9970df30c174 100644 --- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx +++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx @@ -35,6 +35,7 @@ import type { WorkspacePermissions } from "modules/permissions/workspaces"; import type { FC } from "react"; import { useQuery } from "react-query"; import { Link as RouterLink, useNavigate } from "react-router-dom"; +import { TemplateStats } from "./TemplateStats"; import { useDeletionDialogState } from "./useDeletionDialogState"; type TemplateMenuProps = { @@ -238,6 +239,9 @@ export const TemplatePageHeader: FC = ({ +
+ +
); }; diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage.tsx similarity index 69% rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx rename to site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage.tsx index d118ce0a3e188..d75c884b526ee 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx +++ b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage.tsx @@ -4,9 +4,9 @@ import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { getTemplatePageTitle } from "../utils"; -import { TemplateSummaryPageView } from "./TemplateSummaryPageView"; +import { TemplateResourcesPageView } from "./TemplateResourcesPageView"; -export const TemplateSummaryPage: FC = () => { +export const TemplateResourcesPage: FC = () => { const { template, activeVersion } = useTemplateLayoutContext(); const { data: resources } = useQuery({ queryKey: ["templates", template.id, "resources"], @@ -18,13 +18,9 @@ export const TemplateSummaryPage: FC = () => { {getTemplatePageTitle("Template", template)} - + ); }; -export default TemplateSummaryPage; +export default TemplateResourcesPage; diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.stories.tsx similarity index 57% rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx rename to site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.stories.tsx index 1cc281334f489..2ad817348b5f1 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx +++ b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.stories.tsx @@ -1,24 +1,22 @@ import type { Meta, StoryObj } from "@storybook/react"; import { MockTemplate, - MockTemplateVersion, MockWorkspaceResource, MockWorkspaceVolumeResource, } from "testHelpers/entities"; -import { TemplateSummaryPageView } from "./TemplateSummaryPageView"; +import { TemplateResourcesPageView } from "./TemplateResourcesPageView"; -const meta: Meta = { - title: "pages/TemplatePage/TemplateSummaryPageView", - component: TemplateSummaryPageView, +const meta: Meta = { + title: "pages/TemplatePage/TemplateResourcesPageView", + component: TemplateResourcesPageView, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Example: Story = { args: { template: MockTemplate, - activeVersion: MockTemplateVersion, resources: [MockWorkspaceResource, MockWorkspaceVolumeResource], }, }; @@ -26,7 +24,6 @@ export const Example: Story = { export const NoIcon: Story = { args: { template: { ...MockTemplate, icon: "" }, - activeVersion: MockTemplateVersion, resources: [MockWorkspaceResource, MockWorkspaceVolumeResource], }, }; diff --git a/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx new file mode 100644 index 0000000000000..d17796b41d336 --- /dev/null +++ b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx @@ -0,0 +1,32 @@ +import type { Template, WorkspaceResource } from "api/typesGenerated"; +import { Loader } from "components/Loader/Loader"; +import { TemplateResourcesTable } from "modules/templates/TemplateResourcesTable/TemplateResourcesTable"; +import type { FC } from "react"; +import { Navigate, useLocation } from "react-router-dom"; + +export interface TemplateResourcesPageViewProps { + resources?: WorkspaceResource[]; + template: Template; +} + +export const TemplateResourcesPageView: FC = ({ + resources, +}) => { + const location = useLocation(); + + if (location.hash === "#readme") { + return ; + } + + if (!resources) { + return ; + } + + const getStartedResources = (resources: WorkspaceResource[]) => { + return resources.filter( + (resource) => resource.workspace_transition === "start", + ); + }; + + return ; +}; diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx b/site/src/pages/TemplatePage/TemplateStats.stories.tsx similarity index 100% rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx rename to site/src/pages/TemplatePage/TemplateStats.stories.tsx diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx b/site/src/pages/TemplatePage/TemplateStats.tsx similarity index 100% rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx rename to site/src/pages/TemplatePage/TemplateStats.tsx diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx deleted file mode 100644 index c113302770c5a..0000000000000 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import type { - Template, - TemplateVersion, - WorkspaceResource, -} from "api/typesGenerated"; -import { Loader } from "components/Loader/Loader"; -import { Stack } from "components/Stack/Stack"; -import { TemplateResourcesTable } from "modules/templates/TemplateResourcesTable/TemplateResourcesTable"; -import { type FC, useEffect } from "react"; -import { useLocation, useNavigate } from "react-router-dom"; -import { TemplateStats } from "./TemplateStats"; - -export interface TemplateSummaryPageViewProps { - resources?: WorkspaceResource[]; - template: Template; - activeVersion: TemplateVersion; -} - -export const TemplateSummaryPageView: FC = ({ - resources, - template, - activeVersion, -}) => { - const navigate = useNavigate(); - const location = useLocation(); - - // biome-ignore lint/correctness/useExhaustiveDependencies: consider refactoring - useEffect(() => { - if (location.hash === "#readme") { - // We moved the readme to the docs page, but we known that some users - // have bookmarked the readme or linked it elsewhere. Redirect them to the docs page. - navigate("docs", { replace: true }); - } - }, [template, navigate, location]); - - if (!resources) { - return ; - } - - const getStartedResources = (resources: WorkspaceResource[]) => { - return resources.filter( - (resource) => resource.workspace_transition === "start", - ); - }; - - return ( - - - - - ); -}; diff --git a/site/src/router.tsx b/site/src/router.tsx index cd7cd56b690cc..76e9adfd00b09 100644 --- a/site/src/router.tsx +++ b/site/src/router.tsx @@ -92,8 +92,9 @@ const TemplatePermissionsPage = lazy( "./pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage" ), ); -const TemplateSummaryPage = lazy( - () => import("./pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage"), +const TemplateResourcesPage = lazy( + () => + import("./pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage"), ); const CreateWorkspaceExperimentRouter = lazy( () => import("./pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter"), @@ -329,9 +330,10 @@ const templateRouter = () => { }> }> - } /> + } /> } /> } /> + } /> } /> } /> } />