#2764: Adding Kebabs + Delete Functionality + Modals for the Members Table and Member Profile Page - [RH]

[therealslimhsiehdy]

Ticket

Resolves #2764

Changes

• Adding kebab (the 3 dots) buttons on the Members Table page and on the Manage Member page (also referenced as the Member Profile page)
• Since Domain Request, Members Table and Manage Member page almost all use the same kebab, table display, and modal functionality the code is made more dynamic

Context for reviewers

(The links are to Figmas)

• On the Members Table page, we want to add the ellipses (also referenced as kebab) buttons
• Alongside the same for the Manage Member page which is also referenced as the Member Profile page, we want to add the ellipses (also referenced as kebab) buttons
• For both we want to have options for those that are members with edit ability (Remove Member) and invited members (Cancel Invitation)
• For both we want to have modal options AND error message displays for A) The member you're trying to delete has active requests B) The member you're trying to delete is the only admin of the org
• We want to have a modal options AND a success message for when a user successfully deletes a member

Setup

1. In /admin -> Waffle Flags -> turn on the flags for organization_feature, organization_requests, and organization members
2. Play around with domain requests from the search functionality to creating a bunch of requests to deleting requests and making sure that all runs smoothly
3. For Members specifically, there should be fixtures in place (if you run this in local and docker compose down + up it will set up the fixtures). If not, create an Organization + Suborganization and add Members to it via User Portfolio Permissions in Django Admin. You can invite a Member via Portfolio Invitations in Django Admin.
   (I'm hand waving here a bit so please ping me if it's confusing and I can help set up!)
4. Play around with deleting members, deleting invited members and testing the kebabs and modals on both the Members Table page and Member Profile/Manage Member page.
5. You should run into these the two error scenarios and success scenarios as you try to delete members. (Feel free to ping me and I can run you through the scenarios)

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

• Met the acceptance criteria, or will meet them in a subsequent PR
• Created/modified automated tests
• Update documentation in READMEs and/or onboarding guide

Ensured code standards are met (Original Developer)

• If any updated dependencies on Pipfile, also update dependencies in requirements.txt.
• Interactions with external systems are wrapped in try/except
• Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

• Tag @dotgov-designers in this PR's Reviewers for design review. If code is not user-facing, delete design reviewer checklist
• Verify new pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• Pulled this branch locally and tested it
• Verified code meets all checks above. Address any checks that are not satisfied
• Reviewed this code and left comments. Indicate if comments must be addressed before code is merged
• Checked that all code is adequately covered by tests
• Verify migrations are valid and do not conflict with existing migrations

Validated user-facing changes as a developer

Note: Multiple code reviewers can share the checklists above, a second reviewer should not make a duplicate checklist. All checks should be checked before approving, even those labeled N/A.

• New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Meets all designs and user flows provided by design/product
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• (Rarely needed) Tested as both an analyst and applicant user

As a designer reviewer, I have

Verified that the changes match the design intention

• Checked that the design translated visually
• Checked behavior. Comment any found issues or broken flows.
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links

Validated user-facing changes as a designer

• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• Tested with multiple browsers (check off which ones were used)
  • Chrome
  • Microsoft Edge
  • FireFox
  • Safari
• (Rarely needed) Tested as both an analyst and applicant user

References

• Code review best practices

Screenshots

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[zandercymatics]

Just looked through this briefly - I did not get to the bottom half yet, but these might be useful!

Given that context know that some of these suggestions could be potentially inaccurate, so if it doesn't make sense -- call it out! Nice work

[Katherine-Osos]

@therealslimhsiehdy Designers will review this function as part of a larger "design review" for member management (m5), so I removed .gov-designers as a reviewer.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.