Merge branch 'main' into feature-oidc-account-claim-maps

2021-05-20 16:00:43 -04:00
commit c8c5c2e7ef
@@ -1,4 +1,4 @@
-<table ...attributes class="rose-table">
+<table ...attributes class="rose-table {{if @style (concat "rose-table-" @style)}}">
  {{#if @caption}}
    <caption>{{@caption}}</caption>
  {{/if}}
@@ -1,27 +1,42 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
+import { boolean, select } from '@storybook/addon-knobs';

 <Meta title="Rose|Table" component="Table" />

 # Table

-A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element.
+A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, and cells can be shrinked to its content with, and center/right cell alignment is supported.

-```htmlbars
-<Rose::Table as |table|>
+Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
+
+```html
+<Rose::Table @style={{style}} as |table|>
  <table.header as |header|>
-    <header.row as |row|>
+    <header.row @hidden={{hideHeaderRow}} as |row|>
      <row.headerCell>Address</row.headerCell>
      <row.headerCell>Host Set</row.headerCell>
      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
+      <row.headerCell @alignCenter={{true}}>Description</row.headerCell>
    </header.row>
  </table.header>
  <table.body as |body|>
    <body.row as |row|>
      <row.cell>1.1.1.1</row.cell>
      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
+      <row.cell @shrink={{true}}>optional name</row.cell>
+      <row.cell @alignCenter={{true}}>description</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-2</row.cell>
+      <row.cell @shrink={{true}} @alignCenter={{true}}>optional name</row.cell>
+      <row.cell @alignRight={{true}}>description</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-1</row.cell>
+      <row.cell @shrink={{true}}>optional name</row.cell>
      <row.cell>description</row.cell>
    </body.row>
  </table.body>
@@ -36,22 +51,34 @@ A table component to display data in structure of rows and columns. It supports
 <Preview>
  <Story name="Basic">{{
    template: hbs`
-    <Rose::Table as |table|>
+    <Rose::Table @style={{style}} as |table|>
      <table.header as |header|>
-        <header.row as |row|>
-          <row.headerCell>Address</row.headerCell>
-          <row.headerCell>Host Set</row.headerCell>
-          <row.headerCell>Name</row.headerCell>
-          <row.headerCell>Description</row.headerCell>
+        <header.row @hidden={{hideHeaderRow}} as |row|>
+          <row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Address</row.headerCell>
+          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Host Set</row.headerCell>
+          <row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Name</row.headerCell>
+          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Description</row.headerCell>
        </header.row>
      </table.header>
      <table.body as |body|>
        <body.row as |row|>
-          <row.cell>1.1.1.1</row.cell>
+          <row.cell @shrink={{cellShrink}}>1.1.1.1</row.cell>
          <row.cell>host-set-1, host-set-2</row.cell>
-          <row.cell>optional name</row.cell>
+          <row.cell @shrink={{cellShrink}}>optional name</row.cell>
          <row.cell>description</row.cell>
        </body.row>
+        <body.row as |row|>
+          <row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>1.1.1.1</row.cell>
+          <row.cell @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
+          <row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>optional name</row.cell>
+          <row.cell @alignCenter={{cellAlignmentCenter}}>description</row.cell>
+        </body.row>
+        <body.row as |row|>
+          <row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>1.1.1.1</row.cell>
+          <row.cell @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
+          <row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>optional name</row.cell>
+          <row.cell @alignRight={{cellAlignmentRight}}>description</row.cell>
+        </body.row>
      </table.body>
      <table.footer as |footer|>
        <footer.row as |row|>
@@ -60,6 +87,102 @@ A table component to display data in structure of rows and columns. It supports
      </table.footer>
    </Rose::Table>
    `,
-    context: {}
+    context: {
+      hideHeaderRow: boolean('hideHeaderRow', false),
+      cellShrink: boolean('cellShrink', false),
+      style: select(
+        'style',
+        {
+          'default': '',
+          'condensed': 'condensed'
+        }
+      ),
+      cellAlignmentCenter: boolean('cellAlignmentCenter', false),
+      cellAlignmentRight: boolean('cellAlignmentRight', false),
+    },
+  }}</Story>
+</Preview>
+
+<Preview>
+  <Story name="Basic Key/Value Table">{{
+    template: hbs`
+      <Rose::Table @style={{style}} as |table|>
+        <table.header as |header|>
+          <header.row  as |row|>
+            <row.headerCell @shrink={{true}}>Key</row.headerCell>
+            <row.headerCell colspan="2">Value</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          <body.row as |row|>
+            <row.cell>Key</row.cell>
+            <row.cell>
+              <Rose::Form::Input @contextual={{true}} as |input|>
+                <input.field />
+              </Rose::Form::Input>
+            </row.cell>
+            <row.cell @shrink={{true}} @alignRight={{true}}>
+              <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+            </row.cell>
+          </body.row>
+          <body.row as |row|>
+            <row.cell>Key</row.cell>
+            <row.cell>
+              <Rose::Form::Select
+                @name="Test select"
+                as |field|
+              >
+                <field.field as |select|>
+                  <select.option>Choose an option</select.option>
+                  <select.option @value="value-1">Value 1</select.option>
+                  <select.option @value="value-2">Value 2</select.option>
+                  <select.option @value="value-3">Value 3</select.option>
+                </field.field>
+              </Rose::Form::Select>
+            </row.cell>
+            <row.cell @shrink={{true}} @alignRight={{true}}>
+              <Rose::Button @style="secondary">Add</Rose::Button>
+            </row.cell>
+          </body.row>
+          <body.row as |row|>
+            <row.cell>Key</row.cell>
+            <row.cell>
+              <Rose::Form::Input @contextual={{true}} as |input|>
+                <input.field />
+              </Rose::Form::Input>
+            </row.cell>
+            <row.cell @alignRight={{true}}>
+              <Rose::Button @style="secondary">Add</Rose::Button>
+            </row.cell>
+          </body.row>
+          <body.row as |row|>
+            <row.cell>Key</row.cell>
+            <row.cell>
+              <Rose::Form::Textarea
+                @name="field"
+                readonly={{false}}
+              />
+            </row.cell>
+            <row.cell @alignRight={{true}}>
+              <Rose::Button @style="secondary">Add</Rose::Button>
+            </row.cell>
+          </body.row>
+        </table.body>
+        <table.footer @hidden={{true}} as |footer|>
+          <footer.row as |row|>
+            <row.cell colspan="3">Footer</row.cell>
+          </footer.row>
+        </table.footer>
+      </Rose::Table>
+    `,
+    context: {
+      style: select(
+        'style',
+        {
+          'condensed': 'condensed',
+          'default': ''
+        }
+      )
+    }
  }}</Story>
 </Preview>
@@ -0,0 +1 @@
+{{yield}}
@@ -0,0 +1,28 @@
+import Component from '@ember/component';
+import layout from './index';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  layout,
+  tagName: 'td',
+  classNameBindings: ['cellTypeStyle', 'cellShrink', 'cellAlignmentStyle'],
+  cellTypeStyle: computed(function () {
+    return this.tagName.match('th')
+      ? `rose-table-header-cell`
+      : 'rose-table-cell';
+  }),
+  cellShrink: computed(function () {
+    if (this.shrink) {
+      return 'rose-table-cell-shrink'
+    }
+  }),
+  cellAlignmentStyle: computed(function () {
+    if (this.alignRight) {
+      return 'align-right';
+    }
+    
+    if (this.alignCenter) {
+      return 'align-center';
+    }
+  })
+});
@@ -1,12 +1,6 @@
-<tr ...attributes class='rose-table-row'>
+<tr ...attributes class='rose-table-row {{if @hidden (concat "rose-table-row-visually-hidden")}} {{if @style (concat "rose-table-row-" @style)}}'>
  {{yield (hash
-    cell=(component 'rose/anonymous'
-      tagName='td'
-      class='rose-table-cell'
-    )
-    headerCell=(component 'rose/anonymous'
-      tagName='th'
-      class='rose-table-header-cell'
-    )
+    cell=(component 'rose/table/row/cell')
+    headerCell=(component 'rose/table/row/cell' tagName='th')
  )}}
 </tr>
@@ -10,9 +10,20 @@
    text-align: left;
  }

+  // This styles are add to stop the input to apply extra margin (default on forms)
+  .rose-form-input-field,
+  .rose-form-select, 
+  .rose-form-input { 
+    margin: 0; 
+    width: 100%;
+  }
+
  .rose-table-cell,
  .rose-table-header-cell {
    vertical-align: middle;
+
+    &.align-right { text-align: right; }
+    &.align-center { text-align: center; }
  }

  .rose-table-header-cell {
@@ -35,7 +46,28 @@
    }
  }

+  .rose-table-cell-shrink {
+    width: 1%;
+    white-space: nowrap;
+  }
+
  [class*='rose-button'] {
    margin-bottom: 0;
  }
+
+  &.rose-table-condensed {
+    .rose-table-cell {
+      @include type.type(s);
+      $lineHeight: 36 / 14;
+      line-height: $lineHeight;
+      padding: (sizing.rems(s) / 2) sizing.rems(s);
+    }
+
+  }
+
+  .rose-table-row-visually-hidden {
+    position: absolute;
+    top: -9999rem;
+    left: -9999rem;
+  }
 }
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/row/cell';
@@ -1,93 +1,196 @@
-<Rose::Header as |header|>
-  <header.brand @logo="logo" @text="Product Name" />
+<h2>Condensed Table</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row  as |row|>
+      <row.headerCell >Address</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-1, host-set-2</row.cell>
+      <row.cell>optional name</row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>

-  <header.nav as |nav|>
-    <nav.dropdown @text="org-name" @icon="user-organization" as |dropdown|>
-      <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
-      <dropdown.separator />
-      <dropdown.button>Button menu item</dropdown.button>
-    </nav.dropdown>
+<h2>Condensed Table with Shrink Cells</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row  as |row|>
+      <row.headerCell>Address</row.headerCell>
+      <row.headerCell @shrink={{true}}>Host Set</row.headerCell>
+      <row.headerCell @shrink={{true}}>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell @shrink={{true}}>host-set-1, host-set-2</row.cell>
+      <row.cell @shrink={{true}}>
+        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+      </row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer @hidden={{true}} as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>

-    <nav.link @route="index">Section</nav.link>
-    <nav.link @route="about">Section</nav.link>
-  </header.nav>
+<h2>Condensed Table with Right and Center aligned cells</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row  as |row|>
+      <row.headerCell>Address</row.headerCell>
+      <row.headerCell @alignCenter={{true}}>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell @alignCenter={{true}}>host-set-1, host-set-2</row.cell>
+      <row.cell @alignRight={{true}}>optional name</row.cell>
+      <row.cell @alignCenter={{true}}>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>

-  <header.utilities as |utilities|>
-    <utilities.dropdown
-      @text="user@example.net"
-      @iconOnly={{true}}
-      @icon="user-square-fill" as |dropdown|
-    >
-      <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
-      <dropdown.button>Button - default</dropdown.button>
-      <dropdown.separator />
-      <dropdown.button @style="danger">Button - danger</dropdown.button>
-    </utilities.dropdown>
-  </header.utilities>
-</Rose::Header>
+<h2>Condensed Table Key/Value Lookalike (edit mode)</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row  as |row|>
+      <row.headerCell @shrink={{true}}>Key</row.headerCell>
+      <row.headerCell colspan="2">Value</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          <input.field />
+        </Rose::Form::Input>
+      </row.cell>
+      <row.cell @shrink={{true}} @alignRight={{true}}>
+        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+      </row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>
+        <Rose::Form::Select
+          @name="Test select"
+          as |field|
+        >
+          <field.field as |select|>
+            <select.option>Choose an option</select.option>
+            <select.option @value="value-1">Value 1</select.option>
+            <select.option @value="value-2">Value 2</select.option>
+            <select.option @value="value-3">Value 3</select.option>
+          </field.field>
+        </Rose::Form::Select>
+      </row.cell>
+      <row.cell @shrink={{true}} @alignRight={{true}}>
+        <Rose::Button @style="secondary">Add</Rose::Button>
+      </row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          <input.field />
+        </Rose::Form::Input>
+      </row.cell>
+      <row.cell @alignRight={{true}}>
+        <Rose::Button @style="secondary">Add</Rose::Button>
+      </row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>
+        <Rose::Form::Textarea
+          @name="field"
+          readonly={{false}}
+        />
+      </row.cell>
+      <row.cell @alignRight={{true}}>
+        <Rose::Button @style="secondary">Add</Rose::Button>
+      </row.cell>
+    </body.row>
+  </table.body>
+  <table.footer @hidden={{true}} as |footer|>
+    <footer.row as |row|>
+      <row.cell colspan="3">Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>

-<Rose::Dropdown @text="Dropdown" as |dropdown|>
-  <dropdown.link @route="index">Menu item</dropdown.link>
-  <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
-  <dropdown.separator></dropdown.separator>
+<h2>Condensed Table With Visually Hidden Header & Footer</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row @hidden={{true}} as |row|>
+      <row.headerCell >Address</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-1, host-set-2</row.cell>
+      <row.cell>optional name</row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row @hidden={{true}} as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>

-  <dropdown.button>Button menu item</dropdown.button>
-  <dropdown.button @style="danger">Button - danger</dropdown.button>
-  <dropdown.separator />
-
-  <dropdown.section @title="Dropdown Section Title">
-    <dropdown.link @route="index">Menu item</dropdown.link>
-  </dropdown.section>
-</Rose::Dropdown>
-
-<Rose::Dropdown @showCaret={{false}} @icon="more-horizontal" as |dropdown|>
-  <dropdown.link @route="index">Menu item</dropdown.link>
-  <dropdown.button>Button menu item</dropdown.button>
-</Rose::Dropdown>
-
-<Rose::Form as |form|>
-  <form.radioGroup tagName="ul" @name="color" @selectedValue="red" as |radioGroup|>
-    <Rose::Dropdown @text="Color" as |dropdown|>
-      <ul>
-        <li>
-          <dropdown.item>
-            <radioGroup.radio
-              @label="Red"
-              @value="red"
-              @icon="user-organization" />
-          </dropdown.item>
-        </li>
-        <li>
-          <dropdown.item>
-            <radioGroup.radio
-              @label="Green"
-              @value="green"
-            />
-          </dropdown.item>
-        </li>
-        <li>
-          <dropdown.item>
-            <radioGroup.radio
-              @label="Blue"
-              @value="blue"
-            />
-          </dropdown.item>
-        </li>
-      </ul>
-    </Rose::Dropdown>
-  </form.radioGroup>
-</Rose::Form>
-
-
-<Rose::Dialog::Cover>
-  <:header>
-    <h1>Authentication Pending</h1>
-  </:header>
-  <:body>
-    <p>Complete authentication in the newly-opened window.</p>
-    <p>Don't see the new window?  <a href="#">Try again.</a></p>
-    <p><a href="#">Cancel</a></p>
-  </:body>
-</Rose::Dialog::Cover>
+<h2>Table</h2>
+<Rose::Table as |table|>
+  <table.header as |header|>
+    <header.row as |row|>
+      <row.headerCell>Address</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-1, host-set-2</row.cell>
+      <row.cell>optional name</row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
@@ -43,4 +43,9 @@ module('Integration | Component | rose/table', function (hooks) {
    </Rose::Table>`);
    assert.ok(find('tfoot'));
  });
+
+  test('it supports a style class', async function (assert) {
+    await render(hbs`<Rose::Table @style="condensed" />`);
+    assert.ok(find('.rose-table-condensed'));
+  });
 });
@@ -7,17 +7,20 @@ module('Integration | Component | rose/table/row', function (hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function (assert) {
+    assert.expect(2);
    await render(hbs`<Rose::Table::Row />`);
    assert.ok(find('tr'));
    assert.ok(find('.rose-table-row'));
  });

  test('it renders with attributes', async function (assert) {
+    assert.expect(1);
    await render(hbs`<Rose::Table::Row id="row"/>`);
    assert.ok(find('#row'));
  });

  test('it renders a cell', async function (assert) {
+    assert.expect(2);
    await render(hbs`<Rose::Table::Row as |row|>
      <row.cell />
    </Rose::Table::Row>`);
@@ -26,10 +29,17 @@ module('Integration | Component | rose/table/row', function (hooks) {
  });

  test('it renders a header cell', async function (assert) {
+    assert.expect(2);
    await render(hbs`<Rose::Table::Row as |row|>
      <row.headerCell />
    </Rose::Table::Row>`);
    assert.ok(find('th'));
    assert.ok(find('.rose-table-header-cell'));
  });
+
+  test('it can be hidden', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Table::Row @hidden=true />`);
+    assert.ok(find('.rose-table-row-visually-hidden'));
+  });
 });
@@ -0,0 +1,76 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/row/cell', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    await render(hbs`<Rose::Table::Row::Cell>
+      content
+    </Rose::Table::Row::Cell>`);
+    assert.ok(find('td'));
+    assert.equal(find('.rose-table-cell').textContent.trim(), 'content');
+  });
+
+  test('it renders with attributes', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Table::Row::Cell id="cell"/>`);
+    assert.ok(find('#cell'));
+  });
+
+  test('it renders as header cell', async function (assert) {
+    assert.expect(4);
+    await render(hbs`<Rose::Table::Row::Cell @tagName='th'/>`);
+    assert.ok(find('th'));
+    assert.ok(find('.rose-table-header-cell'));
+    assert.notOk(find('td'));
+    assert.notOk(find('.rose-table-cell'));
+  });
+
+  test('it adds shrink style class', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Table::Row::Cell @shrink={{true}} />`);
+    assert.ok(find('.rose-table-cell-shrink'));
+  });
+
+  test('it does not add expand style class in default cells', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Table::Row::Cell />`);
+    assert.notOk(find('.rose-table-cell-shrink'));
+  });
+
+  test('it renders with align center in a header cell', async function (assert) {
+    assert.expect(2);
+    await render(
+      hbs`<Rose::Table::Row::Cell @tagName='th' @alignCenter=true />`
+    );
+    assert.ok(find('.rose-table-header-cell'));
+    assert.ok(find('.align-center'));
+  });
+
+  test('it renders with align center in a body', async function (assert) {
+    assert.expect(2);
+    await render(hbs`<Rose::Table::Row::Cell @alignCenter=true />`);
+    assert.ok(find('.rose-table-cell'));
+    assert.ok(find('.align-center'));
+  });
+
+  test('it renders with align right in a header cell', async function (assert) {
+    assert.expect(2);
+    await render(
+      hbs`<Rose::Table::Row::Cell @tagName='th' @alignRight=true />`
+    );
+    assert.ok(find('.rose-table-header-cell'));
+    assert.ok(find('.align-right'));
+  });
+
+  test('it renders with align right', async function (assert) {
+    assert.expect(2);
+    await render(hbs`<Rose::Table::Row::Cell @alignRight=true />`);
+    assert.ok(find('.rose-table-cell'));
+    assert.ok(find('.align-right'));
+  });
+});
@@ -2,6 +2,16 @@

 Canonical reference for changes, improvements, and bugfixes for Boundary Desktop.

+## v1.0.1 [CLI 0.2.2] (2021.05.19)
+
+### New
+
+- Add prompt to close sessions when quitting client. ([PR](https://github.com/hashicorp/boundary-ui/pull/555))
+
+### Bug Fixes
+
+- Close spawned boundary process on session cancel. ([PR](https://github.com/hashicorp/boundary-ui/pull/549))
+
 ## v1.0.0 [CLI 0.2.0] (2021.04.14)

 ### New
@@ -11,6 +11,7 @@ export default class ScopesScopeProjectsSessionsRoute extends Route {

  // =services

+  @service ipc;
  @service session;

  // =attributes
@@ -83,5 +84,6 @@ export default class ScopesScopeProjectsSessionsRoute extends Route {
  @notifySuccess('notifications.canceled-success')
  async cancelSession(session) {
    await session.cancelSession();
+    await this.ipc.invoke('stop', { session_id: session.id });
  }
 }
@@ -1,8 +1,13 @@
 import Route from '@ember/routing/route';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { notifySuccess, notifyError } from 'core/decorators/notify';

 export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route {
+  // =services
+
+  @service ipc;
+
  // =actions

  /**
@@ -14,5 +19,6 @@ export default class ScopesScopeProjectsTargetsTargetSessionsRoute extends Route
  @notifySuccess('notifications.canceled-success')
  async cancelSession(session) {
    await session.cancelSession();
+    await this.ipc.invoke('stop', { session_id: session.id });
  }
 }
@@ -93,7 +93,7 @@ ember-dist/
 ember-test/

 # CLI
-cli/
+/cli/

 # Autoupdate
 nextVersion/
@@ -4,7 +4,7 @@ const https = require('https');
 const decompress = require('decompress');
 const os = require('os');

-const artifactVersion = '0.2.0';
+const artifactVersion = '0.2.2';
 const artifactDestination = path.resolve(__dirname, '..', 'cli');

 const downloadArtifact = version => {
@@ -1,5 +1,5 @@
 const process = require('process');
-const { version } = require('../src/boundary-cli.js');
+const { version } = require('../src/cli/index.js');

 const formattedCLIVersion = version().formatted;

@@ -1,58 +0,0 @@
-const path = require('path');
-const { spawnAsyncJSONPromise, spawnSync } = require('./spawn-promise');
-const origin = require('./origin.js');
-
-const cliPath = async () => path.resolve(__dirname, '..', 'cli', 'boundary');
-
-/**
- * Super paranoid shell quote/escape and validation.  Input must be base62.
- * @param {string} str
- */
-const escapeAndValidateBase62 = (str) => {
-  const candidate = str.toString();
-  if (candidate.match(/^[A-Za-z0-9_]*$/)) return candidate;
-  throw new Error(`
-    Could not invoke command:
-    input contained unsafe characters.
-  `);
-};
-
-module.exports = {
-  // Check boundary cli existence
-  exists: () => Boolean(cliPath()),
-
-  // Initiate connection and return output
-  connect: (target_id, token, host_id) => {
-    const addr = origin.origin;
-    const sanitized = {
-      target_id: escapeAndValidateBase62(target_id),
-      token: escapeAndValidateBase62(token),
-    };
-    if (host_id) sanitized.host_id = escapeAndValidateBase62(host_id);
-    const command = [
-      'connect',
-      `-target-id=${sanitized.target_id}`,
-      `-token=${sanitized.token}`,
-      `-addr=${addr}`,
-      '-format=json',
-    ];
-
-    if (host_id) command.push(`-host-id=${sanitized.host_id}`);
-    return spawnAsyncJSONPromise(command);
-  },
-
-  // Returns JSON-formatted version information from the CLI
-  version: () => {
-    const command = ['-v'];
-    const rawOutput = spawnSync(command);
-    let gitRevision = /Git Revision:\s*(?<rev>.*)\n/.exec(rawOutput);
-    let versionNumber = /Version Number:\s*(?<ver>.*)\n/.exec(rawOutput);
-    if (gitRevision) gitRevision = gitRevision.groups.rev;
-    if (versionNumber) versionNumber = versionNumber.groups.ver;
-    const formatted = versionNumber
-      ? `CLI Version:  ${versionNumber}\nCLI Commit:  ${gitRevision}`
-      : `CLI Commit:  ${gitRevision}`;
-    return { gitRevision, versionNumber, formatted };
-    return rawOutput;
-  },
-};
@@ -0,0 +1,23 @@
+const path = require('path');
+const { spawnSync } = require('../helpers/spawn-promise.js');
+
+const cliPath = async () => path.resolve(__dirname, '..', '..', 'cli', 'boundary');
+
+module.exports = {
+  // Check boundary cli existence
+  exists: () => Boolean(cliPath()),
+
+  // Returns JSON-formatted version information from the CLI
+  version: () => {
+    const command = ['-v'];
+    const rawOutput = spawnSync(command);
+    let gitRevision = /Git Revision:\s*(?<rev>.*)\n/.exec(rawOutput);
+    let versionNumber = /Version Number:\s*(?<ver>.*)\n/.exec(rawOutput);
+    if (gitRevision) gitRevision = gitRevision.groups.rev;
+    if (versionNumber) versionNumber = versionNumber.groups.ver;
+    const formatted = versionNumber
+      ? `CLI Version:  ${versionNumber}\nCLI Commit:  ${gitRevision}`
+      : `CLI Commit:  ${gitRevision}`;
+    return { gitRevision, versionNumber, formatted };
+  },
+};
@@ -1,4 +1,4 @@
-const origin = require('./origin.js');
+const runtimeSettings = require('../services/runtime-settings.js');
 const isDev = require('electron-is-dev');

 const csp = {
@@ -28,9 +28,9 @@ const generateCSPHeader = () => {
  const policy = Object.assign({}, csp);

  // If an origin is specified, add it to the connect-src directive
-  if (origin.origin) {
+  if (runtimeSettings.origin) {
    policy['connect-src'] = policy['connect-src'].slice();
-    policy['connect-src'].push(origin.origin);
+    policy['connect-src'].push(runtimeSettings.origin);
  }

  return Object.keys(policy)
@@ -1,5 +1,5 @@
 const { shell } = require('electron');
-const appUpdater = require('./app-updater.js');
+const appUpdater = require('../helpers/app-updater.js');

 const generateMenuTemplate = () => {
  return [
@@ -0,0 +1,26 @@
+const { net } = require('electron');
+
+const requestTimeoutSeconds = 10;
+// Simple promise wrapper around Electron's net.request feature.
+// https://www.electronjs.org/docs/api/client-request
+const netRequestPromise = (url) =>
+  new Promise((resolve, reject) => {
+    try {
+      const request = net.request(url);
+      // We don't worry about canceling the request timeout timer once a
+      // request ends because:  request.abort() has no effect after a request
+      // ends and the promise will already have been completed, so a rejection
+      // has no effect either.
+      const requestTimeout = setTimeout(() => {
+        request.abort();
+        reject(new Error('Request timeout'));
+      }, requestTimeoutSeconds * 1000);
+      request.on('error', reject);
+      request.on('response', resolve);
+      request.end();
+    } catch (e) {
+      reject(e);
+    }
+  });
+
+module.exports = netRequestPromise;
@@ -1,17 +1,8 @@
 const path = require('path');
 const { spawn, spawnSync } = require('child_process');
+const jsonify = require('../utils/jsonify.js');

-const boundaryPath = path.resolve(__dirname, '..', 'cli', 'boundary');
-
-// Convert to json
-const jsonify = (data) => {
-  if (typeof data !== 'string') data = JSON.stringify(data);
-  try {
-    return JSON.parse(data);
-  } catch (e) {
-    // Ignore parse errors
-  }
-};
+const boundaryPath = path.resolve(__dirname, '..', '..', 'cli', 'boundary');

 // You can throw exceptions, or allow them to occur, and this is supported.
 // Exceptions thrown in this way will be returned to the UI as an
@@ -42,25 +33,37 @@ module.exports = {
      let outputStream = '';
      let errorStream = '';

-      childProcess.stdout.on('data', (data) => {
+      const processData = (data) => {
        outputStream += data.toString();
        const jsonData = jsonify(outputStream);
-        if (jsonData) resolve(jsonData);
-      });
+        if (jsonData) {
+          childProcess.removeAllListeners();
+          resolve({ childProcess, response: jsonData });
+        }
+      };

-      childProcess.stderr.on('data', (data) => {
-        errorStream += data.toString();
+      childProcess.stdout.on('data', processData);
+
+      // Errors are cli returned json objects
+      const processError = (error) => {
+        errorStream += error.toString();
        const jsonData = jsonify(errorStream);
        if (jsonData) {
          const error = jsonData.api_error || jsonData.error;
+          childProcess.removeAllListeners();
          reject(new Error(error.message));
        }
-      });
+      };
+
+      childProcess.stderr.on('error', processError);
    });
  },

  /**
-   *
+   * Spawn child process and return output immediately.
+   * This function is intended for non-connection related tasks.
+   * @param {string} command
+   * @return {string}
   */
  spawnSync(command) {
    const childProcess = spawnSync(boundaryPath, command);
@@ -7,19 +7,20 @@ const {
 const {
  session,
  app,
+  dialog,
  protocol,
  BrowserWindow,
-  ipcMain,
  Menu,
  MenuItem,
 } = require('electron');
-require('./handlers.js');
+require('./ipc/handlers.js');

-const origin = require('./origin.js');
-const { generateCSPHeader } = require('./content-security-policy.js');
+const runtimeSettings = require('./services/runtime-settings.js');
+const { generateCSPHeader } = require('./config/content-security-policy.js');
+const sessionManager = require('./services/session-manager.js');

-const menu = require('./menu.js');
-const appUpdater = require('./app-updater.js');
+const menu = require('./config/menu.js');
+const appUpdater = require('./helpers/app-updater.js');
 const isDev = require('electron-is-dev');

 // Register the custom file protocol
@@ -131,7 +132,7 @@ app.on('ready', async () => {

  // If the user-specified origin changes, reload the page so that
  // the CSP can be refreshed with the this source allowed
-  origin.onOriginChange(() => mainWindow.loadURL(emberAppURL));
+  runtimeSettings.onOriginChange(() => mainWindow.loadURL(emberAppURL));

  // If you want to open up dev tools programmatically, call
  // mainWindow.openDevTools();
@@ -183,6 +184,30 @@ app.on('ready', async () => {
  });
 });

+/**
+ * Prompt for closing spawned processes
+ */
+app.on('before-quit', (event) => {
+  if (sessionManager.hasRunningSessions) {
+    const dialogOpts = {
+      type: 'question',
+      buttons: ['Close', 'Cancel'],
+      detail: 'Close sessions before quitting?',
+    };
+
+    dialog.showMessageBox(dialogOpts).then((returnValue) => {
+      switch (returnValue.response) {
+        case 0:
+          sessionManager.stopAll();
+          break;
+        default:
+          event.preventDefault();
+          break;
+      }
+    });
+  }
+});
+
 // Handle an unhandled error in the main thread
 //
 // Note that 'uncaughtException' is a crude mechanism for exception handling intended to
@@ -1,30 +1,31 @@
 const { shell } = require('electron');
 const isDev = require('electron-is-dev');
-const handle = require('./ipc-handler');
-const boundaryCli = require('./boundary-cli');
-const origin = require('./origin.js');
+const handle = require('./ipc-handler.js');
+const boundaryCli = require('../cli/index.js');
+const sessionManager = require('../services/session-manager.js');
+const runtimeSettings = require('../services/runtime-settings.js');
+const sanitizer = require('../utils/sanitizer.js');

 /**
 * Returns the current runtime origin, which is used by the main thread to
 * rewrite the CSP to allow requests.
 */
-handle('getOrigin', () => origin.origin);
+handle('getOrigin', () => runtimeSettings.origin);

 /**
 * Sets the origin to be used in the content security policy and triggers
 * a main window reload.
 */
 handle('setOrigin', async (requestOrigin) => {
-  await origin.validateOrigin(requestOrigin);
-  origin.origin = requestOrigin;
+  const origin = sanitizer.urlValidate(requestOrigin);
+  await runtimeSettings.validateOrigin(origin);
+  runtimeSettings.origin = origin;
 });

 /**
 * Resets the origin.
 */
-handle('resetOrigin', async (requestOrigin) => {
-  origin.resetOrigin();
-});
+handle('resetOrigin', async () => runtimeSettings.resetOrigin());

 /**
 * Opens the specified URL in an external browser.  Only secure HTTPs URLs are
@@ -56,5 +57,10 @@ handle('cliExists', () => boundaryCli.exists());
 * Establishes a boundary session and returns session details.
 */
 handle('connect', ({ target_id, token, host_id }) =>
-  boundaryCli.connect(target_id, token, host_id)
+  sessionManager.start(runtimeSettings.origin, target_id, token, host_id)
 );
+
+/**
+ * Cancel an established boundary session spawned process.
+ */
+handle('stop', ({ session_id }) => sessionManager.stopById(session_id));
@@ -1,34 +1,7 @@
-const { net } = require('electron');
-
-const requestTimeoutSeconds = 10;
-// Simple promise wrapper around Electron's net.request feature.
-// https://www.electronjs.org/docs/api/client-request
-const netRequestPromise = (url) =>
-  new Promise((resolve, reject) => {
-    try {
-      const request = net.request(url);
-      // We don't worry about canceling the request timeout timer once a
-      // request ends because:  request.abort() has no effect after a request
-      // ends and the promise will already have been completed, so a rejection
-      // has no effect either.
-      const requestTimeout = setTimeout(() => {
-        request.abort();
-        reject(new Error('Request timeout'));
-      }, requestTimeoutSeconds * 1000);
-      request.on('error', reject);
-      request.on('response', resolve);
-      request.end();
-    } catch (e) {
-      reject(e);
-    }
-  });
-
-// Provides a singleton class instance to enable a consistent view of
-// runtime settings across the application.
+const netRequestPromise = require('../helpers/net-request-promise.js');

 // Runtime settings are any configuration, especially user-specified,
 // set up at runtime.  For example, the Boundary origin is a runtime setting.
-
 class RuntimeSettings {
  // Internal private origin is exposed via getter/setter below.
  #origin = undefined;
@@ -84,6 +57,4 @@ class RuntimeSettings {
  }
 }

-const runtimeSettings = new RuntimeSettings();
-
-module.exports = runtimeSettings;
+module.exports = RuntimeSettings;
@@ -0,0 +1,42 @@
+const Session = require('./session.js');
+
+class SessionManager {
+  #sessions = [];
+
+  /**
+   * Checks for running sessions
+   * @returns {boolean}
+   */
+  get hasRunningSessions() {
+    return Boolean(this.#sessions.find((session) => session.isRunning));
+  }
+
+  /**
+   * Start a session and track it.
+   * Returns session proxy details if successfully started.
+   * @param {string} addr
+   * @param {string} target_id
+   * @param {string} token
+   * @param {string} host_id
+   */
+  start(addr, target_id, token, host_id) {
+    const session = new Session(addr, target_id, token, host_id);
+    this.#sessions.push(session);
+    return session.start();
+  }
+
+  /**
+   * Stop a session using identifier.
+   * @param {string} session_id
+   */
+  stopById(session_id) {
+    const session = this.#sessions.find((session) => session.id === session_id);
+    return session?.stop?.();
+  }
+
+  stopAll() {
+    this.#sessions.forEach((session) => session.stop());
+  }
+}
+
+module.exports = SessionManager;
@@ -0,0 +1,101 @@
+const { spawnAsyncJSONPromise } = require('../helpers/spawn-promise.js');
+const sanitizer = require('../utils/sanitizer.js');
+
+class Session {
+  #id;
+  #addr;
+  #token;
+  #hostId;
+  #process;
+  #targetId;
+  #proxyDetails;
+
+  /**
+   * Initialize a session to a controller address
+   * using target details.
+   * @param {string} addr
+   * @param {string} targetId
+   * @param {string} token
+   * @param {string} hostId
+   */
+  constructor(addr, targetId, token, hostId) {
+    this.#addr = addr;
+    this.#targetId = targetId;
+    this.#token = token;
+    this.#hostId = hostId;
+  }
+
+  /**
+   * Session id
+   * @return {string}
+   */
+  get id() {
+    return this.#id;
+  }
+
+  /**
+   * @return {boolean}
+   */
+  get isRunning() {
+    return !this.#process.killed;
+  }
+
+  /**
+   * Using cli, initialize a session to a target.
+   * Tracks local proxy details if successful.
+   */
+  start() {
+    const command = this.cliCommand();
+    return spawnAsyncJSONPromise(command).then((spawnedSession) => {
+      this.#process = spawnedSession.childProcess;
+      this.#proxyDetails = spawnedSession.response;
+      this.#process = spawnedSession.childProcess;
+      this.#id = this.#proxyDetails.session_id;
+      return this.#proxyDetails;
+    });
+  }
+
+  /**
+   * Stop proxy process used by session.
+   */
+  stop() {
+    return new Promise((resolve, reject) => {
+      if (this.isRunning) {
+        this.#process.on('close', () => resolve());
+        this.#process.on('error', (e) => reject(e));
+        this.#process.kill();
+      } else {
+        // Do nothing when process isn't running
+        resolve();
+      }
+    });
+  }
+
+  /**
+   * Generate cli command for session.
+   * @returns {[]}
+   */
+  cliCommand() {
+    const sanitized = {
+      target_id: sanitizer.base62EscapeAndValidate(this.#targetId),
+      token: sanitizer.base62EscapeAndValidate(this.#token),
+      addr: sanitizer.urlValidate(this.#addr),
+    };
+
+    const command = [
+      'connect',
+      `-target-id=${sanitized.target_id}`,
+      `-token=${sanitized.token}`,
+      `-addr=${sanitized.addr}`,
+      '-format=json',
+    ];
+
+    if (this.#hostId) {
+      sanitized.host_id = sanitizer.base62EscapeAndValidate(this.#hostId);
+      command.push(`-host-id=${sanitized.host_id}`);
+    }
+    return command;
+  }
+}
+
+module.exports = Session;
@@ -0,0 +1,8 @@
+const RuntimeSettings = require('../models/runtime-settings.js');
+
+// Provides a singleton class instance to enable a consistent view of
+// runtime settings across the application.
+
+const runtimeSettings = new RuntimeSettings();
+
+module.exports = runtimeSettings;
@@ -0,0 +1,7 @@
+const SessionManager = require('../models/session-manager.js');
+
+/**
+ * Singleton for SessionManager
+ */
+const sessionManager = new SessionManager();
+module.exports = sessionManager;
@@ -0,0 +1,11 @@
+// Convert to json
+const jsonify = (data) => {
+  if (typeof data !== 'string') data = JSON.stringify(data);
+  try {
+    return JSON.parse(data);
+  } catch (e) {
+    // Ignore parse errors
+  }
+};
+
+module.exports = jsonify;
@@ -0,0 +1,30 @@
+const { URL } = require('url');
+
+module.exports = {
+  /**
+   * Super paranoid shell quote/escape and validation.  Input must be base62.
+   * @param {string} str
+   */
+  base62EscapeAndValidate: (str) => {
+    const candidate = str.toString();
+    if (candidate.match(/^[A-Za-z0-9_]*$/)) return candidate;
+    throw new Error(`
+      Could not invoke command:
+      input contained unsafe characters.
+    `);
+  },
+  /**
+   * Return a quoted string suitable for using in shell commands.
+   * @param {string} str
+   * @returns {string}
+   */
+  urlValidate: (str) => {
+    try {
+      const url = new URL(str);
+      return `${url.protocol}//${url.host}`;
+    } catch (e) {
+      // Parse error
+      throw new Error(`URL ${str} could not be validated.`);
+    }
+  },
+};
@@ -19,6 +19,7 @@ import {
  authenticateSession,
  invalidateSession,
 } from 'ember-simple-auth/test-support';
+import sinon from 'sinon';

 module('Acceptance | projects | sessions', function (hooks) {
  setupApplicationTest(hooks);
@@ -43,6 +44,7 @@ module('Acceptance | projects | sessions', function (hooks) {
  const stubs = {
    global: null,
    org: null,
+    ipcService: null,
  };

  const urls = {
@@ -144,6 +146,9 @@ module('Acceptance | projects | sessions', function (hooks) {

    window.addEventListener('message', messageHandler);
    setDefaultOrigin(this);
+
+    const ipcService = this.owner.lookup('service:ipc');
+    stubs.ipcService = sinon.stub(ipcService, 'invoke');
  });

  hooks.afterEach(function () {
@@ -240,6 +245,7 @@ module('Acceptance | projects | sessions', function (hooks) {

  test('cancelling a session', async function (assert) {
    assert.expect(1);
+    stubs.ipcService.withArgs('stop');
    later(async () => {
      run.cancelTimers();
      await click('tbody tr:first-child td:last-child button');
@@ -258,4 +264,15 @@ module('Acceptance | projects | sessions', function (hooks) {
    }, 750);
    await visit(urls.sessions);
  });
+
+  test('cancelling a session with ipc error shows notification', async function (assert) {
+    assert.expect(1);
+    stubs.ipcService.withArgs('stop').throws();
+    later(async () => {
+      run.cancelTimers();
+      await click('tbody tr:first-child td:last-child button');
+      assert.ok(find('[role="alert"].is-error'));
+    }, 750);
+    await visit(urls.sessions);
+  });
 });
@@ -248,6 +248,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
  test('cancelling a session', async function (assert) {
    assert.expect(2);
    const sessionsCount = this.server.schema.sessions.all().models.length;
+    stubs.ipcService.withArgs('cancel');
    later(async () => {
      run.cancelTimers();
      await click('tbody tr:first-child td:last-child button');
@@ -268,6 +269,17 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
    await visit(urls.sessions);
  });

+  test('cancelling a session with ipc error shows notification', async function (assert) {
+    assert.expect(1);
+    stubs.ipcService.withArgs('stop').throws();
+    later(async () => {
+      run.cancelTimers();
+      await click('tbody tr:first-child td:last-child button');
+      assert.ok(find('[role="alert"].is-error'));
+    }, 750);
+    await visit(urls.sessions);
+  });
+
  test('connecting to a target', async function (assert) {
    assert.expect(3);
    stubs.ipcService.withArgs('cliExists').returns(true);
@@ -7578,7 +7578,7 @@ debug@~4.1.0:
  dependencies:
    ms "^2.1.1"

-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
  integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -12380,7 +12380,7 @@ import-lazy@^4.0.0:
  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==

-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -14078,11 +14078,6 @@ lodash._baseflatten@^3.0.0:
    lodash.isarguments "^3.0.0"
    lodash.isarray "^3.0.0"

-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -14091,16 +14086,11 @@ lodash._baseuniq@~4.6.0:
    lodash._createset "~4.0.0"
    lodash._root "~3.0.0"

-lodash._bindcallback@*, lodash._bindcallback@^3.0.0:
+lodash._bindcallback@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=

-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
 lodash._createassigner@^3.0.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
@@ -14110,19 +14100,12 @@ lodash._createassigner@^3.0.0:
    lodash._isiterateecall "^3.0.0"
    lodash.restparam "^3.0.0"

-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
  integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=

-lodash._getnative@*, lodash._getnative@^3.0.0:
+lodash._getnative@^3.0.0:
  version "3.9.1"
  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
@@ -14340,7 +14323,7 @@ lodash.pick@^4.4.0:
  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
  integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=

-lodash.restparam@*, lodash.restparam@^3.0.0:
+lodash.restparam@^3.0.0:
  version "3.6.1"
  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/table/row/cell';`