Commit 53bd890a authored by Audrey Hamelers's avatar Audrey Hamelers
parent 62ce0e38
Pipeline #13420 failed with stages
in 26 seconds
import React from 'react'
import { Query } from 'react-apollo'
import styled, { withTheme } from 'styled-components'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Link, H3, Icon } from '@pubsweet/ui'
import { Loading, LoadingIcon, Table, Notification } from '../ui'
......@@ -15,6 +15,12 @@ const ListTable = styled(Table)`
text-align: right;
}
`
const Alert = styled.small`
display: inline-flex;
align-items: center;
color: ${th('colorError')};
margin-left: calc(${th('gridUnit')} * 5);
`
const HelpdeskQueue = {
'needs submission QA': ['submitted'],
'needs XML QA': ['xml-qa'],
......@@ -39,17 +45,6 @@ const Completed = {
deleted: ['deleted'],
}
const AlertIcon = withTheme(({ theme, interval }) => (
<Icon
color={theme.colorError}
size={2}
style={{ cursor: 'help', float: 'right' }}
title={`Manuscripts older than ${interval}`}
>
alert-octagon
</Icon>
))
const AlertQuery = ({ states, interval }) => (
<Query
fetchPolicy="cache-and-network"
......@@ -58,14 +53,17 @@ const AlertQuery = ({ states, interval }) => (
>
{({ data, loading }) => {
if (loading) {
return (
<Loading>
<LoadingIcon />
</Loading>
)
return <LoadingIcon size={1.5} />
}
if (data.checkAge && data.checkAge.alert) {
return <AlertIcon interval={interval} />
return (
<Alert>
<Icon color="currentColor" size={2}>
alert-octagon
</Icon>{' '}
Manuscripts older than {interval}
</Alert>
)
}
return null
}}
......@@ -97,12 +95,16 @@ const QueueTable = ({ title, queue, data, alerts }) => {
<tr key={row.label}>
<td>{row.count}</td>
<td>
{row.count ? (
<Link to={`/search?status=${row.status}`}>{row.label}</Link>
) : (
row.label
)}
{alerts && <AlertQuery interval={alerts} states={row.states} />}
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
{row.count ? (
<Link to={`/search?status=${row.status}`}>{row.label}</Link>
) : (
row.label
)}
{alerts && (
<AlertQuery interval={alerts} states={row.states} />
)}
</span>
</td>
</tr>
))}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment