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

e2e/dashboards-suite/dashboard-search.spec.ts

@@ -0,0 +1,28 @@
+import { e2e } from '@grafana/e2e';
+
+import testDashboard from '../dashboards/TestDashboard.json';
+
+e2e.scenario({
+  describeName: 'Dashboard search',
+  itName: 'Basic folder view test',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    e2e.flows.importDashboard(testDashboard, 1000, true);
+
+    e2e.pages.Search.FolderView.visit();
+
+    // folder view is collapsed - verify its content does not exist
+    e2e.components.Search.folderContent('General').should('not.exist');
+    e2e.components.Search.dashboardItem('E2E Test - Dashboard Search').should('not.exist');
+
+    e2e.components.Search.folderHeader('General').click({ force: true });
+
+    e2e.components.Search.folderContent('General').should('be.visible');
+    e2e.components.Search.dashboardItem('E2E Test - Import Dashboard').should('be.visible');
+
+    // verify the imported dashboard is the only dashboard present in the folder
+    e2e().get('[data-testid^="data-testid Dashboard search item "]').should('have.length', 1);
+  },
+});

e2e/dashboards/DashboardSearchTest.json

@@ -0,0 +1,210 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "target": {
+          "limit": 100,
+          "matchAny": false,
+          "tags": [],
+          "type": "dashboard"
+        },
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "id": 321,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 6,
+      "options": {
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "showThresholdLabels": false,
+        "showThresholdMarkers": true,
+        "text": {}
+      },
+      "pluginVersion": "8.3.0-pre",
+      "title": "Gauge Example",
+      "type": "gauge"
+    },
+    {
+      "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 8
+      },
+      "id": 4,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "area",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": false
+        },
+        "text": {},
+        "textMode": "auto"
+      },
+      "pluginVersion": "8.3.0-pre",
+      "title": "Stat",
+      "type": "stat"
+    },
+    {
+      "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisLabel": "",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 0,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "lineInterpolation": "linear",
+            "lineWidth": 1,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "auto",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 0,
+        "y": 16
+      },
+      "id": 2,
+      "options": {
+        "legend": {
+          "calcs": [],
+          "displayMode": "list",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "single"
+        }
+      },
+      "title": "Time series example",
+      "type": "timeseries"
+    }
+  ],
+  "refresh": false,
+  "schemaVersion": 31,
+  "style": "dark",
+  "tags": [],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "2021-09-01T04:00:00.000Z",
+    "to": "2021-09-15T04:00:00.000Z"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "E2E Test - Dashboard Search",
+  "uid": "kquZN5H7k",
+  "version": 4
+}

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>
       )}

public/app/features/search/page/components/FolderSection.tsx

@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 import { useAsync, useLocalStorage } from 'react-use';
 
 import { GrafanaTheme } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Card, Checkbox, CollapsableSection, Icon, IconName, Spinner, stylesFactory, useTheme } from '@grafana/ui';
 import { getSectionStorageKey } from 'app/features/search/utils';
 import { useUniqueId } from 'app/plugins/datasource/influxdb/components/useUniqueId';
@@ -157,6 +158,8 @@ export const FolderSection: FC<SectionHeaderProps> = ({
 
   return (
     <CollapsableSection
+      headerDataTestId={selectors.components.Search.folderHeader(section.title)}
+      contentDataTestId={selectors.components.Search.folderContent(section.title)}
       isOpen={sectionExpanded ?? false}
       onToggle={onSectionExpand}
       className={styles.wrapper}