UX: improve UI of software update page & display more info.

admin/assets/javascripts/discourse/components/docker-manager/repo-status.hbs

@@ -1,62 +1,72 @@
-<tr>
+<tr class="repo {{if @repo.hasNewVersion 'new-version'}}">
   <td>
-    {{#if this.officialRepoBadge}}
-      {{d-icon
-        this.officialRepoBadge
-        translatedTitle=this.officialRepoBadgeTitle
-        class="check-circle"
-      }}
+    <div class="repo__name">
+      {{#if @repo.linkUrl}}
+        <a href={{@repo.linkUrl}} rel="noopener noreferrer" target="_blank">
+          {{@repo.nameTitleized}}
+        </a>
+      {{else}}
+        {{@repo.nameTitleized}}
+      {{/if}}
+    </div>
+    {{#if @repo.author}}
+      <div class="repo__author">
+        {{@repo.author}}
+      </div>
+    {{/if}}
+    {{#if @repo.plugin}}
+      <div class="repo__about">
+        {{@repo.plugin.about}}
+        {{#if @repo.linkUrl}}
+          <a href={{@repo.linkUrl}} rel="noopener noreferrer" target="_blank">
+            {{i18n "admin.plugins.learn_more"}}
+          </a>
+        {{/if}}
+      </div>
+    {{/if}}
+    {{#if @repo.hasNewVersion}}
+      <div class="repo__new-version">
+        {{i18n "admin.docker.new_version_available"}}
+      </div>
     {{/if}}
   </td>
 
   <td>
-    <a href={{@repo.url}}>{{@repo.name}}</a>
     <span class="current commit-hash" title={{@repo.version}}>
       {{@repo.prettyVersion}}
     </span>
   </td>
 
+  <td>{{format-date @repo.latest.date leaveAgo="true"}}</td>
   <td>
+    <ul class="repo__latest-version">
+      <li>
+        <span class="new commit-hash" title={{@repo.latestVersion}}>
+          {{@repo.prettyLatestVersion}}
+        </span>
+      </li>
+      <li class="new-commits">
+        {{new-commits
+          @repo.latest.commits_behind
+          @repo.version
+          @repo.latest.version
+          @repo.url
+        }}
+      </li>
+    </ul>
+  </td>
+  <td class="repo__status">
     {{#if @repo.checkingStatus}}
       {{i18n "admin.docker.checking"}}
     {{else if @repo.upToDate}}
       {{i18n "admin.docker.up_to_date"}}
     {{else}}
-      <div class="new-version">
-        <h4>{{i18n "admin.docker.new_version_available"}}</h4>
-
-        <ul>
-          <li>
-            {{i18n "admin.docker.latest_version"}}
-            <span class="new commit-hash" title={{@repo.latestVersion}}>
-              {{@repo.prettyLatestVersion}}
-            </span>
-          </li>
-          <li>
-            {{i18n "admin.docker.last_updated"}}
-            {{#if @repo.latest.date}}
-              {{format-date @repo.latest.date}}
-            {{else}}
-              &mdash;
-            {{/if}}
-          </li>
-          <li class="new-commits">
-            {{new-commits
-              @repo.latest.commits_behind
-              @repo.version
-              @repo.latest.version
-              @repo.url
-            }}
-          </li>
-        </ul>
-
-        <DButton
-          @action={{this.upgrade}}
-          @disabled={{this.upgradeDisabled}}
-          @translatedLabel={{this.upgradeButtonLabel}}
-          class="upgrade-button"
-        />
-      </div>
+      <DButton
+        @action={{this.upgrade}}
+        @disabled={{this.upgradeDisabled}}
+        @translatedLabel={{this.upgradeButtonLabel}}
+        class="upgrade-button"
+      />
     {{/if}}
   </td>
 </tr>

admin/assets/javascripts/discourse/models/repo.js

@@ -1,6 +1,9 @@
-import { tracked } from "@glimmer/tracking";
+import { cached, tracked } from "@glimmer/tracking";
+import { capitalize } from "@ember/string";
 import { TrackedObject } from "@ember-compat/tracked-built-ins";
 import { ajax } from "discourse/lib/ajax";
+import I18n from "discourse-i18n";
+import AdminPlugin from "admin/models/admin-plugin";
 
 let loaded = [];
 export let needsImageUpgrade = false;
@@ -74,6 +77,7 @@ export default class Repo {
   @tracked checking = false;
   @tracked lastCheckedAt = null;
   @tracked latest = new TrackedObject({});
+  @tracked plugin = null;
 
   // model attributes
   @tracked name = null;
@@ -94,15 +98,59 @@ export default class Repo {
       }
     }
 
+    if (attributes.plugin) {
+      this.plugin = AdminPlugin.create(attributes.plugin);
+    }
+
     for (const [key, value] of Object.entries(attributes)) {
-      if (key === "latest") {
+      if (["latest", "plugin"].includes(key)) {
         continue;
       }
 
       this[key] = value;
     }
   }
 
+  @cached
+  get nameTitleized() {
+    if (this.plugin) {
+      return this.plugin.nameTitleized;
+    }
+
+    let name = this.name
+      .split(/[-_]/)
+      .map((word) => {
+        return capitalize(word);
+      })
+      .join(" ");
+
+    // Cuts down on repetition.
+    const discoursePrefix = "Discourse ";
+    if (name.startsWith(discoursePrefix)) {
+      name = name.slice(discoursePrefix.length);
+    }
+
+    return name;
+  }
+
+  get linkUrl() {
+    if (this.plugin) {
+      return this.plugin.linkUrl;
+    }
+
+    return this.url;
+  }
+
+  get author() {
+    if (this.plugin) {
+      return this.plugin.author;
+    } else if (this.name === "docker_manager") {
+      return I18n.t("admin.plugins.author", { author: "Discourse" });
+    }
+
+    return null;
+  }
+
   get checkingStatus() {
     return this.unloaded || this.checking;
   }
@@ -111,6 +159,10 @@ export default class Repo {
     return !this.upgrading && this.version === this.latest?.version;
   }
 
+  get hasNewVersion() {
+    return !this.checkingStatus && !this.upToDate;
+  }
+
   get prettyVersion() {
     return this.pretty_version || this.version?.substring(0, 8);
   }

admin/assets/javascripts/discourse/templates/update-index.hbs

@@ -1,4 +1,21 @@
-<h1>{{i18n "admin.docker.update_title"}}</h1>
+<div class="updates-heading">
+  <h3>{{i18n "admin.docker.update_title"}}</h3>
+  {{#unless this.outdated}}
+    <button
+      disabled={{this.upgradeAllButtonDisabled}}
+      id="upgrade-all"
+      class="btn btn-primary"
+      type="button"
+      {{on "click" this.upgradeAllButton}}
+    >
+      {{#if this.allUpToDate}}
+        {{i18n "admin.docker.all_up_to_date"}}
+      {{else}}
+        {{i18n "admin.docker.update_all"}}
+      {{/if}}
+    </button>
+  {{/unless}}
+</div>
 
 {{#if this.outdated}}
   <h2>{{i18n "admin.docker.outdated_image_header"}}</h2>
@@ -18,25 +35,14 @@
     </a>
   </p>
 {{else}}
-  <button
-    disabled={{this.upgradeAllButtonDisabled}}
-    id="upgrade-all"
-    class="btn"
-    type="button"
-    {{on "click" this.upgradeAllButton}}
-  >
-    {{#if this.allUpToDate}}
-      {{i18n "admin.docker.all_up_to_date"}}
-    {{else}}
-      {{i18n "admin.docker.update_all"}}
-    {{/if}}
-  </button>
 
-  <table class="table" id="repos">
+  <table class="table admin-repos" id="repos">
     <thead>
-      <th></th>
-      <th style="width: 50%">{{i18n "admin.docker.repository"}}</th>
-      <th>{{i18n "admin.docker.status"}}</th>
+      <th style="width: 40%">{{i18n "admin.docker.repo.name"}}</th>
+      <th>{{i18n "admin.docker.repo.commit_hash"}}</th>
+      <th>{{i18n "admin.docker.repo.last_updated"}}</th>
+      <th>{{i18n "admin.docker.repo.latest_version"}}</th>
+      <th align="center">{{i18n "admin.docker.repo.status"}}</th>
     </thead>
     <tbody>
       {{#each this.model as |repo|}}

app/controllers/docker_manager/admin_controller.rb

@@ -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" }
+        result[:plugin] = AdminPluginSerializer.new(
+          plugin,
+          scope: guardian,
+          root: false,
+        ) if plugin.present?
+
         result[:fork] = true if result[:official] &&
           !r.url.starts_with?("https://github.com/discourse/")
 

assets/stylesheets/common/docker-manager.scss

@@ -92,10 +92,6 @@
     }
   }
 
-  #upgrade-all {
-    float: right;
-  }
-
   #banner {
     margin: 1rem 0;
 
@@ -147,4 +143,67 @@
       }
     }
   }
+
+  .repo__name {
+    font-weight: bold;
+  }
+
+  .repo__author {
+    font-size: var(--font-down-2);
+    padding: 0 0 0.25em 0;
+  }
+
+  .repo__new-version {
+    font-size: var(--font-down-1);
+    font-weight: bold;
+    padding: 0.25em 0 0 0;
+  }
+
+  .repo__about {
+    padding: 0.25em 0 0.25em 0;
+
+    a {
+      color: var(--primary-700);
+      text-decoration: underline;
+    }
+  }
+
+  ul.repo__latest-version {
+    list-style: none;
+    margin: 0;
+  }
+
+  tr.repo {
+    td {
+      padding: 1em 0;
+    }
+
+    &.new-version {
+      background-color: var(--tertiary-very-low);
+
+      td:first-child {
+        border-left: solid 3px var(--tertiary);
+      }
+    }
+
+    td.repo__status {
+      text-align: right;
+      padding-right: 0.5em;
+    }
+  }
+
+  .updates-heading {
+    display: flex;
+    justify-content: space-between;
+    margin: 2em 0;
+
+    h3 {
+      line-height: 40px;
+      margin-bottom: 0;
+    }
+  }
+
+  .admin-repos th:last-child {
+    text-align: center;
+  }
 }

config/locales/client.en.yml

@@ -36,8 +36,14 @@ en:
         update_repo: "Update %{name}"
         update_successful: "Update completed successfully!"
         update_tab: "Update Discourse"
-        update_title: "Update Discourse"
+        update_title: "Updates"
         updating: "Updating…"
+        repo:
+          name: "Name"
+          commit_hash: "Commit Hash"
+          last_updated: "Last Updated"
+          latest_version: "Latest Version"
+          status: "Status"
 
       logs:
         staff_actions: