UX: Move revoked API key status to dedicated column (#30125)

* DEV: add table heading for status

* UX: Move revoked status to its own column with a badge; remove revoked icon

* UX: Increase text contrast for revoked rows

app/assets/javascripts/admin/addon/templates/api-keys-index.hbs

@@ -14,13 +14,13 @@
         <th>{{i18n "admin.api.user"}}</th>
         <th>{{i18n "admin.api.created"}}</th>
         <th>{{i18n "admin.api.last_used"}}</th>
+        <th>{{i18n "admin.site_settings.table_column_heading.status"}}</th>
         <th>&nbsp;</th>
       </thead>
       <tbody>
         {{#each this.model as |k|}}
           <tr class="d-admin-row__content {{if k.revoked_at 'revoked'}}">
             <td class="d-admin-row__overview key">
-              {{#if k.revoked_at}}{{d-icon "circle-xmark"}}{{/if}}
               {{k.truncatedKey}}
             </td>
             <td class="d-admin-row__detail key-description">
@@ -57,6 +57,20 @@
                 {{i18n "admin.api.never_used"}}
               {{/if}}
             </td>
+            <td class="d-admin-row__detail">
+              <div class="d-admin-row__mobile-label">{{i18n
+                  "admin.site_settings.table_column_heading.status"
+                }}</div>
+              {{#if k.revoked_at}}
+                <div role="status" class="status-label">
+                  <div class="status-label-indicator">
+                  </div>
+                  <div class="status-label-text">
+                    {{i18n "admin.api.revoked"}}
+                  </div>
+                </div>
+              {{/if}}
+            </td>
             <td class="d-admin-row__controls key-controls">
               <DButton
                 @action={{route-action "show" k}}

app/assets/stylesheets/common/admin/admin_table.scss

@@ -66,6 +66,33 @@
       }
     }
   }
+
+  .status-label {
+    --d-border-radius: var(--space-4);
+
+    display: flex;
+    flex-wrap: nowrap;
+    width: fit-content;
+    background-color: var(--primary-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(--primary-high);
+      flex-shrink: 0;
+      margin-right: var(--space-1);
+      margin-top: 0.4rem;
+    }
+
+    .status-label-text {
+      color: var(--primary-high);
+      font-size: var(--font-down-1);
+    }
+  }
 }
 
 .d-admin-row__overview {

app/assets/stylesheets/common/admin/api.scss

@@ -45,15 +45,15 @@ table.web-hooks.grid {
 
 // Api keys
 
-table.api-keys {
+.d-admin-table.api-keys {
   margin-bottom: 0.25em;
 
   tr.revoked {
-    color: var(--primary-medium);
+    color: var(--primary-high);
   }
 
   .d-admin-row__overview.key {
-    width: 30%;
+    width: 20%;
   }
 }
 

config/locales/client.en.yml

@@ -7095,6 +7095,8 @@ en:
             title: "Upload images"
         selectable_avatars:
           title: "List of avatars users can choose from"
+        table_column_heading:
+          status: "Status" 
         categories:
           all_results: "All"
           required: "Required"