From dd94fca50f1f2e1b87c663ebf80e91b8d7b56846 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 8 Dec 2020 15:20:59 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20initial=20success/error?=
 =?UTF-8?q?=20modals=20on=20connect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/core/translations/actions/en-us.yaml   |  1 +
 addons/core/translations/en-us.yaml           |  1 +
 .../addon/styles/rose/components/_dialog.scss | 14 ++++
 .../routes/scopes/scope/projects/targets.js   | 15 ++--
 ui/desktop/app/templates/application.hbs      | 73 +++++++++++++++++++
 5 files changed, 96 insertions(+), 8 deletions(-)

diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml
index 638f3b3a9..1a378edc3 100644
--- a/addons/core/translations/actions/en-us.yaml
+++ b/addons/core/translations/actions/en-us.yaml
@@ -12,6 +12,7 @@ ok: OK
 deny: Deny
 help: Need help?
 back: Back
+retry: Retry
 get-topic-help: Get help for this topic
 copy-to-clipboard: Copy to Clipboard
 authenticate: Authenticate
diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml
index 0af3c50e3..e611da6b5 100644
--- a/addons/core/translations/en-us.yaml
+++ b/addons/core/translations/en-us.yaml
@@ -30,6 +30,7 @@ questions:
   delete-confirm: Are you sure you want to delete this resource?
   remove-confirm: Are you sure you want to remove this association?
   abandon-confirm: Are you sure you want to navigate away?  Your unsaved changes will be lost.
+  retry-confirm: Would you like to retry?
 themes:
   system: System Default
   light: Light
diff --git a/addons/rose/addon/styles/rose/components/_dialog.scss b/addons/rose/addon/styles/rose/components/_dialog.scss
index 08763098e..1ff395f63 100644
--- a/addons/rose/addon/styles/rose/components/_dialog.scss
+++ b/addons/rose/addon/styles/rose/components/_dialog.scss
@@ -20,6 +20,13 @@ $xxxxs: sizing.rems(xxxxs); // 1
   box-shadow: 0 $xs $s rgba(var(--stark-components), var(--opacity-2)),
     0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3));
 
+  &.rose-dialog-success {
+    --headerColor: var(--success-starker-1);
+    --headerIconColor: var(--success);
+    --headerBackgroundColor: var(--success-subtler-2);
+    --headerBorderColor: var(--success);
+  }
+
   &.rose-dialog-warning {
     --headerColor: var(--warning-starker-1);
     --headerIconColor: var(--warning);
@@ -27,6 +34,13 @@ $xxxxs: sizing.rems(xxxxs); // 1
     --headerBorderColor: var(--warning);
   }
 
+  &.rose-dialog-error {
+    --headerColor: var(--failure-starker-1);
+    --headerIconColor: var(--failure);
+    --headerBackgroundColor: var(--failure-subtler-2);
+    --headerBorderColor: var(--failure);
+  }
+
   .rose-dialog-header {
     display: flex;
     align-items: center;
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets.js b/ui/desktop/app/routes/scopes/scope/projects/targets.js
index a42d2bb54..9d98bb1ab 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets.js
@@ -9,6 +9,7 @@ export default class ScopesScopeProjectsTargetsRoute extends Route {
   @service ipc;
   @service session;
   @service notify;
+  @service confirm;
 
   // =methods
 
@@ -48,18 +49,16 @@ export default class ScopesScopeProjectsTargetsRoute extends Route {
   async connect(model) {
     try {
       await this.ipc.invoke('cli');
-      const connect = this.ipc.invoke('connect', {
+      const connection = await this.ipc.invoke('connect', {
         target_id: model.target.id,
         token: this.session.data.authenticated.token,
       });
-
-      connect.then((data) => {
-        this.notify.success(JSON.stringify(data));
-      }, (e) => {
-        this.notify.error(e.message, { closeAfter: null });
-      });
+      // Show the user a modal with basic connection info.
+      this.confirm.confirm(connection, { isConnectSuccess: true });
     } catch(e) {
-      this.notify.error(e.message, { closeAfter: null });
+      this.confirm.confirm(e.message, { isConnectError: true })
+        .then(() => this.connect(model))
+        .catch(() => null /* no op */);
     }
   }
 }
diff --git a/ui/desktop/app/templates/application.hbs b/ui/desktop/app/templates/application.hbs
index dacda7d01..07e8c79dc 100644
--- a/ui/desktop/app/templates/application.hbs
+++ b/ui/desktop/app/templates/application.hbs
@@ -45,3 +45,76 @@
     {{message.text}}
   </Rose::Notification>
 </EmberNotify>
+
+<PendingConfirmations as |confirmation accept deny|>
+  {{#if confirmation.options.isConnectSuccess}}
+    <Rose::Dialog
+      @heading={{t "states.success"}}
+      @dismissButtonText={{t "actions.ok"}}
+      @icon="check-circle-fill"
+      @style="success"
+      @modal={{true}}
+      @dismiss={{accept}}
+    as |dialog|>
+      <dialog.body>
+        <p>
+          {{confirmation.text.address}}
+          <br>
+          {{confirmation.text.port}}
+        </p>
+      </dialog.body>
+      <dialog.footer>
+        <Rose::Button @style="primary" {{on "click" accept}}>
+          {{t "actions.ok"}}
+        </Rose::Button>
+      </dialog.footer>
+    </Rose::Dialog>
+  {{else if confirmation.options.isConnectError}}
+    <Rose::Dialog
+      @heading={{t "states.error"}}
+      @dismissButtonText={{t "actions.ok"}}
+      @icon="cancel-square-fill"
+      @style="error"
+      @modal={{true}}
+      @dismiss={{accept}}
+    as |dialog|>
+      <dialog.body>
+        <p>
+          {{confirmation.text}}
+        </p>
+        <p>
+          {{t "questions.retry-confirm"}}
+        </p>
+      </dialog.body>
+      <dialog.footer>
+        <Rose::Button @style="primary" {{on "click" accept}}>
+          {{t "actions.retry"}}
+        </Rose::Button>
+        <Rose::Button @style="secondary" {{on "click" deny}}>
+          {{t "actions.cancel"}}
+        </Rose::Button>
+      </dialog.footer>
+    </Rose::Dialog>
+  {{else}}
+    <Rose::Dialog
+      @heading={{t "actions.confirm"}}
+      @dismissButtonText={{t "actions.cancel"}}
+      @icon="alert-triangle"
+      @style="warning"
+      @modal={{true}}
+      @dismiss={{deny}}
+    as |dialog|>
+      <dialog.body>
+        <p>{{confirmation.text}}</p>
+      </dialog.body>
+      <dialog.footer>
+        <Rose::Button @style="primary" {{on "click" accept}}>
+          {{t "actions.ok"}}
+        </Rose::Button>
+        <Rose::Button @style="secondary" {{on "click" deny}}>
+          {{t "actions.cancel"}}
+        </Rose::Button>
+      </dialog.footer>
+    </Rose::Dialog>
+  {{/if}}
+</PendingConfirmations>