[DT-841]Display error from Consent on Sign In

[rjohanek]

Addresses

Ticket: https://broadworkbench.atlassian.net/browse/DT-841

Summary

• Pass through error from consent and display to the user
• Update other error messages to include the description as well (msg field was unused)
• Convert Alert to tsx so that we can use an optional prop to have an onClose event and an x in the corner of the alert

---

Have you read Terra's Contributing Guide lately? If not, do that first.

• Label PR with a Jira ticket number and include a link to the ticket
• Label PR with a security risk modifier [no, low, medium, high]
• PR describes scope of changes
• Get a minimum of one thumbs worth of review, preferably two if enough team members are available
• Get PO sign-off for all non-trivial UI or workflow changes
• Verify all tests go green
• Test this change deployed correctly and works on dev environment after deployment

[fboulnois]

A suggestion to simplify getting the body:

[rjohanek]

if there is a message return that, else return the whole error

[snf2ye]

What if that is really long? Do we truncate the message?

[rjohanek]

I don't believe its truncated, I think it will display the whole thing. Would it be preferable to truncate it?

[snf2ye]

I'm not sure. This is possibly something we can just observe and address if it becomes a problem.

[s-rubenstein]

Looks reasonable - I think there are a few questions but mine at least isn't blocking.

[s-rubenstein]

Can you x out of the error message?

[rushtong]

IIRC, I don't think we have a close handler on the error message. Would be nice.

[rushtong]

I hacked this a little bit ... this code looks ugly (style wise), but works. Modify the alert div around line 221:

        : <div className="dialog-alert">
            <button onClick={() => setErrorDisplay({})}>X</button>
          <Alert
            id="dialog"
            type="danger"
            title={(errorDisplay as ErrorInfo).title}
            description={(errorDisplay as ErrorInfo).description}
          />
        </div>

[rushtong]

Spent some more time with this - I think the Alert component is too restrictive. Modifying it to take a conditional close handler might be more work than we want to take on due to how much usage it has. Here is my hacky attempt at a solution that uses import CloseIcon from '@mui/icons-material/Close';

        : <div id={`dialog_alert`} className={`alert-wrapper danger`} style={{border: '1px solid red', borderRadius: '5px'}}>
          <span
            style={{float: 'right', fontWeight: 'bolder', fontSize: 24, cursor: 'pointer'}}
            onClick={() => setErrorDisplay({})}><CloseIcon/></span>
          <h4 id={`dialog_title`} className="alert-title">{(errorDisplay as ErrorInfo).title}</h4>
          <span id={`dialog_description`}
            className="alert-description">{(errorDisplay as ErrorInfo).description}</span>
        </div>

[rjohanek]

With some advice from Miguel, I decided to convert the Alert to tsx so I could explicitly define the props and make onClose optional with an undefined default value.

[fboulnois]

looks good 👍

[msilva-broad]

breaking this out to a second line would help readability and match the recommended pattern (including the return type:

export const Alert = (props: AlertProps): React.ReactNode => {
  const { id, type, title, description, onClose } = props;
  //...

[rushtong]

👍🏽