add isBeta flag to add data module schema (elastic#20049) (elastic#20205

) * add isBeta flag to add data module schema * remove changes to packages/kbn-es/yarn.lock * do not put empty flex item in dom * update snapshots
bmcconaghy · Jun 25, 2018 · 5e4776f · 5e4776f
1 parent d71c44f
commit 5e4776f
Show file tree

Hide file tree

Showing 11 changed files with 272 additions and 44 deletions.
diff --git a/src/core_plugins/kibana/common/tutorials/tutorial_schema.js b/src/core_plugins/kibana/common/tutorials/tutorial_schema.js
@@ -91,6 +91,7 @@ export const tutorialSchema = {
   id: Joi.string().regex(/^[a-zA-Z0-9-]+$/).required(),
   category: Joi.string().valid(Object.values(TUTORIAL_CATEGORY)).required(),
   name: Joi.string().required(),
+  isBeta: Joi.boolean().default(false),
   shortDescription: Joi.string().required(),
   euiIconType: Joi.string(), //EUI icon type string, one of https://elastic.github.io/eui/#/icons
   longDescription: Joi.string().required(),

diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
@@ -192,6 +192,7 @@ exports[`directories should render ADMIN directory entry in "Manage" panel 1`] =
             <Synopsis
               description="Manage the index patterns that help retrieve your data from Elasticsearch."
               iconType="indexPatternApp"
+              isBeta={false}
               title="Index Patterns"
               url="base_path/index_management_landing_page"
             />
@@ -296,6 +297,7 @@ exports[`directories should render DATA directory entry in "Explore Data" panel
             <Synopsis
               description="Display and share a collection of visualizations and saved searches."
               iconType="dashboardApp"
+              isBeta={false}
               title="Dashboard"
               url="base_path/dashboard_landing_page"
             />

diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap
@@ -109,6 +109,51 @@ exports[`props iconUrl 1`] = `
 </a>
 `;
 
+exports[`props isBeta 1`] = `
+<a
+  className="euiLink synopsis"
+  data-test-subj="homeSynopsisLinkgreat tutorial"
+  href="link_to_item"
+>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      className="synopsisContent"
+      component="div"
+      grow={true}
+    >
+      <EuiTitle
+        className="synopsisTitle"
+        size="s"
+      >
+        <h4>
+          Great tutorial
+        </h4>
+      </EuiTitle>
+      <EuiText
+        className="synopsisBody"
+        grow={true}
+      >
+        <p>
+          <EuiTextColor
+            color="subdued"
+          >
+            this is a great tutorial about...
+          </EuiTextColor>
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</a>
+`;
+
 exports[`render 1`] = `
 <a
   className="euiLink synopsis"

diff --git a/src/core_plugins/kibana/public/home/components/synopsis.js b/src/core_plugins/kibana/public/home/components/synopsis.js
@@ -30,7 +30,7 @@ import {
   EuiIcon,
 } from '@elastic/eui';
 
-export function Synopsis({ description, iconUrl, iconType, title, url, wrapInPanel, onClick }) {
+export function Synopsis({ description, iconUrl, iconType, title, url, wrapInPanel, onClick, isBeta }) {
   let optionalImg;
   if (iconUrl) {
     optionalImg = (
@@ -76,7 +76,7 @@ export function Synopsis({ description, iconUrl, iconType, title, url, wrapInPan
   let synopsisDisplay = content;
   if (wrapInPanel) {
     synopsisDisplay = (
-      <EuiPanel className="synopsisPanel">
+      <EuiPanel className="synopsisPanel" betaBadgeLabel={isBeta ? 'BETA' : null}>
         {content}
       </EuiPanel>
     );
@@ -112,4 +112,9 @@ Synopsis.propTypes = {
   title: PropTypes.string.isRequired,
   url: PropTypes.string,
   onClick: PropTypes.func,
+  isBeta: PropTypes.bool,
+};
+
+Synopsis.defaultProps = {
+  isBeta: false
 };
diff --git a/src/core_plugins/kibana/public/home/components/synopsis.test.js b/src/core_plugins/kibana/public/home/components/synopsis.test.js
@@ -51,4 +51,14 @@ describe('props', () => {
     />);
     expect(component).toMatchSnapshot(); // eslint-disable-line
   });
+
+  test('isBeta', () => {
+    const component = shallow(<Synopsis
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      url="link_to_item"
+      isBeta={true}
+    />);
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
 });
diff --git a/...re_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap b/...re_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -14,16 +14,32 @@ exports[`props exportedFieldsUrl 1`] = `
     component="div"
     grow={true}
   >
-    <EuiTitle
-      size="l"
+    <EuiFlexGroup
+      alignItems="center"
+      component="div"
+      direction="row"
+      gutterSize="s"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
     >
-      <h2>
-        Great tutorial
-      </h2>
-    </EuiTitle>
-    <EuiSpacer
-      size="l"
-    />
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      />
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <EuiTitle
+          size="l"
+        >
+          <h2>
+            Great tutorial
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+    </EuiFlexGroup>
     <Content
       text="this is a great tutorial about..."
     />
@@ -65,10 +81,19 @@ exports[`props iconType 1`] = `
     component="div"
     grow={true}
   >
-    <EuiTitle
-      size="l"
+    <EuiFlexGroup
+      alignItems="center"
+      component="div"
+      direction="row"
+      gutterSize="s"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
     >
-      <h2>
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
         <EuiIcon
           size="xl"
           style={
@@ -78,12 +103,81 @@ exports[`props iconType 1`] = `
           }
           type="logoElastic"
         />
-        Great tutorial
-      </h2>
-    </EuiTitle>
-    <EuiSpacer
-      size="l"
+      </EuiFlexItem>
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <EuiTitle
+          size="l"
+        >
+          <h2>
+            Great tutorial
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <Content
+      text="this is a great tutorial about..."
     />
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
+
+exports[`props isBeta 1`] = `
+<EuiFlexGroup
+  alignItems="stretch"
+  component="div"
+  direction="row"
+  gutterSize="l"
+  justifyContent="flexStart"
+  responsive={true}
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={true}
+  >
+    <EuiFlexGroup
+      alignItems="center"
+      component="div"
+      direction="row"
+      gutterSize="s"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
+    >
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      />
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <EuiTitle
+          size="l"
+        >
+          <h2>
+            Great tutorial
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <EuiBetaBadge
+          className="tutorialIntroBadge"
+          label="BETA"
+          tooltipPosition="top"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
     <Content
       text="this is a great tutorial about..."
     />
@@ -109,16 +203,32 @@ exports[`props previewUrl 1`] = `
     component="div"
     grow={true}
   >
-    <EuiTitle
-      size="l"
+    <EuiFlexGroup
+      alignItems="center"
+      component="div"
+      direction="row"
+      gutterSize="s"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
     >
-      <h2>
-        Great tutorial
-      </h2>
-    </EuiTitle>
-    <EuiSpacer
-      size="l"
-    />
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      />
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <EuiTitle
+          size="l"
+        >
+          <h2>
+            Great tutorial
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+    </EuiFlexGroup>
     <Content
       text="this is a great tutorial about..."
     />
@@ -153,16 +263,32 @@ exports[`render 1`] = `
     component="div"
     grow={true}
   >
-    <EuiTitle
-      size="l"
+    <EuiFlexGroup
+      alignItems="center"
+      component="div"
+      direction="row"
+      gutterSize="s"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
     >
-      <h2>
-        Great tutorial
-      </h2>
-    </EuiTitle>
-    <EuiSpacer
-      size="l"
-    />
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      />
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <EuiTitle
+          size="l"
+        >
+          <h2>
+            Great tutorial
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+    </EuiFlexGroup>
     <Content
       text="this is a great tutorial about..."
     />

diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
@@ -26,6 +26,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
   <div>
     <Introduction
       description="tutorial used to drive jest tests"
+      isBeta={false}
       title="jest test tutorial"
     />
     <EuiSpacer
@@ -96,6 +97,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
     <Introduction
       description="tutorial used to drive jest tests"
       iconType="logoApache"
+      isBeta={false}
       title="jest test tutorial"
     />
     <EuiSpacer
@@ -184,6 +186,7 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
     <Introduction
       description="tutorial used to drive jest tests"
       iconType="logoApache"
+      isBeta={false}
       title="jest test tutorial"
     />
     <EuiSpacer