UX: improve UI of software update page & display more info. #214
Conversation
This PR will refresh the software update page so that self-hosters can more easily understand the plugins they have installed and which plugins need updates, and so that they are able to quickly and easily update them (or update everything).
There was a problem hiding this comment.
This is looking really great so far 👌
I wonder if we could add a general system spec for this update system? Even if to start with for this PR we made an extremely basic one that navigated us to this page and confirmed the top Discourse row of the update list has the expected version and details. A spec that actually tests the update process itself and also plugin details would be amazing, but it could be quite tricky 🤔
I think we could probably link these commit hashes to their relevant repos too -- just keep them the same grey text style though
| <h3>{{i18n "admin.docker.update_title"}}</h3> | ||
| {{#unless this.outdated}} | ||
| <button | ||
| disabled={{this.upgradeAllButtonDisabled}} |
There was a problem hiding this comment.
We should definitely be changing the code variables and functions from upgrade to update as well, otherwise it is confusing
| @@ -1,62 +1,72 @@ | |||
| <tr> | |||
| <tr class="repo {{if @repo.hasNewVersion 'new-version'}}"> | |||
There was a problem hiding this comment.
Can you please convert this component to a .gjs component while you are at it?
| /> | ||
| </div> | ||
| <DButton | ||
| @action={{this.upgrade}} |
There was a problem hiding this comment.
Another note that all of this upgrade wording in the code and CSS should be changed to update.
| return this.plugin.nameTitleized; | ||
| } | ||
|
|
||
| let name = this.name |
There was a problem hiding this comment.
I'm just wondering why you need this other stuff? Everything on this page is either Discourse or a plugin isn't it?
| get author() { | ||
| if (this.plugin) { | ||
| return this.plugin.author; | ||
| } else if (this.name === "docker_manager") { |
There was a problem hiding this comment.
This is unnecessary -- docker_manager is an official plugin owned by us, so it should do this by default with this.plugin.author:
| <div class="updates-heading"> | ||
| <h3>{{i18n "admin.docker.update_title"}}</h3> | ||
| {{#unless this.outdated}} | ||
| <button |
There was a problem hiding this comment.
Why not use DButton for this? This one has currently got slightly different styling to the Update buttons in the list
| @@ -21,6 +21,13 @@ def repos | |||
| official: Plugin::Metadata::OFFICIAL_PLUGINS.include?(r.name), | |||
| } | |||
|
|
|||
| plugin = Discourse.visible_plugins.find { |p| p.path == "#{r.path}/plugin.rb" } | |||
There was a problem hiding this comment.
Need to be careful with this...the page errors completely on the client if you give it a wrong path:
There was a problem hiding this comment.
Or maybe this is an existing problem -- either way we should account for this.
This PR will refresh the software update page so that self-hosters can more easily understand the plugins they have installed and which plugins need updates, and so that they are able to quickly and easily update them (or update everything).
Before
After