[SharedUX] Migrate PageTemplate > NoData Page (#128372)

* [SharedUX] Migrate PageTemplate > NoDataPage > ActionCards

* [SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav

* Updating snapshot

* [SharedUX] Migrate PageTemplate > NoDataPage

* Removing actionCards

* [SharedUX] Migrate PageTemplate > SolutionNavAvatar

* Fix comment

* Renaming component

* Fix folder structure

* Fix storybook

* Style fix

* Update so the component now uses the SolutionAvatar

* Fix props

* Remove unnecessary types files

* Fix failing test

* Updating failed test

* Fix obsolete snapshot

* Applying PR comments

* Update failing snapshot

* Update failing snapshot

* Add logo as an argtype

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-shared-ux-components/src/page_template/index.tsx

@@ -7,3 +7,4 @@
  */
 
 export { NoDataCard, ElasticAgentCard } from './no_data_page';
+export { NoDataPage } from './no_data_page';

packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts

@@ -7,3 +7,5 @@
  */
 
 export { NoDataCard, ElasticAgentCard } from './no_data_card';
+export { NoDataPage } from './no_data_page';
+export type { NoDataPageProps } from './types';

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.test.tsx

@@ -40,19 +40,6 @@ describe('ElasticAgentCardComponent', () => {
   });
 
   describe('props', () => {
-    test('recommended', () => {
-      const component = shallow(
-        <ElasticAgentCardComponent
-          recommended
-          canAccessFleet={true}
-          navigateToUrl={navigateToUrl}
-          currentAppId$={currentAppId$}
-        />
-      );
-      expect(component.find(NoDataCard).props().recommended).toBe(true);
-      expect(component).toMatchSnapshot();
-    });
-
     test('button', () => {
       const component = shallow(
         <ElasticAgentCardComponent

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx

@@ -15,7 +15,7 @@ import {
 } from './elastic_agent_card.component';
 
 export default {
-  title: 'Elastic Agent Data Card',
+  title: 'Page Template/No Data Page/Elastic Agent Data Card',
   description: 'A solution-specific wrapper around NoDataCard, to be used on NoData page',
 };
 

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts

@@ -7,3 +7,4 @@
  */
 export { NoDataCard } from './no_data_card';
 export { ElasticAgentCard } from './elastic_agent_card';
+export type { NoDataCardProps, ElasticAgentCardProps } from './types';

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx

@@ -11,21 +11,17 @@ import { NoDataCard } from './no_data_card';
 import type { NoDataCardProps } from './types';
 
 export default {
-  title: 'No Data Card',
+  title: 'Page Template/No Data Page/No Data Card',
   description: 'A wrapper around EuiCard, to be used on NoData page',
 };
 
-type Params = Pick<NoDataCardProps, 'recommended' | 'button' | 'description'>;
+type Params = Pick<NoDataCardProps, 'button' | 'description'>;
 
 export const PureComponent = (params: Params) => {
   return <NoDataCard title={'Add data'} {...params} />;
 };
 
 PureComponent.argTypes = {
-  recommended: {
-    control: 'boolean',
-    defaultValue: false,
-  },
   button: {
     control: {
       type: 'text',

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.styles.ts

@@ -11,5 +11,6 @@ export const NO_DATA_CARD_MAX_WIDTH = 400;
 export const NoDataCardStyles = () => {
   return {
     maxWidth: NO_DATA_CARD_MAX_WIDTH,
+    marginInline: 'auto',
   };
 };

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.test.tsx

@@ -17,13 +17,6 @@ describe('NoDataCard', () => {
   });
 
   describe('props', () => {
-    test('recommended', () => {
-      const component = render(
-        <NoDataCard recommended title="Card title" description="Description" />
-      );
-      expect(component).toMatchSnapshot();
-    });
-
     test('button', () => {
       const component = render(
         <NoDataCard button="Button" title="Card title" description="Description" />

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.tsx

@@ -13,13 +13,6 @@ import { EuiButton, EuiCard } from '@elastic/eui';
 import type { NoDataCardProps } from './types';
 import { NoDataCardStyles } from './no_data_card.styles';
 
-const recommendedLabel = i18n.translate(
-  'sharedUXComponents.pageTemplate.noDataPage.recommendedLabel',
-  {
-    defaultMessage: 'Recommended',
-  }
-);
-
 const defaultDescription = i18n.translate(
   'sharedUXComponents.pageTemplate.noDataCard.description',
   {
@@ -28,7 +21,6 @@ const defaultDescription = i18n.translate(
 );
 
 export const NoDataCard: FunctionComponent<NoDataCardProps> = ({
-  recommended,
   title,
   button,
   description,
@@ -49,7 +41,6 @@ export const NoDataCard: FunctionComponent<NoDataCardProps> = ({
     // Default footer action is a button with the provided or default string
     return <EuiButton fill>{button || title}</EuiButton>;
   };
-  const label = recommended ? recommendedLabel : undefined;
   const cardDescription = description || defaultDescription;
 
   return (
@@ -58,7 +49,6 @@ export const NoDataCard: FunctionComponent<NoDataCardProps> = ({
       paddingSize="l"
       title={title!}
       description={cardDescription}
-      betaBadgeProps={{ label }}
       footer={footer()}
       isDisabled={isDisabled}
       {...cardRest}

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/types.ts

@@ -10,10 +10,6 @@ import { EuiCardProps } from '@elastic/eui';
 import { MouseEventHandler, ReactNode } from 'react';
 
 export type NoDataCardProps = Partial<Omit<EuiCardProps, 'layout'>> & {
-  /**
-   * Applies the `Recommended` beta badge and makes the button `fill`
-   */
-  recommended?: boolean;
   /**
    * Provide just a string for the button's label, or a whole component;
    * The button will be hidden completely if `isDisabled=true`

packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { servicesFactory } from '@kbn/shared-ux-storybook';
+import { NoDataPageProps } from './types';
+import { NoDataPage } from './no_data_page';
+
+const services = servicesFactory({});
+
+export default {
+  title: 'Page Template/No Data Page/No Data Page',
+  description: 'No Data Page of PageTemplate',
+};
+const action = {
+  elasticAgent: {},
+};
+type Params = Pick<NoDataPageProps, 'solution' | 'logo'>;
+
+export const PureComponent = (params: Params) => {
+  return <NoDataPage docsLink={services.docLinks.dataViewsDocLink} action={action} {...params} />;
+};
+
+PureComponent.argTypes = {
+  solution: {
+    control: 'text',
+    defaultValue: 'Observability',
+  },
+  logo: {
+    control: { type: 'radio' },
+    options: ['logoElastic', 'logoKibana', 'logoCloud', undefined],
+    defaultValue: undefined,
+  },
+};