This repository has been archived by the owner on Aug 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #36 from mturley/manifest-upload-ui-changes
Add modal for uploading/resetting manifest in UI (cherry picked from commit bc44a72) Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1805817
- Loading branch information
Showing
14 changed files
with
323 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
app/javascript/react/screens/App/Analytics/components/ManifestUpdateModal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Modal, Grid, Button, noop } from 'patternfly-react'; | ||
import Dropzone from 'react-dropzone'; | ||
import { readFirstFile } from './helpers'; | ||
|
||
const ManifestUpdateModal = ({ onClose, manifestInfo, uploadManifestAction, resetManifestAction, ...otherProps }) => ( | ||
<Modal {...otherProps} onHide={onClose} backdrop="static" className="manifest-update-modal"> | ||
<Dropzone onDrop={files => readFirstFile(files, file => uploadManifestAction(file.body))}> | ||
{({ getRootProps, getInputProps, open: openFileBrowser }) => ( | ||
<div {...getRootProps()} onClick={event => event.preventDefault()}> | ||
<input {...getInputProps()} /> | ||
<Modal.Header> | ||
<Modal.CloseButton onClick={onClose} /> | ||
<Modal.Title>{__('Update Manifest')}</Modal.Title> | ||
</Modal.Header> | ||
<Modal.Body> | ||
<Grid.Row className="show-grid"> | ||
<Grid.Col xs={6} className="text-right"> | ||
{__('Current manifest version')}: | ||
</Grid.Col> | ||
<Grid.Col xs={6}>{manifestInfo.manifest_version}</Grid.Col> | ||
</Grid.Row> | ||
<Grid.Row className="show-grid"> | ||
<Grid.Col xs={6} className="text-right"> | ||
{__('Default manifest version')}: | ||
</Grid.Col> | ||
<Grid.Col xs={6}>{manifestInfo.default_manifest_version}</Grid.Col> | ||
</Grid.Row> | ||
</Modal.Body> | ||
<Modal.Footer> | ||
<Button bsStyle="default" onClick={resetManifestAction} disabled={manifestInfo.using_default_manifest}> | ||
{__('Restore default manifest')} | ||
</Button> | ||
<Button bsStyle="default" onClick={openFileBrowser}> | ||
{__('Upload new manifest')} | ||
</Button> | ||
<Button bsStyle="primary" className="btn-cancel" onClick={onClose}> | ||
{__('Close')} | ||
</Button> | ||
</Modal.Footer> | ||
</div> | ||
)} | ||
</Dropzone> | ||
</Modal> | ||
); | ||
|
||
ManifestUpdateModal.propTypes = { | ||
onClose: PropTypes.func, | ||
manifestInfo: PropTypes.shape({ | ||
manifest_version: PropTypes.string, | ||
default_manifest_version: PropTypes.string, | ||
using_default_manifest: PropTypes.bool | ||
}), | ||
uploadManifestAction: PropTypes.func, | ||
resetManifestAction: PropTypes.func | ||
}; | ||
|
||
ManifestUpdateModal.defaultProps = { | ||
onClose: noop, | ||
manifestInfo: {}, | ||
uploadManifestAction: noop, | ||
resetManifestAction: noop | ||
}; | ||
|
||
export default ManifestUpdateModal; |
73 changes: 73 additions & 0 deletions
73
app/javascript/react/screens/App/Analytics/components/ManifestVersion.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Button, Icon, Spinner, noop } from 'patternfly-react'; | ||
import ManifestUpdateModal from './ManifestUpdateModal'; | ||
|
||
const ManifestVersion = ({ | ||
manifestInfo, | ||
isLoadingManifest, | ||
manifestError, | ||
manifestUpdateModalVisible, | ||
toggleManifestUpdateModalAction, | ||
uploadManifestAction, | ||
resetManifestAction, | ||
...otherProps | ||
}) => | ||
manifestInfo && ( | ||
<React.Fragment> | ||
<h6 id="migration-analytics-manifest-version" {...otherProps}> | ||
{!isLoadingManifest ? ( | ||
<React.Fragment> | ||
{__('Manifest version:')} | ||
| ||
{manifestInfo.manifest_version} | ||
| ||
<Button bsStyle="link" bsSize="xsmall" onClick={() => toggleManifestUpdateModalAction(true)}> | ||
{__('Update')} | ||
</Button> | ||
</React.Fragment> | ||
) : ( | ||
<span className="manifest-loading-message"> | ||
{__('Loading manifest...')} | ||
<Spinner inline size="xs" loading /> | ||
</span> | ||
)} | ||
{manifestError && manifestError.message && ( | ||
<span className="manifest-error-message"> | ||
<Icon type="pf" name="error-circle-o" size="sm" /> {manifestError.message} | ||
</span> | ||
)} | ||
</h6> | ||
<ManifestUpdateModal | ||
show={manifestUpdateModalVisible} | ||
onClose={() => toggleManifestUpdateModalAction(false)} | ||
manifestInfo={manifestInfo} | ||
uploadManifestAction={uploadManifestAction} | ||
resetManifestAction={resetManifestAction} | ||
/> | ||
</React.Fragment> | ||
); | ||
|
||
ManifestVersion.propTypes = { | ||
manifestInfo: PropTypes.shape({ | ||
manifest_version: PropTypes.string | ||
}), | ||
isLoadingManifest: PropTypes.bool, | ||
manifestError: PropTypes.shape({ message: PropTypes.string }), | ||
manifestUpdateModalVisible: PropTypes.bool, | ||
toggleManifestUpdateModalAction: PropTypes.func, | ||
uploadManifestAction: PropTypes.func, | ||
resetManifestAction: PropTypes.func | ||
}; | ||
|
||
ManifestVersion.defaultProps = { | ||
manifestInfo: null, | ||
isLoadingManifest: false, | ||
manifestError: null, | ||
manifestUpdateModalVisible: false, | ||
toggleManifestUpdateModalAction: noop, | ||
uploadManifestAction: noop, | ||
resetManifestAction: noop | ||
}; | ||
|
||
export default ManifestVersion; |
7 changes: 7 additions & 0 deletions
7
app/javascript/react/screens/App/Analytics/components/helpers.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export const readFirstFile = (fileHandles, onLoad) => { | ||
if (fileHandles && fileHandles.length > 0) { | ||
const reader = new FileReader(); | ||
reader.onload = () => onLoad({ filename: fileHandles[0].name, body: reader.result }); | ||
reader.readAsBinaryString(fileHandles[0]); | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,31 @@ | ||
import { connect } from 'react-redux'; | ||
import Analytics from './Analytics'; | ||
import { fetchManifestInfoAction } from './redux/analyticsActions'; | ||
import { | ||
fetchManifestInfoAction, | ||
toggleManifestUpdateModalAction, | ||
uploadManifestAction, | ||
resetManifestAction | ||
} from './redux/analyticsActions'; | ||
|
||
const mapStateToProps = ({ | ||
migrationAnalytics: { | ||
analytics: { manifestInfo } | ||
analytics: { | ||
manifestInfo, | ||
manifestUpdateModalVisible, | ||
isFetchingManifestInfo, | ||
isChangingManifest, | ||
errorFetchingManifestInfo, | ||
errorChangingManifest | ||
} | ||
} | ||
}) => ({ manifestInfo }); | ||
}) => ({ | ||
manifestInfo, | ||
manifestUpdateModalVisible, | ||
isLoadingManifest: isFetchingManifestInfo || isChangingManifest, | ||
manifestError: errorFetchingManifestInfo || errorChangingManifest | ||
}); | ||
|
||
export default connect( | ||
mapStateToProps, | ||
{ fetchManifestInfoAction } | ||
{ fetchManifestInfoAction, toggleManifestUpdateModalAction, uploadManifestAction, resetManifestAction } | ||
)(Analytics); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.