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/features/library-panels/LibraryPanelsPage.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useState } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { GrafanaRouteComponentProps } from '../../core/navigation/types';
+import { StoreState } from '../../types';
+import { getNavModel } from '../../core/selectors/navModel';
+import Page from '../../core/components/Page/Page';
+import { LibraryPanelsView } from './components/LibraryPanelsView/LibraryPanelsView';
+import { useAsync } from 'react-use';
+import { getLibraryPanels } from './state/api';
+import PageActionBar from '../../core/components/PageActionBar/PageActionBar';
+import { DEFAULT_PER_PAGE_PAGINATION } from 'app/core/constants';
+
+const mapStateToProps = (state: StoreState) => ({
+  navModel: getNavModel(state.navIndex, 'library-panels'),
+});
+
+const connector = connect(mapStateToProps, undefined);
+
+interface OwnProps extends GrafanaRouteComponentProps {}
+
+type Props = OwnProps & ConnectedProps<typeof connector>;
+
+export const LibraryPanelsPage: FC<Props> = ({ navModel }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const { value: searchResult, loading } = useAsync(async () => {
+    return getLibraryPanels();
+  });
+  const hasLibraryPanels = Boolean(searchResult?.libraryPanels.length);
+
+  return (
+    <Page navModel={navModel}>
+      <Page.Contents isLoading={loading}>
+        {hasLibraryPanels && (
+          <PageActionBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} placeholder={'Search by name'} />
+        )}
+        <LibraryPanelsView
+          onClickCard={() => undefined}
+          searchString={searchQuery}
+          currentPanelId={undefined}
+          showSecondaryActions={true}
+          perPage={DEFAULT_PER_PAGE_PAGINATION}
+        />
+      </Page.Contents>
+    </Page>
+  );
+};
+
+export default connect(mapStateToProps)(LibraryPanelsPage);

public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useReducer } from 'react';
 import { useDebounce } from 'react-use';
 import { css, cx } from '@emotion/css';
-import { Pagination, stylesFactory, useStyles } from '@grafana/ui';
+import { Pagination, useStyles } from '@grafana/ui';
 import { GrafanaTheme, LoadingState } from '@grafana/data';
 
 import { LibraryPanelCard } from '../LibraryPanelCard/LibraryPanelCard';
@@ -15,6 +15,7 @@ interface LibraryPanelViewProps {
   showSecondaryActions?: boolean;
   currentPanelId?: string;
   searchString: string;
+  perPage?: number;
 }
 
 export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
@@ -23,6 +24,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
   searchString,
   showSecondaryActions,
   currentPanelId: currentPanel,
+  perPage: propsPerPage = 40,
 }) => {
   const styles = useStyles(getPanelViewStyles);
   const [{ libraryPanels, page, perPage, numberOfPages, loadingState, currentPanelId }, dispatch] = useReducer(
@@ -30,6 +32,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
     {
       ...initialLibraryPanelsViewState,
       currentPanelId: currentPanel,
+      perPage: propsPerPage,
     }
   );
   const asyncDispatch = useMemo(() => asyncDispatcher(dispatch), [dispatch]);
@@ -75,7 +78,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
   );
 };
 
-const getPanelViewStyles = stylesFactory((theme: GrafanaTheme) => {
+const getPanelViewStyles = (theme: GrafanaTheme) => {
   return {
     container: css`
       display: flex;
@@ -96,6 +99,7 @@ const getPanelViewStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     pagination: css`
       align-self: center;
+      margin-top: ${theme.spacing.sm};
     `,
   };
-});
+};