Fix template Avatar (#5294)

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

@@ -14,6 +14,7 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { makeStyles } from "@material-ui/core/styles"
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm"
 import { FullScreenLoader } from "components/Loader/FullScreenLoader"
+import { SelectedTemplate } from "./SelectedTemplate"
 
 export enum CreateWorkspaceErrors {
   GET_TEMPLATES_ERROR = "getTemplatesError",
@@ -171,28 +172,7 @@ export const CreateWorkspacePageView: FC<
               className={styles.formSectionFields}
             >
               {props.selectedTemplate && (
-                <Stack
+                <SelectedTemplate template={props.selectedTemplate} />
-                  direction="row"
-                  spacing={2}
-                  className={styles.template}
-                  alignItems="center"
-                >
-                  <div className={styles.templateIcon}>
-                    <img src={props.selectedTemplate.icon} alt="" />
-                  </div>
-                  <Stack direction="column" spacing={0.5}>
-                    <span className={styles.templateName}>
-                      {props.selectedTemplate.display_name.length > 0
-                        ? props.selectedTemplate.display_name
-                        : props.selectedTemplate.name}
-                    </span>
-                    {props.selectedTemplate.description && (
-                      <span className={styles.templateDescription}>
-                        {props.selectedTemplate.description}
-                      </span>
-                    )}
-                  </Stack>
-                </Stack>
               )}
 
               <TextField
@@ -327,31 +307,6 @@ const useStyles = makeStyles((theme) => ({
   formSectionFields: {
     width: "100%",
   },
-
-  template: {
-    padding: theme.spacing(2.5, 3),
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.divider}`,
-  },
-
-  templateName: {
-    fontSize: 16,
-  },
-
-  templateDescription: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-  },
-
-  templateIcon: {
-    width: theme.spacing(5),
-    lineHeight: 1,
-
-    "& img": {
-      width: "100%",
-    },
-  },
 }))
 
 const useFormFooterStyles = makeStyles((theme) => ({

site/src/pages/CreateWorkspacePage/SelectedTemplate.stories.tsx

@@ -0,0 +1,25 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import { MockTemplate } from "../../testHelpers/entities"
+import { SelectedTemplate, SelectedTemplateProps } from "./SelectedTemplate"
+
+export default {
+  title: "components/SelectedTemplate",
+  component: SelectedTemplate,
+} as ComponentMeta<typeof SelectedTemplate>
+
+const Template: Story<SelectedTemplateProps> = (args) => (
+  <SelectedTemplate {...args} />
+)
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  template: MockTemplate,
+}
+
+export const WithoutIcon = Template.bind({})
+WithoutIcon.args = {
+  template: {
+    ...MockTemplate,
+    icon: "",
+  },
+}

site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx

@@ -0,0 +1,70 @@
+import Avatar from "@material-ui/core/Avatar"
+import { makeStyles } from "@material-ui/core/styles"
+import { Template } from "api/typesGenerated"
+import { Stack } from "components/Stack/Stack"
+import React, { FC } from "react"
+import { firstLetter } from "util/firstLetter"
+
+export interface SelectedTemplateProps {
+  template: Template
+}
+
+export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
+  const styles = useStyles()
+
+  return (
+    <Stack
+      direction="row"
+      spacing={3}
+      className={styles.template}
+      alignItems="center"
+    >
+      <div className={styles.templateIcon}>
+        {template.icon === "" ? (
+          <Avatar>{firstLetter(template.name)}</Avatar>
+        ) : (
+          <img src={template.icon} alt="" />
+        )}
+      </div>
+      <Stack direction="column" spacing={0.5}>
+        <span className={styles.templateName}>
+          {template.display_name.length > 0
+            ? template.display_name
+            : template.name}
+        </span>
+        {template.description && (
+          <span className={styles.templateDescription}>
+            {template.description}
+          </span>
+        )}
+      </Stack>
+    </Stack>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  template: {
+    padding: theme.spacing(2.5, 3),
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+  },
+
+  templateName: {
+    fontSize: 16,
+  },
+
+  templateDescription: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+  },
+
+  templateIcon: {
+    width: theme.spacing(4),
+    lineHeight: 1,
+
+    "& img": {
+      width: "100%",
+    },
+  },
+}))