refactor: 💡 change channel app state title & add alert msg (#2489)

* refactor: 💡 change channel app state title & add alert msg

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

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

@@ -384,9 +384,9 @@ session-recording:
     messages:
       none:
         title: Channel Playback
-      missing:
-        title: We can't play back this channel because the file is missing
-        description: This likely means the connected storage bucket is misconfigured or the file was deleted.
+      error:
+        title: Playback error
+        description: This may mean the connected storage bucket is misconfigured, the file was deleted, or integrity validation failed.
         link: Retrieving lost session recordings
       not-supported:
         title: Playback is not supported for this channel

ui/admin/app/routes/scopes/scope/session-recordings/session-recording/channels-by-connection/channel/index.js

@@ -9,6 +9,7 @@ import { inject as service } from '@ember/service';
 export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConnectionChannelIndexRoute extends Route {
   // =services
   @service can;
+  @service flashMessages;
 
   // =methods
   /**
@@ -24,7 +25,13 @@ export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConne
       try {
         asciicast = await channelRecording.getAsciicast();
       } catch (e) {
-        // no op
+        // Alert user of error occurred during download.
+        const error = e.errors[0];
+        this.flashMessages.danger(error.detail, {
+          notificationType: 'error',
+          sticky: true,
+          dismiss: (flash) => flash.destroyMessage(),
+        });
       }
     }
 

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel/index.hbs

@@ -14,21 +14,17 @@
     {{#if (can 'getAsciicast channel-recording' @model.channelRecording)}}
       {{! Was not able to download asciicast }}
       <A.Header
-        @title={{t
-          'resources.session-recording.channel.messages.missing.title'
-        }}
+        @title={{t 'resources.session-recording.channel.messages.error.title'}}
       />
       <A.Body
         @text={{t
-          'resources.session-recording.channel.messages.missing.description'
+          'resources.session-recording.channel.messages.error.description'
         }}
       />
       <A.Footer as |F|>
         <F.LinkStandalone
           @icon='learn-link'
-          @text={{t
-            'resources.session-recording.channel.messages.missing.link'
-          }}
+          @text={{t 'resources.session-recording.channel.messages.error.link'}}
           @href={{doc-url 'session-recording.retrieve-lost-session-recordings'}}
         />
       </A.Footer>

ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js

@@ -132,9 +132,10 @@ module(
 
       // if there was an error player will not render
       assert.dom('.session-recording-player').doesNotExist();
+      assert.dom('.hds-application-state__title').hasText('Playback error');
       assert
-        .dom('.hds-application-state__title')
-        .hasText("We can't play back this channel because the file is missing");
+        .dom('.rose-notification-body')
+        .includesText('rpc error: code = Unknown');
     });
 
     test('user can navigate back to session recording screen', async function (assert) {
@@ -146,7 +147,7 @@ module(
       assert.strictEqual(currentURL(), urls.sessionRecording);
     });
 
-    test('users can navigate to channel recording and incorrect url autocorrects', async function (assert) {
+    test('users can navigate to channel recording and incorrect url auto corrects', async function (assert) {
       featuresService.enable('ssh-session-recording');
       const sessionRecording = this.server.create('session-recording', {
         scope: instances.scopes.global,