LibraryPanels: Adds folder filter to manage library panel page (#33560)

* LibraryPanels: Adds folder filter

* Refactor: Adds folder filter to library search

* Refactor: splits huge function into smaller functions

* LibraryPanels: Adds Panels Page to Manage Folder tabs (#33618)

* Chore: adds tests to LibraryPanelsSearch

* Refactor: Adds reducer and tests

* Chore: changes GrafanaThemeV2

* Refactor: pulls everything behind the feature toggle

* Chore: removes clear icon from FolderFilter

* Chore: adds filter to SortPicker

* Refactor: using useAsync instead

public/app/features/folders/FolderLibraryPanelsPage.tsx

@@ -0,0 +1,54 @@
+import React, { 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 { getLoadingNav } from './state/navModel';
+import { LibraryPanelDTO } from '../library-panels/types';
+import Page from '../../core/components/Page/Page';
+import { LibraryPanelsSearch } from '../library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch';
+import { OpenLibraryPanelModal } from '../library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal';
+import { getFolderByUid } from './state/actions';
+import { useAsync } from 'react-use';
+
+export interface OwnProps extends GrafanaRouteComponentProps<{ uid: string }> {}
+
+const mapStateToProps = (state: StoreState, props: OwnProps) => {
+  const uid = props.match.params.uid;
+  return {
+    navModel: getNavModel(state.navIndex, `folder-library-panels-${uid}`, getLoadingNav(1)),
+    folderUid: uid,
+    folder: state.folder,
+  };
+};
+
+const mapDispatchToProps = {
+  getFolderByUid,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export type Props = OwnProps & ConnectedProps<typeof connector>;
+
+export function FolderLibraryPanelsPage({ navModel, getFolderByUid, folderUid, folder }: Props): JSX.Element {
+  const { loading } = useAsync<void>(async () => await getFolderByUid(folderUid), [getFolderByUid, folderUid]);
+  const [selected, setSelected] = useState<LibraryPanelDTO | undefined>(undefined);
+
+  return (
+    <Page navModel={navModel}>
+      <Page.Contents isLoading={loading}>
+        <LibraryPanelsSearch
+          onClick={setSelected}
+          currentFolderId={folder.id}
+          showSecondaryActions
+          showSort
+          showPanelFilter
+        />
+        {selected ? <OpenLibraryPanelModal onDismiss={() => setSelected(undefined)} libraryPanel={selected} /> : null}
+      </Page.Contents>
+    </Page>
+  );
+}
+
+export default connector(FolderLibraryPanelsPage);

public/app/features/folders/state/navModel.ts

@@ -1,5 +1,6 @@
 import { FolderDTO } from 'app/types';
-import { NavModelItem, NavModel } from '@grafana/data';
+import { NavModel, NavModelItem } from '@grafana/data';
+import { getConfig } from '../../../core/config';
 
 export function buildNavModel(folder: FolderDTO): NavModelItem {
   const model = {
@@ -40,6 +41,16 @@ export function buildNavModel(folder: FolderDTO): NavModelItem {
     });
   }
 
+  if (getConfig().featureToggles.panelLibrary) {
+    model.children.push({
+      active: false,
+      icon: 'library-panel',
+      id: `folder-library-panels-${folder.uid}`,
+      text: 'Panels',
+      url: `${folder.url}/library-panels`,
+    });
+  }
+
   return model;
 }