Merge pull request #3850 from huwshimi/fix-status-table

Fix the status table styles
juju · Oct 26, 2018 · 280f71f · 280f71f
2 parents 76f1dbd + be7a3c9
commit 280f71f
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 72 deletions.
diff --git a/jujugui/static/gui/src/app/components/shared/basic-table/_basic-table.scss b/jujugui/static/gui/src/app/components/shared/basic-table/_basic-table.scss
@@ -1,5 +1,4 @@
 .basic-table {
-  @extend %list-style;
   margin-bottom: 20px;
   width: 100%;
 
@@ -8,7 +7,6 @@
     border-bottom: 1px solid $color-mid-light;
 
     thead, tbody {
-      display: block;
       width: 100%;
     }
 
@@ -24,7 +22,6 @@
 
     tbody {
       tr {
-
         &.is-expanded {
           padding: 0.5rem .75rem;
         }
@@ -42,17 +39,21 @@
     transition: all 0.25s;
 
     &-link {
+      position: absolute;
+      top: 0;
       bottom: 0;
       left: 0;
-      position: absolute;
       right: 0;
-      top: 0;
-      // Raise the main link above the children so that it can be clicked on.
-      z-index: 1;
     }
 
     &--clickable {
       cursor: pointer;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $white;
+      }
     }
 
     &.is-expanded {
@@ -67,6 +68,10 @@
     }
   }
 
+  &__cell {
+    position: relative;
+  }
+
   tbody tr.basic-table__row--clickable:hover {
     background-color: $color-x-light;
   }

diff --git a/...gui/static/gui/src/app/components/shared/basic-table/cell/__snapshots__/test-cell.js.snap b/...gui/static/gui/src/app/components/shared/basic-table/cell/__snapshots__/test-cell.js.snap
@@ -2,7 +2,7 @@
 
 exports[`BasicTableCell can render 1`] = `
 <td
-  className=""
+  className="basic-table__cell"
 >
   <span>
     Content!

diff --git a/jujugui/static/gui/src/app/components/shared/basic-table/cell/cell.js b/jujugui/static/gui/src/app/components/shared/basic-table/cell/cell.js
@@ -8,7 +8,7 @@ const React = require('react');
 /** Basic table React component used to display data in a table structure. */
 class BasicTableCell extends React.Component {
   render() {
-    const className = classNames(this.props.classes);
+    const className = classNames('basic-table__cell', this.props.classes);
     const isHeader = this.props.isHeader;
     let content = this.props.content;
     // if there is no content then add a space so that the column doesn't
@@ -25,6 +25,7 @@ class BasicTableCell extends React.Component {
     } else {
       return (
         <td className={className}>
+          {this.props.link}
           {content}
         </td>);
     }
@@ -34,7 +35,8 @@ class BasicTableCell extends React.Component {
 BasicTableCell.propTypes = {
   classes: PropTypes.arrayOf(PropTypes.string),
   content: PropTypes.node,
-  isHeader: PropTypes.bool
+  isHeader: PropTypes.bool,
+  link: PropTypes.node
 };
 
 module.exports = BasicTableCell;
diff --git a/jujugui/static/gui/src/app/components/shared/basic-table/row/__snapshots__/test-row.js.snap b/jujugui/static/gui/src/app/components/shared/basic-table/row/__snapshots__/test-row.js.snap
@@ -35,6 +35,7 @@ exports[`BasicTableRow can render 1`] = `
       </span>
     }
     key="0"
+    link={null}
   />
   <BasicTableCell
     classes={
@@ -45,6 +46,7 @@ exports[`BasicTableRow can render 1`] = `
     columnSize={3}
     content="row 1 column 2"
     key="1"
+    link={null}
   />
 </tr>
 `;
diff --git a/jujugui/static/gui/src/app/components/shared/basic-table/row/row.js b/jujugui/static/gui/src/app/components/shared/basic-table/row/row.js
@@ -86,7 +86,8 @@ class BasicTableRow extends React.Component {
         columnSize={column.columnSize}
         content={column.content}
         isHeader={isHeader}
-        key={index} />);
+        key={index}
+        link={this._generateAnchor()} />);
   }
 
   /**
@@ -118,7 +119,7 @@ class BasicTableRow extends React.Component {
       'basic-table__header': isHeader,
       'basic-table__row': !isHeader,
       'basic-table__row--expandable': !!expandedContent,
-      'basic-table__row--clickable': this._isRowClickable(),
+      'basic-table__row--clickable': this._isRowClickable() || this.props.onClick,
       'is-expanded': this.state.expanded
     });
     const onClick = this._isRowClickable() ? this._toggleExpanded.bind(this) : null;
@@ -128,7 +129,6 @@ class BasicTableRow extends React.Component {
         onClick={onClick}
         role="button"
         tabIndex="0">
-        {this._generateAnchor()}
         {this._generateContent()}
       </tr>);
   }

diff --git a/jujugui/static/gui/src/app/components/shared/basic-table/row/test-row.js b/jujugui/static/gui/src/app/components/shared/basic-table/row/test-row.js
@@ -67,33 +67,6 @@ describe('BasicTableRow', () => {
       ['r1c1class1', 'r1c1class2', 'extra-header-class']);
   });
 
-  it('displays row links', () => {
-    const wrapper = renderComponent({
-      onClick: sinon.stub(),
-      clickURL: 'http://example.com'
-    });
-    const expected = (
-      <a
-        className="basic-table__row-link"
-        href="http://example.com"
-        onClick={wrapper.find('.basic-table__row-link').prop('onClick')}></a>);
-    assert.compareJSX(wrapper.find('.basic-table__row-link').at(0), expected);
-  });
-
-  it('can navigate when a row is clicked', () => {
-    const onClick = sinon.stub();
-    const clickURL = 'http://example.com';
-    const preventDefault = sinon.stub();
-    const wrapper = renderComponent({
-      onClick,
-      clickURL
-    });
-    wrapper.find('.basic-table__row-link').simulate('click',
-      {preventDefault: preventDefault});
-    assert.equal(preventDefault.callCount, 1);
-    assert.equal(onClick.callCount, 1);
-  });
-
   it('can display rows with expandable content', () => {
     const wrapper = renderComponent({
       expandedContent: (<div>Expanded content!</div>),

diff --git a/jujugui/static/gui/src/app/components/shared/status/table/_table.scss b/jujugui/static/gui/src/app/components/shared/status/table/_table.scss
@@ -1,17 +1,14 @@
 .status-table {
-  @extend %stagger-fade-in;
-
-  &__header {
-    margin-bottom: 0;
-    border-bottom: 0;
-  }
-
   &__row {
-    margin-bottom: 10px;
-    padding: 15px;
-    border: 1px solid $light-mid-grey;
-    border-radius: 4px;
-    transition: border .3s;
+    &--pending,
+    &--error {
+      border-left-width: 3px;
+      border-left-style: solid;
+
+      .status-table__column:first-child {
+        padding-left: 5px;
+      }
+    }
 
     &--pending {
       border-color: $pending;
@@ -21,8 +18,4 @@
       border-color: $error;
     }
   }
-
-  &__column {
-    margin-bottom: 0;
-  }
 }
diff --git a/jujugui/static/gui/src/app/components/status/status.js b/jujugui/static/gui/src/app/components/status/status.js
@@ -189,20 +189,22 @@ class Status extends React.Component {
   render() {
 
     return (
-      <SharedStatus
-        generateApplicationOnClick={this._generateApplicationOnClick.bind(this)}
-        generateApplicationURL={this._generateApplicationURL.bind(this)}
-        generateCharmURL={this._generateCharmURL.bind(this)}
-        generateMachineOnClick={this._generateMachineOnClick.bind(this)}
-        generateMachineURL={this._generateMachineURL.bind(this)}
-        generateUnitOnClick={this._generateUnitOnClick.bind(this)}
-        generateUnitURL={this._generateUnitURL.bind(this)}
-        getIconPath={this._getIconPath.bind(this)}
-        model={this.props.model}
-        navigateToApplication={this._navigateToApplication.bind(this)}
-        navigateToCharm={this._navigateToCharm.bind(this)}
-        navigateToMachine={this._navigateToMachine.bind(this)}
-        valueStore={this.props.valueStore} />
+      <div className="v1">
+        <SharedStatus
+          generateApplicationOnClick={this._generateApplicationOnClick.bind(this)}
+          generateApplicationURL={this._generateApplicationURL.bind(this)}
+          generateCharmURL={this._generateCharmURL.bind(this)}
+          generateMachineOnClick={this._generateMachineOnClick.bind(this)}
+          generateMachineURL={this._generateMachineURL.bind(this)}
+          generateUnitOnClick={this._generateUnitOnClick.bind(this)}
+          generateUnitURL={this._generateUnitURL.bind(this)}
+          getIconPath={this._getIconPath.bind(this)}
+          model={this.props.model}
+          navigateToApplication={this._navigateToApplication.bind(this)}
+          navigateToCharm={this._navigateToCharm.bind(this)}
+          navigateToMachine={this._navigateToMachine.bind(this)}
+          valueStore={this.props.valueStore} />
+      </div>
     );
   }
 };

diff --git a/jujugui/static/gui/src/app/components/status/test-status.js b/jujugui/static/gui/src/app/components/status/test-status.js
@@ -41,7 +41,8 @@ describe('Status', function() {
 
   it('can navigate to charms from the app list', () => {
     const wrapper = renderComponent();
-    wrapper.props().navigateToCharm(
+    const instance = wrapper.instance();
+    instance._navigateToCharm(
       'u/who/django/xenial/42', {preventDefault: sinon.stub()});
     assert.equal(changeState.callCount, 1);
     assert.deepEqual(
@@ -50,7 +51,8 @@ describe('Status', function() {
 
   it('can navigate to apps from the relation list', () => {
     const wrapper = renderComponent();
-    wrapper.props().navigateToApplication('mysql', {preventDefault: sinon.stub()});
+    const instance = wrapper.instance();
+    instance._navigateToApplication('mysql', {preventDefault: sinon.stub()});
     assert.equal(changeState.callCount, 1);
     assert.deepEqual(changeState.args[0][0], {
       gui: {