chore: add paragon messages (openedx#530) (openedx#534)

Co-authored-by: Mashal Malik <[email protected]>

src/pages-and-resources/discussions/DiscussionsSettings.test.jsx

@@ -162,10 +162,12 @@ describe('DiscussionsSettings', () => {
 
       expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
 
-      userEvent.click(queryByText(container, appMessages.backButton.defaultMessage));
+      await act(() => userEvent.click(queryByText(container, appMessages.backButton.defaultMessage)));
 
-      expect(queryByTestId(container, 'appList')).toBeInTheDocument();
-      expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(queryByTestId(container, 'appList')).toBeInTheDocument();
+        expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
+      });
     });
 
     test('successfully closes the modal', async () => {

src/pages-and-resources/discussions/app-list/AppList.jsx

@@ -1,6 +1,10 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, {
+  useCallback, useEffect, useMemo, useState, useContext,
+} from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CardGrid, Container, breakpoints } from '@edx/paragon';
+import {
+  CardGrid, Container, breakpoints, Form, ActionRow, AlertModal, Button,
+} from '@edx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import Responsive from 'react-responsive';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -14,16 +18,23 @@ import messages from './messages';
 import FeaturesTable from './FeaturesTable';
 import AppListNextButton from './AppListNextButton';
 import Loading from '../../../generic/Loading';
+import useIsOnSmallScreen from '../data/hook';
+import { saveProviderConfig, fetchDiscussionSettings } from '../data/thunks';
+import { PagesAndResourcesContext } from '../../PagesAndResourcesProvider';
+import { discussionRestriction } from '../data/constants';
 
 const AppList = ({ intl }) => {
   const dispatch = useDispatch();
+  const { courseId } = useContext(PagesAndResourcesContext);
   const {
-    appIds, featureIds, status, activeAppId, selectedAppId,
+    appIds, featureIds, status, activeAppId, selectedAppId, enabled, postingRestrictions,
   } = useSelector(state => state.discussions);
+  const [discussionEnabled, setDiscussionEnabled] = useState(enabled);
   const apps = useModels('apps', appIds);
   const features = useModels('features', featureIds);
   const isGlobalStaff = getAuthenticatedUser().administrator;
   const ltiProvider = !['openedx', 'legacy'].includes(activeAppId);
+  const isOnSmallcreen = useIsOnSmallScreen();
 
   const showOneEdxProvider = useMemo(() => apps.filter(app => (
     activeAppId === 'openedx' ? app.id !== 'legacy' : app.id !== 'openedx'
@@ -42,9 +53,48 @@ const AppList = ({ intl }) => {
     dispatch(updateValidationStatus({ hasError: false }));
   }, [selectedAppId, activeAppId]);
 
+  useEffect(() => {
+    setDiscussionEnabled(enabled);
+  }, [enabled]);
+
+  useEffect(() => {
+    if (!postingRestrictions) {
+      dispatch(fetchDiscussionSettings(courseId, selectedAppId));
+    }
+  }, [courseId]);
+
   const handleSelectApp = useCallback((appId) => {
     dispatch(selectApp({ appId }));
-  }, [selectedAppId]);
+  }, []);
+
+  const updateSettings = useCallback((enabledDiscussion) => {
+    dispatch(saveProviderConfig(
+      courseId,
+      selectedAppId,
+      {
+        enabled: enabledDiscussion,
+        postingRestrictions:
+        enabledDiscussion ? postingRestrictions : discussionRestriction.ENABLED,
+      },
+    ));
+  }, [courseId, selectedAppId, postingRestrictions]);
+
+  const handleClose = useCallback(() => {
+    setDiscussionEnabled(enabled);
+  }, [enabled]);
+
+  const handleOk = useCallback(() => {
+    setDiscussionEnabled(false);
+    updateSettings(false);
+  }, [updateSettings]);
+
+  const handleChange = useCallback((e) => {
+    const toggleVal = e.target.checked;
+    setDiscussionEnabled(!toggleVal);
+    if (!toggleVal) {
+      updateSettings(!toggleVal);
+    }
+  }, [updateSettings]);
 
   if (!selectedAppId || status === LOADING) {
     return (
@@ -71,17 +121,29 @@ const AppList = ({ intl }) => {
   ));
 
   return (
-    <div className="my-sm-5 m-1" data-testid="appList">
-      <h3 className="my-sm-5 my-4">
-        {intl.formatMessage(messages.heading)}
-      </h3>
+    <div className="my-sm-4" data-testid="appList">
+      <div className={!isOnSmallcreen ? 'd-flex flex-row justify-content-between align-items-center' : 'mb-4'}>
+        <h3 className={isOnSmallcreen ? 'mb-3' : 'm-0'}>
+          {intl.formatMessage(messages.heading)}
+        </h3>
+        <Form.Switch
+          floatLabelLeft
+          className="text-primary-500 align-items-center"
+          labelClassName="line-height-24"
+          onChange={handleChange}
+          checked={!discussionEnabled}
+        >
+          Hide discussion tab
+        </Form.Switch>
+      </div>
       <CardGrid
         columnSizes={{
           xs: 12,
           sm: 6,
           lg: 4,
           xl: 4,
         }}
+        className={!isOnSmallcreen && 'mt-5'}
       >
         {(isGlobalStaff || ltiProvider) ? showAppCard(apps) : showAppCard(showOneEdxProvider)}
       </CardGrid>
@@ -96,6 +158,23 @@ const AppList = ({ intl }) => {
           />
         </div>
       </Responsive>
+      <AlertModal
+        title={intl.formatMessage(messages.hideDiscussionTabTitle)}
+        isOpen={enabled && !discussionEnabled}
+        onClose={handleClose}
+        isBlocking
+        className="hide-discussion-modal"
+        footerNode={(
+          <ActionRow>
+            <Button variant="link" className="text-decoration-none bg-black" onClick={handleClose}>Cancel</Button>
+            <Button variant="primary" className="bg-primary-500 ml-1 rounded-0" onClick={handleOk}>OK</Button>
+          </ActionRow>
+        )}
+      >
+        <p className="bg-black">
+          {intl.formatMessage(messages.hideDiscussionTabMessage)}
+        </p>
+      </AlertModal>
     </div>
   );
 };

src/pages-and-resources/discussions/app-list/AppList.scss

@@ -46,10 +46,39 @@
   padding: 0 7px;
 }
 
+.line-height-24 {
+  line-height: 24px !important;
+}
+
+.hide-discussion-modal {
+  .pgn__modal-header {
+    padding-top: 24px;
+
+    h2 {
+      color: $primary-500;
+      line-height: 28px;
+      font-size: 22px;
+    }
+  }
+
+  .bg-black {
+    color: #000000;
+  }
+
+  .pgn__modal-footer {
+    padding-top: 8px;
+    padding-bottom: 24px;
+  }
+
+  button {
+    font-weight: 500;
+  }
+}
+
 .discussion-restriction {
   .unselected-button {
     &:hover {
-      background: #E9E6E4 !important;
+      background: #E9E6E4;
     }
   }
 

src/pages-and-resources/discussions/app-list/AppList.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 import React from 'react';
 import {
-  render, screen, within, queryAllByRole,
+  render, screen, within, queryAllByRole, waitFor,
 } from '@testing-library/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
@@ -69,36 +69,47 @@ describe('AppList', () => {
 
     test('display a card for each available app', async () => {
       renderComponent();
-      const appCount = store.getState().discussions.appIds.length;
-      expect(screen.queryAllByRole('radio')).toHaveLength(appCount);
+
+      await waitFor(async () => {
+        const appCount = await store.getState().discussions.appIds.length;
+        expect(screen.queryAllByRole('radio')).toHaveLength(appCount);
+      });
     });
 
     test('displays the FeaturesTable at desktop sizes', async () => {
       renderComponent();
-      expect(screen.queryByRole('table')).toBeInTheDocument();
+      await waitFor(() => expect(screen.queryByRole('table')).toBeInTheDocument());
     });
 
     test('hides the FeaturesTable at mobile sizes', async () => {
       renderComponent(breakpoints.extraSmall.maxWidth);
-      expect(screen.queryByRole('table')).not.toBeInTheDocument();
+      await waitFor(() => expect(screen.queryByRole('table')).not.toBeInTheDocument());
     });
 
     test('hides the FeaturesList at desktop sizes', async () => {
       renderComponent();
-      expect(screen.queryByText(messages['supportedFeatureList-mobile-show'].defaultMessage)).not.toBeInTheDocument();
+      await waitFor(() => expect(screen.queryByText(messages['supportedFeatureList-mobile-show'].defaultMessage))
+        .not.toBeInTheDocument());
     });
 
     test('displays the FeaturesList at mobile sizes', async () => {
       renderComponent(breakpoints.extraSmall.maxWidth);
-      const appCount = store.getState().discussions.appIds.length;
-      expect(screen.queryAllByText(messages['supportedFeatureList-mobile-show'].defaultMessage)).toHaveLength(appCount);
+
+      await waitFor(async () => {
+        const appCount = await store.getState().discussions.appIds.length;
+        expect(screen.queryAllByText(messages['supportedFeatureList-mobile-show'].defaultMessage))
+          .toHaveLength(appCount);
+      });
     });
 
     test('selectApp is called when an app is clicked', async () => {
       renderComponent();
-      userEvent.click(screen.getByLabelText('Select Piazza'));
-      const clickedCard = screen.getByRole('radio', { checked: true });
-      expect(within(clickedCard).queryByLabelText('Select Piazza')).toBeInTheDocument();
+
+      await waitFor(() => {
+        userEvent.click(screen.getByLabelText('Select Piazza'));
+        const clickedCard = screen.getByRole('radio', { checked: true });
+        expect(within(clickedCard).queryByLabelText('Select Piazza')).toBeInTheDocument();
+      });
     });
   });
 
@@ -121,7 +132,7 @@ describe('AppList', () => {
     test('does not display two edx providers card for non admin role', async () => {
       renderComponent();
       const appCount = store.getState().discussions.appIds.length;
-      expect(queryAllByRole(container, 'radio')).toHaveLength(appCount - 1);
+      await waitFor(() => expect(queryAllByRole(container, 'radio')).toHaveLength(appCount - 1));
     });
   });
 });

src/pages-and-resources/discussions/app-list/messages.js

@@ -239,6 +239,26 @@ const messages = defineMessages({
     defaultMessage: 'Commonly requested',
     description: 'The type of a discussions feature.',
   },
+  hideDiscussionTabTitle: {
+    id: 'authoring.discussions.hide-tab-title',
+    defaultMessage: 'Hide the discussion tab?',
+    description: 'Title message to hide discussion tab',
+  },
+  hideDiscussionTabMessage: {
+    id: 'authoring.discussions.hide-tab-message',
+    defaultMessage: 'The discussion tab will no longer be visible to learners in the LMS. Additionally, posting to the discussion forums will be disabled. Are you sure you want to proceed?',
+    description: 'Help message to hide discussion tab',
+  },
+  hideDiscussionOkButton: {
+    id: 'authoring.discussions.hide-ok-button',
+    defaultMessage: 'Ok',
+    description: 'Ok button title',
+  },
+  hideDiscussionCancelButton: {
+    id: 'authoring.discussions.hide-cancel-button',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button title',
+  },
 });
 
 export default messages;

src/pages-and-resources/discussions/data/api.js

@@ -233,7 +233,7 @@ function denormalizeData(courseId, appId, data) {
 
   const apiData = {
     context_key: courseId,
-    enabled: true,
+    enabled: data.enabled,
     lti_configuration: ltiConfiguration,
     plugin_configuration: pluginConfiguration,
     provider_type: appId,

src/pages-and-resources/discussions/data/hook.js

@@ -0,0 +1,6 @@
+import { breakpoints, useWindowSize } from '@edx/paragon';
+
+export default function useIsOnSmallScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width < breakpoints.medium.minWidth;
+}