Skip to content

Commit 537fa34

Browse files
taban03taban03
authored
feat: Migrate header and footer to Material UI (#1943)
* POC - Fully migrate Login component to Material Signed-off-by: at670475 <andrea.tabone@broadcom.com> * WIP - Header migration Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix icon Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Migrate footer Signed-off-by: at670475 <andrea.tabone@broadcom.com> * fix unit test Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix tests Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix error Signed-off-by: at670475 <andrea.tabone@broadcom.com> * Fix link Signed-off-by: at670475 <andrea.tabone@broadcom.com>
1 parent 81ab2ed commit 537fa34

File tree

5 files changed

+43
-28
lines changed

5 files changed

+43
-28
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from 'react';
2-
import { Link } from 'mineral-ui';
2+
import { Link } from '@material-ui/core';
33

44
import logo from '../../assets/images/ca-broadcom-logo.svg';
55
import './footer.css';
@@ -19,7 +19,9 @@ export default class Footer extends Component {
1919
</p>
2020
</div>
2121
<div className="right">
22-
<Link href="https://support.ca.com/us.html">CA Support</Link>
22+
<Link data-testid="link" href="https://support.broadcom.com">
23+
Broadcom Support
24+
</Link>
2325
</div>
2426
</footer>
2527
);

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@ describe('>>> Footer component tests', () => {
1919
const footer = enzyme.shallow(<Footer />);
2020
expect(
2121
footer
22-
.find('Link')
23-
.first()
22+
.find('[data-testid="link"]')
2423
.props().href
25-
).toEqual('https://support.ca.com/us.html');
24+
).toEqual('https://support.broadcom.com');
2625
});
2726

2827
it('should show the copyright', () => {

‎api-catalog-ui/frontend/src/components/Header/Header.css

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,45 @@
1212
text-decoration: none;
1313
}
1414

15-
.logout-container button.css-1upkw8q-Button {
16-
background-color: #1d5bbf;
15+
.logout-container button.css-1upkw8q-Button:hover {
16+
border-radius: 50px;
1717
transition: background-color .3s ease-in-out;
18+
background-color: #5691f0;
1819
}
1920

20-
.logout-container button.css-1upkw8q-Button:hover {
21+
button.MuiButtonBase-root.MuiButton-root.MuiButton-text:hover {
22+
border-radius: 50px;
2123
background-color: #5691f0;
2224
}
2325

24-
2526
.logout-container svg {
27+
border-radius: 50px;
2628
transition: color .3s ease-in-out;
2729
}
2830

2931
.logout-container button.css-1upkw8q-Button:hover svg {
32+
border-radius: 50px;
3033
color: #111111;
3134
}
3235

3336
.css-1i58psh:hover {
37+
border-radius: 50px;
3438
background-color: #5691f0;
3539
}
40+
41+
span.MuiTypography-root {
42+
border-radius: 50px;
43+
color: #ffffff;
44+
}
45+
46+
.right-icon {
47+
border-radius: 50px;
48+
}
49+
50+
button.MuiButtonBase-root.MuiIconButton-root:hover {
51+
background-color: #5691f0;
52+
}
53+
54+
h6.MuiTypography-root.MuiTypography-subtitle2 {
55+
color: white;
56+
}

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

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component } from 'react';
2-
import { Button, Link, Text, Tooltip } from 'mineral-ui';
3-
import { IconPowerSettingsNew } from 'mineral-ui-icons';
2+
import { IconButton, Link, Typography, Tooltip } from '@material-ui/core';
3+
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
44
import productImage from '../../assets/images/api-catalog-logo.png';
55
import './Header.css';
66

@@ -11,32 +11,26 @@ export default class Header extends Component {
1111
};
1212

1313
render() {
14-
const iconLogout = <IconPowerSettingsNew color="white" />;
15-
const dashboard = '/ui/v1/apicatalog/#/dashboard';
14+
const iconLogout = <PowerSettingsNewIcon id="logoutIcon" style={{ color: 'white' }} />;
15+
const dashboard = 'ui/v1/apicatalog/#/dashboard';
1616
return (
1717
<div className="header">
1818
<div className="product-name">
19-
<Link href={dashboard}>
19+
<Link data-testid="link" href={dashboard}>
2020
<div className="app-icon-container">
2121
<img id="logo" alt="API Catalog Product Name" src={productImage} />
2222
</div>
2323
</Link>
2424
<Link href={dashboard}>
25-
<Text element="h3" color="#ffffff">
26-
API Catalog
27-
</Text>
25+
<Typography variant="subtitle2">API Catalog</Typography>
2826
</Link>
2927
</div>
3028
<div className="right-icons">
3129
<div className="logout-container">
32-
<Tooltip content="Logout">
33-
<Button
34-
iconStart={iconLogout}
35-
data-testid="logout"
36-
primary
37-
circular
38-
onClick={this.handleLogout}
39-
/>
30+
<Tooltip title="Logout">
31+
<IconButton data-testid="logout" onClick={this.handleLogout}>
32+
{iconLogout}
33+
</IconButton>
4034
</Tooltip>
4135
</div>
4236
</div>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@ describe('>>> Header component tests', () => {
1212
const sample = enzyme.shallow(<Header />);
1313
expect(
1414
sample
15-
.find('Link')
16-
.first()
15+
.find('[data-testid="link"]')
1716
.props().href
18-
).toEqual('/ui/v1/apicatalog/#/dashboard');
17+
).toEqual('ui/v1/apicatalog/#/dashboard');
1918
});
2019

2120
it('should handle a Logout button click', () => {

0 commit comments

Comments
 (0)