Visual cleanup of saved objects page (#19434)

* clean up the design of saved objects
* minor responsive fixes
* up the saved object per page setting to something reasonable

src/core_plugins/kibana/public/management/sections/objects/_objects.html

@@ -1,5 +1,5 @@
 <kbn-management-app section="kibana" class="kuiView">
-  <kbn-management-objects class="kuiViewContent kuiViewContent--constrainedWidth">
+  <kbn-management-objects>
     <div id="reactSavedObjectsTable"></div>
   </kbn-management-objects>
 </kbn-management-app>

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/__tests__/__snapshots__/objects_table.test.js.snap

@@ -123,93 +123,100 @@ exports[`ObjectsTable relationships should show the flyout 1`] = `
 `;
 
 exports[`ObjectsTable should render normally 1`] = `
-<div
-  style={
-    Object {
-      "padding": "0 1rem",
-    }
-  }
->
-  <Header
-    onExportAll={[Function]}
-    onImport={[Function]}
-    onRefresh={[Function]}
-    totalCount={4}
-  />
-  <EuiSpacer
-    size="xs"
-  />
-  <Table
-    filterOptions={
-      Array [
-        Object {
-          "name": "index-pattern",
-          "value": "index-pattern",
-          "view": "index-pattern (0)",
-        },
-        Object {
-          "name": "visualization",
-          "value": "visualization",
-          "view": "visualization (0)",
-        },
-        Object {
-          "name": "dashboard",
-          "value": "dashboard",
-          "view": "dashboard (0)",
-        },
-        Object {
-          "name": "search",
-          "value": "search",
-          "view": "search (0)",
-        },
-      ]
-    }
-    getEditUrl={[Function]}
-    goInApp={[Function]}
-    isSearching={false}
-    itemId="id"
-    items={
-      Array [
-        Object {
-          "icon": "indexPatternApp",
-          "id": "1",
-          "title": "MyIndexPattern*",
-          "type": "index-pattern",
-        },
-        Object {
-          "icon": "search",
-          "id": "2",
-          "title": "MySearch",
-          "type": "search",
-        },
-        Object {
-          "icon": "dashboardApp",
-          "id": "3",
-          "title": "MyDashboard",
-          "type": "dashboard",
-        },
-        Object {
-          "icon": "visualizeApp",
-          "id": "4",
-          "title": "MyViz",
-          "type": "visualization",
-        },
-      ]
-    }
-    onDelete={[Function]}
-    onExport={[Function]}
-    onQueryChange={[Function]}
-    onShowRelationships={[Function]}
-    onTableChange={[Function]}
-    pageIndex={0}
-    pageSize={15}
-    selectedSavedObjects={Array []}
-    selectionConfig={
+<EuiPage>
+  <EuiPageContent
+    horizontalPosition="center"
+    panelPaddingSize="l"
+    style={
       Object {
-        "onSelectionChange": [Function],
+        "marginBottom": 16,
+        "marginTop": 16,
+        "maxWidth": 1000,
       }
     }
-    totalItemCount={4}
-  />
-</div>
+    verticalPosition="center"
+  >
+    <Header
+      onExportAll={[Function]}
+      onImport={[Function]}
+      onRefresh={[Function]}
+      totalCount={4}
+    />
+    <EuiSpacer
+      size="xs"
+    />
+    <Table
+      filterOptions={
+        Array [
+          Object {
+            "name": "index-pattern",
+            "value": "index-pattern",
+            "view": "index-pattern (0)",
+          },
+          Object {
+            "name": "visualization",
+            "value": "visualization",
+            "view": "visualization (0)",
+          },
+          Object {
+            "name": "dashboard",
+            "value": "dashboard",
+            "view": "dashboard (0)",
+          },
+          Object {
+            "name": "search",
+            "value": "search",
+            "view": "search (0)",
+          },
+        ]
+      }
+      getEditUrl={[Function]}
+      goInApp={[Function]}
+      isSearching={false}
+      itemId="id"
+      items={
+        Array [
+          Object {
+            "icon": "indexPatternApp",
+            "id": "1",
+            "title": "MyIndexPattern*",
+            "type": "index-pattern",
+          },
+          Object {
+            "icon": "search",
+            "id": "2",
+            "title": "MySearch",
+            "type": "search",
+          },
+          Object {
+            "icon": "dashboardApp",
+            "id": "3",
+            "title": "MyDashboard",
+            "type": "dashboard",
+          },
+          Object {
+            "icon": "visualizeApp",
+            "id": "4",
+            "title": "MyViz",
+            "type": "visualization",
+          },
+        ]
+      }
+      onDelete={[Function]}
+      onExport={[Function]}
+      onQueryChange={[Function]}
+      onShowRelationships={[Function]}
+      onTableChange={[Function]}
+      pageIndex={0}
+      pageSize={15}
+      selectedSavedObjects={Array []}
+      selectionConfig={
+        Object {
+          "onSelectionChange": [Function],
+        }
+      }
+      totalItemCount={4}
+    />
+  </EuiPageContent>
+</EuiPage>
 `;

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/header/__tests__/__snapshots__/header.test.js.snap

@@ -2,11 +2,8 @@
 
 exports[`Header should render normally 1`] = `
 <React.Fragment>
-  <EuiSpacer
-    size="m"
-  />
   <EuiFlexGroup
-    alignItems="flexEnd"
+    alignItems="baseline"
     component="div"
     direction="row"
     gutterSize="l"
@@ -14,41 +11,66 @@ exports[`Header should render normally 1`] = `
     responsive={true}
     wrap={false}
   >
-    <EuiFlexItem
-      component="div"
-      grow={false}
-    >
-      <EuiTitle
-        size="m"
-      >
-        <h1>
-          Edit Saved Objects (Found 
-          4
-          )
-        </h1>
-      </EuiTitle>
-    </EuiFlexItem>
     <EuiFlexItem
       component="div"
       grow={false}
     >
       <EuiFlexGroup
-        alignItems="flexEnd"
+        alignItems="baseline"
         component="div"
         direction="row"
-        gutterSize="l"
-        justifyContent="spaceBetween"
-        responsive={true}
+        gutterSize="m"
+        justifyContent="flexStart"
+        responsive={false}
         wrap={false}
       >
         <EuiFlexItem
           component="div"
           grow={false}
         >
-          <EuiButton
+          <EuiTitle
+            size="m"
+          >
+            <h1>
+              Saved Objects
+            </h1>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={true}
+        >
+          <EuiTextColor
+            color="subdued"
+          >
+            <p>
+              4
+               in total
+            </p>
+          </EuiTextColor>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="m"
+        justifyContent="flexStart"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiButtonEmpty
             color="primary"
             data-test-subj="exportAllObjects"
-            fill={false}
             iconSide="left"
             iconType="exportAction"
             onClick={[Function]}
@@ -56,16 +78,15 @@ exports[`Header should render normally 1`] = `
             type="button"
           >
             Export Everything
-          </EuiButton>
+          </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem
           component="div"
           grow={false}
         >
-          <EuiButton
+          <EuiButtonEmpty
             color="primary"
             data-test-subj="importObjects"
-            fill={false}
             iconSide="left"
             iconType="importAction"
             onClick={[Function]}
@@ -73,15 +94,14 @@ exports[`Header should render normally 1`] = `
             type="button"
           >
             Import
-          </EuiButton>
+          </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem
           component="div"
           grow={false}
         >
-          <EuiButton
+          <EuiButtonEmpty
             color="primary"
-            fill={false}
             iconSide="left"
             iconType="refresh"
             onClick={[Function]}
@@ -89,13 +109,13 @@ exports[`Header should render normally 1`] = `
             type="button"
           >
             Refresh
-          </EuiButton>
+          </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexItem>
   </EuiFlexGroup>
   <EuiSpacer
-    size="s"
+    size="m"
   />
   <EuiText
     grow={true}

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/header/header.js

@@ -26,7 +26,7 @@ import {
   EuiFlexItem,
   EuiText,
   EuiTextColor,
-  EuiButton,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 
 export const Header = ({
@@ -36,48 +36,56 @@ export const Header = ({
   totalCount,
 }) => (
   <Fragment>
-    <EuiSpacer size="m"/>
-    <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
+    <EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline">
       <EuiFlexItem grow={false}>
-        <EuiTitle>
-          <h1>Edit Saved Objects (Found {totalCount})</h1>
-        </EuiTitle>
+        <EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h1>Saved Objects</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTextColor color="subdued">
+              <p>{totalCount} in total</p>
+            </EuiTextColor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
+        <EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiButtonEmpty
               size="s"
               iconType="exportAction"
               data-test-subj="exportAllObjects"
               onClick={onExportAll}
             >
               Export Everything
-            </EuiButton>
+            </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiButtonEmpty
               size="s"
               iconType="importAction"
               data-test-subj="importObjects"
               onClick={onImport}
             >
               Import
-            </EuiButton>
+            </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiButtonEmpty
               size="s"
               iconType="refresh"
               onClick={onRefresh}
             >
               Refresh
-            </EuiButton>
+            </EuiButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
     </EuiFlexGroup>
-    <EuiSpacer size="s"/>
+    <EuiSpacer size="m"/>
     <EuiText>
       <p>
         <EuiTextColor color="subdued">

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__tests__/__snapshots__/table.test.js.snap

@@ -26,7 +26,6 @@ exports[`Table should render normally 1`] = `
           iconType="trash"
           isDisabled={false}
           onClick={[Function]}
-          size="s"
           type="button"
         >
           Delete
@@ -38,7 +37,6 @@ exports[`Table should render normally 1`] = `
           iconType="exportAction"
           isDisabled={false}
           onClick={[Function]}
-          size="s"
           type="button"
         >
           Export

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/table.js

@@ -170,7 +170,6 @@ export class Table extends PureComponent {
               key="deleteSO"
               iconType="trash"
               color="danger"
-              size="s"
               onClick={onDelete}
               isDisabled={selectedSavedObjects.length === 0}
             >
@@ -179,7 +178,6 @@ export class Table extends PureComponent {
             <EuiButton
               key="exportSO"
               iconType="exportAction"
-              size="s"
               onClick={onExport}
               isDisabled={selectedSavedObjects.length === 0}
             >

src/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js

@@ -34,7 +34,9 @@ import {
   EuiOverlayMask,
   EUI_MODAL_CONFIRM_BUTTON,
   EuiCheckboxGroup,
-  EuiToolTip
+  EuiToolTip,
+  EuiPage,
+  EuiPageContent,
 } from '@elastic/eui';
 import {
   retrieveAndExportDocs,
@@ -75,7 +77,7 @@ export class ObjectsTable extends Component {
     this.state = {
       totalCount: 0,
       page: 0,
-      perPage: props.perPageConfig || 10,
+      perPage: props.perPageConfig || 50,
       savedObjects: [],
       savedObjectCounts: INCLUDED_TYPES.reduce((accum, type) => {
         accum[type] = 0;
@@ -464,39 +466,41 @@ export class ObjectsTable extends Component {
     }));
 
     return (
-      <div style={{ padding: '0 1rem' }}>
-        {this.renderFlyout()}
-        {this.renderRelationships()}
-        {this.renderDeleteConfirmModal()}
-        {this.renderExportAllOptionsModal()}
-        <Header
-          onExportAll={() =>
-            this.setState({ isShowingExportAllOptionsModal: true })
-          }
-          onImport={this.showImportFlyout}
-          onRefresh={this.refreshData}
-          totalCount={totalItemCount}
-        />
-        <EuiSpacer size="xs" />
-        <Table
-          itemId={'id'}
-          selectionConfig={selectionConfig}
-          selectedSavedObjects={selectedSavedObjects}
-          onQueryChange={this.onQueryChange}
-          onTableChange={this.onTableChange}
-          filterOptions={filterOptions}
-          onExport={this.onExport}
-          onDelete={this.onDelete}
-          getEditUrl={this.props.getEditUrl}
-          goInApp={this.props.goInApp}
-          pageIndex={page}
-          pageSize={perPage}
-          items={savedObjects}
-          totalItemCount={totalItemCount}
-          isSearching={isSearching}
-          onShowRelationships={this.onShowRelationships}
-        />
-      </div>
+      <EuiPage>
+        <EuiPageContent verticalPosition="center" horizontalPosition="center" style={{ maxWidth: 1000, marginTop: 16, marginBottom: 16 }}>
+          {this.renderFlyout()}
+          {this.renderRelationships()}
+          {this.renderDeleteConfirmModal()}
+          {this.renderExportAllOptionsModal()}
+          <Header
+            onExportAll={() =>
+              this.setState({ isShowingExportAllOptionsModal: true })
+            }
+            onImport={this.showImportFlyout}
+            onRefresh={this.refreshData}
+            totalCount={totalItemCount}
+          />
+          <EuiSpacer size="xs" />
+          <Table
+            itemId={'id'}
+            selectionConfig={selectionConfig}
+            selectedSavedObjects={selectedSavedObjects}
+            onQueryChange={this.onQueryChange}
+            onTableChange={this.onTableChange}
+            filterOptions={filterOptions}
+            onExport={this.onExport}
+            onDelete={this.onDelete}
+            getEditUrl={this.props.getEditUrl}
+            goInApp={this.props.goInApp}
+            pageIndex={page}
+            pageSize={perPage}
+            items={savedObjects}
+            totalItemCount={totalItemCount}
+            isSearching={isSearching}
+            onShowRelationships={this.onShowRelationships}
+          />
+        </EuiPageContent>
+      </EuiPage>
     );
   }
 }

src/core_plugins/kibana/public/management/styles/main.less

@@ -24,6 +24,11 @@ kbn-management-objects-view {
   text-transform: capitalize;
 }
 
+kbn-management-objects {
+  background: @globalColorLightestGray;
+  min-height: 100vh;
+}
+
 kbn-management-app {
   li.current-page {
     font-size: 1.5em;

src/core_plugins/kibana/ui_setting_defaults.js

@@ -54,7 +54,7 @@ export function getUiSettingDefaults() {
     'sort:options': {
       name: 'Sort options',
       value: '{ "unmapped_type": "boolean" }',
-      description: `<a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-sort.html" 
+      description: `<a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-sort.html"
         target="_blank" rel="noopener noreferrer">Options</a> for the Elasticsearch sort parameter`,
       type: 'json'
     },
@@ -210,8 +210,8 @@ export function getUiSettingDefaults() {
     'visualization:tileMap:maxPrecision': {
       name: 'Maximum tile map precision',
       value: 7,
-      description: `The maximum geoHash precision displayed on tile maps: 7 is high, 10 is very high, 12 is the max. 
-      <a href="http://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-geohashgrid-aggregation.html#_cell_dimensions_at_the_equator" 
+      description: `The maximum geoHash precision displayed on tile maps: 7 is high, 10 is very high, 12 is the max.
+      <a href="http://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-geohashgrid-aggregation.html#_cell_dimensions_at_the_equator"
       target="_blank" rel="noopener noreferrer">Explanation of cell dimensions</a>`,
       category: ['visualization'],
     },
@@ -349,7 +349,7 @@ export function getUiSettingDefaults() {
     },
     'savedObjects:perPage': {
       name: 'Objects per page',
-      value: 5,
+      value: 20,
       type: 'number',
       description: `Number of objects to show per page in the load dialog`
     },
@@ -414,7 +414,7 @@ export function getUiSettingDefaults() {
       description: `The list of ranges to show in the Quick section of the time picker.
         This should be an array of objects, with each object containing "from", "to" (see
         <a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/common-options.html#date-math"
-        target="_blank" rel="noopener noreferrer">accepted formats</a>), 
+        target="_blank" rel="noopener noreferrer">accepted formats</a>),
         "display" (the title to be displayed), and "section" (which column to put the option in).`
     },
     'dashboard:defaultDarkTheme': {