From 06cc8dba9deec3b3d8ac825d27a8316a4230aedb Mon Sep 17 00:00:00 2001
From: "Ella E." <ella.estigoy@gmail.com>
Date: Tue, 22 Oct 2024 16:45:36 -0600
Subject: [PATCH] UX: Adjust table to be responsive on mobile (#244)

* UX: Apply core admin table classes to be visually responsive; styling tweaks

* DEV: update spec to use new classes

* fix failing tests
---
 .../discourse/components/repo-status.gjs      |  57 ++++---
 .../discourse/templates/update-index.hbs      |   6 +-
 assets/stylesheets/common/docker-manager.scss | 139 ++++++++----------
 spec/system/admin_update_spec.rb              |   8 +-
 .../components/repo-status-test.js            |   6 +-
 5 files changed, 114 insertions(+), 102 deletions(-)

diff --git a/admin/assets/javascripts/discourse/components/repo-status.gjs b/admin/assets/javascripts/discourse/components/repo-status.gjs
index b364d01..53c94fc 100644
--- a/admin/assets/javascripts/discourse/components/repo-status.gjs
+++ b/admin/assets/javascripts/discourse/components/repo-status.gjs
@@ -45,18 +45,20 @@ export default class RepoStatus extends Component {
   }
 
   <template>
-    <tr class="repo {{if @repo.hasNewVersion 'new-version'}}">
-      <td>
-        <div class="repo__name">
+    <tr
+      class="d-admin-row__content repo {{if @repo.hasNewVersion 'has-update'}}"
+    >
+      <td class="d-admin-row__overview">
+        <div class="d-admin-row__overview-name">
           {{@repo.nameTitleized}}
         </div>
         {{#if @repo.author}}
-          <div class="repo__author">
+          <div class="d-admin-row__overview-author">
             {{@repo.author}}
           </div>
         {{/if}}
         {{#if @repo.plugin}}
-          <div class="repo__about">
+          <div class="d-admin-row__overview-about">
             {{@repo.plugin.about}}
             {{#if @repo.linkUrl}}
               <a
@@ -77,36 +79,57 @@ export default class RepoStatus extends Component {
         {{/if}}
       </td>
 
-      <td>
+      <td class="d-admin-row__detail">
+        <div class="d-admin-row__mobile-label">
+          {{i18n "admin.docker.repo.commit_hash"}}
+        </div>
         {{CommitUrl "current" @repo.version @repo.prettyVersion @repo.url}}
       </td>
 
-      <td>{{FormatDate @repo.latest.date leaveAgo="true"}}</td>
-      <td>
-        <ul class="repo__latest-version">
-          <li>
+      <td class="d-admin-row__detail">
+        <div class="d-admin-row__mobile-label">
+          {{i18n "admin.docker.repo.last_updated"}}
+        </div>
+        {{FormatDate @repo.latest.date leaveAgo="true"}}
+      </td>
+
+      <td class="d-admin-row__detail">
+        <div class="d-admin-row__mobile-label">
+          {{i18n "admin.docker.repo.latest_version"}}
+        </div>
+        <div class="repo__latest-version">
+          <div>
             {{CommitUrl
               "new"
               @repo.latest.version
               @repo.prettyLatestVersion
               @repo.url
             }}
-          </li>
-          <li class="new-commits">
+          </div>
+          <div class="new-commits">
             {{NewCommits
               @repo.latest.commits_behind
               @repo.version
               @repo.latest.version
               @repo.url
             }}
-          </li>
-        </ul>
+          </div>
+        </div>
       </td>
-      <td class="repo__status">
+
+      <td class="d-admin-row__control">
         {{#if @repo.checkingStatus}}
-          {{i18n "admin.docker.checking"}}
+          <div class="status-label --loading">
+            {{i18n "admin.docker.checking"}}
+          </div>
         {{else if @repo.upToDate}}
-          {{i18n "admin.docker.up_to_date"}}
+          <div role="status" class="status-label --success">
+            <div class="status-label-indicator">
+            </div>
+            <div class="status-label-text">
+              {{i18n "admin.docker.up_to_date"}}
+            </div>
+          </div>
         {{else}}
           <DButton
             @action={{this.upgrade}}
diff --git a/admin/assets/javascripts/discourse/templates/update-index.hbs b/admin/assets/javascripts/discourse/templates/update-index.hbs
index 30d14ea..f922b8e 100644
--- a/admin/assets/javascripts/discourse/templates/update-index.hbs
+++ b/admin/assets/javascripts/discourse/templates/update-index.hbs
@@ -36,13 +36,13 @@
   </p>
 {{else}}
 
-  <table class="table admin-repos" id="repos">
+  <table class="d-admin-table" id="repos">
     <thead>
-      <th style="width: 40%">{{i18n "admin.docker.repo.name"}}</th>
+      <th>{{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>
+      <th>{{i18n "admin.docker.repo.status"}}</th>
     </thead>
     <tbody>
       {{#each this.model as |repo|}}
diff --git a/assets/stylesheets/common/docker-manager.scss b/assets/stylesheets/common/docker-manager.scss
index 8785e37..bb0fe90 100644
--- a/assets/stylesheets/common/docker-manager.scss
+++ b/assets/stylesheets/common/docker-manager.scss
@@ -33,48 +33,14 @@
     white-space: pre;
   }
 
-  .check-circle {
-    color: var(--success);
-  }
-
-  table#repos {
-    margin-top: 1rem;
-
-    td:first-child {
-      width: 3%;
-      padding-left: 8px;
-    }
-
-    th {
-      border-top: none;
-    }
-
-    button {
-      padding-left: 15%;
-      padding-right: 15%;
-    }
-  }
-
-  .new-version {
-    h4 {
-      font-size: 1rem;
-      font-weight: bold;
-      margin: 0 0 1rem 0;
-    }
-
-    ul {
-      list-style: none;
-      margin: 0 0 1rem 0;
-      padding: 0;
-    }
-
-    li.new-commits {
-      font-style: italic;
-    }
+  .repo__new-version {
+    font-size: var(--font-down-1);
+    font-weight: bold;
+    margin: var(--space-1) 0 var(--space-1) 0;
   }
 
   .commit-hash {
-    color: #959595;
+    color: var(--primary);
   }
 
   .upgrade-actions {
@@ -144,46 +110,71 @@
     }
   }
 
-  .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;
-  }
-
-  ul.repo__latest-version {
-    list-style: none;
-    margin: 0;
+  .d-admin-table {
+    margin-bottom: var(--space-6);
   }
 
   tr.repo {
-    td {
-      padding: 1em 0;
-    }
+    td:first-child {
+      width: 45%;
 
-    &.new-version {
-      background-color: var(--tertiary-very-low);
-
-      td:first-child {
-        border-left: solid 3px var(--tertiary);
+      @include breakpoint("tablet") {
+        width: auto;
       }
     }
 
-    td.repo__status {
-      text-align: right;
-      padding-right: 0.5em;
+    td:last-child {
+      width: 12%; // set width to minimize layout shift
+
+      @include breakpoint("tablet") {
+        width: auto;
+      }
+    }
+
+    &.has-update {
+      background-color: var(--tertiary-very-low);
+      border-left: solid 3px var(--tertiary);
+    }
+
+    .repo__latest-version {
+      @include breakpoint("tablet") {
+        text-align: right;
+      }
+    }
+  }
+
+  .status-label {
+    --d-border-radius: 0.75rem;
+    --success-low: #f5fff5;
+
+    display: flex;
+    flex-wrap: nowrap;
+    width: fit-content;
+
+    &.--loading {
+      color: var(--primary-medium);
+    }
+
+    &.--success {
+      background-color: var(--success-low);
+      padding: var(--space-1) var(--space-2);
+      border-radius: var(--d-border-radius);
+
+      .status-label-indicator {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: var(--success);
+        flex-shrink: 0;
+        margin-right: var(--space-1);
+        margin-top: 0.4rem;
+      }
+
+      .status-label-text {
+        color: var(--success);
+        font-size: var(--font-down-1);
+      }
     }
   }
 
@@ -197,8 +188,4 @@
       margin-bottom: 0;
     }
   }
-
-  .admin-repos th:last-child {
-    text-align: center;
-  }
 }
diff --git a/spec/system/admin_update_spec.rb b/spec/system/admin_update_spec.rb
index add7e07..2b759dd 100644
--- a/spec/system/admin_update_spec.rb
+++ b/spec/system/admin_update_spec.rb
@@ -12,9 +12,11 @@ RSpec.describe "Admin update", type: :system do
     visit("/admin/update")
 
     expect(page).to have_css("h3", exact_text: I18n.t("js.admin.docker.update_title"))
-    expect(page).to have_css("tr.repo .repo__name", exact_text: "Discourse")
-    expect(page).to have_css("tr.repo .repo__name", exact_text: "Docker Manager")
-    expect(page).to have_css("tr.repo .repo__about a[href='https://meta.discourse.org/t/12655']")
+    expect(page).to have_css("tr.repo .d-admin-row__overview-name", exact_text: "Discourse")
+    expect(page).to have_css("tr.repo .d-admin-row__overview-name", exact_text: "Docker Manager")
+    expect(page).to have_css(
+      "tr.repo .d-admin-row__overview-about a[href='https://meta.discourse.org/t/12655']",
+    )
   ensure
     puts page.html if ENV["CI"]
   end
diff --git a/test/javascripts/integration/components/repo-status-test.js b/test/javascripts/integration/components/repo-status-test.js
index edc03cd..c4e957a 100644
--- a/test/javascripts/integration/components/repo-status-test.js
+++ b/test/javascripts/integration/components/repo-status-test.js
@@ -63,10 +63,10 @@ module("Integration | Component | RepoStatus", function (hooks) {
       .hasText("v2.2.0.beta6 +101", "tag version is used when present");
 
     assert
-      .dom("li.new-commits a")
+      .dom("div.new-commits a")
       .hasText("3 new commits", "shows number of new commits");
     assert.strictEqual(
-      query("li.new-commits a").href.trim(),
+      query("div.new-commits a").href.trim(),
       "https://github.com/discourse/discourse/compare/8f65e4f...2b006c0",
       "links to GitHub diff page"
     );
@@ -98,7 +98,7 @@ module("Integration | Component | RepoStatus", function (hooks) {
     );
 
     assert.strictEqual(
-      query("div.repo__author").textContent.trim(),
+      query("div.d-admin-row__overview-author").textContent.trim(),
       "By Discourse",
       "shows plugin author"
     );