From 64300c0c0835c1e12617b2f68c3cc6c36c14bafe Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 19 Aug 2022 14:15:28 +0000
Subject: [PATCH 1/2] Display icon in the templates list

---
 .../TemplateSettingsForm.tsx                  | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
index 0598d0d87b946..8693709d7a4ee 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -1,3 +1,5 @@
+import InputAdornment from "@material-ui/core/InputAdornment"
+import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { Template, UpdateTemplateMeta } from "api/typesGenerated"
 import { FormFooter } from "components/FormFooter/FormFooter"
@@ -10,6 +12,7 @@ import * as Yup from "yup"
 export const Language = {
   nameLabel: "Name",
   descriptionLabel: "Description",
+  iconLabel: "Icon",
   maxTtlLabel: "Max TTL",
   // This is the same from the CLI on https://github.com/coder/coder/blob/546157b63ef9204658acf58cb653aa9936b70c49/cli/templateedit.go#L59
   maxTtlHelperText: "Edit the template maximum time before shutdown in milliseconds",
@@ -45,6 +48,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
       name: template.name,
       description: template.description,
       max_ttl_ms: template.max_ttl_ms,
+      icon: template.icon,
     },
     validationSchema,
     onSubmit: (data) => {
@@ -53,6 +57,8 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
     initialTouched,
   })
   const getFieldHelpers = getFormHelpersWithError<UpdateTemplateMeta>(form, error)
+  const styles = useStyles()
+  const hasIcon = form.values.icon && form.values.icon !== ""
 
   return (
     <form onSubmit={form.handleSubmit} aria-label={Language.formAriaLabel}>
@@ -77,6 +83,29 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
           rows={2}
         />
 
+        <TextField
+          {...getFieldHelpers("icon")}
+          disabled={isSubmitting}
+          fullWidth
+          label={Language.iconLabel}
+          variant="outlined"
+          InputProps={{
+            endAdornment: hasIcon ? (
+              <InputAdornment position="end">
+                <img
+                  alt=""
+                  src={form.values.icon}
+                  className={styles.adornment}
+                  // 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,
+          }}
+        />
+
         <TextField
           {...getFieldHelpers("max_ttl_ms")}
           helperText={Language.maxTtlHelperText}
@@ -92,3 +121,10 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
     </form>
   )
 }
+
+const useStyles = makeStyles((theme) => ({
+  adornment: {
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  },
+}))

From 400351f641d87f936cdd5ef1e72176f293da3019 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 19 Aug 2022 15:50:44 +0000
Subject: [PATCH 2/2] Display icon in table view

---
 .../TemplateSettingsPage.test.tsx                 |  7 ++++++-
 .../TemplatesPage/TemplatesPageView.stories.tsx   |  2 ++
 .../src/pages/TemplatesPage/TemplatesPageView.tsx | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
index d28d5aa01bf7c..78554885f8209 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
@@ -23,6 +23,7 @@ const fillAndSubmitForm = async ({
   name,
   description,
   max_ttl_ms,
+  icon,
 }: Omit<Required<UpdateTemplateMeta>, "min_autostart_interval_ms">) => {
   const nameField = await screen.findByLabelText(FormLanguage.nameLabel)
   await userEvent.clear(nameField)
@@ -32,6 +33,10 @@ const fillAndSubmitForm = async ({
   await userEvent.clear(descriptionField)
   await userEvent.type(descriptionField, description)
 
+  const iconField = await screen.findByLabelText(FormLanguage.iconLabel)
+  await userEvent.clear(iconField)
+  await userEvent.type(iconField, icon)
+
   const maxTtlField = await screen.findByLabelText(FormLanguage.maxTtlLabel)
   await userEvent.clear(maxTtlField)
   await userEvent.type(maxTtlField, max_ttl_ms.toString())
@@ -54,7 +59,7 @@ describe("TemplateSettingsPage", () => {
       name: "edited-template-name",
       description: "Edited description",
       max_ttl_ms: 4000,
-      icon: "/icons/new-icon.png",
+      icon: "/icon/code.svg",
     }
     jest.spyOn(API, "updateTemplateMeta").mockResolvedValueOnce({
       ...MockTemplate,
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
index a72c8024503f8..f97e94456a026 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
@@ -17,11 +17,13 @@ AllStates.args = {
     {
       ...MockTemplate,
       description: "🚀 Some magical template that does some magical things!",
+      icon: "/icon/goland.svg",
     },
     {
       ...MockTemplate,
       workspace_owner_count: 150,
       description: "😮 Wow, this one has a bunch of usage!",
+      icon: "",
     },
   ],
 }
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 948b511dfbe61..4127c72fe9bde 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -142,6 +142,8 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
             )}
             {props.templates?.map((template) => {
               const templatePageLink = `/templates/${template.name}`
+              const hasIcon = template.icon && template.icon !== ""
+
               return (
                 <TableRow
                   key={template.id}
@@ -160,6 +162,13 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
                       title={template.name}
                       subtitle={template.description}
                       highlightTitle
+                      avatar={
+                        hasIcon ? (
+                          <div className={styles.templateIconWrapper}>
+                            <img alt="" src={template.icon} />
+                          </div>
+                        ) : undefined
+                      }
                     />
                   </TableCellLink>
 
@@ -211,4 +220,10 @@ const useStyles = makeStyles((theme) => ({
   arrowCell: {
     display: "flex",
   },
+  templateIconWrapper: {
+    // Same size then the avatar component
+    width: 36,
+    height: 36,
+    padding: 2,
+  },
 }))

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3598.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3598.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3598.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3598.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>