[Integrations] Added link in old Add Data description and fixed align…

…ment in cards (#116213) (#116382)

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

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,

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

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx

@@ -27,15 +27,14 @@ 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!}
       description={i18n.translate('kibana-react.noDataPage.noDataCard.description', {
         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}
     />

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;