Web: remove config error drawer
This changes the bell icon at the top to link directly to the config-errors page. Currently, the bell icon opens a notification drawer which shows one rendition of a list of config errors, and if the user clicks on any error, it navigates to the config-errors page which shows another rendition. Rather than having two ways of viewing config errors, let's just have one. Change-Id: I630fb2311ec5fa47c8a0dbf8a838c4e0453f32e1
This commit is contained in:
parent
bcae20f897
commit
b63fc7bed6
|
@ -35,17 +35,10 @@ import {
|
||||||
DropdownToggle,
|
DropdownToggle,
|
||||||
DropdownSeparator,
|
DropdownSeparator,
|
||||||
KebabToggle,
|
KebabToggle,
|
||||||
Modal,
|
|
||||||
Nav,
|
Nav,
|
||||||
NavItem,
|
NavItem,
|
||||||
NavList,
|
NavList,
|
||||||
NotificationBadge,
|
NotificationBadge,
|
||||||
NotificationDrawer,
|
|
||||||
NotificationDrawerBody,
|
|
||||||
NotificationDrawerList,
|
|
||||||
NotificationDrawerListItem,
|
|
||||||
NotificationDrawerListItemBody,
|
|
||||||
NotificationDrawerListItemHeader,
|
|
||||||
Page,
|
Page,
|
||||||
PageHeader,
|
PageHeader,
|
||||||
PageHeaderTools,
|
PageHeaderTools,
|
||||||
|
@ -97,7 +90,6 @@ class App extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
showErrors: false,
|
|
||||||
isTenantDropdownOpen: false,
|
isTenantDropdownOpen: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -275,12 +267,6 @@ class App extends React.Component {
|
||||||
history.push(tenant.defaultRoute)
|
history.push(tenant.defaultRoute)
|
||||||
}
|
}
|
||||||
|
|
||||||
handleModalClose = () => {
|
|
||||||
this.setState({
|
|
||||||
showErrors: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
renderNotifications = (notifications) => {
|
renderNotifications = (notifications) => {
|
||||||
return (
|
return (
|
||||||
<ToastNotificationList>
|
<ToastNotificationList>
|
||||||
|
@ -313,68 +299,6 @@ class App extends React.Component {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderConfigErrors = (configErrors) => {
|
|
||||||
const { history } = this.props
|
|
||||||
const { showErrors } = this.state
|
|
||||||
const errors = []
|
|
||||||
configErrors.forEach((item, idx) => {
|
|
||||||
let error = item.error
|
|
||||||
let cookie = error.indexOf('The error was:')
|
|
||||||
if (cookie !== -1) {
|
|
||||||
error = error.slice(cookie + 18).split('\n')[0]
|
|
||||||
}
|
|
||||||
let ctxPath = item.source_context.path
|
|
||||||
if (item.source_context.branch !== 'master') {
|
|
||||||
ctxPath += ' (' + item.source_context.branch + ')'
|
|
||||||
}
|
|
||||||
errors.push(
|
|
||||||
<NotificationDrawerListItem
|
|
||||||
key={idx}
|
|
||||||
variant="danger"
|
|
||||||
onClick={() => {
|
|
||||||
history.push(this.props.tenant.linkPrefix + '/config-errors')
|
|
||||||
this.setState({ showErrors: false })
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NotificationDrawerListItemHeader
|
|
||||||
title={item.source_context.project + ' | ' + ctxPath}
|
|
||||||
variant="danger" />
|
|
||||||
<NotificationDrawerListItemBody>
|
|
||||||
<pre style={{ whiteSpace: 'pre-wrap' }}>
|
|
||||||
{error}
|
|
||||||
</pre>
|
|
||||||
</NotificationDrawerListItemBody>
|
|
||||||
</NotificationDrawerListItem>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={showErrors}
|
|
||||||
onClose={this.handleModalClose}
|
|
||||||
aria-label="Config Errors"
|
|
||||||
header={
|
|
||||||
<>
|
|
||||||
<span className="zuul-config-errors-title">
|
|
||||||
Config Errors
|
|
||||||
</span>
|
|
||||||
<span className="zuul-config-errors-count">
|
|
||||||
{errors.length} error(s)
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<NotificationDrawer>
|
|
||||||
<NotificationDrawerBody>
|
|
||||||
<NotificationDrawerList>
|
|
||||||
{errors.map(item => (item))}
|
|
||||||
</NotificationDrawerList>
|
|
||||||
</NotificationDrawerBody>
|
|
||||||
</NotificationDrawer>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
renderTenantDropdown() {
|
renderTenantDropdown() {
|
||||||
const { tenant, tenants } = this.props
|
const { tenant, tenants } = this.props
|
||||||
const { isTenantDropdownOpen } = this.state
|
const { isTenantDropdownOpen } = this.state
|
||||||
|
@ -557,12 +481,11 @@ class App extends React.Component {
|
||||||
<NotificationBadge
|
<NotificationBadge
|
||||||
isRead={false}
|
isRead={false}
|
||||||
aria-label="Notifications"
|
aria-label="Notifications"
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault()
|
|
||||||
this.setState({ showErrors: !this.state.showErrors })
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<BellIcon />
|
<Link to={this.props.tenant.linkPrefix + '/config-errors'}
|
||||||
|
style={{color: 'white'}}>
|
||||||
|
<BellIcon />
|
||||||
|
</Link>
|
||||||
</NotificationBadge>
|
</NotificationBadge>
|
||||||
}
|
}
|
||||||
<SelectTz />
|
<SelectTz />
|
||||||
|
@ -586,7 +509,6 @@ class App extends React.Component {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{notifications.length > 0 && this.renderNotifications(notifications)}
|
{notifications.length > 0 && this.renderNotifications(notifications)}
|
||||||
{this.renderConfigErrors(configErrors)}
|
|
||||||
<Page className="zuul-page" header={pageHeader} tertiaryNav={nav}>
|
<Page className="zuul-page" header={pageHeader} tertiaryNav={nav}>
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
{this.renderContent()}
|
{this.renderContent()}
|
||||||
|
|
Loading…
Reference in New Issue