FEAT [GUI] Display signed-in user info in top bar and populate operator label with username

[behnam-o]

Adds a component to display the currently-signed-in user on the top right of the GUI, and sets the operator label value as the username on load/login

This is what it looks like:

If running locally, the top bar component is not added, and the label value is not updated. i.e.

Note:
Testing in local is a little tricky in our current setup, because we have some logic in place to bypass auth altogether if a local env is detected. We need to fix that, but this is the workaround I used to force auth on local env, to test this change:

1. create an app registration with http://localhost as its redirect URI
2. set ENTRA_TENANT_ID and ENTRA_CLIENT_ID evn variables (from above) before running python dev.py start (which starts the backend and front end)
3. in msalconfig.ts, return exactly ["openid"] instead of ["api://***"] (this basically means 'https://graph.microsoft.com/openid')
4. for some reason, the LoginRedirect component is weird when running locally, so I had to comment it out in AuthProvider.ts and instead create a manual login button like this:

<UnauthenticatedTemplate>
 {/* <LoginRedirect /> */}
 <button onClick={() => msalInstance.loginRedirect(buildLoginRequest(authConfig.clientId))}>Log In</button>
</UnauthenticatedTemplate>

[romanlutz]

Needs tests for when it can't resolve the user. For example, if you're running it locally and aren't logged in.

Also, this should auto-populate the operator (with alias presumably?) so that people don't have to keep re-setting that.

[jbolor21]

this should prob be userEvent instead of fireEvent
you can do something like

const user = userEvent.setup()
    // ...render...
    await user.click(screen.getByRole('button', { name: /log in/i }))

For the popover test (Sign Out), you do two sequential clicks — 1) open the popover, 2) click "Sign Out" inside it. With fireEvent you won't care about whether it has actually rendered or whether the element is visible/interactable vs w the userEvent.click you simulate the full browser interaction chain

[jbolor21]

similarly here think it should be something like:

const user = userEvent.setup()
// ...render...
await user.click(screen.getByRole('button', { name: /alice smith/i }))
await user.click(screen.getByRole('button', { name: /sign out/i }))
expect(mockLogoutRedirect).toHaveBeenCalled()

})

[jbolor21]

add import userEvent from '@testing-library/user-event'

[jbolor21]

are these new lines needed? i don't think they are but correct me if I'm wrong :)

[jbolor21]

nit: maybe change to || instead of ?? to catch the empty string vs the ?? will let it pass through i think!

[jbolor21]

nit: add checking for failure here?

onClick={() => {
instance.loginRedirect(buildLoginRequest(config.clientId)).catch((err) => {
console.error('Login redirect failed:', err)
})
}}

[jbolor21]

nit: and add similar error catch here too?