[Security Solution] Update security overview splash (#73050)

## Summary

elastic/endpoint-app-team#591

How to verify:

1. go to: x-pack/test/security_solution_cypress/runner.ts 
2. comment line 20 (await esArchiver.load('auditbeat');) 
3. in line 25 change cypress:run for cypress:open
4. then in our directory run yarn cypress:run-as-ci when the cypress is open,
5. you can access the Kibana instance in port 5620 with username elastic and password changeme


<img width="1674" alt="Screenshot 2020-07-23 at 14 48 34" src="https://user-images.githubusercontent.com/6295984/88294333-04a17c80-ccf4-11ea-861b-75a85d2b8129.png">


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)
- [ ] ~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~
- [ ] ~[Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~
- [ ] ~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~
- [ ] ~This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)~
- [ ] ~This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)~

### For maintainers

- [ ] ~This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~

Author: angorayc

src/core/public/doc_links/doc_links_service.ts

@@ -112,7 +112,7 @@ export class DocLinksService {
         kibana: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/index.html`,
         siem: {
           guide: `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/index.html`,
-          gettingStarted: `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/install-siem.html`,
+          gettingStarted: `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/index.html`,
         },
         query: {
           luceneQuerySyntax: `${ELASTICSEARCH_DOCS}query-dsl-query-string-query.html#query-string-syntax`,

x-pack/plugins/security_solution/public/cases/pages/saved_object_no_permissions.tsx

@@ -4,21 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { EmptyPage } from '../../common/components/empty_page';
 import * as i18n from './translations';
 import { useKibana } from '../../common/lib/kibana';
 
 export const CaseSavedObjectNoPermissions = React.memo(() => {
   const docLinks = useKibana().services.docLinks;
+  const actions = useMemo(
+    () => ({
+      savedObject: {
+        icon: 'documents',
+        label: i18n.GO_TO_DOCUMENTATION,
+        url: `${docLinks.ELASTIC_WEBSITE_URL}guide/en/security/${docLinks.DOC_LINK_VERSION}s`,
+        target: '_blank',
+      },
+    }),
+    [docLinks]
+  );
 
   return (
     <EmptyPage
-      actionPrimaryIcon="documents"
-      actionPrimaryLabel={i18n.GO_TO_DOCUMENTATION}
-      actionPrimaryUrl={`${docLinks.ELASTIC_WEBSITE_URL}guide/en/security/${docLinks.DOC_LINK_VERSION}s`}
-      actionPrimaryTarget="_blank"
+      actions={actions}
       message={i18n.SAVED_OBJECT_NO_PERMISSIONS_MSG}
       data-test-subj="no_saved_objects_permissions"
       title={i18n.SAVED_OBJECT_NO_PERMISSIONS_TITLE}

x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap

@@ -10,12 +10,12 @@ import React from 'react';
 import { EmptyPage } from './index';
 
 test('renders correctly', () => {
-  const EmptyComponent = shallow(
-    <EmptyPage
-      actionPrimaryLabel="Do Something"
-      actionPrimaryUrl="my/url/from/nowwhere"
-      title="My Super Title"
-    />
-  );
+  const actions = {
+    actions: {
+      label: 'Do Something',
+      url: 'my/url/from/nowwhere',
+    },
+  };
+  const EmptyComponent = shallow(<EmptyPage actions={actions} title="My Super Title" />);
   expect(EmptyComponent).toMatchSnapshot();
 });

x-pack/plugins/security_solution/public/common/components/empty_page/index.test.tsx

@@ -4,84 +4,123 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
-import React, { MouseEventHandler, ReactNode } from 'react';
+import {
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  IconType,
+  EuiCard,
+} from '@elastic/eui';
+import React, { MouseEventHandler, ReactNode, useMemo } from 'react';
 import styled from 'styled-components';
 
 const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center; /* Corrects horizontal centering in IE11 */
+  max-width: 60em;
 `;
 
 EmptyPrompt.displayName = 'EmptyPrompt';
 
+interface EmptyPageActions {
+  icon?: IconType;
+  label: string;
+  target?: string;
+  url: string;
+  descriptionTitle?: string;
+  description?: string;
+  fill?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+}
+
+export type EmptyPageActionsProps = Record<string, EmptyPageActions>;
+
 interface EmptyPageProps {
-  actionPrimaryIcon?: IconType;
-  actionPrimaryLabel: string;
-  actionPrimaryTarget?: string;
-  actionPrimaryUrl: string;
-  actionPrimaryFill?: boolean;
-  actionSecondaryIcon?: IconType;
-  actionSecondaryLabel?: string;
-  actionSecondaryTarget?: string;
-  actionSecondaryUrl?: string;
-  actionSecondaryOnClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  actions: EmptyPageActionsProps;
   'data-test-subj'?: string;
   message?: ReactNode;
   title: string;
 }
 
-export const EmptyPage = React.memo<EmptyPageProps>(
-  ({
-    actionPrimaryIcon,
-    actionPrimaryLabel,
-    actionPrimaryTarget,
-    actionPrimaryUrl,
-    actionPrimaryFill = true,
-    actionSecondaryIcon,
-    actionSecondaryLabel,
-    actionSecondaryTarget,
-    actionSecondaryUrl,
-    actionSecondaryOnClick,
-    message,
-    title,
-    ...rest
-  }) => (
+const EmptyPageComponent = React.memo<EmptyPageProps>(({ actions, message, title, ...rest }) => {
+  const titles = Object.keys(actions);
+  const maxItemWidth = 283;
+  const renderActions = useMemo(
+    () =>
+      Object.values(actions)
+        .filter((a) => a.label && a.url)
+        .map(
+          (
+            {
+              icon,
+              label,
+              target,
+              url,
+              descriptionTitle = false,
+              description = false,
+              onClick,
+              fill = true,
+            },
+            idx
+          ) =>
+            descriptionTitle != null || description != null ? (
+              <EuiFlexItem
+                grow={false}
+                style={{ maxWidth: maxItemWidth }}
+                key={`empty-page-${titles[idx]}-action`}
+              >
+                <EuiCard
+                  title={descriptionTitle}
+                  description={description}
+                  footer={
+                    /* eslint-disable-next-line @elastic/eui/href-or-on-click */
+                    <EuiButton
+                      href={url}
+                      onClick={onClick}
+                      iconType={icon}
+                      target={target}
+                      fill={fill}
+                      data-test-subj={`empty-page-${titles[idx]}-action`}
+                    >
+                      {label}
+                    </EuiButton>
+                  }
+                />
+              </EuiFlexItem>
+            ) : (
+              <EuiFlexItem
+                grow={false}
+                style={{ maxWidth: maxItemWidth }}
+                key={`empty-page-${titles[idx]}-action`}
+              >
+                {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+                <EuiButton
+                  href={url}
+                  onClick={onClick}
+                  iconType={icon}
+                  target={target}
+                  data-test-subj={`empty-page-${titles[idx]}-action`}
+                >
+                  {label}
+                </EuiButton>
+              </EuiFlexItem>
+            )
+        ),
+    [actions, titles]
+  );
+
+  return (
     <EmptyPrompt
       iconType="logoSecurity"
       title={<h2>{title}</h2>}
       body={message && <p>{message}</p>}
-      actions={
-        <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill={actionPrimaryFill}
-              href={actionPrimaryUrl}
-              iconType={actionPrimaryIcon}
-              target={actionPrimaryTarget}
-            >
-              {actionPrimaryLabel}
-            </EuiButton>
-          </EuiFlexItem>
-
-          {actionSecondaryLabel && actionSecondaryUrl && (
-            <EuiFlexItem grow={false}>
-              {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
-              <EuiButton
-                href={actionSecondaryUrl}
-                onClick={actionSecondaryOnClick}
-                iconType={actionSecondaryIcon}
-                target={actionSecondaryTarget}
-                data-test-subj="empty-page-secondary-action"
-              >
-                {actionSecondaryLabel}
-              </EuiButton>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      }
+      actions={<EuiFlexGroup justifyContent="center">{renderActions}</EuiFlexGroup>}
       {...rest}
     />
-  )
-);
+  );
+});
+
+EmptyPageComponent.displayName = 'EmptyPageComponent';
 
+export const EmptyPage = React.memo(EmptyPageComponent);
 EmptyPage.displayName = 'EmptyPage';

x-pack/plugins/security_solution/public/common/components/empty_page/index.tsx

@@ -7,16 +7,39 @@
 import { i18n } from '@kbn/i18n';
 
 export const EMPTY_TITLE = i18n.translate('xpack.securitySolution.pages.common.emptyTitle', {
-  defaultMessage: 'Welcome to Security Solution. Let’s get you started.',
+  defaultMessage: 'Welcome to Elastic Security. Let’s get you started.',
 });
 
-export const EMPTY_ACTION_PRIMARY = i18n.translate(
-  'xpack.securitySolution.pages.common.emptyActionPrimary',
+export const EMPTY_ACTION_ELASTIC_AGENT = i18n.translate(
+  'xpack.securitySolution.pages.common.emptyActionElasticAgent',
+  {
+    defaultMessage: 'Add data with Elastic Agent',
+  }
+);
+
+export const EMPTY_ACTION_ELASTIC_AGENT_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.pages.common.emptyActionElasticAgentDescription',
+  {
+    defaultMessage:
+      'The Elastic Agent provides a simple, unified way to add monitoring to your hosts.',
+  }
+);
+
+export const EMPTY_ACTION_BEATS = i18n.translate(
+  'xpack.securitySolution.pages.common.emptyActionBeats',
   {
     defaultMessage: 'Add data with Beats',
   }
 );
 
+export const EMPTY_ACTION_BEATS_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.pages.common.emptyActionBeatsDescription',
+  {
+    defaultMessage:
+      'Lightweight Beats can send data from hundreds or thousands of machines and systems',
+  }
+);
+
 export const EMPTY_ACTION_SECONDARY = i18n.translate(
   'xpack.securitySolution.pages.common.emptyActionSecondary',
   {
@@ -27,6 +50,14 @@ export const EMPTY_ACTION_SECONDARY = i18n.translate(
 export const EMPTY_ACTION_ENDPOINT = i18n.translate(
   'xpack.securitySolution.pages.common.emptyActionEndpoint',
   {
-    defaultMessage: 'Add data with Elastic Agent (Beta)',
+    defaultMessage: 'Add Elastic Endpoint Security',
+  }
+);
+
+export const EMPTY_ACTION_ENDPOINT_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.pages.common.emptyActionEndpointDescription',
+  {
+    defaultMessage:
+      'Protect your hosts with threat prevention, detection, and deep security data visibility.',
   }
 );

x-pack/plugins/security_solution/public/common/translations.ts

@@ -53,6 +53,9 @@ jest.mock('react-router-dom', () => {
     useHistory: jest.fn(),
   };
 });
+jest.mock('../../components/alerts_info', () => ({
+  useAlertInfo: jest.fn().mockReturnValue([]),
+}));
 
 const state: State = {
   ...mockGlobalState,

x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx

@@ -4,20 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { EmptyPage } from '../../../common/components/empty_page';
 import * as i18n from './translations';
 import { useKibana } from '../../../common/lib/kibana';
 
 export const DetectionEngineNoIndex = React.memo(() => {
   const docLinks = useKibana().services.docLinks;
+  const actions = useMemo(
+    () => ({
+      detections: {
+        icon: 'documents',
+        label: i18n.GO_TO_DOCUMENTATION,
+        url: `${docLinks.ELASTIC_WEBSITE_URL}guide/en/security/${docLinks.DOC_LINK_VERSION}/detection-engine-overview.html#detections-permissions`,
+        target: '_blank',
+      },
+    }),
+    [docLinks]
+  );
+
   return (
     <EmptyPage
-      actionPrimaryIcon="documents"
-      actionPrimaryLabel={i18n.GO_TO_DOCUMENTATION}
-      actionPrimaryUrl={`${docLinks.ELASTIC_WEBSITE_URL}guide/en/security/${docLinks.DOC_LINK_VERSION}/detection-engine-overview.html#detections-permissions`}
-      actionPrimaryTarget="_blank"
+      actions={actions}
       message={i18n.NO_INDEX_MSG_BODY}
       data-test-subj="no_index"
       title={i18n.NO_INDEX_TITLE}