FolderPicker: Show parent folder when searching (#111026)

* Add FolderParent component

* Move parent folder after the folder name

* Small improvements

public/app/core/components/NestedFolderPicker/FolderParent.tsx

@@ -0,0 +1,53 @@
+import { memo } from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+import { Box, Text } from '@grafana/ui';
+
+import { useGetFolderQueryFacade } from '../../../api/clients/folder/v1beta1/hooks';
+import { DashboardsTreeItem } from '../../../features/browse-dashboards/types';
+
+interface ParentTextProps {
+  folder: string;
+}
+
+function ParentText({ folder }: ParentTextProps) {
+  return (
+    <Box marginLeft={1}>
+      <Text variant={'bodySmall'} color={'secondary'} truncate>
+        /{folder}
+      </Text>
+    </Box>
+  );
+}
+
+export const FolderParent = memo(function FolderParent({ item }: { item: DashboardsTreeItem }) {
+  if (item.item.kind !== 'folder') {
+    return null;
+  }
+
+  if (item.item.parentTitle) {
+    return <ParentText folder={item.item.parentTitle} />;
+  }
+
+  const parentUID = item.item.parentUID || item.parentUID;
+
+  if (parentUID) {
+    return <NetworkFolderParent uid={parentUID} />;
+  }
+
+  return null;
+});
+
+function NetworkFolderParent({ uid }: { uid: string }) {
+  const result = useGetFolderQueryFacade(uid);
+
+  if (result.isLoading) {
+    return <Skeleton width={50} />;
+  }
+
+  if (result.data) {
+    return <ParentText folder={result.data.title} />;
+  }
+
+  return null;
+}

public/app/core/components/NestedFolderPicker/NestedFolderList.tsx

@@ -14,6 +14,7 @@ import { DashboardsTreeItem } from 'app/features/browse-dashboards/types';
 import { DashboardViewItem } from 'app/features/search/types';
 import { useSelector } from 'app/types/store';
 
+import { FolderParent } from './FolderParent';
 import { FolderRepo } from './FolderRepo';
 
 const ROW_HEIGHT = 40;
@@ -216,6 +217,7 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
           <Text truncate>{item.title}</Text>
           <FolderRepo folder={item} />
         </label>
+        <FolderParent item={items[index]} />
       </div>
     </div>
   );
@@ -282,7 +284,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       alignItems: 'center',
       gap: theme.spacing(1),
       lineHeight: ROW_HEIGHT + 'px',
-      flexGrow: 1,
       minWidth: 0,
       overflow: 'hidden',
       textOverflow: 'ellipsis',

public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx

@@ -234,6 +234,7 @@ export function NestedFolderPicker({
             title: item.title,
             uid: item.uid,
             parentUID: item.parentUID,
+            parentTitle: item.parentTitle,
           },
         })) ?? [];
     }