Skip to content

Commit f097a9b

Browse files
EijebongEijebong
authored
Remove mozilla frontend infra components (#3499)
* Replace `Label` from mozilla-frontend-infra/components We need to get rid of mozilla-frontend-infra/components, this is the first step. I basically imported the component and stripped the unused parts. This doesn't change anything rendering wise * Switch from mozilla-frontend-infra's `MuiErrorPanel` to raw `Alert` * Replace all mozilla-frontend-infra's Spinner with `CircularProgress` * Remove the dependency on mozilla-frontend-infra We depend on mdi-react and it used to work because it was pulled through mozilla-frontend-infra/components so I just added it as an explicit dependency now
1 parent f764fd5 commit f097a9b

File tree

19 files changed

+164
-327
lines changed

19 files changed

+164
-327
lines changed

‎ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"@material-ui/lab": "4.0.0-alpha.57",
2828
"@material-ui/pickers": "^3.3.10",
2929
"@material-ui/styles": "^4.11.2",
30-
"@mozilla-frontend-infra/components": "^3.0.7",
3130
"axios": "^1.11.0",
3231
"change-case": "^4.1.2",
3332
"classnames": "^2.2.6",
@@ -67,6 +66,7 @@
6766
"html-webpack-plugin": "^5.6.3",
6867
"jest": "^26.6.3",
6968
"lodash.omit": "^4.5.0",
69+
"mdi-react": "^4.0.0",
7070
"mini-css-extract-plugin": "^2.9.2",
7171
"react-refresh": "^0.17.0",
7272
"style-loader": "^1.3.0",

‎ui/src/Main.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ function Main() {
105105
return backendError ? (
106106
<BrowserRouter>
107107
<Dashboard title="Error" disabled>
108-
<ErrorPanel fixed error={backendError} />
108+
<ErrorPanel error={backendError} />
109109
</Dashboard>
110110
</BrowserRouter>
111111
) : (

‎ui/src/components/ErrorPanel/index.jsx

Lines changed: 7 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,12 @@
1-
import { makeStyles } from '@material-ui/styles';
2-
import MuiErrorPanel from '@mozilla-frontend-infra/components/ErrorPanel';
3-
import classNames from 'classnames';
4-
import { bool, func, object, oneOfType, string } from 'prop-types';
1+
import Alert from '@material-ui/lab/Alert';
2+
import { string } from 'prop-types';
53
import React, { useState } from 'react';
6-
import { CONTENT_MAX_WIDTH } from '../../utils/constants';
74

8-
const useStyles = makeStyles((theme) => ({
9-
fixed: {
10-
position: 'fixed',
11-
zIndex: theme.zIndex.snackbar,
12-
left: '50%',
13-
right: '50%',
14-
transform: 'translateX(-50%)',
15-
width: '92%',
16-
maxWidth: CONTENT_MAX_WIDTH,
17-
},
18-
}));
19-
20-
export default function ErrorPanel({
21-
onClose,
22-
className,
23-
error,
24-
fixed,
25-
...props
26-
}) {
27-
const classes = useStyles();
5+
export default function ErrorPanel({ error }) {
286
const [currentError, setCurrentError] = useState(null);
297
const [previousError, setPreviousError] = useState(null);
308
const handleErrorClose = () => {
319
setCurrentError(null);
32-
33-
if (onClose) {
34-
onClose();
35-
}
3610
};
3711

3812
if (error !== previousError) {
@@ -41,29 +15,17 @@ export default function ErrorPanel({
4115
}
4216

4317
return currentError ? (
44-
<MuiErrorPanel
45-
className={classNames(className, {
46-
[classes.fixed]: fixed,
47-
})}
48-
error={currentError}
49-
onClose={handleErrorClose}
50-
{...props}
51-
/>
18+
<Alert severity="error" variant="filled" onClose={handleErrorClose}>
19+
{currentError instanceof Error ? currentError.message : currentError}
20+
</Alert>
5221
) : null;
5322
}
5423

5524
ErrorPanel.propTypes = {
5625
/** Error to display. */
57-
error: oneOfType([string, object]),
58-
/** If true, the component will be fixed. */
59-
fixed: bool,
60-
className: string,
61-
onClose: func,
26+
error: string,
6227
};
6328

6429
ErrorPanel.defaultProps = {
65-
className: null,
6630
error: null,
67-
fixed: false,
68-
onClose: null,
6931
};

‎ui/src/components/StatusLabel/index.jsx

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,53 @@
1-
import Label from '@mozilla-frontend-infra/components/Label';
1+
import Button from '@material-ui/core/Button';
2+
import { makeStyles } from '@material-ui/core/styles';
23
import { sentenceCase } from 'change-case';
3-
import { bool, string } from 'prop-types';
4+
import { string } from 'prop-types';
45
import React from 'react';
56
import labels from '../../utils/labels';
67

8+
const useStyles = makeStyles((theme) => ({
9+
mini: {
10+
fontSize: '0.7em',
11+
padding: '3px 8px 2px',
12+
},
13+
error: {
14+
backgroundColor: `${theme.palette.error.dark} !important`,
15+
color: `${theme.palette.error.contrastText} !important`,
16+
},
17+
success: {
18+
backgroundColor: `${theme.palette.success.dark} !important`,
19+
color: `${theme.palette.success.contrastText} !important`,
20+
},
21+
warning: {
22+
backgroundColor: `${theme.palette.warning.dark} !important`,
23+
color: `${theme.palette.warning.contrastText} !important`,
24+
},
25+
default: {
26+
backgroundColor: `${theme.palette.grey[700]} !important`,
27+
color: `${theme.palette.getContrastText(
28+
theme.palette.grey[700],
29+
)} !important`,
30+
},
31+
info: {
32+
backgroundColor: `${theme.palette.info[700]} !important`,
33+
color: `${theme.palette.info.contrastText} !important`,
34+
},
35+
}));
736
/**
837
* A label color-coded based on known statuses.
938
*/
10-
function StatusLabel(props) {
11-
const { state, mini, className, ...rest } = props;
39+
function StatusLabel({ state }) {
40+
const classes = useStyles();
41+
const labelKey = labels[state] || 'default';
1242

1343
return (
14-
<Label
15-
mini={mini}
16-
status={labels[state] || 'default'}
17-
className={className}
18-
{...rest}
44+
<Button
45+
size="small"
46+
disabled
47+
className={`${classes[labelKey]} ${classes.mini}`}
1948
>
2049
{sentenceCase(state).toUpperCase() || 'UNKNOWN'}
21-
</Label>
50+
</Button>
2251
);
2352
}
2453

@@ -27,17 +56,6 @@ StatusLabel.propTypes = {
2756
* A state string.
2857
*/
2958
state: string.isRequired,
30-
/**
31-
* Render the label using dense styling.
32-
*/
33-
mini: bool,
34-
/** The CSS class name of the wrapper element */
35-
className: string,
36-
};
37-
38-
StatusLabel.defaultProps = {
39-
mini: true,
40-
className: null,
4159
};
4260

4361
export default StatusLabel;

‎ui/src/theme.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { amber, indigo, red } from '@material-ui/core/colors';
1+
import { amber, green, indigo, red } from '@material-ui/core/colors';
22
import { createTheme } from '@material-ui/core/styles';
33

44
const SPACING = {
@@ -33,6 +33,11 @@ export default createTheme({
3333
dark: indigo[700],
3434
contrastText: 'rgba(255, 255, 255, 0.9)',
3535
},
36+
success: {
37+
main: green[500],
38+
dark: green[800],
39+
contrastText: 'white',
40+
},
3641
},
3742
typography: {
3843
useNextVariants: true,

‎ui/src/views/Releases/ListReleaseRevisions/index.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import Box from '@material-ui/core/Box';
2+
import CircularProgress from '@material-ui/core/CircularProgress';
13
import axios from 'axios';
24
import React, { Fragment, useEffect, useState } from 'react';
35
import { Column } from 'react-virtualized';
46
import 'react-virtualized/styles.css';
57
import Drawer from '@material-ui/core/Drawer';
68
import Typography from '@material-ui/core/Typography';
79
import { makeStyles } from '@material-ui/styles';
8-
import Spinner from '@mozilla-frontend-infra/components/Spinner';
910
import { formatDistanceStrict } from 'date-fns';
1011
import Button from '../../../components/Button';
1112
import Dashboard from '../../../components/Dashboard';
@@ -120,8 +121,12 @@ function ListReleaseRevisions(props) {
120121

121122
return (
122123
<Dashboard title={`Release ${releaseName} Revisions`}>
123-
{error && <ErrorPanel fixed error={error} />}
124-
{isLoading && <Spinner loading />}
124+
{error && <ErrorPanel error={error} />}
125+
{isLoading && (
126+
<Box style={{ textAlign: 'center' }}>
127+
<CircularProgress loading />
128+
</Box>
129+
)}
125130
{!isLoading && revisions.length === 1 && (
126131
<Typography>Role {releaseName} has no revisions</Typography>
127132
)}

‎ui/src/views/Releases/ListReleaseRevisionsV2/index.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import Box from '@material-ui/core/Box';
2+
import CircularProgress from '@material-ui/core/CircularProgress';
13
import axios from 'axios';
24
import React, { Fragment, useEffect, useState } from 'react';
35
import { Column } from 'react-virtualized';
46
import 'react-virtualized/styles.css';
57
import Drawer from '@material-ui/core/Drawer';
68
import Typography from '@material-ui/core/Typography';
79
import { makeStyles } from '@material-ui/styles';
8-
import Spinner from '@mozilla-frontend-infra/components/Spinner';
910
import { formatDistanceStrict } from 'date-fns';
1011
import Button from '../../../components/Button';
1112
import Dashboard from '../../../components/Dashboard';
@@ -163,8 +164,12 @@ function ListReleaseRevisionsV2(props) {
163164

164165
return (
165166
<Dashboard title={`Release ${releaseName} Revisions`}>
166-
{error && <ErrorPanel fixed error={error} />}
167-
{isLoading && <Spinner loading />}
167+
{error && <ErrorPanel error={error} />}
168+
{isLoading && (
169+
<Box style={{ textAlign: 'center' }}>
170+
<CircularProgress loading />
171+
</Box>
172+
)}
168173
{!isLoading && olderRevisions.length === 1 && (
169174
<Typography>{releaseName} has no revisions</Typography>
170175
)}

‎ui/src/views/Releases/ListReleases/index.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { withAuth0 } from '@auth0/auth0-react';
22
import { Typography } from '@material-ui/core';
3+
import Box from '@material-ui/core/Box';
4+
import CircularProgress from '@material-ui/core/CircularProgress';
35
import Drawer from '@material-ui/core/Drawer';
46
import Fab from '@material-ui/core/Fab';
57
import FormControl from '@material-ui/core/FormControl';
@@ -8,7 +10,6 @@ import Radio from '@material-ui/core/Radio';
810
import RadioGroup from '@material-ui/core/RadioGroup';
911
import Tooltip from '@material-ui/core/Tooltip';
1012
import { makeStyles, useTheme } from '@material-ui/styles';
11-
import Spinner from '@mozilla-frontend-infra/components/Spinner';
1213
import classNames from 'classnames';
1314
import PlusIcon from 'mdi-react/PlusIcon';
1415
import { clone } from 'ramda';
@@ -832,8 +833,12 @@ function ListReleases(props) {
832833
onChange={handleSearchChange}
833834
value={searchValue}
834835
/>
835-
{isLoading && <Spinner loading />}
836-
{error && <ErrorPanel fixed error={error} />}
836+
{isLoading && (
837+
<Box style={{ textAlign: 'center' }}>
838+
<CircularProgress loading />
839+
</Box>
840+
)}
841+
{error && <ErrorPanel error={error} />}
837842
{!isLoading && filteredReleases && (
838843
<VariableSizeList
839844
ref={releaseListRef}

‎ui/src/views/Releases/Release/index.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { withAuth0 } from '@auth0/auth0-react';
2+
import Box from '@material-ui/core/Box';
3+
import CircularProgress from '@material-ui/core/CircularProgress';
24
import Fab from '@material-ui/core/Fab';
35
import { makeStyles } from '@material-ui/core/styles';
46
import TextField from '@material-ui/core/TextField';
57
import Tooltip from '@material-ui/core/Tooltip';
68
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
7-
import Spinner from '@mozilla-frontend-infra/components/Spinner';
89
import classNames from 'classnames';
910
import ContentSaveIcon from 'mdi-react/ContentSaveIcon';
1011
import DeleteIcon from 'mdi-react/DeleteIcon';
@@ -262,8 +263,12 @@ function Release(props) {
262263
<Dashboard
263264
title={isNewRelease ? 'Create Release' : `Update Release ${releaseName}`}
264265
>
265-
{isLoading && <Spinner loading />}
266-
{!isLoading && error && <ErrorPanel fixed error={error} />}
266+
{isLoading && (
267+
<Box style={{ textAlign: 'center' }}>
268+
<CircularProgress loading />
269+
</Box>
270+
)}
271+
{!isLoading && error && <ErrorPanel error={error} />}
267272
{!isLoading && (
268273
<Fragment>
269274
<TextField

‎ui/src/views/Releases/ReleaseV2/index.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { withAuth0 } from '@auth0/auth0-react';
2+
import Box from '@material-ui/core/Box';
3+
import CircularProgress from '@material-ui/core/CircularProgress';
24
import Fab from '@material-ui/core/Fab';
35
import { makeStyles } from '@material-ui/core/styles';
46
import TextField from '@material-ui/core/TextField';
57
import Tooltip from '@material-ui/core/Tooltip';
68
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
7-
import Spinner from '@mozilla-frontend-infra/components/Spinner';
89
import classNames from 'classnames';
910
import ContentSaveIcon from 'mdi-react/ContentSaveIcon';
1011
import DeleteIcon from 'mdi-react/DeleteIcon';
@@ -242,8 +243,12 @@ function ReleaseV2(props) {
242243
<Dashboard
243244
title={isNewRelease ? 'Create Release' : `Update Release ${releaseName}`}
244245
>
245-
{isLoading && <Spinner loading />}
246-
{!isLoading && error && <ErrorPanel fixed error={error} />}
246+
{isLoading && (
247+
<Box style={{ textAlign: 'center' }}>
248+
<CircularProgress loading />
249+
</Box>
250+
)}
251+
{!isLoading && error && <ErrorPanel error={error} />}
247252
{!isLoading && (
248253
<Fragment>
249254
<TextField

0 commit comments

Comments
 (0)