Do not render descriptionless actions within an EuiCard

This updates the logic of EmptyPage to better handle these cases. Adds snapshot tests to verify.
elastic · Jul 29, 2020 · e36bbd5 · e36bbd5
1 parent 774d359
commit e36bbd5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 23 deletions.
diff --git a/...s/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap b/...s/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
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
@@ -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
@@ -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