apply review feedback

2021-09-13 13:52:04 +05:30
parent f4979b4c37
commit 6efbaa2dfe
6 changed files with 4265 additions and 33879 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -36,46 +36,46 @@
  },
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.1.6",
-    "@edx/frontend-platform": "1.12.5",
-    "@edx/paragon": "16.13.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-brands-svg-icons": "5.15.4",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
-    "@reduxjs/toolkit": "1.6.1",
-    "classnames": "2.3.1",
-    "core-js": "3.17.3",
+    "@edx/frontend-component-footer": "10.0.11",
+    "@edx/frontend-platform": "1.11.0",
+    "@edx/paragon": "16.6.4",
+    "@fortawesome/fontawesome-svg-core": "1.2.28",
+    "@fortawesome/free-brands-svg-icons": "5.11.2",
+    "@fortawesome/free-regular-svg-icons": "5.11.2",
+    "@fortawesome/free-solid-svg-icons": "5.11.2",
+    "@fortawesome/react-fontawesome": "0.1.9",
+    "@reduxjs/toolkit": "1.5.0",
+    "classnames": "2.2.6",
+    "core-js": "3.8.1",
    "email-validator": "2.0.4",
-    "formik": "2.2.9",
+    "formik": "2.2.6",
    "lodash": "4.17.21",
-    "moment": "2.29.1",
+    "moment": "2.27.0",
    "prop-types": "15.7.2",
    "react": "16.14.0",
    "react-dom": "16.14.0",
-    "react-redux": "7.2.5",
-    "react-responsive": "8.2.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
-    "react-transition-group": "4.4.2",
-    "redux": "4.1.1",
-    "regenerator-runtime": "0.13.9",
-    "uuid": "^8.3.2",
-    "yup": "0.32.9"
+    "react-redux": "7.1.3",
+    "react-responsive": "8.1.0",
+    "react-router": "5.1.2",
+    "react-router-dom": "5.1.2",
+    "react-transition-group": "4.4.1",
+    "redux": "4.0.5",
+    "regenerator-runtime": "0.13.7",
+    "uuid": "^3.4.0",
+    "yup": "0.31.1"
  },
  "devDependencies": {
-    "@edx/frontend-build": "8.0.4",
+    "@edx/frontend-build": "7.0.0",
    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/react": "12.1.0",
    "@testing-library/user-event": "^13.2.1",
-    "axios-mock-adapter": "1.20.0",
-    "codecov": "3.8.3",
-    "es-check": "6.0.0",
-    "glob": "7.1.7",
-    "husky": "7.0.2",
-    "jest": "27.1.1",
-    "react-test-renderer": "16.14.0",
+    "axios-mock-adapter": "1.18.1",
+    "codecov": "3.7.1",
+    "es-check": "5.1.0",
+    "glob": "7.1.6",
+    "husky": "3.1.0",
+    "jest": "24.9.0",
+    "react-test-renderer": "16.9.0",
    "reactifex": "1.1.1"
  }
 }
--- a/src/pages-and-resources/teams/Settings.jsx
+++ b/src/pages-and-resources/teams/Settings.jsx
@@ -94,7 +94,7 @@ function TeamSettings({
          handleChange, handleBlur, values, errors,
        }) => (
          <>
-            <h4 className="my-3">{intl.formatMessage(messages.teamSize)}</h4>
+            <h4 className="my-3 pb-2">{intl.formatMessage(messages.teamSize)}</h4>
            <Form.Group className="pb-1">
              <Form.Control
                className="pb-2"
@@ -105,10 +105,11 @@ function TeamSettings({
                onBlur={handleBlur}
                value={values.maxTeamSize}
              />
+              <Form.Text>{intl.formatMessage(messages.maxTeamSizeHelp)}</Form.Text>
              <FormikErrorFeedback name="maxTeamSize" />
            </Form.Group>
            <div className="bg-light-200 d-flex flex-column mx-n4 px-4 py-4 border border-top">
-              <h4 className="mb-3">{intl.formatMessage(messages.teamSets)}</h4>
+              <h4 className="mb-4">{intl.formatMessage(messages.teamSets)}</h4>
              <FieldArray name="topics">
                {({ push, remove }) => (
                  <>
@@ -125,7 +126,7 @@ function TeamSettings({
                    ))}
                    <Button
                      variant="plain"
-                      className="p-0 align-self-start"
+                      className="p-0 align-self-start mt-3"
                      onClick={() => push(blankNewTopic)}
                    >
                      <Icon src={Add} /> {intl.formatMessage(messages.addTeamSet)}
--- a/src/pages-and-resources/teams/TeamSetEditor.jsx
+++ b/src/pages-and-resources/teams/TeamSetEditor.jsx
@@ -47,12 +47,14 @@ function TeamSetEditor({
  intl, teamSet, onDelete, onChange, onBlur, fieldNameCommonBase, errors,
 }) {
  const [isDeleting, setDeleting] = useState(false);
-  const [isOpen, setOpen] = useState(teamSet.id === null);
+  const [isOpen, setOpen] = useState((teamSet.id === null) || true);
  const initiateDeletion = () => setDeleting(true);
  const cancelDeletion = () => setDeleting(false);

  const handleToggle = (open) => setOpen(Boolean(errors.name || errors.maxTeamSize || errors.description) || open);

+  const formGroupClasses = 'mb-4';
+
  return (
    <TransitionReplace>
      {isDeleting
@@ -83,7 +85,7 @@ function TeamSetEditor({
            title={
              isOpen
                ? (
-                  <div className="d-flex flex-column small flex-shrink-1 h4">
+                  <div className="d-flex flex-column flex-shrink-1 h4 p-0 m-0">
                    {intl.formatMessage(messages.configureTeamSet)}
                  </div>
                ) : (
@@ -95,7 +97,7 @@ function TeamSetEditor({
                )
            }
          >
-            <Form.Group>
+            <Form.Group className={`${formGroupClasses} mt-2.5`}>
              <Form.Control
                name={`${fieldNameCommonBase}.name`}
                floatingLabel={intl.formatMessage(messages.teamSetFormNameLabel)}
@@ -106,7 +108,7 @@ function TeamSetEditor({
              <Form.Text>{intl.formatMessage(messages.teamSetFormNameHelp)}</Form.Text>
              <FormikErrorFeedback name={`${fieldNameCommonBase}.name`} />
            </Form.Group>
-            <Form.Group>
+            <Form.Group className={formGroupClasses}>
              <Form.Control
                name={`${fieldNameCommonBase}.description`}
                floatingLabel={intl.formatMessage(messages.teamSetFormDescriptionLabel)}
@@ -117,8 +119,8 @@ function TeamSetEditor({
              <Form.Text>{intl.formatMessage(messages.teamSetFormDescriptionHelp)}</Form.Text>
              <FormikErrorFeedback name={`${fieldNameCommonBase}.description`} />
            </Form.Group>
-            <Form.Group>
-              <Form.Label>
+            <Form.Group className={formGroupClasses}>
+              <Form.Label className="h4 my-3">
                {intl.formatMessage(messages.teamSetFormTypeLabel)}
              </Form.Label>
              <Form.RadioSet
@@ -132,6 +134,7 @@ function TeamSetEditor({
                    key={teamSetType}
                    value={teamSetType}
                    description={intl.formatMessage(TeamTypeNameMessage[teamSetType].description)}
+                    className="my-2"
                  >
                    {intl.formatMessage(TeamTypeNameMessage[teamSetType].label)}
                  </Form.Radio>
@@ -139,6 +142,7 @@ function TeamSetEditor({
              </Form.RadioSet>
            </Form.Group>
            <Form.Group>
+              <Form.Label className="h4 pb-4">{intl.formatMessage(messages.teamSize)}</Form.Label>
              <Form.Control
                type="number"
                name={`${fieldNameCommonBase}.maxTeamSize`}
@@ -150,7 +154,6 @@ function TeamSetEditor({
              <Form.Text>{intl.formatMessage(messages.teamSetFormMaxSizeHelp)}</Form.Text>
              <FormikErrorFeedback name={`${fieldNameCommonBase}.maxTeamSize`} />
            </Form.Group>
-
          </CollapsableEditor>
        )}
    </TransitionReplace>
--- a/src/pages-and-resources/teams/messages.js
+++ b/src/pages-and-resources/teams/messages.js
@@ -15,16 +15,20 @@ const messages = defineMessages({
  },
  enableTeamsLink: {
    id: 'authoring.pagesAndResources.teams.enableTeams.link',
-    defaultMessage: 'Learn more about the teams',
+    defaultMessage: 'Learn more about teams',
  },
  teamSize: {
    id: 'authoring.pagesAndResources.teams.teamSize.heading',
-    defaultMessage: 'Team Size',
+    defaultMessage: 'Team size',
  },
  maxTeamSize: {
    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSize',
    defaultMessage: 'Max team size',
  },
+  maxTeamSizeHelp: {
+    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeHelp',
+    defaultMessage: 'The maximum number of learners that can join a team',
+  },
  maxTeamSizeEmpty: {
    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeInvalid',
    defaultMessage: 'Enter max team size',
@@ -107,7 +111,7 @@ const messages = defineMessages({
  },
  teamSetFormMaxSizeHelp: {
    id: 'authoring.pagesAndResources.teams.teamSet.maxSize.help',
-    defaultMessage: 'The maximum number of learners that can join a team',
+    defaultMessage: 'Override the global max team size',
  },
  addTeamSet: {
    id: 'authoring.pagesAndResources.teams.addTeamSet.button',
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,7 +1,9 @@
 import { useContext, useEffect } from 'react';
+
 import { useDispatch, useSelector } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
 import * as Yup from 'yup';
+
 import { RequestStatus } from './data/constants';
 import { getCourseAppSettingValue, getLoadingStatus } from './pages-and-resources/data/selectors';
 import { fetchCourseAppSettings, updateCourseAppSetting } from './pages-and-resources/data/thunks';