[SharedUX] Migrate PageTemplate > NoDataPage > NoDataCard (#127025)

* [SharedUX] Migrate PageTemplate > NoData > NoDataCard

* Add deprecation warning

* Fix directory structure

* Fix i18n

* Applying Caroline's suggestions

* Fix types

* Fix typescripting

* Update src/plugins/shared_ux/public/components/page_template/no_data_page/no_data_card/no_data_card.stories.tsx

Co-authored-by: Caroline Horn <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Caroline Horn <[email protected]>

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/index.ts

@@ -7,4 +7,5 @@
  */
 
 export * from './elastic_agent_card';
+/** @deprecated Use `NoDataCard` from `src/plugins/shared_ux/page_template`. */
 export * from './no_data_card';

src/plugins/shared_ux/public/components/page_template/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { NoDataCard } from './no_data_page/no_data_card';

src/plugins/shared_ux/public/components/page_template/no_data_page/no_data_card/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+export { NoDataCard } from './no_data_card';

src/plugins/shared_ux/public/components/page_template/no_data_page/no_data_card/no_data_card.stories.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { NoDataCard } from './no_data_card';
+import type { NoDataCardProps } from './types';
+
+export default {
+  title: 'No Data Card',
+  description: 'A wrapper around EuiCard, to be used on NoData page',
+};
+
+type Params = Pick<NoDataCardProps, 'recommended' | 'button' | 'description'>;
+
+export const PureComponent = (params: Params) => {
+  return (
+    <div style={{ width: '50%' }}>
+      <NoDataCard title={'Add data'} {...params} />
+    </div>
+  );
+};
+
+PureComponent.argTypes = {
+  recommended: {
+    control: 'boolean',
+    defaultValue: false,
+  },
+  button: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Button text',
+  },
+  description: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'This is a description',
+  },
+};

src/plugins/shared_ux/public/components/page_template/no_data_page/no_data_card/no_data_card.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { render } from 'enzyme';
+import React from 'react';
+import { NoDataCard } from './no_data_card';
+
+describe('NoDataCard', () => {
+  test('renders', () => {
+    const component = render(<NoDataCard title="Card title" description="Description" />);
+    expect(component).toMatchSnapshot();
+  });
+
+  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" />
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('href', () => {
+      const component = render(
+        <NoDataCard href="#" button="Button" title="Card title" description="Description" />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
+});

src/plugins/shared_ux/public/components/page_template/no_data_page/no_data_card/no_data_card.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import React, { FunctionComponent } from 'react';
+import { EuiButton, EuiCard } from '@elastic/eui';
+import type { NoDataCardProps } from './types';
+
+const recommendedLabel = i18n.translate('sharedUX.pageTemplate.noDataPage.recommendedLabel', {
+  defaultMessage: 'Recommended',
+});
+
+const defaultDescription = i18n.translate('sharedUX.pageTemplate.noDataCard.description', {
+  defaultMessage: `Proceed without collecting data`,
+});
+
+export const NoDataCard: FunctionComponent<NoDataCardProps> = ({
+  recommended,
+  title,
+  button,
+  description,
+  ...cardRest
+}) => {
+  const footer = () => {
+    if (typeof button !== 'string') {
+      return button;
+    }
+    return <EuiButton fill>{button || title}</EuiButton>;
+  };
+  const label = recommended ? recommendedLabel : undefined;
+  const cardDescription = description || defaultDescription;
+
+  return (
+    <EuiCard
+      paddingSize="l"
+      title={title!}
+      description={cardDescription}
+      betaBadgeProps={{ label }}
+      footer={footer()}
+      {...cardRest}
+    />
+  );
+};

src/plugins/shared_ux/public/components/page_template/no_data_page/no_data_card/types.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { 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
+   */
+  button?: string | ReactNode;
+  /**
+   * Remapping `onClick` to any element
+   */
+  onClick?: MouseEventHandler<HTMLElement>;
+  /**
+   * Description for the card. If not provided, the default will be used.
+   */
+  description?: string;
+};