feat: 🎸 Hide daemon errors initially (#2477)

* feat: 🎸 Hide daemon errors initially

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14961

* feat: 🎸 Move the user and server cards up in settings

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14962

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

@@ -62,3 +62,5 @@ yes: Yes
 no: No
 narrow-results: Narrow results
 overflow-options: Overflow Options
+show-errors: Show Errors
+hide-errors: Hide Errors

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

@@ -47,14 +47,19 @@
       <Hds::Alert @type='inline' @color='warning' as |A|>
         <A.Title>{{t 'settings.alerts.cache-daemon'}}</A.Title>
         <A.Description>
-          {{#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
+            @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}}

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

@@ -37,11 +37,16 @@
         <Hds::Alert @type='inline' @color='warning' as |A|>
           <A.Title>{{t 'settings.alerts.client-agent'}}</A.Title>
           <A.Description>
-            {{#each @model.clientAgentStatus.errors as |error|}}
-              <Hds::Text::Body @tag='p'>
-                {{error.message}}
-              </Hds::Text::Body>
-            {{/each}}
+            <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}}

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

@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<SettingsCard::Application @model={{@model}} @toggle={{this.toggleTheme}} />
-<SettingsCard::ClientAgent @model={{@model}} />
 <SettingsCard::User />
 <SettingsCard::Server @model={{@model}} />
+<SettingsCard::Application @model={{@model}} @toggle={{this.toggleTheme}} />
+<SettingsCard::ClientAgent @model={{@model}} />
 <SettingsCard::Logs @model={{@model}} />

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

@@ -5,14 +5,15 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { click, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
 
 const CACHE_DAEMON_VERSION = '[data-test-cache-version]';
-const ERROR_MESSAGES = '.hds-alert__description > p';
-const FIRST_ERROR_MESSAGE = '.hds-alert__description > p:first-child';
-const LAST_ERROR_MESSAGE = '.hds-alert__description > p:last-child';
+const ERROR_MESSAGES = '.hds-reveal__content > p';
+const REVEAL_BUTTON = '.hds-reveal button';
+const FIRST_ERROR_MESSAGE = '.hds-reveal__content > p:first-child';
+const LAST_ERROR_MESSAGE = '.hds-reveal__content > p:last-child';
 
 module('Integration | Component | settings-card/application', function (hooks) {
   setupRenderingTest(hooks);
@@ -59,6 +60,10 @@ module('Integration | Component | settings-card/application', function (hooks) {
       hbs`<SettingsCard::Application @model={{this.model}} @toggle={{this.toggleTheme}}/>`,
     );
 
+    assert.dom(ERROR_MESSAGES).doesNotExist();
+
+    await click(REVEAL_BUTTON);
+
     assert.dom(ERROR_MESSAGES).isVisible({ count: 2 });
     assert
       .dom(FIRST_ERROR_MESSAGE)

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

@@ -5,15 +5,16 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { click, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
 
 const STATUS_BADGE = '.hds-badge';
 const ACTION_BUTTON = 'button';
+const REVEAL_BUTTON = '.hds-reveal button';
 const CARD_CONTAINER = 'hds-card__container';
-const ERROR_MESSAGES = '.hds-alert__description > p';
-const LAST_ERROR_MESSAGE = '.hds-alert__description > p:last-child';
+const ERROR_MESSAGES = '.hds-reveal__content > p';
+const LAST_ERROR_MESSAGE = '.hds-reveal__content > p:last-child';
 
 module(
   'Integration | Component | settings-card/client-agent',
@@ -77,6 +78,10 @@ module(
 
       await render(hbs`<SettingsCard::ClientAgent @model={{this.model}}/>`);
 
+      assert.dom(ERROR_MESSAGES).doesNotExist();
+
+      await click(REVEAL_BUTTON);
+
       assert.dom(ERROR_MESSAGES).isVisible({ count: 3 });
       assert.dom(LAST_ERROR_MESSAGE).hasText('big oof');
     });