Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use SwitchToggle to enable/disable comment preview #5416

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Use SwitchToggle to enable/disable comment preview #5416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions frontend/src/components/projectDetail/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,14 +133,14 @@ export default defineMessages({
id: 'project.detail.questionsAndComments.login',
defaultMessage: 'Log in to be able to post comments.',
},
write: {
id: 'project.detail.questionsAndComments.write',
defaultMessage: 'Write',
},
preview: {
id: 'project.detail.questionsAndComments.preview',
defaultMessage: 'Preview',
},
previewComment: {
id: 'project.detail.questionsAndComments.previewComment',
defaultMessage: 'Preview comment',
},
post: {
id: 'project.detail.questionsAndComments.button',
defaultMessage: 'Post',
Expand Down
25 changes: 9 additions & 16 deletions frontend/src/components/projectDetail/questionsAndComments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { MessageStatus } from '../comments/status';
import { CurrentUserAvatar, UserAvatar } from '../user/avatar';
import { htmlFromMarkdown, formatUserNamesToLink } from '../../utils/htmlFromMarkdown';
import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
import { SwitchToggle } from '../formInputs';

export const PostProjectComment = ({ projectId, updateComments, contributors }) => {
const token = useSelector((state) => state.auth.token);
Expand All @@ -35,22 +36,6 @@ export const PostProjectComment = ({ projectId, updateComments, contributors })
<div className="w-90-ns w-100 cf pv4 bg-white center ph3">
<div className="cf w-100 flex mb3">
<CurrentUserAvatar className="w3 h3 fr ph2 br-100" />
<div className="cf pt3-ns ph3 ph3-m ml3 bg-grey-light dib">
<span
role="button"
className={`pointer db dib-ns ${!isShowPreview && 'bb b--blue-dark bw1 pb1'}`}
onClick={() => setIsShowPreview(false)}
>
<FormattedMessage {...messages.write} />
</span>
<span
role="button"
className={`pointer ml3 db dib-ns ${isShowPreview && 'bb b--blue-dark bw1 pb1'}`}
onClick={() => setIsShowPreview(true)}
>
<FormattedMessage {...messages.preview} />
</span>
</div>
</div>
<div className={`w-100 h-100`} style={{ position: 'relative', display: 'block' }}>
<CommentInputField
Expand All @@ -64,6 +49,14 @@ export const PostProjectComment = ({ projectId, updateComments, contributors })
</div>

<div className="fl w-100 tr pt1 pr0-ns pr1 ml-auto">
<div className="fl pv2 dib-ns dn blue-dark">
<SwitchToggle
onChange={() => setIsShowPreview(!isShowPreview)}
isChecked={isShowPreview}
label={<FormattedMessage {...messages.previewComment} />}
labelPosition='right'
/>
</div>
<Button
onClick={() => saveCommentAsync.execute()}
className="bg-red white f5"
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/projectDetail/tests/questionsAndComments.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ describe('test if QuestionsAndComments component', () => {
<PostProjectComment projectId={1} />
</ReduxIntlProviders>,
);
const previewBtn = screen.getByRole('button', { name: /preview/i });
expect(screen.getAllByRole('button').length).toBe(11);
expect(screen.getByRole('button', { name: /write/i })).toBeInTheDocument();
expect(previewBtn).toBeInTheDocument();
expect(screen.getAllByRole('button').length).toBe(9);
expect(screen.getByRole('checkbox').checked).toBe(false);
expect(screen.getByRole('textbox')).toBeInTheDocument();
fireEvent.click(previewBtn);
expect(screen.getByText('Preview comment')).toBeInTheDocument();
fireEvent.click(screen.getByRole('checkbox'));
expect(screen.getByRole('checkbox').checked).toBe(true);
expect(screen.queryByRole('textbox', { hidden: true })).toBeInTheDocument();
expect(screen.getByText(/nothing to preview/i)).toBeInTheDocument();
});
Expand Down