Updated remote modal

assets/javascripts/discourse/components/modal/update-pages-remote.hbs

@@ -0,0 +1,64 @@
+<DModal
+  class="update-pages-remote"
+  @title={{i18n "admin.landing_pages.remote.title"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <div class="repo">
+      <div class="label">{{i18n "admin.landing_pages.remote.url"}}</div>
+      <Input @value={{buffered.url}} placeholder={{urlPlaceholder}} />
+    </div>
+
+    <div class="branch">
+      <div class="label">{{i18n "admin.customize.theme.remote_branch"}}</div>
+      <Input @value={{buffered.branch}} placeholder="main" />
+    </div>
+
+    <div class="check-private">
+      <label>
+        <Input @type="checkbox" @checked={{buffered.private}} />
+        {{i18n "admin.landing_pages.remote.private"}}
+      </label>
+    </div>
+
+    {{#if showPublicKey}}
+      <div class="public-key">
+        <div class="label">{{i18n "admin.customize.theme.public_key"}}</div>
+        <Textarea readonly={{true}} @value={{buffered.public_key}} />
+      </div>
+    {{/if}}
+  </:body>
+
+  <:footer>
+    <DButton
+      @action={{action "update"}}
+      @disabled={{updateDisabled}}
+      class="btn btn-primary"
+      @label="admin.landing_pages.remote.update"
+    />
+
+    <DButton
+      @action={{action "reset"}}
+      @disabled={{resetDisabled}}
+      class="btn btn-danger"
+      @label="admin.landing_pages.remote.reset"
+    />
+
+    <DButton
+      @action={{action "test"}}
+      @disabled={{testDisabled}}
+      class="btn btn-test"
+      @label="admin.landing_pages.remote.test"
+    />
+
+    {{#if loading}}
+      {{loading-spinner size="small"}}
+    {{else}}
+      {{#if testIcon}}
+        {{d-icon testIcon}}
+      {{/if}}
+    {{/if}}
+
+    <DModalCancel @close={{@closeModal}} />
+  </:footer>
+</DModal>

assets/javascripts/discourse/components/modal/update-pages-remote.js.es6

@@ -0,0 +1,129 @@
+import Component from "@ember/component";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { bufferedProperty } from "discourse/mixins/buffered-content";
+import { and, or } from "@ember/object/computed";
+import { action } from "@ember/object";
+
+export default Component.extend(bufferedProperty("model.remote"), {
+  keyGenUrl: "/admin/themes/generate_key_pair",
+  remoteUrl: "/landing/remote",
+  httpsPlaceholder: "https://github.com/org/repo",
+  sshPlaceholder: "git@github.com:org/repo.git",
+  showPublicKey: and("buffered.private", "buffered.public_key"),
+  testing: false,
+  updating: false,
+  resetting: false,
+  loading: or("testing", "updating", "resetting"),
+
+  @discourseComputed("tested", "loading")
+  updateDisabled(tested, loading) {
+    return tested !== "success" || loading;
+  },
+
+  @discourseComputed("buffered.connected", "loading")
+  resetDisabled(connected, loading) {
+    return !connected || loading;
+  },
+
+  @discourseComputed("buffered.url", "loading")
+  testDisabled(url, loading) {
+    return !url || loading;
+  },
+
+  @discourseComputed("buffered.private")
+  urlPlaceholder(isPrivate) {
+    return isPrivate ? this.sshPlaceholder : this.httpsPlaceholder;
+  },
+
+  @discourseComputed("tested")
+  testIcon(tested) {
+    return tested === "success" ? "check" : tested === "error" ? "times" : null;
+  },
+
+  @observes("buffered.hasChanges")
+  remoteChanged() {
+    this.set("tested", null);
+  },
+
+  @observes("buffered.private")
+  privateWasChecked() {
+    if (
+      this.buffered.get("private") &&
+      !this.buffered.get("public_key") &&
+      !this._keyLoading
+    ) {
+      this.set("_keyLoading", true);
+
+      ajax(this.keyGenUrl, { type: "POST" })
+        .then((result) => {
+          this.buffered.setProperties({
+            private_key: result.private_key,
+            public_key: result.public_key,
+          });
+        })
+        .catch(popupAjaxError)
+        .finally(() => this.set("_keyLoading", false));
+    }
+  },
+
+  buildData() {
+    this.commitBuffer();
+    const remote = this.model.remote;
+    return {
+      remote: {
+        url: remote.url,
+        branch: remote.branch,
+        ...(remote.private && { private_key: remote.private_key }),
+        ...(remote.private && { public_key: remote.public_key }),
+      },
+    };
+  },
+
+  @action
+  test() {
+    this.set("testing", true);
+
+    ajax(this.remoteUrl + "/test", {
+      type: "POST",
+      data: this.buildData(),
+    })
+      .then((result) => {
+        this.set("tested", result.success ? "success" : "error");
+      })
+      .catch(popupAjaxError)
+      .finally(() => this.set("testing", false));
+  },
+
+  @action
+  update() {
+    this.set("updating", true);
+
+    ajax(this.remoteUrl, {
+      type: "PUT",
+      data: this.buildData(),
+    })
+      .then((result) => {
+        this.closeModal(result);
+        this.set("model.remote", {});
+      })
+      .catch(popupAjaxError)
+      .finally(() => this.set("updating", false));
+  },
+
+  @action
+  reset() {
+    this.set("resetting", true);
+
+    ajax(this.remoteUrl, {
+      type: "DELETE",
+    })
+      .then(() => {
+        this.closeModal({ remote: {} });
+        this.set("model.remote", {});
+      })
+      .catch(popupAjaxError)
+      .finally(() => this.set("resetting", false));
+  },
+});

assets/javascripts/discourse/controllers/admin-plugins-landing-pages.js.es6

@@ -1,11 +1,11 @@
 import LandingPage from "../models/landing-page";
 import ImportPages from "../components/modal/import-pages";
+import UpdatePagesRemote from "../components/modal/update-pages-remote";
 import Controller from "@ember/controller";
 import { inject as service } from "@ember/service";
 import discourseComputed from "discourse-common/utils/decorators";
 import { gt, not, notEmpty, or } from "@ember/object/computed";
 import { extractError } from "discourse/lib/ajax-error";
-import showModal from "discourse/lib/show-modal";
 import { ajax } from "discourse/lib/ajax";
 import I18n from "I18n";
 
@@ -152,18 +152,16 @@ export default Controller.extend({
     },
 
     updateRemote() {
-      const controller = showModal("update-pages-remote", {
-        model: {
-          remote: this.remote,
-          buffered: JSON.parse(JSON.stringify(this.remote)),
-        },
-      });
-      controller.set("afterUpdate", (result) => {
-        this.setProperties({
-          remote: result.remote,
-          pagesNotFetched: true,
+      this.modal
+        .show(UpdatePagesRemote, { model: { remote: this.remote } })
+        .then((result) => {
+          if (result?.remote) {
+            this.setProperties({
+              remote: result.remote,
+              pagesNotFetched: true,
+            });
+          }
         });
-      });
     },
 
     pullFromRemote() {