Homepage / index pattern design cleanup (#16005)

Rebuilds most of the homepage using EUI components. Adjusts styles to be closer to mocks.

src/core_plugins/kibana/public/home/components/feature_directory.js

@@ -2,11 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Synopsis } from './synopsis';
 import {
-  KuiTabs,
-  KuiTab,
-  KuiFlexItem,
-  KuiFlexGrid,
-} from 'ui_framework/components';
+  EuiTabs,
+  EuiTab,
+  EuiFlexItem,
+  EuiFlexGrid,
+  EuiPage,
+  EuiTitle,
+  EuiSpacer,
+} from '@elastic/eui';
+
 import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 
 const ALL_TAB_ID = 'all';
@@ -51,14 +55,14 @@ export class FeatureDirectory extends React.Component {
 
   renderTabs = () => {
     return this.tabs.map((tab, index) => (
-      <KuiTab
+      <EuiTab
         className="homeDirectoryTab"
         onClick={() => this.onSelectedTabChanged(tab.id)}
         isSelected={tab.id === this.state.selectedTabId}
         key={index}
       >
         {tab.name}
-      </KuiTab>
+      </EuiTab>
     ));
   }
 
@@ -75,37 +79,36 @@ export class FeatureDirectory extends React.Component {
       })
       .map((directory) => {
         return (
-          <KuiFlexItem key={directory.id}>
+          <EuiFlexItem key={directory.id}>
             <Synopsis
               description={directory.description}
               iconUrl={this.props.addBasePath(directory.icon)}
               title={directory.title}
               url={this.props.addBasePath(directory.path)}
+              wrapInPanel
             />
-          </KuiFlexItem>
+          </EuiFlexItem>
         );
       });
   };
 
   render() {
     return (
-      <div className="kuiView home">
-        <div className="kuiViewContent">
-          <div className="kuiViewContentItem kuiVerticalRhythmXLarge">
-            <h1 className="kuiTitle ">
-              Directory
-            </h1>
-          </div>
-          <div className="kuiViewContentItem kuiVerticalRhythmXLarge">
-            <KuiTabs className="homeDirectoryTabs">
-              {this.renderTabs()}
-            </KuiTabs>
-            <KuiFlexGrid columns={4} className="homeDirectory">
-              { this.renderDirectories() }
-            </KuiFlexGrid>
-          </div>
-        </div>
-      </div>
+      <EuiPage className="home">
+        <EuiTitle size="l">
+          <h1>
+            Directory
+          </h1>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        <EuiTabs className="homeDirectoryTabs">
+          {this.renderTabs()}
+        </EuiTabs>
+        <EuiSpacer />
+        <EuiFlexGrid columns={4}>
+          { this.renderDirectories() }
+        </EuiFlexGrid>
+      </EuiPage>
     );
   }
 }

src/core_plugins/kibana/public/home/components/home.js

@@ -20,6 +20,7 @@ import {
   EuiFlexItem,
   EuiFlexGrid,
   EuiText,
+  EuiTextColor,
 } from '@elastic/eui';
 
 import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
@@ -56,7 +57,7 @@ export function Home({ addBasePath, directories }) {
     return (
       <div className="kuiVerticalRhythm">
         <KuiCardGroup>
-          <KuiCard style={cardStyle}>
+          <KuiCard style={cardStyle} className="euiPanel">
             <KuiCardDescription>
               <KuiCardDescriptionTitle>
                 <img
@@ -77,12 +78,12 @@ export function Home({ addBasePath, directories }) {
                 buttonType="secondary"
                 href={addBasePath(`${kbnBaseUrl}#/home/tutorial_directory/logging`)}
               >
-                Add data
+                Add log data
               </KuiLinkButton>
             </KuiCardFooter>
           </KuiCard>
 
-          <KuiCard style={cardStyle}>
+          <KuiCard style={cardStyle} className="euiPanel">
             <KuiCardDescription>
               <KuiCardDescriptionTitle>
                 <img
@@ -103,19 +104,19 @@ export function Home({ addBasePath, directories }) {
                 buttonType="secondary"
                 href={addBasePath(`${kbnBaseUrl}#/home/tutorial_directory/metrics`)}
               >
-                Add data
+                Add metric data
               </KuiLinkButton>
             </KuiCardFooter>
           </KuiCard>
 
-          <KuiCard style={cardStyle}>
+          <KuiCard style={cardStyle} className="euiPanel">
             <KuiCardDescription>
               <KuiCardDescriptionTitle>
                 <img
                   src={addBasePath('/plugins/kibana/assets/app_security.svg')}
                 />
                 <p>
-                  Security Analytics
+                  Security analytics
                 </p>
               </KuiCardDescriptionTitle>
 
@@ -129,7 +130,7 @@ export function Home({ addBasePath, directories }) {
                 buttonType="secondary"
                 href={addBasePath(`${kbnBaseUrl}#/home/tutorial_directory/security`)}
               >
-                Add data
+                Add security events
               </KuiLinkButton>
             </KuiCardFooter>
           </KuiCard>
@@ -149,33 +150,32 @@ export function Home({ addBasePath, directories }) {
           <EuiTitle size="l">
             <h1>Add Data to Kibana</h1>
           </EuiTitle>
+          <EuiText>
+            <p>
+              Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems.
+            </p>
+          </EuiText>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={false}>
-              <p className="kuiText kuiSubduedText">
+          <EuiTextColor color="subdued">
+            <EuiText>
+              <p>
                 Data already in Elasticsearch?
               </p>
-            </EuiFlexItem>
-
-            <EuiFlexItem grow={false}>
-              <KuiLinkButton
-                buttonType="secondary"
-                href={addBasePath('/app/kibana#/management/kibana/index')}
-              >
-                Set up index patterns
-              </KuiLinkButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
+            </EuiText>
+          </EuiTextColor>
+          <EuiSpacer size="s" />
+          <a href="/app/kibana#/management/kibana/index" className="euiButton euiButton--primary euiButton--small">
+            <span className="euiButton__content">
+              Set up index patterns
+            </span>
+          </a>
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <p className="kuiText kuiSubduedText kuiVerticalRhythm kuiVerticalRhythmSmall">
-        These turnkey solutions will help you quickly add data into Kibana and turn it into
-        pre-built dashboards and monitoring systems.
-      </p>
+      <EuiSpacer />
+
 
       { renderPromo() }
 

src/core_plugins/kibana/public/home/components/synopsis.js

@@ -2,39 +2,66 @@ import './synopsis.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  KuiFlexGroup,
-  KuiFlexItem
-} from 'ui_framework/components';
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiTitle,
+  EuiText,
+  EuiTextColor,
+} from '@elastic/eui';
 
-export function Synopsis({ description, iconUrl, title, url }) {
-  let img;
+export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
+  let optionalImg;
   if (iconUrl) {
-    img = (
-      <img
-        className="synopsisIcon"
-        src={iconUrl}
-        alt=""
-      />
+    optionalImg = (
+      <EuiFlexItem grow={false}>
+        <img
+          className="synopsisIcon"
+          src={iconUrl}
+          alt=""
+        />
+      </EuiFlexItem>
     );
   }
 
+  const content = (
+    <EuiFlexGroup>
+      {optionalImg}
+      <EuiFlexItem className="synopsisContent">
+        <EuiTitle size="s" className="synopsisTitle">
+          <h4>
+            {title}
+          </h4>
+        </EuiTitle>
+        <EuiText className="synopsisBody">
+          <p>
+            <EuiTextColor color="subdued">
+              {description}
+            </EuiTextColor>
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  let synopsisDisplay = content;
+  if (wrapInPanel) {
+    synopsisDisplay = (
+      <EuiPanel className="synopsisPanel">
+        {content}
+      </EuiPanel>
+    );
+  }
+
+
+
   return (
     <a
       href={url}
-      className="kuiLink synopsis"
+      className="euiLink synopsis"
       data-test-subj={`homeSynopsisLink${title.toLowerCase()}`}
     >
-      <KuiFlexGroup>
-        <KuiFlexItem grow={false}>{img}</KuiFlexItem>
-        <KuiFlexItem className="synopsisContent">
-          <h4 className="kuiTextTitle synopsisTitle">
-            {title}
-          </h4>
-          <p className="kuiText kuiSubduedText">
-            {description}
-          </p>
-        </KuiFlexItem>
-      </KuiFlexGroup>
+      {synopsisDisplay}
     </a>
   );
 }

src/core_plugins/kibana/public/home/components/synopsis.less

@@ -1,19 +1,33 @@
 @import (reference) "~ui/styles/variables.less";
 
+.synopsis {
+  display: flex;
+  flex-grow: 1;
+}
+
 .synopsis:hover {
   text-decoration: none;
-  .kuiTextTitle {
+  .synopsisTitle {
     text-decoration: underline;
   }
 }
 
-.synopsisContent {
-  margin-left: 10px !important;
+.synopsis:focus {
+  text-decoration: none;
+
+  .synopsisPanel {
+    border: solid 1px @globalColorBlue;
+  }
+
+  .synopsisBody {
+    text-decoration: none;
+  }
 }
 
 .synopsisTitle {
   font-size: 16px;
   font-weight: normal;
+  color: @globalColorBlue;
 }
 
 .synopsisIcon {

src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`should render content with markdown 1`] = `
 <div
-  className="kuiText kuiSubduedText tutorialContent markdown-body"
+  className="euiText euiTextColor--subdued tutorialContent markdown-body"
   dangerouslySetInnerHTML={
     Object {
       "__html": "<p>I am <em>some</em> <a href=\\"https://en.wikipedia.org/wiki/Content\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">content</a> with <code>markdown</code></p>