diff --git a/e2e/dashboards-suite/dashboard-search.spec.ts b/e2e/dashboards-suite/dashboard-search.spec.ts new file mode 100644 index 00000000000..2ec8b6327f5 --- /dev/null +++ b/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); + }, +}); diff --git a/e2e/dashboards/DashboardSearchTest.json b/e2e/dashboards/DashboardSearchTest.json new file mode 100644 index 00000000000..c7d1f985c8c --- /dev/null +++ b/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 +} diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 74bb6b5b155..724c15d6c2b 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/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: { diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index d82715816f1..e8fe2aa09bf 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/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', + }, + }, }; diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx index 9bef35e0c40..3d8fd8d42f3 100644 --- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx +++ b/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 = ({ @@ -29,6 +31,8 @@ export const CollapsableSection: FC = ({ children, labelId, loading = false, + headerDataTestId, + contentDataTestId, }) => { const [open, toggleOpen] = useState(isOpen); const styles = useStyles2(collapsableSectionStyles); @@ -65,12 +69,16 @@ export const CollapsableSection: FC = ({ )} -
+
{label}
{open && ( -
+
{children}
)} diff --git a/public/app/features/search/page/components/FolderSection.tsx b/public/app/features/search/page/components/FolderSection.tsx index 2335e4399d6..082c820bfe8 100644 --- a/public/app/features/search/page/components/FolderSection.tsx +++ b/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 = ({ return (