Llb/user settings

addons/api/mirage/scenarios/ipc.js

@@ -190,6 +190,27 @@ 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' };
+    }
+    getLogLevel() {
+      return 'info';
+    }
+    getLogPath() {
+      return '~/.config/Boundary/logs/desktop-client.log';
+    }
+    setLogLevel() {}
+    clientAgentStatus() {
+      return { version: '0.0.1-dev', status: 'running' };
+    }
+    pauseClientAgent() {}
+    resumeClientAgent() {}
   }
 
   /**

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

@@ -22,6 +22,8 @@ back: Back
 view: View
 retry: Retry
 play: Play
+pause: Pause
+resume: Resume
 get-topic-help: Get help for this topic
 copy-to-clipboard: Copy to Clipboard
 copy-error-detail-to-clipboard: Copy error detail to clipboard
@@ -60,3 +62,5 @@ yes: Yes
 no: No
 narrow-results: Narrow results
 overflow-options: Overflow Options
+show-errors: Show Errors
+hide-errors: Hide Errors

addons/core/translations/en-us.yaml

@@ -105,3 +105,31 @@ unsupported-controller:
     releases-page: Go to releases page
     change-cluster-url: Change cluster URL
   error: Unable to download supported version of desktop app. You’ll need to download version 1.7.1 from the releases page
+settings:
+  application: Application
+  cli: CLI
+  cache-daemon: Cache Daemon
+  client-agent:
+    title: Boundary Client Agent
+    description: Required to use Transparent Sessions
+  client: Client
+  version: Version
+  color-theme: Color Theme
+  provider: Provider
+  hcp: HashiCorp Cloud Platform
+  self-managed: Self-managed
+  server:
+    title: Server
+    description: Boundary connects you to targets using this server managed by your organization.
+  logs:
+    title: Logs
+    logging-level: Logging level
+    log-location: Log location
+    levels:
+      error: Error
+      warn: Warn
+      info: Info
+      debug: Debug
+  alerts:
+    cache-daemon: There may be a problem with the cache daemon
+    client-agent: There may be a problem with the client agent

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

@@ -14,6 +14,12 @@ active-public: Public
 recording: Recording
 completed: Completed
 failed: Failed
+installed: Installed
+not-running: Not Running
+running: Running
+paused: Paused
+authenticated: Authenticated
+unauthenticated: Unauthenticated
 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/application/index.hbs

@@ -0,0 +1,86 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<SettingsCard @header={{t 'settings.application'}} @icon='boundary'>
+  <:body>
+    <div>
+      <Hds::Text::Display>
+        {{t 'settings.client'}}
+      </Hds::Text::Display>
+      <Hds::Text::Body @tag='p' @weight='medium'>
+        {{@model.desktopVersion}}
+      </Hds::Text::Body>
+    </div>
+    <div>
+      <Hds::Text::Display>
+        {{t 'settings.cli'}}
+      </Hds::Text::Display>
+      <Hds::Text::Body @tag='p' @weight='medium'>
+        {{@model.cliVersion}}
+      </Hds::Text::Body>
+    </div>
+    <div>
+      <Hds::Text::Display>
+        {{t 'settings.cache-daemon'}}
+      </Hds::Text::Display>
+      <Hds::Text::Body @tag='p' @weight='medium' data-test-cache-version>
+        {{#if @model.cacheDaemonStatus.version}}
+          {{@model.cacheDaemonStatus.version}}
+          <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>
+    {{#if @model.cacheDaemonStatus.errors}}
+      <Hds::Alert @type='inline' @color='warning' as |A|>
+        <A.Title>{{t 'settings.alerts.cache-daemon'}}</A.Title>
+        <A.Description>
+          <Hds::Reveal
+            @text={{t 'actions.show-errors'}}
+            @textWhenOpen={{t 'actions.hide-errors'}}
+          >
+            {{#each @model.cacheDaemonStatus.errors as |error|}}
+              <Hds::Text::Body @tag='p'>
+                {{#if error.name}}
+                  <strong>{{error.name}}: </strong>
+                {{/if}}
+                {{error.message}}
+              </Hds::Text::Body>
+            {{/each}}
+          </Hds::Reveal>
+        </A.Description>
+      </Hds::Alert>
+    {{/if}}
+
+    <Hds::Form::Select::Field
+      name='theme'
+      @width='100%'
+      {{on 'change' @toggle}}
+      as |F|
+    >
+      <F.Label>{{t 'settings.color-theme'}}</F.Label>
+      <F.Options>
+        {{#each this.themes as |theme|}}
+          <option
+            value={{theme.value}}
+            selected={{eq this.session.data.theme theme.value}}
+          >
+            {{t (concat 'themes.' theme.label)}}
+          </option>
+        {{/each}}
+      </F.Options>
+    </Hds::Form::Select::Field>
+  </:body>
+</SettingsCard>

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

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+const THEMES = [
+  {
+    label: 'system',
+    value: 'system-default-theme',
+  },
+  {
+    label: 'light',
+    value: 'light',
+  },
+  {
+    label: 'dark',
+    value: 'dark',
+  },
+];
+
+export default class SettingsApplicationComponent extends Component {
+  // =services
+  @service session;
+
+  /**
+   * Returns available themes
+   */
+  get themes() {
+    return THEMES;
+  }
+}

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

@@ -0,0 +1,68 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+{{#if this.isClientAgentActive}}
+  <SettingsCard
+    @header={{t 'settings.client-agent.title'}}
+    @icon='network-alt'
+    @description={{t 'settings.client-agent.description'}}
+  >
+    <:state>
+      {{#if this.isClientAgentStatusRunning}}
+        <Hds::Badge
+          @text={{t 'states.running'}}
+          @icon='running'
+          @color='success'
+        />
+      {{else}}
+        <Hds::Badge
+          @text={{t 'states.paused'}}
+          @icon='pause-circle'
+          @color='neutral'
+        />
+      {{/if}}
+    </:state>
+    <:body>
+      <div>
+        <Hds::Text::Display>
+          {{t 'settings.version'}}
+        </Hds::Text::Display>
+        <Hds::Text::Body @tag='p' @weight='medium'>
+          {{@model.clientAgentStatus.version}}
+        </Hds::Text::Body>
+      </div>
+      {{#if @model.clientAgentStatus.errors}}
+        <Hds::Alert @type='inline' @color='warning' as |A|>
+          <A.Title>{{t 'settings.alerts.client-agent'}}</A.Title>
+          <A.Description>
+            <Hds::Reveal
+              @text={{t 'actions.show-errors'}}
+              @textWhenOpen={{t 'actions.hide-errors'}}
+            >
+              {{#each @model.clientAgentStatus.errors as |error|}}
+                <Hds::Text::Body @tag='p'>
+                  {{error.message}}
+                </Hds::Text::Body>
+              {{/each}}
+            </Hds::Reveal>
+          </A.Description>
+        </Hds::Alert>
+      {{/if}}
+
+    </:body>
+    <:action>
+      <Hds::Button
+        @text={{t
+          (if this.isClientAgentStatusRunning 'actions.pause' 'actions.resume')
+        }}
+        @color='secondary'
+        @icon={{this.buttonIcon}}
+        @size='medium'
+        disabled={{(is-loading)}}
+        {{on 'click' this.changeClientAgentState}}
+      />
+    </:action>
+  </SettingsCard>
+{{/if}}

ui/desktop/app/components/settings-card/client-agent/index.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { loading } from 'ember-loading';
+import { notifyError } from 'core/decorators/notify';
+
+export default class SettingsCardClientAgentComponent extends Component {
+  // =services
+  @service ipc;
+  @service router;
+  @service loading;
+
+  // =attributes
+
+  /**
+   * Checks if the status returned by the client agent is "running"
+   * @return {boolean}
+   */
+  get isClientAgentStatusRunning() {
+    return this.args.model.clientAgentStatus?.status === 'running';
+  }
+
+  /**
+   * Checks if the client agent is actively running
+   * @return {boolean}
+   */
+  get isClientAgentActive() {
+    return (
+      this.args.model.clientAgentStatus?.status === 'running' ||
+      this.args.model.clientAgentStatus?.status === 'paused'
+    );
+  }
+
+  /**
+   * Return the button icon based on the current state of the client agent
+   * @return {string}
+   */
+  get buttonIcon() {
+    if (this.loading.isLoading) {
+      return 'loading';
+    } else {
+      return this.isClientAgentStatusRunning ? 'pause' : 'play';
+    }
+  }
+
+  // =actions
+
+  /**
+   * Changes the state of the client agent based on the current state.
+   * @return {Promise<void>}
+   */
+  @action
+  @loading
+  @notifyError(({ message }) => message)
+  async changeClientAgentState() {
+    if (this.isClientAgentStatusRunning) {
+      await this.ipc.invoke('pauseClientAgent');
+    } else {
+      await this.ipc.invoke('resumeClientAgent');
+    }
+    await this.router.refresh('scopes.scope.projects.settings');
+  }
+}

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

@@ -0,0 +1,36 @@
+{{!
+  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 'state')}}
+      {{yield to='state'}}
+    {{/if}}
+
+    {{#if (has-block 'action')}}
+      <div class='action'>
+        {{yield to='action'}}
+      </div>
+    {{/if}}
+  </div>
+
+  {{#if @description}}
+    <Hds::Text::Body @tag='p' @color='faint' @size='100'>
+      {{@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>