Skip to content

Commit

Permalink
feat: Migrate Error components to Material (#1957)
Browse files Browse the repository at this point in the history 
* Migrate Errors components

Signed-off-by: at670475 <[email protected]>

* Migrate InstanceInfo.jsx

Signed-off-by: at670475 <[email protected]>

* Fix tests

Signed-off-by: at670475 <[email protected]>

* Fix dialog button

Signed-off-by: at670475 <[email protected]>

* Fix props for dialog

Signed-off-by: at670475 <[email protected]>

* Fix button css

Signed-off-by: at670475 <[email protected]>
  • Loading branch information
@taban03
taban03 authored Dec 9, 2021
1 parent b895d58 commit c60371d
Show file tree
Hide file tree
Showing 8 changed files with 97 additions and 104 deletions.
47 changes: 23 additions & 24 deletions api-catalog-ui/frontend/src/components/Error/Error.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component } from 'react';
import { Dialog, DialogBody, DialogHeader, DialogTitle, DialogFooter, DialogActions, Button, Text } from 'mineral-ui';
import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, IconButton } from '@material-ui/core';

import formatError from './ErrorFormatter';

export default class Error extends Component {
Expand All @@ -10,37 +11,35 @@ export default class Error extends Component {

render() {
const { errors } = this.props;
const isTrue = true;
const isFalse = false;
return (
<div>
{errors &&
errors.length > 0 && (
<Dialog
variant="danger"
appSelector="#App"
closeOnClickOutside={isFalse}
hideOverlay={isTrue}
modeless={isFalse}
isOpen={errors.length > 0}
>
<DialogHeader>
<DialogTitle>Error</DialogTitle>
</DialogHeader>
<DialogBody>
<Dialog variant="danger" open={errors.length > 0}>
<DialogTitle>Error</DialogTitle>
<DialogContent data-testid="dialog-content">
{errors !== null && errors !== undefined && errors.length > 0 ? (
errors.map(error => formatError(error))
) : (
<Text>No Errors Found</Text>
<DialogContentText style={{ color: 'black' }}>No Errors Found</DialogContentText>
)}
</DialogBody>
<DialogFooter>
<DialogActions>
<Button size="medium" variant="danger" onClick={this.closeDialog}>
Close
</Button>
</DialogActions>
</DialogFooter>
</DialogContent>
<DialogActions>
<IconButton
size="medium"
variant="outlined"
style={{
border: '1px solid #de1b1b',
backgroundColor: '#de1b1b',
borderRadius: '0.1875em',
fontSize: '15px',
color: 'white',
}}
onClick={this.closeDialog}
>
Close
</IconButton>
</DialogActions>
</Dialog>
)}
</div>
Expand Down
8 changes: 4 additions & 4 deletions api-catalog-ui/frontend/src/components/Error/Error.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ describe('>>> Error component tests', () => {
const errorResponse = 'Could not determine error';
const apiError = new ApiError('ABC123', 123, new MessageType(40, 'ERROR', 'E'), 'Bad stuff happened');
const wrapper = enzyme.shallow(<Error errors={[apiError]} />);
expect(wrapper.find('DialogBody').exists()).toEqual(true);
expect(wrapper.find('Text').prop('children')).toBe(errorResponse);
expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
expect(wrapper.find('[data-testid="dialog-content"]').children().text()).toBe(errorResponse);
});

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

it('Should not display the dialog if there are no errors', () => {
Expand Down
45 changes: 21 additions & 24 deletions api-catalog-ui/frontend/src/components/Error/ErrorDialog.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component } from 'react';
import { Dialog, DialogBody, DialogHeader, DialogTitle, DialogFooter, DialogActions, Button, Text } from 'mineral-ui';
import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, IconButton } from '@material-ui/core';

export default class ErrorDialog extends Component {
// eslint-disable-next-line react/sort-comp
Expand Down Expand Up @@ -32,33 +32,30 @@ export default class ErrorDialog extends Component {
render() {
const { refreshedStaticApisError } = this.props;
const refreshError = this.getCorrectRefreshMessage(refreshedStaticApisError);
const isTrue = true;
const isFalse = false;
return (
<div>
{refreshedStaticApisError &&
(refreshedStaticApisError.status || typeof refreshedStaticApisError === 'object') && (
<Dialog
variant="danger"
appSelector="#App"
closeOnClickOutside={isFalse}
hideOverlay={isTrue}
modeless={isFalse}
isOpen={refreshedStaticApisError !== null}
>
<DialogHeader>
<DialogTitle>Error</DialogTitle>
</DialogHeader>
<DialogBody>
<Text>{refreshError}</Text>
</DialogBody>
<DialogFooter>
<DialogActions>
<Button size="medium" variant="danger" onClick={this.closeDialog}>
Close
</Button>
</DialogActions>
</DialogFooter>
<Dialog variant="danger" open={refreshedStaticApisError !== null}>
<DialogTitle style={{ color: '#de1b1b' }}>Error</DialogTitle>
<DialogContent data-testid="dialog-content">
<DialogContentText style={{ color: 'black' }}>{refreshError}</DialogContentText>
</DialogContent>
<DialogActions>
<IconButton
variant="outlined"
style={{
border: '1px solid #de1b1b',
backgroundColor: '#de1b1b',
borderRadius: '0.1875em',
fontSize: '15px',
color: 'white',
}}
onClick={this.closeDialog}
>
Close
</IconButton>
</DialogActions>
</Dialog>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion api-catalog-ui/frontend/src/components/Error/ErrorDialog.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('>>> ErrorDialog component tests', () => {
messageType: 'ERROR',
};
const wrapper = shallow(<ErrorDialog refreshedStaticApisError={messageText} clearError={jest.fn()} />);
expect(wrapper.find('DialogBody').exists()).toEqual(true);
expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
});

it('should not render the ErrorDialog if there is not an error while refreshing apis', () => {
Expand Down
6 changes: 3 additions & 3 deletions api-catalog-ui/frontend/src/components/Error/ErrorFormatter.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Text } from 'mineral-ui';
import { Typography } from '@material-ui/core';
import renderHTML from 'react-render-html';
import uuidv4 from 'uuid/v4';

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

function formaHtmlError(message, color) {
return (
<Text key={uuidv4()} element="h5" fontWeight="semiBold" color={color}>
<Typography key={uuidv4()} variant="h5" style={{ color, fontWeight: 'semiBold' }}>
{renderHTML(message)}
</Text>
</Typography>
);
}

Expand Down
27 changes: 13 additions & 14 deletions api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* eslint-disable react/destructuring-assignment */
import { Component } from 'react';
import Text from 'mineral-ui/Text';
import { Button } from 'mineral-ui';
import IconChevronLeft from 'mineral-ui-icons/IconChevronLeft';
import { Typography, Button } from '@material-ui/core';
import ArrowBackIosNewIcon from '@material-ui/icons/ArrowBackIos';
import '../../Dashboard/Dashboard.css';
import './BigShield.css';

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

render() {
const iconBack = <IconChevronLeft />;
const iconBack = <ArrowBackIosNewIcon />;
const { history } = this.props;
let disableButton = true;
if (history !== undefined && history !== null) {
Expand Down Expand Up @@ -61,11 +60,11 @@ export default class BigShield extends Component {
)}
<br />
<div className="local-dev-debug">
<Text element="h2" style={{ color: '#de1b1b' }}>
<Typography variant="h4" style={{ color: '#de1b1b' }}>
An unexpected browser error occurred
</Text>
</Typography>
<br />
<Text element="h3" fontWeight="semiBold" color="black">
<Typography variant="h6" style={{ color: 'black', fontWeight: 'semiBold' }}>
You are seeing this page because an unexpected error occurred while rendering your page.
<br />
<br />
Expand All @@ -75,12 +74,12 @@ export default class BigShield extends Component {
{!disableButton && (
<b>You can return to the Dashboard by clicking on the button above.</b>
)}
</Text>
<Text element="h4" color="#de1b1b">
</Typography>
<Typography variant="h6" color="#de1b1b">
<pre>
<code>{this.state.error.message}</code>
</pre>
</Text>
</Typography>

<div className="wrap-collabsible">
<input id="collapsible" className="toggle" type="checkbox" />
Expand All @@ -90,11 +89,11 @@ export default class BigShield extends Component {
</label>
<div className="collapsible-content">
<div className="content-inner">
<Text element="h5">
<Typography variant="h5">
<pre>
<code>{stack}</code>
</pre>
</Text>
</Typography>
</div>
</div>
</div>
Expand All @@ -108,11 +107,11 @@ export default class BigShield extends Component {
</label>
<div className="collapsible-content2">
<div className="content-inner2">
<Text element="h5">
<Typography variant="h5">
<pre>
<code>{componentStack}</code>
</pre>
</Text>
</Typography>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable react/destructuring-assignment */
import { Component } from 'react';
import Text from 'mineral-ui/Text';
import { Typography } from '@material-ui/core';
import '../BigShield/BigShield.css';

export default class Shield extends Component {
Expand Down Expand Up @@ -34,11 +34,11 @@ export default class Shield extends Component {
</label>
<div className="collapsible-content">
<div className="content-inner">
<Text element="h5">
<Typography variant="h5">
<pre style={{ textAlign: 'left' }}>
<code>{this.state.error.stack}</code>
</pre>
</Text>
</Typography>
</div>
</div>
</div>
Expand Down
60 changes: 29 additions & 31 deletions api-catalog-ui/frontend/src/components/ServiceTab/InstanceInfo.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Text, Tooltip, ThemeProvider } from 'mineral-ui';
import { Typography, Tooltip } from '@material-ui/core';
import { Component } from 'react';
import './InstanceInfo.css';
import Shield from '../ErrorBoundary/Shield/Shield';
Expand All @@ -11,36 +11,34 @@ export default class InstanceInfo extends Component {
selectedService.apiId[selectedVersion || selectedService.defaultApiVersion] ||
selectedService.apiId.default;
return (
<ThemeProvider>
<Shield title="Cannot display information about selected instance">
<div className="apiInfo-item">
<Tooltip
key={selectedService.baseUrl}
content="The instance URL for this service"
placement="bottom"
>
<Text>
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
<label htmlFor="instanceUrl">Instance URL:</label>
<span id="instanceUrl">{selectedService.baseUrl}</span>
</Text>
</Tooltip>
</div>
<div className="apiInfo-item">
<Tooltip
key={selectedService.apiId}
content="API IDs of the APIs that are provided by this service"
placement="bottom"
>
<Text>
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
<label htmlFor="apiid">API ID:</label>
<span id="appid">{apiId}</span>
</Text>
</Tooltip>
</div>
</Shield>
</ThemeProvider>
<Shield title="Cannot display information about selected instance">
<div className="apiInfo-item">
<Tooltip
key={selectedService.baseUrl}
content="The instance URL for this service"
placement="bottom"
>
<Typography>
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
<label htmlFor="instanceUrl">Instance URL:</label>
<span id="instanceUrl">{selectedService.baseUrl}</span>
</Typography>
</Tooltip>
</div>
<div className="apiInfo-item">
<Tooltip
key={selectedService.apiId}
content="API IDs of the APIs that are provided by this service"
placement="bottom"
>
<Typography>
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
<label htmlFor="apiid">API ID:</label>
<span id="appid">{apiId}</span>
</Typography>
</Tooltip>
</div>
</Shield>
);
}
}

0 comments on commit c60371d

Please sign in to comment.