Icu 14400 add a section for version info cli and dc (#2409)

* chore: 🤖 cli info

addons/api/mirage/scenarios/ipc.js

@@ -190,6 +190,15 @@ export default function initializeMockIPC(server, config) {
     isClientAgentRunning() {
       return false;
     }
+    cacheDaemonStatus() {
+      return { version: 'Boundary v1.0.0' };
+    }
+    getCliVersion() {
+      return { versionNumber: '1.0.0' };
+    }
+    getDesktopVersion() {
+      return { desktopVersion: '1.0.0' };
+    }
   }
 
   /**

addons/core/translations/en-us.yaml

@@ -44,6 +44,10 @@ titles:
   not-set: Not set
   year: '{numberOfYears, plural, =1 {# year} other {# years}}'
   days: '{days, plural, =1 {# day} other {# days}}'
+  application: Application
+  cli: CLI
+  cache-daemon: Cache Daemon
+  client: Client
 descriptions:
   empty-set: There are no items to display yet.  You may be able to add items or try back later.
   cluster-url-initialization: To get started, please enter your cluster URL

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

@@ -27,3 +27,5 @@ onboarding-failed:
 required-field: This is a required field.
 client-agent-failed:
   sessions: Unable to retrieve sessions from the client agent.
+settings-cache:
+  title: There is a problem with the cache daemon

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

@@ -14,6 +14,9 @@ active-public: Public
 recording: Recording
 completed: Completed
 failed: Failed
+installed: Installed
+not-running: Not Running
+running: Running
 loading:
   title: Loading all items...
   description: All of your {resource} are still loading. Please wait while we finish loading everything on screen.

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

@@ -0,0 +1,41 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<Hds::Card::Container @level='mid' @hasBorder={{true}}>
+
+  <div class='header-and-icon'>
+    <Hds::IconTile @icon={{@icon}} @size='small' />
+    <Hds::Text::Display @tag='h4'>
+      {{@header}}
+    </Hds::Text::Display>
+
+    {{#if (has-block 'action')}}
+      <div class='action'>
+        {{! this will contain buttons }}
+        {{yield to='action'}}
+      </div>
+    {{/if}}
+
+    {{#if @state}}
+      <div class='state'>
+        <Hds::Badge @text={{@state}} @icon='loading' />
+      </div>
+    {{/if}}
+  </div>
+
+  {{#if @description}}
+    <Hds::Text::Body @tag='p'>
+      {{@description}}
+    </Hds::Text::Body>
+  {{/if}}
+
+  {{! this yields the body from consumer }}
+  {{#if (has-block 'body')}}
+    <div class='content'>
+      {{yield to='body'}}
+    </div>
+  {{/if}}
+
+</Hds::Card::Container>

ui/desktop/app/router.js

@@ -26,9 +26,7 @@ Router.map(function () {
         this.route('sessions', function () {
           this.route('session', { path: ':session_id' }, function () {});
         });
-        this.route('settings', function () {
-          this.route('setting', function () {});
-        });
+        this.route('settings', function () {});
       });
     });
   });

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

@@ -4,5 +4,37 @@
  */
 
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class ScopesScopeProjectsSettingsIndexRoute extends Route {}
+export default class ScopesScopeProjectsSettingsIndexRoute extends Route {
+  @service ipc;
+
+  async model() {
+    let cacheDaemonStatus,
+      formattedCacheVersion,
+      formattedCliVersion,
+      formattedDesktopVersion;
+    const { versionNumber: cliVersion } =
+      await this.ipc.invoke('getCliVersion');
+    formattedCliVersion = `v${cliVersion}`;
+    const { desktopVersion } = await this.ipc.invoke('getDesktopVersion');
+    formattedDesktopVersion = `v${desktopVersion}`;
+    try {
+      cacheDaemonStatus = await this.ipc.invoke('cacheDaemonStatus');
+    } catch (e) {
+      return {
+        formattedCliVersion,
+        formattedCacheVersion,
+        formattedDesktopVersion,
+        error: e,
+      };
+    }
+    const { version } = cacheDaemonStatus;
+    formattedCacheVersion = version.match(/v\d+\.\d+\.\d+/)?.[0];
+    return {
+      formattedCliVersion,
+      formattedCacheVersion,
+      formattedDesktopVersion,
+    };
+  }
+}

ui/desktop/app/styles/app.scss

@@ -662,3 +662,26 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   gap: 0.5rem;
   width: inherit;
 }
+
+// Settings
+.settings-card {
+  .hds-card__container {
+    padding: 1rem;
+  }
+
+  .header-and-icon {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .content {
+    padding-left: 2.2rem;
+  }
+
+  .app-information {
+    display: flex;
+    justify-content: space-between;
+    margin: 1rem 2rem 1rem 0;
+  }
+}

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

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Rose::Layout::Page as |page|>
+<Rose::Layout::Page class='settings-card' as |page|>
   <page.header>
     <h2>
       {{t 'titles.settings'}}
@@ -11,4 +11,7 @@
       {{! <DocLink @doc='setting' @iconSize='large' /> }}
     </h2>
   </page.header>
+  <page.body>
+    {{outlet}}
+  </page.body>
 </Rose::Layout::Page>

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

@@ -3,4 +3,54 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-{{outlet}}
+<SettingsCard @header={{t 'titles.application'}} @icon='boundary'>
+  <:body>
+    <div class='app-information'>
+      <div>
+        <Hds::Text::Display>
+          {{t 'titles.client'}}
+        </Hds::Text::Display>
+        <Hds::Text::Body @tag='p' @weight='medium'>
+          {{@model.formattedDesktopVersion}}
+        </Hds::Text::Body>
+      </div>
+      <div>
+        <Hds::Text::Display>
+          {{t 'titles.cli'}}
+        </Hds::Text::Display>
+        <Hds::Text::Body @tag='p' @weight='medium'>
+          {{@model.formattedCliVersion}}
+        </Hds::Text::Body>
+      </div>
+      <div>
+        <Hds::Text::Display>
+          {{t 'titles.cache-daemon'}}
+        </Hds::Text::Display>
+        <Hds::Text::Body @tag='p' @weight='medium'>
+          {{#if @model.formattedCacheVersion}}
+            {{@model.formattedCacheVersion}}
+            <Hds::Badge
+              @text={{t 'states.running'}}
+              @icon='running'
+              @color='success'
+            />
+          {{else}}
+            <Hds::Badge
+              @text={{t 'states.not-running'}}
+              @icon='stop-circle'
+              @color='neutral'
+            />
+          {{/if}}
+        </Hds::Text::Body>
+      </div>
+    </div>
+    {{#if @model.error}}
+      <Hds::Alert @type='inline' @color='warning' as |A|>
+        <A.Title>{{t 'errors.settings-cache.title'}}</A.Title>
+        {{#if @model.error.message}}
+          <A.Description>{{@model.error.message}}</A.Description>
+        {{/if}}
+      </Hds::Alert>
+    {{/if}}
+  </:body>
+</SettingsCard>

ui/desktop/electron-app/src/ipc/handlers.js

@@ -16,6 +16,7 @@ const pty = require('node-pty');
 const which = require('which');
 const cacheDaemonManager = require('../services/cache-daemon-manager');
 const clientAgentDaemonManager = require('../services/client-agent-daemon-manager');
+const { releaseVersion } = require('../../config/config.js');
 
 /**
  * Returns the current runtime clusterUrl, which is used by the main thread to
@@ -195,6 +196,21 @@ handle('isClientAgentRunning', async () => {
   }
 });
 
+/**
+ * Gets boundary cli version
+ */
+handle('getCliVersion', async () => boundaryCli.version());
+
+/**
+ * Returns desktop version
+ */
+handle('getDesktopVersion', async () => ({ desktopVersion: releaseVersion }));
+
+/**
+ * Returns the Cache daemon status
+ */
+handle('cacheDaemonStatus', async () => await cacheDaemonManager.status());
+
 /**
  * Handler to help create terminal windows. We don't use the helper `handle` method
  * as we need access to the event and don't need to be using `ipcMain.handle`.

ui/desktop/tests/acceptance/projects/settings/index-test.js

@@ -9,10 +9,12 @@ import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import WindowMockIPC from '../../../helpers/window-mock-ipc';
+import setupStubs from 'api/test-support/handlers/cache-daemon-search';
 
 module('Acceptance | projects | settings | index', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupStubs(hooks);
 
   const instances = {
     scopes: {
@@ -70,10 +72,21 @@ module('Acceptance | projects | settings | index', function (hooks) {
     urls.scopes.org = `/scopes/${instances.scopes.org.id}`;
     urls.scopes.global = `/scopes/${instances.scopes.global.id}`;
     urls.projects = `${urls.scopes.org}/projects`;
+
     urls.settings = `${urls.projects}/settings`;
 
     this.owner.register('service:browser/window', WindowMockIPC);
     setDefaultClusterUrl(this);
+
+    this.ipcStub
+      .withArgs('getDesktopVersion')
+      .returns({ desktopVersion: '0.1.0' });
+    this.ipcStub
+      .withArgs('getCliVersion')
+      .returns({ versionNumber: 'Boundary CLI v0.1.0' });
+    this.ipcStub
+      .withArgs('cacheDaemonStatus')
+      .returns({ version: 'Boundary CLI v0.1.0' });
   });
 
   test('can navigate to the settings page', async function (assert) {

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

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | settings card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<SettingsCard 
+        @header='This is a heading test'
+        @icon='boundary'>
+        <:body></:body>
+        <:action></:action>
+        </SettingsCard>`);
+    assert.ok(find('.hds-card__container'));
+  });
+
+  test('header renders an icon when defined', async function (assert) {
+    await render(hbs`
+      <SettingsCard
+        @header='This is a heading test'
+        @icon='boundary'>
+        <:body></:body>
+        <:action></:action>
+      </SettingsCard>
+    `);
+
+    assert.ok(find('.hds-card__container'));
+    assert.ok(find('.header-and-icon'));
+    assert.strictEqual(
+      this.element.textContent.trim(),
+      'This is a heading test',
+    );
+  });
+});