From 8e1e2b6b3628833e60a7c4678a8df7cef2272d08 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 5 May 2021 17:21:49 -0400
Subject: [PATCH] feat: Add Rose::Table::Row::Cell for cells to expand/shrink

---
 .../components/rose/table/row/cell/index.hbs  |   1 +
 .../components/rose/table/row/cell/index.js   |  17 +++
 .../addon/components/rose/table/row/index.hbs |  13 ++-
 .../styles/rose/components/table/_table.scss  |   7 ++
 .../app/components/rose/table/row/cell.js     |   1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 102 +++++++++++++++++-
 .../components/rose/table/row/cell-test.js    |  26 +++++
 7 files changed, 162 insertions(+), 5 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/table/row/cell/index.hbs
 create mode 100644 addons/rose/addon/components/rose/table/row/cell/index.js
 create mode 100644 addons/rose/app/components/rose/table/row/cell.js
 create mode 100644 addons/rose/tests/integration/components/rose/table/row/cell-test.js

diff --git a/addons/rose/addon/components/rose/table/row/cell/index.hbs b/addons/rose/addon/components/rose/table/row/cell/index.hbs
new file mode 100644
index 000000000..fb5c4b157
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/row/cell/index.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/table/row/cell/index.js b/addons/rose/addon/components/rose/table/row/cell/index.js
new file mode 100644
index 000000000..4a7572db7
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/row/cell/index.js
@@ -0,0 +1,17 @@
+import Component from '@ember/component';
+import layout from './index';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  layout,
+  classNameBindings: [
+    'cellStyle',
+    'cellSizeStyle',
+  ],
+  cellStyle: computed(function () {
+    return this.tagName.match('th') ? `rose-table-header-cell` : 'rose-table-cell';
+  }),
+  cellSizeStyle: computed(function () {
+    return this.style ? `rose-table-cell-${this.style}` : '';
+  }),
+});
diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs
index 5267351c8..52d1f3ba9 100644
--- a/addons/rose/addon/components/rose/table/row/index.hbs
+++ b/addons/rose/addon/components/rose/table/row/index.hbs
@@ -1,12 +1,21 @@
 <tr ...attributes class='rose-table-row {{if @visually-hidden (concat "rose-table-row-visually-hidden")}}'>
+  {{yield (hash
+    cell=(component 'rose/table/row/cell' tagName='td')
+    headerCell=(component 'rose/table/row/cell' tagName='th')
+  )}}
+</tr>
+
+
+{{!-- <tr ...attributes class='rose-table-row {{if @visually-hidden (concat "rose-table-row-visually-hidden")}}'>
   {{yield (hash
     cell=(component 'rose/anonymous'
       tagName='td'
       class='rose-table-cell'
+      classNames='{{style}} {{@style}}'
     )
     headerCell=(component 'rose/anonymous'
       tagName='th'
-      class='rose-table-header-cell'
+      class='rose-table-header-cell @style {{if @style (concat "rose-table-cell-" @style)}}'
     )
   )}}
-</tr>
+</tr> --}}
diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss
index 7460d2f4d..0e3305a9a 100644
--- a/addons/rose/addon/styles/rose/components/table/_table.scss
+++ b/addons/rose/addon/styles/rose/components/table/_table.scss
@@ -13,6 +13,7 @@
   .rose-table-cell,
   .rose-table-header-cell {
     vertical-align: middle;
+    white-space: nowrap;
   }
 
   .rose-table-header-cell {
@@ -35,6 +36,12 @@
     }
   }
 
+  // Grow to full available width
+  .rose-table-cell-expand {
+    width: 100%;
+    border: 1px solid red;
+  }
+
   [class*='rose-button'] {
     margin-bottom: 0;
   }
diff --git a/addons/rose/app/components/rose/table/row/cell.js b/addons/rose/app/components/rose/table/row/cell.js
new file mode 100644
index 000000000..a6ca12293
--- /dev/null
+++ b/addons/rose/app/components/rose/table/row/cell.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/row/cell';
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 3c7b27e5c..27c3bbeff 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,9 +1,8 @@
 <h2>Condensed Table</h2>
-
 <Rose::Table @style="condensed" as |table|>
   <table.header as |header|>
-    <header.row @visually-hidden=true as |row|>
-      <row.headerCell>Address</row.headerCell>
+    <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>
@@ -24,6 +23,103 @@
   </table.footer>
 </Rose::Table>
 
+<h2>Condensed Table With Expanded Cells</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 @style="expand">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>
+        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+      </row.cell>
+      <row.cell @style="expand">description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer @visually-hidden=true as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
+
+<h2>Condensed Table Key/Value Lookalike</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row  as |row|>
+      <row.headerCell>Key</row.headerCell>
+      <row.headerCell @style="expand">Value</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>Value</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>Value</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>Value</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell @style="expand">
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          {{!-- <row.cell @style="expand"> --}}
+          <input.field />
+          <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+          {{!-- </row.cell> --}}
+        </Rose::Form::Input>
+      </row.cell>
+      <row.cell>
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          {{!-- <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button> --}}
+        </Rose::Form::Input>
+      </row.cell>
+    </body.row>
+  </table.body>
+  <table.footer @visually-hidden=true as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
+
+<h2>Condensed Table With Visually Hidden Header & Footer</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row @visually-hidden=true as |row|>
+      <row.headerCell >Address</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell @style="expand">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 @visually-hidden=true as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
+
 <h2>Key/Value</h2>
 <Rose::List::KeyValue as |list|>
   <list.item as |item|>
diff --git a/addons/rose/tests/integration/components/rose/table/row/cell-test.js b/addons/rose/tests/integration/components/rose/table/row/cell-test.js
new file mode 100644
index 000000000..9279a81df
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/row/cell-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/table/row/cell', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Rose::Table::Row::Cell />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Rose::Table::Row::Cell>
+        template block text
+      </Rose::Table::Row::Cell>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});