Skip to content

Commit 2117eb4

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: Improve bundle size (#5761)
1 parent 6ed4e21 commit 2117eb4

16 files changed

+84
-209
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ cli/testdata/.gen-golden
3636
/dist/
3737
site/out/
3838

39+
# Bundle analysis
40+
site/stats/
41+
3942
*.tfstate
4043
*.tfstate.backup
4144
*.tfplan

‎.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ cli/testdata/.gen-golden
3939
/dist/
4040
site/out/
4141

42+
# Bundle analysis
43+
site/stats/
44+
4245
*.tfstate
4346
*.tfstate.backup
4447
*.tfplan

‎site/.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ playwright-report/*
3939
../dist/
4040
out/
4141

42+
# Bundle analysis
43+
stats/
44+
4245
*.tfstate
4346
*.tfstate.backup
4447
*.tfplan

‎site/.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ playwright-report/*
3939
../dist/
4040
out/
4141

42+
# Bundle analysis
43+
stats/
44+
4245
*.tfstate
4346
*.tfstate.backup
4447
*.tfplan

‎site/jest.setup.ts

-23
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import "@testing-library/jest-dom"
22
import { cleanup } from "@testing-library/react"
33
import crypto from "crypto"
4-
import * as util from "util"
54
import { server } from "./src/testHelpers/server"
65
import "jest-location-mock"
76

@@ -32,27 +31,5 @@ afterEach(() => {
3231
// Clean up after the tests are finished.
3332
afterAll(() => server.close())
3433

35-
// Helper utility to fail jest tests if a console.error is logged
36-
// Pulled from this blog post:
37-
// https://www.benmvp.com/blog/catch-warnings-jest-tests/
38-
39-
// For now, I limited this to just 'error' - but failing on warnings
40-
// would be a nice next step! We may need to filter out some noise
41-
// from material-ui though.
42-
const CONSOLE_FAIL_TYPES = ["error" /* 'warn' */] as const
43-
44-
// Throw errors when a `console.error` or `console.warn` happens
45-
// by overriding the functions
46-
CONSOLE_FAIL_TYPES.forEach((logType: typeof CONSOLE_FAIL_TYPES[number]) => {
47-
global.console[logType] = <Type>(format: string, ...args: Type[]): void => {
48-
throw new Error(
49-
`Failing due to console.${logType} while running test!\n\n${util.format(
50-
format,
51-
...args,
52-
)}`,
53-
)
54-
}
55-
})
56-
5734
// This is needed because we are compiling under `--isolatedModules`
5835
export {}

‎site/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"test:coverage": "jest --selectProjects test --collectCoverage",
2525
"test:watch": "jest --selectProjects test --watch",
2626
"typegen": "xstate typegen 'src/**/*.ts'",
27+
"stats": "STATS=true yarn build && npx http-server ./stats -p 8081 -c-1",
2728
"deadcode": "ts-prune | grep -v \".stories\\|.typegen\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\""
2829
},
2930
"dependencies": {
@@ -58,6 +59,7 @@
5859
"jest-location-mock": "1.0.9",
5960
"js-untar": "2.0.0",
6061
"just-debounce-it": "3.1.1",
62+
"lodash": "4.17.21",
6163
"playwright": "^1.29.2",
6264
"react": "18.2.0",
6365
"react-chartjs-2": "4.3.1",
@@ -69,6 +71,7 @@
6971
"react-router-dom": "6.4.1",
7072
"react-syntax-highlighter": "15.5.0",
7173
"remark-gfm": "3.0.1",
74+
"rollup-plugin-visualizer": "5.9.0",
7275
"sourcemapped-stacktrace": "1.1.11",
7376
"ts-prune": "0.10.3",
7477
"tzdata": "1.0.30",

‎site/src/components/IconField/IconField.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import Button from "@material-ui/core/Button"
22
import InputAdornment from "@material-ui/core/InputAdornment"
33
import Popover from "@material-ui/core/Popover"
4-
import TextField, { TextFieldProps } from "@material-ui/core/TextField"
4+
import TextField from "@material-ui/core/TextField"
55
import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
66
import { useRef, FC, useState } from "react"
77
import Picker from "@emoji-mart/react"
88
import { makeStyles } from "@material-ui/core/styles"
99
import { colors } from "theme/colors"
1010
import { useTranslation } from "react-i18next"
1111
import data from "@emoji-mart/data/sets/14/twitter.json"
12+
import { IconFieldProps } from "./types"
1213

13-
export const IconField: FC<
14-
TextFieldProps & { onPickEmoji: (value: string) => void }
15-
> = ({ onPickEmoji, ...textFieldProps }) => {
14+
const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
1615
if (
1716
typeof textFieldProps.value !== "string" &&
1817
typeof textFieldProps.value !== "undefined"
@@ -111,3 +110,5 @@ const useStyles = makeStyles((theme) => ({
111110
paddingBottom: theme.spacing(0.5),
112111
},
113112
}))
113+
114+
export default IconField

‎site/src/components/IconField/LazyIconField.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { lazy, FC, Suspense } from "react"
2+
import { IconFieldProps } from "./types"
3+
4+
const IconField = lazy(() => import("./IconField"))
5+
6+
export const LazyIconField: FC<IconFieldProps> = (props) => {
7+
return (
8+
<Suspense>
9+
<IconField {...props} />
10+
</Suspense>
11+
)
12+
}

‎site/src/components/IconField/types.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { TextFieldProps } from "@material-ui/core/TextField"
2+
3+
export type IconFieldProps = TextFieldProps & {
4+
onPickEmoji: (value: string) => void
5+
}

‎site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
TemplateExample,
88
} from "api/typesGenerated"
99
import { FormFooter } from "components/FormFooter/FormFooter"
10-
import { IconField } from "components/IconField/IconField"
1110
import { ParameterInput } from "components/ParameterInput/ParameterInput"
1211
import { Stack } from "components/Stack/Stack"
1312
import {
@@ -23,6 +22,7 @@ import { CreateTemplateData } from "xServices/createTemplate/createTemplateXServ
2322
import * as Yup from "yup"
2423
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
2524
import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
25+
import { LazyIconField } from "components/IconField/LazyIconField"
2626

2727
const validationSchema = Yup.object({
2828
name: nameValidator("Name"),
@@ -154,7 +154,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
154154
variant="outlined"
155155
/>
156156

157-
<IconField
157+
<LazyIconField
158158
{...getFieldHelpers("icon")}
159159
disabled={isSubmitting}
160160
onChange={onChangeTrimmed(form)}

‎site/src/pages/GroupsPage/SettingsGroupPageView.tsx

+6-83
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
1-
import data from "@emoji-mart/data/sets/14/twitter.json"
2-
import Picker from "@emoji-mart/react"
3-
import Button from "@material-ui/core/Button"
4-
import InputAdornment from "@material-ui/core/InputAdornment"
5-
import Popover from "@material-ui/core/Popover"
6-
import { makeStyles } from "@material-ui/core/styles"
71
import TextField from "@material-ui/core/TextField"
82
import { Group } from "api/typesGenerated"
93
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
10-
import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
114
import { FormFooter } from "components/FormFooter/FormFooter"
125
import { FullPageForm } from "components/FullPageForm/FullPageForm"
6+
import { LazyIconField } from "components/IconField/LazyIconField"
137
import { FullScreenLoader } from "components/Loader/FullScreenLoader"
148
import { Margins } from "components/Margins/Margins"
159
import { useFormik } from "formik"
16-
import { useRef, useState, FC } from "react"
10+
import { FC } from "react"
1711
import { useTranslation } from "react-i18next"
18-
import { colors } from "theme/colors"
1912
import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
2013
import * as Yup from "yup"
2114

@@ -37,7 +30,6 @@ const UpdateGroupForm: FC<{
3730
onCancel: () => void
3831
isLoading: boolean
3932
}> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
40-
const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
4133
const form = useFormik<FormData>({
4234
initialValues: {
4335
name: group.name,
@@ -48,9 +40,6 @@ const UpdateGroupForm: FC<{
4840
onSubmit,
4941
})
5042
const getFieldHelpers = getFormHelpers<FormData>(form, errors)
51-
const hasIcon = form.values.avatar_url && form.values.avatar_url !== ""
52-
const emojiButtonRef = useRef<HTMLButtonElement>(null)
53-
const styles = useStyles()
5443
const { t } = useTranslation("common")
5544

5645
return (
@@ -65,65 +54,16 @@ const UpdateGroupForm: FC<{
6554
label="Name"
6655
variant="outlined"
6756
/>
68-
<TextField
57+
58+
<LazyIconField
6959
{...getFieldHelpers("avatar_url")}
7060
onChange={onChangeTrimmed(form)}
71-
autoFocus
7261
fullWidth
73-
label="Icon"
62+
label={t("form.fields.icon")}
7463
variant="outlined"
75-
InputProps={{
76-
endAdornment: hasIcon ? (
77-
<InputAdornment position="end">
78-
<img
79-
alt=""
80-
src={form.values.avatar_url}
81-
className={styles.adornment}
82-
// This prevent browser to display the ugly error icon if the
83-
// image path is wrong or user didn't finish typing the url
84-
onError={(e) => (e.currentTarget.style.display = "none")}
85-
onLoad={(e) => (e.currentTarget.style.display = "inline")}
86-
/>
87-
</InputAdornment>
88-
) : undefined,
89-
}}
64+
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
9065
/>
9166

92-
<Button
93-
fullWidth
94-
ref={emojiButtonRef}
95-
variant="outlined"
96-
size="small"
97-
endIcon={<OpenDropdown />}
98-
onClick={() => {
99-
setIsEmojiPickerOpen((v) => !v)
100-
}}
101-
>
102-
{t("emojiPicker.select")}
103-
</Button>
104-
105-
<Popover
106-
id="emoji"
107-
open={isEmojiPickerOpen}
108-
anchorEl={emojiButtonRef.current}
109-
onClose={() => {
110-
setIsEmojiPickerOpen(false)
111-
}}
112-
>
113-
<Picker
114-
theme="dark"
115-
data={data}
116-
onEmojiSelect={(emojiData) => {
117-
form
118-
.setFieldValue("avatar_url", `/emojis/${emojiData.unified}.png`)
119-
.catch((ex) => {
120-
console.error(ex)
121-
})
122-
setIsEmojiPickerOpen(false)
123-
}}
124-
/>
125-
</Popover>
126-
12767
<TextField
12868
{...getFieldHelpers("quota_allowance")}
12969
onChange={onChangeTrimmed(form)}
@@ -182,21 +122,4 @@ export const SettingsGroupPageView: FC<SettingsGroupPageViewProps> = ({
182122
)
183123
}
184124

185-
const useStyles = makeStyles((theme) => ({
186-
"@global": {
187-
"em-emoji-picker": {
188-
"--rgb-background": theme.palette.background.paper,
189-
"--rgb-input": colors.gray[17],
190-
"--rgb-color": colors.gray[4],
191-
},
192-
},
193-
adornment: {
194-
width: theme.spacing(3),
195-
height: theme.spacing(3),
196-
},
197-
iconField: {
198-
paddingBottom: theme.spacing(0.5),
199-
},
200-
}))
201-
202125
export default SettingsGroupPageView

0 commit comments

Comments
 (0)