From 9cf216179a239b8e41f979ad2595555e1bad81fc Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Thu, 28 Apr 2022 08:49:37 -0700
Subject: [PATCH] feat: refresh sessions list view in desktop (#1069)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 add a refresh button to sessions list view in desktop
---
 addons/core/translations/actions/en-us.yaml   |  3 +-
 .../addon/components/rose/button/index.js     |  5 +++
 .../components/rose/loading-button/index.hbs  | 18 ++++++++
 .../components/rose/loading-button/index.js   | 20 +++++++++
 .../rose/loading-button/index.stories.mdx     | 43 +++++++++++++++++++
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../rose/components/_loading-button.scss      | 10 +++++
 .../rose/components/toolbar/_toolbar.scss     |  4 +-
 .../styles/rose/variables/color/_sass.scss    |  2 +-
 .../app/components/rose/loading-button.js     |  1 +
 .../components/rose/loading-button-test.js    | 20 +++++++++
 .../routes/scopes/scope/projects/sessions.js  | 10 +++++
 .../scopes/scope/projects/sessions/index.hbs  |  3 ++
 13 files changed, 137 insertions(+), 3 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/button/index.js
 create mode 100644 addons/rose/addon/components/rose/loading-button/index.hbs
 create mode 100644 addons/rose/addon/components/rose/loading-button/index.js
 create mode 100644 addons/rose/addon/components/rose/loading-button/index.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/_loading-button.scss
 create mode 100644 addons/rose/app/components/rose/loading-button.js
 create mode 100644 addons/rose/tests/integration/components/rose/loading-button-test.js

diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml
index 9c97d54af..2bdd086cd 100644
--- a/addons/core/translations/actions/en-us.yaml
+++ b/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
\ No newline at end of file
+learn-more: Learn more
+refresh: Refresh
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/button/index.js b/addons/rose/addon/components/rose/button/index.js
new file mode 100644
index 000000000..fa54cee1d
--- /dev/null
+++ b/addons/rose/addon/components/rose/button/index.js
@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class RoseButtonComponent extends Component {
+  // =attributes
+}
diff --git a/addons/rose/addon/components/rose/loading-button/index.hbs b/addons/rose/addon/components/rose/loading-button/index.hbs
new file mode 100644
index 000000000..b5be619a5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/loading-button/index.js b/addons/rose/addon/components/rose/loading-button/index.js
new file mode 100644
index 000000000..d27678155
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/addons/rose/addon/components/rose/loading-button/index.stories.mdx b/addons/rose/addon/components/rose/loading-button/index.stories.mdx
new file mode 100644
index 000000000..bd791219c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index f8161a2c6..c1fe56f7d 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -19,3 +19,4 @@
 @import 'link-button';
 @import 'badge';
 @import 'toolbar';
+@import 'loading-button';
diff --git a/addons/rose/addon/styles/rose/components/_loading-button.scss b/addons/rose/addon/styles/rose/components/_loading-button.scss
new file mode 100644
index 000000000..f2ef049d5
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
index 80dd508c0..6dd565290 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
+++ b/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;
+  }
 }
diff --git a/addons/rose/addon/styles/rose/variables/color/_sass.scss b/addons/rose/addon/styles/rose/variables/color/_sass.scss
index 7b77d47d8..c92827357 100644
--- a/addons/rose/addon/styles/rose/variables/color/_sass.scss
+++ b/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,
diff --git a/addons/rose/app/components/rose/loading-button.js b/addons/rose/app/components/rose/loading-button.js
new file mode 100644
index 000000000..0abd22067
--- /dev/null
+++ b/addons/rose/app/components/rose/loading-button.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/loading-button';
diff --git a/addons/rose/tests/integration/components/rose/loading-button-test.js b/addons/rose/tests/integration/components/rose/loading-button-test.js
new file mode 100644
index 000000000..ec01498e6
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/ui/desktop/app/routes/scopes/scope/projects/sessions.js b/ui/desktop/app/routes/scopes/scope/projects/sessions.js
index d592ed90e..1e1de9d54 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/sessions.js
+++ b/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();
+  }
 }
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index 8433a922d..a83863d9a 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/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}}