From 257a337006f0ca45eba1f4f728f4fa9d88fd5861 Mon Sep 17 00:00:00 2001
From: George Sobolev <gsobolev@users.noreply.github.com>
Date: Tue, 25 Jul 2017 16:34:06 +0300
Subject: [PATCH] fix(react-grid): remove extra space at the right of
 GroupPanelCell when sorting is disabled (#220)

---
 .../src/templates/group-panel-cell.jsx        | 25 +++++++++++--------
 .../src/templates/group-panel-cell.test.jsx   |  2 +-
 .../src/templates/group-panel-cell.jsx        | 21 ++++++++++------
 .../src/templates/group-panel-cell.test.jsx   | 14 ++++++++++-
 4 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx
index fea288e037..7defed5b37 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx
@@ -37,18 +37,21 @@ export const GroupPanelCell = ({
         </span>
       )}
     </span>
-    &nbsp;
+
     {allowUngroupingByClick && (
-      <i
-        className="glyphicon glyphicon-remove"
-        style={{
-          top: '0',
-          fontSize: '9px',
-          margin: '-5px',
-          padding: '5px',
-        }}
-        onClick={() => groupByColumn({ columnName: column.name })}
-      />)}
+      <span>
+        &nbsp;
+        <i
+          className="glyphicon glyphicon-remove"
+          style={{
+            top: '0',
+            fontSize: '9px',
+            margin: '-5px',
+            padding: '5px',
+          }}
+          onClick={() => groupByColumn({ columnName: column.name })}
+        />
+      </span>)}
   </div>
 );
 
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.test.jsx
index 0e83bfa24f..a3fe67c727 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.test.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.test.jsx
@@ -12,7 +12,7 @@ describe('GroupPanelCell', () => {
       />,
     );
 
-    expect(tree.find('div > span').text()).toBe('Test');
+    expect(tree.find('div').text()).toBe('Test');
   });
 
   it('can render the ungroup button', () => {
diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx
index b5c2879fbb..5afb426c4d 100644
--- a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx
@@ -15,14 +15,19 @@ const styleSheet = createStyleSheet('GroupPanelCell', theme => ({
   },
 }));
 
-const label = (allowSorting, sortingDirection, column) => (
-  <TableSortLabel
-    active={allowSorting && !!sortingDirection}
-    direction={sortingDirection}
-  >
-    {column.title || column.name}
-  </TableSortLabel>
-);
+const label = (allowSorting, sortingDirection, column) => {
+  const title = column.title || column.name;
+  return allowSorting
+    ? (
+      <TableSortLabel
+        active={!!sortingDirection}
+        direction={sortingDirection}
+      >
+        {title}
+      </TableSortLabel>
+    )
+    : title;
+};
 
 
 const GroupPanelCellBase = ({
diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx
index 124bb32aa1..d19aca8c14 100644
--- a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx
@@ -13,7 +13,19 @@ describe('GroupPanelCell', () => {
       />,
     );
 
-    expect(tree.find('TableSortLabel').text()).toBe('Test');
+    expect(tree.text()).toBe('Test');
+  });
+
+  it('should not render the "TableSortLabel" component if sorting is disabled', () => {
+    const tree = mountWithStyles(
+      <GroupPanelCell
+        column={{
+          name: 'Test',
+        }}
+      />,
+    );
+
+    expect(tree.find('TableSortLabel').exists()).toBeFalsy();
   });
 
   it('should cancel sorting by using the Ctrl key', () => {