Search: add basic e2e test for the folder view (#55820)

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -318,6 +318,8 @@ export const Components = {
     expandFolder: (sectionId: string) => `data-testid Expand folder ${sectionId}`,
     dashboardItem: (item: string) => `${Components.Search.dashboardItems} ${item}`,
     dashboardCard: (item: string) => `data-testid Search card ${item}`,
+    folderHeader: (folderName: string) => `data-testid Folder header ${folderName}`,
+    folderContent: (folderName: string) => `data-testid Folder content ${folderName}`,
     dashboardItems: 'data-testid Dashboard search item',
   },
   DashboardLinks: {

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -220,4 +220,10 @@ export const Pages = {
     interval: 'Playlist interval',
     itemDelete: 'Delete playlist item',
   },
+  Search: {
+    url: '/?search=openn',
+    FolderView: {
+      url: '/?search=open&layout=folders',
+    },
+  },
 };

packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx

@@ -18,6 +18,8 @@ export interface Props {
   contentClassName?: string;
   loading?: boolean;
   labelId?: string;
+  headerDataTestId?: string;
+  contentDataTestId?: string;
 }
 
 export const CollapsableSection: FC<Props> = ({
@@ -29,6 +31,8 @@ export const CollapsableSection: FC<Props> = ({
   children,
   labelId,
   loading = false,
+  headerDataTestId,
+  contentDataTestId,
 }) => {
   const [open, toggleOpen] = useState<boolean>(isOpen);
   const styles = useStyles2(collapsableSectionStyles);
@@ -65,12 +69,16 @@ export const CollapsableSection: FC<Props> = ({
             <Icon name={open ? 'angle-up' : 'angle-down'} className={styles.icon} />
           )}
         </button>
-        <div className={styles.label} id={`collapse-label-${id}`}>
+        <div className={styles.label} id={`collapse-label-${id}`} data-testid={headerDataTestId}>
           {label}
         </div>
       </div>
       {open && (
-        <div id={`collapse-content-${id}`} className={cx(styles.content, contentClassName)}>
+        <div
+          id={`collapse-content-${id}`}
+          className={cx(styles.content, contentClassName)}
+          data-testid={contentDataTestId}
+        >
           {children}
         </div>
       )}