From 62e8e987ad6e3b7beda191ae9e3bdfeb894ec8ef Mon Sep 17 00:00:00 2001
From: Ryland Herrick <ryalnd@gmail.com>
Date: Wed, 29 Jul 2020 01:50:56 -0500
Subject: [PATCH] Do not render descriptionless actions within an EuiCard
 (#73611) (#73624)

This updates the logic of EmptyPage to better handle these cases. Adds
snapshot tests to verify.
---
 .../__snapshots__/index.test.tsx.snap         | 36 +++++++++++++++++--
 .../components/empty_page/index.test.tsx      | 32 ++++++++++++-----
 .../common/components/empty_page/index.tsx    | 15 ++------
 3 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
index 09dcb8dc5d84e..9bf3be7b5dfa4 100644
--- a/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`EmptyPage component renders actions with descriptions 1`] = `
 <EmptyPrompt
   actions={
     <EuiFlexGroup
@@ -15,7 +15,7 @@ exports[`renders correctly 1`] = `
         }
       >
         <EuiCard
-          description={false}
+          description="My Description"
           footer={
             <EuiButton
               data-test-subj="empty-page-actions-action"
@@ -38,3 +38,35 @@ exports[`renders correctly 1`] = `
   }
 />
 `;
+
+exports[`EmptyPage component renders actions without descriptions 1`] = `
+<EmptyPrompt
+  actions={
+    <EuiFlexGroup
+      justifyContent="center"
+    >
+      <EuiFlexItem
+        grow={false}
+        style={
+          Object {
+            "maxWidth": 283,
+          }
+        }
+      >
+        <EuiButton
+          data-test-subj="empty-page-actions-action"
+          href="my/url/from/nowwhere"
+        >
+          Do Something
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  }
+  iconType="logoSecurity"
+  title={
+    <h2>
+      My Super Title
+    </h2>
+  }
+/>
+`;
diff --git a/x-pack/plugins/security_solution/public/common/components/empty_page/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/empty_page/index.test.tsx
index 8e025faefeabe..28e01eaa3eead 100644
--- a/x-pack/plugins/security_solution/public/common/components/empty_page/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/empty_page/index.test.tsx
@@ -9,13 +9,27 @@ import React from 'react';
 
 import { EmptyPage } from './index';
 
-test('renders correctly', () => {
-  const actions = {
-    actions: {
-      label: 'Do Something',
-      url: 'my/url/from/nowwhere',
-    },
-  };
-  const EmptyComponent = shallow(<EmptyPage actions={actions} title="My Super Title" />);
-  expect(EmptyComponent).toMatchSnapshot();
+describe('EmptyPage component', () => {
+  it('renders actions without descriptions', () => {
+    const actions = {
+      actions: {
+        label: 'Do Something',
+        url: 'my/url/from/nowwhere',
+      },
+    };
+    const EmptyComponent = shallow(<EmptyPage actions={actions} title="My Super Title" />);
+    expect(EmptyComponent).toMatchSnapshot();
+  });
+
+  it('renders actions with descriptions', () => {
+    const actions = {
+      actions: {
+        description: 'My Description',
+        label: 'Do Something',
+        url: 'my/url/from/nowwhere',
+      },
+    };
+    const EmptyComponent = shallow(<EmptyPage actions={actions} title="My Super Title" />);
+    expect(EmptyComponent).toMatchSnapshot();
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/empty_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/empty_page/index.tsx
index 89f4b125e930c..e0db1e90374ad 100644
--- a/x-pack/plugins/security_solution/public/common/components/empty_page/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/empty_page/index.tsx
@@ -51,16 +51,7 @@ const EmptyPageComponent = React.memo<EmptyPageProps>(({ actions, message, title
         .filter((a) => a.label && a.url)
         .map(
           (
-            {
-              icon,
-              label,
-              target,
-              url,
-              descriptionTitle = false,
-              description = false,
-              onClick,
-              fill = true,
-            },
+            { icon, label, target, url, descriptionTitle, description, onClick, fill = true },
             idx
           ) =>
             descriptionTitle != null || description != null ? (
@@ -70,8 +61,8 @@ const EmptyPageComponent = React.memo<EmptyPageProps>(({ actions, message, title
                 key={`empty-page-${titles[idx]}-action`}
               >
                 <EuiCard
-                  title={descriptionTitle}
-                  description={description}
+                  title={descriptionTitle ?? false}
+                  description={description ?? false}
                   footer={
                     /* eslint-disable-next-line @elastic/eui/href-or-on-click */
                     <EuiButton