add isBeta flag to add data module schema (#20049) (#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

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(),

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"
             />

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"

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
 };

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
+  });
 });

src/core_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..."
     />

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

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

@@ -28,9 +28,10 @@ import {
   EuiImage,
   EuiButton,
   EuiIcon,
+  EuiBetaBadge,
 } from '@elastic/eui';
 
-export function Introduction({ description, previewUrl, title, exportedFieldsUrl, iconType }) {
+export function Introduction({ description, previewUrl, title, exportedFieldsUrl, iconType, isBeta }) {
   let img;
   if (previewUrl) {
     img = (
@@ -69,20 +70,38 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
       />
     );
   }
+  let betaBadge;
+  if (isBeta) {
+    betaBadge = (
+      <EuiFlexItem grow={false}>
+        <EuiBetaBadge className="tutorialIntroBadge" label="BETA" />
+      </EuiFlexItem>
+    );
+  }
   return (
     <EuiFlexGroup>
 
       <EuiFlexItem>
-        <EuiTitle size="l">
-          <h2>
+
+        <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
             {icon}
-            {title}
-          </h2>
-        </EuiTitle>
-        <EuiSpacer />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h2>
+                {title}
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          {betaBadge}
+        </EuiFlexGroup>
+
         <Content text={description} />
         {exportedFields}
+
       </EuiFlexItem>
+
       <EuiFlexItem grow={false}>
         {img}
       </EuiFlexItem>
@@ -96,4 +115,9 @@ Introduction.propTypes = {
   previewUrl: PropTypes.string,
   exportedFieldsUrl: PropTypes.string,
   iconType: PropTypes.string,
+  isBeta: PropTypes.bool,
+};
+
+Introduction.defaultProps = {
+  isBeta: false
 };

src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js

@@ -57,4 +57,13 @@ describe('props', () => {
     />);
     expect(component).toMatchSnapshot(); // eslint-disable-line
   });
+
+  test('isBeta', () => {
+    const component = shallow(<Introduction
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      isBeta={true}
+    />);
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
 });

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

@@ -295,6 +295,7 @@ export class Tutorial extends React.Component {
             previewUrl={previewUrl}
             exportedFieldsUrl={exportedFieldsUrl}
             iconType={this.state.tutorial.euiIconType}
+            isBeta={this.state.tutorial.isBeta}
           />
 
           <EuiSpacer />

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

@@ -96,6 +96,7 @@ export class TutorialDirectory extends React.Component {
         description: tutorialConfig.shortDescription,
         url: this.props.addBasePath(`#/home/tutorial/${tutorialConfig.id}`),
         elasticCloud: tutorialConfig.elasticCloud,
+        isBeta: tutorialConfig.isBeta,
       };
     });
 
@@ -179,6 +180,7 @@ export class TutorialDirectory extends React.Component {
               wrapInPanel
               url={tutorial.url}
               onClick={tutorial.onClick}
+              isBeta={tutorial.isBeta}
             />
           </EuiFlexItem>
         );