Style: Toggle remains Disabled and Link to instructor dashboard show on Disabled Cohorts (#375)

* style: on disabled cohorts toggle remains disabled and link to instructor dashboard shows * fix: test cases fixed Co-authored-by: Mehak Nasir <mehaknasir94@gmail.com>
2022-11-21 14:41:40 +05:00
parent bdfa1fdeb3
commit 7527f6c764
7 changed files with 54 additions and 20 deletions
--- a/src/generic/FormSwitchGroup.jsx
+++ b/src/generic/FormSwitchGroup.jsx
@@ -13,6 +13,7 @@ export default function FormSwitchGroup({
  onChange,
  onBlur,
  checked,
+  disabled,
 }) {
  const helpTextId = `${id}HelpText`;

@@ -36,6 +37,7 @@ export default function FormSwitchGroup({
            onChange={onChange}
            onBlur={onBlur}
            checked={checked}
+            disabled={disabled}
          />
        </div>
        <Form.Text
@@ -57,9 +59,11 @@ FormSwitchGroup.propTypes = {
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func,
  checked: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
 };
 FormSwitchGroup.defaultProps = {
  className: null,
  onBlur: null,
  name: null,
+  disabled: false,
 };
--- a/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx
@@ -37,7 +37,7 @@ function OpenedXConfigForm({
    unitLevelVisibility: true,
    allowAnonymousPostsPeers: appConfigObj?.allowAnonymousPostsPeers || false,
    reportedContentEmailNotifications: appConfigObj?.reportedContentEmailNotifications || false,
-    enableReportedContentEmailNotifications: appConfigObj?.enableReportedContentEmailNotifications || false,
+    enableReportedContentEmailNotifications: Boolean(appConfigObj?.enableReportedContentEmailNotifications) || false,
    blackoutDates: appConfigObj?.blackoutDates || [],
    discussionTopics: discussionTopicsModel || [],
    divideByCohorts: appConfigObj?.divideByCohorts || false,
--- a/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.test.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.test.jsx
@@ -50,6 +50,7 @@ const defaultAppConfig = (divideDiscussionIds = []) => ({
  enableReportedContentEmailNotifications: false,
  allowDivisionByUnit: false,
  blackoutDates: [],
+  cohortsEnabled: false,
 });
 describe('OpenedXConfigForm', () => {
  let axiosMock;
@@ -141,14 +142,17 @@ describe('OpenedXConfigForm', () => {
        ...legacyApiResponse.plugin_configuration,
        reported_content_email_notifications_flag: true,
        divided_course_wide_discussions: [],
+         available_division_schemes: [],
      },
    });
    createComponent();
    const { divideDiscussionIds } = defaultAppConfig(['13f106c6-6735-4e84-b097-0456cff55960', 'course']);

    // DivisionByGroupFields
+
+    expect(container.querySelector('#alert')).toBeInTheDocument();
    expect(container.querySelector('#divideByCohorts')).toBeInTheDocument();
-    expect(container.querySelector('#divideByCohorts')).not.toBeChecked();
+    expect(container.querySelector('#divideByCohorts')).toBeDisabled();
    expect(container.querySelector('#divideCourseTopicsByCohorts')).not.toBeInTheDocument();

    divideDiscussionIds.forEach(id => expect(
@@ -179,6 +183,7 @@ describe('OpenedXConfigForm', () => {
        reported_content_email_notifications_flag: true,
        always_divide_inline_discussions: true,
        divided_course_wide_discussions: [],
+        available_division_schemes: ['cohorts'],
      },
    });
    createComponent();
@@ -186,14 +191,10 @@ describe('OpenedXConfigForm', () => {

    // DivisionByGroupFields
    expect(container.querySelector('#divideByCohorts')).toBeInTheDocument();
-    expect(container.querySelector('#divideByCohorts')).toBeChecked();
+    expect(container.querySelector('#divideByCohorts')).not.toBeChecked();
    expect(
      container.querySelector('#divideCourseTopicsByCohorts'),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector('#divideCourseTopicsByCohorts'),
-    ).not.toBeChecked();
-
+    ).not.toBeInTheDocument();
    divideDiscussionIds.forEach(id => expect(
      container.querySelector(`#checkbox-${id}`),
    ).not.toBeInTheDocument());
@@ -229,13 +230,10 @@ describe('OpenedXConfigForm', () => {

      // DivisionByGroupFields
      expect(container.querySelector('#divideByCohorts')).toBeInTheDocument();
-      expect(container.querySelector('#divideByCohorts')).toBeChecked();
-      expect(container.querySelector('#divideCourseTopicsByCohorts')).toBeInTheDocument();
-      expect(container.querySelector('#divideCourseTopicsByCohorts')).toBeChecked();
-
+      expect(container.querySelector('#divideByCohorts')).not.toBeChecked();
+      expect(container.querySelector('#divideCourseTopicsByCohorts')).not.toBeInTheDocument();
      divideDiscussionIds.forEach(id => {
-        expect(container.querySelector(`#checkbox-${id}`)).toBeInTheDocument();
-        expect(container.querySelector(`#checkbox-${id}`)).toBeChecked();
+        expect(container.querySelector(`#checkbox-${id}`)).not.toBeInTheDocument();
      });
    });

--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
@@ -1,8 +1,12 @@
 import React, { useEffect, useContext } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form, TransitionReplace } from '@edx/paragon';
+import {
+ Form, TransitionReplace, Hyperlink, Alert,
+} from '@edx/paragon';
+import { AppContext } from '@edx/frontend-platform/react';
 import { FieldArray, useFormikContext } from 'formik';
 import _ from 'lodash';
+import { useParams } from 'react-router-dom';
 import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
 import messages from '../../messages';
 import AppConfigFormDivider from './AppConfigFormDivider';
@@ -21,8 +25,13 @@ const DivisionByGroupFields = ({ intl }) => {
    discussionTopics,
    divideByCohorts,
    divideCourseTopicsByCohorts,
+    cohortsEnabled,
  } = appConfig;

+  const { courseId } = useParams();
+  const { config } = useContext(AppContext);
+  const learningCourseURL = `${config.LMS_BASE_URL}/courses/${courseId}/instructor`;
+
  useEffect(() => {
    if (divideByCohorts) {
      if (!divideCourseTopicsByCohorts && _.size(discussionTopics) !== _.size(divideDiscussionIds)) {
@@ -56,20 +65,30 @@ const DivisionByGroupFields = ({ intl }) => {

  return (
    <>
-      <h5 className="text-gray-500 mb-2 mt-4">
+      <h5 className="text-gray-500 mb-4 mt-4">
        {intl.formatMessage(messages.divisionByGroup)}
      </h5>
+      {!cohortsEnabled
+      && (
+      <Alert className="bg-light-200 font-weight-normal h5" id="alert">
+        {intl.formatMessage(messages.cohortsEnabled)}
+        <Hyperlink destination={learningCourseURL} target="_blank">
+          {intl.formatMessage(messages.instructorDashboard)}
+        </Hyperlink>
+      </Alert>
+      )}
      <FormSwitchGroup
        onChange={handleChange}
        className="mt-2"
        onBlur={handleBlur}
        id="divideByCohorts"
-        checked={divideByCohorts}
+        checked={cohortsEnabled === false ? cohortsEnabled : divideByCohorts}
        label={intl.formatMessage(messages.divideByCohortsLabel)}
        helpText={intl.formatMessage(messages.divideByCohortsHelp)}
+        disabled={!cohortsEnabled}
      />
      <TransitionReplace>
-        {divideByCohorts ? (
+        {(divideByCohorts && cohortsEnabled) ? (
          <React.Fragment key="open">
            <AppConfigFormDivider />
            <FormSwitchGroup
--- a/src/pages-and-resources/discussions/app-config-form/messages.js
+++ b/src/pages-and-resources/discussions/app-config-form/messages.js
@@ -124,7 +124,16 @@ const messages = defineMessages({
    defaultMessage: 'Questions for the TAs',
    description: 'Label for a checkbox allowing a user to divide the Questions for the TAs (TA stands for "teaching assistant") course wide topic by cohorts.',
  },
-
+    cohortsEnabled: {
+    id: 'authoring.discussions.builtIn.cohortsEnabled.label',
+    defaultMessage: 'To adjust these settings, enable cohorts on the ',
+    description: 'Label text informing the user to enable cohort',
+  },
+  instructorDashboard: {
+    id: 'authoring.discussions.builtIn.instructorDashboard.label',
+    defaultMessage: 'instructor dashboard',
+    description: 'Label text for instructor dashboard',
+  },
  // In-context discussion fields
  visibilityInContext: {
    id: 'authoring.discussions.builtIn.visibilityInContext',
--- a/src/pages-and-resources/discussions/data/api.js
+++ b/src/pages-and-resources/discussions/data/api.js
@@ -56,6 +56,7 @@ function normalizePluginConfig(data) {
  if (!data || Object.keys(data).length < 1) {
    return {};
  }
+
  const enableDivideByCohorts = data.always_divide_inline_discussions && data.division_scheme === 'cohort';
  const enableDivideCourseTopicsByCohorts = enableDivideByCohorts && data.divided_course_wide_discussions.length > 0;
  return {
@@ -69,6 +70,7 @@ function normalizePluginConfig(data) {
    allowDivisionByUnit: false,
    divideByCohorts: enableDivideByCohorts,
    divideCourseTopicsByCohorts: enableDivideCourseTopicsByCohorts,
+    cohortsEnabled: data.available_division_schemes?.includes('cohort') || false,
  };
 }

--- a/src/pages-and-resources/discussions/data/redux.test.js
+++ b/src/pages-and-resources/discussions/data/redux.test.js
@@ -252,6 +252,7 @@ describe('Data layer integration tests', () => {
        alwaysDivideInlineDiscussions: false,
        allowDivisionByUnit: false,
        divideCourseTopicsByCohorts: false,
+        cohortsEnabled: false,
      });
    });
  });
@@ -455,6 +456,7 @@ describe('Data layer integration tests', () => {
          allowDivisionsByUnit: true,
          alwaysDivideInlineDiscussions: true,
          divideCourseTopicsByCohorts: true,
+          divisionScheme: DivisionSchemes.COHORT,
          divideDiscussionIds,
          discussionTopics: [
            { name: 'Edx', id: '13f106c6-6735-4e84-b097-0456cff55960' },
@@ -463,7 +465,6 @@ describe('Data layer integration tests', () => {
        },
        pagesAndResourcesPath,
      ), store.dispatch);
-
      expect(window.location.pathname).toEqual(pagesAndResourcesPath);
      expect(store.getState().discussions).toEqual(
        expect.objectContaining({
@@ -490,6 +491,7 @@ describe('Data layer integration tests', () => {
        // happens, but NOT what we want to have happen!
        divideByCohorts: true,
        divisionScheme: DivisionSchemes.COHORT,
+        cohortsEnabled: false,
        allowDivisionByUnit: false,
        divideCourseTopicsByCohorts: true,
      });