Adding a tooltip w/ full expiration date #15253
Conversation
|
started the job as gitpod-build-bmh-pat-exp-date-tooltip.2 because the annotations in the pull request description changed |
| <span className={"flex items-center gap-1 truncate" + (expired ? " text-orange-600" : "")}> | ||
| <span>{expirationDay.format("MMM D, YYYY")}</span> | ||
| {expired && ( | ||
| <Tooltip content={expirationDateString}> |
There was a problem hiding this comment.
This is the only real change in this block, but I removed the unnecessary fragment wrapper (<></>).
There was a problem hiding this comment.
Indeed, thanks for the pointer! 👍 (FYI, to review changes with big indentation changes, I like to ignore whitespaces by appending ?w=1 at the end of the diff URL -- for example https://github.com/gitpod-io/gitpod/pull/15253/files?w=1 )
I don't know how to cancel an existing build, but you can always trigger new builds by posting a simple comment instruction (see below for an example). Also, it seems that your latest build https://werft.gitpod-dev.com/job/gitpod-build-bmh-pat-exp-date-tooltip.3 did not finish successfully -- if you click on "Raw Logs" (top right), and scroll all the way to the bottom, it looks like your deployment had some pods that never became "ready", so your build eventually timed out. I'll manually trigger a new build in the hope that it works now. This can be done by adding the /werft run 👍 started the job as gitpod-build-bmh-pat-exp-date-tooltip.4 |
|
/werft run 👍 started the job as gitpod-build-bmh-pat-exp-date-tooltip.5 |
|
You can create expired tokens by adjusting the params sent to the API. We don't reject expired tokens as they naturally are immediately rejected when authenticating. With the pub api, that's easy as you can copy the CreatePersonalAccessToken request as cURL and adjust it |
|
Holding to unblock merge queue. /hold |
|
/unhold |
roboquat
added
deployed: webapp
Description
Adds a tooltip w/ the full expiration date of a Personal Access Token for expired tokens.
<Tooltip/>UpdatesThe positioning currently used for tooltips results in some potential inherited styling issues. For the PAT expired tooltip, it wasn't displaying due to a parent container using the
truncateclass (which it needs to and is ok). A class of these types of bugs can be resolved by rendering the Tooltip outside of the DOM hierarchy the of the React component structure via React Portals (I usedreact-portalfor this). This appends the node to thedocument.body. I also usedreact-popper, which assists in calculating the positioning of the tooltip in comparison to the target that shows it on hover. Thereact-datepickerlibrary we use also usesreact-popper, and I've used it in the past and been happy with it.Related Issue(s)
Fixes #15103
How to test
Preview Env: https://bmh-pat-ex451962a03f.preview.gitpod-dev.com/tokens
(latest build seems to be taking a long time, not sure if there's a way to cancel/restart a new one?)
This is slightly tricky to test, as you need an expired personal access token. I wasn't sure if there was a way to expire them manually, so I ended up negating the flag here manually as I was developing.
I did verify all of the other areas that use our
<Tooltip/>component, such as the Workspace list, Members list, and a few others. Creating a new token, or regenerating one also has an input with a copy icon that has a tooltip that can be tested.Release Notes
Documentation
Werft options:
If enabled this will build
install/previewValid options are
all,workspace,webapp,ide,jetbrains,vscode,ssh