From 77111388186e599de8248aaf12a692dd8fd747fb Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 31 May 2022 17:26:08 +0000 Subject: [PATCH 01/14] Add empty state for workspace --- site/src/components/EmptyState/EmptyState.tsx | 8 +- .../WorkspacesPage/WorkspacesPageView.tsx | 84 ++++++++++--------- 2 files changed, 51 insertions(+), 41 deletions(-) diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx index c344a45033da6..ba43d66ea1d0d 100644 --- a/site/src/components/EmptyState/EmptyState.tsx +++ b/site/src/components/EmptyState/EmptyState.tsx @@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box" import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" import { FC, ReactNode } from "react" +import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" export interface EmptyStateProps { /** Text Message to display, placed inside Typography component */ @@ -48,17 +49,20 @@ const useStyles = makeStyles( justifyContent: "center", alignItems: "center", textAlign: "center", - minHeight: 120, + minHeight: 300, padding: theme.spacing(3), + fontFamily: MONOSPACE_FONT_FAMILY, }, header: { marginBottom: theme.spacing(3), }, title: { - fontWeight: 400, + fontWeight: 600, + fontFamily: "inherit", }, description: { marginTop: theme.spacing(1), + fontFamily: "inherit", }, }), { name: "EmptyState" }, diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 32d39658783d6..d7704a927b83a 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -14,15 +14,18 @@ import { FC } from "react" import { Link as RouterLink } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { AvatarData } from "../../components/AvatarData/AvatarData" +import { EmptyState } from "../../components/EmptyState/EmptyState" import { Margins } from "../../components/Margins/Margins" import { Stack } from "../../components/Stack/Stack" +import { TableLoader } from "../../components/TableLoader/TableLoader" import { getDisplayStatus } from "../../util/workspace" dayjs.extend(relativeTime) export const Language = { createButton: "Create workspace", - emptyView: "so you can check out your repositories, edit your source code, and build and test your software.", + emptyMessage: "Create your first workspace", + emptyDescription: "To start edit your source code, and build your awesome software.", } export interface WorkspacesPageViewProps { @@ -53,50 +56,53 @@ export const WorkspacesPageView: FC = (props) => { - {!props.loading && !props.workspaces?.length && ( + {props.loading && } + {props.workspaces && props.workspaces.length === 0 && ( -
- - - Create a workspace + + -  {Language.emptyView} - -
+ } + /> )} - {props.workspaces?.map((workspace) => { - const status = getDisplayStatus(theme, workspace.latest_build) - return ( - - - - - {workspace.template_name} - - {workspace.outdated ? ( - outdated - ) : ( - up to date - )} - - - - {dayjs().to(dayjs(workspace.latest_build.created_at))} - - - - {status.status} - - - ) - })} + {props.workspaces && + props.workspaces.map((workspace) => { + const status = getDisplayStatus(theme, workspace.latest_build) + return ( + + + + + {workspace.template_name} + + {workspace.outdated ? ( + outdated + ) : ( + up to date + )} + + + + {dayjs().to(dayjs(workspace.latest_build.created_at))} + + + + {status.status} + + + ) + })} From d1ddfaecba7a6f6a1333c5e6946577a05f41b865 Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 31 May 2022 17:52:39 +0000 Subject: [PATCH 02/14] Improve template empty --- .../components/CodeExample/CodeExample.tsx | 18 +++++--- site/src/components/EmptyState/EmptyState.tsx | 12 ++++-- .../pages/TemplatesPage/TemplatesPageView.tsx | 41 +++++++++++-------- 3 files changed, 45 insertions(+), 26 deletions(-) diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index d0ec4fe084252..ed61a60c6c51a 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -15,8 +15,8 @@ export const CodeExample: FC = ({ code }) => { return (
- {code} - + {code} +
) } @@ -25,13 +25,21 @@ const useStyles = makeStyles((theme) => ({ root: { display: "flex", flexDirection: "row", - justifyContent: "space-between", alignItems: "center", background: theme.palette.background.default, color: theme.palette.primary.contrastText, fontFamily: MONOSPACE_FONT_FAMILY, - fontSize: 13, - padding: theme.spacing(2), + fontSize: 14, + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(0.5), + }, + code: { + padding: `${theme.spacing(0.5)}px ${theme.spacing(0.75)}px ${theme.spacing(0.5)}px ${theme.spacing(2)}px`, + }, + button: { + border: 0, + minWidth: 42, + minHeight: 42, borderRadius: theme.shape.borderRadius, }, })) diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx index ba43d66ea1d0d..7f2461335f5d7 100644 --- a/site/src/components/EmptyState/EmptyState.tsx +++ b/site/src/components/EmptyState/EmptyState.tsx @@ -3,12 +3,14 @@ import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" import { FC, ReactNode } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" +import { combineClasses } from "../../util/combineClasses" export interface EmptyStateProps { /** Text Message to display, placed inside Typography component */ message: string /** Longer optional description to display below the message */ - description?: string + description?: string | React.ReactNode + descriptionClassName?: string cta?: ReactNode } @@ -21,7 +23,7 @@ export interface EmptyStateProps { * that you can directly pass props through to to customize the shape and layout of it. */ export const EmptyState: FC = (props) => { - const { message, description, cta, ...boxProps } = props + const { message, description, cta, descriptionClassName, ...boxProps } = props const styles = useStyles() return ( @@ -31,7 +33,11 @@ export const EmptyState: FC = (props) => { {message} {description && ( - + {description} )} diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 8f038a236aaab..075d68fba8b35 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -8,9 +8,10 @@ import TableRow from "@material-ui/core/TableRow" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import { FC } from "react" -import { Link as RouterLink } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { AvatarData } from "../../components/AvatarData/AvatarData" +import { CodeExample } from "../../components/CodeExample/CodeExample" +import { EmptyState } from "../../components/EmptyState/EmptyState" import { Margins } from "../../components/Margins/Margins" import { Stack } from "../../components/Stack/Stack" import { TableLoader } from "../../components/TableLoader/TableLoader" @@ -27,6 +28,16 @@ export const Language = { emptyViewCreateCTA: "Create a template", emptyViewCreate: "to standardize development workspaces for your team.", emptyViewNoPerms: "No templates have been created! Contact your Coder administrator.", + emptyMessage: "Create your first template", + emptyDescription: ( + <> + To create a workspace you need to have a template. You can{" "} + + create one from scratch + {" "} + or use a built-in template by typing the following Coder CLI command: + + ), } export interface TemplatesPageViewProps { @@ -53,8 +64,14 @@ export const TemplatesPageView: FC = (props) => { {!props.loading && !props.templates?.length && ( -
- {props.canCreateTemplate ? ( + } + /> + + {/* {props.canCreateTemplate ? ( {Language.emptyViewCreateCTA} @@ -63,8 +80,7 @@ export const TemplatesPageView: FC = (props) => { ) : ( {Language.emptyViewNoPerms} - )} -
+ )} */} )} @@ -94,18 +110,7 @@ const useStyles = makeStyles((theme) => ({ root: { marginTop: theme.spacing(3), }, - welcome: { - paddingTop: theme.spacing(12), - paddingBottom: theme.spacing(12), - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - "& span": { - maxWidth: 600, - textAlign: "center", - fontSize: theme.spacing(2), - lineHeight: `${theme.spacing(3)}px`, - }, + emptyDescription: { + maxWidth: theme.spacing(62), }, })) From 879612841478fd51a6ce05a9d73fee52d8198545 Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 31 May 2022 18:09:01 +0000 Subject: [PATCH 03/14] Increase template page top spacing --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 075d68fba8b35..d94286bce0d01 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -108,7 +108,7 @@ export const TemplatesPageView: FC = (props) => { const useStyles = makeStyles((theme) => ({ root: { - marginTop: theme.spacing(3), + marginTop: theme.spacing(10), }, emptyDescription: { maxWidth: theme.spacing(62), From 65678abf235be15027eb5bc4cd3c5f1a68499ac4 Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 31 May 2022 18:12:31 +0000 Subject: [PATCH 04/14] Make footer more soft --- site/src/components/Footer/Footer.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx index d4764cf496fc9..d248903ecffda 100644 --- a/site/src/components/Footer/Footer.tsx +++ b/site/src/components/Footer/Footer.tsx @@ -27,7 +27,12 @@ export const Footer: React.FC = ({ children }) => { {buildInfoState.context.buildInfo && (
- + {Language.buildInfoText(buildInfoState.context.buildInfo)}
@@ -38,6 +43,7 @@ export const Footer: React.FC = ({ children }) => { const useFooterStyles = makeStyles((theme) => ({ root: { + opacity: 0.6, textAlign: "center", flex: "0", paddingTop: theme.spacing(2), @@ -50,4 +56,8 @@ const useFooterStyles = makeStyles((theme) => ({ buildInfo: { margin: theme.spacing(0.25), }, + link: { + color: theme.palette.text.secondary, + fontWeight: 600, + }, })) From df6bc50ec9a9ed4a3709d5534bea87e8ca612810 Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 31 May 2022 20:02:24 +0000 Subject: [PATCH 05/14] Add empty state to the form --- .../components/CodeExample/CodeExample.tsx | 10 +++-- site/src/components/EmptyState/EmptyState.tsx | 5 ++- .../CreateWorkspacePageView.tsx | 42 ++++++++++++++++++- .../createWorkspaceXService.ts | 25 +++++++++++ 4 files changed, 76 insertions(+), 6 deletions(-) diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index ed61a60c6c51a..640f943130623 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -1,22 +1,25 @@ import { makeStyles } from "@material-ui/core/styles" import { FC } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" +import { combineClasses } from "../../util/combineClasses" import { CopyButton } from "../CopyButton/CopyButton" export interface CodeExampleProps { code: string + className?: string + buttonClassName?: string } /** * Component to show single-line code examples, with a copy button */ -export const CodeExample: FC = ({ code }) => { +export const CodeExample: FC = ({ code, className, buttonClassName }) => { const styles = useStyles() return ( -
+
{code} - +
) } @@ -25,6 +28,7 @@ const useStyles = makeStyles((theme) => ({ root: { display: "flex", flexDirection: "row", + justifyContent: "space-between", alignItems: "center", background: theme.palette.background.default, color: theme.palette.primary.contrastText, diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx index 7f2461335f5d7..0192574a93d20 100644 --- a/site/src/components/EmptyState/EmptyState.tsx +++ b/site/src/components/EmptyState/EmptyState.tsx @@ -12,6 +12,7 @@ export interface EmptyStateProps { description?: string | React.ReactNode descriptionClassName?: string cta?: ReactNode + className?: string } /** @@ -23,11 +24,11 @@ export interface EmptyStateProps { * that you can directly pass props through to to customize the shape and layout of it. */ export const EmptyState: FC = (props) => { - const { message, description, cta, descriptionClassName, ...boxProps } = props + const { message, description, cta, descriptionClassName, className, ...boxProps } = props const styles = useStyles() return ( - +
{message} diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 93e6728d57e04..4b5418f28262e 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -8,6 +8,8 @@ import { FC, useState } from "react" import { Link as RouterLink } from "react-router-dom" import * as Yup from "yup" import * as TypesGen from "../../api/typesGenerated" +import { CodeExample } from "../../components/CodeExample/CodeExample" +import { EmptyState } from "../../components/EmptyState/EmptyState" import { FormFooter } from "../../components/FormFooter/FormFooter" import { FullPageForm } from "../../components/FullPageForm/FullPageForm" import { Loader } from "../../components/Loader/Loader" @@ -18,6 +20,16 @@ import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formU export const Language = { templateLabel: "Template", nameLabel: "Name", + emptyMessage: "Let's create your first template", + emptyDescription: ( + <> + To create a workspace you need to have a template. You can{" "} + + create one from scratch + {" "} + or use a built-in template by typing the following Coder CLI command: + + ), } export interface CreateWorkspacePageViewProps { @@ -98,7 +110,18 @@ export const CreateWorkspacePageView: FC = (props) {props.loadingTemplates && } - {props.templates && ( + {props.templates && props.templates.length === 0 && ( + + } + /> + )} + {props.templates && props.templates.length > 0 && ( ({ marginLeft: theme.spacing(0.5), }, }, + emptyState: { + padding: 0, + fontFamily: "inherit", + textAlign: "left", + minHeight: "auto", + alignItems: "flex-start", + }, + emptyStateDescription: { + lineHeight: "160%", + }, + code: { + background: theme.palette.background.paper, + width: "100%", + }, + codeButton: { + background: theme.palette.background.paper, + }, })) diff --git a/site/src/xServices/createWorkspace/createWorkspaceXService.ts b/site/src/xServices/createWorkspace/createWorkspaceXService.ts index 13ac3f791143a..297819d1b2cb6 100644 --- a/site/src/xServices/createWorkspace/createWorkspaceXService.ts +++ b/site/src/xServices/createWorkspace/createWorkspaceXService.ts @@ -56,6 +56,11 @@ export const createWorkspaceMachine = createMachine( invoke: { src: "getTemplates", onDone: [ + { + actions: ["assignTemplates"], + target: "waitingForTemplateGetCreated", + cond: "areTemplatesEmpty", + }, { actions: ["assignTemplates", "assignPreSelectedTemplate"], target: "gettingTemplateSchema", @@ -71,6 +76,25 @@ export const createWorkspaceMachine = createMachine( }, }, }, + waitingForTemplateGetCreated: { + initial: "refreshingTemplates", + states: { + refreshingTemplates: { + invoke: { + src: "getTemplates", + onDone: [ + { target: "waiting", cond: "areTemplatesEmpty" }, + { target: "#createWorkspaceState.selectingTemplate", actions: ["assignTemplates"] }, + ], + }, + }, + waiting: { + after: { + 2_000: "refreshingTemplates", + }, + }, + }, + }, selectingTemplate: { on: { SELECT_TEMPLATE: { @@ -147,6 +171,7 @@ export const createWorkspaceMachine = createMachine( const template = event.data.find((template) => template.name === ctx.preSelectedTemplateName) return !!template }, + areTemplatesEmpty: (_, event) => event.data.length === 0, }, actions: { assignTemplates: assign({ From eaf4a78cefbc7120ce824b6c77d5e743b932eee4 Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 15:12:05 +0000 Subject: [PATCH 06/14] Add no templates storybook --- .../CreateWorkspacePage/CreateWorkspacePageView.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx index 8a97781aff211..e134d0e940593 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx @@ -33,6 +33,11 @@ export default { const Template: Story = (args) => +export const NoTemplates = Template.bind({}) +NoTemplates.args = { + templates: [], +} + export const NoParameters = Template.bind({}) NoParameters.args = { templates: [MockTemplate], From 8d5e77100b0dd69ea18d5f9f35b80f0d9a100edb Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 1 Jun 2022 11:31:07 -0500 Subject: [PATCH 07/14] Update site/src/pages/TemplatesPage/TemplatesPageView.tsx Co-authored-by: G r e y --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index d94286bce0d01..d44202b35b882 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -35,7 +35,7 @@ export const Language = { create one from scratch {" "} - or use a built-in template by typing the following Coder CLI command: + or use a built-in template using the following Coder CLI command: ), } From b7dbfff2eb596d632db5863d1220a97b3cf34de5 Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 16:33:22 +0000 Subject: [PATCH 08/14] Improve verbiage --- site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index d7704a927b83a..2a412116be7bb 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -25,7 +25,7 @@ dayjs.extend(relativeTime) export const Language = { createButton: "Create workspace", emptyMessage: "Create your first workspace", - emptyDescription: "To start edit your source code, and build your awesome software.", + emptyDescription: "Start editing your source code and building your software", } export interface WorkspacesPageViewProps { From c3ca61b534e4bcbfba0e3866b7aef741e1e10b81 Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 16:34:56 +0000 Subject: [PATCH 09/14] Add template link to the Language obj --- site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 4b5418f28262e..ebb398f86b490 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -30,6 +30,7 @@ export const Language = { or use a built-in template by typing the following Coder CLI command: ), + templateLink: "Read more about this template", } export interface CreateWorkspacePageViewProps { @@ -139,7 +140,7 @@ export const CreateWorkspacePageView: FC = (props) to={`/templates/${selectedTemplate.name}`} target="_blank" > - Read more about this template + {Language.templateLink} ) } From dfef3390e094ab9e94e3c4a02e28f22939ba3f8f Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 16:37:30 +0000 Subject: [PATCH 10/14] Update message if user has no permission to create template --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index d44202b35b882..eafc93aaced83 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -66,21 +66,10 @@ export const TemplatesPageView: FC = (props) => { } /> - - {/* {props.canCreateTemplate ? ( - - - {Language.emptyViewCreateCTA} - -  {Language.emptyViewCreate} - - ) : ( - {Language.emptyViewNoPerms} - )} */} )} From 5300bf8a5fcfa7f0023c5a64044e45686eeab44f Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 16:45:10 +0000 Subject: [PATCH 11/14] Update no perm text --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index eafc93aaced83..acafbd168d8c4 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -27,7 +27,7 @@ export const Language = { lastUpdatedLabel: "Last updated", emptyViewCreateCTA: "Create a template", emptyViewCreate: "to standardize development workspaces for your team.", - emptyViewNoPerms: "No templates have been created! Contact your Coder administrator.", + emptyViewNoPerms: "Contact your Coder administrator to create a template. You can share the code below.", emptyMessage: "Create your first template", emptyDescription: ( <> From 114f65ad30cdb91d439f43ed0143b5a3cf96bbc1 Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 16:46:53 +0000 Subject: [PATCH 12/14] Fix workspace page view stories --- .../WorkspacesPage/WorkspacesPageView.stories.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx index 740bbae0b69fc..880698a8a0c8a 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, Story } from "@storybook/react" -import { ProvisionerJobStatus, Workspace } from "../../api/typesGenerated" +import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated" import { MockWorkspace } from "../../testHelpers/entities" import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView" @@ -10,7 +10,10 @@ export default { const Template: Story = (args) => -const createWorkspaceWithStatus = (status: ProvisionerJobStatus, transition = "start"): Workspace => { +const createWorkspaceWithStatus = ( + status: ProvisionerJobStatus, + transition: WorkspaceTransition = "start", +): Workspace => { return { ...MockWorkspace, latest_build: { @@ -46,4 +49,6 @@ AllStates.args = { } export const Empty = Template.bind({}) -Empty.args = {} +Empty.args = { + workspaces: [], +} From 12a55cb8865aa715fb7b5d08025eb948ac640dc4 Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 16:53:38 +0000 Subject: [PATCH 13/14] Fix tests --- site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx index 1180c10536360..462ce080add5d 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx @@ -23,7 +23,7 @@ describe("WorkspacesPage", () => { render() // Then - await screen.findByText(Language.emptyView) + await screen.findByText(Language.emptyMessage) }) it("renders a filled workspaces page", async () => { From 57e909d5387447f2c7b75686b52c3006393aa044 Mon Sep 17 00:00:00 2001 From: Bruno Date: Wed, 1 Jun 2022 17:16:13 +0000 Subject: [PATCH 14/14] Remove unecessary language and fix tests --- site/src/pages/TemplatesPage/TemplatesPage.test.tsx | 2 +- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx index 0aa525f8591bc..c2400ba1a70b3 100644 --- a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx @@ -31,7 +31,7 @@ describe("TemplatesPage", () => { render() // Then - await screen.findByText(Language.emptyViewCreate) + await screen.findByText(Language.emptyMessage) }) it("renders a filled templates page", async () => { diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index acafbd168d8c4..e7629627d1216 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -25,8 +25,6 @@ export const Language = { nameLabel: "Name", usedByLabel: "Used by", lastUpdatedLabel: "Last updated", - emptyViewCreateCTA: "Create a template", - emptyViewCreate: "to standardize development workspaces for your team.", emptyViewNoPerms: "Contact your Coder administrator to create a template. You can share the code below.", emptyMessage: "Create your first template", emptyDescription: (