From 36cb15e51a82713629c4a391435b3b8e1303976b Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Fri, 9 Sep 2022 02:21:01 +0000 Subject: [PATCH 1/9] Surface templates page errors --- .../src/pages/TemplatesPage/TemplatesPage.tsx | 8 +- .../TemplatesPageView.stories.tsx | 5 +- .../pages/TemplatesPage/TemplatesPageView.tsx | 171 +++++++++--------- .../xServices/templates/templatesXService.ts | 122 +++++++------ 4 files changed, 159 insertions(+), 147 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx index 9d05f8aa95b46..36bfd51655231 100644 --- a/site/src/pages/TemplatesPage/TemplatesPage.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPage.tsx @@ -6,10 +6,11 @@ import { XServiceContext } from "../../xServices/StateContext" import { templatesMachine } from "../../xServices/templates/templatesXService" import { TemplatesPageView } from "./TemplatesPageView" -const TemplatesPage: React.FC = () => { +export const TemplatesPage: React.FC = () => { const xServices = useContext(XServiceContext) const [authState] = useActor(xServices.authXService) const [templatesState] = useMachine(templatesMachine) + const { templates, getOrganizationsError, getTemplatesError } = templatesState.context return ( <> @@ -17,12 +18,11 @@ const TemplatesPage: React.FC = () => { {pageTitle("Templates")} ) } - -export default TemplatesPage diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx index e45d6cf3906a0..859ab80ec43d5 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, Story } from "@storybook/react" -import { MockTemplate } from "../../testHelpers/entities" +import { makeMockApiError, MockTemplate } from "../../testHelpers/entities" import { TemplatesPageView, TemplatesPageViewProps } from "./TemplatesPageView" export default { @@ -48,3 +48,6 @@ EmptyCanCreate.args = { export const EmptyCannotCreate = Template.bind({}) EmptyCannotCreate.args = {} + +export const Error = Template.bind({}) +Error.args = { error: makeMockApiError({ message: "Something went wrong fetching templates." }) } diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 14625049bac3c..8f188f9be011c 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -8,6 +8,7 @@ import TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import useTheme from "@material-ui/styles/useTheme" +import { ErrorSummary } from "components/ErrorSummary/ErrorSummary" import { FC } from "react" import { useNavigate } from "react-router-dom" import { createDayString } from "util/createDayString" @@ -76,12 +77,14 @@ export interface TemplatesPageViewProps { loading?: boolean canCreateTemplate?: boolean templates?: TypesGen.Template[] + error?: Error | unknown } export const TemplatesPageView: FC> = (props) => { const styles = useStyles() const navigate = useNavigate() const theme: Theme = useTheme() + const empty = !props.loading && !props.error && !props.templates?.length return ( @@ -113,94 +116,98 @@ export const TemplatesPageView: FC - - - - - {Language.nameLabel} - {Language.usedByLabel} - {Language.lastUpdatedLabel} - {Language.createdByLabel} - - - - - {props.loading && } - {!props.loading && !props.templates?.length && ( + {props.error ? ( + + ) : ( + +
+ - - } - /> - + {Language.nameLabel} + {Language.usedByLabel} + {Language.lastUpdatedLabel} + {Language.createdByLabel} + - )} - {props.templates?.map((template) => { - const templatePageLink = `/templates/${template.name}` - const hasIcon = template.icon && template.icon !== "" - - return ( - { - if (event.key === "Enter") { - navigate(templatePageLink) - } - }} - className={styles.clickableTableRow} - > - - - - - ) : undefined + + + {props.loading && } + {empty && ( + + + } /> - + + + )} + {props.templates?.map((template) => { + const templatePageLink = `/templates/${template.name}` + const hasIcon = template.icon && template.icon !== "" - - - {Language.developerCount(template.workspace_owner_count)} - - + return ( + { + if (event.key === "Enter") { + navigate(templatePageLink) + } + }} + className={styles.clickableTableRow} + > + + + + + ) : undefined + } + /> + - - - {createDayString(template.updated_at)} - - - - - {template.created_by_name} - - - -
- -
- - - ) - })} - -
- + + + {Language.developerCount(template.workspace_owner_count)} + + + + + + {createDayString(template.updated_at)} + + + + + {template.created_by_name} + + + +
+ +
+ + + ) + })} + + + + )} ) } diff --git a/site/src/xServices/templates/templatesXService.ts b/site/src/xServices/templates/templatesXService.ts index 68e7a847e9fb7..85806cd38414a 100644 --- a/site/src/xServices/templates/templatesXService.ts +++ b/site/src/xServices/templates/templatesXService.ts @@ -6,90 +6,92 @@ interface TemplatesContext { organizations?: TypesGen.Organization[] templates?: TypesGen.Template[] canCreateTemplate?: boolean - permissionsError?: Error | unknown - organizationsError?: Error | unknown - templatesError?: Error | unknown + getOrganizationsError?: Error | unknown + getTemplatesError?: Error | unknown } -export const templatesMachine = createMachine( +export const templatesMachine = +/** @xstate-layout N4IgpgJg5mDOIC5QBcwFsAOAbAhq2AysnmAHQzLICWAdlAPIBOUONVAXnlQPY2wDEEXmVoA3bgGsyFJizadqveEhAZusKopqJQAD0QAWAMwHSATgDsANgCsAJgt2rRuwAYAHBYsAaEAE9EAEZAu1IDMwiIm3dXG0DjdwBfRN9UTFx8IhJyMEpaBmZWDi4lfjBGRm5GUmw8ADMqtBzkWSKFHj4dVXVNDq79BGNTS1sHJxcPL18AhBMjUhtXJaWrOzM7O3cDG2TU9FrM4lRm6joAFX2MuEFhUjFJaVyL9JJlUDUNLX6gpeH1wJcIQs7giVmmiBB5kilgM7iMHmcOxSIDSBzgWWOFFOUGeaIE5Uq1QODUYTQouKub26nz6KgGgV+ULsAOZDhBZjB-kQbhspGWSxC0W2VncSORNG4EDgXVRlIxjzydFa8hKnRUH16vG+gzs4IQwTMYWhjgsRjm9l2KMur3lJ3yFNeXQ1XzpiCsVlcpFW4QMFnisJZeo5UMicQsNjMgRsSL2L0O2SENDATp6Lr0QTcFjCa2cfqsgRNeuC7j5-Ncq3WmwMgUtsptRzIBKqKZpWtd+sz2Y5RjzBYceo2WbNw9hrijZtr1vjqBbmu07cC7iLSWSiSAA */ +createMachine( { - tsTypes: {} as import("./templatesXService.typegen").Typegen0, - schema: { - context: {} as TemplatesContext, - services: {} as { - getOrganizations: { - data: TypesGen.Organization[] - } - getPermissions: { - data: boolean - } - getTemplates: { - data: TypesGen.Template[] - } - }, + tsTypes: {} as import("./templatesXService.typegen").Typegen0, + schema: { + context: {} as TemplatesContext, + services: {} as { + getOrganizations: { + data: TypesGen.Organization[] + } + getTemplates: { + data: TypesGen.Template[] + } }, - id: "templatesState", - initial: "gettingOrganizations", - states: { - gettingOrganizations: { - entry: "clearOrganizationsError", - invoke: { - src: "getOrganizations", - id: "getOrganizations", - onDone: [ - { - actions: ["assignOrganizations", "clearOrganizationsError"], - target: "gettingTemplates", - }, - ], - onError: [ - { - actions: "assignOrganizationsError", - target: "error", - }, - ], - }, - tags: "loading", + }, + id: "templatesState", + initial: "gettingOrganizations", + states: { + gettingOrganizations: { + entry: "clearGetOrganizationsError", + invoke: { + src: "getOrganizations", + id: "getOrganizations", + onDone: [ + { + actions: ["assignOrganizations"], + target: "gettingTemplates", + }, + ], + onError: [ + { + actions: "assignGetOrganizationsError", + target: "error", + }, + ], }, - gettingTemplates: { - entry: "clearTemplatesError", - invoke: { - src: "getTemplates", - id: "getTemplates", - onDone: { + tags: "loading", + }, + gettingTemplates: { + entry: "clearGetTemplatesError", + invoke: { + src: "getTemplates", + id: "getTemplates", + onDone: [ + { + actions: ["assignTemplates"], target: "done", - actions: ["assignTemplates", "clearTemplatesError"], }, - onError: { + ], + onError: [ + { + actions: "assignGetTemplatesError", target: "error", - actions: "assignTemplatesError", }, - }, - tags: "loading", + ], }, - done: {}, - error: {}, + tags: "loading", }, + done: {}, + error: {}, }, +}, { actions: { assignOrganizations: assign({ organizations: (_, event) => event.data, }), - assignOrganizationsError: assign({ - organizationsError: (_, event) => event.data, + assignGetOrganizationsError: assign({ + getOrganizationsError: (_, event) => event.data, }), - clearOrganizationsError: assign((context) => ({ + clearGetOrganizationsError: assign((context) => ({ ...context, - organizationsError: undefined, + getOrganizationsError: undefined, })), assignTemplates: assign({ templates: (_, event) => event.data, }), - assignTemplatesError: assign({ - templatesError: (_, event) => event.data, + assignGetTemplatesError: assign({ + getTemplatesError: (_, event) => event.data, }), - clearTemplatesError: (context) => assign({ ...context, getWorkspacesError: undefined }), + clearGetTemplatesError: (context) => assign({ ...context, getTemplatesError: undefined }), }, services: { getOrganizations: API.getOrganizations, From e1dbcd9f4ad49c84c6671f561d5124458331502a Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Fri, 9 Sep 2022 02:21:12 +0000 Subject: [PATCH 2/9] Format --- .../xServices/templates/templatesXService.ts | 172 +++++++++--------- 1 file changed, 86 insertions(+), 86 deletions(-) diff --git a/site/src/xServices/templates/templatesXService.ts b/site/src/xServices/templates/templatesXService.ts index 85806cd38414a..139d0e8e454c5 100644 --- a/site/src/xServices/templates/templatesXService.ts +++ b/site/src/xServices/templates/templatesXService.ts @@ -11,96 +11,96 @@ interface TemplatesContext { } export const templatesMachine = -/** @xstate-layout N4IgpgJg5mDOIC5QBcwFsAOAbAhq2AysnmAHQzLICWAdlAPIBOUONVAXnlQPY2wDEEXmVoA3bgGsyFJizadqveEhAZusKopqJQAD0QAWAMwHSATgDsANgCsAJgt2rRuwAYAHBYsAaEAE9EAEZAu1IDMwiIm3dXG0DjdwBfRN9UTFx8IhJyMEpaBmZWDi4lfjBGRm5GUmw8ADMqtBzkWSKFHj4dVXVNDq79BGNTS1sHJxcPL18AhBMjUhtXJaWrOzM7O3cDG2TU9FrM4lRm6joAFX2MuEFhUjFJaVyL9JJlUDUNLX6gpeH1wJcIQs7giVmmiBB5kilgM7iMHmcOxSIDSBzgWWOFFOUGeaIE5Uq1QODUYTQouKub26nz6KgGgV+ULsAOZDhBZjB-kQbhspGWSxC0W2VncSORNG4EDgXVRlIxjzydFa8hKnRUH16vG+gzs4IQwTMYWhjgsRjm9l2KMur3lJ3yFNeXQ1XzpiCsVlcpFW4QMFnisJZeo5UMicQsNjMgRsSL2L0O2SENDATp6Lr0QTcFjCa2cfqsgRNeuC7j5-Ncq3WmwMgUtsptRzIBKqKZpWtd+sz2Y5RjzBYceo2WbNw9hrijZtr1vjqBbmu07cC7iLSWSiSAA */ -createMachine( - { - tsTypes: {} as import("./templatesXService.typegen").Typegen0, - schema: { - context: {} as TemplatesContext, - services: {} as { - getOrganizations: { - data: TypesGen.Organization[] - } - getTemplates: { - data: TypesGen.Template[] - } - }, - }, - id: "templatesState", - initial: "gettingOrganizations", - states: { - gettingOrganizations: { - entry: "clearGetOrganizationsError", - invoke: { - src: "getOrganizations", - id: "getOrganizations", - onDone: [ - { - actions: ["assignOrganizations"], - target: "gettingTemplates", - }, - ], - onError: [ - { - actions: "assignGetOrganizationsError", - target: "error", - }, - ], + /** @xstate-layout N4IgpgJg5mDOIC5QBcwFsAOAbAhq2AysnmAHQzLICWAdlAPIBOUONVAXnlQPY2wDEEXmVoA3bgGsyFJizadqveEhAZusKopqJQAD0QAWAMwHSATgDsANgCsAJgt2rRuwAYAHBYsAaEAE9EAEZAu1IDMwiIm3dXG0DjdwBfRN9UTFx8IhJyMEpaBmZWDi4lfjBGRm5GUmw8ADMqtBzkWSKFHj4dVXVNDq79BGNTS1sHJxcPL18AhBMjUhtXJaWrOzM7O3cDG2TU9FrM4lRm6joAFX2MuEFhUjFJaVyL9JJlUDUNLX6gpeH1wJcIQs7giVmmiBB5kilgM7iMHmcOxSIDSBzgWWOFFOUGeaIE5Uq1QODUYTQouKub26nz6KgGgV+ULsAOZDhBZjB-kQbhspGWSxC0W2VncSORNG4EDgXVRlIxjzydFa8hKnRUH16vG+gzs4IQwTMYWhjgsRjm9l2KMur3lJ3yFNeXQ1XzpiCsVlcpFW4QMFnisJZeo5UMicQsNjMgRsSL2L0O2SENDATp6Lr0QTcFjCa2cfqsgRNeuC7j5-Ncq3WmwMgUtsptRzIBKqKZpWtd+sz2Y5RjzBYceo2WbNw9hrijZtr1vjqBbmu07cC7iLSWSiSAA */ + createMachine( + { + tsTypes: {} as import("./templatesXService.typegen").Typegen0, + schema: { + context: {} as TemplatesContext, + services: {} as { + getOrganizations: { + data: TypesGen.Organization[] + } + getTemplates: { + data: TypesGen.Template[] + } + }, }, - tags: "loading", - }, - gettingTemplates: { - entry: "clearGetTemplatesError", - invoke: { - src: "getTemplates", - id: "getTemplates", - onDone: [ - { - actions: ["assignTemplates"], - target: "done", + id: "templatesState", + initial: "gettingOrganizations", + states: { + gettingOrganizations: { + entry: "clearGetOrganizationsError", + invoke: { + src: "getOrganizations", + id: "getOrganizations", + onDone: [ + { + actions: ["assignOrganizations"], + target: "gettingTemplates", + }, + ], + onError: [ + { + actions: "assignGetOrganizationsError", + target: "error", + }, + ], }, - ], - onError: [ - { - actions: "assignGetTemplatesError", - target: "error", + tags: "loading", + }, + gettingTemplates: { + entry: "clearGetTemplatesError", + invoke: { + src: "getTemplates", + id: "getTemplates", + onDone: [ + { + actions: ["assignTemplates"], + target: "done", + }, + ], + onError: [ + { + actions: "assignGetTemplatesError", + target: "error", + }, + ], }, - ], + tags: "loading", + }, + done: {}, + error: {}, }, - tags: "loading", - }, - done: {}, - error: {}, - }, -}, - { - actions: { - assignOrganizations: assign({ - organizations: (_, event) => event.data, - }), - assignGetOrganizationsError: assign({ - getOrganizationsError: (_, event) => event.data, - }), - clearGetOrganizationsError: assign((context) => ({ - ...context, - getOrganizationsError: undefined, - })), - assignTemplates: assign({ - templates: (_, event) => event.data, - }), - assignGetTemplatesError: assign({ - getTemplatesError: (_, event) => event.data, - }), - clearGetTemplatesError: (context) => assign({ ...context, getTemplatesError: undefined }), }, - services: { - getOrganizations: API.getOrganizations, - getTemplates: async (context) => { - if (!context.organizations || context.organizations.length === 0) { - throw new Error("no organizations") - } - return API.getTemplates(context.organizations[0].id) + { + actions: { + assignOrganizations: assign({ + organizations: (_, event) => event.data, + }), + assignGetOrganizationsError: assign({ + getOrganizationsError: (_, event) => event.data, + }), + clearGetOrganizationsError: assign((context) => ({ + ...context, + getOrganizationsError: undefined, + })), + assignTemplates: assign({ + templates: (_, event) => event.data, + }), + assignGetTemplatesError: assign({ + getTemplatesError: (_, event) => event.data, + }), + clearGetTemplatesError: (context) => assign({ ...context, getTemplatesError: undefined }), + }, + services: { + getOrganizations: API.getOrganizations, + getTemplates: async (context) => { + if (!context.organizations || context.organizations.length === 0) { + throw new Error("no organizations") + } + return API.getTemplates(context.organizations[0].id) + }, }, }, - }, -) + ) From 7c788abd841ae4c2e3027682c1fd17a0f88fe6f1 Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Mon, 12 Sep 2022 17:05:03 +0000 Subject: [PATCH 3/9] Separate error messages --- site/src/i18n/en/index.ts | 2 ++ site/src/i18n/en/templatesPage.json | 6 ++++++ site/src/pages/TemplatesPage/TemplatesPage.tsx | 3 ++- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 14 ++++++++++---- 4 files changed, 20 insertions(+), 5 deletions(-) create mode 100644 site/src/i18n/en/templatesPage.json diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts index d6900f9463100..ea8b8767a1a64 100644 --- a/site/src/i18n/en/index.ts +++ b/site/src/i18n/en/index.ts @@ -1,6 +1,7 @@ import auditLog from "./auditLog.json" import common from "./common.json" import templatePage from "./templatePage.json" +import templatesPage from "./templatesPage.json" import workspacePage from "./workspacePage.json" export const en = { @@ -8,4 +9,5 @@ export const en = { workspacePage, auditLog, templatePage, + templatesPage } diff --git a/site/src/i18n/en/templatesPage.json b/site/src/i18n/en/templatesPage.json new file mode 100644 index 0000000000000..34d56b2788f07 --- /dev/null +++ b/site/src/i18n/en/templatesPage.json @@ -0,0 +1,6 @@ +{ + "errors": { + "getOrganizationError": "Something went wrong fetching organizations.", + "getTemplatesError": "Something went wrong fetching templates." + } +} diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx index 36bfd51655231..bdab3edeae3b1 100644 --- a/site/src/pages/TemplatesPage/TemplatesPage.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPage.tsx @@ -21,7 +21,8 @@ export const TemplatesPage: React.FC = () => { templates={templates} canCreateTemplate={authState.context.permissions?.createTemplates} loading={templatesState.hasTag("loading")} - error={getOrganizationsError ?? getTemplatesError} + getOrganizationsError={getOrganizationsError} + getTemplatesError={getTemplatesError} /> ) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 8f188f9be011c..898dd13b784b3 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -10,6 +10,7 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import useTheme from "@material-ui/styles/useTheme" import { ErrorSummary } from "components/ErrorSummary/ErrorSummary" import { FC } from "react" +import { useTranslation } from "react-i18next" import { useNavigate } from "react-router-dom" import { createDayString } from "util/createDayString" import * as TypesGen from "../../api/typesGenerated" @@ -77,14 +78,16 @@ export interface TemplatesPageViewProps { loading?: boolean canCreateTemplate?: boolean templates?: TypesGen.Template[] - error?: Error | unknown + getOrganizationsError?: Error | unknown + getTemplatesError?: Error | unknown } export const TemplatesPageView: FC> = (props) => { const styles = useStyles() const navigate = useNavigate() + const { t } = useTranslation("templatesPage") const theme: Theme = useTheme() - const empty = !props.loading && !props.error && !props.templates?.length + const empty = !props.loading && !props.getOrganizationsError && !props.getTemplatesError && !props.templates?.length return ( @@ -116,9 +119,12 @@ export const TemplatesPageView: FC - {props.error ? ( - + {props.getOrganizationsError ? ( + ) : ( + props.getTemplatesError ? ( + + ) : From 380d6adbbbb0a3823e23251b6e6e94ef88983931 Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Mon, 12 Sep 2022 17:13:46 +0000 Subject: [PATCH 4/9] Fix story --- site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx index 859ab80ec43d5..c4a4d453267d3 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx @@ -50,4 +50,4 @@ export const EmptyCannotCreate = Template.bind({}) EmptyCannotCreate.args = {} export const Error = Template.bind({}) -Error.args = { error: makeMockApiError({ message: "Something went wrong fetching templates." }) } +Error.args = { getTemplatesError: makeMockApiError({ message: "Something went wrong fetching templates." }) } From 302b8534ba34b99288622589225965fd0d47c7bb Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Mon, 12 Sep 2022 17:15:17 +0000 Subject: [PATCH 5/9] Format --- site/src/i18n/en/index.ts | 2 +- .../TemplatesPageView.stories.tsx | 4 +++- .../pages/TemplatesPage/TemplatesPageView.tsx | 19 ++++++++++++++----- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts index ea8b8767a1a64..32fe288646865 100644 --- a/site/src/i18n/en/index.ts +++ b/site/src/i18n/en/index.ts @@ -9,5 +9,5 @@ export const en = { workspacePage, auditLog, templatePage, - templatesPage + templatesPage, } diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx index c4a4d453267d3..05a2c93e06616 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx @@ -50,4 +50,6 @@ export const EmptyCannotCreate = Template.bind({}) EmptyCannotCreate.args = {} export const Error = Template.bind({}) -Error.args = { getTemplatesError: makeMockApiError({ message: "Something went wrong fetching templates." }) } +Error.args = { + getTemplatesError: makeMockApiError({ message: "Something went wrong fetching templates." }), +} diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 898dd13b784b3..83474f8fec56d 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -87,7 +87,11 @@ export const TemplatesPageView: FC @@ -120,11 +124,16 @@ export const TemplatesPageView: FC {props.getOrganizationsError ? ( - + + ) : props.getTemplatesError ? ( + ) : ( - props.getTemplatesError ? ( - - ) :
From 883ddc13b9acaa728f2b80a12eb5fac9101406fc Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Mon, 12 Sep 2022 17:26:53 +0000 Subject: [PATCH 6/9] Format --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index dfe60872566ac..f843bc0ff678f 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -207,11 +207,13 @@ export const TemplatesPageView: FC + {template.created_by_name} +
From d01a45d204d37bde5eef48a32813074da020ade6 Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Mon, 12 Sep 2022 19:59:38 +0000 Subject: [PATCH 7/9] Fix imports --- site/src/AppRouter.tsx | 2 +- site/src/pages/TemplatesPage/TemplatesPage.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 55c4a975371db..045f25aa3a9c3 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -16,7 +16,7 @@ import { NotFoundPage } from "./pages/404Page/404Page" import { CliAuthenticationPage } from "./pages/CliAuthPage/CliAuthPage" import { HealthzPage } from "./pages/HealthzPage/HealthzPage" import { LoginPage } from "./pages/LoginPage/LoginPage" -import TemplatesPage from "./pages/TemplatesPage/TemplatesPage" +import { TemplatesPage } from "./pages/TemplatesPage/TemplatesPage" import { AccountPage } from "./pages/UserSettingsPage/AccountPage/AccountPage" import { SecurityPage } from "./pages/UserSettingsPage/SecurityPage/SecurityPage" import { SSHKeysPage } from "./pages/UserSettingsPage/SSHKeysPage/SSHKeysPage" diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx index 608f9d3a95790..d5b2ec4477c7d 100644 --- a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx @@ -4,7 +4,7 @@ import * as CreateDayString from "util/createDayString" import { MockTemplate } from "../../testHelpers/entities" import { history, render } from "../../testHelpers/renderHelpers" import { server } from "../../testHelpers/server" -import TemplatesPage from "./TemplatesPage" +import { TemplatesPage } from "./TemplatesPage" import { Language } from "./TemplatesPageView" describe("TemplatesPage", () => { From e31e658d3d98513b9aafccec9dace1d3fc56a801 Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Mon, 12 Sep 2022 20:11:19 +0000 Subject: [PATCH 8/9] Remove unnecessary check --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index f843bc0ff678f..148557ffaebad 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -186,13 +186,11 @@ export const TemplatesPageView: FC - -
- ) : undefined - } + avatar={hasIcon && ( +
+ +
+ )} /> From f845af1dd2c50234a5256570615afb9287036730 Mon Sep 17 00:00:00 2001 From: Presley Pizzo Date: Tue, 13 Sep 2022 13:24:22 +0000 Subject: [PATCH 9/9] Format --- .../pages/TemplatesPage/TemplatesPageView.tsx | 110 +++++++++--------- 1 file changed, 57 insertions(+), 53 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 148557ffaebad..76f5a89d5001c 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -148,7 +148,8 @@ export const TemplatesPageView: FC {props.loading && } - {empty && ( + + {empty ? ( - )} - {props.templates?.map((template) => { - const templatePageLink = `/templates/${template.name}` - const hasIcon = template.icon && template.icon !== "" + ) : ( + props.templates?.map((template) => { + const templatePageLink = `/templates/${template.name}` + const hasIcon = template.icon && template.icon !== "" - return ( - { - if (event.key === "Enter") { - navigate(templatePageLink) - } - }} - className={styles.clickableTableRow} - > - - - - - )} - /> - + return ( + { + if (event.key === "Enter") { + navigate(templatePageLink) + } + }} + className={styles.clickableTableRow} + > + + + + + ) + } + /> + - - - {Language.developerCount(template.active_user_count)} - - + + + {Language.developerCount(template.active_user_count)} + + - - - {createDayString(template.updated_at)} - - + + + {createDayString(template.updated_at)} + + - - - {template.created_by_name} - - + + + {template.created_by_name} + + - -
- -
- - - ) - })} + +
+ +
+ + + ) + }) + )}