From e3a351e5d6f2ebc795f5cf8401cc6d5a44c73711 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 3 Nov 2023 16:35:34 +0000 Subject: [PATCH 1/9] Redirects to template after setup --- site/src/pages/SetupPage/SetupPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/site/src/pages/SetupPage/SetupPage.tsx index 7dae420224546..0da1e0ea549b5 100644 --- a/site/src/pages/SetupPage/SetupPage.tsx +++ b/site/src/pages/SetupPage/SetupPage.tsx @@ -35,7 +35,7 @@ export const SetupPage: FC = () => { onSubmit={async (firstUser) => { await createFirstUserMutation.mutateAsync(firstUser); await signIn(firstUser.email, firstUser.password); - navigate("/"); + navigate("/templates"); }} /> From cae37d5e13d7b871670503597866b4d345c08c02 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 3 Nov 2023 17:35:58 +0000 Subject: [PATCH 2/9] Refactor template example cards and first create template experience --- .../TemplateExampleCard.tsx | 168 ++++++++++-------- .../StarterTemplatesPageView.tsx | 23 +-- .../pages/TemplatesPage/EmptyTemplates.tsx | 34 +--- 3 files changed, 119 insertions(+), 106 deletions(-) diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx index db8252ef905e7..8e0f08cc87686 100644 --- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx @@ -1,86 +1,114 @@ -import { type Interpolation, type Theme } from "@emotion/react"; +import Button from "@mui/material/Button"; +import Link from "@mui/material/Link"; import type { TemplateExample } from "api/typesGenerated"; +import { Pill } from "components/Pill/Pill"; import { type FC } from "react"; -import { Link } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; export interface TemplateExampleCardProps { example: TemplateExample; - className?: string; + activeTag?: string; } export const TemplateExampleCard: FC = ({ example, - className, + activeTag, }) => { return ( - ({ + width: "320px", + padding: theme.spacing(3), + borderRadius: 6, + border: `1px solid ${theme.palette.divider}`, + textAlign: "left", + textDecoration: "none", + color: "inherit", + display: "flex", + flexDirection: "column", + })} > -
- +
+
-
- {example.name} - {example.description} -
- - ); -}; - -const styles = { - template: (theme) => ({ - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadius, - background: theme.palette.background.paper, - textDecoration: "none", - textAlign: "left", - color: "inherit", - display: "flex", - alignItems: "center", - height: "fit-content", - - "&:hover": { - backgroundColor: theme.palette.background.paperLight, - }, - }), - - templateIcon: (theme) => ({ - width: theme.spacing(12), - height: theme.spacing(12), - display: "flex", - alignItems: "center", - justifyContent: "center", - flexShrink: 0, - "& img": { - height: theme.spacing(4), - }, - }), +
+

+ {example.name} +

+ ({ + fontSize: 13, + color: theme.palette.text.secondary, + lineHeight: "0.5", + })} + > + {example.description} + +
+ {example.tags.map((tag) => { + const isActive = activeTag === tag; - templateInfo: (theme) => ({ - padding: theme.spacing(2, 2, 2, 0), - display: "flex", - flexDirection: "column", - overflow: "hidden", - }), - - templateName: (theme) => ({ - fontSize: theme.spacing(2), - textOverflow: "ellipsis", - width: "100%", - overflow: "hidden", - whiteSpace: "nowrap", - }), + return ( + + ({ + borderColor: isActive + ? theme.palette.primary.main + : theme.palette.divider, + cursor: "pointer", + backgroundColor: isActive + ? theme.palette.primary.dark + : undefined, + "&: hover": { + borderColor: theme.palette.primary.main, + }, + })} + /> + + ); + })} +
+
- templateDescription: (theme) => ({ - fontSize: theme.spacing(1.75), - color: theme.palette.text.secondary, - textOverflow: "ellipsis", - width: "100%", - overflow: "hidden", - whiteSpace: "nowrap", - }), -} satisfies Record>; +
+ + + Read more + +
+
+ ); +}; diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx index 5b874d3a41b10..5510cf80bd046 100644 --- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx +++ b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx @@ -79,10 +79,21 @@ export const StarterTemplatesPageView: FC = ({ )} -
+
{visibleTemplates && visibleTemplates.map((example) => ( - + ))}
@@ -119,12 +130,4 @@ const styles = { color: theme.palette.text.primary, fontWeight: 600, }), - - templates: (theme) => ({ - flex: "1", - display: "grid", - gridTemplateColumns: "repeat(2, minmax(0, 1fr))", - gap: theme.spacing(2), - gridAutoRows: "min-content", - }), } satisfies Record>; diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx index 62e89705c8e41..c03d976e717fb 100644 --- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx +++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx @@ -44,18 +44,17 @@ export const EmptyTemplates: FC<{ if (canCreateTemplates) { return ( Templates are written in Terraform and describe the infrastructure - for workspaces (e.g., docker_container, aws_instance, - kubernetes_pod). Select a starter template below or + for workspaces. You can start using a starter template below or{" "} - create your own + creating your own . @@ -64,11 +63,7 @@ export const EmptyTemplates: FC<{
{featuredExamples.map((example) => ( - + ))}
@@ -76,7 +71,7 @@ export const EmptyTemplates: FC<{ size="small" component={RouterLink} to="/starter-templates" - css={styles.viewAllButton} + css={{ borderRadius: 9999 }} > View all starter templates @@ -118,22 +113,9 @@ const styles = { }), featuredExamples: (theme) => ({ - maxWidth: theme.spacing(100), - display: "grid", - gridTemplateColumns: "repeat(2, minmax(0, 1fr))", + display: "flex", + flexWrap: "wrap", + justifyContent: "center", gap: theme.spacing(2), - gridAutoRows: "min-content", }), - - template: (theme) => ({ - backgroundColor: theme.palette.background.paperLight, - - "&:hover": { - backgroundColor: theme.palette.divider, - }, - }), - - viewAllButton: { - borderRadius: 9999, - }, } satisfies Record>; From d8987b9fe48879397f958c9765ffb944fefff9a9 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 3 Nov 2023 17:43:04 +0000 Subject: [PATCH 3/9] Minor improvements --- .../TemplateExampleCard/TemplateExampleCard.tsx | 13 ++++++------- .../StarterTemplatesPageView.tsx | 14 +++++++------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx index 8e0f08cc87686..cc10edd839746 100644 --- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx @@ -2,18 +2,16 @@ import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import type { TemplateExample } from "api/typesGenerated"; import { Pill } from "components/Pill/Pill"; -import { type FC } from "react"; +import { HTMLProps } from "react"; import { Link as RouterLink } from "react-router-dom"; -export interface TemplateExampleCardProps { +type TemplateExampleCardProps = { example: TemplateExample; activeTag?: string; -} +} & HTMLProps; -export const TemplateExampleCard: FC = ({ - example, - activeTag, -}) => { +export const TemplateExampleCard = (props: TemplateExampleCardProps) => { + const { example, activeTag, ...divProps } = props; return (
({ @@ -27,6 +25,7 @@ export const TemplateExampleCard: FC = ({ display: "flex", flexDirection: "column", })} + {...divProps} >
= ({ {Boolean(!starterTemplatesByTag) && } - + {starterTemplatesByTag && tags && ( - + Filter {tags.map((tag) => ( = ({ {visibleTemplates && visibleTemplates.map((example) => ( ({ + backgroundColor: theme.palette.background.paper, + })} example={example} key={example.id} activeTag={activeTag} @@ -102,11 +107,6 @@ export const StarterTemplatesPageView: FC = ({ }; const styles = { - filter: (theme) => ({ - width: theme.spacing(26), - flexShrink: 0, - }), - filterCaption: (theme) => ({ textTransform: "uppercase", fontWeight: 600, From bdb43c6d81a5524be83d4a2f8b3aabf2a9376990 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 3 Nov 2023 22:29:46 +0000 Subject: [PATCH 4/9] Fix verbiage --- site/src/pages/TemplatesPage/EmptyTemplates.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx index c03d976e717fb..3cf94a90fa27d 100644 --- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx +++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx @@ -54,7 +54,7 @@ export const EmptyTemplates: FC<{ target="_blank" rel="noreferrer" > - creating your own + create your own . From 41092641ad33d62db5758bcd439c92298353f220 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 3 Nov 2023 22:31:29 +0000 Subject: [PATCH 5/9] Fix test --- site/src/pages/SetupPage/SetupPage.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/pages/SetupPage/SetupPage.test.tsx b/site/src/pages/SetupPage/SetupPage.test.tsx index 7a6718cff740e..8609293220a99 100644 --- a/site/src/pages/SetupPage/SetupPage.test.tsx +++ b/site/src/pages/SetupPage/SetupPage.test.tsx @@ -87,8 +87,8 @@ describe("Setup Page", () => { element: , }, { - path: "/", - element:

Workspaces

, + path: "/templates", + element:

Templates

, }, ], { initialEntries: ["/setup"] }, @@ -96,6 +96,6 @@ describe("Setup Page", () => { ); await waitForLoaderToBeRemoved(); await fillForm(); - await waitFor(() => screen.findByText("Workspaces")); + await waitFor(() => screen.findByText("Templates")); }); }); From 935b09bdeb151977f5c5eb32ed890a9098631878 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 3 Nov 2023 22:35:21 +0000 Subject: [PATCH 6/9] Fix template display name on card --- site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx index 9c1603d1c6cd0..d1f2b1865a16f 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx @@ -65,7 +65,7 @@ export const WorkspacesEmpty = (props: {

- {t.display_name} + {t.display_name.length > 0 ? t.display_name : t.name}

({ From 250f7649b28afdff4cb2cc360ef6d0723cd59c48 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 3 Nov 2023 22:51:08 +0000 Subject: [PATCH 7/9] Refactor card layout --- .../TemplateExampleCard.tsx | 78 +++++++++++-------- 1 file changed, 44 insertions(+), 34 deletions(-) diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx index cc10edd839746..a3b1f45699fb1 100644 --- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx @@ -16,7 +16,7 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => {
({ width: "320px", - padding: theme.spacing(3), + padding: 24, borderRadius: 6, border: `1px solid ${theme.palette.divider}`, textAlign: "left", @@ -29,34 +29,28 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => { >
- -
- -
-

- {example.name} -

- ({ - fontSize: 13, - color: theme.palette.text.secondary, - lineHeight: "0.5", - })} +
- {example.description} - -
+ +
+ +
{example.tags.map((tag) => { const isActive = activeTag === tag; @@ -83,12 +77,35 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => {
+
+

+ {example.name} +

+ ({ + fontSize: 13, + color: theme.palette.text.secondary, + lineHeight: "1.8", + display: "block", + })} + > + {example.description} + + + Read more + +
+
{ > Use template - - Read more -
); From 6acd193f51c2b2fbd0b0dc88a75c8b8dc6653b00 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 6 Nov 2023 16:41:37 +0000 Subject: [PATCH 8/9] Move readmore to be inline --- .../TemplateExampleCard/TemplateExampleCard.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx index a3b1f45699fb1..b3814ff0ae042 100644 --- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx @@ -89,15 +89,15 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => { display: "block", })} > - {example.description} + {example.description}{" "} + + Read more + - - Read more -
Date: Mon, 6 Nov 2023 17:03:06 +0000 Subject: [PATCH 9/9] Decrease line height --- site/src/components/TemplateExampleCard/TemplateExampleCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx index b3814ff0ae042..e5151880eb753 100644 --- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx @@ -85,7 +85,7 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => { css={(theme) => ({ fontSize: 13, color: theme.palette.text.secondary, - lineHeight: "1.8", + lineHeight: "1.6", display: "block", })} >