diff --git a/src/components/PostHelpPanel.jsx b/src/components/PostHelpPanel.jsx
new file mode 100644
index 000000000..ac216fd5f
--- /dev/null
+++ b/src/components/PostHelpPanel.jsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import {
+ Hyperlink, Icon, IconButton, IconButtonWithTooltip,
+} from '@openedx/paragon';
+import { Close, HelpOutline } from '@openedx/paragon/icons';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../discussions/posts/post-editor/messages';
+
+const PostHelpPanel = () => {
+ const intl = useIntl();
+ const [showHelpPane, setShowHelpPane] = useState(false);
+
+ return (
+ <>
+
+
setShowHelpPane(true)}
+ alt={intl.formatMessage(messages.showHelpIcon)}
+ tooltipContent={{intl.formatMessage(messages.discussionHelpTooltip)}
}
+ src={HelpOutline}
+ iconAs={Icon}
+ size="inline"
+ className="float-right p-3 help-icon"
+ iconClassNames="help-icon-size"
+ data-testid="help-button"
+ invertColors
+ isActive
+ />
+
+ {showHelpPane && (
+
+
setShowHelpPane(false)}
+ alt={intl.formatMessage(messages.actionsAlt)}
+ src={Close}
+ iconAs={Icon}
+ size="inline"
+ className="float-right p-3"
+ iconClassNames="icon-size"
+ data-testid="hide-help-button"
+ />
+
+
{intl.formatMessage(messages.discussionHelpHeader)}
+
{intl.formatMessage(messages.discussionHelpDescription)}
+
+ {intl.formatMessage(messages.discussionHelpCourseParticipation)}
+
+
+ {intl.formatMessage(messages.discussionHelpMathExpressions)}
+
+
+
+ )}
+ >
+ );
+};
+
+export default React.memo(PostHelpPanel);
diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx
index 834304b35..a2f57959c 100644
--- a/src/discussions/posts/post-editor/PostEditor.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.jsx
@@ -18,6 +18,7 @@ import { AppContext } from '@edx/frontend-platform/react';
import { TinyMCEEditor } from '../../../components';
import FormikErrorFeedback from '../../../components/FormikErrorFeedback';
+import PostHelpPanel from '../../../components/PostHelpPanel';
import PostPreviewPanel from '../../../components/PostPreviewPanel';
import useDispatchWithState from '../../../data/hooks';
import selectCourseCohorts from '../../cohorts/data/selectors';
@@ -409,6 +410,7 @@ const PostEditor = ({
onEditorChange={formikCompatibleHandler(handleChange, 'comment')}
onBlur={formikCompatibleHandler(handleBlur, 'comment')}
/>
+
diff --git a/src/discussions/posts/post-editor/PostEditor.test.jsx b/src/discussions/posts/post-editor/PostEditor.test.jsx
index c72678485..d6c0e2409 100644
--- a/src/discussions/posts/post-editor/PostEditor.test.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.test.jsx
@@ -368,5 +368,34 @@ describe('PostEditor', () => {
expect(container.querySelector('[data-testid="hide-preview-button"]')).not.toBeInTheDocument();
});
});
+
+ it('should show Help Panel', async () => {
+ await renderComponent(true, `/${courseId}/posts/${threadId}/edit`);
+
+ await act(async () => {
+ fireEvent.click(container.querySelector('[data-testid="help-button"]'));
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('[data-testid="hide-help-button"]')).toBeInTheDocument();
+ });
+ });
+
+ it('should hide Help Panel', async () => {
+ await renderComponent(true, `/${courseId}/posts/${threadId}/edit`);
+
+ await act(async () => {
+ fireEvent.click(container.querySelector('[data-testid="help-button"]'));
+ });
+
+ await act(async () => {
+ fireEvent.click(container.querySelector('[data-testid="hide-help-button"]'));
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('[data-testid="help-button"]')).toBeInTheDocument();
+ expect(container.querySelector('[data-testid="hide-help-button"]')).not.toBeInTheDocument();
+ });
+ });
});
});
diff --git a/src/discussions/posts/post-editor/messages.js b/src/discussions/posts/post-editor/messages.js
index c2691aebb..e91781317 100644
--- a/src/discussions/posts/post-editor/messages.js
+++ b/src/discussions/posts/post-editor/messages.js
@@ -116,6 +116,36 @@ const messages = defineMessages({
defaultMessage: 'Show preview',
description: 'show preview button text to allow user to see their post content.',
},
+ showHelpIcon: {
+ id: 'discussions.editor.posts.showHelp.icon',
+ defaultMessage: 'Show Help',
+ description: 'show help icon to allow user to see important documentation.',
+ },
+ discussionHelpHeader: {
+ id: 'discussions.editor.posts.discussionHelpHeader',
+ defaultMessage: 'Discussions help',
+ description: 'header text for post help section.',
+ },
+ discussionHelpDescription: {
+ id: 'discussions.editor.posts.discussionHelpDescription',
+ defaultMessage: 'Course discussions give you the opportunity to start conversations, ask questions, and interact with other learners. See the links below to learn more:',
+ description: 'description message for post help section.',
+ },
+ discussionHelpCourseParticipation: {
+ id: 'discussions.editor.posts.discussionHelpCourseParticipation',
+ defaultMessage: 'Participating in course discussions',
+ description: 'Documentation link title for participating in course discussions.',
+ },
+ discussionHelpMathExpressions: {
+ id: 'discussions.editor.posts.discussionHelpMathExpressions',
+ defaultMessage: 'Entering math expressions in course discussions',
+ description: 'Documentation link title for entering math expressions in course discussions.',
+ },
+ discussionHelpTooltip: {
+ id: 'discussions.editor.posts.discussionHelpTooltip',
+ defaultMessage: 'Learn more about MathJax & LaTeX',
+ description: 'Tooltip help message for documentation help.',
+ },
actionsAlt: {
id: 'discussions.actions.label',
defaultMessage: 'Actions menu',
diff --git a/src/index.scss b/src/index.scss
index 3fd21986f..99c8a0a65 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -593,6 +593,15 @@ th, td {
white-space: nowrap;
}
+.help-icon {
+ margin: -47px -3px 0px 0px;
+}
+
+.help-icon-size {
+ height: 16px !important;
+ width: 16px !important;
+}
+
@media only screen and (max-width: 367px) {
.discussion-comments h5,
@@ -603,7 +612,8 @@ th, td {
.pgn__modal,
.pgn__form-label,
.dropdown-menu,
- .tox-tbtn {
+ .tox-tbtn,
+ .tooltip {
font-size: 10px !important;
}
@@ -640,7 +650,8 @@ th, td {
.pgn__form-label,
.pgn__modal,
.dropdown-menu,
- .tox-tbtn {
+ .tox-tbtn,
+ .tooltip {
font-size: 12px !important;
}
@@ -659,7 +670,8 @@ th, td {
@media only screen and (min-width: 769px) {
body,
- #main {
+ #main,
+ .tooltip {
font-size: 14px;
}
}