From 654a42171a696891d90804c6f77e120742f3d3de Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 11 Jul 2024 14:36:50 +0200
Subject: [PATCH] DEV: migrates themes-list-item to gjs (#27870)

---
 .../addon/components/themes-list-item.gjs     | 168 ++++++++++++++++++
 .../addon/components/themes-list-item.hbs     |  73 --------
 .../addon/components/themes-list-item.js      |  72 --------
 .../admin/addon/components/themes-list.hbs    |   2 +-
 4 files changed, 169 insertions(+), 146 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/components/themes-list-item.gjs
 delete mode 100644 app/assets/javascripts/admin/addon/components/themes-list-item.hbs
 delete mode 100644 app/assets/javascripts/admin/addon/components/themes-list-item.js

diff --git a/app/assets/javascripts/admin/addon/components/themes-list-item.gjs b/app/assets/javascripts/admin/addon/components/themes-list-item.gjs
new file mode 100644
index 00000000000..eca7738d754
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/themes-list-item.gjs
@@ -0,0 +1,168 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+import escape from "discourse-common/lib/escape";
+import { iconHTML } from "discourse-common/lib/icon-library";
+
+const MAX_COMPONENTS = 4;
+
+export default class ThemesListItem extends Component {
+  @tracked childrenExpanded = false;
+
+  get displayHasMore() {
+    return this.args.theme?.get("childThemes.length") > MAX_COMPONENTS;
+  }
+
+  get displayComponents() {
+    return this.hasComponents && this.args.theme?.isActive;
+  }
+
+  get hasComponents() {
+    return this.children.length > 0;
+  }
+
+  @action
+  handleClick(event) {
+    if (!event.target.classList.contains("others-count")) {
+      this.args.navigateToTheme();
+    }
+  }
+
+  get children() {
+    let children = this.args.theme?.get("childThemes.[]");
+    if (this.args.theme?.get("component") || !children) {
+      return [];
+    }
+    children = this.childrenExpanded
+      ? children
+      : children.slice(0, MAX_COMPONENTS);
+    return children.map((t) => {
+      const name = escape(t.name);
+      return t.enabled ? name : `${iconHTML("ban")} ${name}`;
+    });
+  }
+
+  get childrenString() {
+    return this.children.join(", ");
+  }
+
+  get moreCount() {
+    const childrenCount = this.args.theme?.get("childThemes.length");
+    if (
+      this.args.theme?.get("component") ||
+      !childrenCount ||
+      this.childrenExpanded
+    ) {
+      return 0;
+    }
+    return childrenCount - MAX_COMPONENTS;
+  }
+
+  @action
+  toggleChildrenExpanded(event) {
+    event?.preventDefault();
+    this.childrenExpanded = !this.childrenExpanded;
+  }
+
+  <template>
+    {{! template-lint-disable no-nested-interactive }}
+    <div
+      class={{concatClass
+        "themes-list-container__item"
+        (if @theme.selected "selected")
+      }}
+      role="button"
+      {{on "click" this.handleClick}}
+      ...attributes
+    >
+      <div class="inner-wrapper">
+        <span>
+          <PluginOutlet
+            @name="admin-customize-themes-list-item"
+            @connectorTagName="span"
+            @outletArgs={{hash theme=@theme}}
+          />
+        </span>
+
+        <div class="info">
+          {{#if @selectInactiveMode}}
+            <Input
+              @checked={{@theme.markedToDelete}}
+              id={{@theme.id}}
+              @type="checkbox"
+            />
+          {{/if}}
+          <span class="name">
+            {{@theme.name}}
+          </span>
+
+          <span class="icons">
+            {{#if @theme.selected}}
+              {{icon "caret-right"}}
+            {{else}}
+              {{#if @theme.default}}
+                {{icon
+                  "check"
+                  class="default-indicator"
+                  title="admin.customize.theme.default_theme_tooltip"
+                }}
+              {{/if}}
+              {{#if @theme.isPendingUpdates}}
+                {{icon
+                  "sync"
+                  title="admin.customize.theme.updates_available_tooltip"
+                  class="light-grey-icon"
+                }}
+              {{/if}}
+              {{#if @theme.isBroken}}
+                {{icon
+                  "exclamation-circle"
+                  class="broken-indicator"
+                  title="admin.customize.theme.broken_theme_tooltip"
+                }}
+              {{/if}}
+              {{#unless @theme.enabled}}
+                {{icon
+                  "ban"
+                  class="light-grey-icon"
+                  title="admin.customize.theme.disabled_component_tooltip"
+                }}
+              {{/unless}}
+            {{/if}}
+          </span>
+        </div>
+
+        {{#if this.displayComponents}}
+          <div class="components-list">
+            <span class="components">{{htmlSafe this.childrenString}}</span>
+
+            {{#if this.displayHasMore}}
+              <a
+                href
+                {{on "click" this.toggleChildrenExpanded}}
+                class="others-count"
+              >
+                {{#if this.childrenExpanded}}
+                  {{i18n "admin.customize.theme.collapse"}}
+                {{else}}
+                  {{i18n
+                    "admin.customize.theme.and_x_more"
+                    count=this.moreCount
+                  }}
+                {{/if}}
+              </a>
+            {{/if}}
+          </div>
+        {{/if}}
+      </div>
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/themes-list-item.hbs b/app/assets/javascripts/admin/addon/components/themes-list-item.hbs
deleted file mode 100644
index 82bb11b066e..00000000000
--- a/app/assets/javascripts/admin/addon/components/themes-list-item.hbs
+++ /dev/null
@@ -1,73 +0,0 @@
-<div class="inner-wrapper">
-  <span>
-    <PluginOutlet
-      @name="admin-customize-themes-list-item"
-      @connectorTagName="span"
-      @outletArgs={{hash theme=this.theme}}
-    />
-  </span>
-
-  <div class="info">
-    {{#if @selectInactiveMode}}
-      <Input
-        @checked={{this.theme.markedToDelete}}
-        id={{this.theme.id}}
-        @type="checkbox"
-      />
-    {{/if}}
-    <span class="name">
-      {{this.theme.name}}
-    </span>
-
-    <span class="icons">
-      {{#if this.theme.selected}}
-        {{d-icon "caret-right"}}
-      {{else}}
-        {{#if this.theme.default}}
-          {{d-icon
-            "check"
-            class="default-indicator"
-            title="admin.customize.theme.default_theme_tooltip"
-          }}
-        {{/if}}
-        {{#if this.theme.isPendingUpdates}}
-          {{d-icon
-            "sync"
-            title="admin.customize.theme.updates_available_tooltip"
-            class="light-grey-icon"
-          }}
-        {{/if}}
-        {{#if this.theme.isBroken}}
-          {{d-icon
-            "exclamation-circle"
-            class="broken-indicator"
-            title="admin.customize.theme.broken_theme_tooltip"
-          }}
-        {{/if}}
-        {{#unless this.theme.enabled}}
-          {{d-icon
-            "ban"
-            class="light-grey-icon"
-            title="admin.customize.theme.disabled_component_tooltip"
-          }}
-        {{/unless}}
-      {{/if}}
-    </span>
-  </div>
-
-  {{#if this.displayComponents}}
-    <div class="components-list">
-      <span class="components">{{html-safe this.childrenString}}</span>
-
-      {{#if this.displayHasMore}}
-        <a href {{on "click" this.toggleChildrenExpanded}} class="others-count">
-          {{#if this.childrenExpanded}}
-            {{i18n "admin.customize.theme.collapse"}}
-          {{else}}
-            {{i18n "admin.customize.theme.and_x_more" count=this.moreCount}}
-          {{/if}}
-        </a>
-      {{/if}}
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/themes-list-item.js b/app/assets/javascripts/admin/addon/components/themes-list-item.js
deleted file mode 100644
index 3630d3a27de..00000000000
--- a/app/assets/javascripts/admin/addon/components/themes-list-item.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { and, gt } from "@ember/object/computed";
-import { classNameBindings, classNames } from "@ember-decorators/component";
-import escape from "discourse-common/lib/escape";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import discourseComputed from "discourse-common/utils/decorators";
-
-const MAX_COMPONENTS = 4;
-
-@classNames("themes-list-container__item")
-@classNameBindings("theme.selected:selected")
-export default class ThemesListItem extends Component {
-  childrenExpanded = false;
-
-  @gt("children.length", 0) hasComponents;
-
-  @and("hasComponents", "theme.isActive") displayComponents;
-
-  @gt("theme.childThemes.length", MAX_COMPONENTS) displayHasMore;
-
-  click(e) {
-    if (!e.target.classList.contains("others-count")) {
-      this.navigateToTheme();
-    }
-  }
-
-  @discourseComputed(
-    "theme.component",
-    "theme.childThemes.@each.name",
-    "theme.childThemes.length",
-    "childrenExpanded"
-  )
-  children() {
-    const theme = this.theme;
-    let children = theme.get("childThemes");
-    if (theme.get("component") || !children) {
-      return [];
-    }
-    children = this.childrenExpanded
-      ? children
-      : children.slice(0, MAX_COMPONENTS);
-    return children.map((t) => {
-      const name = escape(t.name);
-      return t.enabled ? name : `${iconHTML("ban")} ${name}`;
-    });
-  }
-
-  @discourseComputed("children")
-  childrenString(children) {
-    return children.join(", ");
-  }
-
-  @discourseComputed(
-    "theme.childThemes.length",
-    "theme.component",
-    "childrenExpanded",
-    "children.length"
-  )
-  moreCount(childrenCount, component, expanded) {
-    if (component || !childrenCount || expanded) {
-      return 0;
-    }
-    return childrenCount - MAX_COMPONENTS;
-  }
-
-  @action
-  toggleChildrenExpanded(event) {
-    event?.preventDefault();
-    this.toggleProperty("childrenExpanded");
-  }
-}
diff --git a/app/assets/javascripts/admin/addon/components/themes-list.hbs b/app/assets/javascripts/admin/addon/components/themes-list.hbs
index 51d33899c58..4792658a8ec 100644
--- a/app/assets/javascripts/admin/addon/components/themes-list.hbs
+++ b/app/assets/javascripts/admin/addon/components/themes-list.hbs
@@ -114,7 +114,7 @@
     {{#if (and this.hasInactiveThemes (not this.activeFilter))}}
       {{#each this.inactiveThemes as |theme|}}
         <ThemesListItem
-          @classNames="inactive-theme"
+          class="inactive-theme"
           @theme={{theme}}
           @navigateToTheme={{fn this.navigateToTheme theme}}
           @selectInactiveMode={{this.selectInactiveMode}}