DEV: Convert `edit-user-directory-columns` modal to component-based API (#23250)

app/assets/javascripts/discourse/app/components/modal/edit-user-directory-columns.hbs

@@ -0,0 +1,65 @@
+<DModal
+  @closeModal={{@closeModal}}
+  @title={{i18n "directory.edit_columns.title"}}
+  class="edit-user-directory-columns-modal"
+  @flash={{this.flash}}
+>
+  <:body>
+    {{#if this.loading}}
+      {{loading-spinner size="large"}}
+    {{else}}
+      <div class="edit-directory-columns-container">
+        {{#each this.columns as |column|}}
+          <div class="edit-directory-column">
+            <div class="left-content">
+              <label class="column-name">
+                <Input @type="checkbox" @checked={{column.enabled}} />
+                {{#if (directory-column-is-automatic column=column)}}
+                  {{directory-table-header-title
+                    field=column.name
+                    labelKey=this.labelKey
+                    icon=column.icon
+                  }}
+                {{else if (directory-column-is-user-field column=column)}}
+                  {{directory-table-header-title
+                    field=column.user_field.name
+                    translated=true
+                  }}
+                {{else}}
+                  {{directory-table-header-title
+                    field=(i18n column.name)
+                    translated=true
+                  }}
+                {{/if}}
+              </label>
+            </div>
+            <div class="right-content">
+              <DButton
+                @icon="arrow-up"
+                @class="button-secondary move-column-up"
+                @action={{fn this.moveUp column}}
+              />
+              <DButton
+                @icon="arrow-down"
+                @class="button-secondary"
+                @action={{fn this.moveDown column}}
+              />
+            </div>
+          </div>
+        {{/each}}
+      </div>
+    {{/if}}
+  </:body>
+  <:footer>
+    <DButton
+      class="btn-primary"
+      @label="directory.edit_columns.save"
+      @action={{this.save}}
+    />
+    <DButton
+      class="btn-secondary reset-to-default"
+      @label="directory.edit_columns.reset_to_default"
+      @action={{this.resetToDefault}}
+    />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/edit-user-directory-columns.js

@@ -0,0 +1,106 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { ajax } from "discourse/lib/ajax";
+import { extractError, popupAjaxError } from "discourse/lib/ajax-error";
+import { reload } from "discourse/helpers/page-reloader";
+
+const UP = "up";
+const DOWN = "down";
+
+export default class EditUserDirectoryColumns extends Component {
+  @tracked loading = true;
+  @tracked columns;
+  @tracked labelKey;
+  @tracked flash;
+
+  constructor() {
+    super(...arguments);
+    this.setupColumns();
+  }
+
+  @action
+  async setupColumns() {
+    try {
+      const response = await ajax("edit-directory-columns.json");
+      this.loading = false;
+      this.columns = response.directory_columns
+        .sort((a, b) => (a.position > b.position ? 1 : -1))
+        .map((c) => ({ ...c, enabled: Boolean(c.enabled) }));
+    } catch {
+      popupAjaxError;
+    }
+  }
+
+  @action
+  async save() {
+    this.loading = true;
+    this.flash = null;
+    const data = {
+      directory_columns: this.columns.map((c) => ({
+        id: c.id,
+        enabled: c.enabled,
+        position: c.position,
+      })),
+    };
+
+    try {
+      await ajax("edit-directory-columns.json", { type: "PUT", data });
+      reload();
+    } catch (e) {
+      this.loading = false;
+      this.flash = extractError(e);
+    }
+  }
+
+  @action
+  resetToDefault() {
+    const resetColumns = this.columns
+      .sort((a, b) => {
+        const a1 = a.automatic_position || (a.user_field?.position || 0) + 1000;
+        const b1 = b.automatic_position || (b.user_field?.position || 0) + 1000;
+
+        if (a1 === b1) {
+          return a.name.localeCompare(b.name);
+        } else {
+          return a1 > b1 ? 1 : -1;
+        }
+      })
+      .map((column, index) => ({
+        ...column,
+        position: column.automatic_position || index + 1,
+        enabled: column.type === "automatic",
+      }));
+
+    this.columns = resetColumns;
+  }
+
+  @action
+  moveUp(column) {
+    this._moveColumn(UP, column);
+  }
+
+  @action
+  moveDown(column) {
+    this._moveColumn(DOWN, column);
+  }
+
+  _moveColumn(direction, column) {
+    if (
+      (direction === UP && column.position === 1) ||
+      (direction === DOWN && column.position === this.columns.length)
+    ) {
+      return;
+    }
+
+    const positionOnClick = column.position;
+    const newPosition =
+      direction === UP ? positionOnClick - 1 : positionOnClick + 1;
+    const previousColumn = this.columns.find((c) => c.position === newPosition);
+    column.position = newPosition;
+    previousColumn.position = positionOnClick;
+    this.columns = this.columns.sort((a, b) =>
+      a.position > b.position ? 1 : -1
+    );
+  }
+}

app/assets/javascripts/discourse/app/controllers/edit-user-directory-columns.js

@@ -1,105 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { ajax } from "discourse/lib/ajax";
-import EmberObject, { action } from "@ember/object";
-import { extractError, popupAjaxError } from "discourse/lib/ajax-error";
-import { reload } from "discourse/helpers/page-reloader";
-
-const UP = "up";
-const DOWN = "down";
-
-export default Controller.extend(ModalFunctionality, {
-  loading: true,
-  columns: null,
-  labelKey: null,
-
-  onShow() {
-    ajax("edit-directory-columns.json")
-      .then((response) => {
-        this.setProperties({
-          loading: false,
-          columns: response.directory_columns
-            .sort((a, b) => (a.position > b.position ? 1 : -1))
-            .map((c) => EmberObject.create(c)),
-        });
-      })
-      .catch(popupAjaxError);
-  },
-
-  @action
-  save() {
-    this.set("loading", true);
-    const data = {
-      directory_columns: this.columns.map((c) =>
-        c.getProperties("id", "enabled", "position")
-      ),
-    };
-
-    ajax("edit-directory-columns.json", { type: "PUT", data })
-      .then(() => {
-        reload();
-      })
-      .catch((e) => {
-        this.set("loading", false);
-        this.flash(extractError(e), "error");
-      });
-  },
-
-  @action
-  resetToDefault() {
-    let resetColumns = this.columns;
-    resetColumns
-      .sort((a, b) => {
-        const a1 = a.automatic_position || (a.user_field?.position || 0) + 1000;
-        const b1 = b.automatic_position || (b.user_field?.position || 0) + 1000;
-
-        if (a1 === b1) {
-          return a.name.localeCompare(b.name);
-        } else {
-          return a1 > b1 ? 1 : -1;
-        }
-      })
-      .forEach((column, index) => {
-        column.setProperties({
-          position: column.automatic_position || index + 1,
-          enabled: column.type === "automatic",
-        });
-      });
-    this.set("columns", resetColumns);
-    this.notifyPropertyChange("columns");
-  },
-
-  @action
-  moveUp(column) {
-    this._moveColumn(UP, column);
-  },
-
-  @action
-  moveDown(column) {
-    this._moveColumn(DOWN, column);
-  },
-
-  _moveColumn(direction, column) {
-    if (
-      (direction === UP && column.position === 1) ||
-      (direction === DOWN && column.position === this.columns.length)
-    ) {
-      return;
-    }
-
-    const positionOnClick = column.position;
-    const newPosition =
-      direction === UP ? positionOnClick - 1 : positionOnClick + 1;
-
-    const previousColumn = this.columns.find((c) => c.position === newPosition);
-
-    column.set("position", newPosition);
-    previousColumn.set("position", positionOnClick);
-
-    this.set(
-      "columns",
-      this.columns.sort((a, b) => (a.position > b.position ? 1 : -1))
-    );
-    this.notifyPropertyChange("columns");
-  },
-});

app/assets/javascripts/discourse/app/controllers/users.js

@@ -2,11 +2,13 @@ import Controller from "@ember/controller";
 import Group from "discourse/models/group";
 import { action } from "@ember/object";
 import discourseDebounce from "discourse-common/lib/debounce";
-import showModal from "discourse/lib/show-modal";
 import { and, equal } from "@ember/object/computed";
 import { longDate } from "discourse/lib/formatter";
+import { inject as service } from "@ember/service";
+import EditUserDirectoryColumnsModal from "discourse/components/modal/edit-user-directory-columns";
 
 export default Controller.extend({
+  modal: service(),
   queryParams: [
     "period",
     "order",
@@ -97,7 +99,7 @@ export default Controller.extend({
 
   @action
   showEditColumnsModal() {
-    showModal("edit-user-directory-columns");
+    this.modal.show(EditUserDirectoryColumnsModal);
   },
 
   @action

app/assets/javascripts/discourse/app/services/modal.js

@@ -20,7 +20,6 @@ const KNOWN_LEGACY_MODALS = [
   "create-invite-bulk",
   "create-invite",
   "edit-topic-timer",
-  "edit-user-directory-columns",
   "explain-reviewable",
   "feature-topic-on-profile",
   "feature-topic",

app/assets/javascripts/discourse/app/templates/modal/edit-user-directory-columns.hbs

@@ -1,60 +0,0 @@
-<DModalBody @title="directory.edit_columns.title">
-  {{#if this.loading}}
-    {{loading-spinner size="large"}}
-  {{else}}
-    <div class="edit-directory-columns-container">
-      {{#each this.columns as |column|}}
-        <div class="edit-directory-column">
-          <div class="left-content">
-            <label class="column-name">
-              <Input @type="checkbox" @checked={{column.enabled}} />
-              {{#if (directory-column-is-automatic column=column)}}
-                {{directory-table-header-title
-                  field=column.name
-                  labelKey=this.labelKey
-                  icon=column.icon
-                }}
-              {{else if (directory-column-is-user-field column=column)}}
-                {{directory-table-header-title
-                  field=column.user_field.name
-                  translated=true
-                }}
-              {{else}}
-                {{directory-table-header-title
-                  field=(i18n column.name)
-                  translated=true
-                }}
-              {{/if}}
-            </label>
-          </div>
-          <div class="right-content">
-            <DButton
-              @icon="arrow-up"
-              @class="button-secondary move-column-up"
-              @action={{action "moveUp" column}}
-            />
-            <DButton
-              @icon="arrow-down"
-              @class="button-secondary"
-              @action={{action "moveDown" column}}
-            />
-          </div>
-        </div>
-      {{/each}}
-    </div>
-  {{/if}}
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @class="btn-primary"
-    @label="directory.edit_columns.save"
-    @action={{action "save"}}
-  />
-
-  <DButton
-    @class="btn-secondary reset-to-default"
-    @label="directory.edit_columns.reset_to_default"
-    @action={{action "resetToDefault"}}
-  />
-</div>