LibraryPanels: Replace folderID with folderUID (#56414)

* user essentials mob! 🔱 lastFile:pkg/services/libraryelements/writers.go * user essentials mob! 🔱 lastFile:pkg/services/libraryelements/writers.go * user essentials mob! 🔱 lastFile:pkg/services/libraryelements/writers.go * user essentials mob! 🔱 lastFile:pkg/services/libraryelements/writers.go * user essentials mob! 🔱 lastFile:pkg/services/libraryelements/database.go * user essentials mob! 🔱 lastFile:pkg/services/libraryelements/writers.go * user essentials mob! 🔱 lastFile:pkg/services/libraryelements/writers.go * user essentials mob! 🔱 * support filterFolderUIDs in the frontend * move common logic to a variable * fixed FolderLibraryPanelsPage and improved unit test * fix backend lint error * fix formatting error Co-authored-by: Joao Silva <joao.silva@grafana.com> Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com> Co-authored-by: eledobleefe <laura.fernandez@grafana.com> Co-authored-by: joshhunt <josh@trtr.co>
2025-02-25 18:55:37 -06:00 · 2022-11-02 16:49:02 +01:00
parent 5a99aff7b8
commit 932429a545
13 changed files with 138 additions and 66 deletions
--- a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx
@@ -100,7 +100,7 @@ describe('LibraryPanelsSearch', () => {
        await waitFor(() =>
          expect(getLibraryPanelsSpy).toHaveBeenCalledWith({
            searchString: 'a',
-            folderFilter: [],
+            folderFilterUIDs: [],
            page: 0,
            typeFilter: [],
            perPage: 40,
@@ -128,7 +128,7 @@ describe('LibraryPanelsSearch', () => {
          expect(getLibraryPanelsSpy).toHaveBeenCalledWith({
            searchString: '',
            sortDirection: 'alpha-desc',
-            folderFilter: [],
+            folderFilterUIDs: [],
            page: 0,
            typeFilter: [],
            perPage: 40,
@@ -156,7 +156,7 @@ describe('LibraryPanelsSearch', () => {
        await waitFor(() =>
          expect(getLibraryPanelsSpy).toHaveBeenCalledWith({
            searchString: '',
-            folderFilter: [],
+            folderFilterUIDs: [],
            page: 0,
            typeFilter: ['graph', 'timeseries'],
            perPage: 40,
@@ -177,21 +177,52 @@ describe('LibraryPanelsSearch', () => {

    describe('and user changes folder filter', () => {
      it('should call api with correct params', async () => {
-        const { getLibraryPanelsSpy } = await getTestContext({ showFolderFilter: true });
+        const { getLibraryPanelsSpy } = await getTestContext(
+          { showFolderFilter: true, currentFolderUID: 'wXyZ1234' },
+          {
+            elements: [
+              {
+                id: 1,
+                name: 'Library Panel Name',
+                kind: LibraryElementKind.Panel,
+                uid: 'uid',
+                description: 'Library Panel Description',
+                folderId: 0,
+                model: { type: 'timeseries', title: 'A title' },
+                type: 'timeseries',
+                orgId: 1,
+                version: 1,
+                meta: {
+                  folderName: 'General',
+                  folderUid: '',
+                  connectedDashboards: 0,
+                  created: '2021-01-01 12:00:00',
+                  createdBy: { id: 1, name: 'Admin', avatarUrl: '' },
+                  updated: '2021-01-01 12:00:00',
+                  updatedBy: { id: 1, name: 'Admin', avatarUrl: '' },
+                },
+              },
+            ],
+            perPage: 40,
+            page: 1,
+            totalCount: 0,
+          }
+        );

        await userEvent.click(screen.getByRole('combobox', { name: /folder filter/i }));
-        await userEvent.type(screen.getByRole('combobox', { name: /folder filter/i }), '{enter}', {
+        await userEvent.type(screen.getByRole('combobox', { name: /folder filter/i }), 'library', {
          skipClick: true,
        });
-        await waitFor(() =>
+
+        await waitFor(() => {
          expect(getLibraryPanelsSpy).toHaveBeenCalledWith({
            searchString: '',
-            folderFilter: ['0'],
+            folderFilterUIDs: ['wXyZ1234'],
            page: 0,
            typeFilter: [],
            perPage: 40,
-          })
-        );
+          });
+        });
      });
    });
  });
--- a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
@@ -26,7 +26,7 @@ export interface LibraryPanelsSearchProps {
  showFolderFilter?: boolean;
  showSecondaryActions?: boolean;
  currentPanelId?: string;
-  currentFolderId?: number;
+  currentFolderUID?: string;
  perPage?: number;
 }

@@ -34,7 +34,7 @@ export const LibraryPanelsSearch = ({
  onClick,
  variant = LibraryPanelsSearchVariant.Spacious,
  currentPanelId,
-  currentFolderId,
+  currentFolderUID,
  perPage = DEFAULT_PER_PAGE_PAGINATION,
  showPanelFilter = false,
  showFolderFilter = false,
@@ -48,7 +48,7 @@ export const LibraryPanelsSearch = ({
  useDebounce(() => setDebouncedSearchQuery(searchQuery), 200, [searchQuery]);

  const [sortDirection, setSortDirection] = useState<SelectableValue<string>>({});
-  const [folderFilter, setFolderFilter] = useState<string[]>(currentFolderId ? [String(currentFolderId)] : []);
+  const [folderFilter, setFolderFilter] = useState<string[]>(currentFolderUID ? [currentFolderUID] : []);
  const [panelFilter, setPanelFilter] = useState<string[]>([]);

  const sortOrFiltersVisible = showSort || showPanelFilter || showFolderFilter;
@@ -155,7 +155,7 @@ const SearchControls = React.memo(
      [onPanelFilterChange]
    );
    const folderFilterChanged = useCallback(
-      (folders: FolderInfo[]) => onFolderFilterChange(folders.map((f) => String(f.id))),
+      (folders: FolderInfo[]) => onFolderFilterChange(folders.map((f) => f.uid ?? '')),
      [onFolderFilterChange]
    );

--- a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
@@ -51,7 +51,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
          searchString,
          sortDirection,
          panelFilter,
-          folderFilter,
+          folderFilterUIDs: folderFilter,
          page,
          perPage,
          currentPanelId,
--- a/public/app/features/library-panels/components/LibraryPanelsView/actions.ts
+++ b/public/app/features/library-panels/components/LibraryPanelsView/actions.ts
@@ -14,7 +14,7 @@ interface SearchArgs {
  searchString: string;
  sortDirection?: string;
  panelFilter?: string[];
-  folderFilter?: string[];
+  folderFilterUIDs?: string[];
  currentPanelId?: string;
 }

@@ -29,7 +29,7 @@ export function searchForLibraryPanels(args: SearchArgs): DispatchResult {
        excludeUid: args.currentPanelId,
        sortDirection: args.sortDirection,
        typeFilter: args.panelFilter,
-        folderFilter: args.folderFilter,
+        folderFilterUIDs: args.folderFilterUIDs,
      })
    ).pipe(
      mergeMap(({ perPage, elements: libraryPanels, page, totalCount }) =>
--- a/public/app/features/library-panels/state/api.ts
+++ b/public/app/features/library-panels/state/api.ts
@@ -19,7 +19,7 @@ export interface GetLibraryPanelsOptions {
  excludeUid?: string;
  sortDirection?: string;
  typeFilter?: string[];
-  folderFilter?: string[];
+  folderFilterUIDs?: string[];
 }

 export async function getLibraryPanels({
@@ -29,13 +29,13 @@ export async function getLibraryPanels({
  excludeUid = '',
  sortDirection = '',
  typeFilter = [],
-  folderFilter = [],
+  folderFilterUIDs = [],
 }: GetLibraryPanelsOptions = {}): Promise<LibraryElementsSearchResult> {
  const params = new URLSearchParams();
  params.append('searchString', searchString);
  params.append('sortDirection', sortDirection);
  params.append('typeFilter', typeFilter.join(','));
-  params.append('folderFilter', folderFilter.join(','));
+  params.append('folderFilterUIDs', folderFilterUIDs.join(','));
  params.append('excludeUid', excludeUid);
  params.append('perPage', perPage.toString(10));
  params.append('page', page.toString(10));