Index management table made more responsive (#28882) (#29988)

* index management better responsive

* address eagle-eye caroline feedback

* fix some word break issues

x-pack/plugins/index_management/public/_index_management.scss

@@ -1,17 +1,28 @@
-#indReactRoot {
+#indReactRoot, #indexManagementReactRoot {
   background-color: $euiColorLightestShade;
 }
 
+.indTable {
+
+  // The index table is a bespoke table and can't make use of EuiBasicTable's width settings
+  thead th.indTable__header--name {
+    width: 25%;
+  }
+
+  // The index name can't contain spaces, so this is a rare case of break being OK.
+  .indTable__cell--name {
+    word-break: break-all;
+  }
+}
+
 .indTable__link {
   text-align: left;
 }
 
-.indTable__horizontalScrollContainer {
-  overflow-x: auto;
-  max-width: 100%;
+.indTable__link {
+  text-align: left;
 }
 
-.indTable__horizontalScroll {
-  min-width: 800px;
-  width: 100%;
+.indDetail__codeBlock {
+  background: transparent;
 }

x-pack/plugins/index_management/public/main.html

@@ -1,3 +1,3 @@
 <kbn-management-app section="elasticsearch/index_management">
-  <div id="indexManagementReactRoot" class="indTable__horizontalScrollContainer"></div>
+  <div id="indexManagementReactRoot"></div>
 </kbn-management-app>

x-pack/plugins/index_management/public/sections/index_list/components/index_list/index_list.js

@@ -21,7 +21,7 @@ export class IndexList extends React.PureComponent {
       },
     } = this.props;
     return (
-      <div className="indTable__horizontalScroll im-snapshotTestSubject">
+      <div className="im-snapshotTestSubject">
         <IndexTable filterFromURI={filter}/>
         <DetailPanel />
       </div>

x-pack/plugins/index_management/public/sections/index_list/components/index_table/index_table.js

@@ -10,7 +10,6 @@ import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { Route } from 'react-router-dom';
 import { NoMatch } from '../../../no_match';
 import { healthToColor } from '../../../../services';
-import '../../../../styles/table.less';
 import { REFRESH_RATE_INDEX_LIST } from '../../../../constants';
 
 import {
@@ -204,8 +203,8 @@ export class IndexTableUi extends Component {
           onSort={() => this.onSort(fieldName)}
           isSorted={isSorted}
           isSortAscending={isSortAscending}
+          className={'indTable__header--' + fieldName}
           data-test-subj={`indexTableHeaderCell-${fieldName}`}
-          className={'indexTable__header--' + fieldName}
         >
           {label}
         </EuiTableHeaderCell>
@@ -245,6 +244,8 @@ export class IndexTableUi extends Component {
           key={`${fieldName}-${name}`}
           truncateText={false}
           data-test-subj={`indexTableCell-${fieldName}`}
+          className={'indTable__cell--' + fieldName}
+          header={fieldName}
         >
           {this.buildRowCell(fieldName, value, index)}
         </EuiTableRowCell>
@@ -283,6 +284,7 @@ export class IndexTableUi extends Component {
       return (
         <EuiTableRow
           isSelected={this.isItemSelected(name) || name === detailPanelIndexName}
+          isSelectable
           key={`${name}-row`}
         >
           <EuiTableRowCellCheckbox key={`checkbox-${name}`}>
@@ -421,7 +423,7 @@ export class IndexTableUi extends Component {
             <Fragment>
               <EuiFlexItem>
                 <EuiSearchBar
-                  filters={this.getFilters()}
+                  filters={(this.getFilters().length > 0) ? this.getFilters() : null}
                   defaultQuery={filter}
                   query={filter}
                   box={{
@@ -461,20 +463,22 @@ export class IndexTableUi extends Component {
         <EuiSpacer size="m" />
 
         {indices.length > 0 ? (
-          <EuiTable>
-            <EuiTableHeader>
-              <EuiTableHeaderCellCheckbox>
-                <EuiCheckbox
-                  id="selectAllIndexes"
-                  checked={this.areAllItemsSelected()}
-                  onChange={this.toggleAll}
-                  type="inList"
-                />
-              </EuiTableHeaderCellCheckbox>
-              {this.buildHeader()}
-            </EuiTableHeader>
-            <EuiTableBody>{this.buildRows()}</EuiTableBody>
-          </EuiTable>
+          <div style={{ maxWidth: '100%', overflow: 'auto' }}>
+            <EuiTable className="indTable">
+              <EuiTableHeader>
+                <EuiTableHeaderCellCheckbox>
+                  <EuiCheckbox
+                    id="selectAllIndexes"
+                    checked={this.areAllItemsSelected()}
+                    onChange={this.toggleAll}
+                    type="inList"
+                  />
+                </EuiTableHeaderCellCheckbox>
+                {this.buildHeader()}
+              </EuiTableHeader>
+              <EuiTableBody>{this.buildRows()}</EuiTableBody>
+            </EuiTable>
+          </div>
         ) : (
           emptyState
         )}

x-pack/plugins/index_management/public/styles/table.less

@@ -1,24 +0,0 @@
-#indexManagementReactRoot {
-  background-color: #F5F7FA;
-}
-
-.indTable__link {
-  text-align: left;
-}
-
-.indexTable__header--name {
-  width: 25%;
-}
-.indTable__horizontalScrollContainer {
-  overflow-x: auto;
-  max-width: 100%;
-  min-height: 100vh;
-}
-.indTable__horizontalScroll {
-  min-width: 800px;
-  width: 100%;
-}
-
-.indDetail__codeBlock {
-  background: transparent;
-}