feat: Migrate dashboard to Material (#1959)

* Fix

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Fix error font size

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Migrate SearchBar and Tile - wip

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Fix css and test

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Fix tests and components

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Fix bug

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Fix code smell

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Address changes and other fix

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Replace back icon to use material

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

Author: taban03

api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css

@@ -128,3 +128,16 @@ a {
 #dash-buttons > span {
     margin-right: 10px;
 }
+
+#refresh-api-button {
+    font-size: 16px;
+    height: 2em;
+    color: #3272d9;
+    background-color: #ffffff;
+}
+
+#refresh-api-button:hover {
+    background-color: #F4F7FA;
+    border: none;
+}
+

api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx

@@ -1,4 +1,4 @@
-import { Text, Button } from 'mineral-ui';
+import { Typography, IconButton } from '@material-ui/core';
 import { Component } from 'react';
 import SearchCriteria from '../Search/SearchCriteria';
 import Shield from '../ErrorBoundary/Shield/Shield';
@@ -68,9 +68,15 @@ export default class Dashboard extends Component {
                         toggleWizard={this.toggleWizard}
                         visible
                     />
-                    <Button id="refresh-api-button" size="medium" onClick={this.refreshStaticApis}>
+                    <IconButton
+                        id="refresh-api-button"
+                        size="medium"
+                        variant="outlined"
+                        onClick={this.refreshStaticApis}
+                        style={{ borderRadius: '0.1875em' }}
+                    >
                         Refresh Static APIs
-                    </Button>
+                    </IconButton>
                 </div>
                 <WizardContainer />
                 <ConfirmDialogContainer />
@@ -79,7 +85,9 @@ export default class Dashboard extends Component {
                     <div className="no-tiles-container">
                         <br />
                         <br />
-                        <Text element="h3">Tile details could not be retrieved, the following error was returned:</Text>
+                        <Typography data-testid="error" variant="subtitle1">
+                            Tile details could not be retrieved, the following error was returned:
+                        </Typography>
                         {error}
                     </div>
                 )}
@@ -96,9 +104,9 @@ export default class Dashboard extends Component {
                             {hasTiles && tiles.map(tile => <Tile key={tile.id} tile={tile} history={history} />)}
                             {!hasTiles &&
                                 hasSearchCriteria && (
-                                    <Text id="search_no_results" element="h4" color="#1d5bbf">
+                                    <Typography id="search_no_results" variant="subtitle2" style={{ color: '#1d5bbf' }}>
                                         No tiles found matching search criteria
-                                    </Text>
+                                    </Typography>
                                 )}
                         </div>
                     </div>

api-catalog-ui/frontend/src/components/Dashboard/Dashboard.test.jsx

@@ -65,7 +65,7 @@ describe('>>> Dashboard component tests', () => {
         );
         expect(
             dashboard
-                .find('Text')
+                .find('[data-testid="error"]')
                 .first()
                 .children()
                 .text()

api-catalog-ui/frontend/src/components/Login/Login.css

@@ -81,7 +81,6 @@ form#login-form {
     margin: 150px 0px;
 }
 
-
 .MuiButton-label {
     flex-direction: row;
     align-items: flex-start;
@@ -94,7 +93,7 @@ form#login-form {
     width: 50%;
     height: 36px;
     left: 218px;
-    ine-height: 16px;
+    line-height: 16px;
     /* identical to box height, or 114% */
     letter-spacing: 1.25px;
     text-transform: uppercase;
@@ -104,10 +103,15 @@ form#login-form {
     flex: none;
     order: 0;
     flex-grow: 0;
-    margin: 25px -14px 20px 0px;
+    margin: 25px -14px 10px 14px;
     position: static;
 }
 
+.MuiButton-label:hover {
+    background-color: rgb(50, 114, 217);
+    border: none;
+}
+
 .MuiTypography-gutterBottom {
     color: #57606E;
 }

api-catalog-ui/frontend/src/components/Login/Login.jsx

@@ -190,22 +190,24 @@ export default class Login extends React.Component {
                                             InputProps={{
                                                 endAdornment: (
                                                     <InputAdornment position="end">
+                                                        {messageText && <ErrorOutlineIcon className="errorIcon" />}
                                                         <IconButton
                                                             aria-label="toggle password visibility"
                                                             edge="end"
                                                             onClick={() => this.handleClickShowPassword(showPassword)}
                                                         >
                                                             {showPassword ? <VisibilityOff /> : <Visibility />}
                                                         </IconButton>
-                                                        {messageText && <ErrorOutlineIcon className="errorIcon" />}
                                                     </InputAdornment>
                                                 ),
                                             }}
                                         />
                                         {warning && <Link underline="hover"> Caps Lock is ON! </Link>}
                                         <Button
+                                            variant="outlined"
                                             className="loginButton"
                                             label=""
+                                            style={{ border: 'none' }}
                                             type="submit"
                                             data-testid="submit"
                                             disabled={this.isDisabled()}

api-catalog-ui/frontend/src/components/PageNotFound/PageNotFound.css

@@ -2,3 +2,31 @@
     color: #58606e ;
     text-align: left;
 }
+
+#go-back-button {
+    font-weight: bold;
+    font-size: 14px;
+    width: fit-content;
+    padding-left: .6rem;
+    padding-right: .6rem;
+    height: 32px;
+    margin-left: 20px;
+    border-radius: 3px;
+    background-color: #fff;
+    cursor: pointer;
+    color: #0c7bb3;
+    transition: .3s background-color;
+}
+
+#go-back-button:hover {
+    background-color: #f5f7fa;
+}
+
+#go-back-button > span > svg {
+    margin: 0;
+}
+
+#label {
+    margin-left: 20px;
+    margin-bottom: 20px;
+}

api-catalog-ui/frontend/src/components/PageNotFound/PageNotFound.jsx

@@ -1,6 +1,8 @@
 import { Component } from 'react';
-import { Button, Text } from 'mineral-ui';
-import IconChevronLeft from 'mineral-ui-icons/IconChevronLeft';
+import { IconButton, Typography } from '@material-ui/core';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+
+import './PageNotFound.css';
 
 export default class PageNotFound extends Component {
     handleGoToHome = () => {
@@ -9,20 +11,23 @@ export default class PageNotFound extends Component {
     };
 
     render() {
-        const iconBack = <IconChevronLeft />;
+        const iconBack = <ChevronLeftIcon />;
         return (
             <div>
-                <Text element="h1">Page Not Found</Text>
+                <br />
+                <Typography id="label" variant="h5">
+                    Page Not Found
+                </Typography>
                 <div>
-                    <Button
-                        primary
+                    <IconButton
+                        id="go-back-button"
                         data-testid="go-home-button"
                         onClick={this.handleGoToHome}
                         size="medium"
-                        iconStart={iconBack}
                     >
+                        {iconBack}
                         Go to Dashboard
-                    </Button>
+                    </IconButton>
                 </div>
             </div>
         );

api-catalog-ui/frontend/src/components/Search/SearchCriteria.jsx

@@ -1,8 +1,8 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { debounce } from 'lodash';
-import { TextInput } from 'mineral-ui';
-import IconSearch from 'mineral-ui-icons/IconSearch';
-import { IconClear } from 'mineral-ui-icons';
+import { InputAdornment, TextField } from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+import ClearIcon from '@material-ui/icons/Clear';
 import './search.css';
 
 export default class SearchCriteria extends Component {
@@ -37,16 +37,18 @@ export default class SearchCriteria extends Component {
     render() {
         const { criteria } = this.state;
         const { placeholder } = this.props;
-        const iconSearch = <IconSearch />;
+        const iconSearch = <SearchIcon />;
         const iconClear = (
-            <IconClear data-testid="clear-button" className="clear-text-search" onClick={this.clearSearch} />
+            <ClearIcon data-testid="clear-button" className="clear-text-search" onClick={this.clearSearch} />
         );
         const icon = criteria.length === 0 ? iconSearch : iconClear;
         return (
-            <TextInput
+            <TextField
                 className="search-bar"
                 data-testid="search-bar"
-                iconEnd={icon}
+                InputProps={{
+                    endAdornment: <InputAdornment position="end">{icon}</InputAdornment>,
+                }}
                 placeholder={placeholder}
                 value={criteria}
                 onChange={this.handleCriteriaChange}

api-catalog-ui/frontend/src/components/Search/SearchCriteria.test.jsx

@@ -1,15 +1,11 @@
-import { ThemeProvider } from 'mineral-ui';
-import { debounce } from 'lodash';
 // tslint:disable-next-line:no-implicit-dependencies
 import * as enzyme from 'enzyme';
 import SearchCriteria from './SearchCriteria';
 
 describe('>>> Search bar component tests', () => {
     it('should render all fields with initial state', () => {
         const wrapper = enzyme.shallow(
-            <ThemeProvider>
-                <SearchCriteria />
-            </ThemeProvider>
+            <SearchCriteria />
         );
         expect(wrapper.find('.header')).toBeDefined();
         expect(wrapper.find('.search-bar')).toBeDefined();

api-catalog-ui/frontend/src/components/Tile/Tile.css

@@ -50,10 +50,27 @@
     left: 0;
 }
 
+.MuiSvgIcon-root {
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.MuiTypography-root {
+    margin: 5px;
+    margin-bottom: 11px;
+}
+
+h6.MuiTypography-root.MuiTypography-subtitle1 {
+    margin-bottom: 11px;
+    margin: 1px;
+}
+
 .grid-tile-sso {
     position: absolute;
     right: 0;
     bottom: 0;
+    font-size: 16px;
+    margin-right: 12px;
     font-weight: 700;
 }