Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Paragon StatusAlert deprecation #608

Closed
wants to merge 2 commits into from
Closed

Paragon StatusAlert deprecation #608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8c29bb
refactor: migrated StatusAlert deprecation to Alert
abdullahwaheed Jun 21, 2022
7354972
Merge branch 'master' of github.com:edx/frontend-app-payment into abd…
abdullahwaheed Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions src/feedback/AlertMessage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { StatusAlert } from '@edx/paragon';
import { Alert } from '@edx/paragon';
import { ALERT_TYPES, MESSAGE_TYPES } from './data/constants';

// Put in a message type, get an alert type.
Expand All @@ -18,13 +18,13 @@ const AlertMessage = (props) => {
} = props;

const statusAlertProps = {
alertType: ALERT_TYPES.WARNING,
variant: ALERT_TYPES.WARNING,
onClose: useCallback(() => { closeHandler(id); }),
open: true,
show: true,
};

if (messageType !== null && severityMap[messageType] !== undefined) {
statusAlertProps.alertType = severityMap[messageType];
statusAlertProps.variant = severityMap[messageType];
}

// The user message can be a
Expand All @@ -42,7 +42,11 @@ const AlertMessage = (props) => {
statusAlertProps.dialog = userMessage;
}

return <StatusAlert {...statusAlertProps} />;
return (
<Alert {...statusAlertProps} dismissible>
{statusAlertProps.dialog}
</Alert>
);
};

AlertMessage.propTypes = {
Expand Down
2 changes: 1 addition & 1 deletion src/feedback/AlertMessage.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('AlertMessage', () => {
);

const wrapper = mount(component);
wrapper.find('button.close').simulate('click');
wrapper.find('.btn').simulate('click');

expect(closeHandlerMock).toHaveBeenCalledWith(123);
});
Expand Down
272 changes: 153 additions & 119 deletions src/feedback/__snapshots__/AlertList.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,166 +5,200 @@ exports[`AlertList should be null by default 1`] = `null`;
exports[`AlertList should render messages of each type 1`] = `
Array [
<div
className="alert fade alert-dismissible alert-warning show"
hidden={false}
className="fade alert-content alert alert-warning show"
dialog="Boo indeed!"
role="alert"
>
<button
aria-label="Close"
className="btn close"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
aria-hidden="true"
>
×
</span>
</button>
<div
className="alert-dialog"
className="pgn__alert-message-wrapper"
>
Boo indeed!
<div
className="alert-message-content"
>
Boo indeed!
</div>
<div
className="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
<div
className="alert fade alert-dismissible alert-info show"
hidden={false}
className="fade alert-content alert alert-info show"
dialog="Bah!"
role="alert"
>
<button
aria-label="Close"
className="btn close"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
aria-hidden="true"
>
×
</span>
</button>
<div
className="alert-dialog"
className="pgn__alert-message-wrapper"
>
Bah!
<div
className="alert-message-content"
>
Bah!
</div>
<div
className="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
<div
className="alert fade alert-dismissible alert-success show"
hidden={false}
className="fade alert-content alert alert-success show"
dialog="Meh!"
role="alert"
>
<button
aria-label="Close"
className="btn close"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
aria-hidden="true"
>
×
</span>
</button>
<div
className="alert-dialog"
className="pgn__alert-message-wrapper"
>
Meh!
<div
className="alert-message-content"
>
Meh!
</div>
<div
className="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
<div
className="alert fade alert-dismissible alert-danger show"
hidden={false}
className="fade alert-content alert alert-danger show"
dialog="Gah! An error!"
role="alert"
>
<button
aria-label="Close"
className="btn close"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
aria-hidden="true"
>
×
</span>
</button>
<div
className="alert-dialog"
className="pgn__alert-message-wrapper"
>
Gah! An error!
<div
className="alert-message-content"
>
Gah! An error!
</div>
<div
className="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
<div
className="alert fade alert-dismissible alert-warning show"
hidden={false}
className="fade alert-content alert alert-warning show"
dialog="Debug debug"
role="alert"
>
<button
aria-label="Close"
className="btn close"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
aria-hidden="true"
>
×
</span>
</button>
<div
className="alert-dialog"
className="pgn__alert-message-wrapper"
>
Debug debug
<div
className="alert-message-content"
>
Debug debug
</div>
<div
className="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
<div
className="alert fade alert-dismissible alert-danger show"
hidden={false}
className="fade alert-content alert alert-danger show"
dialog={
<FallbackErrorMessage
values={Object {}}
/>
}
role="alert"
>
<button
aria-label="Close"
className="btn close"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
aria-hidden="true"
>
×
</span>
</button>
<div
className="alert-dialog"
className="pgn__alert-message-wrapper"
>
<span>
There was an unexpected problem. If the problem persists, please
<a
className="pgn__hyperlink default-link standalone-link"
href="http://localhost:18000/support"
<div
className="alert-message-content"
>
<span>
There was an unexpected problem. If the problem persists, please
<a
className="pgn__hyperlink default-link standalone-link"
href="http://localhost:18000/support"
onClick={[Function]}
target="_self"
>
<span>
contact support
</span>
</a>
.
</span>
</div>
<div
className="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
target="_self"
type="button"
>
<span>
contact support
</span>
</a>
.
</span>
Dismiss
</button>
</div>
</div>
</div>,
]
Expand Down
Loading