Summary

Modernize the UI for managing extensions.

Review Request #11044 — Created June 17, 2020 and submitted July 6, 2020, 8:32 p.m.

Information

Owner

chipx86

Repository

Djblets

Branch

release-2.0.x

Bugs

Depends On

Blocks

11045

Reviewers

Groups

djblets

People

Description

The new extension list presents each item as a row with three columns.
The first column contains all the extension metadata (summary, version,
author, description, load errors). The second column contains the status
(Enabled, Disabled, Error). The third column contains a vertical list of
actions that can be performed (Enable/Disable/Reload, Configure,
Database).

Above the list of extensions is a list of actions. This will always show
a "Reload Extensions" (replacement for "Scan for installed extensions").
If settings.DJBLETS_EXTENSIONS_BROWSE_URL is set, this will also
include a "More Extensions" button that navigates to that page. In the
process, the old template block for adding this sort of action has been
removed.

This new layout reduces the visual noise of the old layout, and makes it
easier to see and manage the states of all extensions.

The old template assumed it would be shown in the administration UI,
with standard Django administratino UI conventions. We still have a
template for that, but the meat of the new UI is in a reusable "parts"
template that can be embedded into any page.

Testing Done

Tested extensions in all possible states.

Tested the More Extensions and Reload Extensions buttons.

JavaScript and Python unit tests passed.

Commits

Summary	ID
Modernize the UI for managing extensions. This is a complete design refresh for the extension UI. It makes use of the config forms CSS components to provide a list of extensions that's more in line with the look and feel of the integrations list, amongst other bits of UI we're assembling, and presents information on the extensions in a much clearer way than the old UI. The new extension list presents each item as a row with three columns. The first column contains all the extension metadata (summary, version, author, description, load errors). The second column contains the status (Enabled, Disabled, Error). The third column contains a vertical list of actions that can be performed (Enable/Disable/Reload, Configure, Database). Above the list of extensions is a list of actions. This will always show a "Reload Extensions" (replacement for "Scan for installed extensions"). If `settings.DJBLETS_EXTENSIONS_BROWSE_URL` is set, this will also include a "More Extensions" button that navigates to that page. In the process, the old template block for adding this sort of action has been removed. This new layout reduces the visual noise of the old layout, and makes it easier to see and manage the states of all extensions. The old template assumed it would be shown in the administration UI, with standard Django administratino UI conventions. We still have a template for that, but the meat of the new UI is in a reusable "parts" template that can be embedded into any page.	a0e88e651301c856f187d8f0bb7217568b80b6a4

Summary

Modernize the UI for managing extensions.

This is a complete design refresh for the extension UI. It makes use of the config forms CSS components to provide a list of extensions that's more in line with the look and feel of the integrations list, amongst other bits of UI we're assembling, and presents information on the extensions in a much clearer way than the old UI. The new extension list presents each item as a row with three columns. The first column contains all the extension metadata (summary, version, author, description, load errors). The second column contains the status (Enabled, Disabled, Error). The third column contains a vertical list of actions that can be performed (Enable/Disable/Reload, Configure, Database). Above the list of extensions is a list of actions. This will always show a "Reload Extensions" (replacement for "Scan for installed extensions"). If `settings.DJBLETS_EXTENSIONS_BROWSE_URL` is set, this will also include a "More Extensions" button that navigates to that page. In the process, the old template block for adding this sort of action has been removed. This new layout reduces the visual noise of the old layout, and makes it easier to see and manage the states of all extensions. The old template assumed it would be shown in the administration UI, with standard Django administratino UI conventions. We still have a template for that, but the meat of the new UI is in a reusable "parts" template that can be embedded into any page.

a0e88e651301c856f187d8f0bb7217568b80b6a4

Files

Issues

Description	From	Last Updated
The spec isn't clear, but I don't think it's supposed to allow returning multiple values through either resolve or reject. …	david	June 30, 2020, 3:45 a.m.
Same here re: multiple values and errorRsp.	david	June 30, 2020, 3:45 a.m.

flake8 passed.

JSHint passed.

djblets/static/djblets/js/extensions/models/extensionManagerModel.es6.js (Diff revision 1)

The issue has been resolved. Show all issues

The spec isn't clear, but I don't think it's supposed to allow returning multiple values through either resolve or reject. If we want to have multiple values, I think they need to be wrapped in an array and can be destructured on the other end.

I also can't find where errorRsp comes from. Was that supposed to be errorPayload (which RB.apiCall creates)?

chipx86 June 29, 2020, 10:09 p.m.

errorRsp is set in InstalledExtension.sync(). So it's just locally-defined. We can't depend on RB.apiCall(), since this is in Djblets.
Fixing up the reject bit.

djblets/static/djblets/js/extensions/models/extensionManagerModel.es6.js (Diff revision 1)
The issue has been resolved. Show all issues
```
Same here re: multiple values and errorRsp.
```

Change Summary:

Fixed several issues around extension load error handling.

Commits:

	Summary	ID
	Modernize the UI for managing extensions. This is a complete design refresh for the extension UI. It makes use of the config forms CSS components to provide a list of extensions that's more in line with the look and feel of the integrations list, amongst other bits of UI we're assembling, and presents information on the extensions in a much clearer way than the old UI. The new extension list presents each item as a row with three columns. The first column contains all the extension metadata (summary, version, author, description, load errors). The second column contains the status (Enabled, Disabled, Error). The third column contains a vertical list of actions that can be performed (Enable/Disable/Reload, Configure, Database). Above the list of extensions is a list of actions. This will always show a "Reload Extensions" (replacement for "Scan for installed extensions"). If `settings.DJBLETS_EXTENSIONS_BROWSE_URL` is set, this will also include a "More Extensions" button that navigates to that page. In the process, the old template block for adding this sort of action has been removed. This new layout reduces the visual noise of the old layout, and makes it easier to see and manage the states of all extensions. The old template assumed it would be shown in the administration UI, with standard Django administratino UI conventions. We still have a template for that, but the meat of the new UI is in a reusable "parts" template that can be embedded into any page.	41aabc6fbd95bf292a8dc4d5856954838f75528b
	Modernize the UI for managing extensions. This is a complete design refresh for the extension UI. It makes use of the config forms CSS components to provide a list of extensions that's more in line with the look and feel of the integrations list, amongst other bits of UI we're assembling, and presents information on the extensions in a much clearer way than the old UI. The new extension list presents each item as a row with three columns. The first column contains all the extension metadata (summary, version, author, description, load errors). The second column contains the status (Enabled, Disabled, Error). The third column contains a vertical list of actions that can be performed (Enable/Disable/Reload, Configure, Database). Above the list of extensions is a list of actions. This will always show a "Reload Extensions" (replacement for "Scan for installed extensions"). If `settings.DJBLETS_EXTENSIONS_BROWSE_URL` is set, this will also include a "More Extensions" button that navigates to that page. In the process, the old template block for adding this sort of action has been removed. This new layout reduces the visual noise of the old layout, and makes it easier to see and manage the states of all extensions. The old template assumed it would be shown in the administration UI, with standard Django administratino UI conventions. We still have a template for that, but the meat of the new UI is in a reusable "parts" template that can be embedded into any page.	a0e88e651301c856f187d8f0bb7217568b80b6a4

Diff:

Revision 2 (+900 -634)

Show changes

	djblets/extensions/resources.py
	djblets/extensions/views.py
	djblets/extensions/templates/extensions/configure_extension.html
	djblets/extensions/templates/extensions/admin/configure_extension.html
	djblets/extensions/templates/extensions/extension_list.html
	djblets/extensions/templates/extensions/parts/extension_list.html
	djblets/static/djblets/css/extensions.less
	djblets/static/djblets/js/extensions/models/extensionManagerModel.es6.js
	1 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to master (8596daa)