Felix Edel
ed9d0446d5
Currently the "refresh" animations look quite different depending on the page and the type of event (refresh button, initial page load, ...). This tries to make a start by updating the "Fetching info ..." animation (shown on initial page load) with Patternfly's "empty state" pattern [1] in combination with an animated spinner. For "Refreshable" pages, a similar animation is used in the upper right corner (like before) but with an updated spinner and icon. By using a dedicated React component rather than a base class, the "refresh" button can be more nicely integrated into the layout of the page/container and it doesn't look "out of scope" for the refreshable component. For the API page I've removed the refresh completely since it wasn't implemented at all. [1] https://www.patternfly.org/v4/documentation/react/components/emptystate Change-Id: I2274c212f14aece27ff49bfc7900d9b1a0fd01d0
75 lines
1.6 KiB
React
75 lines
1.6 KiB
React
// Copyright 2020 BMW Group
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License"); you may
|
|
// not use this file except in compliance with the License. You may obtain
|
|
// a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
// License for the specific language governing permissions and limitations
|
|
// under the License.
|
|
|
|
import * as React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import {
|
|
Button,
|
|
Title,
|
|
EmptyState,
|
|
EmptyStateVariant,
|
|
Spinner,
|
|
} from '@patternfly/react-core'
|
|
|
|
import { SyncIcon } from '@patternfly/react-icons'
|
|
|
|
function Fetchable(props) {
|
|
const { isFetching, fetchCallback } = props
|
|
let content = null
|
|
|
|
if (isFetching) {
|
|
content = (
|
|
<div>
|
|
<Spinner size="md" />
|
|
</div>
|
|
)
|
|
} else {
|
|
content = (
|
|
<Button
|
|
variant="link"
|
|
isInline icon={<SyncIcon />}
|
|
onClick={() => {fetchCallback({force: true})}}
|
|
style={{textDecoration: 'none'}}
|
|
>
|
|
refresh
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div style={{float: 'right'}}>
|
|
{content}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Fetchable.propTypes = {
|
|
isFetching: PropTypes.bool,
|
|
fetchCallback: PropTypes.func,
|
|
}
|
|
|
|
function Fetching() {
|
|
return (
|
|
<EmptyState variant={EmptyStateVariant.small}>
|
|
<Spinner />
|
|
<Title headingLevel="h4" size="lg">
|
|
Fetching info...
|
|
</Title>
|
|
</EmptyState>
|
|
)
|
|
}
|
|
|
|
export { Fetchable, Fetching }
|