diff --git a/src/discussions/common/AlertBanner.jsx b/src/discussions/common/AlertBanner.jsx index a289add3..8630d562 100644 --- a/src/discussions/common/AlertBanner.jsx +++ b/src/discussions/common/AlertBanner.jsx @@ -8,13 +8,14 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { Alert } from '@edx/paragon'; import { Report } from '@edx/paragon/icons'; +import { AvatarOutlineAndLabelColors } from '../../data/constants'; import { selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff, } from '../data/selectors'; import { commentShape } from '../post-comments/comments/comment/proptypes'; import messages from '../post-comments/messages'; import { postShape } from '../posts/post/proptypes'; -import AuthorLabel from './AuthorLabel'; +import AlertBar from './AlertBar'; function AlertBanner({ intl, @@ -29,6 +30,8 @@ function AlertBanner({ const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa || userIsGlobalStaff || userIsContentAuthor ); + const editByLabelColor = AvatarOutlineAndLabelColors[content.editByLabel]; + const closedByLabelColor = AvatarOutlineAndLabelColors[content.closedByLabel]; return ( <> @@ -40,40 +43,22 @@ function AlertBanner({ {reasonCodesEnabled && canSeeLastEditOrClosedAlert && ( <> {content.lastEdit?.reason && ( - - - {intl.formatMessage(messages.editedBy)} - - - - - {intl.formatMessage(messages.fullStop)} - - {intl.formatMessage(messages.reason)}: {content.lastEdit.reason} - - + )} {content.closed && ( - - - {intl.formatMessage(messages.closedBy)} - - - - - {intl.formatMessage(messages.fullStop)} - - - {content.closeReason && (`${intl.formatMessage(messages.reason)}: ${content.closeReason}`)} - - - + )} > )} diff --git a/src/discussions/common/AlertBar.jsx b/src/discussions/common/AlertBar.jsx new file mode 100644 index 00000000..b989e352 --- /dev/null +++ b/src/discussions/common/AlertBar.jsx @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { Alert } from '@edx/paragon'; + +import messages from '../post-comments/messages'; +import AuthorLabel from './AuthorLabel'; + +function AlertBar({ + intl, + message, + author, + authorLabel, + labelColor, + reason, +}) { + return ( + + + {intl.formatMessage(message)} + + + + + {intl.formatMessage(messages.fullStop)} + + {reason && (`${intl.formatMessage(messages.reason)}: ${reason}`)} + + + ); +} + +AlertBar.propTypes = { + intl: intlShape.isRequired, + message: PropTypes.string, + author: PropTypes.string, + authorLabel: PropTypes.string, + labelColor: PropTypes.string, + reason: PropTypes.string, +}; + +AlertBar.defaultProps = { + message: '', + author: '', + authorLabel: '', + labelColor: '', + reason: '', +}; + +export default injectIntl(AlertBar);