[Add panel flyout] Moving create new to the top of SavedObjectFinder

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx

@@ -29,12 +29,18 @@ import { ContactCardEmbeddable } from '../../../../test_samples/embeddables/cont
 import { ContainerInput } from '../../../../containers';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
-
+import { coreMock } from '../../../../../../../../core/public/mocks';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
-// eslint-disable-next-line
-import { coreMock } from '../../../../../../../../core/public/mocks';
+function DummySavedObjectFinder(props: { children: React.ReactNode }) {
+  return (
+    <div>
+      <div>Hello World</div>
+      {props.children}
+    </div>
+  ) as JSX.Element;
+}
 
 test('createNewEmbeddable() add embeddable to container', async () => {
   const core = coreMock.createStart();
@@ -101,14 +107,14 @@ test('selecting embeddable in "Create new ..." list calls createNewEmbeddable()'
   };
   const container = new HelloWorldContainer(input, { getEmbeddableFactory } as any);
   const onClose = jest.fn();
-  const component = mount<AddPanelFlyout>(
+  const component = mount(
     <AddPanelFlyout
       container={container}
       onClose={onClose}
       getFactory={getEmbeddableFactory}
       getAllFactories={() => new Set<any>([contactCardEmbeddableFactory]).values()}
       notifications={core.notifications}
-      SavedObjectFinder={() => null}
+      SavedObjectFinder={props => <DummySavedObjectFinder {...props} />}
     />
   ) as ReactWrapper<unknown, unknown, AddPanelFlyout>;
 

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx

@@ -18,24 +18,21 @@
  */
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { CoreSetup } from 'src/core/public';
 
 import {
-  EuiButton,
   EuiContextMenuItem,
-  EuiContextMenuPanel,
   EuiFlyout,
   EuiFlyoutBody,
-  EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiPopover,
   EuiTitle,
 } from '@elastic/eui';
 
 import { IContainer } from '../../../../containers';
 import { EmbeddableFactoryNotFoundError } from '../../../../errors';
 import { GetEmbeddableFactories, GetEmbeddableFactory } from '../../../../types';
+import { SavedObjectFinderCreateNew } from './saved_object_finder_create_new';
 
 interface Props {
   onClose: () => void;
@@ -107,15 +104,7 @@ export class AddPanelFlyout extends React.Component<Props, State> {
     this.showToast(name);
   };
 
-  private toggleCreateMenu = () => {
-    this.setState(prevState => ({ isCreateMenuOpen: !prevState.isCreateMenuOpen }));
-  };
-
-  private closeCreateMenu = () => {
-    this.setState({ isCreateMenuOpen: false });
-  };
-
-  private getCreateMenuItems() {
+  private getCreateMenuItems(): ReactElement[] {
     return [...this.props.getAllFactories()]
       .filter(factory => factory.isEditable() && !factory.isContainerType && factory.canCreateNew())
       .map(factory => (
@@ -145,7 +134,9 @@ export class AddPanelFlyout extends React.Component<Props, State> {
         noItemsMessage={i18n.translate('embeddableApi.addPanel.noMatchingObjectsMessage', {
           defaultMessage: 'No matching objects found.',
         })}
-      />
+      >
+        <SavedObjectFinderCreateNew menuItems={this.getCreateMenuItems()} />
+      </SavedObjectFinder>
     );
 
     return (
@@ -158,30 +149,6 @@ export class AddPanelFlyout extends React.Component<Props, State> {
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>{savedObjectsFinder}</EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiPopover
-            id="createNew"
-            button={
-              <EuiButton
-                data-test-subj="createNew"
-                iconType="arrowDown"
-                iconSide="right"
-                onClick={this.toggleCreateMenu}
-              >
-                <FormattedMessage
-                  id="embeddableApi.addPanel.createNewDefaultOption"
-                  defaultMessage="Create new"
-                />
-              </EuiButton>
-            }
-            isOpen={this.state.isCreateMenuOpen}
-            closePopover={this.closeCreateMenu}
-            panelPaddingSize="none"
-            anchorPosition="upLeft"
-          >
-            <EuiContextMenuPanel items={this.getCreateMenuItems()} />
-          </EuiPopover>
-        </EuiFlyoutFooter>
       </EuiFlyout>
     );
   }

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/saved_object_finder_create_new.tsx

@@ -0,0 +1,62 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { ReactElement, useState } from 'react';
+import { EuiButton } from '@elastic/eui';
+import { EuiContextMenuPanel } from '@elastic/eui';
+import { EuiPopover } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface Props {
+  menuItems: ReactElement[];
+}
+
+export function SavedObjectFinderCreateNew({ menuItems }: Props) {
+  const [isCreateMenuOpen, setCreateMenuOpen] = useState(false);
+  const toggleCreateMenu = () => {
+    setCreateMenuOpen(!isCreateMenuOpen);
+  };
+  const closeCreateMenu = () => {
+    setCreateMenuOpen(false);
+  };
+  return (
+    <EuiPopover
+      id="createNew"
+      button={
+        <EuiButton
+          data-test-subj="createNew"
+          iconType="arrowDown"
+          iconSide="right"
+          onClick={toggleCreateMenu}
+          fill
+        >
+          <FormattedMessage
+            id="embeddableApi.addPanel.createNewDefaultOption"
+            defaultMessage="Create new"
+          />
+        </EuiButton>
+      }
+      isOpen={isCreateMenuOpen}
+      closePopover={closeCreateMenu}
+      panelPaddingSize="none"
+      anchorPosition="downRight"
+    >
+      <EuiContextMenuPanel items={menuItems} />
+    </EuiPopover>
+  );
+}

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx

@@ -0,0 +1,91 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { SavedObjectFinderCreateNew } from '../saved_object_finder_create_new';
+import { shallow } from 'enzyme';
+import { EuiButton, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+
+describe('SavedObjectFinderCreateNew', () => {
+  test('renders correctly with no items', () => {
+    const wrapper = shallow(<SavedObjectFinderCreateNew menuItems={[]} />);
+    expect(wrapper.find(EuiPopover).length).toEqual(1);
+    const menuPanel = wrapper.find(EuiContextMenuPanel);
+    expect(menuPanel.length).toEqual(1);
+    const panelItems = menuPanel.prop('items');
+    if (panelItems) {
+      expect(panelItems.length).toEqual(0);
+    } else {
+      fail('Expect paneltems to be defined');
+    }
+  });
+
+  test('renders correctly with items', () => {
+    const items = [];
+    const onClick = jest.fn();
+    for (let i = 0; i < 3; i++) {
+      items.push(
+        <EuiContextMenuItem
+          key={i + 1}
+          data-test-subj={`item${i + 1}`}
+          onClick={onClick}
+        >{`item${i + 1}`}</EuiContextMenuItem>
+      );
+    }
+
+    const wrapper = shallow(<SavedObjectFinderCreateNew menuItems={items} />);
+    expect(wrapper.find(EuiPopover).length).toEqual(1);
+    const menuPanel = wrapper.find(EuiContextMenuPanel);
+    expect(menuPanel.length).toEqual(1);
+    const paneltems = menuPanel.prop('items');
+    if (paneltems) {
+      expect(paneltems.length).toEqual(3);
+      expect(paneltems[0].key).toEqual('1');
+      expect(paneltems[1].key).toEqual('2');
+      expect(paneltems[2].key).toEqual('3');
+    } else {
+      fail('Expect paneltems to be defined');
+    }
+  });
+
+  test('clicking the button opens/closes the popover', () => {
+    const items = [];
+    const onClick = jest.fn();
+    for (let i = 0; i < 3; i++) {
+      items.push(
+        <EuiContextMenuItem
+          key={i + 1}
+          data-test-subj={`item${i + 1}`}
+          onClick={onClick}
+        >{`item${i + 1}`}</EuiContextMenuItem>
+      );
+    }
+
+    const component = mountWithIntl(<SavedObjectFinderCreateNew menuItems={items} />);
+    let popover = component.find(EuiPopover);
+    expect(popover.prop('isOpen')).toBe(false);
+    const button = component.find(EuiButton);
+    button.simulate('click');
+    popover = component.find(EuiPopover);
+    expect(popover.prop('isOpen')).toBe(true);
+    button.simulate('click');
+    popover = component.find(EuiPopover);
+    expect(popover.prop('isOpen')).toBe(false);
+  });
+});

src/plugins/saved_objects/public/finder/saved_object_finder.test.tsx

@@ -695,4 +695,34 @@ describe('SavedObjectsFinder', () => {
       expect(wrapper.containsMatchingElement(<EuiLoadingSpinner />)).toBe(false);
     });
   });
+
+  it('should render with children', async () => {
+    const core = coreMock.createStart();
+    ((core.savedObjects.client.find as any) as jest.SpyInstance).mockImplementation(() =>
+      Promise.resolve({ savedObjects: [doc, doc2] })
+    );
+    core.uiSettings.get.mockImplementation(() => 10);
+
+    const wrapper = shallow(
+      <SavedObjectFinder
+        savedObjects={core.savedObjects}
+        uiSettings={core.uiSettings}
+        savedObjectMetaData={[
+          {
+            type: 'search',
+            name: 'Search',
+            getIconForSavedObject: () => 'search',
+          },
+          {
+            type: 'vis',
+            name: 'Vis',
+            getIconForSavedObject: () => 'visLine',
+          },
+        ]}
+      >
+        <button id="testChildButton">Dummy text</button>
+      </SavedObjectFinder>
+    );
+    expect(wrapper.exists('#testChildButton')).toBe(true);
+  });
 });

src/plugins/saved_objects/public/finder/saved_object_finder.tsx

@@ -438,6 +438,7 @@ class SavedObjectFinderUi extends React.Component<
             )}
           </EuiFilterGroup>
         </EuiFlexItem>
+        {this.props.children ? <EuiFlexItem grow={false}>{this.props.children}</EuiFlexItem> : null}
       </EuiFlexGroup>
     );
   }