Ui/replication/test update (#8995)

* make sure progress bar updates and animates

* ensure dashboard updates when replication mode has changed

* make sure we update isSyncing when state has changed

* wip - console log statements to see if components are getting new attrs

* Revert "wip - console log statements to see if components are getting new attrs"

This reverts commit d05219b.

* style progress bar in mozilla; allow testing the progress bar in storybook

* test that primary and secondary card container don't display at the same time

ui/app/styles/core/progress.scss

@@ -1,5 +1,8 @@
 .progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
   background: $progress-bar-background-color;
+  box-shadow: inset 0 0 0 1px $ui-gray-200;
   border-radius: $radius;
   margin-bottom: 0;
   &.is-small {
@@ -13,12 +16,19 @@
   }
 }
 
-// style the container
+// style the container in chrome
 .progress[value]::-webkit-progress-bar {
   box-shadow: inset 0 0 0 1px $ui-gray-200;
 }
 
-// style the progress bar
+// style the bar in chrome
 .progress[value]::-webkit-progress-value {
   border-radius: $radius;
+  transition: width 1s ease-out;
+}
+
+// style the bar in firefox
+.progress[value]::-moz-progress-bar {
+  border-radius: $radius;
+  transition: width 1s ease-out;
 }

ui/lib/core/addon/components/replication-dashboard.js

@@ -9,7 +9,7 @@ export default Component.extend({
   data: null,
   replicationDetails: null,
   isSecondary: null,
-  isSyncing: computed('replicationDetails', 'isSecondary', function() {
+  isSyncing: computed('replicationDetails.{state}', 'isSecondary', function() {
     const { state } = this.replicationDetails;
     const isSecondary = this.isSecondary;
     return isSecondary && state && clusterStates([state]).isSyncing;

ui/lib/core/stories/alert-banner.stories.js

@@ -1,10 +1,16 @@
 import hbs from 'htmlbars-inline-precompile';
 import { storiesOf } from '@storybook/ember';
 import notes from './alert-banner.md';
+import { withKnobs, object } from '@storybook/addon-knobs';
 import { MESSAGE_TYPES } from '../addon/helpers/message-types.js';
 
 storiesOf('Alerts/AlertBanner/', module)
   .addParameters({ options: { showPanel: false } })
+  .addDecorator(
+    withKnobs({
+      escapeHTML: false,
+    })
+  )
   .add(
     'AlertBanner',
     () => ({
@@ -30,7 +36,7 @@ storiesOf('Alerts/AlertBanner/', module)
       context: {
         type: 'info',
         message: 'Here is a message.',
-        progressBar: { value: 75, max: 100 },
+        progressBar: object('Progress Bar', { value: 75, max: 100 }),
       },
     }),
     { notes }

ui/tests/integration/components/replication-dashboard-test.js

@@ -1,6 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
+import { assign } from '@ember/polyfills';
 import hbs from 'htmlbars-inline-precompile';
 
 const REPLICATION_DETAILS = {
@@ -27,13 +28,12 @@ module('Integration | Enterprise | Component | replication-dashboard', function(
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function() {
+    this.set('replicationDetails', REPLICATION_DETAILS);
     this.set('clusterMode', 'secondary');
     this.set('isSecondary', true);
   });
 
   test('it renders', async function(assert) {
-    this.set('replicationDetails', REPLICATION_DETAILS);
-
     await render(hbs`<ReplicationDashboard
       @replicationDetails={{replicationDetails}}
       @clusterMode={{clusterMode}}
@@ -47,8 +47,24 @@ module('Integration | Enterprise | Component | replication-dashboard', function(
     assert.dom('[data-test-flash-message]').doesNotExist('no flash message is displayed on render');
   });
 
+  test('it updates the dashboard when the replication mode has changed', async function(assert) {
+    await render(hbs`<ReplicationDashboard
+      @replicationDetails={{replicationDetails}}
+      @clusterMode={{clusterMode}}
+      @isSecondary={{isSecondary}}
+    />`);
+
+    assert.dom('[data-test-selectable-card-container="secondary"]').exists();
+    assert.dom('[data-test-selectable-card-container="primary"]').doesNotExist();
+
+    this.set('clusterMode', 'primary');
+    this.set('isSecondary', false);
+
+    assert.dom('[data-test-selectable-card-container="primary"]').exists();
+    assert.dom('[data-test-selectable-card-container="secondary"]').doesNotExist();
+  });
+
   test('it renders the primary selectable-card-container when the cluster is a primary', async function(assert) {
-    this.set('replicationDetails', REPLICATION_DETAILS);
     this.set('isSecondary', false);
 
     await render(hbs`<ReplicationDashboard
@@ -58,6 +74,7 @@ module('Integration | Enterprise | Component | replication-dashboard', function(
     />`);
 
     assert.dom('[data-test-selectable-card-container="primary"]').exists();
+    assert.dom('[data-test-selectable-card-container="secondary"]').doesNotExist();
   });
 
   test('it renders an alert banner if the dashboard is syncing', async function(assert) {
@@ -94,5 +111,12 @@ module('Integration | Enterprise | Component | replication-dashboard', function(
         IS_REINDEXING.reindex_building_progress,
         'shows the reindexing progress inside the alert banner'
       );
+
+    const reindexingInProgress = assign({}, IS_REINDEXING, { reindex_building_progress: 27000 });
+    this.set('replicationDetails', reindexingInProgress);
+
+    assert
+      .dom('.message-title>.progress')
+      .hasValue(reindexingInProgress.reindex_building_progress, 'updates the reindexing progress');
   });
 });