From 6520a51766fcfdbe9647d276ca808c790938b7c6 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Mon, 19 Sep 2022 20:42:34 +0000 Subject: [PATCH 1/9] docs: add open in coder This adds new documentation for the "Open in Coder" button that admins can use to get their developers up and running faster. --- docs/admin/open-in-coder.md | 29 +++++++++++++++++++++++++++++ docs/manifest.json | 5 +++++ 2 files changed, 34 insertions(+) create mode 100644 docs/admin/open-in-coder.md diff --git a/docs/admin/open-in-coder.md b/docs/admin/open-in-coder.md new file mode 100644 index 0000000000000..c19efb1d96b9b --- /dev/null +++ b/docs/admin/open-in-coder.md @@ -0,0 +1,29 @@ +# Open in Coder Button + +Add a markdown button to your project's `README.md` to get your developers up and running with Coder with a few clicks. + +A basic example looks like this: + +```text +[![Open in Coder](https://cdn.coder.com/embed-button.svg)](https://dev.coder.com/?template=coder-ts) +``` + +which renders like this: + +![Open in Coder](https://cdn.coder.com/embed-button.svg) + +You can customize this to take developers directly to your team's template. Read on to learn more. + +### Customization + +The underlying link for this button consists of the following pieces: +- : where your Coder deployment lives i.e. https://dev.coder.com +- : optional query parameters to customize the experience + +These are the following query parameters we support: + +### template + +A template to redirect your developers to after they authenticate on your deployment. + +Example: https://dev.coder.com/?template=coder-ts diff --git a/docs/manifest.json b/docs/manifest.json index a0aa731d77d61..59678ea5b7690 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -188,6 +188,11 @@ "title": "Enterprise", "description": "Learn how to enable Enterprise features.", "path": "./admin/enterprise.md" + }, + { + "title": "Open in Coder Button", + "description": "Learn how to create an 'Open in Coder' button.", + "path": "./admin/open-in-coder.md" } ] }, From 09b3d7e4ad5565ebd92d170839f35a860ae0f45e Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Tue, 20 Sep 2022 20:21:42 +0000 Subject: [PATCH 2/9] fix: display error if template not found Previously, we weren't handling a case where we tried to get a template that returned a 404 from the backend. Now we handle that case in our state machine and display the error message from the API on the frontend. --- site/src/pages/TemplatePage/TemplatePage.tsx | 21 +++++++++++++++++++ .../xServices/template/templateXService.ts | 13 ++++++++++++ 2 files changed, 34 insertions(+) diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx index 95141c53841f2..2b9baa94d6e2e 100644 --- a/site/src/pages/TemplatePage/TemplatePage.tsx +++ b/site/src/pages/TemplatePage/TemplatePage.tsx @@ -1,5 +1,8 @@ +import { makeStyles } from "@material-ui/core/styles" import { useMachine, useSelector } from "@xstate/react" import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog" +import { ErrorSummary } from "components/ErrorSummary/ErrorSummary" +import { Margins } from "components/Margins/Margins" import { FC, useContext } from "react" import { Helmet } from "react-helmet-async" import { useTranslation } from "react-i18next" @@ -23,6 +26,7 @@ const useTemplateName = () => { } export const TemplatePage: FC> = () => { + const styles = useStyles() const organizationId = useOrganizationId() const { t } = useTranslation("templatePage") const templateName = useTemplateName() @@ -40,6 +44,7 @@ export const TemplatePage: FC> = () => { templateVersions, deleteTemplateError, templateDAUs, + getTemplateError, } = templateState.context const xServices = useContext(XServiceContext) const permissions = useSelector(xServices.authXService, selectPermissions) @@ -50,6 +55,16 @@ export const TemplatePage: FC> = () => { templateSend("DELETE") } + if (templateState.matches("error") && Boolean(getTemplateError)) { + return ( + +
+ +
+ + ) + } + if (isLoading) { return } @@ -90,4 +105,10 @@ export const TemplatePage: FC> = () => { ) } +const useStyles = makeStyles((theme) => ({ + errorBox: { + padding: theme.spacing(3), + }, +})) + export default TemplatePage diff --git a/site/src/xServices/template/templateXService.ts b/site/src/xServices/template/templateXService.ts index 671cb9cf2d643..a3c1fa7b619c5 100644 --- a/site/src/xServices/template/templateXService.ts +++ b/site/src/xServices/template/templateXService.ts @@ -25,6 +25,7 @@ interface TemplateContext { templateVersions?: TemplateVersion[] templateDAUs: TemplateDAUsResponse deleteTemplateError?: Error | unknown + getTemplateError?: Error | unknown } type TemplateEvent = { type: "DELETE" } | { type: "CONFIRM_DELETE" } | { type: "CANCEL_DELETE" } @@ -71,6 +72,12 @@ export const templateMachine = target: "initialInfo", }, ], + onError: [ + { + actions: "assignGetTemplateError", + target: "error", + }, + ], }, }, initialInfo: { @@ -211,6 +218,9 @@ export const templateMachine = deleted: { type: "final", }, + error: { + type: "final", + }, }, }, { @@ -257,6 +267,9 @@ export const templateMachine = assignActiveTemplateVersion: assign({ activeTemplateVersion: (_, event) => event.data, }), + assignGetTemplateError: assign({ + getTemplateError: (_, event) => event.data, + }), assignTemplateResources: assign({ templateResources: (_, event) => event.data, }), From bad7ffb67718faea82aca7431ddf671c6a0e9410 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Tue, 20 Sep 2022 20:27:52 +0000 Subject: [PATCH 3/9] feat: support template query param in index This adds support to navigate directly to a template from the index by using the `?template=` query param. --- site/src/pages/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx index 1a7e21fedbb9b..dd0c84db1c46f 100644 --- a/site/src/pages/index.tsx +++ b/site/src/pages/index.tsx @@ -1,6 +1,13 @@ import { FC } from "react" -import { Navigate } from "react-router-dom" +import { Navigate, useSearchParams } from "react-router-dom" export const IndexPage: FC = () => { + const [searchParams, _] = useSearchParams() + const template = searchParams.get("template") + + if (template) { + return + } + return } From 586cc0b0dfa7a6cd0786c8d3bc1cdd6897e07204 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Wed, 21 Sep 2022 18:30:31 +0000 Subject: [PATCH 4/9] Revert "feat: support template query param in index" This reverts commit bad7ffb67718faea82aca7431ddf671c6a0e9410. We decided to use the `/template/path` route instead. --- site/src/pages/index.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx index dd0c84db1c46f..1a7e21fedbb9b 100644 --- a/site/src/pages/index.tsx +++ b/site/src/pages/index.tsx @@ -1,13 +1,6 @@ import { FC } from "react" -import { Navigate, useSearchParams } from "react-router-dom" +import { Navigate } from "react-router-dom" export const IndexPage: FC = () => { - const [searchParams, _] = useSearchParams() - const template = searchParams.get("template") - - if (template) { - return - } - return } From 93194ac270b000156d580658e3c8d8766866055e Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Wed, 21 Sep 2022 18:34:22 +0000 Subject: [PATCH 5/9] fixup!: docs: add open in coder --- docs/admin/open-in-coder.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/admin/open-in-coder.md b/docs/admin/open-in-coder.md index c19efb1d96b9b..2eb3926e1a5a3 100644 --- a/docs/admin/open-in-coder.md +++ b/docs/admin/open-in-coder.md @@ -1,11 +1,13 @@ # Open in Coder Button +> WARNING: this feature in Alpha and the API is subject to change. + Add a markdown button to your project's `README.md` to get your developers up and running with Coder with a few clicks. A basic example looks like this: ```text -[![Open in Coder](https://cdn.coder.com/embed-button.svg)](https://dev.coder.com/?template=coder-ts) +[![Open in Coder](https://cdn.coder.com/embed-button.svg)](https:///templates/) ``` which renders like this: @@ -18,12 +20,10 @@ You can customize this to take developers directly to your team's template. Read The underlying link for this button consists of the following pieces: - : where your Coder deployment lives i.e. https://dev.coder.com -- : optional query parameters to customize the experience - -These are the following query parameters we support: +- : name of template i.e. coder -### template +### template name A template to redirect your developers to after they authenticate on your deployment. -Example: https://dev.coder.com/?template=coder-ts +Example: https://dev.coder.com/templates/coder From 822b5909890bd5be91507361f4c33997bf5849c3 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Wed, 21 Sep 2022 18:37:15 +0000 Subject: [PATCH 6/9] docs: add open in coder to dogfood readme --- dogfood/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/dogfood/README.md b/dogfood/README.md index 36db0cd4e1577..b07f2d7c74071 100644 --- a/dogfood/README.md +++ b/dogfood/README.md @@ -1,5 +1,7 @@ # dogfood template +[![Open in Coder](https://cdn.coder.com/embed-button.svg)](https://dev.coder.com/templates/coder) + Ammar is this template's admin. ## Personalization From d569b3cb588217adc03b2fb0c4ac726a12dd6871 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Wed, 21 Sep 2022 14:37:14 -0700 Subject: [PATCH 7/9] Update docs/admin/open-in-coder.md Co-authored-by: Ben Potter --- docs/admin/open-in-coder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/admin/open-in-coder.md b/docs/admin/open-in-coder.md index 2eb3926e1a5a3..e585868488049 100644 --- a/docs/admin/open-in-coder.md +++ b/docs/admin/open-in-coder.md @@ -2,7 +2,7 @@ > WARNING: this feature in Alpha and the API is subject to change. -Add a markdown button to your project's `README.md` to get your developers up and running with Coder with a few clicks. +Add a Markdown button to your project's `README.md` to get your developers up and running with Coder with a few clicks. A basic example looks like this: From 9dd75440bfca245e9a59ef9663d4abd8260baf3d Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Wed, 21 Sep 2022 14:38:23 -0700 Subject: [PATCH 8/9] Update docs/admin/open-in-coder.md Co-authored-by: Ben Potter --- docs/admin/open-in-coder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/admin/open-in-coder.md b/docs/admin/open-in-coder.md index e585868488049..eb15356e1c261 100644 --- a/docs/admin/open-in-coder.md +++ b/docs/admin/open-in-coder.md @@ -6,7 +6,7 @@ Add a Markdown button to your project's `README.md` to get your developers up an A basic example looks like this: -```text +```markdown [![Open in Coder](https://cdn.coder.com/embed-button.svg)](https:///templates/) ``` From b39c4d6263f9045e0eb49f94ba64e378f1720c74 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Wed, 21 Sep 2022 14:39:09 -0700 Subject: [PATCH 9/9] Update docs/admin/open-in-coder.md --- docs/admin/open-in-coder.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/admin/open-in-coder.md b/docs/admin/open-in-coder.md index eb15356e1c261..34da7aade090a 100644 --- a/docs/admin/open-in-coder.md +++ b/docs/admin/open-in-coder.md @@ -1,7 +1,5 @@ # Open in Coder Button -> WARNING: this feature in Alpha and the API is subject to change. - Add a Markdown button to your project's `README.md` to get your developers up and running with Coder with a few clicks. A basic example looks like this: