feat: refresh sessions list view in desktop (#1069)

* feat: 🎸 add a refresh button to sessions list view in desktop

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

@@ -36,4 +36,5 @@ toggle-secret: Toggle secret visibility
 minimize: Minimize
 fullscreen: Fullscreen
 clear-all-filters: Clear all filters
-learn-more: Learn more
+learn-more: Learn more
+refresh: Refresh

addons/rose/addon/components/rose/button/index.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class RoseButtonComponent extends Component {
+  // =attributes
+}

addons/rose/addon/components/rose/loading-button/index.hbs

@@ -0,0 +1,18 @@
+<Rose::Button
+  ...attributes
+  @style='inline-link-action'
+  @iconLeft={{if
+    this.isLoading
+    'flight-icons/svg/loading-16'
+    'flight-icons/svg/reload-16'
+  }}
+  class={{if
+    this.isLoading
+    'rose-loading-button is-loading'
+    'rose-loading-button'
+  }}
+  @disabled={{this.isLoading}}
+  {{on 'click' this.toggleRefresh}}
+>
+  {{yield}}
+</Rose::Button>

addons/rose/addon/components/rose/loading-button/index.js

@@ -0,0 +1,20 @@
+import button from '../button/index';
+
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class LoadingButton extends button {
+  // =actions
+  @tracked isLoading = false;
+
+  @action
+  async toggleRefresh() {
+    this.isLoading = true;
+    try {
+      await this.args.onClick();
+    } catch (e) {
+      console.error('Error while loading data', e);
+    }
+    this.isLoading = false;
+  }
+}

addons/rose/addon/components/rose/loading-button/index.stories.mdx

@@ -0,0 +1,43 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|LoadingButton" component="LoadingButton" />
+
+# LoadingButton
+
+A simple LoadingButton component with two states - loading and reloading that renders an HTML `<button>.` 
+element built by extending the existing Rose|Button component.
+
+```htmlbars
+<Rose::LoadingButton>
+  loading button
+</Rose::LoadingButton>
+```
+
+<Preview>
+  <Story name="Advanced">{{
+    template: hbs`
+      <Rose::Button
+        @style={{style}}
+        @iconLeft={{iconLeft}}
+        @iconRight={{iconRight}}
+        @onClick={{fn onClick}}
+      >
+        {{text}}
+      </Rose::Button>
+    `,
+    context: {
+      text: text('text', 'Refresh'),
+      onClick: action('clicked'),
+      style: 'inline-link-action',
+      iconLeft: select(
+        'iconLeft',
+        {
+          'loading': 'flight-icons/svg/loading-16',
+          'reload': 'flight-icons/svg/reload-16'
+        }, 'flight-icons/svg/reload-16')
+    },
+  }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/_index.scss

@@ -19,3 +19,4 @@
 @import 'link-button';
 @import 'badge';
 @import 'toolbar';
+@import 'loading-button';

addons/rose/addon/styles/rose/components/_loading-button.scss

@@ -0,0 +1,10 @@
+@use '../variables/sizing';
+
+.rose-loading-button {
+  color: var(--stark);
+  vertical-align: middle;
+  margin: auto ($size-xs + $size-xxxs) auto auto;
+  &.is-loading {
+    color: var(--ui-gray-subtler-1);
+  }
+}

addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss

@@ -7,10 +7,12 @@ $xxxxs: sizing.rems(xxxxs); // 1
 .rose-toolbar {
   background-color: var(--ui-gray-subtler-6);
   padding: $xxs + $xxxxs;
-
   button {
     display: inline-block;
     font-weight: normal;
     vertical-align: middle;
   }
+  .rose-form {
+    display: flex;
+  }
 }

addons/rose/addon/styles/rose/variables/color/_sass.scss

@@ -41,7 +41,7 @@ $color-values: (
     700: #525761,
     800: #373a42,
     900: #1f2124,
-    950: #15171C
+    950: #15171c,
   ),
   ui-cool-gray: (
     010: #fdfdfe,

addons/rose/app/components/rose/loading-button.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/loading-button';

addons/rose/tests/integration/components/rose/loading-button-test.js

@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/loading-button', function (hooks) {
+  setupRenderingTest(hooks);
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::LoadingButton/>`);
+    assert.ok(find('.rose-loading-button'));
+  });
+
+  test('it executes a function on refresh button click', async function (assert) {
+    assert.expect(2);
+    this.onClick = () => assert.ok(true, 'refresh was clicked');
+    await render(hbs`<Rose::LoadingButton @onClick={{this.onClick}}/>`);
+    assert.ok(find('.rose-loading-button'));
+    await click('button');
+  });
+});

ui/desktop/app/routes/scopes/scope/projects/sessions.js

@@ -1,6 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { loading } from 'ember-loading';
 import runEvery from 'ember-pollster/decorators/route/run-every';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
 import { resourceFilter } from 'core/decorators/resource-filter';
@@ -102,4 +103,13 @@ export default class ScopesScopeProjectsSessionsRoute extends Route {
     this.status = [];
     this.project = [];
   }
+
+  /**
+   * refreshes session data.
+   */
+  @action
+  @loading
+  async refreshSessions() {
+    return this.refresh();
+  }
 }

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

@@ -112,6 +112,9 @@
               >{{t 'actions.clear-all-filters'}}
               </Rose::Button>
             {{/if}}
+            <Rose::LoadingButton @onClick={{route-action 'refreshSessions'}}>
+              {{t 'actions.refresh'}}
+            </Rose::LoadingButton>
           </Rose::Form>
         </Rose::Toolbar>
       {{/if}}