LibraryPanels: Adds initial section and Page to Dashboard submenu (#32876)

* LibraryPanels: Adds initial section and Page to Dashboard submenu

* Refactor: adds perPage as prop

* Chore: renames OrgActionBar

* Chore: updates after PR comments

* Chore: updates snapshot

public/app/core/components/PageActionBar/PageActionBar.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import PageActionBar, { Props } from './PageActionBar';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    searchQuery: '',
+    setSearchQuery: jest.fn(),
+    target: '_blank',
+    linkButton: { href: 'some/url', title: 'test' },
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<PageActionBar {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

public/app/core/components/PageActionBar/PageActionBar.tsx

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+import { FilterInput } from '../FilterInput/FilterInput';
+import { LinkButton } from '@grafana/ui';
+
+export interface Props {
+  searchQuery: string;
+  setSearchQuery: (value: string) => void;
+  linkButton?: { href: string; title: string };
+  target?: string;
+  placeholder?: string;
+}
+
+export default class PageActionBar extends PureComponent<Props> {
+  render() {
+    const { searchQuery, linkButton, setSearchQuery, target, placeholder = 'Search by name or type' } = this.props;
+    const linkProps = { href: linkButton?.href };
+
+    if (target) {
+      (linkProps as any).target = target;
+    }
+
+    return (
+      <div className="page-action-bar">
+        <div className="gf-form gf-form--grow">
+          <FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={placeholder} />
+        </div>
+        <div className="page-action-bar__spacer" />
+        {linkButton && <LinkButton {...linkProps}>{linkButton.title}</LinkButton>}
+      </div>
+    );
+  }
+}

public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="page-action-bar"
+>
+  <div
+    className="gf-form gf-form--grow"
+  >
+    <FilterInput
+      onChange={[MockFunction]}
+      placeholder="Search by name or type"
+      value=""
+    />
+  </div>
+  <div
+    className="page-action-bar__spacer"
+  />
+  <LinkButton
+    href="some/url"
+    target="_blank"
+  >
+    test
+  </LinkButton>
+</div>
+`;