feat: Implement add post UI [BD-03][TNL-1618][BB-2970] #6

0x29a · 2020-09-28T12:25:29Z

This PR contains the UI for adding of post.

JIRA tickets:

Screenshots:

Testing instructions:

Clone this repo.
Install dependencies and run dev server:
```
npm install
npm start
```
Open http://localhost:2002/discussions/course-v1:edX+DemoX+Demo_Course/.
Click "Add Post" and make sure the interface is matching the mock-up.

Reviewers

openedx-webhooks · 2020-09-28T12:25:34Z

Thanks for the pull request, @0x29a! I've created BLENDED-607 to keep track of it in Jira. More details are on the BD-03 project page.

When this pull request is ready, tag your edX technical lead.

src/discussions/discussions-home/DiscussionsHome.jsx

src/discussions/navigation/navigation-bar/NavigationBar.jsx

src/discussions/posts/post-add/PostAdd.jsx

xitij2000

This looks good for the most part, however I think we need to keep in mind that this UI won't just be used for adding posts, but for editing them as well.

While that is out of scope of this PR, I think it can affect how key variables are named.

src/data/constants.js

src/discussions/posts/data/slices.js

xitij2000 · 2020-10-28T09:21:50Z

src/discussions/posts/data/slices.js

@@ -36,6 +36,7 @@ const coursePostsSlice = createSlice({
    topicPostMap: {
      // Mapping of topic ids to posts in them
    },
+    postAddingInProgress: true,


I think this should be renamed to: showPostEditor or similar

src/discussions/posts/post-add/PostAdd.jsx

xitij2000

I've left a few general comments, other than that it looks OK.
👍

I tested this: tested on devstack
I read through the code
I checked for accessibility issues

xitij2000 · 2021-06-28T14:23:41Z

src/discussions/posts/post-editor/messages.js

+  },
+});
+
+export default messages;


It seems the general convention for edX projects is to use camel case here as well. Could you update these message keys accordingly?

I've found even dot notation. 🤔

I think that guidance in frontend-platform’s doc is a bit antiquated. Using a short camelCase string for the object key is fine, so long as the id is also globally unique in the MFE. I have seen these too in the code but uts just easier to read than remembering some big long dot-delimited string.

src/discussions/posts/post-editor/PostEditor.jsx

awaisdar001 · 2021-06-29T06:24:22Z

Is there a Jira related to this? if not, can you create that?

xitij2000 · 2021-07-01T13:12:49Z

@awaisdar001 Sure. There is an existing ticket. @0x29a will update the PR to include those details.

asadazam93 · 2021-07-16T09:39:13Z

@0x29a Any updates on this PR?

0x29a · 2021-07-16T09:42:43Z

Hi @asadazam93, I'm going to rebase & test this today, or on Monday. I will ping you once this is ready for final review.

0x29a · 2021-07-19T09:56:40Z

@asadazam93, this is ready for edX review.

mehaknasir · 2021-07-27T07:08:48Z

@0x29a I don't have access to the attached tickets and there is no description provided as context to the done work. can you please add some description to the PR

mehaknasir

add PR description explaining purpose of PR.
remove font awesome icon with paragon icons.
fix lint error

src/discussions/posts/post-editor/PostEditor.jsx

xitij2000 · 2021-08-03T12:04:30Z

Updated UI to match new mockups.

mehaknasir

I didn't had the Figma designs related to this PR before, now I get it and feel like even if this PR is only related to UI still its not even close to mock designs
https://www.figma.com/file/LVFnO9oRHYiamoicZuXDAC/Discussion-page?node-id=1918%3A57140

can you please confirm about that?? @xitij2000 @0x29a

mehaknasir · 2021-08-03T14:17:18Z

I didn't had the Figma designs related to this PR before, now I get it and feel like even if this PR is only related to UI still its not even close to mock designs
https://www.figma.com/file/LVFnO9oRHYiamoicZuXDAC/Discussion-page?node-id=1918%3A57140

can you please confirm about that?? @xitij2000 @0x29a

Okay I think I was looking at old screenshot. the new one looks fine to me. never mind

mehaknasir · 2021-08-04T11:47:55Z

on clicking add post UI is crashing and there are so many console errors can you please look into these issues

src/discussions/posts/post-editor/PostEditor.jsx

mehaknasir · 2021-08-04T13:46:20Z

on clicking add post UI is crashing and there are so many console errors can you please look into these issues

@xitij2000 any update on this one?

xitij2000 · 2021-08-05T12:38:51Z

@xitij2000 any update on this one?
I am not seeing this error at all. Did you run npm install after checking out this branch?

mehaknasir · 2021-08-09T08:54:23Z

@xitij2000 any update on this one?
I am not seeing this error at all. Did you run npm install after checking out this branch?

@xitij2000 yes of course I did, I will check again can you please tell me any backend setting that should be there for running? I am running latest studio code

mehaknasir · 2021-08-09T09:16:48Z

https://www.figma.com/file/LVFnO9oRHYiamoicZuXDAC/Discussion-page?node-id=1918%3A57140

The view is visible now, the design does not match Figma, the upper action bar I am not sure if that is part of ticket but that's completely different. apart from that the Add a post section is missing bug/issue option and the post editor is missing all the editing options and design does not contain follow this post and post anonymous options here.

Figma link is attached

xitij2000 · 2021-08-09T13:20:08Z

The view is visible now, the design does not match Figma, the upper action bar I am not sure if that is part of ticket but that's completely different. apart from that the Add a post section is missing bug/issue option and the post editor is missing all the editing options and design does not contain follow this post and post anonymous options here.

I think you have the wrong link there. The design I'm following is here: https://www.figma.com/file/LVFnO9oRHYiamoicZuXDAC/Discussion-page?node-id=1918%3A53114

I think it's a bit confusing because there are a few similar but different views around floating around.

The bug/issue feature will come in a far future milestone. The post editor is part of a different PR since we need to investigate how exactly to integrate it here.

awais-ansari

As this PR is purely related to UI design. So there are many differences between current UI design and Figma Design.

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

src/discussions/posts/post-editor/PostEditor.jsx

0x29a · 2021-08-26T12:08:23Z

@awais-ansari, I think I've addressed all comments. Also, I've updated the screenshot in the PR description.

mehaknasir

Looks good to me

0x29a · 2021-08-30T11:14:45Z

@mehaknasir, @awais-ansari thank you very much for thorough review!

* Changes copied from Michael's PR * Modifications for URL scheme * renamed variable * added prop type * updated variable name * fix(i18n): update translations * added newline * updated variable name Co-authored-by: edX Transifex Bot <learner-engineering@edx.org>

openedx-webhooks added blended PR is managed through 2U's blended developmnt program waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. labels Sep 28, 2020

xitij2000 requested changes Sep 30, 2020

View reviewed changes

src/discussions/discussions-home/DiscussionsHome.jsx Outdated Show resolved Hide resolved

src/discussions/navigation/navigation-bar/NavigationBar.jsx Outdated Show resolved Hide resolved

src/discussions/posts/post-add/PostAdd.jsx Outdated Show resolved Hide resolved

0x29a mentioned this pull request Oct 13, 2020

[WIP] [BD-03] [TNL-7353] Prototype: Create React-based forum post editor #7

Closed

2 tasks

xitij2000 approved these changes Oct 28, 2020

View reviewed changes

0x29a force-pushed the 0x29a/bb2970/add_post_ui branch from e618aca to be0c362 Compare October 28, 2020 17:16

0x29a force-pushed the 0x29a/bb2970/add_post_ui branch 2 times, most recently from a8d5dee to 794ec44 Compare June 27, 2021 21:21

xitij2000 approved these changes Jun 28, 2021

View reviewed changes

0x29a changed the title ~~[BD-03] Implement add post UI~~ [BD-03][TNL-1618][BB-2970] Implement add post UI Jul 1, 2021

0x29a changed the title ~~[BD-03][TNL-1618][BB-2970] Implement add post UI~~ feat: Implement add post UI [BD-03][TNL-1618][BB-2970] Jul 1, 2021

awaisdar001 assigned asadazam93, mehaknasir and awais-ansari Jul 5, 2021

0x29a force-pushed the 0x29a/bb2970/add_post_ui branch 2 times, most recently from b9a574c to 43ff126 Compare July 19, 2021 09:50

0x29a marked this pull request as ready for review July 19, 2021 09:56

openedx-webhooks added needs triage and removed waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. labels Jul 19, 2021

mehaknasir suggested changes Jul 27, 2021

View reviewed changes

src/discussions/posts/post-editor/PostEditor.jsx Outdated Show resolved Hide resolved

src/discussions/posts/post-editor/PostEditor.jsx Outdated Show resolved Hide resolved

awais-ansari reviewed Jul 29, 2021

View reviewed changes

src/discussions/posts/post-editor/PostEditor.jsx Outdated Show resolved Hide resolved

xitij2000 force-pushed the 0x29a/bb2970/add_post_ui branch 2 times, most recently from 14a9074 to b5fc44f Compare August 3, 2021 11:57

mehaknasir suggested changes Aug 3, 2021

View reviewed changes

mehaknasir reviewed Aug 4, 2021

View reviewed changes

src/discussions/posts/post-editor/PostEditor.jsx Show resolved Hide resolved

xitij2000 force-pushed the 0x29a/bb2970/add_post_ui branch from b5fc44f to 47c294c Compare August 4, 2021 11:58

awais-ansari requested changes Aug 10, 2021

View reviewed changes

0x29a and others added 3 commits August 17, 2021 10:52

feat: add post add interface

164ef45

Update to match mockups better

4a8d970

fix: use Form.Checkbox and StatefulButton

9d8da9f

0x29a force-pushed the 0x29a/bb2970/add_post_ui branch from 47c294c to 9d8da9f Compare August 17, 2021 11:04

0x29a added 2 commits August 26, 2021 11:24

fix: add dangling commas to satisfy linter

6418558

feat: make UI look closer to mock-up

f8e4d16

0x29a force-pushed the 0x29a/bb2970/add_post_ui branch from 65610ca to f8e4d16 Compare August 26, 2021 12:03

0x29a requested a review from awais-ansari August 26, 2021 12:08

awais-ansari approved these changes Aug 26, 2021

View reviewed changes

mehaknasir approved these changes Aug 26, 2021

View reviewed changes

mehaknasir merged commit a380ee3 into openedx:master Aug 27, 2021

openedx-webhooks added merged and removed needs triage labels Aug 27, 2021

0x29a deleted the 0x29a/bb2970/add_post_ui branch August 30, 2021 11:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement add post UI [BD-03][TNL-1618][BB-2970] #6

feat: Implement add post UI [BD-03][TNL-1618][BB-2970] #6

0x29a commented Sep 28, 2020 •

edited

openedx-webhooks commented Sep 28, 2020 •

edited

xitij2000 left a comment

xitij2000 Oct 28, 2020

xitij2000 left a comment

xitij2000 Jun 28, 2021

0x29a Jul 1, 2021 •

edited

awaisdar001 Jul 1, 2021

awaisdar001 commented Jun 29, 2021

xitij2000 commented Jul 1, 2021

asadazam93 commented Jul 16, 2021

0x29a commented Jul 16, 2021

0x29a commented Jul 19, 2021

mehaknasir commented Jul 27, 2021

mehaknasir left a comment

xitij2000 commented Aug 3, 2021

mehaknasir left a comment •

edited

mehaknasir commented Aug 3, 2021

mehaknasir commented Aug 4, 2021

mehaknasir commented Aug 4, 2021

xitij2000 commented Aug 5, 2021

mehaknasir commented Aug 9, 2021 •

edited

mehaknasir commented Aug 9, 2021

xitij2000 commented Aug 9, 2021

awais-ansari left a comment

0x29a commented Aug 26, 2021

mehaknasir left a comment

0x29a commented Aug 30, 2021

feat: Implement add post UI [BD-03][TNL-1618][BB-2970] #6

feat: Implement add post UI [BD-03][TNL-1618][BB-2970] #6

Conversation

0x29a commented Sep 28, 2020 • edited

openedx-webhooks commented Sep 28, 2020 • edited

xitij2000 left a comment

Choose a reason for hiding this comment

xitij2000 Oct 28, 2020

Choose a reason for hiding this comment

xitij2000 left a comment

Choose a reason for hiding this comment

xitij2000 Jun 28, 2021

Choose a reason for hiding this comment

0x29a Jul 1, 2021 • edited

Choose a reason for hiding this comment

awaisdar001 Jul 1, 2021

Choose a reason for hiding this comment

awaisdar001 commented Jun 29, 2021

xitij2000 commented Jul 1, 2021

asadazam93 commented Jul 16, 2021

0x29a commented Jul 16, 2021

0x29a commented Jul 19, 2021

mehaknasir commented Jul 27, 2021

mehaknasir left a comment

Choose a reason for hiding this comment

xitij2000 commented Aug 3, 2021

mehaknasir left a comment • edited

Choose a reason for hiding this comment

mehaknasir commented Aug 3, 2021

mehaknasir commented Aug 4, 2021

mehaknasir commented Aug 4, 2021

xitij2000 commented Aug 5, 2021

mehaknasir commented Aug 9, 2021 • edited

mehaknasir commented Aug 9, 2021

xitij2000 commented Aug 9, 2021

awais-ansari left a comment

Choose a reason for hiding this comment

0x29a commented Aug 26, 2021

mehaknasir left a comment

Choose a reason for hiding this comment

0x29a commented Aug 30, 2021

0x29a commented Sep 28, 2020 •

edited

openedx-webhooks commented Sep 28, 2020 •

edited

0x29a Jul 1, 2021 •

edited

mehaknasir left a comment •

edited

mehaknasir commented Aug 9, 2021 •

edited