#2275 - Org Model view only message and tooltip fixes - [AB]

[CocoByte]

Ticket 2275

Resolves #2275

Changes

• Updates the message that appears on the Domain page if a user can only view a domain, but not manage it. See the text in this document.
• Fixes tooltips in the Domains table so that their content doesn't get clipped by parent containers (this is accomplished in two ways -- first, by adjusting wrapping logic so we can specify max widths to be less than the viewport width. Secondly, by adjusting the positioning logic so the tooltip can show above its parent container(s). Between these two mechanisms, we should be able to easily customize the tooltip to design needs)
• The above tooltip fix also adds a child element "usa-tooltip__content" to the tooltip. This was needed for making the viewport adjustments for wrapping behavior. But a handy side-effect of this is if design ever wants a fancy tooltip, we can absolutely make it as fancy as we want now by modifying this child element.

Context for reviewers

NOTE @rachidatecs -- I remember you mentioning that it is preferable to use <span> within the tooltip. However, using a <span> instead of a <div> (or other containers) causes conflicts in positioning. <span> is getting handled differently and while I can see how using <span> would be the more minimal solution (especially for text content), <div> I think is more extensible/robust. Perhaps I could add <span> within the <div> to keep text within appropriate containers...but this would assume purely text-based content (what if we wanted HTML instead?). And since making assumptions in code is also breaking best practices, I opted to just use a <div> for simplicity and extensibility.

Setup

Code Review Verification Steps

• Login as a user that can only view a domain, but not manage it. Navigate to the domain page for that domain, and verify that the text is updated to "You don't have access to manage < domain >. If you need to make updates, contact one of the listed domain managers."
• Go back to the Domains table and verify that a various window widths, the tooltips do not have their content clipped. (See image below, which shows a tooltip modified with lots of text to demonstrate wrapping)

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

• 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)

• Tested with multiple browsers, the suggestion is to use ones that the developer didn't (check off which ones were used)

  • Chrome
  • Microsoft Edge
  • FireFox
  • Safari

• (Rarely needed) Tested as both an analyst and applicant user

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

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[Katherine-Osos]

@CocoByte Since we won't have "member permissions" rolled out before people see this message ... can you remove the third sentence for now? (We'll need to adjust the message again after admins are incorporated into the system.)

Therefore, it should read:

You don't have access to manage < domain >. If you need to make updates, contact one of the listed domain managers.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[rachidatecs]

NOTE: You're linking to another PR instead of the ticket at the top of your PR description

[rachidatecs]

NITPICK: endline

[rachidatecs]

NOTE: Code is no longer on NL. Deploy it somewhere else for the design review.

[rachidatecs]

Fantastic work.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.