refactor: Simplify error message component

ui/core/app/components/error/message.hbs

@@ -1,5 +1,5 @@
-<Rose::Message @title={{t this.title}} @subtitle={{t this.subtitle}} @icon={{this.icon}} as |message|>
-  <message.description>{{t this.description}}</message.description>
+<Rose::Message @title={{t (concat "errors." statusCode ".title")}} @subtitle={{concat (t "errors.titles.error") " " this.status}} @icon={{this.icon}} as |message|>
+  <message.description>{{t (concat "errors." statusCode ".description")}}</message.description>
   {{#if this.helpRoute}}
     <message.link @route={{this.helpRoute}}>{{t "actions.help"}}</message.link>
   {{/if}}

ui/core/app/components/error/message.js

@@ -1,4 +1,5 @@
 import Message from 'rose/components/rose/message';
+import { computed } from '@ember/object';
 
 /*
  * Helpful error booleans are attached based on the error status code:
@@ -14,75 +15,29 @@ import Message from 'rose/components/rose/message';
  *            we don't distinguish it yet
  */
 
-const status_messages = {
-  '401': {
-    icon: 'disabled',
-    title: 'errors.titles.unauthenticated-error',
-    subtitle: 'errors.subtitles.unauthenticated-error',
-    description: 'errors.descriptions.unauthenticated-error',
-  },
-  '403': {
-    icon: 'disabled',
-    title: 'errors.titles.forbidden-error',
-    subtitle: 'errors.subtitles.forbidden-error',
-    description: 'errors.descriptions.forbidden-error',
-  },
-  '404': {
-    icon: 'help-circle-outline',
-    title: 'errors.titles.notfound-error',
-    subtitle: 'errors.subtitles.notfound-error',
-    description: 'errors.descriptions.notfound-error',
-  },
-  '500': {
-    icon: 'alert-circle-outline',
-    title: 'errors.titles.server-error',
-    subtitle: 'errors.subtitles.server-error',
-    description: 'errors.descriptions.server-error',
-  },
-  unknown: {
-    icon: 'alert-circle-outline',
-    title: 'errors.titles.unknown-error',
-    subtitle: 'errors.subtitles.unknown-error',
-    description: 'errors.descriptions.unknown-error',
-  },
-};
+const statuses = ['401', '403', '404', '500'];
 
 export default class ErrorMessageComponent extends Message {
   // =methods
 
   /**
-   * Returns an icon name based on error status.
+   * Returns an icon for error status.
    * @return {string}
    */
+  @computed('status')
   get icon() {
-    return this.statusMessage.icon;
+    switch (this.status) {
+      case '401':
+      case '403':
+        return 'disabled';
+      case '404':
+        return 'help-circle-outline';
+      default:
+        return 'alert-circle-outline';
+    }
   }
 
-  /**
-   * Returns a message title based on error status.
-   * @return {string}
-   */
-  get title() {
-    return this.statusMessage.title;
-  }
-
-  /**
-   * Returns a message subtitle of error status prefixed with 'Error'.
-   * @return {string}
-   */
-  get subtitle() {
-    return this.statusMessage.subtitle;
-  }
-
-  /**
-   * Returns an error description based on error status.
-   * @return {string}
-   */
-  get description() {
-    return this.statusMessage.description;
-  }
-
-  // Disable until help documentation can be linked in.
+  // TODO: Enable when help documentation can be linked in.
   /**
    * Returns an route string for help text in message.
    * @return {string}
@@ -92,16 +47,15 @@ export default class ErrorMessageComponent extends Message {
   // }
 
   /**
-   * Returns an object with message details based on error status.
-   * Return message for `unknown` error when error status isn't part of
-   * predefined message set.
-   * @return {object}
+   * Returns 'unknown' status code when provided error status
+   * isn't part of predefined statuses.
+   * @return {string}
    */
-  get statusMessage() {
-    let status = this.status;
-    if (!status_messages[status]) {
-      status = 'unknown';
-    }
-    return status_messages[status];
+  @computed('status')
+  get statusCode() {
+    let statusCode = this.status;
+    if(!statuses.includes(statusCode)) statusCode = 'unknown';
+    return statusCode;
   }
+
 }

ui/core/app/templates/scopes/scope/error.hbs

@@ -1,6 +1,6 @@
+{{title (t "errors.titles.error") }}
 <Rose::Layout::Centered>
   {{#each @model.errors as |error|}}
-    {{title error.status}}
     <Error::Message @status={{error.status}}/>
   {{/each}}
 </Rose::Layout::Centered>

ui/core/tests/integration/components/error/message-test.js

@@ -7,9 +7,7 @@ module('Integration | Component | error/message', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders predefined message for known error status', async function (assert) {
-    this.set('status', '401');
-
-    await render(hbs`<Error::Message @status={{this.status}} />`);
+    await render(hbs`<Error::Message @status='401' />`);
     assert.equal(
       find('.rose-message-title').textContent.trim(),
       'You are not signed in'
@@ -24,15 +22,13 @@ module('Integration | Component | error/message', function (hooks) {
     );
   });
 
-  test('it renders default error for undefined error status', async function (assert) {
-    this.set('status', '510');
-
-    await render(hbs`<Error::Message @status={{this.status}} />`);
+  test('it renders default error for unknown error status', async function (assert) {
+    await render(hbs`<Error::Message @status='599' />`);
     assert.equal(
       find('.rose-message-title').textContent.trim(),
       'Something went wrong'
     );
-    assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Error');
+    assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Error 599');
     assert.equal(
       find('.rose-message-description').textContent.trim(),
       'Please contact your administrator or try again later.'

ui/core/translations/en-us.yaml

@@ -158,25 +158,24 @@ form:
     current_password: Current Password
     new_password: New Password
 errors:
+  401:
+    title: You are not signed in
+    description: You are not authenticated. Please authenticate and try again later.
+  403:
+    title: You are not authorized
+    description: You must be granted permissions to view this data. Ask your administrator if you think you should have access.
+  404:
+    title: Resource not found
+    description: We could not find the requested resource. You can ask your administrator or try again later.
+  500:
+    title: Server error
+    description: We ran into a problem and could not continue. You can ask your administrator or try again later.
+  unknown:
+    title: Something went wrong
+    description: Please contact your administrator or try again later.
   titles:
-    unauthenticated-error: You are not signed in
-    forbidden-error: You are not authorized
-    notfound-error: Resource not found
-    server-error: Server error
-    unknown-error: Something went wrong
     authentication-failed: Authentication Failed
-  subtitles:
-    unauthenticated-error: Error 401
-    forbidden-error: Error 403
-    notfound-error: Error 404
-    server-error: Error 500
-    unknown-error: Error
-  descriptions:
-    unauthenticated-error: You are not authenticated. Please authenticate and try again later.
-    forbidden-error: You must be granted permissions to view this data. Ask your administrator if you think you should have access.
-    notfound-error: We could not find the requested resource. You can ask your administrator or try again later.
-    server-error: We ran into a problem and could not continue. You can ask your administrator or try again later.
-    unknown-error: Please contact your administrator or try again later.
+    error: Error
 notify:
   create-success: Created succesfully.
   save-success: Saved succesfully.