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.

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

[EASI-4639] Discussions panel views #2895

Merged

Conversation

aterstriep
Copy link
Contributor

@aterstriep aterstriep commented Nov 20, 2024

EASI-4639

Figma

Description

  • Components to handle different views within GRB Discussions side panel
  • ViewDiscussions - Internal GRB discussion board view with list of discussions
    • src/views/DiscussionBoard/ViewDiscussions.tsx
  • StartDiscussion - Start discussion form
    • src/views/DiscussionBoard/StartDiscussion.tsx
  • Discussion - View and reply to discussion, displays list of replies
    • src/views/DiscussionBoard/Discussion.tsx

To do:

  • Follow-up PR:
    • Add MentionTextArea to form and DiscussionCard
    • Unit tests for form
    • Refetch discussions after form submit
      -This causes bug where side panel rerenders after refetch
  • Fix navigation between panels in EASI-4667
    • Navigation from buttons
    • Navigation after form submit

How to test this change

  • In GRB review admin view, click "View discussion board" button to view side panel
  • Additional view components are commented out here. Manually switch out active component for testing.
  • Unit tests handle additional view cases:
    • src/views/DiscussionBoard/ViewDiscussions.test.tsx
    • src/views/DiscussionBoard/Discussion.test.tsx

PR Author Checklist

  • I have provided a detailed description of the changes in this PR.
  • I have provided clear instructions on how to test the changes in this PR.
  • I have updated tests or written new tests as appropriate in this PR.

PR Reviewer Guidelines

  • It's best to pull the branch locally and test it, rather than just looking at the code online!
  • When approving a PR, provide a reason why you're approving it
    • e.g. "Approving because I tested it locally and all functionality works as expected"
    • e.g. "Approving because the change is simple and matches the Figma design"
  • Don't be afraid to leave comments or ask questions, especially if you don't understand why something was done! (This is often a great time to suggest code comments or documentation updates)
  • Check that all code is adequately covered by tests - if it isn't feel free to suggest the addition of tests.

@aterstriep aterstriep changed the base branch from main to feature/EASI-4614_grb_discussions November 20, 2024 00:10
@aterstriep aterstriep marked this pull request as ready for review November 20, 2024 15:32
@aterstriep aterstriep requested a review from a team as a code owner November 20, 2024 15:32
@aterstriep aterstriep requested review from adamodd and removed request for a team November 20, 2024 15:32
@adamodd adamodd self-assigned this Nov 20, 2024
@adamodd adamodd mentioned this pull request Nov 20, 2024
Copy link
Contributor

@adamodd adamodd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevermind, good bit of updates are in #2896

There are some repeating 00000000-0000-0000-0000-000000000000 grbDiscussions element ids causing dupe key warnings on the FE.

@adamodd adamodd self-requested a review November 20, 2024 21:35
@adamodd adamodd dismissed their stale review November 20, 2024 21:36

Old find

* MentionTextArea in DiscussionForm

* Mention area height-auto

* Text

* Rhf-like signature

* .usa-textarea + overrides

* Cleanup

* MentionTextArea React.forwardRef

* Cleanup
@ClayBenson94
Copy link
Collaborator

ClayBenson94 commented Nov 22, 2024

@aterstriep I think I get some errors (Page not found) when loading requests that don't have any discussions. I think that's something we'd chatted about before, and just wasn't sure if it's something you're tracking for this PR or a future one, but just wanted to make sure!

EDIT: I think we're all set, I see what's going on!
Guessing it's this code that's causing it.

// Get the first discussion from the array for testing purposes
const activeDiscussion = grbDiscussions.length > 0 ? grbDiscussions[0] : null;

I assume once we have navigation hooked up we'll probably either pass discussion post IDs directly when navigating to them or just navigate straight to <ViewDiscussions>, which doesn't seem to have this issue 😁

@aterstriep aterstriep merged commit 820a81d into feature/EASI-4614_grb_discussions Nov 22, 2024
12 checks passed
@aterstriep aterstriep deleted the EASI-4639/discussions-panel-views branch November 22, 2024 15:48
samoddball added a commit that referenced this pull request Dec 18, 2024
* Empty commit to start feature branch

* Add new discussions i18n file (#2886)

* [NOREF] Discussions translation fixes (#2888)

* Add discussions to translation files index

* Plural i18n translations

* Typos

* [EASI-4635] Initial discussions API schema and migration (#2887)

* initial discussions api schema and migration

* rename migration

* add new table to truncate lists

* formatting

* update postman, remove payload types, add constraint

* EASI-4634 MentionTextArea Tiptap (#2882)

* MentionTextArea
Tiptap lib

* DiscussionBoard folder
DiscussionModalWrapper
Sidepanel

* [EASI-4636] GRB discussions card (#2889)

* DiscussionReply component

* DiscussionsCard component

* Mock types and data

* DiscussionReply component layout

* Merge remote-tracking branch 'origin/EASI-4635/initial-discussions-api' into EASI-4636/discussions-response-component

* Add discussions to GRB review query

* Update component types

* Translations

* Relative date util function

* Discussions admin card

* Discussion board tips

* Rename component

* DiscussionPost unit test

* Empty discussions state

* Discussions unit tests

* Replace mock data with query data

* Responsive styling

* Role fallback text with unit test

* Update reply text and unit tests

* Add Discussions nav link

* Snapshot update

* Add `DiscussionBoard` to Discussions component

* Update DiscussionPost to handle replies

* Unit tests

* Removed snapshot

Snapshot would always be outdated because of "X days ago" text within component

* [EASI-4635] Discussions store methods and resolvers (#2896)

* implement grb discussion store methods and attach to resolvers

* update method comments

* update postman for discussions

* Add functionality in db seed to allow easier user context creation, add discussions seed data, and update postman collection to return more information on GRB Discussion Posts/Replies

---------

Co-authored-by: ClayBenson94 <clay.benson@oddball.io>

* [EASI-4639] Discussions panel views (#2895)

* Merge discussions card work into branch

* Discussions panel view components

* Discussion post and reply mutations

* Basic discussion form

* Fix line height within side panel

* Display discussion and replies

* Discussions list view

* Threaded replies styling

* Show/hide replies

* DiscussionsList component

* Add DiscussionsList to Discussion view

* Add DiscussionsList to discussion board view

* Create discussion and reply mutations

* Discussion board list filtering

* ViewDiscussions unit tests

* Discussion component unit tests

* Success and error messages

* Feature branch merge conflict fix

* MentionTextArea in DiscussionForm (#2898)

* MentionTextArea in DiscussionForm

* Mention area height-auto

* Text

* Rhf-like signature

* .usa-textarea + overrides

* Cleanup

* MentionTextArea React.forwardRef

* Cleanup

* Fix render error when review has no discussions

* Hide replies if array is empty

---------

Co-authored-by: adamodd <97050498+adamodd@users.noreply.github.com>

* Easi 4633/editor html (#2892)

* starting with schema types

* create type

* some extra types and methods

* add magic

* pull from mint, gql

* some cleanup, remove gql stuff that will be part of a different ticket

* testing dummy route to test out tag parsing

* remove what seemed to be extra sanitizations

* clean up test code, still working on things

* still testing, things looking good for ingestion

* integrating dummy with real

* cleanup similar struct

* update postman call

* add fields to postman call

* postman

* whoops - remove hardcoded sys intake id from postman

* update tag types

* remove unneeded

* fix lint

* update sanitization policy and use it

* leave classs as "mention" to match UI

* postman

* remove commented out item

* unused

* return only HTML, skip tags and extra types

* postman

* remove unused fields

* separate out tagged html policy

* s/eua/uuid

* remove extra fields

* only allow <span> and <p> tags for tagged html

* Update postman, remove TaggedContent, remove console.info

* return first err, update test file, fix some comments

* add additional request for group tag test

* naming

---------

Co-authored-by: ClayBenson94 <clay.benson@oddball.io>

* disallow numbered /bullet lists (#2900)

* disallow numbered /bullet lists

* update extensions

* Fix GRB Discussions SQL files with new SQLFluff linter

* [EASI-4614] Initial email work for GRB Discussions (#2875)

* Add email templates and handlers for grb review discussions

* Add tests for the new emails generated by grb review discussions

* lint

* naming

* s/string/models.HTML

* use builtin `template.HTML` for `DiscussionContent` to avoid escape

* add fuller test data

* update the other templates to have template.HTML

* add the other two email types to `cmd/test_email_templates`

---------

Co-authored-by: Clay Benson <clay.benson@oddball.io>
Co-authored-by: Lee Warrick <32332479+mynar7@users.noreply.github.com>
Co-authored-by: samoddball <156127704+samoddball@users.noreply.github.com>
Co-authored-by: samoddball <sam.lawson@oddball.io>

* Easi 4614/follow up items (#2906)

* adding `IsAdmin` field for conditional template rendering

* add conditionals to html

* add mention

* test mention color, fix horizontal divider

* update tests

* add admin version to test and devdata

* fix test

* add doc, update to only one recipient where only one is needed

* use BCC

* fix tests

* EASI-4667 Side Panel Routing / State management (#2901)

* DiscussionMode query handling

* Update tests with MemoryRouter

* Fix closure typo

* DiscussionList keys

* Create new, submit, go to discussions view

* Open to start discussion view

* `useDiscussion` hook

* `discussionId` determines `activeDiscussion`

* `useDiscussionParams` reorganize

* Oops!

* DiscussionForm -> Cancel -> Back to view mode

* Keep extracted reference instead of redefining literals with `DiscussionMode`

* Rename `useDiscussionParams.ts`

* Finally push

* Reset alert on mode change

* [EASI-4639] Discussion views cleanup (#2907)

* Reorder sub navigation items

* MentionTextArea - fix ref prop

- Passed field ref to `MentionTextArea`
- Updated `innerRef` prop to `ref`
- Added `tabIndex` attribute to `EditorContent` to enable focusing on div

* MentionTextArea - font styling to match Figma

* MentionTextArea - prop types

- Removed unused `shouldValidate` param in `setFieldValue`
- Added comments

* MentionTextArea - non-editable component fixes

- Update text to match Figma
- Remove `usa-textarea` class to fix styling

* Add MentionTextArea to DiscussionPost

* Refetch grbDiscussions after form submit

* MentionTextArea - fix form submit clear text bug

* Truncate text in MentionTextArea

* Truncated text unit test

* Fix textarea rerender on type bug

* Fix focusable div bug when not editable

* MentionTextArea unit tests

* MentionTextArea - fix duplicate ID on wrapper

* Only truncate text on GRB review tab

* Unit test fixes

* Unit test fixes

* [EASI-4635] Discussions API tests (#2908)

add tests for discussion API

* Easi 4645/send emails (#2910)

* remove unused

* implement half of tag handling

* use switch as both groups are not handled the same way

* CC itgov box when it is an admin who is tagged

* working on mechanism to dedupe when needed

* whoops - need to use poster role and info, not recipient

* fix CC in test

* remove DiscussionBoardType from input

* clean up skip conditional

* cautiously adding itgov team email...will double check things

* add `UserAccountsByIDsNP` method, implement group messages

* better naming

* fill in reply functionality, will see if there is a way to DRY this up

* use CreatedBy UUID instead of ID

* nil ptr deref fix attempt

* more nil ptr deref fix attempts

* add emailClient

* one more

* trying with mockSender

* add print

* one more

* still working on this e2e test

* nil check emailClient

* one more nil check

* whoops

* s/warn/info

* whoops - use proper ID

* postman

* swap to fmt for spacing consistency

* fix ids, update discussion links

* refactor resolver logic and touchup email templates without fixing tests

* update postman

* clean up tests

* remove unused enum

* cleanup error handling

* address panics first

* some cleanup

* remove bold tags, going one by one on cleaning up for tests

* hopefully getting closer to matching emails

* Update test email templates to have a valid group name

* passing tests

* urlFromPathAndQuery

---------

Co-authored-by: Clay Benson <clay.benson@oddball.io>
Co-authored-by: Lee Warrick <lee.warrick@oddball.io>

* [EASI-4658] Integrate discussions tagging (#2917)

* Fix ID bug

Removed duplicate ID on container in previous PR. Caused a bug where mention suggestions box does not render correctly. Replacing duplicate ID prop for now.

* Rename reviewers query

* Replace mock mention suggestions with grbReviewers

* Fix duplicate ID on `EditorContent`

Use editor element instead of ID to append suggestions popup

* Typed MentionTextArea component files

* Add `data-label` attr for rendering mentions

* Snapshot

* Fix no results translation and padding

* Display most recent discussion

* Update recent activity to consider replies

* remove self-tagging emails and add tests for discussion emails

* Fix typo and content in GRB Discussion usage tips

* Fix duplicate role types on GRB Reviewers (and delete associated resolvers)

* Remove need for type casting

* swap `<b>` for `<p>` (#2927)

* swap <b> for <p>

* wrap entire line

* EASI-4670 Cypress testing (#2914)

* Discussion board e2e tests begin

* Test reply url

* Comment

* Check user info

* Test mention trigger + participants list

* Clean up

---------

Co-authored-by: Ashley Terstriep <60187543+aterstriep@users.noreply.github.com>
Co-authored-by: samoddball <156127704+samoddball@users.noreply.github.com>

* [NOREF] GRB review nav menu / capitalization fixes (#2931)

* Fix capitalization

* Fix auto scroll

* Remove BE todos

---------

Co-authored-by: samoddball <156127704+samoddball@users.noreply.github.com>
Co-authored-by: Nick Downey <68014929+downeyn-cms@users.noreply.github.com>
Co-authored-by: Ashley Terstriep <60187543+aterstriep@users.noreply.github.com>
Co-authored-by: Lee Warrick <32332479+mynar7@users.noreply.github.com>
Co-authored-by: adamodd <97050498+adamodd@users.noreply.github.com>
Co-authored-by: samoddball <sam.lawson@oddball.io>
Co-authored-by: Lee Warrick <lee.warrick@oddball.io>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants