Merge branch 'main' into vis_editors_gauge-legacy_percent_mode

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

@@ -8,5 +8,7 @@
 
 export type { KibanaPageTemplateProps } from './page_template';
 export { KibanaPageTemplate } from './page_template';
-export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav';
+export { KibanaPageTemplateSolutionNavAvatar, KibanaPageTemplateSolutionNav } from './solution_nav';
 export * from './no_data_page';
+export { withSolutionNav } from './with_solution_nav';
+export { NO_DATA_PAGE_MAX_WIDTH, NO_DATA_PAGE_TEMPLATE_PROPS } from './util';

src/plugins/kibana_react/public/page_template/no_data_page/action_cards/action_cards.test.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { shallowWithIntl } from '@kbn/test-jest-helpers';
+import { NoDataCard } from '../no_data_card';
+import { ActionCards } from './action_cards';
+
+describe('ActionCards', () => {
+  const onClick = jest.fn();
+  const action = {
+    recommended: false,
+    button: 'Button text',
+    onClick,
+  };
+  const card = <NoDataCard key={'key'} {...action} />;
+  const actionCard1 = <div key={'first'}>{card}</div>;
+  const actionCard2 = <div key={'second'}>{card}</div>;
+
+  test('renders correctly', () => {
+    const component = shallowWithIntl(<ActionCards actionCards={[actionCard1, actionCard2]} />);
+    const actionCards = component.find('div');
+    expect(actionCards.length).toBe(2);
+    expect(actionCards.at(0).key()).toBe('first');
+    expect(actionCards.at(1).key()).toBe('second');
+  });
+});

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

@@ -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 './action_cards.scss';
+
+import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
+import React, { ReactElement } from 'react';
+import { ElasticAgentCard, NoDataCard } from '../no_data_card';
+
+interface ActionCardsProps {
+  actionCards: Array<ReactElement<typeof NoDataCard> | ReactElement<typeof ElasticAgentCard>>;
+}
+export const ActionCards = ({ actionCards }: ActionCardsProps) => {
+  const cards = actionCards.map((card) => (
+    <EuiFlexItem key={card.key || ''} className="kbnNoDataPageContents__item">
+      {card}
+    </EuiFlexItem>
+  ));
+  return (
+    <EuiFlexGrid columns={2} style={{ justifyContent: 'space-around' }}>
+      {cards}
+    </EuiFlexGrid>
+  );
+};

src/plugins/kibana_react/public/page_template/no_data_page/action_cards/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 { ActionCards } from './action_cards';

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

@@ -8,3 +8,4 @@
 
 export * from './no_data_page';
 export * from './no_data_card';
+export * from './no_data_config_page';

src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/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 { NoDataConfigPage, NoDataConfigPageWithSolutionNavBar } from './no_data_config_page';

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

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiPageTemplate } from '@elastic/eui';
+import React from 'react';
+import { NoDataPage } from '../no_data_page';
+import { withSolutionNav } from '../../with_solution_nav';
+import { KibanaPageTemplateProps } from '../../page_template';
+import { getClasses, NO_DATA_PAGE_TEMPLATE_PROPS } from '../../util';
+
+export const NoDataConfigPage = (props: KibanaPageTemplateProps) => {
+  const { className, noDataConfig, ...rest } = props;
+
+  if (!noDataConfig) {
+    return null;
+  }
+
+  const template = NO_DATA_PAGE_TEMPLATE_PROPS.template;
+  const classes = getClasses(template, className);
+
+  return (
+    <EuiPageTemplate
+      data-test-subj={props['data-test-subj']}
+      template={template}
+      className={classes}
+      {...rest}
+      {...NO_DATA_PAGE_TEMPLATE_PROPS}
+    >
+      <NoDataPage {...noDataConfig} />
+    </EuiPageTemplate>
+  );
+};
+
+export const NoDataConfigPageWithSolutionNavBar = withSolutionNav(NoDataConfigPage);

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

@@ -6,36 +6,14 @@
  * Side Public License, v 1.
  */
 
-import './no_data_page.scss';
-
 import React, { ReactNode, useMemo, FunctionComponent, MouseEventHandler } from 'react';
-import {
-  EuiFlexItem,
-  EuiCardProps,
-  EuiFlexGrid,
-  EuiSpacer,
-  EuiText,
-  EuiTextColor,
-  EuiLink,
-  CommonProps,
-} from '@elastic/eui';
+import { EuiCardProps, EuiSpacer, EuiText, EuiLink, CommonProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import classNames from 'classnames';
-import { KibanaPageTemplateProps } from '../page_template';
 
 import { ElasticAgentCard, NoDataCard } from './no_data_card';
-import { KibanaPageTemplateSolutionNavAvatar } from '../solution_nav';
-
-export const NO_DATA_PAGE_MAX_WIDTH = 950;
-export const NO_DATA_PAGE_TEMPLATE_PROPS: KibanaPageTemplateProps = {
-  restrictWidth: NO_DATA_PAGE_MAX_WIDTH,
-  template: 'centeredBody',
-  pageContentProps: {
-    hasShadow: false,
-    color: 'transparent',
-  },
-};
+import { NoDataPageBody } from './no_data_page_body/no_data_page_body';
 
 export const NO_DATA_RECOMMENDED = i18n.translate(
   'kibana-react.noDataPage.noDataPage.recommended',
@@ -112,70 +90,35 @@ export const NoDataPage: FunctionComponent<NoDataPageProps> = ({
   // Convert the iterated [[key, value]] array format back into an object
   const sortedData = Object.fromEntries(sortedEntries);
   const actionsKeys = Object.keys(sortedData);
-  const renderActions = useMemo(() => {
+
+  const actionCards = useMemo(() => {
     return Object.values(sortedData).map((action, i) => {
-      if (actionsKeys[i] === 'elasticAgent' || actionsKeys[i] === 'beats') {
-        return (
-          <EuiFlexItem key={`empty-page-agent-action`} className="kbnNoDataPageContents__item">
-            <ElasticAgentCard solution={solution} {...action} />
-          </EuiFlexItem>
-        );
-      } else {
-        return (
-          <EuiFlexItem
-            key={`empty-page-${actionsKeys[i]}-action`}
-            className="kbnNoDataPageContents__item"
-          >
-            <NoDataCard {...action} />
-          </EuiFlexItem>
-        );
-      }
+      const isAgent = actionsKeys[i] === 'elasticAgent' || actionsKeys[i] === 'beats';
+      const key = isAgent ? 'empty-page-agent-action' : `empty-page-${actionsKeys[i]}-action`;
+      return isAgent ? (
+        <ElasticAgentCard key={key} solution={solution} {...action} />
+      ) : (
+        <NoDataCard key={key} {...action} />
+      );
     });
   }, [actions, sortedData, actionsKeys]);
 
+  const title =
+    pageTitle ||
+    i18n.translate('kibana-react.noDataPage.welcomeTitle', {
+      defaultMessage: 'Welcome to Elastic {solution}!',
+      values: { solution },
+    });
+
   return (
     <div {...rest} className={classNames('kbnNoDataPageContents', rest.className)}>
-      <EuiText textAlign="center">
-        <KibanaPageTemplateSolutionNavAvatar
-          name={solution}
-          iconType={logo || `logo${solution}`}
-          size="xxl"
-        />
-        <EuiSpacer />
-        <h1>
-          {pageTitle || (
-            <FormattedMessage
-              id="kibana-react.noDataPage.welcomeTitle"
-              defaultMessage="Welcome to Elastic {solution}!"
-              values={{ solution }}
-            />
-          )}
-        </h1>
-        <EuiTextColor color="subdued">
-          <p>
-            <FormattedMessage
-              id="kibana-react.noDataPage.intro"
-              defaultMessage="Add your data to get started, or {link} about {solution}."
-              values={{
-                solution,
-                link: (
-                  <EuiLink href={docsLink}>
-                    <FormattedMessage
-                      id="kibana-react.noDataPage.intro.link"
-                      defaultMessage="learn more"
-                    />
-                  </EuiLink>
-                ),
-              }}
-            />
-          </p>
-        </EuiTextColor>
-      </EuiText>
-      <EuiSpacer size="xxl" />
-      <EuiSpacer size="l" />
-      <EuiFlexGrid columns={2} style={{ justifyContent: 'space-around' }}>
-        {renderActions}
-      </EuiFlexGrid>
+      <NoDataPageBody
+        pageTitle={title}
+        actionCards={actionCards}
+        logo={logo}
+        solution={solution}
+        docsLink={docsLink}
+      />
       {actionsKeys.length > 1 ? (
         <>
           <EuiSpacer size="xxl" />