DEV: [gjs-codemod] Convert all templates to gjs

Gemfile.lock

@@ -14,30 +14,31 @@ GEM
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
-    ast (2.4.2)
+    ast (2.4.3)
     base64 (0.2.0)
     benchmark (0.4.0)
     bigdecimal (3.1.9)
     concurrent-ruby (1.3.5)
-    connection_pool (2.5.0)
+    connection_pool (2.5.3)
-    drb (2.2.1)
+    drb (2.2.3)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.10.2)
+    json (2.12.2)
-    language_server-protocol (3.17.0.4)
+    language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
-    logger (1.6.6)
+    logger (1.7.0)
     minitest (5.25.5)
-    parallel (1.26.3)
+    parallel (1.27.0)
-    parser (3.3.7.1)
+    parser (3.3.8.0)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
+    prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.12)
+    rack (3.1.15)
     rainbow (3.1.1)
     regexp_parser (2.10.0)
-    rubocop (1.74.0)
+    rubocop (1.75.8)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -45,11 +46,12 @@ GEM
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.38.1)
+    rubocop-ast (1.44.1)
-      parser (>= 3.3.1.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
     rubocop-capybara (2.22.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
@@ -65,13 +67,13 @@ GEM
     rubocop-factory_bot (2.27.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
-    rubocop-rails (2.30.3)
+    rubocop-rails (2.32.0)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.72.1, < 2.0)
+      rubocop (>= 1.75.0, < 2.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
-    rubocop-rspec (3.5.0)
+    rubocop-rspec (3.6.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
     rubocop-rspec_rails (2.31.0)
@@ -97,4 +99,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.6
+   2.6.9

admin/assets/javascripts/discourse/connectors/admin-menu/upgrade-link.gjs

@@ -0,0 +1,13 @@
+import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
+import NavItem from "discourse/components/nav-item";
+
+@tagName("")
+@classNames("admin-menu-outlet", "upgrade-link")
+export default class UpgradeLink extends Component {
+  <template>
+    {{#if this.currentUser.admin}}
+      <NavItem @route="update" @label="admin.docker.update_tab" />
+    {{/if}}
+  </template>
+}

admin/assets/javascripts/discourse/connectors/admin-menu/upgrade-link.hbs

@@ -1,3 +0,0 @@
-{{#if this.currentUser.admin}}
-  <NavItem @route="update" @label="admin.docker.update_tab" />
-{{/if}}

admin/assets/javascripts/discourse/connectors/admin-upgrade-header/upgrade-header.gjs

@@ -0,0 +1,9 @@
+import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
+import UpgradeNotice from "../../components/docker-manager/upgrade-notice";
+
+@tagName("")
+@classNames("admin-upgrade-header-outlet", "upgrade-header")
+export default class UpgradeHeader extends Component {
+  <template><UpgradeNotice @versionCheck={{this.versionCheck}} /></template>
+}

admin/assets/javascripts/discourse/connectors/admin-upgrade-header/upgrade-header.hbs

@@ -1 +0,0 @@
-<DockerManager::UpgradeNotice @versionCheck={{this.versionCheck}} />

admin/assets/javascripts/discourse/templates/update-index.gjs

@@ -0,0 +1,65 @@
+import { on } from "@ember/modifier";
+import RouteTemplate from "ember-route-template";
+import DButton from "discourse/components/d-button";
+import { i18n } from "discourse-i18n";
+import RepoStatus from "../components/repo-status";
+
+export default RouteTemplate(
+  <template>
+    <div class="updates-heading">
+      {{#unless @controller.outdated}}
+        <DButton
+          disabled={{@controller.upgradeAllButtonDisabled}}
+          id="upgrade-all"
+          class="btn btn-primary"
+          type="button"
+          {{on "click" @controller.upgradeAllButton}}
+        >
+          {{#if @controller.allUpToDate}}
+            {{i18n "admin.docker.all_up_to_date"}}
+          {{else}}
+            {{i18n "admin.docker.update_all"}}
+          {{/if}}
+        </DButton>
+      {{/unless}}
+    </div>
+
+    {{#if @controller.outdated}}
+      <h2>{{i18n "admin.docker.outdated_image_header"}}</h2>
+      <p>{{i18n "admin.docker.outdated_image_info"}}</p>
+
+      {{!-- prettier-ignore --}}
+      <pre>
+    cd /var/discourse
+    ./launcher rebuild app
+  </pre>
+      <p>
+        <a
+          href="https://meta.discourse.org/t/how-do-i-update-my-docker-image-to-latest/23325"
+        >
+          {{i18n "admin.docker.outdated_image_link"}}
+        </a>
+      </p>
+    {{else}}
+
+      <table class="d-admin-table" id="repos">
+        <thead>
+          <th>{{i18n "admin.docker.repo.name"}}</th>
+          <th>{{i18n "admin.docker.repo.commit_hash"}}</th>
+          <th>{{i18n "admin.docker.repo.last_updated"}}</th>
+          <th>{{i18n "admin.docker.repo.latest_version"}}</th>
+          <th>{{i18n "admin.docker.repo.status"}}</th>
+        </thead>
+        <tbody>
+          {{#each @controller.model as |repo|}}
+            <RepoStatus
+              @repo={{repo}}
+              @upgradingRepo={{repo.upgrading}}
+              @managerRepo={{@controller.managerRepo}}
+            />
+          {{/each}}
+        </tbody>
+      </table>
+    {{/if}}
+  </template>
+);

admin/assets/javascripts/discourse/templates/update-index.hbs

@@ -1,55 +0,0 @@
-<div class="updates-heading">
-  {{#unless this.outdated}}
-    <DButton
-      disabled={{this.upgradeAllButtonDisabled}}
-      id="upgrade-all"
-      class="btn btn-primary"
-      type="button"
-      {{on "click" this.upgradeAllButton}}
-    >
-      {{#if this.allUpToDate}}
-        {{i18n "admin.docker.all_up_to_date"}}
-      {{else}}
-        {{i18n "admin.docker.update_all"}}
-      {{/if}}
-    </DButton>
-  {{/unless}}
-</div>
-
-{{#if this.outdated}}
-  <h2>{{i18n "admin.docker.outdated_image_header"}}</h2>
-  <p>{{i18n "admin.docker.outdated_image_info"}}</p>
-
-  {{! prettier-ignore }}
-  <pre>
-    cd /var/discourse
-    ./launcher rebuild app
-  </pre>
-  <p>
-    <a
-      href="https://meta.discourse.org/t/how-do-i-update-my-docker-image-to-latest/23325"
-    >
-      {{i18n "admin.docker.outdated_image_link"}}
-    </a>
-  </p>
-{{else}}
-
-  <table class="d-admin-table" id="repos">
-    <thead>
-      <th>{{i18n "admin.docker.repo.name"}}</th>
-      <th>{{i18n "admin.docker.repo.commit_hash"}}</th>
-      <th>{{i18n "admin.docker.repo.last_updated"}}</th>
-      <th>{{i18n "admin.docker.repo.latest_version"}}</th>
-      <th>{{i18n "admin.docker.repo.status"}}</th>
-    </thead>
-    <tbody>
-      {{#each this.model as |repo|}}
-        <RepoStatus
-          @repo={{repo}}
-          @upgradingRepo={{repo.upgrading}}
-          @managerRepo={{this.managerRepo}}
-        />
-      {{/each}}
-    </tbody>
-  </table>
-{{/if}}

admin/assets/javascripts/discourse/templates/update-processes.gjs

@@ -0,0 +1,6 @@
+import RouteTemplate from "ember-route-template";
+import Console from "../components/docker-manager/console";
+
+export default RouteTemplate(
+  <template><Console @output={{@controller.model.output}} /></template>
+);

admin/assets/javascripts/discourse/templates/update-processes.hbs

@@ -1 +0,0 @@
-<DockerManager::Console @output={{this.model.output}} />

admin/assets/javascripts/discourse/templates/update-show.gjs

@@ -0,0 +1,60 @@
+import { on } from "@ember/modifier";
+import RouteTemplate from "ember-route-template";
+import { i18n } from "discourse-i18n";
+import Console from "../components/docker-manager/console";
+import ProgressBar from "../components/docker-manager/progress-bar";
+
+export default RouteTemplate(
+  <template>
+    <h2>{{@controller.title}}</h2>
+
+    <ProgressBar @percent={{@controller.upgradeStore.progressPercentage}} />
+
+    {{#if @controller.complete}}
+      <p>{{i18n "admin.docker.update_successful"}}</p>
+    {{else if @controller.failed}}
+      <p>{{i18n "admin.docker.update_error"}}</p>
+    {{/if}}
+
+    {{#if @controller.isUpToDate}}
+      {{#if @controller.multiUpgrade}}
+        <p>{{i18n "admin.docker.everything_up_to_date"}}</p>
+      {{else}}
+        <p>{{i18n
+            "admin.docker.repo_newest_version"
+            name=@controller.model.name
+          }}</p>
+      {{/if}}
+    {{else}}
+      <div class="upgrade-actions">
+        <button
+          {{on "click" @controller.start}}
+          disabled={{@controller.upgrading}}
+          class="btn start-upgrade"
+          type="button"
+        >
+          {{#if @controller.upgrading}}
+            {{i18n "admin.docker.updating"}}
+          {{else}}
+            {{i18n "admin.docker.start_updating"}}
+          {{/if}}
+        </button>
+
+        {{#if @controller.upgrading}}
+          <button
+            {{on "click" @controller.resetUpgrade}}
+            class="btn unlock"
+            type="button"
+          >
+            {{i18n "admin.docker.reset_update"}}
+          </button>
+        {{/if}}
+      </div>
+    {{/if}}
+
+    <Console
+      @output={{@controller.upgradeStore.consoleOutput}}
+      @followOutput={{true}}
+    />
+  </template>
+);

admin/assets/javascripts/discourse/templates/update-show.hbs

@@ -1,43 +0,0 @@
-<h2>{{this.title}}</h2>
-
-<DockerManager::ProgressBar @percent={{this.upgradeStore.progressPercentage}} />
-
-{{#if this.complete}}
-  <p>{{i18n "admin.docker.update_successful"}}</p>
-{{else if this.failed}}
-  <p>{{i18n "admin.docker.update_error"}}</p>
-{{/if}}
-
-{{#if this.isUpToDate}}
-  {{#if this.multiUpgrade}}
-    <p>{{i18n "admin.docker.everything_up_to_date"}}</p>
-  {{else}}
-    <p>{{i18n "admin.docker.repo_newest_version" name=this.model.name}}</p>
-  {{/if}}
-{{else}}
-  <div class="upgrade-actions">
-    <button
-      {{on "click" this.start}}
-      disabled={{this.upgrading}}
-      class="btn start-upgrade"
-      type="button"
-    >
-      {{#if this.upgrading}}
-        {{i18n "admin.docker.updating"}}
-      {{else}}
-        {{i18n "admin.docker.start_updating"}}
-      {{/if}}
-    </button>
-
-    {{#if this.upgrading}}
-      <button {{on "click" this.resetUpgrade}} class="btn unlock" type="button">
-        {{i18n "admin.docker.reset_update"}}
-      </button>
-    {{/if}}
-  </div>
-{{/if}}
-
-<DockerManager::Console
-  @output={{this.upgradeStore.consoleOutput}}
-  @followOutput={{true}}
-/>

admin/assets/javascripts/discourse/templates/update.gjs

@@ -0,0 +1,58 @@
+import RouteTemplate from "ember-route-template";
+import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DButton from "discourse/components/d-button";
+import DPageHeader from "discourse/components/d-page-header";
+import NavItem from "discourse/components/nav-item";
+import htmlSafe from "discourse/helpers/html-safe";
+import { i18n } from "discourse-i18n";
+
+export default RouteTemplate(
+  <template>
+    <DPageHeader
+      @titleLabel={{i18n "admin.docker.update_title"}}
+      @descriptionLabel={{i18n "admin.docker.update_description"}}
+      @shouldDisplay={{true}}
+    >
+      <:breadcrumbs>
+        <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+        <DBreadcrumbsItem
+          @path="/admin/update"
+          @label={{i18n "admin.docker.update_title"}}
+        />
+      </:breadcrumbs>
+      <:tabs>
+        <NavItem
+          @route="update.index"
+          @label="admin.docker.navigation.versions"
+        />
+        <NavItem
+          @route="update.processes"
+          @label="admin.docker.navigation.processes"
+        />
+      </:tabs>
+    </DPageHeader>
+
+    <div class="docker-manager admin-container">
+      {{#if @controller.showBanner}}
+        <div id="banner">
+          <div id="banner-content">
+            <div class="floated-buttons">
+              <DButton
+                @icon="xmark"
+                @action={{@controller.dismiss}}
+                @title="banner.close"
+                class="btn btn-flat close"
+              />
+            </div>
+
+            {{#each @controller.banner as |row|}}
+              <p>{{htmlSafe row}}</p>
+            {{/each}}
+          </div>
+        </div>
+      {{/if}}
+
+      {{outlet}}
+    </div>
+  </template>
+);

admin/assets/javascripts/discourse/templates/update.hbs

@@ -1,43 +0,0 @@
-<DPageHeader
-  @titleLabel={{i18n "admin.docker.update_title"}}
-  @descriptionLabel={{i18n "admin.docker.update_description"}}
-  @shouldDisplay={{true}}
->
-  <:breadcrumbs>
-    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
-    <DBreadcrumbsItem
-      @path="/admin/update"
-      @label={{i18n "admin.docker.update_title"}}
-    />
-  </:breadcrumbs>
-  <:tabs>
-    <NavItem @route="update.index" @label="admin.docker.navigation.versions" />
-    <NavItem
-      @route="update.processes"
-      @label="admin.docker.navigation.processes"
-    />
-  </:tabs>
-</DPageHeader>
-
-<div class="docker-manager admin-container">
-  {{#if this.showBanner}}
-    <div id="banner">
-      <div id="banner-content">
-        <div class="floated-buttons">
-          <DButton
-            @icon="xmark"
-            @action={{this.dismiss}}
-            @title="banner.close"
-            class="btn btn-flat close"
-          />
-        </div>
-
-        {{#each this.banner as |row|}}
-          <p>{{html-safe row}}</p>
-        {{/each}}
-      </div>
-    </div>
-  {{/if}}
-
-  {{outlet}}
-</div>

assets/stylesheets/common/docker-manager.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .dashboard-stats .upgrades-banner {
   background: var(--tertiary-low);
   flex: 1 1 100%;
@@ -117,7 +119,7 @@
     .d-admin-row__overview {
       width: 45%;
 
-      @include breakpoint("tablet") {
+      @include viewport.until(md) {
         width: auto;
       }
     }
@@ -126,7 +128,7 @@
       width: 12%; // set width to minimize layout shift
       text-align: left;
 
-      @include breakpoint("tablet") {
+      @include viewport.until(md) {
         width: auto;
       }
     }
@@ -137,7 +139,7 @@
     }
 
     .repo__latest-version {
-      @include breakpoint("tablet") {
+      @include viewport.until(md) {
         text-align: right;
       }
     }

package.json

@@ -1,11 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.11.1",
+    "@discourse/lint-configs": "2.21.0",
-    "ember-template-lint": "7.0.1",
+    "ember-template-lint": "7.7.0",
-    "eslint": "9.22.0",
+    "eslint": "9.27.0",
     "prettier": "3.5.3",
-    "stylelint": "16.16.0"
+    "stylelint": "16.19.1"
   },
   "engines": {
     "node": ">= 22",

test/javascripts/integration/components/repo-status-test.gjs

@@ -1,8 +1,8 @@
 import { getOwner } from "@ember/owner";
 import { render, settled } from "@ember/test-helpers";
 import { setupRenderingTest } from "ember-qunit";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
+import RepoStatus from "discourse/plugins/docker_manager/admin/components/repo-status";
 
 const repoProps = {
   unloaded: false,
@@ -46,12 +46,16 @@ module("Integration | Component | RepoStatus", function (hooks) {
   setupRenderingTest(hooks);
 
   test("renders correctly", async function (assert) {
+    const self = this;
+
     const store = getOwner(this).lookup("service:store");
     this.set("repo", store.createRecord("repo", repoProps));
     this.set("managerRepo", store.createRecord("repo", managerProps));
 
     await render(
-      hbs`<RepoStatus @repo={{this.repo}} @managerRepo={{this.managerRepo}} />`
+      <template>
+        <RepoStatus @repo={{self.repo}} @managerRepo={{self.managerRepo}} />
+      </template>
     );
 
     assert
@@ -85,13 +89,17 @@ module("Integration | Component | RepoStatus", function (hooks) {
   });
 
   test("official plugin", async function (assert) {
+    const self = this;
+
     const store = getOwner(this).lookup("service:store");
     repoProps.plugin = { name: "discourse", isOfficial: true };
     this.set("repo", store.createRecord("repo", repoProps));
     this.set("managerRepo", store.createRecord("repo", managerProps));
 
     await render(
-      hbs`<RepoStatus @repo={{this.repo}} @managerRepo={{this.managerRepo}} />`
+      <template>
+        <RepoStatus @repo={{self.repo}} @managerRepo={{self.managerRepo}} />
+      </template>
     );
 
     assert
@@ -100,12 +108,16 @@ module("Integration | Component | RepoStatus", function (hooks) {
   });
 
   test("update button", async function (assert) {
+    const self = this;
+
     const store = getOwner(this).lookup("service:store");
     this.set("repo", store.createRecord("repo", repoProps));
     this.set("managerRepo", store.createRecord("repo", managerProps));
 
     await render(
-      hbs`<RepoStatus @repo={{this.repo}} @managerRepo={{this.managerRepo}} />`
+      <template>
+        <RepoStatus @repo={{self.repo}} @managerRepo={{self.managerRepo}} />
+      </template>
     );
 
     assert