chore: tweak dialog styles and language

addons/core/translations/resources/en-us.yaml

@@ -233,7 +233,12 @@ target:
     none:
       title: No Targets Available
       description: No Targets to display yet. Contact your Boundary admin if you don't see a Target you expect access to.
-    connection-success: Successfully connected
+    connection-success:
+      title: Successfully Connected
+    connection-details:
+      title: Target Connection Details
+    proxy_url:
+      title: Proxy URL
   actions:
     create: New Target
     delete: Delete Target
@@ -251,7 +256,3 @@ target:
       add:
         title: Add Host Sets
         description: Select host sets to assign to this target.
-    detail:
-      title: Target connection details
-      proxy_url: Proxy URL
-      credentials: Credentials

addons/core/translations/states/en-us.yaml

@@ -4,9 +4,6 @@ success: Success
 warning: Warning
 error: Error
 copied: Copied
-connection:
-  success:
-    description: "Local proxy address ({protocol}): {address}:{port}"
 primary: Primary
 inactive: Inactive
 active-private: Private

ui/desktop/app/components/dialog-detail/index.hbs

@@ -1,20 +1,12 @@
 <Rose::Dialog
-  class='connection-dialog'
+  class='dialog-detail'
   @heading={{@heading}}
   @dismiss={{@dismiss}}
   @dismissButtonText={{@dismissButtonText}}
-  @style={{@style}}
-  @icon={{@icon}}
   @modal={{true}}
   as |dialog|
 >
-  {{yield
-    (hash
-      notification=(component
-        'rose/notification' class='connection-dialog-notification'
-      )
-    )
-  }}
+  {{yield (hash notification=(component 'rose/notification'))}}
 
   <dialog.body>
     {{yield (hash body=(component 'rose/anonymous'))}}

ui/desktop/app/styles/app.scss

@@ -328,7 +328,7 @@
 
 // Dialog Detail
 // These styles are a Work In Progress. Expect changes (lots of them)
-.connection-dialog {
+.dialog-detail {
   .rose-notification {
     border-left: 0;
     border-right: 0;
@@ -337,6 +337,13 @@
     margin-bottom: 0;
   }
 
+  .rose-dialog-body {
+    > :first-child {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+
   .rose-dialog-footer {
     align-items: center;
     display: flex;

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -6,40 +6,36 @@
       {{#unless session.acknowledged}}
         <DialogDetail
           @heading={{concat
-            (t 'resources.target.host-set.detail.title')
+            (t 'resources.target.messages.connection-details.title')
             ': '
-            session.id
+            target.id
           }}
           @dismiss={{route-action 'acknowledge' session}}
           @dismissButtonText={{t 'actions.ok'}}
-          as |dialogDetail|
+          as |dialog|
         >
-          <dialogDetail.notification
+          <dialog.notification
             @style='success'
-            @heading={{t 'resources.target.messages.connection-success'}}
+            @heading={{t 'resources.target.messages.connection-success.title'}}
           />
 
-          <dialogDetail.body>
-            <h3>{{t 'resources.target.host-set.detail.proxy_url'}}</h3>
+          <dialog.body>
+            <h3>{{t 'resources.target.messages.proxy_url.title'}}
+              (<code>{{t 'resources.target.types.tcp'}}</code>)</h3>
             <Copyable
               @text={{concat session.proxy_address ':' session.proxy_port}}
               @buttonText={{t 'actions.copy-to-clipboard'}}
               @acknowledgeText={{t 'states.copied'}}
             >
-              {{t
-                'states.connection.success.description'
-                port=session.proxy_port
-                address=session.proxy_address
-                protocol='tcp'
-              }}
+              <code>{{session.proxy_address}}:{{session.proxy_port}}</code>
             </Copyable>
 
-            {{!-- <Rose::Separator />
+            {{! <Rose::Separator />
 
-            <h3>{{t 'resources.target.host-set.detail.credentials'}}</h3> --}}
+            <h3>Credentials</h3> }}
 
-          </dialogDetail.body>
-          <dialogDetail.footer>
+          </dialog.body>
+          <dialog.footer>
             <div>
               <Rose::Button
                 @style='secondary'
@@ -57,7 +53,7 @@
 
             </Rose::LinkButton> }}
             </div>
-          </dialogDetail.footer>
+          </dialog.footer>
         </DialogDetail>
       {{/unless}}
     {{/if}}

ui/desktop/electron-app/src/config/menu.js

@@ -15,7 +15,8 @@ const generateMenuTemplate = () => {
       type: 'none',
       message: config.productName,
       detail: `${appVersion}\n${appCommit}\n\n${cliVersion}\n\n${copyright}`,
-    });
+    };
+    dialog.showMessageBox(dialogOpts);
   };
 
   return [

ui/desktop/tests/acceptance/projects/targets-test.js

@@ -227,7 +227,7 @@ module('Acceptance | projects | targets', function (hooks) {
         'tbody tr:first-child td:last-child button',
         'Activate connect mode'
       );
-      assert.ok(find('.connection-dialog'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(findAll('.rose-dialog-footer button').length, 1);
       assert.equal(
         find('.rose-dialog-footer button').textContent.trim(),
@@ -236,7 +236,7 @@ module('Acceptance | projects | targets', function (hooks) {
       );
       assert.equal(
         find('.rose-dialog-body .copyable-content').textContent.trim(),
-        'Local proxy address (tcp): a_123:p_123'
+        'a_123:p_123'
       );
     }, 750);
     await visit(urls.targets);

ui/desktop/tests/acceptance/projects/targets/hosts-test.js

@@ -219,7 +219,7 @@ module('Acceptance | projects | targets | hosts', function (hooks) {
         'tbody tr:first-child td:last-child button',
         'Activate connect mode'
       );
-      assert.ok(find('.connection-dialog'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(
         find('.rose-dialog-footer .rose-button-secondary').textContent.trim(),
         'Close',
@@ -227,7 +227,7 @@ module('Acceptance | projects | targets | hosts', function (hooks) {
       );
       assert.equal(
         find('.rose-dialog-body .copyable-content').textContent.trim(),
-        'Local proxy address (tcp): a_123:p_123'
+        'a_123:p_123'
       );
     }, 750);
     await visit(urls.hosts);

ui/desktop/tests/acceptance/projects/targets/sessions-test.js

@@ -295,7 +295,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
     later(async () => {
       run.cancelTimers();
       await click('.rose-layout-page-actions button', 'Activate connect mode');
-      assert.ok(find('.connection-dialog'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(
         find('.rose-dialog-footer .rose-button-secondary').textContent.trim(),
         'Close',
@@ -303,7 +303,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
       );
       assert.equal(
         find('.rose-dialog-body .copyable-content').textContent.trim(),
-        'Local proxy address (tcp): a_123:p_123'
+        'a_123:p_123'
       );
     }, 750);
     await visit(urls.sessions);
@@ -325,7 +325,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
       run.cancelTimers();
       instances.session.update('status', 'active');
       await click('.rose-layout-page-actions button', 'Activate connect mode');
-      assert.ok(find('.connection-dialog'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       await click('.rose-dialog-dismiss');
       assert.equal(
         find(

ui/desktop/tests/acceptance/scopes-test.js

@@ -292,7 +292,7 @@ module('Acceptance | scopes', function (hooks) {
         'tbody tr:first-child td:last-child button',
         'Activate connect mode'
       );
-      assert.ok(find('.connection-dialog'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(findAll('.rose-dialog-footer button').length, 1);
       assert.equal(
         find('.rose-dialog-footer button').textContent.trim(),

ui/desktop/tests/integration/components/dialog-detail-test.js

@@ -8,7 +8,7 @@ module('Integration | Component | dialog-detail', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`<DialogDetail />`);
-    assert.ok(find('.connection-dialog'));
+    assert.ok(find('.dialog-detail'));
   });
 
   test('it renders with content', async function (assert) {
@@ -22,7 +22,7 @@ module('Integration | Component | dialog-detail', function (hooks) {
       </DialogDetail>
     `);
 
-    assert.ok(find('.connection-dialog'));
+    assert.ok(find('.dialog-detail'));
     assert.ok(find('.rose-dialog-header'));
     assert.ok(find('.rose-dialog-body'));
     assert.ok(find('.rose-dialog-footer'));