feat: 🎸 initial success/error modals on connect

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

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

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;

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 */);
     }
   }
 }

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>