Summary

Update the API Tokens UI for new token format and status.

Review Request #12527 — Created Aug. 10, 2022 and submitted Aug. 15, 2022, 9:42 p.m.

Information

Owner

david

Repository

Review Board

Branch

release-5.0.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This change updates the API tokens config page for most of the
features supported by the new API token generator:

Long API tokens are displayed nicely, inside an <input> element with
a copy button.
A label shows when each token was last used.
Tokens which are expired or invalidated will show when that happened,
and in the case of invalidation, will show the message.
Tokens with an expiration date will show the time left.

There's still some future work left to do in later changes:

Allow people to set the expiration date.
Show a warning when a token was created with a deprecated generator
class.

Based on work by Michelle Aubin at /r/12492/

Testing Done


Ran unit tests.
Ran js-tests.
Set up a bunch of different API tokens with various expiration dates

  and validity settings. Checked that everything displayed correctly.
Checked that the copy button functioned as expected.

Commits

Summary	ID
Update the API Tokens UI for new token format and status. This change updates the API tokens config page for most of the features supported by the new API token generator: - Long API tokens are displayed nicely, inside an `<input>` element with a copy button. - A label shows when each token was last used. - Tokens which are expired or invalidated will show when that happened, and in the case of invalidation, will show the message. - Tokens with an expiration date will show the time left. There's still some future work left to do in later changes: - Allow people to set the expiration date. - Show a warning when a token was created with a deprecated generator class. Based on work by Michelle Aubin at /r/12492/ Testing Done: - Ran unit tests. - Ran js-tests. - Set up a bunch of different API tokens with various expiration dates and validity settings. Checked that everything displayed correctly. - Checked that the copy button functioned as expected.	737831d73541319b9f4b973c71106f6a6dae78c1

Summary

Update the API Tokens UI for new token format and status.

This change updates the API tokens config page for most of the features supported by the new API token generator: - Long API tokens are displayed nicely, inside an `<input>` element with a copy button. - A label shows when each token was last used. - Tokens which are expired or invalidated will show when that happened, and in the case of invalidation, will show the message. - Tokens with an expiration date will show the time left. There's still some future work left to do in later changes: - Allow people to set the expiration date. - Show a warning when a token was created with a deprecated generator class. Based on work by Michelle Aubin at /r/12492/ Testing Done: - Ran unit tests. - Ran js-tests. - Set up a bunch of different API tokens with various expiration dates and validity settings. Checked that everything displayed correctly. - Checked that the copy button functioned as expected.

737831d73541319b9f4b973c71106f6a6dae78c1

Files

Issues

Description	From	Last Updated
I feel like the borders add so much visual noise. Can we maybe hide then until hovering over a row?	chipx86	Aug. 15, 2022, 9:08 a.m.
Can we document these?	chipx86	Aug. 15, 2022, 9:05 a.m.
"Copy to clipboard" should be localized.	chipx86	Aug. 15, 2022, 8:31 a.m.
"Expired <...>" should be localized. Same for other strings in this template.	chipx86	Aug. 15, 2022, 8:31 a.m.

flake8 passed.

JSHint passed.

Just some polishing stuff. None of these have to block this for beta 2, but I'd want to get them in after.

Tokens UI (Revision 1)

The issue has been resolved. Show all issues

I feel like the borders add so much visual noise. Can we maybe hide then until hovering over a row?

chipx86 Aug. 15, 2022, 1 p.m.

Can I see a new screenshot with this change?

reviewboard/static/rb/css/pages/my-account.less (Diff revision 1)
The issue has been resolved. Show all issues
```
Can we document these?
```

reviewboard/static/rb/js/accountPrefsPage/views/apiTokensView.es6.js (Diff revision 1)

The issue has been dropped. Show all issues

"Copy to clipboard" should be localized.

david Aug. 15, 2022, 9:09 a.m.

Because there's a whole bunch of text content, I just marked the entire template for localization.

chipx86 Aug. 15, 2022, 1 p.m.

I don't think that's the right way to go. We should be separating out the content from the structure here, and there are clear areas of separation between them. But given beta 2 deadline, fine for now.

reviewboard/static/rb/js/accountPrefsPage/views/apiTokensView.es6.js (Diff revision 1)
The issue has been dropped. Show all issues
```
"Expired <...>" should be localized.
Same for other strings in this template.
```

Commits:

	Summary	ID
	Update the API Tokens UI for new token format and status. This change updates the API tokens config page for most of the features supported by the new API token generator: - Long API tokens are displayed nicely, inside an `<input>` element with a copy button. - A label shows when each token was last used. - Tokens which are expired or invalidated will show when that happened, and in the case of invalidation, will show the message. - Tokens with an expiration date will show the time left. There's still some future work left to do in later changes: - Allow people to set the expiration date. - Show a warning when a token was created with a deprecated generator class. Based on work by Michelle Aubin at /r/12492/ Testing Done: - Ran unit tests. - Ran js-tests. - Set up a bunch of different API tokens with various expiration dates and validity settings. Checked that everything displayed correctly. - Checked that the copy button functioned as expected.	16a423222d2f22830fe8af41f3cc15ca2c29d8dc
	Update the API Tokens UI for new token format and status. This change updates the API tokens config page for most of the features supported by the new API token generator: - Long API tokens are displayed nicely, inside an `<input>` element with a copy button. - A label shows when each token was last used. - Tokens which are expired or invalidated will show when that happened, and in the case of invalidation, will show the message. - Tokens with an expiration date will show the time left. There's still some future work left to do in later changes: - Allow people to set the expiration date. - Show a warning when a token was created with a deprecated generator class. Based on work by Michelle Aubin at /r/12492/ Testing Done: - Ran unit tests. - Ran js-tests. - Set up a bunch of different API tokens with various expiration dates and validity settings. Checked that everything displayed correctly. - Checked that the copy button functioned as expected.	737831d73541319b9f4b973c71106f6a6dae78c1

Diff:

Revision 2 (+364 -40)

Show changes

	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/pages/my-account.less
	reviewboard/static/rb/js/accountPrefsPage/views/apiTokensView.es6.js
	reviewboard/static/rb/js/resources/models/apiTokenModel.es6.js
	reviewboard/templates/notifications/password_changed.html
	reviewboard/webapi/admin.py
	reviewboard/webapi/resources/api_token.py

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Added Files:

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-5.0.x (4c2c09f)