Upgrade xpack to eui@3.0.0 (#20930)

* upgrade to eui@3.0.1
elastic · Jul 21, 2018 · 6ecc990 · 6ecc990
1 parent cdafa2f
commit 6ecc990
Show file tree

Hide file tree

Showing 14 changed files with 700 additions and 232 deletions.
diff --git a/...core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap b/...core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
@@ -6,12 +6,12 @@ exports[`after fetch hideWriteControls 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody>
+  <EuiPageBody
+    restrictWidth={true}
+  >
     <EuiPageContent
-      className="dashboardLandingPage__content"
       horizontalPosition="center"
       panelPaddingSize="l"
-      verticalPosition="center"
     >
       <EuiText
         grow={true}
@@ -36,12 +36,12 @@ exports[`after fetch initialFilter 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody>
+  <EuiPageBody
+    restrictWidth={true}
+  >
     <EuiPageContent
-      className="dashboardLandingPage__content"
       horizontalPosition="center"
       panelPaddingSize="l"
-      verticalPosition="center"
     >
       <div>
         <EuiFlexGroup
@@ -188,12 +188,12 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody>
+  <EuiPageBody
+    restrictWidth={true}
+  >
     <EuiPageContent
-      className="dashboardLandingPage__content"
       horizontalPosition="center"
       panelPaddingSize="l"
-      verticalPosition="center"
     >
       <div>
         <EuiEmptyPrompt
@@ -248,12 +248,12 @@ exports[`after fetch renders table rows 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody>
+  <EuiPageBody
+    restrictWidth={true}
+  >
     <EuiPageContent
-      className="dashboardLandingPage__content"
       horizontalPosition="center"
       panelPaddingSize="l"
-      verticalPosition="center"
     >
       <div>
         <EuiFlexGroup
@@ -400,12 +400,12 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody>
+  <EuiPageBody
+    restrictWidth={true}
+  >
     <EuiPageContent
-      className="dashboardLandingPage__content"
       horizontalPosition="center"
       panelPaddingSize="l"
-      verticalPosition="center"
     >
       <div>
         <EuiFlexGroup
@@ -583,6 +583,8 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
   data-test-subj="dashboardLandingPage"
   restrictWidth={false}
 >
-  <EuiPageBody />
+  <EuiPageBody
+    restrictWidth={true}
+  />
 </EuiPage>
 `;
diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -454,7 +454,7 @@ export class DashboardListing extends React.Component {
     }
 
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" className="dashboardLandingPage__content">
+      <EuiPageContent horizontalPosition="center">
         {this.renderListingOrEmptyState()}
       </EuiPageContent>
     );
@@ -463,7 +463,7 @@ export class DashboardListing extends React.Component {
   render() {
     return (
       <EuiPage data-test-subj="dashboardLandingPage" className="dashboardLandingPage">
-        <EuiPageBody>
+        <EuiPageBody restrictWidth>
           {this.renderPageContent()}
         </EuiPageBody>
       </EuiPage>

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -438,8 +438,3 @@ dashboard-viewport-provider {
   min-height: 100vh;
   background: @globalColorLightestGray;
 }
-
-.dashboardLandingPage__content {
-  max-width: 1000px;
-  margin: auto;
-}
diff --git a/x-pack/package.json b/x-pack/package.json
@@ -77,7 +77,7 @@
     "yargs": "4.7.1"
   },
   "dependencies": {
-    "@elastic/eui": "1.1.0",
+    "@elastic/eui": "3.0.0",
     "@elastic/node-crypto": "0.1.2",
     "@elastic/node-phantom-simple": "2.2.4",
     "@elastic/numeral": "2.3.2",

diff --git a/...plugins/index_management/public/sections/index_list/components/index_table/index_table.js b/...plugins/index_management/public/sections/index_list/components/index_table/index_table.js
@@ -32,7 +32,8 @@ import {
   EuiTableRowCellCheckbox,
   EuiTitle,
   EuiText,
-  EuiPageBody
+  EuiPageBody,
+  EuiPageContent
 } from '@elastic/eui';
 
 import { IndexActionsContextMenu } from '../../components';
@@ -216,78 +217,80 @@ export class IndexTable extends Component {
     return (
       <EuiPage>
         <EuiPageBody>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="l">
-                <h1>Index management</h1>
-              </EuiTitle>
-              <EuiSpacer size="s" />
-              <EuiText>
-                <p>Update your Elasticsearch indices individually or in bulk</p>
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiSwitch
-                id="checkboxShowSystemIndices"
-                checked={showSystemIndices}
-                onChange={event => showSystemIndicesChanged(event.target.checked)}
-                label="Include system indices"
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer />
-          <EuiFlexGroup gutterSize="l" alignItems="center">
-            {atLeastOneItemSelected ? (
+          <EuiPageContent>
+            <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
               <EuiFlexItem grow={false}>
-                <Route
-                  key="menu"
-                  render={() => (
-                    <IndexActionsContextMenu
-                      indexNames={Object.keys(selectedIndicesMap)}
-                      resetSelection={() => {
-                        this.setState({ selectedIndicesMap: {} });
-                      }}
-                    />
-                  )}
+                <EuiTitle size="l">
+                  <h1>Index management</h1>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <EuiText>
+                  <p>Update your Elasticsearch indices individually or in bulk</p>
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiSwitch
+                  id="checkboxShowSystemIndices"
+                  checked={showSystemIndices}
+                  onChange={event => showSystemIndicesChanged(event.target.checked)}
+                  label="Include system indices"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer />
+            <EuiFlexGroup gutterSize="l" alignItems="center">
+              {atLeastOneItemSelected ? (
+                <EuiFlexItem grow={false}>
+                  <Route
+                    key="menu"
+                    render={() => (
+                      <IndexActionsContextMenu
+                        indexNames={Object.keys(selectedIndicesMap)}
+                        resetSelection={() => {
+                          this.setState({ selectedIndicesMap: {} });
+                        }}
+                      />
+                    )}
+                  />
+                </EuiFlexItem>
+              ) : null}
+              <EuiFlexItem>
+                <EuiFieldSearch
+                  fullWidth
+                  value={filter}
+                  onChange={event => {
+                    filterChanged(event.target.value);
+                  }}
+                  data-test-subj="indexTableFilterInput"
+                  placeholder="Search"
+                  aria-label="Search indices"
                 />
               </EuiFlexItem>
-            ) : null}
-            <EuiFlexItem>
-              <EuiFieldSearch
-                fullWidth
-                value={filter}
-                onChange={event => {
-                  filterChanged(event.target.value);
-                }}
-                data-test-subj="indexTableFilterInput"
-                placeholder="Search"
-                aria-label="Search indices"
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
+            </EuiFlexGroup>
 
-          <EuiSpacer size="m" />
+            <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>
-          ) : (
-            <NoMatch />
-          )}
-          <EuiSpacer size="m" />
-          {indices.length > 0 ? this.renderPager() : null}
+            {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>
+            ) : (
+              <NoMatch />
+            )}
+            <EuiSpacer size="m" />
+            {indices.length > 0 ? this.renderPager() : null}
+          </EuiPageContent>
         </EuiPageBody>
       </EuiPage>
     );

diff --git a/x-pack/plugins/index_management/public/styles/table.less b/x-pack/plugins/index_management/public/styles/table.less
@@ -1,3 +1,7 @@
+#indexManagementReactRoot {
+  background-color: #F5F5F5;
+}
+
 .indexTable__link {
   text-align: left;
 }

diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/license_status.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/license_status.test.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LicenseStatus component should display display warning is expired 1`] = `"<div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg class=\\"euiIcon euiIcon--medium euiIcon--danger\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z\\"></path><path d=\\"M7 6h1v5H7zM7 12h1v1H7z\\"></path></g></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h2 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--large\\">Your Platinum license has expired</h2></div></div></div></div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span data-test-subj=\\"licenseSubText\\"><div class=\\"euiText\\"><span class=\\"euiTextColor euiTextColor--subdued\\">Your license expired on <strong></strong></span></div></span></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div></div>"`;
+exports[`LicenseStatus component should display display warning is expired 1`] = `"<div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg class=\\"euiIcon euiIcon--medium euiIcon--danger\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z\\"></path><path d=\\"M7 6h1v5H7zM7 12h1v1H7z\\"></path></g></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h2 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--large\\">Your Platinum license has expired</h2></div></div></div></div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span data-test-subj=\\"licenseSubText\\"><div class=\\"euiText\\"><div class=\\"euiTextColor euiTextColor--subdued\\">Your license expired on <strong></strong></div></div></span></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div></div>"`;
 
-exports[`LicenseStatus component should display normally when license is active 1`] = `"<div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg class=\\"euiIcon euiIcon--medium euiIcon--success\\" focusable=\\"false\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-1.125-5a.377.377 0 0 0 .266-.11l5.25-5.25a.376.376 0 0 0-.531-.53l-4.985 4.985L4.141 7.36a.376.376 0 0 0-.531.53l3 3c.073.073.17.11.265.11z\\" fill-rule=\\"evenodd\\"></path></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h2 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--large\\">Your Gold license is active</h2></div></div></div></div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span data-test-subj=\\"licenseSubText\\"><div class=\\"euiText\\"><span class=\\"euiTextColor euiTextColor--subdued\\">Your license will expire on <strong>October 12, 2099 7:00 PM EST</strong></span></div></span></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div></div>"`;
+exports[`LicenseStatus component should display normally when license is active 1`] = `"<div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg class=\\"euiIcon euiIcon--medium euiIcon--success\\" focusable=\\"false\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-1.125-5a.377.377 0 0 0 .266-.11l5.25-5.25a.376.376 0 0 0-.531-.53l-4.985 4.985L4.141 7.36a.376.376 0 0 0-.531.53l3 3c.073.073.17.11.265.11z\\" fill-rule=\\"evenodd\\"></path></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h2 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--large\\">Your Gold license is active</h2></div></div></div></div><div class=\\"euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span data-test-subj=\\"licenseSubText\\"><div class=\\"euiText\\"><div class=\\"euiTextColor euiTextColor--subdued\\">Your license will expire on <strong>October 12, 2099 7:00 PM EST</strong></div></div></span></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div></div>"`;