Merge branch 'master' into samir/frontend-app-discussions

package.json

@@ -33,7 +33,7 @@
     "url": "https://github.com/openedx/frontend-app-discussions/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-footer": "12.1.0",
     "@edx/frontend-component-header": "4.3.0",
     "@edx/frontend-platform": "4.6.3",

src/discussions/common/ActionsDropdown.jsx

@@ -68,7 +68,7 @@ const ActionsDropdown = ({
         disabled={disabled}
         size={iconSize}
         ref={buttonRef}
-        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
+        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimensions' : ''}
       />
       <div className="actions-dropdown">
         <ModalPopup

src/discussions/common/Confirmation.jsx

@@ -11,8 +11,8 @@ const Confirmation = ({
   title,
   description,
   onClose,
-  comfirmAction,
-  closeButtonVaraint,
+  confirmAction,
+  closeButtonVariant,
   confirmButtonVariant,
   confirmButtonText,
 }) => {
@@ -30,10 +30,10 @@ const Confirmation = ({
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <ActionRow>
-          <ModalDialog.CloseButton variant={closeButtonVaraint}>
+          <ModalDialog.CloseButton variant={closeButtonVariant}>
             {intl.formatMessage(messages.confirmationCancel)}
           </ModalDialog.CloseButton>
-          <Button variant={confirmButtonVariant} onClick={comfirmAction}>
+          <Button variant={confirmButtonVariant} onClick={confirmAction}>
             { confirmButtonText || intl.formatMessage(messages.confirmationConfirm)}
           </Button>
         </ActionRow>
@@ -45,16 +45,16 @@ const Confirmation = ({
 Confirmation.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  comfirmAction: PropTypes.func.isRequired,
+  confirmAction: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  closeButtonVaraint: PropTypes.string,
+  closeButtonVariant: PropTypes.string,
   confirmButtonVariant: PropTypes.string,
   confirmButtonText: PropTypes.string,
 };
 
 Confirmation.defaultProps = {
-  closeButtonVaraint: 'default',
+  closeButtonVariant: 'default',
   confirmButtonVariant: 'primary',
   confirmButtonText: '',
 };

src/discussions/common/HoverCard.jsx

@@ -31,15 +31,15 @@ const HoverCard = ({
   const intl = useIntl();
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const { isClosed } = useContext(PostCommentsContext);
-  const isUserPrivilagedInPostingRestriction = useUserPostingEnabled();
+  const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
 
   return (
     <div
       className="flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
       data-testid={`hover-card-${id}`}
       id={`hover-card-${id}`}
     >
-      {isUserPrivilagedInPostingRestriction && (
+      {isUserPrivilegedInPostingRestriction && (
         <div className="d-flex">
           <Button
             variant="tertiary"
@@ -85,7 +85,7 @@ const HoverCard = ({
           iconAs={Icon}
           size="sm"
           alt="Like"
-          iconClassNames="like-icon-dimentions"
+          iconClassNames="like-icon-dimensions"
           onClick={(e) => {
             e.preventDefault();
             onLike();
@@ -99,7 +99,7 @@ const HoverCard = ({
             iconAs={Icon}
             size="sm"
             alt="Follow"
-            iconClassNames="follow-icon-dimentions"
+            iconClassNames="follow-icon-dimensions"
             onClick={(e) => {
               e.preventDefault();
               onFollow();

src/discussions/data/hooks.test.jsx

@@ -104,10 +104,10 @@ describe('Hooks', () => {
 
   describe('useUserPostingEnabled', () => {
     const ComponentWithHook = () => {
-      const isUserPrivilagedInPostingRestriction = useUserPostingEnabled();
+      const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
       return (
         <div>
-          {String(isUserPrivilagedInPostingRestriction)}
+          {String(isUserPrivilegedInPostingRestriction)}
         </div>
       );
     };

src/discussions/data/selectors.js

@@ -12,7 +12,7 @@ export const selectUserIsStaff = state => state.config.isUserAdmin;
 
 export const selectUserIsGroupTa = state => state.config.isGroupTa;
 
-export const selectconfigLoadingStatus = state => state.config.status;
+export const selectConfigLoadingStatus = state => state.config.status;
 
 export const selectLearnersTabEnabled = state => state.config.learnersTabEnabled;
 

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -17,7 +17,7 @@ import { DiscussionContext } from '../common/context';
 import {
   useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
 } from '../data/hooks';
-import { selectconfigLoadingStatus, selectEnableInContext } from '../data/selectors';
+import { selectConfigLoadingStatus, selectEnableInContext } from '../data/selectors';
 
 const TopicPostsView = lazy(() => import('../in-context-topics/TopicPostsView'));
 const InContextTopicsView = lazy(() => import('../in-context-topics/TopicsView'));
@@ -32,7 +32,7 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
   const isOnXLDesktop = useIsOnXLDesktop();
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const enableInContext = useSelector(selectEnableInContext);
-  const configStatus = useSelector(selectconfigLoadingStatus);
+  const configStatus = useSelector(selectConfigLoadingStatus);
   const redirectToLearnersTab = useShowLearnersTab();
   const sidebarRef = useRef(null);
   const postActionBarHeight = useContainerSize(postActionBarRef);

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -55,7 +55,7 @@ const DiscussionsHome = () => {
   useFeedbackWrapper();
   /*  Display the content area if we are currently viewing/editing a post or creating one.
   If the window is larger than a particular size, show the sidebar for navigating between posts/topics.
-  However, for smaller screens or embeds, onlyshow the sidebar if the content area isn't displayed. */
+  However, for smaller screens or embeds, only show the sidebar if the content area isn't displayed. */
   const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId));
   if (displayContentArea) { displaySidebar = isOnDesktop; }
 

src/discussions/discussions-home/DiscussionsRestrictionBanner.jsx

@@ -6,13 +6,13 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { PageBanner } from '@edx/paragon';
 
 import { RequestStatus } from '../../data/constants';
-import { selectconfigLoadingStatus, selectIsPostingEnabled } from '../data/selectors';
+import { selectConfigLoadingStatus, selectIsPostingEnabled } from '../data/selectors';
 import messages from '../messages';
 
 const DiscussionsRestrictionBanner = () => {
   const intl = useIntl();
   const isPostingEnabled = useSelector(selectIsPostingEnabled);
-  const configLoadingStatus = useSelector(selectconfigLoadingStatus);
+  const configLoadingStatus = useSelector(selectConfigLoadingStatus);
   const [showBanner, setShowBanner] = useState(true);
 
   const handleDismiss = useCallback(() => {

src/discussions/discussions-home/FeedbackWrapper.jsx

@@ -7,7 +7,7 @@ import { logError } from '@edx/frontend-platform/logging';
 
 import { RequestStatus } from '../../data/constants';
 import {
-  selectconfigLoadingStatus,
+  selectConfigLoadingStatus,
   selectIsCourseAdmin,
   selectIsCourseStaff,
   selectUserIsGroupTa,
@@ -19,7 +19,7 @@ export default function useFeedbackWrapper() {
   const isUserGroupTA = useSelector(selectUserIsGroupTa);
   const isCourseAdmin = useSelector(selectIsCourseAdmin);
   const isCourseStaff = useSelector(selectIsCourseStaff);
-  const configStatus = useSelector(selectconfigLoadingStatus);
+  const configStatus = useSelector(selectConfigLoadingStatus);
 
   useEffect(() => {
     if (configStatus === RequestStatus.SUCCESSFUL) {

src/discussions/empty-posts/EmptyPosts.test.jsx

@@ -57,7 +57,7 @@ describe('EmptyPage', () => {
     store = initializeStore();
   });
 
-  test('"posts youve interacted with" message shown when no posts in system', async () => {
+  test('"posts you\'ve interacted with" message shown when no posts in system', async () => {
     renderComponent(`/${courseId}/my-posts/`);
     expect(
       screen.queryByText(messages.emptyMyPosts.defaultMessage),

src/discussions/learners/LearnersView.jsx

@@ -10,7 +10,7 @@ import { Button, Spinner } from '@edx/paragon';
 
 import SearchInfo from '../../components/SearchInfo';
 import { RequestStatus, Routes } from '../../data/constants';
-import { selectconfigLoadingStatus, selectLearnersTabEnabled } from '../data/selectors';
+import { selectConfigLoadingStatus, selectLearnersTabEnabled } from '../data/selectors';
 import NoResults from '../posts/NoResults';
 import {
   learnersLoadingStatus,
@@ -33,7 +33,7 @@ const LearnersView = () => {
   const nextPage = useSelector(selectLearnerNextPage());
   const loadingStatus = useSelector(learnersLoadingStatus());
   const usernameSearch = useSelector(selectUsernameSearch());
-  const courseConfigLoadingStatus = useSelector(selectconfigLoadingStatus);
+  const courseConfigLoadingStatus = useSelector(selectConfigLoadingStatus);
   const learnersTabEnabled = useSelector(selectLearnersTabEnabled);
   const learners = useSelector(selectAllLearners);
 

src/discussions/post-comments/comments/CommentsView.jsx

@@ -16,7 +16,7 @@ const CommentsView = ({ endorsed }) => {
   const intl = useIntl();
   const [addingResponse, setAddingResponse] = useState(false);
   const { isClosed } = useContext(PostCommentsContext);
-  const isUserPrivilagedInPostingRestriction = useUserPostingEnabled();
+  const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
 
   const {
     endorsedCommentsIds,
@@ -66,7 +66,7 @@ const CommentsView = ({ endorsed }) => {
       )}
       {isLoading && !showLoadMoreResponses && (
         <div className="mb-2 mt-3 d-flex justify-content-center">
-          <Spinner animation="border" variant="primary" className="spinner-dimentions" />
+          <Spinner animation="border" variant="primary" className="spinner-dimensions" />
         </div>
       )}
     </div>
@@ -90,7 +90,7 @@ const CommentsView = ({ endorsed }) => {
               {handleDefinition(messages.responseCount, unEndorsedCommentsIds.length)}
               {unEndorsedCommentsIds.length === 0 && <br />}
               {handleComments(unEndorsedCommentsIds, false)}
-              {(isUserPrivilagedInPostingRestriction && !!unEndorsedCommentsIds.length && !isClosed) && (
+              {(isUserPrivilegedInPostingRestriction && !!unEndorsedCommentsIds.length && !isClosed) && (
                 <div className="mx-4">
                   {!addingResponse && (
                     <Button

src/discussions/post-comments/comments/comment/Comment.jsx

@@ -61,7 +61,7 @@ const Comment = ({
   const currentPage = useSelector(selectCommentCurrentPage(id));
   const sortedOrder = useSelector(selectCommentSortOrder);
   const actions = useActions(ContentTypes.COMMENT, id);
-  const isUserPrivilagedInPostingRestriction = useUserPostingEnabled();
+  const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
 
   useEffect(() => {
     // If the comment has a parent comment, it won't have any children, so don't fetch them.
@@ -119,10 +119,10 @@ const Comment = ({
   ), [id, currentPage, sortedOrder]);
 
   const handleAddCommentButton = useCallback(() => {
-    if (isUserPrivilagedInPostingRestriction) {
+    if (isUserPrivilegedInPostingRestriction) {
       setReplying(true);
     }
-  }, [isUserPrivilagedInPostingRestriction]);
+  }, [isUserPrivilegedInPostingRestriction]);
 
   const handleCommentLike = useCallback(async () => {
     await dispatch(editComment(id, { voted: !voted }));
@@ -154,8 +154,8 @@ const Comment = ({
           title={intl.formatMessage(messages.deleteResponseTitle)}
           description={intl.formatMessage(messages.deleteResponseDescription)}
           onClose={hideDeleteConfirmation}
-          comfirmAction={handleDeleteConfirmation}
-          closeButtonVaraint="tertiary"
+          confirmAction={handleDeleteConfirmation}
+          closeButtonVariant="tertiary"
           confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)}
         />
         {!abuseFlagged && (
@@ -164,7 +164,7 @@ const Comment = ({
             title={intl.formatMessage(messages.reportResponseTitle)}
             description={intl.formatMessage(messages.reportResponseDescription)}
             onClose={hideReportConfirmation}
-            comfirmAction={handleReportConfirmation}
+            confirmAction={handleReportConfirmation}
             confirmButtonVariant="danger"
           />
         )}
@@ -265,7 +265,7 @@ const Comment = ({
                 />
               </div>
             ) : (
-              !isClosed && isUserPrivilagedInPostingRestriction && (inlineReplies.length >= 5) && (
+              !isClosed && isUserPrivilegedInPostingRestriction && (inlineReplies.length >= 5) && (
                 <Button
                   className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500"
                   variant="plain"

src/discussions/post-comments/comments/comment/Reply.jsx

@@ -83,8 +83,8 @@ const Reply = ({ responseId }) => {
         title={intl.formatMessage(messages.deleteCommentTitle)}
         description={intl.formatMessage(messages.deleteCommentDescription)}
         onClose={hideDeleteConfirmation}
-        comfirmAction={handleDeleteConfirmation}
-        closeButtonVaraint="tertiary"
+        confirmAction={handleDeleteConfirmation}
+        closeButtonVariant="tertiary"
         confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)}
       />
       {!abuseFlagged && (
@@ -93,7 +93,7 @@ const Reply = ({ responseId }) => {
           title={intl.formatMessage(messages.reportCommentTitle)}
           description={intl.formatMessage(messages.reportCommentDescription)}
           onClose={hideReportConfirmation}
-          comfirmAction={handleReportConfirmation}
+          confirmAction={handleReportConfirmation}
           confirmButtonVariant="danger"
         />
       )}

src/discussions/posts/PostsList.jsx

@@ -11,7 +11,7 @@ import { Button, Spinner } from '@edx/paragon';
 
 import { RequestStatus } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
-import { selectconfigLoadingStatus, selectUserHasModerationPrivileges, selectUserIsStaff } from '../data/selectors';
+import { selectConfigLoadingStatus, selectUserHasModerationPrivileges, selectUserIsStaff } from '../data/selectors';
 import { fetchUserPosts } from '../learners/data/thunks';
 import messages from '../messages';
 import { usePostList } from './data/hooks';
@@ -35,7 +35,7 @@ const PostsList = ({
   const nextPage = useSelector(selectThreadNextPage());
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsStaff = useSelector(selectUserIsStaff);
-  const configStatus = useSelector(selectconfigLoadingStatus);
+  const configStatus = useSelector(selectConfigLoadingStatus);
   const sortedPostsIds = usePostList(postsIds);
   const showOwnPosts = page === 'my-posts';
 

src/discussions/posts/post-actions-bar/PostActionsBar.jsx

@@ -13,7 +13,7 @@ import Search from '../../../components/Search';
 import { RequestStatus } from '../../../data/constants';
 import { DiscussionContext } from '../../common/context';
 import { useUserPostingEnabled } from '../../data/hooks';
-import { selectconfigLoadingStatus, selectEnableInContext } from '../../data/selectors';
+import { selectConfigLoadingStatus, selectEnableInContext } from '../../data/selectors';
 import { TopicSearchBar as IncontextSearch } from '../../in-context-topics/topic-search';
 import { postMessageToParent } from '../../utils';
 import { showPostEditor } from '../data';
@@ -24,9 +24,9 @@ import './actionBar.scss';
 const PostActionsBar = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
-  const loadingStatus = useSelector(selectconfigLoadingStatus);
+  const loadingStatus = useSelector(selectConfigLoadingStatus);
   const enableInContext = useSelector(selectEnableInContext);
-  const isUserPrivilagedInPostingRestriction = useUserPostingEnabled();
+  const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
   const { enableInContextSidebar, page } = useContext(DiscussionContext);
 
   const handleCloseInContext = useCallback(() => {
@@ -49,7 +49,7 @@ const PostActionsBar = () => {
           {intl.formatMessage(messages.title)}
         </h4>
       )}
-      {loadingStatus === RequestStatus.SUCCESSFUL && isUserPrivilagedInPostingRestriction && (
+      {loadingStatus === RequestStatus.SUCCESSFUL && isUserPrivilegedInPostingRestriction && (
         <>
           {!enableInContextSidebar && <div className="border-right border-light-400 mx-3" />}
           <Button
@@ -74,8 +74,8 @@ const PostActionsBar = () => {
               iconAs={Icon}
               onClick={handleCloseInContext}
               alt={intl.formatMessage(messages.close)}
-              iconClassNames="spinner-dimentions"
-              className="spinner-dimentions"
+              iconClassNames="spinner-dimensions"
+              className="spinner-dimensions"
             />
           </div>
         </>