Merge branch 'master' of github.com:openedx/frontend-app-discussions …

…into abdullahwaheed/react-intl-to-formatjs

Makefile

@@ -1,6 +1,6 @@
 export TRANSIFEX_RESOURCE = frontend-app-discussions
 transifex_resource = frontend-app-discussions
-transifex_langs = "ar,fr,es_419,zh_CN,tr_TR,pl,fr_CA,fr_FR,de_DE,it_IT,pt_PT,uk,ru,hi,cs,es_AR,es_ES,fa_IR"
+transifex_langs = "ar,cs,de_DE,es_419,es_AR,es_ES,fa_IR,fr,fr_CA,fr_FR,hi,it_IT,pl,pt_PT,tr_TR,uk,ru,zh_CN"
 
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js

README.rst

@@ -1,20 +1,42 @@
+########################
+frontend-app-discussions
+########################
+
 |Codecov| |license|
 
 .. |Codecov| image:: https://codecov.io/gh/openedx/frontend-app-discussions/branch/master/graph/badge.svg?token=3z7XvuzTq3
    :target: https://codecov.io/gh/openedx/frontend-app-discussions
 .. |license| image:: https://img.shields.io/badge/license-AGPL-informational
    :target: https://github.com/openedx/frontend-app-discussions/blob/master/LICENSE
 
-frontend-app-discussions
-========================
-
-Introduction
-------------
+********
+Purpose
+********
 
 This repository is a React-based micro frontend for the Open edX discussion forums.
 
+***************
 Getting Started
----------------
+***************
+
+Prerequisites
+=============
+
+The `devstack`_ is currently recommended as a development environment for your
+new MFE.  If you start it with ``make dev.up.lms`` that should give you
+everything you need as a companion to this frontend.
+
+Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
+to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Devstack: https://github.com/openedx/devstack
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+Cloning and Startup
+===================
 
 1. Clone your new repo:
 
@@ -31,7 +53,7 @@ Getting Started
 The dev server is running at `http://localhost:2002 <http://localhost:2002>`_.
 
 Getting Help
-------------
+============
 Please tag **@openedx/edx-infinity ** on any PRs or issues.  Thanks.
 
 If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.
@@ -44,7 +66,8 @@ For more information about these options, see the `Getting Help`_ page.
 .. _Getting Help: https://openedx.org/getting-help
 
 How to Contribute
------------------
+=================
+
 Details about how to become a contributor to the Open edX project may be found in the wiki at `How to contribute`_
 
 .. _How to contribute: https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/process/index.html
@@ -55,32 +78,45 @@ can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend
 This project is currently accepting all types of contributions, bug fixes and security fixes
 
 The Open edX Code of Conduct
-----------------------------
+============================
 All community members should familiarize themselves with the `Open edX Code of Conduct`_.
 
 .. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
 
 People
-------
+======
 The assigned maintainers for this component and other project details may be found in Backstage or from inspecting catalog-info.yaml.
 
 Reporting Security Issues
 -------------------------
-Please do not report security issues in public. Please email security@edx.org.
+Please do not report security issues in public. Please email security@openedx.org.
 
 Project Structure
------------------
+=================
 
 The source for this project is organized into nested submodules according to the ADR `Feature-based Application Organization <https://github.com/openedx/frontend-app-discussions/blob/master/docs/decisions/0002-feature-based-application-organization.rst>`_.
 
 Build Process Notes
--------------------
+===================
 
 **Production Build**
 
 The production build is created with ``npm run build``.
 
+License
+=======
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
 Internationalization
---------------------
+====================
 
 Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ for documentation on internationalization.  The documentation explains how to use it, and the `How To <https://github.com/openedx/frontend-i18n/blob/master/docs/how_tos/i18n.rst>`_ has more detail.
+
+Reporting Security Issues
+=========================
+
+Please do not report security issues in public. Please email [email protected].

package.json

@@ -33,10 +33,10 @@
     "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.0",
+    "@edx/frontend-platform": "4.6.3",
     "@edx/paragon": "20.44.0",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
@@ -56,7 +56,7 @@
     "redux": "4.1.2",
     "regenerator-runtime": "0.13.9",
     "timeago.js": "4.0.2",
-    "tinymce": "5.10.2",
+    "tinymce": "5.10.7",
     "yup": "0.31.1"
   },
   "devDependencies": {

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) {