feat: 🎸 add Proxy URL info to session detail screen (#1868)

* feat: 🎸 add Proxy URL info to session detail screen

✅ Closes: ICU-10311

* chore: 🤖 add setupIntl to proxy-url tests

* refactor: 💡 update styles for proxy-url component

* refactor: 💡 display proxy info based on target type

* refactor: 💡 move proxy-url into session specific directory

* refactor: 💡 change template logic for which command to show

* refactor: 💡 remove isSSH getter for session/proxy-url

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

@@ -306,6 +306,9 @@ session:
       raw-api:
         show: View API output
         hide: Hide API output
+  proxy-url:
+    address-port: Address & port
+    ssh: SSH
 org:
   title: Org
   title_plural: Orgs

ui/desktop/app/components/session/proxy-url/index.hbs

@@ -0,0 +1,39 @@
+<div class='proxy-url-container'>
+  <Hds::Dropdown @listPosition='bottom-left' as |dd|>
+    <dd.ToggleButton @color='secondary' @text={{this.selectedValue}} />
+    <dd.Interactive
+      @text={{t 'resources.session.proxy-url.address-port'}}
+      {{on
+        'click'
+        (fn
+          this.updateContent
+          (t 'resources.session.proxy-url.address-port')
+          dd.close
+        )
+      }}
+    />
+    <dd.Interactive
+      data-test-ssh-option
+      @text={{t 'resources.session.proxy-url.ssh'}}
+      {{on
+        'click'
+        (fn this.updateContent (t 'resources.session.proxy-url.ssh') dd.close)
+      }}
+    />
+  </Hds::Dropdown>
+  {{#if this.isAddressAndPort}}
+    <Hds::Copy::Snippet
+      class='copy-address'
+      @textToCopy={{@proxyAddress}}
+      @isTruncated={{true}}
+    />
+    <Hds::Copy::Snippet class='copy-port' @textToCopy={{@proxyPort}} />
+  {{/if}}
+  {{#unless this.isAddressAndPort}}
+    <Hds::Copy::Snippet
+      class='copy-ssh-command'
+      @textToCopy={{this.sshCommand}}
+      @isTruncated={{true}}
+    />
+  {{/unless}}
+</div>

ui/desktop/app/components/session/proxy-url/index.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { TYPE_TARGET_SSH } from 'api/models/target';
+
+export default class SessionProxyUrlComponent extends Component {
+  @service intl;
+
+  @tracked selectedValue =
+    this.args.targetType === TYPE_TARGET_SSH
+      ? this.intl.t('resources.session.proxy-url.ssh')
+      : this.intl.t('resources.session.proxy-url.address-port');
+
+  get isAddressAndPort() {
+    return (
+      this.selectedValue ===
+      this.intl.t('resources.session.proxy-url.address-port')
+    );
+  }
+
+  get sshCommand() {
+    return `ssh ${this.args.proxyAddress} -p ${this.args.proxyPort}`;
+  }
+
+  @action
+  updateContent(value, closeCallback) {
+    this.selectedValue = value;
+    closeCallback();
+  }
+}

ui/desktop/app/styles/app.scss

@@ -541,6 +541,29 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   }
 }
 
+// Proxy URL
+.proxy-url-container {
+  display: flex;
+  gap: 1.75rem;
+  justify-content: flex-start;
+
+  .hds-dropdown-toggle-button {
+    width: 9.375rem;
+  }
+
+  .hds-copy-snippet {
+    width: auto;
+  }
+
+  .copy-address {
+    max-width: 70%;
+  }
+
+  .copy-ssh-command {
+    max-width: 90%;
+  }
+}
+
 // Credentials Panel
 .credential-panel-header {
   display: flex;

ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs

@@ -24,7 +24,13 @@
   </page.actions>
 
   <page.body class='details-screen-body'>
-    <div class='copy-url-container'>{{t 'actions.copy-to-clipboard'}}</div>
+    {{#if (and @model.proxy_address @model.proxy_port)}}
+      <Session::ProxyUrl
+        @proxyAddress={{@model.proxy_address}}
+        @proxyPort={{@model.proxy_port}}
+        @targetType={{@model.target.type}}
+      />
+    {{/if}}
     <Rose::Layout::BodyContent as |bc|>
       <bc.Body>
         {{#if @model.credentials}}

ui/desktop/tests/integration/components/proxy-url-test.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'desktop/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+import { TYPE_TARGET_TCP, TYPE_TARGET_SSH } from 'api/models/target';
+
+module('Integration | Component | session/proxy-url', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    this.set('proxyAddress', 'http://localhost');
+    this.set('proxyPort', '1234');
+    this.set('targetType', TYPE_TARGET_TCP);
+
+    await render(
+      hbs`
+        <Session::ProxyUrl
+          @proxyAddress={{this.proxyAddress}}
+          @proxyPort={{this.proxyPort}}
+          @targetType={{this.targetType}}
+        />
+      `
+    );
+
+    assert.dom('.copy-address').hasText(this.proxyAddress);
+    assert.dom('.copy-port').hasText(this.proxyPort);
+  });
+
+  test('it switches to SSH command on dropdown click', async function (assert) {
+    assert.expect(2);
+    this.set('proxyAddress', 'http://localhost');
+    this.set('proxyPort', '1234');
+    this.set('targetType', TYPE_TARGET_TCP);
+
+    await render(
+      hbs`
+        <Session::ProxyUrl
+          @proxyAddress={{this.proxyAddress}}
+          @proxyPort={{this.proxyPort}}
+          @targetType={{this.targetType}}
+        />
+      `
+    );
+    await click('.proxy-url-container .hds-dropdown-toggle-button');
+    await click('[data-test-ssh-option]');
+
+    assert.dom('.copy-ssh-command').isVisible();
+    assert
+      .dom('.copy-ssh-command')
+      .hasText(`ssh ${this.proxyAddress} -p ${this.proxyPort}`);
+  });
+
+  test('shows address & port info when target type is TCP', async function (assert) {
+    assert.expect(2);
+    this.set('proxyAddress', 'http://localhost');
+    this.set('proxyPort', '1234');
+    this.set('targetType', TYPE_TARGET_TCP);
+
+    await render(
+      hbs`
+        <Session::ProxyUrl
+          @proxyAddress={{this.proxyAddress}}
+          @proxyPort={{this.proxyPort}}
+          @targetType={{this.targetType}}
+        />
+      `
+    );
+
+    assert.dom('.copy-address').hasText(this.proxyAddress);
+    assert.dom('.copy-port').hasText(this.proxyPort);
+  });
+
+  test('shows ssh command when target type is SSH', async function (assert) {
+    assert.expect(2);
+    this.set('proxyAddress', 'http://localhost');
+    this.set('proxyPort', '1234');
+    this.set('targetType', TYPE_TARGET_SSH);
+
+    await render(
+      hbs`
+        <Session::ProxyUrl
+          @proxyAddress={{this.proxyAddress}}
+          @proxyPort={{this.proxyPort}}
+          @targetType={{this.targetType}}
+        />
+      `
+    );
+
+    assert.dom('.copy-ssh-command').isVisible();
+    assert
+      .dom('.copy-ssh-command')
+      .hasText(`ssh ${this.proxyAddress} -p ${this.proxyPort}`);
+  });
+});