coder · BrunoQuaresma · Dec 21, 2022 · Dec 6, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -92,6 +92,15 @@ const GitAuthPage = lazy(() => import("./pages/GitAuthPage/GitAuthPage"))
 const TemplateVersionPage = lazy(
   () => import("./pages/TemplateVersionPage/TemplateVersionPage"),
 )
+const StarterTemplatesPage = lazy(
+  () => import("./pages/StarterTemplatesPage/StarterTemplatesPage"),
+)
+const StarterTemplatePage = lazy(
+  () => import("pages/StarterTemplatePage/StarterTemplatePage"),
+)
+const CreateTemplatePage = lazy(
+  () => import("./pages/CreateTemplatePage/CreateTemplatePage"),
+)
 
 export const AppRouter: FC = () => {
   const xServices = useContext(XServiceContext)
@@ -141,6 +150,26 @@ export const AppRouter: FC = () => {
           }
         />
 
+        <Route path="starter-templates">
+          <Route
+            index
+            element={
+              <AuthAndFrame>
+                <StarterTemplatesPage />
+              </AuthAndFrame>
+            }
+          />
+
+          <Route
+            path=":exampleId"
+            element={
+              <AuthAndFrame>
+                <StarterTemplatePage />
+              </AuthAndFrame>
+            }
+          ></Route>
+        </Route>
+
         <Route path="templates">
           <Route
             index
@@ -151,6 +180,15 @@ export const AppRouter: FC = () => {
             }
           />
 
+          <Route
+            path="new"
+            element={
+              <RequireAuth>
+                <CreateTemplatePage />
+              </RequireAuth>
+            }
+          />
+
           <Route path=":template">
             <Route
               index

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -259,6 +259,37 @@ export const getPreviousTemplateVersionByName = async (
   }
 }
 
+export const createTemplateVersion = async (
+  organizationId: string,
+  data: TypesGen.CreateTemplateVersionRequest,
+): Promise<TypesGen.TemplateVersion> => {
+  const response = await axios.post<TypesGen.TemplateVersion>(
+    `/api/v2/organizations/${organizationId}/templateversions`,
+    data,
+  )
+  return response.data
+}
+
+export const getTemplateVersionParameters = async (
+  versionId: string,
+): Promise<TypesGen.Parameter[]> => {
+  const response = await axios.get(
+    `/api/v2/templateversions/${versionId}/parameters`,
+  )
+  return response.data
+}
+
+export const createTemplate = async (
+  organizationId: string,
+  data: TypesGen.CreateTemplateRequest,
+): Promise<TypesGen.Template> => {
+  const response = await axios.post(
+    `/api/v2/organizations/${organizationId}/templates`,
+    data,
+  )
+  return response.data
+}
+
 export const updateTemplateMeta = async (
   templateId: string,
   data: TypesGen.UpdateTemplateMeta,
@@ -703,3 +734,32 @@ export const setServiceBanner = async (
   const response = await axios.put(`/api/v2/service-banner`, b)
   return response.data
 }
+
+export const getTemplateExamples = async (
+  organizationId: string,
+): Promise<TypesGen.TemplateExample[]> => {
+  const response = await axios.get(
+    `/api/v2/organizations/${organizationId}/templates/examples`,
+  )
+  return response.data
+}
+
+export const uploadTemplateFile = async (
+  file: File,
+): Promise<TypesGen.UploadResponse> => {
+  const response = await axios.post("/api/v2/files", file, {
+    headers: {
+      "Content-Type": "application/x-tar",
+    },
+  })
+  return response.data
+}
+
+export const getTemplateVersionLogs = async (
+  versionId: string,
+): Promise<TypesGen.ProvisionerJobLog[]> => {
+  const response = await axios.get<TypesGen.ProvisionerJobLog[]>(
+    `/api/v2/templateversions/${versionId}/logs`,
+  )
+  return response.data
+}
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -63,6 +63,10 @@ export const mapApiErrorToFieldErrors = (
   return result
 }
 
+export const isApiValidationError = (error: unknown): error is ApiError => {
+  return isApiError(error) && hasApiFieldErrors(error)
+}
+
 /**
  *
  * @param error

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -0,0 +1,113 @@
+import Button from "@material-ui/core/Button"
+import InputAdornment from "@material-ui/core/InputAdornment"
+import Popover from "@material-ui/core/Popover"
+import TextField, { TextFieldProps } from "@material-ui/core/TextField"
+import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
+import { useRef, FC, useState } from "react"
+import Picker from "@emoji-mart/react"
+import { makeStyles } from "@material-ui/core/styles"
+import { colors } from "theme/colors"
+import { useTranslation } from "react-i18next"
+import data from "@emoji-mart/data/sets/14/twitter.json"
+
+export const IconField: FC<
+  TextFieldProps & { onPickEmoji: (value: string) => void }
+> = ({ onPickEmoji, ...textFieldProps }) => {
+  if (
+    typeof textFieldProps.value !== "string" &&
+    typeof textFieldProps.value !== "undefined"
+  ) {
+    throw new Error(`Invalid icon value "${typeof textFieldProps.value}"`)
+  }
+
+  const styles = useStyles()
+  const emojiButtonRef = useRef<HTMLButtonElement>(null)
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
+  const { t } = useTranslation("templateSettingsPage")
+  const hasIcon = textFieldProps.value && textFieldProps.value !== ""
+
+  return (
+    <div className={styles.iconField}>
+      <TextField
+        {...textFieldProps}
+        fullWidth
+        label={t("iconLabel")}
+        variant="outlined"
+        InputProps={{
+          endAdornment: hasIcon ? (
+            <InputAdornment position="end" className={styles.adornment}>
+              <img
+                alt=""
+                src={textFieldProps.value}
+                // This prevent browser to display the ugly error icon if the
+                // image path is wrong or user didn't finish typing the url
+                onError={(e) => (e.currentTarget.style.display = "none")}
+                onLoad={(e) => (e.currentTarget.style.display = "inline")}
+              />
+            </InputAdornment>
+          ) : undefined,
+        }}
+      />
+
+      <Button
+        fullWidth
+        ref={emojiButtonRef}
+        variant="outlined"
+        size="small"
+        endIcon={<OpenDropdown />}
+        onClick={() => {
+          setIsEmojiPickerOpen((v) => !v)
+        }}
+      >
+        {t("selectEmoji")}
+      </Button>
+
+      <Popover
+        id="emoji"
+        open={isEmojiPickerOpen}
+        anchorEl={emojiButtonRef.current}
+        onClose={() => {
+          setIsEmojiPickerOpen(false)
+        }}
+      >
+        <Picker
+          theme="dark"
+          data={data}
+          onEmojiSelect={(emojiData) => {
+            // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
+            const value = `/emojis/${emojiData.unified.replace(
+              /-fe0f$/,
+              "",
+            )}.png`
+            onPickEmoji(value)
+            setIsEmojiPickerOpen(false)
+          }}
+        />
+      </Popover>
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  "@global": {
+    "em-emoji-picker": {
+      "--rgb-background": theme.palette.background.paper,
+      "--rgb-input": colors.gray[17],
+      "--rgb-color": colors.gray[4],
+    },
+  },
+  adornment: {
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+
+    "& img": {
+      maxWidth: "100%",
+    },
+  },
+  iconField: {
+    paddingBottom: theme.spacing(0.5),
+  },
+}))
diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx
@@ -1,4 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
+import { LogLevel } from "api/typesGenerated"
 import dayjs from "dayjs"
 import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
@@ -7,6 +8,7 @@ import { combineClasses } from "../../util/combineClasses"
 interface Line {
   time: string
   output: string
+  level: LogLevel
 }
 
 export interface LogsProps {
@@ -22,15 +24,17 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
 
   return (
     <div className={combineClasses([className, styles.root])}>
-      {lines.map((line, idx) => (
-        <div className={styles.line} key={idx}>
-          <span className={styles.time}>
-            {dayjs(line.time).format(`HH:mm:ss.SSS`)}
-          </span>
-          <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
-          <span>{line.output}</span>
-        </div>
-      ))}
+      <div className={styles.scrollWrapper}>
+        {lines.map((line, idx) => (
+          <div className={combineClasses([styles.line, line.level])} key={idx}>
+            <span className={styles.time}>
+              {dayjs(line.time).format(`HH:mm:ss.SSS`)}
+            </span>
+            <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            <span>{line.output}</span>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
@@ -43,13 +47,25 @@ const useStyles = makeStyles((theme) => ({
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 13,
     wordBreak: "break-all",
-    padding: theme.spacing(2),
+    padding: theme.spacing(2, 0),
     borderRadius: theme.shape.borderRadius,
     overflowX: "auto",
   },
+  scrollWrapper: {
+    width: "fit-content",
+  },
   line: {
     // Whitespace is significant in terminal output for alignment
     whiteSpace: "pre",
+    padding: theme.spacing(0, 3),
+
+    "&.error": {
+      backgroundColor: theme.palette.error.dark,
+    },
+
+    "&.warning": {
+      backgroundColor: theme.palette.warning.dark,
+    },
   },
   space: {
     userSelect: "none",

diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
@@ -48,14 +48,14 @@ export const Markdown: FC<{ children: string }> = ({ children }) => {
             <SyntaxHighlighter
               style={darcula}
               // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined
-              language={match[1] ?? "language-shell"}
+              language={match[1].toLowerCase() ?? "language-shell"}
               useInlineStyles={false}
               // Use inline styles does not work correctly
               // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/329
               codeTagProps={{ style: {} }}
               {...props}
             >
-              {String(children).replace(/\n$/, "")}
+              {String(children)}
             </SyntaxHighlighter>
           ) : (
             <code className={styles.codeWithoutLanguage} {...props}>
@@ -135,19 +135,24 @@ const useStyles = makeStyles((theme) => ({
       background: theme.palette.background.paperLight,
       borderRadius: theme.shape.borderRadius,
       padding: theme.spacing(2, 3),
+      overflowX: "auto",
 
       "& code": {
         color: theme.palette.text.secondary,
       },
 
-      "& .key, & .property": {
+      "& .key, & .property, & .inserted, .keyword": {
         color: colors.turquoise[7],
       },
+
+      "& .deleted": {
+        color: theme.palette.error.light,
+      },
     },
   },
 
   codeWithoutLanguage: {
-    padding: theme.spacing(0.5, 1),
+    padding: theme.spacing(0.125, 0.5),
     background: theme.palette.divider,
     borderRadius: 4,
     color: theme.palette.text.primary,