DEV: Update linting (#22)

* drop jQ

* qunit-dom

* convert the button to gjs

* use the store

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

.eslintrc

@@ -1,8 +0,0 @@
-{
-  "extends": "eslint-config-discourse",
-  "ignorePatterns": ["javascripts/vendor/*"],
-  "globals": {
-    "settings": "readonly",
-    "themePrefix": "readonly"
-  }
-}

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.prettierrc

@@ -1 +0,0 @@
-{}

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

.template-lintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  plugins: ["ember-template-lint-plugin-discourse"],
-  extends: "discourse:recommended",
-};

javascripts/discourse/components/user-card-directory-toggle.gjs

@@ -0,0 +1,32 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+
+export default class UserCardDirectoryToggle extends Component {
+  @service router;
+
+  get showingCards() {
+    const { cards } = this.router.currentRoute.queryParams;
+
+    return (
+      cards === "yes" ||
+      (cards === undefined && settings.default_view === "cards")
+    );
+  }
+
+  @action
+  toggleCards() {
+    const newValue = this.showingCards ? "no" : "yes";
+    this.router.transitionTo({ queryParams: { cards: newValue } });
+  }
+
+  <template>
+    <DButton
+      @action={{this.toggleCards}}
+      @icon={{if this.showingCards "th-list" "id-card"}}
+      @title={{themePrefix (if this.showingCards "show_table" "show_cards")}}
+      class="btn-default open-edit-columns-btn toggle-cards-button"
+    />
+  </template>
+}

javascripts/discourse/components/user-card-directory-toggle.hbs

@@ -1,6 +0,0 @@
-{{d-button
-  icon=(if showingCards "th-list" "id-card")
-  action=(action "toggleCards")
-  title=(theme-prefix (if showingCards "show_table" "show_cards"))
-  class="btn-default open-edit-columns-btn toggle-cards-button"
-}}

javascripts/discourse/components/user-card-directory-toggle.js

@@ -1,23 +0,0 @@
-import Component from "@ember/component";
-import { inject as service } from "@ember/service";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default Component.extend({
-  router: service("router"),
-  tagName: "",
-
-  @discourseComputed("router.currentRoute.queryParams.cards")
-  showingCards(cardsParam) {
-    return (
-      cardsParam === "yes" ||
-      (cardsParam === undefined && settings.default_view === "cards")
-    );
-  },
-
-  actions: {
-    toggleCards() {
-      const newValue = this.showingCards ? "no" : "yes";
-      this.router.transitionTo({ queryParams: { cards: newValue } });
-    },
-  },
-});

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

@@ -1,12 +1,14 @@
-import UserCardContents from "discourse/components/user-card-contents";
 import { action } from "@ember/object";
+import UserCardContents from "discourse/components/user-card-contents";
 
 export default UserCardContents.extend({
   layoutName: "components/user-card-contents",
   elementId: null,
   // Overriding functions which cause the user card to show/hide based on mouse/keyboard events:
   cleanUp() {},
+  // eslint-disable-next-line ember/require-super-in-lifecycle-hooks
   didInsertElement() {},
+  // eslint-disable-next-line ember/require-super-in-lifecycle-hooks
   willDestroyElement() {},
   keyUp() {},
 

javascripts/discourse/initializers/user-card-directory.js

@@ -1,9 +1,8 @@
-import { withPluginApi } from "discourse/lib/plugin-api";
-import discourseComputed from "discourse-common/utils/decorators";
-import User from "discourse/models/user";
 import EmberObject, { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
+import { withPluginApi } from "discourse/lib/plugin-api";
 import DiscourseURL, { userPath } from "discourse/lib/url";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default {
   name: "user-card-directory",
@@ -67,7 +66,7 @@ export default {
 
             const userCardInfo = (this.cachedUserCardInfo[u.id] =
               EmberObject.create({
-                user: User.create(u.user),
+                user: this.store.createRecord("user", u.user),
                 directoryItem: u,
                 loading: true,
               }));

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

@@ -1,4 +1,5 @@
-{{#d-section pageClass="users"}}
+{{body-class "users-page"}}
+<section>
   {{#load-more
     selector=".user-card-directory .user-card-container"
     action=(action "loadMore")
@@ -32,7 +33,7 @@
             </label>
             <Input
               @value={{readonly emailInput}}
-              placeholder={{I18n "directory.filter_name"}}
+              placeholder={{i18n "directory.filter_name"}}
               class="filter-name no-blur"
               {{on
                 "input"
@@ -126,4 +127,4 @@
       </div>
     </div>
   {{/load-more}}
-{{/d-section}}
+</section>

package.json

@@ -1,10 +1,9 @@
 {
-  "name": "discourse-user-card-directory",
-  "version": "1.0.0",
-  "repository": "https://github.com/discourse/discourse-user-card-directory",
-  "author": "Discourse",
-  "license": "MIT",
+  "private": true,
   "devDependencies": {
-    "eslint-config-discourse": "^3.2.0"
+    "@discourse/lint-configs": "^1.3.7",
+    "ember-template-lint": "^5.13.0",
+    "eslint": "^8.56.0",
+    "prettier": "^2.8.8"
   }
 }

test/acceptance/users-test.js

@@ -1,6 +1,6 @@
-import { acceptance, count } from "discourse/tests/helpers/qunit-helpers";
-import { test } from "qunit";
 import { click, visit } from "@ember/test-helpers";
+import { test } from "qunit";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 
 acceptance("User Card Directory", function (needs) {
   needs.pretender((server, helper) => {
@@ -132,33 +132,31 @@ 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 .directory-table__row"),
-      2,
-      "has a list of users"
-    );
+    assert.dom(document.body).hasClass(/users-page/);
+    assert
+      .dom(".directory .directory-table__row")
+      .exists({ count: 2 }, "has a list of users");
   });
 
   test("Displays cards when cards=yes", async function (assert) {
     await visit("/u?cards=yes");
-    assert.equal(count(".user-card-avatar"), 2, "has two cards showing");
+    assert
+      .dom(".user-card-avatar")
+      .exists({ count: 2 }, "has two cards showing");
   });
 
   test("Can toggle between views", async function (assert) {
     await visit("/u?cards=no");
-    assert.equal(
-      count(".directory .directory-table__row"),
-      2,
-      "has two table rows"
-    );
+    assert
+      .dom(".directory .directory-table__row")
+      .exists({ count: 2 }, "has two table rows");
+
     await click(".toggle-cards-button");
-    assert.equal(count(".user-card-avatar"), 2, "has two cards");
+    assert.dom(".user-card-avatar").exists({ count: 2 }, "has two cards");
+
     await click(".toggle-cards-button");
-    assert.equal(
-      count(".directory .directory-table__row"),
-      2,
-      "has two table rows"
-    );
+    assert
+      .dom(".directory .directory-table__row")
+      .exists({ count: 2 }, "has two table rows");
   });
 });