From dd7b4a615329200331a727264129f5fd9cea9696 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 25 Oct 2021 16:12:57 -0400
Subject: [PATCH 1/4] Added link to integrations in Sample Data description

---
 .../application/components/tutorial_directory.js   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index a1a93e3eba5424..6c698c7111b40b 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -9,7 +9,7 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup, EuiLink } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { Synopsis } from './synopsis';
@@ -224,7 +224,17 @@ class TutorialDirectoryUi extends React.Component {
           description: (
             <FormattedMessage
               id="home.tutorial.addDataToKibanaDescription"
-              defaultMessage="In addition to adding integrations, you can try our sample data, or upload your own data."
+              defaultMessage="In addition to adding {integrationsLink}, you can try our sample data, or upload your own data."
+              values={{
+                integrationsLink: (
+                  <EuiLink href={this.props.addBasePath(`/app/integrations/browse`)}>
+                    <FormattedMessage
+                      id="home.tutorial.addDataToKibanaDescription.integrations"
+                      defaultMessage="integrations"
+                    />
+                  </EuiLink>
+                ),
+              }}
             />
           ),
           tabs,

From ae922d9c56bc3cca33cbc47766408ae961eeaa0d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 25 Oct 2021 16:13:09 -0400
Subject: [PATCH 2/4] Fixed no data card alignments

---
 .../no_data_page/no_data_card/elastic_agent_card.tsx      | 8 +-------
 .../no_data_page/no_data_card/no_data_card.tsx            | 3 +--
 .../public/page_template/no_data_page/no_data_page.scss   | 2 +-
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
index d429f9d712081c..b9d412fe4df89b 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
@@ -44,7 +44,6 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
       <EuiCard
         paddingSize="l"
         image={image}
-        textAlign="left"
         title={
           <EuiTextColor color="default">
             {i18n.translate('kibana-react.noDataPage.elasticAgentCard.noPermission.title', {
@@ -93,12 +92,7 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
           defaultMessage: `Use Elastic Agent for a simple, unified way to collect data from your machines.`,
         })}
         betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
-        footer={
-          <div className="eui-textCenter">
-            {button}
-            {footer}
-          </div>
-        }
+        footer={footer}
         layout={layout as 'vertical' | undefined}
         {...cardRest}
       />
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx
index ad40a4f8f54997..9cc38cc5f60389 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx
@@ -27,7 +27,6 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
   return (
     <EuiCard
       paddingSize="l"
-      textAlign="left"
       // TODO: we should require both title and description to be passed in by consumers since defaults are not adequate.
       // see comment: https://github.com/elastic/kibana/pull/111261/files#r708399140
       title={title!}
@@ -35,7 +34,7 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
         defaultMessage: `Proceed without collecting data`,
       })}
       betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
-      footer={<div className="eui-textCenter">{footer}</div>}
+      footer={footer}
       layout={layout as 'vertical' | undefined}
       {...cardRest}
     />
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss
index f1bc12e74cf4ea..d4b50536d0d098 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss
@@ -1,5 +1,5 @@
 .kbnNoDataPageContents__item:only-child {
-  min-width: 400px;
+  min-width: ($euiSize * 22.5);
 
   @include euiBreakpoint('xs', 's') {
     min-width: auto;

From 5415e8042fd7a194957b27f74c960659b0f7074f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 25 Oct 2021 16:21:24 -0400
Subject: [PATCH 3/4] Snaps

---
 .../elastic_agent_card.test.tsx.snap          | 58 +++++-----------
 .../__snapshots__/no_data_card.test.tsx.snap  | 66 +++++++------------
 2 files changed, 40 insertions(+), 84 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
index 30703a4a5ebb70..8e1d0cb92e0065 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
@@ -15,16 +15,11 @@ exports[`ElasticAgentCard props button 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
         Button
-        <EuiButton
-          fill={true}
-        >
-          Button
-        </EuiButton>
-      </div>
+      </EuiButton>
     }
     href="/app/integrations/browse"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -55,15 +50,11 @@ exports[`ElasticAgentCard props category 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
-        <EuiButton
-          fill={true}
-        >
-          Add Elastic Agent
-        </EuiButton>
-      </div>
+        Add Elastic Agent
+      </EuiButton>
     }
     href="/app/integrations/browse/custom"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -94,16 +85,11 @@ exports[`ElasticAgentCard props href 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
         Button
-        <EuiButton
-          fill={true}
-        >
-          Button
-        </EuiButton>
-      </div>
+      </EuiButton>
     }
     href="#"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -135,15 +121,11 @@ exports[`ElasticAgentCard props recommended 1`] = `
     betaBadgeLabel="Recommended"
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
-        <EuiButton
-          fill={true}
-        >
-          Add Elastic Agent
-        </EuiButton>
-      </div>
+        Add Elastic Agent
+      </EuiButton>
     }
     href="/app/integrations/browse"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -174,15 +156,11 @@ exports[`ElasticAgentCard renders 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
-        <EuiButton
-          fill={true}
-        >
-          Add Elastic Agent
-        </EuiButton>
-      </div>
+        Add Elastic Agent
+      </EuiButton>
     }
     href="/app/integrations/browse"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap
index 6959e2e29095af..fccbbe3a9e8eee 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`NoDataCard props button 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -25,31 +25,27 @@ exports[`NoDataCard props button 1`] = `
   <div
     class="euiCard__footer"
   >
-    <div
-      class="eui-textCenter"
+    <button
+      class="euiButton euiButton--primary euiButton--fill"
+      type="button"
     >
-      <button
-        class="euiButton euiButton--primary euiButton--fill"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Button
-          </span>
+          Button
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 `;
 
 exports[`NoDataCard props href 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable"
 >
   <div
     class="euiCard__content"
@@ -79,31 +75,27 @@ exports[`NoDataCard props href 1`] = `
   <div
     class="euiCard__footer"
   >
-    <div
-      class="eui-textCenter"
+    <button
+      class="euiButton euiButton--primary euiButton--fill"
+      type="button"
     >
-      <button
-        class="euiButton euiButton--primary euiButton--fill"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Button
-          </span>
+          Button
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 `;
 
 exports[`NoDataCard props recommended 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned euiCard--hasBetaBadge"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
 >
   <div
     class="euiCard__content"
@@ -134,19 +126,12 @@ exports[`NoDataCard props recommended 1`] = `
       Recommended
     </span>
   </span>
-  <div
-    class="euiCard__footer"
-  >
-    <div
-      class="eui-textCenter"
-    />
-  </div>
 </div>
 `;
 
 exports[`NoDataCard renders 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -166,12 +151,5 @@ exports[`NoDataCard renders 1`] = `
       </p>
     </div>
   </div>
-  <div
-    class="euiCard__footer"
-  >
-    <div
-      class="eui-textCenter"
-    />
-  </div>
 </div>
 `;

From 83a67cd5fd803a3f24c4a99dbc2696081d7e8cd5 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 25 Oct 2021 19:27:35 -0400
Subject: [PATCH 4/4] Remove extra comma

---
 .../home/public/application/components/tutorial_directory.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index 6c698c7111b40b..36b301823f1368 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -224,7 +224,7 @@ class TutorialDirectoryUi extends React.Component {
           description: (
             <FormattedMessage
               id="home.tutorial.addDataToKibanaDescription"
-              defaultMessage="In addition to adding {integrationsLink}, you can try our sample data, or upload your own data."
+              defaultMessage="In addition to adding {integrationsLink}, you can try our sample data or upload your own data."
               values={{
                 integrationsLink: (
                   <EuiLink href={this.props.addBasePath(`/app/integrations/browse`)}>