coder · BrunoQuaresma · Jan 18, 2023 · Jan 17, 2023 · Jan 17, 2023 · Jan 18, 2023
diff --git a/.gitignore b/.gitignore
@@ -36,6 +36,9 @@ cli/testdata/.gen-golden
 /dist/
 site/out/
 
+# Bundle analysis
+site/stats/
+
 *.tfstate
 *.tfstate.backup
 *.tfplan

diff --git a/site/package.json b/site/package.json
@@ -23,7 +23,8 @@
     "test": "jest --selectProjects test",
     "test:coverage": "jest --selectProjects test --collectCoverage",
     "test:watch": "jest --selectProjects test --watch",
-    "typegen": "xstate typegen 'src/**/*.ts'"
+    "typegen": "xstate typegen 'src/**/*.ts'",
+    "stats": "STATS=true yarn build && npx http-server ./stats -p 8081 -c-1"
   },
   "dependencies": {
     "@emoji-mart/data": "1.0.5",
@@ -56,6 +57,7 @@
     "i18next": "21.9.1",
     "js-untar": "2.0.0",
     "just-debounce-it": "3.1.1",
+    "lodash": "4.17.21",
     "playwright": "^1.29.2",
     "react": "18.2.0",
     "react-chartjs-2": "4.3.1",
@@ -67,6 +69,7 @@
     "react-router-dom": "6.4.1",
     "react-syntax-highlighter": "15.5.0",
     "remark-gfm": "3.0.1",
+    "rollup-plugin-visualizer": "5.9.0",
     "sourcemapped-stacktrace": "1.1.11",
     "tzdata": "1.0.30",
     "ua-parser-js": "1.0.2",

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -1,18 +1,17 @@
 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 TextField 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"
+import { IconFieldProps } from "./types"
 
-export const IconField: FC<
-  TextFieldProps & { onPickEmoji: (value: string) => void }
-> = ({ onPickEmoji, ...textFieldProps }) => {
+const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   if (
     typeof textFieldProps.value !== "string" &&
     typeof textFieldProps.value !== "undefined"
@@ -111,3 +110,5 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: theme.spacing(0.5),
   },
 }))
+
+export default IconField
diff --git a/site/src/components/IconField/LazyIconField.tsx b/site/src/components/IconField/LazyIconField.tsx
@@ -0,0 +1,12 @@
+import { lazy, FC, Suspense } from "react"
+import { IconFieldProps } from "./types"
+
+const IconField = lazy(() => import("./IconField"))
+
+export const LazyIconField: FC<IconFieldProps> = (props) => {
+  return (
+    <Suspense>
+      <IconField {...props} />
+    </Suspense>
+  )
+}
diff --git a/site/src/components/IconField/types.ts b/site/src/components/IconField/types.ts
@@ -0,0 +1,5 @@
+import { TextFieldProps } from "@material-ui/core/TextField"
+
+export type IconFieldProps = TextFieldProps & {
+  onPickEmoji: (value: string) => void
+}
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -7,7 +7,6 @@ import {
   TemplateExample,
 } from "api/typesGenerated"
 import { FormFooter } from "components/FormFooter/FormFooter"
-import { IconField } from "components/IconField/IconField"
 import { ParameterInput } from "components/ParameterInput/ParameterInput"
 import { Stack } from "components/Stack/Stack"
 import {
@@ -23,6 +22,7 @@ import { CreateTemplateData } from "xServices/createTemplate/createTemplateXServ
 import * as Yup from "yup"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
+import { LazyIconField } from "components/IconField/LazyIconField"
 
 const validationSchema = Yup.object({
   name: nameValidator("Name"),
@@ -154,7 +154,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
               variant="outlined"
             />
 
-            <IconField
+            <LazyIconField
               {...getFieldHelpers("icon")}
               disabled={isSubmitting}
               onChange={onChangeTrimmed(form)}

diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -1,21 +1,14 @@
-import data from "@emoji-mart/data/sets/14/twitter.json"
-import Picker from "@emoji-mart/react"
-import Button from "@material-ui/core/Button"
-import InputAdornment from "@material-ui/core/InputAdornment"
-import Popover from "@material-ui/core/Popover"
-import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { Group } from "api/typesGenerated"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
-import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 import { FormFooter } from "components/FormFooter/FormFooter"
 import { FullPageForm } from "components/FullPageForm/FullPageForm"
+import { LazyIconField } from "components/IconField/LazyIconField"
 import { FullScreenLoader } from "components/Loader/FullScreenLoader"
 import { Margins } from "components/Margins/Margins"
 import { useFormik } from "formik"
-import { useRef, useState, FC } from "react"
+import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { colors } from "theme/colors"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
 import * as Yup from "yup"
 
@@ -37,7 +30,6 @@ const UpdateGroupForm: FC<{
   onCancel: () => void
   isLoading: boolean
 }> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
-  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
   const form = useFormik<FormData>({
     initialValues: {
       name: group.name,
@@ -48,9 +40,6 @@ const UpdateGroupForm: FC<{
     onSubmit,
   })
   const getFieldHelpers = getFormHelpers<FormData>(form, errors)
-  const hasIcon = form.values.avatar_url && form.values.avatar_url !== ""
-  const emojiButtonRef = useRef<HTMLButtonElement>(null)
-  const styles = useStyles()
   const { t } = useTranslation("common")
 
   return (
@@ -65,65 +54,16 @@ const UpdateGroupForm: FC<{
           label="Name"
           variant="outlined"
         />
-        <TextField
+
+        <LazyIconField
           {...getFieldHelpers("avatar_url")}
           onChange={onChangeTrimmed(form)}
-          autoFocus
           fullWidth
-          label="Icon"
+          label={t("form.fields.icon")}
           variant="outlined"
-          InputProps={{
-            endAdornment: hasIcon ? (
-              <InputAdornment position="end">
-                <img
-                  alt=""
-                  src={form.values.avatar_url}
-                  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,
-          }}
+          onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
         />
 
-        <Button
-          fullWidth
-          ref={emojiButtonRef}
-          variant="outlined"
-          size="small"
-          endIcon={<OpenDropdown />}
-          onClick={() => {
-            setIsEmojiPickerOpen((v) => !v)
-          }}
-        >
-          {t("emojiPicker.select")}
-        </Button>
-
-        <Popover
-          id="emoji"
-          open={isEmojiPickerOpen}
-          anchorEl={emojiButtonRef.current}
-          onClose={() => {
-            setIsEmojiPickerOpen(false)
-          }}
-        >
-          <Picker
-            theme="dark"
-            data={data}
-            onEmojiSelect={(emojiData) => {
-              form
-                .setFieldValue("avatar_url", `/emojis/${emojiData.unified}.png`)
-                .catch((ex) => {
-                  console.error(ex)
-                })
-              setIsEmojiPickerOpen(false)
-            }}
-          />
-        </Popover>
-
         <TextField
           {...getFieldHelpers("quota_allowance")}
           onChange={onChangeTrimmed(form)}
@@ -182,21 +122,4 @@ export const SettingsGroupPageView: FC<SettingsGroupPageViewProps> = ({
   )
 }
 
-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),
-  },
-  iconField: {
-    paddingBottom: theme.spacing(0.5),
-  },
-}))
-
 export default SettingsGroupPageView
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -1,20 +1,12 @@
 import Box from "@material-ui/core/Box"
 import Checkbox from "@material-ui/core/Checkbox"
 import Typography from "@material-ui/core/Typography"
-import data from "@emoji-mart/data/sets/14/twitter.json"
-import Picker from "@emoji-mart/react"
-import Button from "@material-ui/core/Button"
-import InputAdornment from "@material-ui/core/InputAdornment"
-import Popover from "@material-ui/core/Popover"
-import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { Template, UpdateTemplateMeta } from "api/typesGenerated"
-import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 import { FormFooter } from "components/FormFooter/FormFooter"
 import { Stack } from "components/Stack/Stack"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
-import { FC, useRef, useState } from "react"
-import { colors } from "theme/colors"
+import { FC } from "react"
 import {
   getFormHelpers,
   nameValidator,
@@ -25,6 +17,7 @@ import * as Yup from "yup"
 import i18next from "i18next"
 import { useTranslation } from "react-i18next"
 import { Maybe } from "components/Conditionals/Maybe"
+import { LazyIconField } from "components/IconField/LazyIconField"
 
 const TTLHelperText = ({ ttl }: { ttl?: number }) => {
   const { t } = useTranslation("templateSettingsPage")
@@ -81,7 +74,6 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
   isSubmitting,
   initialTouched,
 }) => {
-  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
   const validationSchema = getValidationSchema()
   const form: FormikContextType<UpdateTemplateMeta> =
     useFormik<UpdateTemplateMeta>({
@@ -108,10 +100,6 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
       initialTouched,
     })
   const getFieldHelpers = getFormHelpers<UpdateTemplateMeta>(form, error)
-  const styles = useStyles()
-  const hasIcon = form.values.icon && form.values.icon !== ""
-  const emojiButtonRef = useRef<HTMLButtonElement>(null)
-
   const { t } = useTranslation("templateSettingsPage")
 
   return (
@@ -145,65 +133,15 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
           rows={2}
         />
 
-        <div className={styles.iconField}>
-          <TextField
-            {...getFieldHelpers("icon")}
-            disabled={isSubmitting}
-            fullWidth
-            label={t("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,
-            }}
-          />
-
-          <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
-                form.setFieldValue(
-                  "icon",
-                  `/emojis/${emojiData.unified.replace(/-fe0f$/, "")}.png`,
-                )
-                setIsEmojiPickerOpen(false)
-              }}
-            />
-          </Popover>
-        </div>
+        <LazyIconField
+          {...getFieldHelpers("icon")}
+          disabled={isSubmitting}
+          onChange={onChangeTrimmed(form)}
+          fullWidth
+          label={t("form.fields.icon")}
+          variant="outlined"
+          onPickEmoji={(value) => form.setFieldValue("icon", value)}
+        />
 
         <TextField
           {...getFieldHelpers(
@@ -244,20 +182,3 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
     </form>
   )
 }
-
-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),
-  },
-  iconField: {
-    paddingBottom: theme.spacing(0.5),
-  },
-}))
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -2,7 +2,7 @@ import { FieldError } from "api/errors"
 import { everyOneGroup } from "util/groups"
 import * as Types from "../api/types"
 import * as TypesGen from "../api/typesGenerated"
-import { range } from "lodash"
+import range from "lodash/range"
 import { Permissions } from "xServices/auth/authXService"
 
 export const MockTemplateDAUResponse: TypesGen.TemplateDAUsResponse = {