fix: 🐛 refresh action in session recording (#3229)

ui/admin/app/controllers/scopes/scope/session-recordings/index.js

@@ -17,6 +17,7 @@ export default class ScopesScopeSessionRecordingsIndexController extends Control
   @service store;
   @service intl;
   @service db;
+  @service router;
 
   // =attributes
 
@@ -235,10 +236,9 @@ export default class ScopesScopeSessionRecordingsIndexController extends Control
    * Refreshes the all data for the current page
    */
   @action
-  refresh() {
-    this.router.refresh('scopes.scope.session-recordings');
+  async refresh() {
+    await this.currentRoute.refreshAll();
   }
-
   /**
    * Sets sort values and sets page to 1
    * @param {string} sortBy

ui/admin/app/controllers/scopes/scope/sessions/index.js

@@ -181,8 +181,8 @@ export default class ScopesScopeSessionsIndexController extends Controller {
    * Refreshes the all data for the current page
    */
   @action
-  refresh() {
-    this.router.refresh('scopes.scope.sessions');
+  async refresh() {
+    await this.currentRoute.refreshAll();
   }
 
   /**

ui/admin/app/routes/scopes/scope/session-recordings/index.js

@@ -5,6 +5,7 @@
 
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
+import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
 import {
   STATE_SESSION_RECORDING_STARTED,
@@ -203,12 +204,18 @@ export default class ScopesScopeSessionRecordingsIndexRoute extends Route {
 
   // =actions
 
+  @action
+  async refreshAll() {
+    return super.refresh(...arguments);
+  }
+
   /**
    * Loads initial filter options in controller so it happens outside of model hook
    * @param controller
    */
   setupController(controller) {
     super.setupController(...arguments);
+    controller.currentRoute = this;
     controller.loadItems.perform();
   }
 }

ui/admin/app/routes/scopes/scope/sessions/index.js

@@ -6,6 +6,7 @@
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 import { restartableTask, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
 
 export default class ScopesScopeSessionsIndexRoute extends Route {
   // =services
@@ -255,6 +256,12 @@ export default class ScopesScopeSessionsIndexRoute extends Route {
    */
   setupController(controller) {
     super.setupController(...arguments);
+    controller.currentRoute = this;
     controller.loadItems.perform();
   }
+
+  @action
+  async refreshAll() {
+    return super.refresh(...arguments);
+  }
 }

ui/admin/tests/acceptance/session-recordings/list-test.js

@@ -152,6 +152,14 @@ module('Acceptance | session-recordings | list', function (hooks) {
     await click(commonSelectors.HREF(urls.sessionRecordings));
 
     assert.strictEqual(currentURL(), urls.sessionRecordings);
+
+    // Verify refresh button shows "x seconds ago" text after click
+    assert.dom(commonSelectors.TOOLBAR_REFRESHER_TEXT).doesNotExist();
+
+    await click(commonSelectors.TOOLBAR_REFRESHER_BUTTON);
+    await waitFor(commonSelectors.TOOLBAR_REFRESHER_TEXT);
+
+    assert.dom(commonSelectors.TOOLBAR_REFRESHER_TEXT).exists();
   });
 
   test('users cannot navigate to session-recordings without the list action', async function (assert) {

ui/admin/tests/acceptance/sessions/list-test.js

@@ -121,6 +121,14 @@ module('Acceptance | sessions | list', function (hooks) {
     assert
       .dom(commonSelectors.TABLE_ROWS)
       .exists({ count: instances.sessions.length });
+
+    // Verify refresh button shows "x seconds ago" text after click
+    assert.dom(commonSelectors.TOOLBAR_REFRESHER_TEXT).doesNotExist();
+
+    await click(commonSelectors.TOOLBAR_REFRESHER_BUTTON);
+    await waitFor(commonSelectors.TOOLBAR_REFRESHER_TEXT);
+
+    assert.dom(commonSelectors.TOOLBAR_REFRESHER_TEXT).exists();
   });
 
   test('users cannot navigate to sessions tab without proper authorization', async function (assert) {

ui/admin/tests/helpers/selectors.js

@@ -95,3 +95,8 @@ export const TABLE_SORT_BTN_ARROW_DOWN = (column) =>
 
 export const CODE_EDITOR_CONTENT =
   '[data-test-code-editor-field-editor] textarea';
+
+// Toolbar refresher selectors
+export const TOOLBAR_REFRESHER = '.toolbar-refresher';
+export const TOOLBAR_REFRESHER_BUTTON = '.toolbar-refresher button';
+export const TOOLBAR_REFRESHER_TEXT = '.toolbar-refresher p';