Skip to content

Commit

Permalink
Merge pull request #163 from NordicSemiconductor/fix/show-link-to-rel…
Browse files Browse the repository at this point in the history 
…eases-when-asking-for-update

Show link to releases when asking for core update
  • Loading branch information
@mrodem
mrodem authored Jan 26, 2018
2 parents 36c1141 + affc9fd commit e633ece
Show file tree
Hide file tree
Showing 8 changed files with 270 additions and 249 deletions.
94 changes: 52 additions & 42 deletions lib/components/ConfirmationDialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,52 +40,62 @@ import PropTypes from 'prop-types';
import { Modal, Button, ModalHeader, ModalFooter, ModalBody, ModalTitle } from 'react-bootstrap';
import Spinner from './Spinner';

/**
* Generic dialog that asks the user to confirm something. The dialog content
* and button actions can be customized.
*
* @param {boolean} isVisible Show the dialog or not.
* @param {boolean} [isInProgress] Shows a spinner if true.
* @param {string} [title] The dialog title.
* @param {Array|*} [children] Array or React element to render in the dialog.
* @param {string} [text] Text to render in the dialog. Alternative to `children`.
* @param {function} onOk Invoked when the user clicks OK.
* @param {function} [onCancel] Invoked when the user cancels. Not showing cancel button if
* this is not provided.
* @param {string} [okButtonText] Label text for the OK button. Default: "OK".
* @param {string} [cancelButtonText] Label text for the cancel button. Default: "Cancel".
* @returns {*} React element to be rendered.
*/
const ConfirmationDialog = ({
isVisible,
isInProgress,
title,
text,
onOk,
onCancel,
okButtonText,
cancelButtonText,
linkText,
linkAddress,
}) => (
<div>
<Modal show={isVisible} onHide={onCancel} backdrop={isInProgress ? 'static' : false}>
<ModalHeader closeButton={!isInProgress}>
<ModalTitle>{title}</ModalTitle>
</ModalHeader>
<ModalBody>
<p>{text}</p>
{
linkAddress &&
<a href={linkAddress} target="_blank" rel="noopener noreferrer">
{linkText || linkAddress} </a>
}
</ModalBody>
<ModalFooter>
{ isInProgress ? <Spinner /> : null }
&nbsp;
<Button onClick={onOk} disabled={isInProgress}>{okButtonText}</Button>
{
onCancel &&
<Button onClick={onCancel} disabled={isInProgress}>
{cancelButtonText}
</Button>
}
</ModalFooter>
</Modal>
</div>
isVisible,
isInProgress,
title,
children,
text,
onOk,
onCancel,
okButtonText,
cancelButtonText,
}) => (
<Modal show={isVisible} onHide={onCancel} backdrop={isInProgress ? 'static' : false}>
<ModalHeader closeButton={!isInProgress}>
<ModalTitle>{title}</ModalTitle>
</ModalHeader>
<ModalBody>
{ children || <p>{ text }</p> }
</ModalBody>
<ModalFooter>
{ isInProgress ? <Spinner /> : null }
&nbsp;
<Button onClick={onOk} disabled={isInProgress}>{okButtonText}</Button>
{
onCancel &&
<Button onClick={onCancel} disabled={isInProgress}>
{cancelButtonText}
</Button>
}
</ModalFooter>
</Modal>
);

ConfirmationDialog.propTypes = {
isVisible: PropTypes.bool.isRequired,
title: PropTypes.string,
text: PropTypes.string.isRequired,
linkText: PropTypes.string,
linkAddress: PropTypes.string,
text: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
onOk: PropTypes.func.isRequired,
onCancel: PropTypes.func,
okButtonText: PropTypes.string,
Expand All @@ -95,8 +105,8 @@ ConfirmationDialog.propTypes = {

ConfirmationDialog.defaultProps = {
title: 'Confirm',
linkText: null,
linkAddress: null,
text: null,
children: null,
isInProgress: false,
onCancel: null,
okButtonText: 'OK',
Expand Down
258 changes: 125 additions & 133 deletions lib/components/__tests__/__snapshots__/ConfirmationDialog-test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,154 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ConfirmationDialog should not render cancel button if onCancel function is not provided 1`] = `
<div>
<Modal
backdrop={false}
onHide={null}
show={true}
<Modal
backdrop={false}
onHide={null}
show={true}
>
<ModalHeader
closeButton={true}
>
<ModalHeader
closeButton={true}
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Something happened.
</p>
</ModalBody>
<ModalFooter>
 
<Button
disabled={false}
onClick={[Function]}
>
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Something happened.
</p>
</ModalBody>
<ModalFooter>
 
<Button
disabled={false}
onClick={[Function]}
>
OK
</Button>
</ModalFooter>
</Modal>
</div>
OK
</Button>
</ModalFooter>
</Modal>
`;

exports[`ConfirmationDialog should render invisible dialog 1`] = `
<div>
<Modal
backdrop={false}
onHide={[Function]}
show={false}
<Modal
backdrop={false}
onHide={[Function]}
show={false}
>
<ModalHeader
closeButton={true}
>
<ModalHeader
closeButton={true}
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Do you confirm?
</p>
</ModalBody>
<ModalFooter>
 
<Button
disabled={false}
onClick={[Function]}
>
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Do you confirm?
</p>
</ModalBody>
<ModalFooter>
 
<Button
disabled={false}
onClick={[Function]}
>
OK
</Button>
<Button
disabled={false}
onClick={[Function]}
>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
OK
</Button>
<Button
disabled={false}
onClick={[Function]}
>
Cancel
</Button>
</ModalFooter>
</Modal>
`;

exports[`ConfirmationDialog should render visible dialog with text 1`] = `
<div>
<Modal
backdrop={false}
onHide={[Function]}
show={true}
<Modal
backdrop={false}
onHide={[Function]}
show={true}
>
<ModalHeader
closeButton={true}
>
<ModalHeader
closeButton={true}
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Do you confirm?
</p>
</ModalBody>
<ModalFooter>
 
<Button
disabled={false}
onClick={[Function]}
>
OK
</Button>
<Button
disabled={false}
onClick={[Function]}
>
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Do you confirm?
</p>
</ModalBody>
<ModalFooter>
 
<Button
disabled={false}
onClick={[Function]}
>
OK
</Button>
<Button
disabled={false}
onClick={[Function]}
>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
Cancel
</Button>
</ModalFooter>
</Modal>
`;

exports[`ConfirmationDialog should render visible dialog with text and operation in progress 1`] = `
<div>
<Modal
backdrop="static"
onHide={[Function]}
show={true}
<Modal
backdrop="static"
onHide={[Function]}
show={true}
>
<ModalHeader
closeButton={false}
>
<ModalHeader
closeButton={false}
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Do you confirm?
</p>
</ModalBody>
<ModalFooter>
<img
alt="Loading..."
className="core-spinner"
height={16}
src="test-file-stub"
width={16}
/>
 
<Button
disabled={true}
onClick={[Function]}
>
OK
</Button>
<Button
disabled={true}
onClick={[Function]}
>
<ModalTitle>
Confirm
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Do you confirm?
</p>
</ModalBody>
<ModalFooter>
<img
alt="Loading..."
className="core-spinner"
height={16}
src="test-file-stub"
width={16}
/>
 
<Button
disabled={true}
onClick={[Function]}
>
OK
</Button>
<Button
disabled={true}
onClick={[Function]}
>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
Cancel
</Button>
</ModalFooter>
</Modal>
`;
Loading

0 comments on commit e633ece

Please sign in to comment.