1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
// 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 PropTypes from 'prop-types'
import React from 'react'
import { connect } from 'react-redux'
import {
Button,
ButtonVariant,
Modal,
ModalVariant,
Switch
} from '@patternfly/react-core'
import { CogIcon } from '@patternfly/react-icons'
import { setPreference } from '../../actions/preferences'
class ConfigModal extends React.Component {
static propTypes = {
location: PropTypes.object,
tenant: PropTypes.object,
preferences: PropTypes.object,
timezone: PropTypes.string,
remoteData: PropTypes.object,
dispatch: PropTypes.func
}
constructor(props) {
super(props)
this.state = {
isModalOpen: false,
autoReload: false,
}
this.handleModalToggle = () => {
this.setState(({ isModalOpen }) => ({
isModalOpen: !isModalOpen
}))
this.resetState()
}
this.handleSave = () => {
this.handleModalToggle()
this.props.dispatch(setPreference('autoReload', this.state.autoReload))
}
this.handleAutoReload = () => {
this.setState(({ autoReload }) => ({
autoReload: !autoReload
}))
}
}
resetState() {
this.setState({
autoReload: this.props.preferences.autoReload,
})
}
render() {
const { isModalOpen, autoReload } = this.state
return (
<React.Fragment>
<Button
variant={ButtonVariant.plain}
key="cog"
onClick={this.handleModalToggle}>
<CogIcon />
</Button>
<Modal
variant={ModalVariant.small}
title="Preferences"
isOpen={isModalOpen}
onClose={this.handleModalToggle}
actions={[
<Button key="confirm" variant="primary" onClick={this.handleSave}>
Confirm
</Button>,
<Button key="cancel" variant="link" onClick={this.handleModalToggle}>
Cancel
</Button>
]}
>
<div>
<p key="info">Application settings are saved in browser local storage only. They are applied whether authenticated or not.</p>
<Switch
key="autoreload"
id="autoreload"
label="Auto reload status page"
isChecked={autoReload}
onChange={this.handleAutoReload}
/>
</div>
</Modal>
</React.Fragment>
)
}
}
export default connect(state => ({
preferences: state.preferences,
}))(ConfigModal)
|
