Skip to content

Commit 914655c

Browse files
pregnantboypregnantboy
committed
chore: remove remaining MUI components, remove intl support, remove unused routes
1 parent dbfda82 commit 914655c

File tree

30 files changed

+435
-922
lines changed

30 files changed

+435
-922
lines changed

‎packages/frontend/package.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"build": "tsc && vite build --mode=${VITE_MODE:-prod}",
77
"build:lib": "vite build -c vite.config.lib.ts --mode=${VITE_MODE:-prod} && tsc-alias -p tsconfig.lib.json",
88
"prebuild": "rimraf ./build",
9-
"lint": "eslint . --ignore-path ../../.eslintignore",
9+
"lint": "eslint . --ignore-path ../../.eslintignore && tsc --noEmit",
1010
"test": "vitest",
1111
"gen:theme-typings": "chakra-cli tokens ./src/theme/index.ts",
1212
"postinstall": "npm run gen:theme-typings"
@@ -20,9 +20,6 @@
2020
"@emotion/styled": "^11.14.0",
2121
"@fontsource/space-grotesk": "4.5.13",
2222
"@hookform/resolvers": "^2.8.8",
23-
"@mui/icons-material": "5.11.0",
24-
"@mui/lab": "^5.0.0-alpha.60",
25-
"@mui/material": "5.12.0",
2623
"@tanstack/react-table": "8.10.7",
2724
"@tanstack/react-virtual": "3.0.0-beta.68",
2825
"@tiptap/extension-hard-break": "2.1.12",
@@ -51,7 +48,6 @@
5148
"papaparse": "5.4.1",
5249
"react-hook-form": "^7.17.2",
5350
"react-icons": "^4.12.0",
54-
"react-intl": "6.2.7",
5551
"react-json-tree": "^0.18.0",
5652
"react-markdown": "8.0.7",
5753
"remark-breaks": "3.0.3",

‎packages/frontend/src/components/AddAppConnection/index.tsx‎

Lines changed: 91 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,25 @@ import type { IApp, IField, IJSONObject } from '@plumber/types'
22

33
import * as React from 'react'
44
import { FieldValues, SubmitHandler } from 'react-hook-form'
5-
import LoadingButton from '@mui/lab/LoadingButton'
6-
import Alert from '@mui/material/Alert'
7-
import Dialog from '@mui/material/Dialog'
8-
import DialogContent from '@mui/material/DialogContent'
9-
import DialogContentText from '@mui/material/DialogContentText'
10-
import DialogTitle from '@mui/material/DialogTitle'
11-
import { Infobox } from '@opengovsg/design-system-react'
5+
import {
6+
Alert,
7+
AlertIcon,
8+
Modal,
9+
ModalBody,
10+
ModalCloseButton,
11+
ModalContent,
12+
ModalHeader,
13+
ModalOverlay,
14+
VStack,
15+
} from '@chakra-ui/react'
16+
import { Button, Infobox, Link } from '@opengovsg/design-system-react'
1217

1318
import InputCreator from '@/components/InputCreator'
1419
import { processStep } from '@/helpers/authenticationSteps'
1520
import computeAuthStepVariables from '@/helpers/computeAuthStepVariables'
1621
import { getOpenerOrigin } from '@/helpers/window'
17-
import useFormatMessage from '@/hooks/useFormatMessage'
1822

19-
import { generateExternalLink } from '../../helpers/translation-values'
20-
21-
import { Form } from './style'
23+
import Form from '../Form'
2224

2325
type AddAppConnectionProps = {
2426
onClose: (response: Record<string, unknown>) => void
@@ -30,12 +32,15 @@ type Response = {
3032
[key: string]: any
3133
}
3234

35+
/**
36+
* TODO: deprecate this component, we only need to support the callback route
37+
* /app/:appKey/connections/add
38+
*/
3339
export default function AddAppConnection(
3440
props: AddAppConnectionProps,
3541
): React.ReactElement {
3642
const { application, connectionId, onClose } = props
3743
const { name, authDocUrl, key, auth } = application
38-
const formatMessage = useFormatMessage()
3944
const [error, setError] = React.useState<IJSONObject | null>(null)
4045
const [inProgress, setInProgress] = React.useState(false)
4146
const hasConnection = Boolean(connectionId)
@@ -107,68 +112,85 @@ export default function AddAppConnection(
107112

108113
if (auth?.connectionType !== 'user-added') {
109114
return (
110-
<Dialog open={true} onClose={onClose}>
111-
<DialogTitle>Error</DialogTitle>
112-
<DialogContent>
113-
<Infobox variant="error">Connections are not supported</Infobox>
114-
</DialogContent>
115-
</Dialog>
115+
<Modal isOpen={true} onClose={() => onClose({})}>
116+
<ModalOverlay />
117+
<ModalContent>
118+
<ModalHeader>Error</ModalHeader>
119+
<ModalCloseButton />
120+
<ModalBody pb={8}>
121+
<Infobox variant="error">
122+
Editing this connection is not supported
123+
</Infobox>
124+
</ModalBody>
125+
</ModalContent>
126+
</Modal>
116127
)
117128
}
118129

119130
return (
120-
<Dialog open={true} onClose={onClose} data-test="add-app-connection-dialog">
121-
<DialogTitle>
122-
{hasConnection
123-
? formatMessage('app.reconnectConnection')
124-
: formatMessage('app.addConnection')}
125-
</DialogTitle>
126-
127-
{authDocUrl && (
128-
<Alert severity="info" sx={{ fontWeight: 300 }}>
129-
{formatMessage('addAppConnection.callToDocs', {
130-
appName: name,
131-
docsLink: generateExternalLink(authDocUrl),
132-
})}
133-
</Alert>
134-
)}
135-
136-
{error && (
137-
<Alert
138-
severity="error"
139-
sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
140-
>
141-
<>
142-
{error.message}
143-
{error.details && (
144-
<pre style={{ whiteSpace: 'pre-wrap' }}>
145-
{JSON.stringify(error.details, null, 2)}
146-
</pre>
147-
)}
148-
</>
149-
</Alert>
150-
)}
151-
152-
<DialogContent>
153-
<DialogContentText tabIndex={-1} component="div">
131+
<Modal
132+
isOpen={true}
133+
onClose={() => onClose({})}
134+
data-test="add-app-connection-dialog"
135+
>
136+
<ModalOverlay />
137+
<ModalContent>
138+
<ModalHeader>
139+
{hasConnection ? 'Edit connection' : 'Add connection'}
140+
</ModalHeader>
141+
<ModalCloseButton />
142+
143+
{authDocUrl && (
144+
<Alert status="info" fontWeight="300" px={8}>
145+
<AlertIcon />
146+
Visit our
147+
<Link isExternal href={authDocUrl} target="_blank" mx={1}>
148+
guide
149+
</Link>
150+
to learn more about how to connect {name}.
151+
</Alert>
152+
)}
153+
154+
{error && (
155+
<Alert
156+
status="error"
157+
mt={1}
158+
fontWeight="500"
159+
wordBreak="break-all"
160+
px={8}
161+
>
162+
<AlertIcon />
163+
<>
164+
{error.message}
165+
{error.details && (
166+
<pre style={{ whiteSpace: 'pre-wrap' }}>
167+
{JSON.stringify(error.details, null, 2)}
168+
</pre>
169+
)}
170+
</>
171+
</Alert>
172+
)}
173+
174+
<ModalBody>
154175
<Form onSubmit={submitHandler}>
155-
{auth?.fields?.map((field: IField) => (
156-
<InputCreator key={field.key} schema={field} />
157-
))}
158-
159-
<LoadingButton
160-
type="submit"
161-
variant="contained"
162-
color="primary"
163-
sx={{ boxShadow: 2 }}
164-
loading={inProgress}
165-
data-test="create-connection-button"
166-
>
167-
{formatMessage('addAppConnection.submit')}
168-
</LoadingButton>
176+
<VStack gap={2} pt={4} pb={8} alignItems="flex-start">
177+
{auth?.fields?.map((field: IField) => (
178+
<InputCreator key={field.key} schema={field} />
179+
))}
180+
181+
<Button
182+
type="submit"
183+
variant="solid"
184+
colorScheme="primary"
185+
isLoading={inProgress}
186+
data-test="create-connection-button"
187+
>
188+
Connect
189+
</Button>
190+
</VStack>
169191
</Form>
170-
</DialogContentText>
171-
</DialogContent>
172-
</Dialog>
192+
</ModalBody>
193+
</ModalContent>
194+
</Modal>
173195
)
174196
}

‎packages/frontend/src/components/AddAppConnection/style.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎packages/frontend/src/components/AppConnectionContextMenu/index.tsx‎

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import * as React from 'react'
2+
import { BiDotsHorizontalRounded } from 'react-icons/bi'
23
import { Link } from 'react-router-dom'
3-
import Menu from '@mui/material/Menu'
4-
import MenuItem from '@mui/material/MenuItem'
5-
import type { PopoverProps } from '@mui/material/Popover'
4+
import { Menu, MenuButton, MenuItem, MenuList, Portal } from '@chakra-ui/react'
5+
import { IconButton } from '@opengovsg/design-system-react'
66

77
import * as URLS from '@/config/urls'
8-
import useFormatMessage from '@/hooks/useFormatMessage'
98

109
type Action = {
1110
type: 'test' | 'reconnect' | 'delete' | 'viewFlows'
@@ -14,58 +13,67 @@ type Action = {
1413
type ContextMenuProps = {
1514
appKey: string
1615
connectionId: string
17-
onClose: () => void
1816
onMenuItemClick: (event: React.MouseEvent, action: Action) => void
19-
anchorEl: PopoverProps['anchorEl']
2017
}
2118

2219
export default function ContextMenu(
2320
props: ContextMenuProps,
2421
): React.ReactElement {
25-
const { appKey, connectionId, onClose, onMenuItemClick, anchorEl } = props
26-
const formatMessage = useFormatMessage()
22+
const { appKey, connectionId, onMenuItemClick } = props
2723

2824
const createActionHandler = React.useCallback(
2925
(action: Action) => {
3026
return function clickHandler(event: React.MouseEvent) {
3127
onMenuItemClick(event, action)
32-
33-
onClose()
3428
}
3529
},
36-
[onMenuItemClick, onClose],
30+
[onMenuItemClick],
3731
)
3832

3933
return (
40-
<Menu
41-
open={true}
42-
onClose={onClose}
43-
hideBackdrop={false}
44-
anchorEl={anchorEl}
45-
>
46-
<MenuItem
47-
component={Link}
48-
to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connectionId)}
49-
onClick={createActionHandler({ type: 'viewFlows' })}
50-
>
51-
{formatMessage('connection.viewFlows')}
52-
</MenuItem>
34+
<Menu>
35+
<MenuButton
36+
as={IconButton}
37+
aria-label="More options"
38+
size="md"
39+
variant="clear"
40+
colorScheme="default"
41+
icon={<BiDotsHorizontalRounded />}
42+
justifyContent="center"
43+
alignItems="center"
44+
/>
45+
{/* Not adding a portal causes the menu list to add a weird height to the parent */}
46+
<Portal>
47+
<MenuList my={-1}>
48+
<MenuItem
49+
as={Link}
50+
to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connectionId)}
51+
onClick={createActionHandler({ type: 'viewFlows' })}
52+
>
53+
View pipes
54+
</MenuItem>
5355

54-
<MenuItem onClick={createActionHandler({ type: 'test' })}>
55-
{formatMessage('connection.testConnection')}
56-
</MenuItem>
56+
<MenuItem onClick={createActionHandler({ type: 'test' })}>
57+
Test connection
58+
</MenuItem>
5759

58-
<MenuItem
59-
component={Link}
60-
to={URLS.APP_RECONNECT_CONNECTION(appKey, connectionId)}
61-
onClick={createActionHandler({ type: 'reconnect' })}
62-
>
63-
{formatMessage('connection.reconnect')}
64-
</MenuItem>
60+
{/* TODO: deprecate this action */}
61+
<MenuItem
62+
as={Link}
63+
to={URLS.APP_RECONNECT_CONNECTION(appKey, connectionId)}
64+
onClick={createActionHandler({ type: 'reconnect' })}
65+
>
66+
Edit connection
67+
</MenuItem>
6568

66-
<MenuItem onClick={createActionHandler({ type: 'delete' })}>
67-
{formatMessage('connection.delete')}
68-
</MenuItem>
69+
<MenuItem
70+
onClick={createActionHandler({ type: 'delete' })}
71+
color="red.500"
72+
>
73+
Delete
74+
</MenuItem>
75+
</MenuList>
76+
</Portal>
6977
</Menu>
7078
)
7179
}

0 commit comments

Comments
 (0)