[NoDataPage] Updating the default messages (#108799)

* [NoDataPage] Updating the default messages and reusing `title` as default `button` label
  * Update default description for agent
* Overview page i18n and snaps

dev_docs/tutorials/kibana_page_template.mdx

@@ -126,7 +126,7 @@ This is a built-in configuration that displays a very specific UI and requires v
 
 The `noDataConfig` is of type [`NoDataPagProps`](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.tsx):
 
-1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, description, and button label *(required)*
+1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, and description *(required)*
 2. `docsLink: string`: Required to set the docs link for the whole solution *(required)*
 3. `logo?: string`: Optionally replace the auto-generated logo
 4. `pageTitle?: string`: Optionally replace the auto-generated page title (h1)
@@ -136,7 +136,7 @@ The `noDataConfig` is of type [`NoDataPagProps`](https://github.com/elastic/kiba
 
 There are two main actions for adding data that we promote throughout Kibana, Elastic Agent and Beats. They are added to the cards that are displayed by using the keys `elasticAgent` and `beats` respectively. For consistent messaging, these two cards are pre-configured but require specific `href`s and/or `onClick` handlers for directing the user to the right location for that solution.
 
-It also accepts a `recommended` prop as a boolean to promote one or more of the cards through visuals added to the UI. It will also place the `recommended` ones first in the list. By default, the configuration will recommend `elasticAgent`. Optionally you can also replace the `button` label by passing a string, or the whole component by passing a `ReactNode`.
+It also accepts a `recommended` prop as a boolean to promote one or more of the cards through visuals added to the UI. It will also place the `recommended` ones first in the list. Optionally you can also replace the `button` label by passing a string, or the whole component by passing a `ReactNode`.
 
 
 ```tsx
@@ -145,18 +145,20 @@ const hasData = checkForData();
 
 // No data configuration
 const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
-  solution: 'Observability',
+  solution: 'Analytics',
+  logo: 'logoKibana',
   docsLink: '#',
   actions: {
-    elasticAgent: {
+    beats: {
       href: '#',
     },
-    beats: {
+    elasticAgent: {
       href: '#',
     },
   },
 };
 
+// Conditionally apply the configuration if there is no data
 <KibanaPageTemplate
   solutionNav={/* Solution navigation still show if it exists and use the right template type */}
   pageHeader={/* Page header will be ignored */}

src/plugins/kibana_overview/public/components/overview/overview.tsx

@@ -19,6 +19,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { CoreStart } from 'kibana/public';
+import { i18n } from '@kbn/i18n';
 import {
   RedirectAppLinks,
   useKibana,
@@ -73,7 +74,9 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
   const manageDataFeatures = getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
   const devTools = findFeatureById('console');
   const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
-    solution: 'Analytics',
+    solution: i18n.translate('kibanaOverview.noDataConfig.solutionName', {
+      defaultMessage: `Analytics`,
+    }),
     logo: 'logoKibana',
     actions: {
       beats: {

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap

@@ -2,33 +2,27 @@
 
 exports[`ElasticAgentCard props button 1`] = `
 <EuiCard
-  betaBadgeLabel="Recommended"
-  description="The Elastic Agent provides a simple, unified way to
-        collect data from your machines."
+  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
   footer={
     <EuiButton
       fill={true}
-      href="app/integrations/browse"
     >
       Button
     </EuiButton>
   }
-  href="app/integrations/browse"
+  href="/app/integrations/browse"
   image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
   paddingSize="l"
-  title="Add a Solution integration"
+  title="Add Elastic Agent"
 />
 `;
 
 exports[`ElasticAgentCard props href 1`] = `
 <EuiCard
-  betaBadgeLabel="Recommended"
-  description="The Elastic Agent provides a simple, unified way to
-        collect data from your machines."
+  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
   footer={
     <EuiButton
       fill={true}
-      href="#"
     >
       Button
     </EuiButton>
@@ -36,46 +30,41 @@ exports[`ElasticAgentCard props href 1`] = `
   href="#"
   image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
   paddingSize="l"
-  title="Add a Solution integration"
+  title="Add Elastic Agent"
 />
 `;
 
 exports[`ElasticAgentCard props recommended 1`] = `
 <EuiCard
   betaBadgeLabel="Recommended"
-  description="The Elastic Agent provides a simple, unified way to
-        collect data from your machines."
+  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
   footer={
     <EuiButton
       fill={true}
-      href="app/integrations/browse"
     >
-      Find an integration for Solution
+      Add Elastic Agent
     </EuiButton>
   }
-  href="app/integrations/browse"
+  href="/app/integrations/browse"
   image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
   paddingSize="l"
-  title="Add a Solution integration"
+  title="Add Elastic Agent"
 />
 `;
 
 exports[`ElasticAgentCard renders 1`] = `
 <EuiCard
-  betaBadgeLabel="Recommended"
-  description="The Elastic Agent provides a simple, unified way to
-        collect data from your machines."
+  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
   footer={
     <EuiButton
       fill={true}
-      href="app/integrations/browse"
     >
-      Find an integration for Solution
+      Add Elastic Agent
     </EuiButton>
   }
-  href="app/integrations/browse"
+  href="/app/integrations/browse"
   image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
   paddingSize="l"
-  title="Add a Solution integration"
+  title="Add Elastic Agent"
 />
 `;

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_beats_card.test.tsx.snap

@@ -2,31 +2,27 @@
 
 exports[`ElasticBeatsCard props button 1`] = `
 <EuiCard
-  description="
-            Beats send data from hundreds or thousands of machines and systems to Logstash or Elasticsearch."
+  description="Use Beats to add data from various systems to Elasticsearch."
   footer={
     <EuiButton
       fill={true}
-      href="app/home#/tutorial"
     >
       Button
     </EuiButton>
   }
-  href="app/home#/tutorial"
+  href="/app/home#/tutorial_directory"
   image="/plugins/kibanaReact/assets/elastic_beats_card_light.svg"
   paddingSize="l"
-  title="Add data with Beats"
+  title="Add data"
 />
 `;
 
 exports[`ElasticBeatsCard props href 1`] = `
 <EuiCard
-  description="
-            Beats send data from hundreds or thousands of machines and systems to Logstash or Elasticsearch."
+  description="Use Beats to add data from various systems to Elasticsearch."
   footer={
     <EuiButton
       fill={true}
-      href="#"
     >
       Button
     </EuiButton>
@@ -34,45 +30,41 @@ exports[`ElasticBeatsCard props href 1`] = `
   href="#"
   image="/plugins/kibanaReact/assets/elastic_beats_card_light.svg"
   paddingSize="l"
-  title="Add data with Beats"
+  title="Add data"
 />
 `;
 
 exports[`ElasticBeatsCard props recommended 1`] = `
 <EuiCard
   betaBadgeLabel="Recommended"
-  description="
-            Beats send data from hundreds or thousands of machines and systems to Logstash or Elasticsearch."
+  description="Use Beats to add data from various systems to Elasticsearch."
   footer={
     <EuiButton
       fill={true}
-      href="app/home#/tutorial"
     >
-      Install Beats for Solution
+      Add data
     </EuiButton>
   }
-  href="app/home#/tutorial"
+  href="/app/home#/tutorial_directory"
   image="/plugins/kibanaReact/assets/elastic_beats_card_light.svg"
   paddingSize="l"
-  title="Add data with Beats"
+  title="Add data"
 />
 `;
 
 exports[`ElasticBeatsCard renders 1`] = `
 <EuiCard
-  description="
-            Beats send data from hundreds or thousands of machines and systems to Logstash or Elasticsearch."
+  description="Use Beats to add data from various systems to Elasticsearch."
   footer={
     <EuiButton
       fill={true}
-      href="app/home#/tutorial"
     >
-      Install Beats for Solution
+      Add data
     </EuiButton>
   }
-  href="app/home#/tutorial"
+  href="/app/home#/tutorial_directory"
   image="/plugins/kibanaReact/assets/elastic_beats_card_light.svg"
   paddingSize="l"
-  title="Add data with Beats"
+  title="Add data"
 />
 `;

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap

@@ -75,10 +75,9 @@ exports[`NoDataCard props href 1`] = `
   <div
     class="euiCard__footer"
   >
-    <a
+    <button
       class="euiButton euiButton--primary euiButton--fill"
-      href="#"
-      rel="noreferrer"
+      type="button"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -89,7 +88,7 @@ exports[`NoDataCard props href 1`] = `
           Button
         </span>
       </span>
-    </a>
+    </button>
   </div>
 </div>
 `;

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

@@ -6,8 +6,6 @@
  * Side Public License, v 1.
  */
 
-/* eslint-disable @elastic/eui/href-or-on-click */
-
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { CoreStart } from 'kibana/public';
@@ -24,8 +22,9 @@ export type ElasticAgentCardProps = NoDataPageActions & {
  */
 export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
   solution,
-  recommended = true,
-  href = 'app/integrations/browse',
+  recommended,
+  title,
+  href,
   button,
   ...cardRest
 }) => {
@@ -35,30 +34,26 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
   const addBasePath = http.basePath.prepend;
   const basePathUrl = '/plugins/kibanaReact/assets/';
 
+  const defaultCTAtitle = i18n.translate('kibana-react.noDataPage.elasticAgentCard.title', {
+    defaultMessage: 'Add Elastic Agent',
+  });
+
   const footer =
     typeof button !== 'string' && typeof button !== 'undefined' ? (
       button
     ) : (
-      <EuiButton href={href} onClick={cardRest?.onClick} target={cardRest?.target} fill>
-        {button ||
-          i18n.translate('kibana-react.noDataPage.elasticAgentCard.buttonLabel', {
-            defaultMessage: 'Find an integration for {solution}',
-            values: { solution },
-          })}
-      </EuiButton>
+      // The href and/or onClick are attached to the whole Card, so the button is just for show.
+      // Do not add the behavior here too or else it will propogate through
+      <EuiButton fill>{button || title || defaultCTAtitle}</EuiButton>
     );
 
   return (
     <EuiCard
       paddingSize="l"
-      href={href}
-      title={i18n.translate('kibana-react.noDataPage.elasticAgentCard.title', {
-        defaultMessage: 'Add a {solution} integration',
-        values: { solution },
-      })}
+      href={href ?? addBasePath('/app/integrations/browse')}
+      title={title || defaultCTAtitle}
       description={i18n.translate('kibana-react.noDataPage.elasticAgentCard.description', {
-        defaultMessage: `The Elastic Agent provides a simple, unified way to
-        collect data from your machines.`,
+        defaultMessage: `Use Elastic Agent for a simple, unified way to collect data from your machines.`,
       })}
       image={addBasePath(`${basePathUrl}elastic_agent_card.svg`)}
       betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}

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

@@ -6,8 +6,6 @@
  * Side Public License, v 1.
  */
 
-/* eslint-disable @elastic/eui/href-or-on-click */
-
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { CoreStart } from 'kibana/public';
@@ -21,9 +19,10 @@ export type ElasticBeatsCardProps = NoDataPageActions & {
 
 export const ElasticBeatsCard: FunctionComponent<ElasticBeatsCardProps> = ({
   recommended,
-  href = 'app/home#/tutorial',
+  title,
   button,
-  solution,
+  href,
+  solution, // unused for now
   ...cardRest
 }) => {
   const {
@@ -33,29 +32,26 @@ export const ElasticBeatsCard: FunctionComponent<ElasticBeatsCardProps> = ({
   const basePathUrl = '/plugins/kibanaReact/assets/';
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
 
+  const defaultCTAtitle = i18n.translate('kibana-react.noDataPage.elasticBeatsCard.title', {
+    defaultMessage: 'Add data',
+  });
+
   const footer =
     typeof button !== 'string' && typeof button !== 'undefined' ? (
       button
     ) : (
-      <EuiButton href={href} onClick={cardRest?.onClick} target={cardRest?.target} fill>
-        {button ||
-          i18n.translate('kibana-react.noDataPage.elasticBeatsCard.buttonLabel', {
-            defaultMessage: 'Install Beats for {solution}',
-            values: { solution },
-          })}
-      </EuiButton>
+      // The href and/or onClick are attached to the whole Card, so the button is just for show.
+      // Do not add the behavior here too or else it will propogate through
+      <EuiButton fill>{button || title || defaultCTAtitle}</EuiButton>
     );
 
   return (
     <EuiCard
       paddingSize="l"
-      href={href}
-      title={i18n.translate('kibana-react.noDataPage.elasticBeatsCard.title', {
-        defaultMessage: 'Add data with Beats',
-      })}
+      href={href ?? addBasePath('/app/home#/tutorial_directory')}
+      title={title || defaultCTAtitle}
       description={i18n.translate('kibana-react.noDataPage.elasticBeatsCard.description', {
-        defaultMessage: `
-            Beats send data from hundreds or thousands of machines and systems to Logstash or Elasticsearch.`,
+        defaultMessage: `Use Beats to add data from various systems to Elasticsearch.`,
       })}
       image={addBasePath(
         `${basePathUrl}elastic_beats_card_${IS_DARK_THEME ? 'dark' : 'light'}.svg`

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

@@ -6,8 +6,6 @@
  * Side Public License, v 1.
  */
 
-/* eslint-disable @elastic/eui/href-or-on-click */
-
 import React, { FunctionComponent } from 'react';
 import { EuiButton, EuiCard, EuiCardProps } from '@elastic/eui';
 import { NoDataPageActions, NO_DATA_RECOMMENDED } from '../no_data_page';
@@ -17,21 +15,17 @@ type NoDataCard = EuiCardProps & NoDataPageActions;
 
 export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
   recommended,
+  title,
   button,
   ...cardRest
 }) => {
   const footer =
-    typeof button !== 'string' ? (
-      button
-    ) : (
-      <EuiButton href={cardRest?.href} onClick={cardRest?.onClick} target={cardRest?.target} fill>
-        {button}
-      </EuiButton>
-    );
+    typeof button !== 'string' ? button : <EuiButton fill>{button || title}</EuiButton>;
 
   return (
     <EuiCard
       paddingSize="l"
+      title={title}
       betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
       footer={footer}
       {...(cardRest as any)}