Ui/replication mgmt action block

ui/README.md

@@ -68,6 +68,11 @@ long-form version of the npm script:
 
 Make use of the many generators for code, try `ember help generate` for more details. If you're using a component that can be widely-used, consider making it an `addon` component instead (see [this PR](https://github.com/hashicorp/vault/pull/6629) for more details)
 
+eg. a reusable component named foo that you'd like in the core engine
+
+- `ember g component foo --in lib/core`
+- `echo "export { default } from 'core/components/foo';" > lib/core/app/components/foo.js`
+
 ### Running Tests
 
 Running tests will spin up a Vault dev server on port 9200 via a

ui/app/styles/components/action-block.scss

@@ -0,0 +1,58 @@
+@mixin stacked-grid {
+  grid-template-columns: 1fr;
+  grid-row: 1/1;
+}
+@mixin stacked-content {
+  margin-bottom: $spacing-l;
+}
+
+.action-block {
+  @extend .selectable-card;
+  grid-template-columns: 2fr 1fr;
+  display: grid;
+  padding: $spacing-m $spacing-l;
+  line-height: inherit;
+
+  @include until($mobile) {
+    @include stacked-grid();
+  }
+}
+
+.action-block-info {
+  @include until($mobile) {
+    @include stacked-grid();
+  }
+}
+
+.action-block.stacked {
+  @include stacked-grid();
+}
+.stacked > .action-block-info {
+  @include stacked-content();
+}
+
+.action-block-title {
+  font-size: $size-5;
+  font-weight: $font-weight-bold;
+}
+.action-block-action {
+  text-align: right;
+  @include until($mobile) {
+    text-align: left;
+  }
+}
+
+.replication-actions-grid-layout {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.replication-actions-grid-item {
+  flex-basis: 50%;
+  padding: 5px;
+}
+
+.replication-actions-grid-item .action-block {
+  height: 100%;
+  width: 100%;
+}

ui/app/styles/components/modal.scss

@@ -42,3 +42,13 @@
 pre {
   background-color: inherit;
 }
+
+.is-highlight {
+  .modal-card-head {
+    background: $yellow-010;
+    border: 1px solid $yellow-100;
+  }
+  .modal-card-title {
+    color: $yellow-dark;
+  }
+}

ui/app/styles/core.scss

@@ -88,6 +88,8 @@
 @import './components/search-select';
 @import './components/selectable-card';
 @import './components/selectable-card-container.scss';
+// action-block extends selectable-card
+@import './components/action-block.scss';
 @import './components/shamir-progress';
 @import './components/sidebar';
 @import './components/splash-page';

ui/app/components/modal.js → ui/lib/core/addon/components/modal.js

@@ -10,12 +10,32 @@
  * @param {function} onClose - onClose is the action taken when someone clicks the modal background or close button (if shown).
  * @param {string} [title] - This text shows up in the header section of the modal.
  * @param {boolean} [showCloseButton=false] - controls whether the close button in the top right corner shows.
+ * @param {String} type=null  - The header type. This comes from the message-types helper.
  */
 
 import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { messageTypes } from 'core/helpers/message-types';
+import layout from '../templates/components/modal';
 
 export default Component.extend({
+  layout,
   title: null,
   showCloseButton: false,
+  type: null,
+  glyph: computed('type', function() {
+    const modalType = this.get('type');
+    if (!modalType) {
+      return {};
+    }
+    return messageTypes([this.get('type')]);
+  }),
+  modalClass: computed('type', function() {
+    const modalType = this.get('type');
+    if (!modalType) {
+      return 'modal';
+    }
+    return 'modal ' + messageTypes([this.get('type')]).class;
+  }),
   onClose: () => {},
 });

ui/app/templates/components/modal.hbs → ui/lib/core/addon/templates/components/modal.hbs

@@ -1,9 +1,20 @@
 {{#ember-wormhole to="modal-wormhole"}}
-  <div class="modal {{if isActive 'is-active'}}" aria-modal="true">
+  <div class="{{modalClass}} {{if isActive 'is-active'}}" aria-modal="true">
     <div class="modal-background" onclick={{onClose}} data-test-modal-background></div>
     <div class="modal-card">
         <header class="modal-card-head">
-          <h2 class="modal-card-title title is-5" data-test-modal-title>{{title}}</h2>
+          <h2 class="modal-card-title title is-5" data-test-modal-title>
+            {{#if glyph}}
+              <Icon
+                @size="l"
+                class="{{glyph.glyphClass}}"
+                aria-hidden="true"
+                @glyph={{glyph.glyph}}
+                data-test-modal-glyph={{glyph.glyph}}
+              />
+            {{/if}}
+            {{title}}
+          </h2>
           {{#if showCloseButton}}
             <button class="delete" aria-label="close" onclick={{onClose}} data-test-modal-close-button></button>
           {{/if}}

ui/lib/core/app/components/modal.js

@@ -0,0 +1 @@
+export { default } from 'core/components/modal';

ui/lib/core/package.json

@@ -23,6 +23,7 @@
     "ember-router-helpers": "*",
     "ember-svg-jar": "*",
     "ember-truth-helpers": "*",
+    "ember-wormhole": "^0.5.5",
     "escape-string-regexp": "*"
   }
 }

ui/tests/integration/components/modal-test.js

@@ -25,5 +25,18 @@ module('Integration | Component | modal', function(hooks) {
 
     assert.equal(this.element.textContent.trim(), 'template block text', 'renders with interior content');
     assert.equal(findAll('[data-test-modal-close-button]').length, 1, 'renders close modal button');
+    assert.dom('[data-test-modal-glyph]').doesNotExist('Glyph is not rendered by default');
+  });
+
+  test('it adds the correct type class', async function(assert) {
+    await render(hbs`
+      <Modal @type="warning">
+        template block text
+      </Modal>
+      <div id="modal-wormhole"></div>
+    `);
+
+    assert.dom('.modal.is-highlight').exists('Modal exists with is-highlight class');
+    assert.dom('[data-test-modal-glyph]').exists('Glyph is rendered');
   });
 });