DEV: fix tests, remove deprecation, fix for slider (#16)

common/common.scss

@@ -67,28 +67,50 @@
   }
 
   .user-card-directory-footer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
+    padding: 0.75em;
     background-color: var(--secondary);
-    padding: 0px 10px 10px 10px;
-    display: flex;
-    flex-wrap: wrap;
+    gap: 0.25em;
+    border-top: 1px solid var(--primary-low);
+
+    .directory-table__column-header,
+    .directory-table__cell,
+    .directory-table__cell--empty,
+    .directory-table__cell--user-field {
+      border: none;
+    }
 
     .stat {
-      flex-basis: 0;
-      flex-grow: 1;
-
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin: 2px;
+      gap: 0.1em;
+      border: none;
 
       .label {
-        font-size: $font-down-2;
-
+        font-size: var(--font-down-2);
         .d-icon {
           margin-right: 0.2em;
           color: var(--primary-medium);
         }
       }
+
+      &.stat-type-user_field {
+        // long user fields can break the layout
+        // so we truncate these to one line
+        .value {
+          display: flex;
+          overflow: hidden;
+          justify-content: center;
+          width: 100%;
+          min-width: 0;
+          span {
+            min-width: 0;
+            @include ellipsis;
+          }
+        }
+      }
     }
   }
 }

javascripts/discourse/components/user-card-static.js

@@ -1,4 +1,5 @@
 import UserCardContents from "discourse/components/user-card-contents";
+import { action } from "@ember/object";
 
 export default UserCardContents.extend({
   layoutName: "components/user-card-contents",
@@ -8,4 +9,10 @@ export default UserCardContents.extend({
   didInsertElement() {},
   willDestroyElement() {},
   keyUp() {},
+
+  // need to override this to work with the loading slider
+  @action
+  handleShowUser() {
+    return;
+  },
 });

javascripts/discourse/templates/users-as-card-directory.hbs

@@ -5,11 +5,11 @@
   }}
     <div class="container">
       <div class="users-directory directory">
-        {{plugin-outlet
-          name="users-top"
-          connectorTagName="div"
-          args=(hash model=model)
-        }}
+        <PluginOutlet
+          @name="users-top"
+          @connectorTagName="div"
+          @outletArgs={{hash model=this.model}}
+        />
         <div class="directory-controls">
           <div class="period-controls">
             {{period-chooser
@@ -30,12 +30,15 @@
                 {{i18n "directory.total_rows" count=model.totalRows}}
               {{/if}}
             </label>
-            {{input
-              value=(readonly nameInput)
-              input=(action "onUsernameFilterChanged" value="target.value")
-              placeholderKey="directory.filter_name"
+            <Input
+              @value={{readonly emailInput}}
+              placeholder={{I18n "directory.filter_name"}}
               class="filter-name no-blur"
+              {{on
+                "input"
+                (action "onUsernameFilterChanged" value="target.value")
               }}
+            />
             {{#if showGroupFilter}}
               {{combo-box
                 class="directory-group-selector"
@@ -52,12 +55,10 @@
                 class="btn-default open-edit-columns-btn"
               }}
             {{/if}}
-            {{plugin-outlet
-              name="users-directory-controls"
-              connectorTagName=""
-              tagName=""
-              args=(hash model=model)
-            }}
+            <PluginOutlet
+              @name="users-directory-controls"
+              @outletArgs={{hash model=this.model}}
+            />
           </div>
         </div>
 
@@ -76,7 +77,10 @@
                   {{#if (theme-setting "show_stats")}}
                     <div class="user-card-directory-footer">
                       {{#each columns as |column|}}
-                        <span class="stat stat-{{stat.name}}">
+                        <span
+                          class="stat stat-{{dasherize column.name}}
+                            stat-type-{{column.type}}"
+                        >
                           <span class="value">
                             {{#if
                               (directory-column-is-user-field column=column)

test/acceptance/users-test.js

@@ -133,7 +133,11 @@ acceptance("User Card Directory", function (needs) {
   test("Displays table when cards=no", async function (assert) {
     await visit("/u?cards=no");
     assert.ok($("body.users-page").length, "has the body class");
-    assert.equal(count(".directory table tr"), 2, "has a list of users");
+    assert.equal(
+      count(".directory .directory-table__row"),
+      2,
+      "has a list of users"
+    );
   });
 
   test("Displays cards when cards=yes", async function (assert) {
@@ -143,10 +147,18 @@ acceptance("User Card Directory", function (needs) {
 
   test("Can toggle between views", async function (assert) {
     await visit("/u?cards=no");
-    assert.equal(count(".directory table tr"), 2, "has two table rows");
+    assert.equal(
+      count(".directory .directory-table__row"),
+      2,
+      "has two table rows"
+    );
     await click(".toggle-cards-button");
     assert.equal(count(".user-card-avatar"), 2, "has two cards");
     await click(".toggle-cards-button");
-    assert.equal(count(".directory table tr"), 2, "has two table rows");
+    assert.equal(
+      count(".directory .directory-table__row"),
+      2,
+      "has two table rows"
+    );
   });
 });