fix: UX feedback suggestions from TNL-8730 (#205)

Fix styling of delete message to reduce gaps between paras
Fix bold font on collapsed title of group
Add no groups found error message when trying to enable teams without groups defined

src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx

@@ -1,12 +1,3 @@
-import React, {
-  useContext, useEffect, useRef, useState,
-} from 'react';
-import PropTypes from 'prop-types';
-
-import { Formik } from 'formik';
-import { useDispatch, useSelector } from 'react-redux';
-import * as Yup from 'yup';
-
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -20,6 +11,14 @@ import {
 } from '@edx/paragon';
 import { Info } from '@edx/paragon/icons';
 
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as Yup from 'yup';
+
 import { RequestStatus } from '../../data/constants';
 import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
 import FormSwitchGroup from '../../generic/FormSwitchGroup';
@@ -215,9 +214,9 @@ function AppSettingsModal({
               {saveError && (
                 <Alert variant="danger" icon={Info} ref={alertRef}>
                   <Alert.Heading>
-                    {intl.formatMessage(messages.errorSavingTitle)}
+                    {formikProps.errors.enabled?.title ?? intl.formatMessage(messages.errorSavingTitle)}
                   </Alert.Heading>
-                  {intl.formatMessage(messages.errorSavingMessage)}
+                  {formikProps.errors.enabled?.message ?? intl.formatMessage(messages.errorSavingMessage)}
                 </Alert>
               )}
               <FormSwitchGroup
@@ -244,7 +243,7 @@ function AppSettingsModal({
                 )}
               />
               {(formikProps.values.enabled || configureBeforeEnable) && children
-              && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
+                && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
               <AppSettingsForm formikProps={formikProps} showForm={formikProps.values.enabled || configureBeforeEnable}>
                 {children}
               </AppSettingsForm>

src/pages-and-resources/teams/GroupEditor.jsx

@@ -40,8 +40,8 @@ function GroupEditor({
     <TransitionReplace>
       {isDeleting
         ? (
-          <div className="d-flex flex-column card rounded mb-3 px-3 py-2 p-4" key="isDeleting">
-            <h3>{intl.formatMessage(messages.groupDeleteHeading)}</h3>
+          <div className="d-flex flex-column card rounded mb-3 px-4 py-2 p-4" key="isDeleting">
+            <h4 className="mb-3">{intl.formatMessage(messages.groupDeleteHeading)}</h4>
             {intl.formatMessage(messages.groupDeleteBody).split('\n').map(text => <p>{text}</p>)}
             <div className="d-flex flex-row justify-content-end">
               <Button variant="muted" size="sm" onClick={cancelDeletion}>
@@ -72,7 +72,7 @@ function GroupEditor({
                 ) : (
                   <div className="d-flex flex-column flex-shrink-1 small mw-100">
                     <div className="small text-gray-500">{intl.formatMessage(TeamTypeNameMessage[group.type].label)}</div>
-                    <div className="h4 text-truncate my-1">{group.name}</div>
+                    <div className="h4 text-truncate my-1 font-weight-normal">{group.name}</div>
                     <div className="small text-truncate text-muted text-gray-500">{group.description}</div>
                   </div>
                 )

src/pages-and-resources/teams/Settings.jsx

@@ -39,7 +39,15 @@ function TeamSettings({
       description: group.description,
       max_team_size: group.maxTeamSize,
     }));
-    return saveSettings({ team_sets: groups, max_team_size: values.maxTeamSize });
+    return saveSettings({
+      team_sets: groups,
+      max_team_size: values.maxTeamSize,
+      enabled: values.enabled,
+    });
+  };
+  const enableAppError = {
+    title: intl.formatMessage(messages.noGroupsErrorTitle),
+    message: intl.formatMessage(messages.noGroupsErrorMessage),
   };
 
   return (
@@ -58,6 +66,12 @@ function TeamSettings({
         groups: teamsConfiguration?.teamSets || teamsConfiguration?.topics,
       }}
       validationSchema={{
+        enabled: Yup.boolean()
+          .test(
+            'has-groups',
+            enableAppError,
+            (value, context) => (!value || context.parent.groups.length > 0),
+          ),
         maxTeamSize: Yup.number()
           .required(intl.formatMessage(messages.maxTeamSizeEmpty))
           .min(TeamSizes.MIN, intl.formatMessage(messages.maxTeamSizeInvalid))
@@ -92,7 +106,6 @@ function TeamSettings({
           .when('enabled', {
             is: true,
             then: Yup.array().min(1),
-            otherwise: Yup.array().length(0),
           })
           .default([])
           .uniqueProperty('name', intl.formatMessage(messages.groupFormNameExists)),

src/pages-and-resources/teams/messages.js

@@ -151,10 +151,20 @@ const messages = defineMessages({
   },
   groupDeleteBody: {
     id: 'authoring.pagesAndResources.teams.deleteGroup.body',
-    defaultMessage: `edX recommends that you do not delete groups once your course is running.\n
-    Your group will no longer be visible in the LMS and learners will not be able to leave teams associated with it.\n
+    defaultMessage: `edX recommends that you do not delete groups once your course is running.
+    Your group will no longer be visible in the LMS and learners will not be able to leave teams associated with it.
     Please delete learners from teams before deleting the associated group.`,
-    description: 'Message displayed to admins when deleting a group. Make sure to include the \\n line breaks so that the final text is rendered properly.',
+    description: 'Message displayed to admins when deleting a group. Make sure to include line breaks so that the final text is rendered properly.',
+  },
+  noGroupsErrorTitle: {
+    id: 'authoring.pagesAndResources.teams.enableGroups.error.noGroupsFound.title',
+    defaultMessage: 'No groups found',
+    description: 'Title of error message displayed when a user tries to enable teams but no group is defined.',
+  },
+  noGroupsErrorMessage: {
+    id: 'authoring.pagesAndResources.teams.enableGroups.error.noGroupsFound.message',
+    defaultMessage: 'Add one or more groups to enable teams.',
+    description: 'Body of error message displayed when a user tries to enable teams but no group is defined.',
   },
 });