[POC] feat: add support for divided discussions with user groups

src/course-outline/unit-card/UnitCard.jsx

@@ -68,7 +68,8 @@ const UnitCard = ({
   } = unit;
 
   const blockSyncData = useMemo(() => {
-    if (!upstreamInfo.readyToSync) {
+    // Unknow error when upstreamInfo is undefined
+    if (!upstreamInfo?.readyToSync) {
       return undefined;
     }
     return {
@@ -78,7 +79,7 @@ const UnitCard = ({
       upstreamBlockVersionSynced: upstreamInfo.versionSynced,
       isVertical: true,
     };
-  }, [upstreamInfo]);
+  }, [upstreamInfo, displayName, id]);
 
   const readOnly = isUnitReadOnly(unit);
 
@@ -218,7 +219,7 @@ const UnitCard = ({
             discussionsSettings={discussionsSettings}
             parentInfo={parentInfo}
             extraActionsComponent={extraActionsComponent}
-            readyToSync={upstreamInfo.readyToSync}
+            readyToSync={upstreamInfo?.readyToSync}
           />
           <div className="unit-card__content item-children" data-testid="unit-card__content">
             <XBlockStatus
@@ -267,7 +268,7 @@ UnitCard.propTypes = {
       readyToSync: PropTypes.bool.isRequired,
       upstreamRef: PropTypes.string.isRequired,
       versionSynced: PropTypes.number.isRequired,
-    }).isRequired,
+    }),
   }).isRequired,
   subsection: PropTypes.shape({
     id: PropTypes.string.isRequired,

src/data/constants.ts

@@ -48,6 +48,7 @@ export const GroupTypes = /** @type {const} */ ({
 export const DivisionSchemes = /** @type {const} */ ({
   NONE: 'none',
   COHORT: 'cohort',
+  USER_GROUP: 'user_group',
 });
 
 export const VisibilityTypes = /** @type {const} */ ({

src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx

@@ -15,6 +15,7 @@ import AppConfigFormDivider from '../shared/AppConfigFormDivider';
 import DiscussionRestriction from '../shared/DiscussionRestriction';
 import DiscussionTopics from '../shared/discussion-topics/DiscussionTopics';
 import DivisionByGroupFields from '../shared/DivisionByGroupFields';
+import DivisionByUserGroupFields from '../shared/DivisionByUserGroupFields';
 import ReportedContentEmailNotifications from '../shared/ReportedContentEmailNotifications';
 import InContextDiscussionFields from '../shared/InContextDiscussionFields';
 import OpenedXConfigFormProvider from './OpenedXConfigFormProvider';
@@ -42,7 +43,10 @@ const OpenedXConfigForm = ({
     discussionTopics: discussionTopicsModel || [],
     divideByCohorts: appConfigObj?.divideByCohorts || false,
     divideCourseTopicsByCohorts: appConfigObj?.divideCourseTopicsByCohorts || false,
+    divideByUserGroups: appConfigObj?.divideByUserGroups || false,
     groupAtSubsection: appConfigObj?.groupAtSubsection || false,
+    cohortsEnabled: appConfigObj?.cohortsEnabled || false,
+    userGroupsEnabled: appConfigObj?.userGroupsEnabled || false,
   };
 
   const [validDiscussionTopics, setValidDiscussionTopics] = useState(discussionTopicsModel);
@@ -139,6 +143,8 @@ const OpenedXConfigForm = ({
                 <AppConfigFormDivider thick />
                 <DivisionByGroupFields />
                 <AppConfigFormDivider thick />
+                <DivisionByUserGroupFields />
+                <AppConfigFormDivider thick />
                 <ReportedContentEmailNotifications />
                 <DiscussionRestriction />
               </Form>

src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByUserGroupFields.jsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useFormikContext } from 'formik';
+import { DivisionSchemes } from '../../../../../data/constants';
+import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
+import messages from '../../messages';
+
+const DivisionByUserGroupFields = ({ intl }) => {
+  const {
+    handleChange,
+    handleBlur,
+    values: appConfig,
+    setFieldValue,
+  } = useFormikContext();
+
+  const { divideByUserGroups, userGroupsEnabled } = appConfig;
+
+  useEffect(() => {
+    if (divideByUserGroups) {
+      setFieldValue('division_scheme', DivisionSchemes.USER_GROUP);
+    } else {
+      setFieldValue('division_scheme', DivisionSchemes.NONE);
+    }
+  }, [divideByUserGroups, setFieldValue]);
+
+  return (
+    <>
+      <h5 className="text-gray-500 mb-4 mt-4">
+        {intl.formatMessage(messages.divisionByUserGroup)}
+      </h5>
+      {!userGroupsEnabled && (
+        <div className="alert alert-info bg-light-200 font-weight-normal h5" id="alert-usergroups">
+          {intl.formatMessage(messages.userGroupsEnabled)}
+        </div>
+      )}
+      <FormSwitchGroup
+        onChange={handleChange}
+        className="mt-2"
+        onBlur={handleBlur}
+        id="divideByUserGroups"
+        checked={divideByUserGroups}
+        label={intl.formatMessage(messages.divideByUserGroupsLabel)}
+        helpText={intl.formatMessage(messages.divideByUserGroupsHelp)}
+        disabled={!userGroupsEnabled}
+      />
+    </>
+  );
+};
+
+DivisionByUserGroupFields.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DivisionByUserGroupFields);

src/pages-and-resources/discussions/app-config-form/messages.js

@@ -154,11 +154,30 @@ const messages = defineMessages({
     defaultMessage: 'To adjust these settings, enable cohorts on the ',
     description: 'Label text informing the user to enable cohort',
   },
+  userGroupsEnabled: {
+    id: 'authoring.discussions.builtIn.userGroupsEnabled.label',
+    defaultMessage: 'To adjust this setting, enable user groups in the course settings.',
+    description: 'Label text informing the user to enable user groups',
+  },
   instructorDashboard: {
     id: 'authoring.discussions.builtIn.instructorDashboard.label',
     defaultMessage: 'instructor dashboard',
     description: 'Label text for instructor dashboard',
   },
+  divisionByUserGroup: {
+    id: 'authoring.discussions.builtIn.divisionByUserGroup',
+    defaultMessage: 'User Groups',
+  },
+  divideByUserGroupsLabel: {
+    id: 'authoring.discussions.builtIn.divideByUserGroups.label',
+    defaultMessage: 'Divide discussions by user groups',
+    description: 'Label for a switch that enables dividing discussions by user groups.',
+  },
+  divideByUserGroupsHelp: {
+    id: 'authoring.discussions.builtIn.divideByUserGroups.help',
+    defaultMessage: 'Learners will only be able to view and respond to discussions posted by members of their user group.',
+    description: 'Help text for a switch that enables dividing discussions by user groups.',
+  },
   // In-context discussion fields
   visibilityInContext: {
     id: 'authoring.discussions.builtIn.visibilityInContext',

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

@@ -58,6 +58,7 @@ function normalizePluginConfig(data) {
   }
 
   const enableDivideByCohorts = data.always_divide_inline_discussions && data.division_scheme === 'cohort';
+  const enableDivideByUserGroups = data.always_divide_inline_discussions && data.division_scheme === 'user_group';
   const enableDivideCourseTopicsByCohorts = enableDivideByCohorts && data.divided_course_wide_discussions.length > 0;
   return {
     allowAnonymousPosts: data.allow_anonymous,
@@ -68,8 +69,10 @@ function normalizePluginConfig(data) {
     restrictedDates: normalizeRestrictedDates(data.discussion_blackouts),
     allowDivisionByUnit: false,
     divideByCohorts: enableDivideByCohorts,
+    divideByUserGroups: enableDivideByUserGroups,
     divideCourseTopicsByCohorts: enableDivideCourseTopicsByCohorts,
     cohortsEnabled: data.available_division_schemes?.includes('cohort') || false,
+    userGroupsEnabled: data.available_division_schemes?.includes('user_group') || false,
     groupAtSubsection: data.group_at_subsection,
   };
 }
@@ -184,6 +187,24 @@ function denormalizeData(courseId, appId, data) {
     pluginConfiguration.division_scheme = data.divideByCohorts ? DivisionSchemes.COHORT : DivisionSchemes.NONE;
     pluginConfiguration.always_divide_inline_discussions = data.divideByCohorts;
   }
+  if ('divideByUserGroups' in data) {
+    pluginConfiguration.division_scheme = data.divideByUserGroups ? DivisionSchemes.USER_GROUP : DivisionSchemes.NONE;
+    pluginConfiguration.always_divide_inline_discussions = data.divideByUserGroups;
+  }
+  // Handle division scheme priority - user groups take precedence over cohorts
+  // This is only used for the POC
+  if ('divideByUserGroups' in data && 'divideByCohorts' in data) {
+    if (data.divideByUserGroups) {
+      pluginConfiguration.division_scheme = DivisionSchemes.USER_GROUP;
+      pluginConfiguration.always_divide_inline_discussions = true;
+    } else if (data.divideByCohorts) {
+      pluginConfiguration.division_scheme = DivisionSchemes.COHORT;
+      pluginConfiguration.always_divide_inline_discussions = true;
+    } else {
+      pluginConfiguration.division_scheme = DivisionSchemes.NONE;
+      pluginConfiguration.always_divide_inline_discussions = false;
+    }
+  }
   if ('groupAtSubsection' in data) {
     pluginConfiguration.group_at_subsection = data.groupAtSubsection;
   }