UX: Change from legacy d-admin-table CSS to d-table classes (#305)

c.f. discourse/discourse#38048

Author: martin-brennan

admin/assets/javascripts/discourse/components/repo-status.gjs

@@ -44,22 +44,20 @@ export default class RepoStatus extends Component {
   }
 
   <template>
-    <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">
+    <tr class="d-table__row repo {{if @repo.hasNewVersion 'has-update'}}">
+      <td class="d-table__cell --overview">
+        <div class="d-table__overview-name">
           {{@repo.nameTitleized}}
         </div>
 
         {{#if @repo.author}}
-          <div class="d-admin-row__overview-author">
+          <div class="d-table__overview-author">
             {{@repo.author}}
           </div>
         {{/if}}
 
         {{#if @repo.plugin}}
-          <div class="d-admin-row__overview-about">
+          <div class="d-table__overview-about">
             {{@repo.plugin.about}}
 
             {{#if @repo.linkUrl}}
@@ -82,22 +80,22 @@ export default class RepoStatus extends Component {
         {{/if}}
       </td>
 
-      <td class="d-admin-row__detail">
-        <div class="d-admin-row__mobile-label">
+      <td class="d-table__cell --detail">
+        <div class="d-table__mobile-label">
           {{i18n "admin.docker.repo.commit_hash"}}
         </div>
         {{commitUrl "current" @repo.version @repo.prettyVersion @repo.url}}
       </td>
 
-      <td class="d-admin-row__detail">
-        <div class="d-admin-row__mobile-label">
+      <td class="d-table__cell --detail">
+        <div class="d-table__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">
+      <td class="d-table__cell --detail">
+        <div class="d-table__mobile-label">
           {{i18n "admin.docker.repo.latest_version"}}
         </div>
         <div class="repo__latest-version">
@@ -120,7 +118,7 @@ export default class RepoStatus extends Component {
         </div>
       </td>
 
-      <td class="d-admin-row__controls">
+      <td class="d-table__cell --controls">
         {{#if @repo.checkingStatus}}
           <div class="status-label --loading">
             {{i18n "admin.docker.checking"}}

admin/assets/javascripts/discourse/templates/update/index.gjs

@@ -42,8 +42,8 @@ export default RouteTemplate(
       </p>
     {{else}}
 
-      <table class="d-admin-table" id="repos">
-        <thead>
+      <table class="d-table" id="repos">
+        <thead class="d-table__header">
           <th>{{i18n "admin.docker.repo.name"}}</th>
           <th>{{i18n "admin.docker.repo.commit_hash"}}</th>
           <th>{{i18n "admin.docker.repo.last_updated"}}</th>

assets/stylesheets/common/docker-manager.scss

@@ -110,20 +110,20 @@
     }
   }
 
-  .d-admin-table {
+  .d-table {
     margin-bottom: var(--space-6);
   }
 
-  .d-admin-row__content.repo {
-    .d-admin-row__overview {
+  .d-table__row.repo {
+    .d-table__cell.--overview {
       width: 45%;
 
       @include breakpoint("tablet") {
         width: auto;
       }
     }
 
-    .d-admin-row__controls {
+    .d-table__cell.--controls {
       width: 12%; // set width to minimize layout shift
       text-align: left;
 

spec/system/admin_update_spec.rb

@@ -12,10 +12,10 @@
     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 .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-table__overview-name", exact_text: "Discourse")
+    expect(page).to have_css("tr.repo .d-table__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']",
+      "tr.repo .d-table__overview-about a[href='https://meta.discourse.org/t/12655']",
     )
   ensure
     puts page.html if ENV["CI"]

test/javascripts/integration/components/repo-status-test.gjs

@@ -104,7 +104,7 @@ module("Integration | Component | RepoStatus", function (hooks) {
     );
 
     assert
-      .dom("div.d-admin-row__overview-author")
+      .dom("div.d-table__overview-author")
       .hasText("By Discourse", "shows plugin author");
   });