Icu 14781 add a section for server information (#2438)

addons/api/mirage/scenarios/ipc.js

@@ -199,6 +199,18 @@ export default function initializeMockIPC(server, config) {
     getDesktopVersion() {
       return { desktopVersion: '1.0.0' };
     }
+
+    getLogLevel() {
+      return 'debug';
+    }
+
+    setLogLevel() {
+      return 'warn';
+    }
+
+    getLogPath() {
+      return '~/.config/Boundary/logs/desktop-client.log';
+    }
   }
 
   /**

addons/core/translations/en-us.yaml

@@ -111,6 +111,13 @@ settings:
   cache-daemon: Cache Daemon
   client: Client
   color-theme: Color Theme
+  provider: Provider
+  hcp: HashiCorp Cloud Platform
+  self-managed: Self-managed
+  connected: Connected
+  server:
+    title: Server
+    description: Boundary connects you to targets using this server managed by your organization.
   logs:
     title: Logs
     logging-level: Logging level

ui/desktop/app/components/settings-card/index.hbs

@@ -17,7 +17,6 @@
 
     {{#if (has-block 'action')}}
       <div class='action'>
-        {{! this will contain buttons }}
         {{yield to='action'}}
       </div>
     {{/if}}
@@ -25,7 +24,7 @@
   </div>
 
   {{#if @description}}
-    <Hds::Text::Body @tag='p'>
+    <Hds::Text::Body @tag='p' @color='faint'>
       {{@description}}
     </Hds::Text::Body>
   {{/if}}

ui/desktop/app/components/settings-card/server/index.hbs

@@ -0,0 +1,41 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<SettingsCard
+  @header={{t 'settings.server.title'}}
+  @icon='cloud'
+  @description={{t 'settings.server.description'}}
+>
+  <:state>
+    {{#if @model.serverInformation}}
+      <Hds::Badge
+        @text={{t 'settings.connected'}}
+        @icon='check'
+        @color='success'
+      />
+    {{/if}}
+  </:state>
+  <:body>
+    <div>
+      <Hds::Text::Display>
+        {{t 'settings.provider'}}
+      </Hds::Text::Display>
+      <Hds::Text::Body @tag='p' @weight='medium' data-test-server-name>
+        {{this.providerName}}
+      </Hds::Text::Body>
+    </div>
+    <div class='large-column'>
+      <Hds::Text::Display>
+        {{t 'form.cluster-url.label'}}
+      </Hds::Text::Display>
+      <Hds::Copy::Snippet
+        data-test-server-url
+        @textToCopy={{@model.serverInformation}}
+        @isFullWidth={{true}}
+      />
+    </div>
+  </:body>
+
+</SettingsCard>

ui/desktop/app/components/settings-card/server/index.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class SettingsCardServerComponent extends Component {
+  // =services
+  @service intl;
+
+  // =attributes
+  /**
+   * Returns the provider name for HCP and generic name for non HCP servers
+   * @type {string}
+   */
+  get providerName() {
+    const regex = /boundary\.(hashicorp|hcp)/;
+    if (this.args.model.serverInformation?.match(regex)) {
+      return this.intl.t('settings.hcp');
+    } else {
+      return this.intl.t('settings.self-managed');
+    }
+  }
+}

ui/desktop/app/routes/scopes/scope/projects/settings/index.js

@@ -10,6 +10,7 @@ export default class ScopesScopeProjectsSettingsIndexRoute extends Route {
   // =services
   @service ipc;
   @service session;
+  @service clusterUrl;
 
   // =methods
   async model() {
@@ -48,6 +49,7 @@ export default class ScopesScopeProjectsSettingsIndexRoute extends Route {
 
     const logLevel = await this.ipc.invoke('getLogLevel');
     const logPath = await this.ipc.invoke('getLogPath');
+    const serverInformation = this.clusterUrl.rendererClusterUrl;
 
     return {
       cacheDaemonErrors,
@@ -56,6 +58,7 @@ export default class ScopesScopeProjectsSettingsIndexRoute extends Route {
       formattedDesktopVersion,
       logLevel,
       logPath,
+      serverInformation,
     };
   }
 }

ui/desktop/app/styles/app.scss

@@ -674,6 +674,10 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     display: flex;
     align-items: center;
     gap: 1rem;
+
+    ~ * {
+      padding-left: 2.8rem;
+    }
   }
 
   .action {
@@ -684,7 +688,7 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
-    margin: 1rem 0 1rem 2.8rem;
+    margin: 1rem 0;
 
     > div {
       flex-basis: 30%;

ui/desktop/app/templates/scopes/scope/projects/settings/index.hbs

@@ -5,4 +5,5 @@
 
 <SettingsCard::Application @model={{@model}} @toggle={{this.toggleTheme}} />
 <SettingsCard::User />
+<SettingsCard::Server @model={{@model}} />
 <SettingsCard::Logs @model={{@model}} />

ui/desktop/tests/integration/components/settings-card/server-test.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+const SERVER_NAME = '[data-test-server-name]';
+const SERVER_URL = '[data-test-server-url]';
+
+module('Integration | Component | settings-card/server', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  const setDefaultClusterUrl = (test) => {
+    const windowOrigin = 'hashicorp.cloud';
+    const clusterUrl = test.owner.lookup('service:clusterUrl');
+    clusterUrl.rendererClusterUrl = windowOrigin;
+  };
+
+  setDefaultClusterUrl(this);
+
+  test('it displays HCP cluster url in server information section', async function (assert) {
+    await render(hbs`<SettingsCard::Server/>`);
+    assert.dom(SERVER_NAME).hasText('HashiCorp Cloud Platform');
+    assert.dom(SERVER_URL).hasText('hashicorp.cloud');
+  });
+
+  test('it displays non HCP cluster url in server information section', async function (assert) {
+    this.owner.lookup('service:clusterUrl').rendererClusterUrl =
+      'everythingelse';
+    await render(hbs`<SettingsCard::Server/>`);
+    assert.dom(SERVER_NAME).hasText('Self-Managed');
+    assert.dom(SERVER_URL).hasText('everythingelse');
+  });
+});