From 0a8d4d17d4e5d0e2bbe7109098e1bee82ce5afa5 Mon Sep 17 00:00:00 2001 From: Mehak Nasir Date: Fri, 14 Oct 2022 20:45:56 +0500 Subject: [PATCH] feat: blackout dates information banner added --- .../BlackoutInformationBanner.jsx | 36 +++++++++ .../BlackoutInformationBanner.test.jsx | 76 +++++++++++++++++++ .../discussions-home/DiscussionsHome.jsx | 2 + .../discussions-home/InformationsBanner.jsx | 2 +- src/discussions/messages.js | 7 +- 5 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 src/discussions/discussions-home/BlackoutInformationBanner.jsx create mode 100644 src/discussions/discussions-home/BlackoutInformationBanner.test.jsx diff --git a/src/discussions/discussions-home/BlackoutInformationBanner.jsx b/src/discussions/discussions-home/BlackoutInformationBanner.jsx new file mode 100644 index 00000000..14f0d9e3 --- /dev/null +++ b/src/discussions/discussions-home/BlackoutInformationBanner.jsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; + +import { useSelector } from 'react-redux'; + +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { PageBanner } from '@edx/paragon'; + +import { selectBlackoutDate } from '../data/selectors'; +import messages from '../messages'; +import { inBlackoutDateRange } from '../utils'; + +function BlackoutInformationBanner({ + intl, +}) { + const isDiscussionsBlackout = inBlackoutDateRange(useSelector(selectBlackoutDate)); + const [showBanner, setShowBanner] = useState(true); + + return ( + setShowBanner(false)} + > +
+ {intl.formatMessage(messages.blackoutDiscussionInformation)} +
+ + ); +} + +BlackoutInformationBanner.propTypes = { + intl: intlShape.isRequired, +}; + +export default injectIntl(BlackoutInformationBanner); diff --git a/src/discussions/discussions-home/BlackoutInformationBanner.test.jsx b/src/discussions/discussions-home/BlackoutInformationBanner.test.jsx new file mode 100644 index 00000000..58a220be --- /dev/null +++ b/src/discussions/discussions-home/BlackoutInformationBanner.test.jsx @@ -0,0 +1,76 @@ +import { render, screen } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; + +import { initializeMockApp } from '@edx/frontend-platform'; +import { AppProvider } from '@edx/frontend-platform/react'; + +import { initializeStore } from '../../store'; +import { DiscussionContext } from '../common/context'; +import { fetchConfigSuccess } from '../data/slices'; +import messages from '../messages'; +import BlackoutInformationBanner from './BlackoutInformationBanner'; + +let store; +let container; +const courseId = 'course-v1:edX+DemoX+Demo_Course'; +let activeStartDate = new Date(); +activeStartDate.setDate(activeStartDate.getDate() - 2); +let activeEndDate = new Date(); +activeEndDate.setDate(activeEndDate.getDate() + 2); +activeStartDate = activeStartDate.toISOString(); +activeEndDate = activeEndDate.toISOString(); + +const getConfigData = (blackouts = []) => ({ + id: 'course-v1:edX+DemoX+Demo_Course', + userRoles: ['Admin', 'Student'], + hasModerationPrivileges: false, + isGroupTa: false, + isUserAdmin: false, + blackouts, +}); + +function renderComponent() { + const wrapper = render( + + + + + + + , + ); + container = wrapper.container; + return container; +} + +describe('Blackout Information Banner', () => { + beforeEach(async () => { + initializeMockApp({ + authenticatedUser: { + userId: 3, + username: 'abc123', + administrator: false, + roles: ['Student'], + }, + }); + }); + + test.each([ + { blackouts: [], visibility: false }, + { blackouts: ['2021-12-31T10:15', '2021-12-31T10:20'], visibility: false }, + { blackouts: [{ start: activeStartDate, end: activeEndDate }], visibility: true }, + { blackouts: [{ start: activeEndDate, end: activeEndDate }], visibility: false }, + ])('Test Blackout Banner is visible on app load if blackout date is active', async ({ blackouts, visibility }) => { + store = initializeStore(); + await store.dispatch(fetchConfigSuccess(getConfigData(blackouts))); + renderComponent(); + if (visibility) { + const element = await screen.findByRole('alert'); + expect(element).toBeInTheDocument(); + expect(element).toHaveTextContent(messages.blackoutDiscussionInformation.defaultMessage); + } else { + const element = await screen.queryByRole('alert'); + expect(element).not.toBeInTheDocument(); + } + }); +}); diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx index 6f9433a2..0c4db28e 100644 --- a/src/discussions/discussions-home/DiscussionsHome.jsx +++ b/src/discussions/discussions-home/DiscussionsHome.jsx @@ -21,6 +21,7 @@ import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts'; import messages from '../messages'; import { BreadcrumbMenu, LegacyBreadcrumbMenu, NavigationBar } from '../navigation'; import { postMessageToParent } from '../utils'; +import BlackoutInformationBanner from './BlackoutInformationBanner'; import DiscussionContent from './DiscussionContent'; import DiscussionSidebar from './DiscussionSidebar'; import InformationBanner from './InformationsBanner'; @@ -96,6 +97,7 @@ export default function DiscussionsHome() { {isFeedbackBannerVisible && } + setShowBanner(false)} > -
+
{intl.formatMessage(messages.bannerMessage)} {!hideLearnMoreButton && ( diff --git a/src/discussions/messages.js b/src/discussions/messages.js index 9fea5ca5..5a8cd70d 100644 --- a/src/discussions/messages.js +++ b/src/discussions/messages.js @@ -176,7 +176,7 @@ const messages = defineMessages({ bannerMessage: { id: 'discussion.banner.welcomeMessage', defaultMessage: '🎉 Welcome to the new and improved discussions experience!', - description: 'Author name displayed when a post is anonymous', + description: 'Information banner welcome text', }, learnMoreBannerLink: { id: 'discussion.banner.learnMore', @@ -188,6 +188,11 @@ const messages = defineMessages({ defaultMessage: 'Share feedback', description: 'Share feedback button to open feedback forms', }, + blackoutDiscussionInformation: { + id: 'discussion.blackoutBanner.information', + defaultMessage: 'Blackout dates are currently active. Posting in discussions is unavailable at this time.', + description: 'Informative text when discussions blackout is active', + }, }); export default messages;