diff --git a/addons/api/addon/models/session.js b/addons/api/addon/models/session.js index 15fd0b4dd..b6ceadd4d 100644 --- a/addons/api/addon/models/session.js +++ b/addons/api/addon/models/session.js @@ -6,6 +6,8 @@ import { attr } from '@ember-data/model'; export default class SessionModel extends GeneratedSessionModel { // =attributes + @attr('boolean', { readOnly: true }) acknowledged; + @attr('boolean', { readOnly: true }) started_desktop_client; @attr('string', { readOnly: true }) proxy_address; @attr('number', { readOnly: true }) proxy_port; diff --git a/ui/desktop/app/components/dialog-detail/index.hbs b/ui/desktop/app/components/dialog-detail/index.hbs new file mode 100644 index 000000000..cd6f8f309 --- /dev/null +++ b/ui/desktop/app/components/dialog-detail/index.hbs @@ -0,0 +1,145 @@ + + + + {{!-- + {{t + 'states.connection.success.description' + port=session.proxy_port + address=session.proxy_address + protocol='tcp' + }} + + +
Succesfully connected
+ +

Proxy URL

+
+

www.verylongurl.com/section1/subsection2/how-to-tell-the-world-this-is-a-very-long-url-example

+ +
+ + +

Credentials

+
+
+
Credentials
+
+ + Credential library details + +
+
+ + + +
+ + + + Key + Value + + + + + Foo +   + + + ttl +   + + + +
+ +
+

View raw API output

+ +
Code
+
+
+ +
+
+
Credentials
+
+ + Credential library details + +
+
+ + + +
+ + + + Key + Value + + + + + Foo +   + + + ttl +   + + + +
+ +
+

View raw API output

+ +
Code
+
+
--}} + + +
+ + {{t 'actions.ok'}} + +
+
+ + View on Session page + +
+ + \ No newline at end of file diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets.js b/ui/desktop/app/routes/scopes/scope/projects/targets.js index dca07f657..a12d0a7cf 100644 --- a/ui/desktop/app/routes/scopes/scope/projects/targets.js +++ b/ui/desktop/app/routes/scopes/scope/projects/targets.js @@ -81,6 +81,11 @@ export default class ScopesScopeProjectsTargetsRoute extends Route { // =actions + @action + acknowledge(session) { + session.acknowledged = true; + } + /** * Establish a session to current target. * @param {TargetModel} model @@ -119,17 +124,13 @@ export default class ScopesScopeProjectsTargetsRoute extends Route { id: session_id, type: 'session', attributes: { + started_desktop_client: true, proxy_address: address, proxy_port: port } } }); }, 150); - - // Show the user a modal with basic connection info. - // We don't await because this modal is purely informational. - this.confirm.confirm(connectionDetails, { isConnectSuccess: true }); - } catch(e) { this.confirm.confirm(e.message, { isConnectError: true }) // Retry diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index d6654da5b..485e9c824 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -325,3 +325,69 @@ margin: sizing.rems(l) 0 0 0; text-align: center; } + +// Dialog Detail +// These styles are a Work In Progress. Expect changes (lots of them) +.connection-dialog { + .connection-dialog-successfully { + // background: green; + } + + .proxy-url { + display: flex; + + p { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .credentials-card { + display: flex; + flex-direction: column; + margin-bottom: 12px; + + &:last-child { margin-bottom: 0; } + + .credentials-card-header { + display: flex; + flex-direction: row; + + div { + display: flex; + width: 50%; + + &:last-child { + justify-content: flex-end; + } + } + // border-bottom: 1px solid grey; + } + + .credentials-card-body { + // background: yellow; + } + + .credentials-card-footer { + // background: pink; + } + } +} + +.rose-dialog-footer { + align-items: center; + display: flex; + + div:nth-child(1) { + display: flex; + justify-content: flex-start; + width: 50%; + } + + div:nth-child(2) { + display: flex; + justify-content: flex-end; + width: 50%; + } +} diff --git a/ui/desktop/app/templates/application.hbs b/ui/desktop/app/templates/application.hbs index 262aefcb2..50c65b475 100644 --- a/ui/desktop/app/templates/application.hbs +++ b/ui/desktop/app/templates/application.hbs @@ -103,39 +103,7 @@ - {{#if confirmation.options.isConnectSuccess}} - - - - - {{t - 'states.connection.success.description' - port=confirmation.text.port - address=confirmation.text.address - protocol=confirmation.text.protocol - }} - - - - - - {{t 'actions.ok'}} - - - - {{else if confirmation.options.isConnectError}} + {{#if confirmation.options.isConnectError}} + + + + {{t + 'states.connection.success.description' + port=session.proxy_port + address=session.proxy_address + protocol='tcp' + }} + + + + + + {{t 'actions.ok'}} + + + + {{!-- + --}} + {{/unless}} + {{/if}} + {{/each}} +{{/each}} + {{outlet}} \ No newline at end of file diff --git a/ui/desktop/tests/integration/components/dialog-detail-test.js b/ui/desktop/tests/integration/components/dialog-detail-test.js new file mode 100644 index 000000000..0b2d276ef --- /dev/null +++ b/ui/desktop/tests/integration/components/dialog-detail-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | dialog-detail', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.equal(this.element.textContent.trim(), 'template block text'); + }); +});