From 6c45ca0cf30dd43a81a17dcd58fa9dc1a268f866 Mon Sep 17 00:00:00 2001 From: Rodrigo Maia Date: Wed, 29 Mar 2023 13:44:33 +0000 Subject: [PATCH 1/7] feat(site): display template's readme first on template page --- .../TemplateSummaryPage/TemplateSummaryPageView.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx index 63178a08ad74c..cb4ce0bf2aea6 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx @@ -44,8 +44,6 @@ export const TemplateSummaryPageView: FC = ({ return ( - {daus && } -
README.md
@@ -54,6 +52,10 @@ export const TemplateSummaryPageView: FC = ({
+ {daus && } + + + ) From 7bef77961fbc8af190d33c984d2b5ef03c34e325 Mon Sep 17 00:00:00 2001 From: Rodrigo Maia Date: Wed, 29 Mar 2023 14:13:00 +0000 Subject: [PATCH 2/7] chore: prettier --- .../TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx index cb4ce0bf2aea6..4222ede618687 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx @@ -55,7 +55,6 @@ export const TemplateSummaryPageView: FC = ({ {daus && } - ) From 650044fa5889f4a44ec7707b87b091528c5061d4 Mon Sep 17 00:00:00 2001 From: Rodrigo Maia Date: Fri, 31 Mar 2023 18:54:00 +0000 Subject: [PATCH 3/7] move readme to a new docs tab --- site/src/AppRouter.tsx | 6 +++ .../TemplateLayout/TemplateLayout.tsx | 12 +++++ .../TemplateDocsPage/TemplateDocsPage.tsx | 51 +++++++++++++++++++ .../TemplateSummaryPageView.tsx | 25 ++++----- 4 files changed, 82 insertions(+), 12 deletions(-) create mode 100644 site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 1910440f0ad08..4a41069269661 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -135,6 +135,10 @@ const CreateTokenPage = lazy( const TemplateFilesPage = lazy( () => import("./pages/TemplatePage/TemplateFilesPage/TemplateFilesPage"), ) + +const TemplateDocsPage = lazy( + () => import("./pages/TemplatePage/TemplateDocsPage/TemplateDocsPage"), +) const TemplateSchedulePage = lazy( () => import( @@ -171,6 +175,8 @@ export const AppRouter: FC = () => { }> } /> + } /> + } /> diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx index c44d3ac5a9b6b..cf5fdf6aff932 100644 --- a/site/src/components/TemplateLayout/TemplateLayout.tsx +++ b/site/src/components/TemplateLayout/TemplateLayout.tsx @@ -110,6 +110,18 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({ > Summary + + combineClasses([ + styles.tabItem, + isActive ? styles.tabItemActive : undefined, + ]) + } + > + Docs + {data.permissions.canUpdateTemplate && ( + + {pageTitle(`${template.name} ยท Documentation`)} + + +
+
README.md
+
+ {readme.body} +
+
+ + ) +} + +export const useStyles = makeStyles((theme) => { + return { + markdownSection: { + background: theme.palette.background.paper, + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadius, + }, + + readmeLabel: { + color: theme.palette.text.secondary, + fontWeight: 600, + padding: theme.spacing(2, 3), + borderBottom: `1px solid ${theme.palette.divider}`, + }, + + markdownWrapper: { + padding: theme.spacing(0, 3, 5), + maxWidth: 800, + margin: "auto", + }, + } +}) diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx index 4222ede618687..24b5264ee2e3e 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx @@ -5,15 +5,14 @@ import { WorkspaceResource, } from "api/typesGenerated" import { Loader } from "components/Loader/Loader" -import { MemoizedMarkdown } from "components/Markdown/Markdown" import { Stack } from "components/Stack/Stack" import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable" import { TemplateStats } from "components/TemplateStats/TemplateStats" import { VersionsTable } from "components/VersionsTable/VersionsTable" -import frontMatter from "front-matter" -import { FC } from "react" +import { FC, useEffect } from "react" import { DAUChart } from "../../../components/DAUChart/DAUChart" import { TemplateSummaryData } from "./data" +import { useLocation, useNavigate } from "react-router-dom" export interface TemplateSummaryPageViewProps { data?: TemplateSummaryData @@ -26,14 +25,22 @@ export const TemplateSummaryPageView: FC = ({ template, activeVersion, }) => { - const styles = useStyles() + const navigate = useNavigate() + const location = useLocation() + + 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(`/templates/${template.name}/docs`, { replace: true }) + } + }, [template, navigate, location]) if (!data) { return } const { daus, resources, versions } = data - const readme = frontMatter(activeVersion.readme) const getStartedResources = (resources: WorkspaceResource[]) => { return resources.filter( @@ -45,14 +52,8 @@ export const TemplateSummaryPageView: FC = ({ -
-
README.md
-
- {readme.body} -
-
- {daus && } + From 43675e0d0feb9a5f70731bc2b1cbdd184d4a9c93 Mon Sep 17 00:00:00 2001 From: Rodrigo Maia Date: Fri, 31 Mar 2023 19:37:16 +0000 Subject: [PATCH 4/7] test --- .../TemplateDocsPage.test.tsx | 33 +++++++++++++++++++ .../TemplateSummaryPage.test.tsx | 3 +- 2 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx new file mode 100644 index 0000000000000..e8a3b36c9b354 --- /dev/null +++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx @@ -0,0 +1,33 @@ +import { screen } from "@testing-library/react" +import { TemplateLayout } from "components/TemplateLayout/TemplateLayout" +import { ResizeObserver } from "resize-observer" +import { + MockTemplate, + renderWithAuth, +} from "testHelpers/renderHelpers" +import TemplateDocsPage from "./TemplateDocsPage" + +jest.mock("remark-gfm", () => jest.fn()) + +Object.defineProperty(window, "ResizeObserver", { + value: ResizeObserver, +}) + +const renderPage = () => + renderWithAuth( + + + , + { + route: `/templates/${MockTemplate.id}/docs`, + path: "/templates/:template/docs", + }, + ) + +describe("TemplateSummaryPage", () => { + it("shows the template readme", async () => { + renderPage() + await screen.findByText(MockTemplate.display_name) + await screen.findByTestId("markdown") + }) +}) diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx index bd2ab35e06ba2..d362b03a25660 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx @@ -31,14 +31,13 @@ const renderPage = () => ) describe("TemplateSummaryPage", () => { - it("shows the template name, readme and resources", async () => { + it("shows the template name and resources", async () => { // Mocking the dayjs module within the createDayString file const mock = jest.spyOn(CreateDayString, "createDayString") mock.mockImplementation(() => "a minute ago") renderPage() await screen.findByText(MockTemplate.display_name) - await screen.findByTestId("markdown") screen.getByText(MockWorkspaceResource.name) screen.queryAllByText(`${MockTemplateVersion.name}`).length }) From 0fcbbda57fc0506b72dfa13c6eec5fa5fd960b7d Mon Sep 17 00:00:00 2001 From: Rodrigo Maia Date: Mon, 3 Apr 2023 13:48:00 +0000 Subject: [PATCH 5/7] prettier --- .../TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx index e8a3b36c9b354..1598b427dcca9 100644 --- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx +++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx @@ -1,10 +1,7 @@ import { screen } from "@testing-library/react" import { TemplateLayout } from "components/TemplateLayout/TemplateLayout" import { ResizeObserver } from "resize-observer" -import { - MockTemplate, - renderWithAuth, -} from "testHelpers/renderHelpers" +import { MockTemplate, renderWithAuth } from "testHelpers/renderHelpers" import TemplateDocsPage from "./TemplateDocsPage" jest.mock("remark-gfm", () => jest.fn()) From 189c3a28deb6a1d490cdcda4a928dbafb84691ed Mon Sep 17 00:00:00 2001 From: Rodrigo Maia Date: Mon, 3 Apr 2023 17:47:02 +0000 Subject: [PATCH 6/7] fix tests --- .../TemplateDocsPage/TemplateDocsPage.test.tsx | 9 ++++++--- .../TemplateSummaryPage/TemplateSummaryPage.test.tsx | 1 - 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx index 1598b427dcca9..aae05d4c30d14 100644 --- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx +++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx @@ -1,11 +1,13 @@ import { screen } from "@testing-library/react" import { TemplateLayout } from "components/TemplateLayout/TemplateLayout" import { ResizeObserver } from "resize-observer" -import { MockTemplate, renderWithAuth } from "testHelpers/renderHelpers" +import { renderWithAuth } from "testHelpers/renderHelpers" import TemplateDocsPage from "./TemplateDocsPage" jest.mock("remark-gfm", () => jest.fn()) +const TEMPLATE_NAME = "coder-ts" + Object.defineProperty(window, "ResizeObserver", { value: ResizeObserver, }) @@ -16,15 +18,16 @@ const renderPage = () => , { - route: `/templates/${MockTemplate.id}/docs`, + route: `/templates/${TEMPLATE_NAME}/docs`, path: "/templates/:template/docs", }, ) +const README_FILENAME = "readme.md" + describe("TemplateSummaryPage", () => { it("shows the template readme", async () => { renderPage() - await screen.findByText(MockTemplate.display_name) await screen.findByTestId("markdown") }) }) diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx index 7ff2025b638a3..d4c540d9dde6f 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx @@ -38,7 +38,6 @@ describe("TemplateSummaryPage", () => { renderPage() await screen.findByText(MockTemplate.display_name) - screen.getByText(MockWorkspaceResource.name) screen.queryAllByText(`${MockTemplateVersion.name}`).length }) it("does not allow a member to delete a template", () => { From 25fabdbbbcb027dfd6c777f9cfc1e5640db28f29 Mon Sep 17 00:00:00 2001 From: Rodrigo Maia Date: Mon, 3 Apr 2023 18:10:55 +0000 Subject: [PATCH 7/7] prettier --- .../TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx | 2 -- .../TemplateSummaryPage/TemplateSummaryPage.test.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx index aae05d4c30d14..793a7c01d9153 100644 --- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx +++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx @@ -23,8 +23,6 @@ const renderPage = () => }, ) -const README_FILENAME = "readme.md" - describe("TemplateSummaryPage", () => { it("shows the template readme", async () => { renderPage() diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx index d4c540d9dde6f..05bacaa8fa5fd 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx @@ -4,7 +4,6 @@ import { rest } from "msw" import { ResizeObserver } from "resize-observer" import { MockTemplate, - MockWorkspaceResource, MockTemplateVersion, MockMemberPermissions, } from "testHelpers/entities"