#2763: Expanded row functionality - [DK] #2945

rachidatecs · 2024-10-16T21:00:09Z

Ticket

Resolves #2763

Changes

Revise members json API to get domains info and a permissions dict
Expand / close UI
Revise members table for better display (not scrollable) and accessibility (headers instead of scope)

Context for reviewers

Setup

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
Added at least 2 developers as PR reviewers (only 1 will need to approve)
Messaged on Slack or in standup to notify the team that a PR is ready for review
Changes to “how we do things” are documented in READMEs and or onboarding guide
If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Original Developer)

All new functions and methods are commented using plain language
Did dependency updates in Pipfile also get changed 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)

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)
Add at least 1 designer as PR reviewer

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

Pulled this branch locally and tested it
Reviewed this code and left comments
Checked that all code is adequately covered by tests
Made it clear which comments need to be addressed before this work is merged
If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Code reviewer)

All new functions and methods are commented using plain language
Interactions with external systems are wrapped in try/except
Error handling exists for unusual or missing values
(Rarely needed) Did dependency updates in Pipfile also get changed in requirements.txt?

Validated user-facing changes as a developer

Note: Multiple code reviewers can share the checklists above, a second reviewers should not make a duplicate checklist

As a designer reviewer, I have

Verified that the changes match the design intention

Checked that the design translated visually
Checked behavior
Checked different states (empty, one, some, error)
Checked for landmarks, page heading structure, and links
Tried to break the intended flow

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

Screenshots

…rtfolio_members_json response

… json

github-actions · 2024-10-16T21:07:11Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T17:32:49Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T17:42:46Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T19:30:32Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T19:52:09Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T20:01:04Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T21:01:51Z

🥳 Successfully deployed to developer sandbox dk.

…nage.get.gov into dk/2763-member-expand

github-actions · 2024-10-17T22:47:43Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T23:20:31Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-17T23:24:50Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-18T16:52:51Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-18T17:14:24Z

🥳 Successfully deployed to developer sandbox dk.

github-actions · 2024-10-18T17:54:09Z

🥳 Successfully deployed to developer sandbox dk.

abroddrick · 2024-10-21T23:17:01Z

src/registrar/tests/test_views_members_json.py

            roles=[UserPortfolioRoleChoices.ORGANIZATION_ADMIN],
            additional_permissions=[
                UserPortfolioPermissionChoices.VIEW_MEMBERS,
                UserPortfolioPermissionChoices.EDIT_MEMBERS,
            ],
        )
        UserPortfolioPermission.objects.create(
-            user=cls.user2,
-            portfolio=cls.portfolio,
+            user=self.user2,


compliment: love the switch to being consistent here!

zandercymatics

When clicking a domain that I am not a manager on, I get an access denied error

Also - I am assuming that this manage button is out of scope right?

zandercymatics · 2024-10-22T19:05:43Z

src/registrar/assets/js/get-gov.js

+        spanElement.textContent = 'Close';
+        useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_less');
+        buttonParentRow.classList.add('hide-td-borders');
+        toggleButton.setAttribute('aria-label', 'Close additional information');


Nice attention to screenreaders

zandercymatics · 2024-10-22T19:08:08Z

src/registrar/assets/js/get-gov.js

+    let toggleButtons = document.querySelectorAll('.usa-button--show-more-button');
+    toggleButtons.forEach((toggleButton) => {
+
+      let dataFor = toggleButton.dataset.for;


(nitpick / optional) could use a small comment explaining dataFor

zandercymatics · 2024-10-22T19:16:31Z

src/registrar/assets/js/get-gov.js

@@ -1873,6 +1873,88 @@ class MembersTable extends LoadTableBase {
  constructor() {
    super('.members__table', '.members__table-wrapper', '#members__search-field', '#members__search-field-submit', '.members__reset-search', '.members__reset-filters', '.members__no-data', '.members__no-search-results');
  }
+
+  initShowMoreButtons() {


Missing a function comment for initShowMoreButtons

zandercymatics · 2024-10-22T19:19:57Z

src/registrar/assets/js/get-gov.js

+        try {
+          if (!isNaN(parsedDate.getTime())) { // Check if the date is valid
+            last_active_display = parsedDate.toLocaleDateString('en-US', options);
+            last_active_sort_value = parsedDate.getTime(); // sort as numeric value, seconds since 1970


(Q) Why are we sorting as a numeric value rather than on date? Totally fine with it, but doesn't USWDS have support for sorting dates?

We have to sort dates as well as string values, namely 'Invalid date' and 'Invited'. Assigned each of these a numeric value (0 and 1) and sorted dates according to time since epoch

zandercymatics · 2024-10-22T19:23:01Z

src/registrar/assets/js/get-gov.js

+          } else {
+            throw new Error(invalid_date); // Throw an error to catch in catch block
+          }


(Optional) This seems a bit "roundabout", though I do like that you are handling NAN. This might be a good use case for an early return block

zandercymatics · 2024-10-22T19:34:16Z

src/registrar/assets/js/get-gov.js

+              }
+              domainsHTML += "</ul>";
+              if (num_domains >= 6) {
+                domainsHTML += "<p><a href='#'>View assigned domains</a></p>";


(Blocking) shouldn't this do a redirect?

zandercymatics · 2024-10-22T19:36:17Z

src/registrar/assets/js/get-gov.js

+            if (member_permissions.includes(UserPortfolioPermissionChoices.VIEW_ALL_DOMAINS)) {
+              permissionsHTML += "<p class='margin-top-1 p--blockquote'><strong class='text-base-dark'>Domains:</strong> Can view all organization domains. Can manage domains they are assigned to and edit information about the domain (including DNS settings).</p>";
+            } else if (member_permissions.includes(UserPortfolioPermissionChoices.VIEW_MANAGED_DOMAINS)) {
+              permissionsHTML += "<p class='margin-top-1 p--blockquote'><strong class='text-base-dark'>Domains:</strong> Can manage domains they are assigned to and edit information about the domain (including DNS settings).</p>";
+            }
+            if (member_permissions.includes(UserPortfolioPermissionChoices.EDIT_REQUESTS)) {
+              permissionsHTML += "<p class='margin-top-1 p--blockquote'><strong class='text-base-dark'>Domain requests:</strong> Can view all organization domain requests. Can create domain requests and modify their own requests.</p>";
+            } else if (member_permissions.includes(UserPortfolioPermissionChoices.VIEW_ALL_REQUESTS)) {
+              permissionsHTML += "<p class='margin-top-1 p--blockquote'><strong class='text-base-dark'>Domain requests (view-only):</strong> Can view all organization domain requests. Can't create or modify any domain requests.</p>";
+            }
+            if (member_permissions.includes(UserPortfolioPermissionChoices.EDIT_MEMBERS)) {
+              permissionsHTML += "<p class='margin-top-1 p--blockquote'><strong class='text-base-dark'>Members:</strong> Can manage members including inviting new members, removing current members, and assigning domains to members.";
+            } else if (member_permissions.includes(UserPortfolioPermissionChoices.VIEW_MEMBERS)) {
+              permissionsHTML += "<p class='margin-top-1 p--blockquote'><strong class='text-base-dark'>Members (view-only):</strong> Can view all organizational members. Can't manage any members.";


(nitpick / optional) I anticipate that this list might grow in the future. Would you be able to separate this permissionshtml area out into a helper function just so we keep these two areas clean?

zandercymatics · 2024-10-22T20:23:37Z

src/registrar/models/utility/portfolio_helper.py

+    @classmethod
+    def to_dict(cls):
+        return {key: value.value for key, value in cls.__members__.items()}


Not needed - you can use pythons built in .__dict__ attribute for dictionary conversion

zandercymatics · 2024-10-22T21:32:08Z

src/registrar/tests/test_views_members_json.py

+        actual_additional_permissions = {
+            permission for member in data["members"] for permission in member["permissions"]
+        }
+        self.assertTrue(expected_additional_permissions.issubset(actual_additional_permissions))


(Q) Why issubset?

zandercymatics · 2024-10-22T21:34:57Z

src/registrar/views/portfolio_members_json.py

        member_display=F("email"),
+        # Use ArrayRemove to return an empty list when no domain invitations are found


What would return without it?

dave-kennedy-ecs and others added 9 commits October 16, 2024 06:52

add roles, additional_permissions, domain_urls and domain_names to po…

a01d1fa

…rtfolio_members_json response

initial display of domains

7f789eb

refactor get_portfolio_permissions and return all permissions through…

026c70a

… json

initial display of permissions without formatting or display toggle

6ebaab1

display of permissions when no additional permissions assigned

b2b66e0

header info for domains and permissions display

12659c4

replaced strings in javascript with enums and pass from enum class to js

bf4ab6a

merge

472186e

UI

c5de4b3

rachidatecs requested a review from abroddrick as a code owner October 16, 2024 21:00

Unit tests, get domains for invited member

3d6417b

Fix last active JS bug

68ea6db

edit to uswds js in order to fix sort when no column data

ddd12f0

rachidatecs added 2 commits October 17, 2024 15:46

cleanup last active date

89ea577

merge

3d86bef

formatting for code readability

9724477

tweak header mapping on hidden rows

f2abf0f

dave-kennedy-ecs added 2 commits October 17, 2024 18:42

filter out [None] to return [] instead

4701f1c

Merge branch 'dk/2763-member-expand' of https://github.com/cisagov/ma…

ef52b6b

…nage.get.gov into dk/2763-member-expand

dave-kennedy-ecs added 3 commits October 17, 2024 19:04

fixed null values in response for last_active

2a64ac6

updated js for last_active

e0269ed

lint

661f09d

dave-kennedy-ecs changed the title ~~(draft) - #2763: Expanded row functionality - [DK]~~ #2763: Expanded row functionality - [DK] Oct 17, 2024

dave-kennedy-ecs requested review from lizpearl, therealslimhsiehdy, Matt-Spence, CocoByte, asaki222 and zandercymatics October 17, 2024 23:30

refactored js handling of last_active date

3b74793

commented js

96c77cd

aria-label on expand / close button

b06ffec

abroddrick reviewed Oct 21, 2024

View reviewed changes

zandercymatics self-assigned this Oct 22, 2024

zandercymatics requested changes Oct 22, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#2763: Expanded row functionality - [DK] #2945

#2763: Expanded row functionality - [DK] #2945

rachidatecs commented Oct 16, 2024 •

edited by dave-kennedy-ecs

Loading

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 18, 2024

github-actions bot commented Oct 18, 2024

github-actions bot commented Oct 18, 2024

abroddrick Oct 21, 2024

zandercymatics left a comment

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

dave-kennedy-ecs Oct 22, 2024

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

zandercymatics Oct 22, 2024

		member_display=F("email"),
		# Use ArrayRemove to return an empty list when no domain invitations are found

#2763: Expanded row functionality - [DK] #2945

Are you sure you want to change the base?

#2763: Expanded row functionality - [DK] #2945

Conversation

rachidatecs commented Oct 16, 2024 • edited by dave-kennedy-ecs Loading

Ticket

Changes

Context for reviewers

Setup

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

Ensured code standards are met (Original Developer)

Validated user-facing changes (if applicable)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

Ensured code standards are met (Code reviewer)

Validated user-facing changes as a developer

As a designer reviewer, I have

Verified that the changes match the design intention

Validated user-facing changes as a designer

Screenshots

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 18, 2024

github-actions bot commented Oct 18, 2024

github-actions bot commented Oct 18, 2024

Choose a reason for hiding this comment

zandercymatics left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rachidatecs commented Oct 16, 2024 •

edited by dave-kennedy-ecs

Loading