Skip to content

Commit

Permalink
Migrate NoLogin and ErrorContent pages to PF4
Browse files Browse the repository at this point in the history
  • Loading branch information
rszwajko committed May 6, 2022
1 parent a373f72 commit 79396d2
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 103 deletions.
2 changes: 1 addition & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const App = ({ history, config, appReady, activateSessionTracker }) => {
}

if (isLoginMissing(config)) {
return <NoLogin logoutWasManual={config.get('logoutWasManual')} isTokenExpired={config.get('isTokenExpired')} />
return <div id='app-container'><NoLogin logoutWasManual={config.get('logoutWasManual')} isTokenExpired={config.get('isTokenExpired')} /></div>
}

return (
Expand Down
50 changes: 26 additions & 24 deletions src/GlobalErrorBoundary.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { msg, MsgContext, createMessages, locale } from './intl'
import { logout } from '_/actions'
import AppConfiguration from '_/config'
import ErrorContent from '_/components/ErrorContent'
import Header from './components/Header'
import { Page } from '@patternfly/react-core'
import * as branding from '_/branding'

class GlobalErrorBoundary extends React.Component {
Expand Down Expand Up @@ -60,33 +62,33 @@ class GlobalErrorBoundary extends React.Component {
const { hasError, msgContextState: { msg } } = this.state
const trackText = branding.fixedStrings.ISSUES_TRACKER_TEXT || 'Github Issue Tracker'
const trackUrl = branding.fixedStrings.ISSUES_TRACKER_URL || 'https://github.com/oVirt/ovirt-web-ui/issues'
const descr = msg.globalErrorBoundaryDescription({
bugUrl: `<a href='${trackUrl}'>${trackText}</a>`,
})
const descr = (
<p dangerouslySetInnerHTML={{
__html: msg.globalErrorBoundaryDescription({
bugUrl: `<a href='${trackUrl}'>${trackText}</a>`,
}),
}}
/>
)

if (hasError) {
return (
<div>
<nav className='navbar navbar-pf-vertical obrand_masthead'>
<div className='navbar-header'>
<a href='/' className='navbar-brand obrand_headerLogoLink' id='pageheader-logo'>
<img className='obrand_mastheadLogo' src={branding.resourcesUrls.clearGif} />
</a>
</div>
</nav>
<ErrorContent
title={msg.globalErrorBoundaryTitle()}
description={descr}
leftButton={{
href: '#',
onClick: this.doLogout,
title: msg.logOut(),
}}
rightButton={{
href: AppConfiguration.applicationURL,
title: msg.refresh(),
}}
/>
<div id="app-container">
<Page header={<Header/>}>
<ErrorContent
title={msg.globalErrorBoundaryTitle()}
description={descr}
leftButton={{
href: '#',
onClick: this.doLogout,
title: msg.logOut(),
}}
rightButton={{
href: AppConfiguration.applicationURL,
title: msg.refresh(),
}}
/>
</Page>
</div>
)
}
Expand Down
75 changes: 36 additions & 39 deletions src/components/ErrorContent/index.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,43 @@
import React from 'react'
import PropTypes from 'prop-types'
import {
Button,
EmptyState,
EmptyStateIcon,
EmptyStateBody,
EmptyStateSecondaryActions,
Title,
} from '@patternfly/react-core'
import * as branding from '_/branding'
import styles from './style.css'

const ErrorContent = ({ title, description, leftButton, rightButton }) => (
<div>
<div className={`container text-center ${styles.errorContentContainer}`}>
<img src={branding.resourcesUrls.errorImg} />
<h1 className='bolder'>{title}</h1>
<p className='h4' dangerouslySetInnerHTML={{ __html: description }} />
<div>
<a
href={leftButton.href}
className='btn'
onClick={
leftButton.onClick
? e => {
e.preventDefault()
leftButton.onClick()
}
: null
}
>
{leftButton.title}
</a>
<a
href={rightButton.href}
className='btn-primary btn'
onClick={
rightButton.onClick
? e => {
e.preventDefault()
rightButton.onClick()
}
: null
}
>
{rightButton.title}
</a>
</div>
</div>
</div>
<EmptyState>
<EmptyStateIcon icon={() => <img src={branding.resourcesUrls.errorImg} />} />
<Title headingLevel="h4" size="lg">
{title}
</Title>
<EmptyStateBody>
{description}
</EmptyStateBody>
<EmptyStateSecondaryActions>
<Button
component='a'
href={leftButton.href}
onClick={leftButton.onClick}
variant='secondary'
>
{leftButton.title}
</Button>
<Button
component='a'
href={rightButton.href}
onClick={rightButton.onClick}
variant='primary'
>
{rightButton.title}
</Button>
</EmptyStateSecondaryActions>
</EmptyState>
)

const buttonType = PropTypes.shape({
Expand All @@ -51,7 +48,7 @@ const buttonType = PropTypes.shape({

ErrorContent.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
description: PropTypes.node.isRequired,
leftButton: buttonType,
rightButton: buttonType,
}
Expand Down
8 changes: 0 additions & 8 deletions src/components/ErrorContent/style.css

This file was deleted.

47 changes: 28 additions & 19 deletions src/components/NoLogin/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import React, { useContext } from 'react'
import PropTypes from 'prop-types'

import { Button } from '@patternfly/react-core'
import {
Button,
EmptyState,
EmptyStateIcon,
EmptyStateBody,
Page,
Title,
} from '@patternfly/react-core'
import { MsgContext } from '_/intl'
import AppConfiguration from '_/config'
import Header from '../Header'
Expand All @@ -14,29 +21,31 @@ import style from './style.css'
const NoLogin = ({ logoutWasManual = false, isTokenExpired = false }) => {
const { msg } = useContext(MsgContext)
return (
<div>
<Header />
<div className={`container text-center ${style['logout-container']}`}>
<img src={signOutIcon} className={style['logout-icon']} />
<h1>{msg.loggedOut()}</h1>
<div className={style['logout-description']}>
<Page header={<Header/>} >
<EmptyState>
<EmptyStateIcon icon={() => <img src={signOutIcon} className={style['logout-icon']} />} />
<Title headingLevel="h4" size="lg">
{msg.loggedOut()}
</Title>
<EmptyStateBody>
{ window.DEVELOPMENT && isTokenExpired && msg.logoutTokenExpiredMessage() }
{ window.DEVELOPMENT && !isTokenExpired && msg.logoutDeveloperMessage() }
{ !window.DEVELOPMENT && msg.logoutRedirected() }
</div>
<div>
<Button
component='a'
href={AppConfiguration.applicationURL}
variant='primary'
>
{msg.logBackIn()}
</Button>
</div>
</div>
</div>
</EmptyStateBody>

<Button
component='a'
href={AppConfiguration.applicationURL}
variant='primary'
>
{msg.logBackIn()}
</Button>
</EmptyState>

</Page>
)
}

NoLogin.propTypes = {
logoutWasManual: PropTypes.bool.isRequired,
isTokenExpired: PropTypes.bool,
Expand Down
12 changes: 0 additions & 12 deletions src/components/NoLogin/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,3 @@
opacity: 0.25;
margin-bottom: 50px;
}

.logout-container h1 {
font-weight: 600;
}

.logout-description {
margin: 25px 0px;
max-width: 500px;
display: inline-block;
font-size: 14px;
color: #72767b;
}

0 comments on commit 79396d2

Please sign in to comment.