Skip to content

Commit c60371d

Browse files
taban03taban03
authored
feat: Migrate Error components to Material (#1957)
* Migrate Errors components Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Migrate InstanceInfo.jsx Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix tests Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix dialog button Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix props for dialog Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix button css Signed-off-by: at670475 <andrea.tabone@broadcom.com>
1 parent b895d58 commit c60371d

File tree

8 files changed

+97
-104
lines changed

8 files changed

+97
-104
lines changed

‎api-catalog-ui/frontend/src/components/Error/Error.jsx

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from 'react';
2-
import { Dialog, DialogBody, DialogHeader, DialogTitle, DialogFooter, DialogActions, Button, Text } from 'mineral-ui';
2+
import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, IconButton } from '@material-ui/core';
3+
34
import formatError from './ErrorFormatter';
45

56
export default class Error extends Component {
@@ -10,37 +11,35 @@ export default class Error extends Component {
1011

1112
render() {
1213
const { errors } = this.props;
13-
const isTrue = true;
14-
const isFalse = false;
1514
return (
1615
<div>
1716
{errors &&
1817
errors.length > 0 && (
19-
<Dialog
20-
variant="danger"
21-
appSelector="#App"
22-
closeOnClickOutside={isFalse}
23-
hideOverlay={isTrue}
24-
modeless={isFalse}
25-
isOpen={errors.length > 0}
26-
>
27-
<DialogHeader>
28-
<DialogTitle>Error</DialogTitle>
29-
</DialogHeader>
30-
<DialogBody>
18+
<Dialog variant="danger" open={errors.length > 0}>
19+
<DialogTitle>Error</DialogTitle>
20+
<DialogContent data-testid="dialog-content">
3121
{errors !== null && errors !== undefined && errors.length > 0 ? (
3222
errors.map(error => formatError(error))
3323
) : (
34-
<Text>No Errors Found</Text>
24+
<DialogContentText style={{ color: 'black' }}>No Errors Found</DialogContentText>
3525
)}
36-
</DialogBody>
37-
<DialogFooter>
38-
<DialogActions>
39-
<Button size="medium" variant="danger" onClick={this.closeDialog}>
40-
Close
41-
</Button>
42-
</DialogActions>
43-
</DialogFooter>
26+
</DialogContent>
27+
<DialogActions>
28+
<IconButton
29+
size="medium"
30+
variant="outlined"
31+
style={{
32+
border: '1px solid #de1b1b',
33+
backgroundColor: '#de1b1b',
34+
borderRadius: '0.1875em',
35+
fontSize: '15px',
36+
color: 'white',
37+
}}
38+
onClick={this.closeDialog}
39+
>
40+
Close
41+
</IconButton>
42+
</DialogActions>
4443
</Dialog>
4544
)}
4645
</div>

‎api-catalog-ui/frontend/src/components/Error/Error.test.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ describe('>>> Error component tests', () => {
1010
const errorResponse = 'Could not determine error';
1111
const apiError = new ApiError('ABC123', 123, new MessageType(40, 'ERROR', 'E'), 'Bad stuff happened');
1212
const wrapper = enzyme.shallow(<Error errors={[apiError]} />);
13-
expect(wrapper.find('DialogBody').exists()).toEqual(true);
14-
expect(wrapper.find('Text').prop('children')).toBe(errorResponse);
13+
expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
14+
expect(wrapper.find('[data-testid="dialog-content"]').children().text()).toBe(errorResponse);
1515
});
1616

1717
it('Should display the dialog and the error message for Ajax error', () => {
@@ -26,8 +26,8 @@ describe('>>> Error component tests', () => {
2626
null
2727
);
2828
const wrapper = enzyme.shallow(<Error errors={[ajaxError]} />);
29-
expect(wrapper.find('DialogBody').exists()).toEqual(true);
30-
expect(wrapper.find('Text').prop('children')).toBe(errorResponse);
29+
expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
30+
expect(wrapper.find('[data-testid="dialog-content"]').children().text()).toBe(errorResponse);
3131
});
3232

3333
it('Should not display the dialog if there are no errors', () => {

‎api-catalog-ui/frontend/src/components/Error/ErrorDialog.jsx

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from 'react';
2-
import { Dialog, DialogBody, DialogHeader, DialogTitle, DialogFooter, DialogActions, Button, Text } from 'mineral-ui';
2+
import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, IconButton } from '@material-ui/core';
33

44
export default class ErrorDialog extends Component {
55
// eslint-disable-next-line react/sort-comp
@@ -32,33 +32,30 @@ export default class ErrorDialog extends Component {
3232
render() {
3333
const { refreshedStaticApisError } = this.props;
3434
const refreshError = this.getCorrectRefreshMessage(refreshedStaticApisError);
35-
const isTrue = true;
36-
const isFalse = false;
3735
return (
3836
<div>
3937
{refreshedStaticApisError &&
4038
(refreshedStaticApisError.status || typeof refreshedStaticApisError === 'object') && (
41-
<Dialog
42-
variant="danger"
43-
appSelector="#App"
44-
closeOnClickOutside={isFalse}
45-
hideOverlay={isTrue}
46-
modeless={isFalse}
47-
isOpen={refreshedStaticApisError !== null}
48-
>
49-
<DialogHeader>
50-
<DialogTitle>Error</DialogTitle>
51-
</DialogHeader>
52-
<DialogBody>
53-
<Text>{refreshError}</Text>
54-
</DialogBody>
55-
<DialogFooter>
56-
<DialogActions>
57-
<Button size="medium" variant="danger" onClick={this.closeDialog}>
58-
Close
59-
</Button>
60-
</DialogActions>
61-
</DialogFooter>
39+
<Dialog variant="danger" open={refreshedStaticApisError !== null}>
40+
<DialogTitle style={{ color: '#de1b1b' }}>Error</DialogTitle>
41+
<DialogContent data-testid="dialog-content">
42+
<DialogContentText style={{ color: 'black' }}>{refreshError}</DialogContentText>
43+
</DialogContent>
44+
<DialogActions>
45+
<IconButton
46+
variant="outlined"
47+
style={{
48+
border: '1px solid #de1b1b',
49+
backgroundColor: '#de1b1b',
50+
borderRadius: '0.1875em',
51+
fontSize: '15px',
52+
color: 'white',
53+
}}
54+
onClick={this.closeDialog}
55+
>
56+
Close
57+
</IconButton>
58+
</DialogActions>
6259
</Dialog>
6360
)}
6461
</div>

‎api-catalog-ui/frontend/src/components/Error/ErrorDialog.test.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('>>> ErrorDialog component tests', () => {
1212
messageType: 'ERROR',
1313
};
1414
const wrapper = shallow(<ErrorDialog refreshedStaticApisError={messageText} clearError={jest.fn()} />);
15-
expect(wrapper.find('DialogBody').exists()).toEqual(true);
15+
expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
1616
});
1717

1818
it('should not render the ErrorDialog if there is not an error while refreshing apis', () => {

‎api-catalog-ui/frontend/src/components/Error/ErrorFormatter.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Text } from 'mineral-ui';
1+
import { Typography } from '@material-ui/core';
22
import renderHTML from 'react-render-html';
33
import uuidv4 from 'uuid/v4';
44

@@ -24,9 +24,9 @@ function extractAjaxError(error) {
2424

2525
function formaHtmlError(message, color) {
2626
return (
27-
<Text key={uuidv4()} element="h5" fontWeight="semiBold" color={color}>
27+
<Typography key={uuidv4()} variant="h5" style={{ color, fontWeight: 'semiBold' }}>
2828
{renderHTML(message)}
29-
</Text>
29+
</Typography>
3030
);
3131
}
3232

‎api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
/* eslint-disable react/destructuring-assignment */
22
import { Component } from 'react';
3-
import Text from 'mineral-ui/Text';
4-
import { Button } from 'mineral-ui';
5-
import IconChevronLeft from 'mineral-ui-icons/IconChevronLeft';
3+
import { Typography, Button } from '@material-ui/core';
4+
import ArrowBackIosNewIcon from '@material-ui/icons/ArrowBackIos';
65
import '../../Dashboard/Dashboard.css';
76
import './BigShield.css';
87

@@ -29,7 +28,7 @@ export default class BigShield extends Component {
2928
};
3029

3130
render() {
32-
const iconBack = <IconChevronLeft />;
31+
const iconBack = <ArrowBackIosNewIcon />;
3332
const { history } = this.props;
3433
let disableButton = true;
3534
if (history !== undefined && history !== null) {
@@ -61,11 +60,11 @@ export default class BigShield extends Component {
6160
)}
6261
<br />
6362
<div className="local-dev-debug">
64-
<Text element="h2" style={{ color: '#de1b1b' }}>
63+
<Typography variant="h4" style={{ color: '#de1b1b' }}>
6564
An unexpected browser error occurred
66-
</Text>
65+
</Typography>
6766
<br />
68-
<Text element="h3" fontWeight="semiBold" color="black">
67+
<Typography variant="h6" style={{ color: 'black', fontWeight: 'semiBold' }}>
6968
You are seeing this page because an unexpected error occurred while rendering your page.
7069
<br />
7170
<br />
@@ -75,12 +74,12 @@ export default class BigShield extends Component {
7574
{!disableButton && (
7675
<b>You can return to the Dashboard by clicking on the button above.</b>
7776
)}
78-
</Text>
79-
<Text element="h4" color="#de1b1b">
77+
</Typography>
78+
<Typography variant="h6" color="#de1b1b">
8079
<pre>
8180
<code>{this.state.error.message}</code>
8281
</pre>
83-
</Text>
82+
</Typography>
8483

8584
<div className="wrap-collabsible">
8685
<input id="collapsible" className="toggle" type="checkbox" />
@@ -90,11 +89,11 @@ export default class BigShield extends Component {
9089
</label>
9190
<div className="collapsible-content">
9291
<div className="content-inner">
93-
<Text element="h5">
92+
<Typography variant="h5">
9493
<pre>
9594
<code>{stack}</code>
9695
</pre>
97-
</Text>
96+
</Typography>
9897
</div>
9998
</div>
10099
</div>
@@ -108,11 +107,11 @@ export default class BigShield extends Component {
108107
</label>
109108
<div className="collapsible-content2">
110109
<div className="content-inner2">
111-
<Text element="h5">
110+
<Typography variant="h5">
112111
<pre>
113112
<code>{componentStack}</code>
114113
</pre>
115-
</Text>
114+
</Typography>
116115
</div>
117116
</div>
118117
</div>

‎api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable react/destructuring-assignment */
22
import { Component } from 'react';
3-
import Text from 'mineral-ui/Text';
3+
import { Typography } from '@material-ui/core';
44
import '../BigShield/BigShield.css';
55

66
export default class Shield extends Component {
@@ -34,11 +34,11 @@ export default class Shield extends Component {
3434
</label>
3535
<div className="collapsible-content">
3636
<div className="content-inner">
37-
<Text element="h5">
37+
<Typography variant="h5">
3838
<pre style={{ textAlign: 'left' }}>
3939
<code>{this.state.error.stack}</code>
4040
</pre>
41-
</Text>
41+
</Typography>
4242
</div>
4343
</div>
4444
</div>

‎api-catalog-ui/frontend/src/components/ServiceTab/InstanceInfo.jsx

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Text, Tooltip, ThemeProvider } from 'mineral-ui';
1+
import { Typography, Tooltip } from '@material-ui/core';
22
import { Component } from 'react';
33
import './InstanceInfo.css';
44
import Shield from '../ErrorBoundary/Shield/Shield';
@@ -11,36 +11,34 @@ export default class InstanceInfo extends Component {
1111
selectedService.apiId[selectedVersion || selectedService.defaultApiVersion] ||
1212
selectedService.apiId.default;
1313
return (
14-
<ThemeProvider>
15-
<Shield title="Cannot display information about selected instance">
16-
<div className="apiInfo-item">
17-
<Tooltip
18-
key={selectedService.baseUrl}
19-
content="The instance URL for this service"
20-
placement="bottom"
21-
>
22-
<Text>
23-
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
24-
<label htmlFor="instanceUrl">Instance URL:</label>
25-
<span id="instanceUrl">{selectedService.baseUrl}</span>
26-
</Text>
27-
</Tooltip>
28-
</div>
29-
<div className="apiInfo-item">
30-
<Tooltip
31-
key={selectedService.apiId}
32-
content="API IDs of the APIs that are provided by this service"
33-
placement="bottom"
34-
>
35-
<Text>
36-
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
37-
<label htmlFor="apiid">API ID:</label>
38-
<span id="appid">{apiId}</span>
39-
</Text>
40-
</Tooltip>
41-
</div>
42-
</Shield>
43-
</ThemeProvider>
14+
<Shield title="Cannot display information about selected instance">
15+
<div className="apiInfo-item">
16+
<Tooltip
17+
key={selectedService.baseUrl}
18+
content="The instance URL for this service"
19+
placement="bottom"
20+
>
21+
<Typography>
22+
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
23+
<label htmlFor="instanceUrl">Instance URL:</label>
24+
<span id="instanceUrl">{selectedService.baseUrl}</span>
25+
</Typography>
26+
</Tooltip>
27+
</div>
28+
<div className="apiInfo-item">
29+
<Tooltip
30+
key={selectedService.apiId}
31+
content="API IDs of the APIs that are provided by this service"
32+
placement="bottom"
33+
>
34+
<Typography>
35+
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
36+
<label htmlFor="apiid">API ID:</label>
37+
<span id="appid">{apiId}</span>
38+
</Typography>
39+
</Tooltip>
40+
</div>
41+
</Shield>
4442
);
4543
}
4644
}

0 commit comments

Comments
 (0)