From 07ec1a303ebf5bffb7db13d724444faa41a31368 Mon Sep 17 00:00:00 2001 From: Bogdan Matei Date: Thu, 13 Jun 2024 17:02:40 +0300 Subject: [PATCH] Scopes: Remove basic selector (#89098) --- .../Scopes/ScopesFiltersAdvancedSelector.tsx | 76 ------- .../Scopes/ScopesFiltersBasicSelector.tsx | 110 ---------- .../scene/Scopes/ScopesFiltersScene.tsx | 116 ++++++++--- .../scene/Scopes/ScopesScene.test.tsx | 188 +++++++----------- .../scene/Scopes/ScopesScene.tsx | 6 +- .../scene/Scopes/ScopesTreeLevel.tsx | 5 +- .../scene/Scopes/testUtils.tsx | 39 ++-- public/locales/en-US/grafana.json | 21 +- public/locales/pseudo-LOCALE/grafana.json | 21 +- 9 files changed, 198 insertions(+), 384 deletions(-) delete mode 100644 public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersAdvancedSelector.tsx delete mode 100644 public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersBasicSelector.tsx diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersAdvancedSelector.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersAdvancedSelector.tsx deleted file mode 100644 index 6163ecd73aa..00000000000 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersAdvancedSelector.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -import { GrafanaTheme2 } from '@grafana/data'; -import { SceneComponentProps } from '@grafana/scenes'; -import { Button, Drawer, Spinner, useStyles2 } from '@grafana/ui'; -import { t, Trans } from 'app/core/internationalization'; - -import { ScopesFiltersScene } from './ScopesFiltersScene'; -import { ScopesTreeLevel } from './ScopesTreeLevel'; - -export function ScopesFiltersAdvancedSelector({ model }: SceneComponentProps) { - const styles = useStyles2(getStyles); - const { nodes, loadingNodeName, dirtyScopeNames, isLoadingScopes, isAdvancedOpened } = model.useState(); - - if (!isAdvancedOpened) { - return null; - } - - return ( - { - model.closeAdvancedSelector(); - model.resetDirtyScopeNames(); - }} - > - {isLoadingScopes ? ( - - ) : ( - model.updateNode(path, isExpanded, query)} - onNodeSelectToggle={(path) => model.toggleNodeSelect(path)} - /> - )} -
- - -
- - ); -} - -const getStyles = (theme: GrafanaTheme2) => { - return { - buttonGroup: css({ - display: 'flex', - gap: theme.spacing(1), - marginTop: theme.spacing(8), - }), - }; -}; diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersBasicSelector.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersBasicSelector.tsx deleted file mode 100644 index e55618410b0..00000000000 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersBasicSelector.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -import { GrafanaTheme2 } from '@grafana/data'; -import { SceneComponentProps } from '@grafana/scenes'; -import { Icon, IconButton, Input, Spinner, Toggletip, useStyles2 } from '@grafana/ui'; -import { t, Trans } from 'app/core/internationalization'; - -import { ScopesFiltersScene } from './ScopesFiltersScene'; -import { ScopesTreeLevel } from './ScopesTreeLevel'; - -export function ScopesFiltersBasicSelector({ model }: SceneComponentProps) { - const styles = useStyles2(getStyles); - const { nodes, loadingNodeName, scopes, dirtyScopeNames, isLoadingScopes, isBasicOpened } = model.useState(); - const { isViewing } = model.scopesParent.useState(); - - const scopesTitles = scopes.map(({ spec: { title } }) => title).join(', '); - - return ( -
- - {isLoadingScopes ? ( - - ) : ( - model.updateNode(path, isExpanded, query)} - onNodeSelectToggle={(path) => model.toggleNodeSelect(path)} - /> - )} -
- } - footer={ - - } - onOpen={() => model.openBasicSelector()} - onClose={() => { - model.closeBasicSelector(); - model.updateScopes(); - }} - > - 0 && !isViewing ? ( - model.removeAllScopes()} - /> - ) : undefined - } - /> - - - ); -} - -const getStyles = (theme: GrafanaTheme2) => { - return { - container: css({ - width: '100%', - - '& > div': css({ - padding: 0, - - '& > div': css({ - padding: 0, - margin: 0, - }), - }), - }), - innerContainer: css({ - minWidth: 400, - padding: theme.spacing(0, 1), - }), - openAdvancedButton: css({ - backgroundColor: theme.colors.secondary.main, - border: 'none', - borderTop: `1px solid ${theme.colors.secondary.border}`, - display: 'block', - fontSize: theme.typography.pxToRem(12), - margin: 0, - padding: theme.spacing(1.5), - textAlign: 'right', - width: '100%', - }), - }; -}; diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx index 84c7ba88f83..341abd85e1e 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx +++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx @@ -1,8 +1,9 @@ +import { css } from '@emotion/css'; import { isEqual } from 'lodash'; import React from 'react'; import { finalize, from, Subscription } from 'rxjs'; -import { Scope } from '@grafana/data'; +import { GrafanaTheme2, Scope } from '@grafana/data'; import { SceneComponentProps, sceneGraph, @@ -12,10 +13,11 @@ import { SceneObjectUrlValues, SceneObjectWithUrlSync, } from '@grafana/scenes'; +import { Button, Drawer, IconButton, Input, Spinner, useStyles2 } from '@grafana/ui'; +import { t, Trans } from 'app/core/internationalization'; -import { ScopesFiltersAdvancedSelector } from './ScopesFiltersAdvancedSelector'; -import { ScopesFiltersBasicSelector } from './ScopesFiltersBasicSelector'; import { ScopesScene } from './ScopesScene'; +import { ScopesTreeLevel } from './ScopesTreeLevel'; import { fetchNodes, fetchScope, fetchScopes } from './api'; import { NodesMap } from './types'; @@ -25,8 +27,7 @@ export interface ScopesFiltersSceneState extends SceneObjectState { scopes: Scope[]; dirtyScopeNames: string[]; isLoadingScopes: boolean; - isBasicOpened: boolean; - isAdvancedOpened: boolean; + isOpened: boolean; } export class ScopesFiltersScene extends SceneObjectBase implements SceneObjectWithUrlSync { @@ -58,8 +59,7 @@ export class ScopesFiltersScene extends SceneObjectBase scopes: [], dirtyScopeNames: [], isLoadingScopes: false, - isBasicOpened: false, - isAdvancedOpened: false, + isOpened: false, }); this.addActivationHandler(() => { @@ -153,24 +153,14 @@ export class ScopesFiltersScene extends SceneObjectBase } } - public openBasicSelector() { + public open() { if (!this.scopesParent.state.isViewing) { - this.setState({ isBasicOpened: true, isAdvancedOpened: false }); + this.setState({ isOpened: true }); } } - public closeBasicSelector() { - this.setState({ isBasicOpened: false }); - } - - public openAdvancedSelector() { - if (!this.scopesParent.state.isViewing) { - this.setState({ isBasicOpened: false, isAdvancedOpened: true }); - } - } - - public closeAdvancedSelector() { - this.setState({ isAdvancedOpened: false }); + public close() { + this.setState({ isOpened: false }); } public getSelectedScopes(): Scope[] { @@ -196,7 +186,7 @@ export class ScopesFiltersScene extends SceneObjectBase } public enterViewMode() { - this.setState({ isBasicOpened: false, isAdvancedOpened: false }); + this.setState({ isOpened: false }); } private getScopeNames(): string[] { @@ -205,10 +195,88 @@ export class ScopesFiltersScene extends SceneObjectBase } export function ScopesFiltersSceneRenderer({ model }: SceneComponentProps) { + const styles = useStyles2(getStyles); + const { nodes, loadingNodeName, dirtyScopeNames, isLoadingScopes, isOpened, scopes } = model.useState(); + const { isViewing } = model.scopesParent.useState(); + + const scopesTitles = scopes.map(({ spec: { title } }) => title).join(', '); + return ( <> - - + 0 && !isViewing ? ( + model.removeAllScopes()} + /> + ) : undefined + } + onClick={() => model.open()} + /> + + {isOpened && ( + { + model.close(); + model.resetDirtyScopeNames(); + }} + > + {isLoadingScopes ? ( + + ) : ( + model.updateNode(path, isExpanded, query)} + onNodeSelectToggle={(path) => model.toggleNodeSelect(path)} + /> + )} +
+ + +
+ + )} ); } + +const getStyles = (theme: GrafanaTheme2) => { + return { + buttonGroup: css({ + display: 'flex', + gap: theme.spacing(1), + marginTop: theme.spacing(8), + }), + }; +}; diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx index d88983f7a48..e52e3fa0b24 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx +++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx @@ -13,8 +13,6 @@ import { fetchNodesSpy, fetchScopeSpy, fetchScopesSpy, - getAdvancedApply, - getAdvancedCancel, getApplicationsClustersExpand, getApplicationsClustersSelect, getApplicationsExpand, @@ -22,29 +20,28 @@ import { getApplicationsSlothPictureFactorySelect, getApplicationsSlothPictureFactoryTitle, getApplicationsSlothVoteTrackerSelect, - getBasicInnerContainer, - getBasicInput, - getBasicOpenAdvanced, + getFiltersApply, + getFiltersCancel, + getFiltersInput, getClustersExpand, getClustersSelect, getClustersSlothClusterNorthSelect, getClustersSlothClusterSouthSelect, getDashboard, getDashboardsContainer, + getDashboardsExpand, getDashboardsSearch, - getRootExpand, mocksNodes, mocksScopeDashboardBindings, mocksScopes, - queryAdvancedApply, + queryFiltersApply, queryApplicationsClustersSlothClusterNorthTitle, queryApplicationsClustersTitle, queryApplicationsSlothPictureFactoryTitle, queryApplicationsSlothVoteTrackerTitle, - queryBasicInnerContainer, queryDashboard, queryDashboardsContainer, - queryRootExpand, + queryDashboardsExpand, renderDashboard, } from './testUtils'; @@ -123,14 +120,14 @@ describe('ScopesScene', () => { describe('Tree', () => { it('Navigates through scopes nodes', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsClustersExpand()); await userEvents.click(getApplicationsExpand()); }); it('Fetches scope details on select', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothVoteTrackerSelect()); await waitFor(() => expect(fetchScopeSpy).toHaveBeenCalledTimes(1)); @@ -138,24 +135,24 @@ describe('ScopesScene', () => { it('Selects the proper scopes', async () => { await act(async () => filtersScene.updateScopes(['slothPictureFactory', 'slothVoteTracker'])); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); expect(getApplicationsSlothVoteTrackerSelect()).toBeChecked(); expect(getApplicationsSlothPictureFactorySelect()).toBeChecked(); }); it('Can select scopes from same level', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothVoteTrackerSelect()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); await userEvents.click(getApplicationsClustersSelect()); - await userEvents.click(getBasicInput()); - expect(getBasicInput().value).toBe('slothVoteTracker, slothPictureFactory, Cluster Index Helper'); + await userEvents.click(getFiltersApply()); + expect(getFiltersInput().value).toBe('slothVoteTracker, slothPictureFactory, Cluster Index Helper'); }); it("Can't navigate deeper than the level where scopes are selected", async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothVoteTrackerSelect()); await userEvents.click(getApplicationsClustersExpand()); @@ -163,25 +160,24 @@ describe('ScopesScene', () => { }); it('Can select a node from an upper level', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothVoteTrackerSelect()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getClustersSelect()); - await userEvents.click(getBasicInput()); - expect(getBasicInput().value).toBe('Cluster Index Helper'); + await userEvents.click(getFiltersApply()); + expect(getFiltersInput().value).toBe('Cluster Index Helper'); }); it('Respects only one select per container', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getClustersExpand()); await userEvents.click(getClustersSlothClusterNorthSelect()); expect(getClustersSlothClusterSouthSelect()).toBeDisabled(); }); it('Search works', async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getBasicOpenAdvanced()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.type(getApplicationsSearch(), 'Clusters'); await waitFor(() => expect(fetchNodesSpy).toHaveBeenCalledTimes(3)); @@ -197,43 +193,16 @@ describe('ScopesScene', () => { }); }); - describe('Basic selector', () => { + describe('Filters', () => { it('Opens', async () => { - await userEvents.click(getBasicInput()); - expect(getBasicInnerContainer()).toBeInTheDocument(); + await userEvents.click(getFiltersInput()); + expect(getFiltersApply()).toBeInTheDocument(); }); it('Fetches scope details on save', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getClustersSelect()); - await userEvents.click(getBasicInput()); - await waitFor(() => expect(fetchScopesSpy).toHaveBeenCalled()); - expect(filtersScene.getSelectedScopes()).toEqual( - mocksScopes.filter(({ metadata: { name } }) => name === 'indexHelperCluster') - ); - }); - - it('Shows selected scopes', async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getClustersSelect()); - await userEvents.click(getBasicInput()); - expect(getBasicInput().value).toEqual('Cluster Index Helper'); - }); - }); - - describe('Advanced selector', () => { - it('Opens', async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getBasicOpenAdvanced()); - expect(queryBasicInnerContainer()).not.toBeInTheDocument(); - expect(getAdvancedApply()).toBeInTheDocument(); - }); - - it('Fetches scope details on save', async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getBasicOpenAdvanced()); - await userEvents.click(getClustersSelect()); - await userEvents.click(getAdvancedApply()); + await userEvents.click(getFiltersApply()); await waitFor(() => expect(fetchScopesSpy).toHaveBeenCalled()); expect(filtersScene.getSelectedScopes()).toEqual( mocksScopes.filter(({ metadata: { name } }) => name === 'indexHelperCluster') @@ -241,85 +210,73 @@ describe('ScopesScene', () => { }); it("Doesn't save the scopes on close", async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getBasicOpenAdvanced()); + await userEvents.click(getFiltersInput()); await userEvents.click(getClustersSelect()); - await userEvents.click(getAdvancedCancel()); + await userEvents.click(getFiltersCancel()); await waitFor(() => expect(fetchScopesSpy).not.toHaveBeenCalled()); expect(filtersScene.getSelectedScopes()).toEqual([]); }); - }); - describe('Selectors interoperability', () => { - it('Replicates the same structure from basic to advanced selector', async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getApplicationsExpand()); - await userEvents.click(getBasicOpenAdvanced()); - expect(getApplicationsSlothPictureFactoryTitle()).toBeInTheDocument(); - }); - - it('Replicates the same structure from advanced to basic selector', async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getBasicOpenAdvanced()); - await userEvents.click(getApplicationsExpand()); - await userEvents.click(getAdvancedApply()); - await userEvents.click(getBasicInput()); - expect(getApplicationsSlothPictureFactoryTitle()).toBeInTheDocument(); + it('Shows selected scopes', async () => { + await userEvents.click(getFiltersInput()); + await userEvents.click(getClustersSelect()); + await userEvents.click(getFiltersApply()); + expect(getFiltersInput().value).toEqual('Cluster Index Helper'); }); }); describe('Dashboards list', () => { it('Toggles expanded state', async () => { - await userEvents.click(getRootExpand()); + await userEvents.click(getDashboardsExpand()); expect(getDashboardsContainer()).toBeInTheDocument(); }); it('Does not fetch dashboards list when the list is not expanded', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => expect(fetchDashboardsSpy).not.toHaveBeenCalled()); }); it('Fetches dashboards list when the list is expanded', async () => { - await userEvents.click(getRootExpand()); - await userEvents.click(getBasicInput()); + await userEvents.click(getDashboardsExpand()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => expect(fetchDashboardsSpy).toHaveBeenCalled()); }); it('Fetches dashboards list when the list is expanded after scope selection', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); - await userEvents.click(getRootExpand()); + await userEvents.click(getFiltersApply()); + await userEvents.click(getDashboardsExpand()); await waitFor(() => expect(fetchDashboardsSpy).toHaveBeenCalled()); }); it('Shows dashboards for multiple scopes', async () => { - await userEvents.click(getRootExpand()); - await userEvents.click(getBasicInput()); + await userEvents.click(getDashboardsExpand()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); expect(getDashboard('1')).toBeInTheDocument(); expect(getDashboard('2')).toBeInTheDocument(); expect(queryDashboard('3')).not.toBeInTheDocument(); expect(queryDashboard('4')).not.toBeInTheDocument(); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsSlothVoteTrackerSelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); expect(getDashboard('1')).toBeInTheDocument(); expect(getDashboard('2')).toBeInTheDocument(); expect(getDashboard('3')).toBeInTheDocument(); expect(getDashboard('4')).toBeInTheDocument(); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); expect(queryDashboard('1')).not.toBeInTheDocument(); expect(queryDashboard('2')).not.toBeInTheDocument(); expect(getDashboard('3')).toBeInTheDocument(); @@ -327,11 +284,11 @@ describe('ScopesScene', () => { }); it('Filters the dashboards list', async () => { - await userEvents.click(getRootExpand()); - await userEvents.click(getBasicInput()); + await userEvents.click(getDashboardsExpand()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); expect(getDashboard('1')).toBeInTheDocument(); expect(getDashboard('2')).toBeInTheDocument(); await userEvents.type(getDashboardsSearch(), '1'); @@ -346,43 +303,36 @@ describe('ScopesScene', () => { expect(scopesScene.state.isExpanded).toEqual(false); }); - it('Closes basic selector on enter', async () => { - await userEvents.click(getBasicInput()); + it('Closes filters on enter', async () => { + await userEvents.click(getFiltersInput()); await act(async () => dashboardScene.onEnterEditMode()); - expect(queryBasicInnerContainer()).not.toBeInTheDocument(); - }); - - it('Closes advanced selector on enter', async () => { - await userEvents.click(getBasicInput()); - await userEvents.click(getBasicOpenAdvanced()); - await act(async () => dashboardScene.onEnterEditMode()); - expect(queryAdvancedApply()).not.toBeInTheDocument(); + expect(queryFiltersApply()).not.toBeInTheDocument(); }); it('Closes dashboards list on enter', async () => { - await userEvents.click(getRootExpand()); + await userEvents.click(getDashboardsExpand()); await act(async () => dashboardScene.onEnterEditMode()); expect(queryDashboardsContainer()).not.toBeInTheDocument(); }); - it('Does not open basic selector when view mode is active', async () => { + it('Does not open filters when view mode is active', async () => { await act(async () => dashboardScene.onEnterEditMode()); - await userEvents.click(getBasicInput()); - expect(queryBasicInnerContainer()).not.toBeInTheDocument(); + await userEvents.click(getFiltersInput()); + expect(queryFiltersApply()).not.toBeInTheDocument(); }); it('Hides the expand button when view mode is active', async () => { await act(async () => dashboardScene.onEnterEditMode()); - expect(queryRootExpand()).not.toBeInTheDocument(); + expect(queryDashboardsExpand()).not.toBeInTheDocument(); }); }); describe('Enrichers', () => { it('Data requests', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => { const queryRunner = sceneGraph.findObject(dashboardScene, (o) => o.state.key === 'data-query-runner')!; expect(dashboardScene.enrichDataRequest(queryRunner).scopes).toEqual( @@ -390,9 +340,9 @@ describe('ScopesScene', () => { ); }); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsSlothVoteTrackerSelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => { const queryRunner = sceneGraph.findObject(dashboardScene, (o) => o.state.key === 'data-query-runner')!; expect(dashboardScene.enrichDataRequest(queryRunner).scopes).toEqual( @@ -402,9 +352,9 @@ describe('ScopesScene', () => { ); }); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => { const queryRunner = sceneGraph.findObject(dashboardScene, (o) => o.state.key === 'data-query-runner')!; expect(dashboardScene.enrichDataRequest(queryRunner).scopes).toEqual( @@ -414,19 +364,19 @@ describe('ScopesScene', () => { }); it('Filters requests', async () => { - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsExpand()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => { expect(dashboardScene.enrichFiltersRequest().scopes).toEqual( mocksScopes.filter(({ metadata: { name } }) => name === 'slothPictureFactory') ); }); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsSlothVoteTrackerSelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => { expect(dashboardScene.enrichFiltersRequest().scopes).toEqual( mocksScopes.filter( @@ -435,9 +385,9 @@ describe('ScopesScene', () => { ); }); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersInput()); await userEvents.click(getApplicationsSlothPictureFactorySelect()); - await userEvents.click(getBasicInput()); + await userEvents.click(getFiltersApply()); await waitFor(() => { expect(dashboardScene.enrichFiltersRequest().scopes).toEqual( mocksScopes.filter(({ metadata: { name } }) => name === 'slothVoteTracker') diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.tsx index e37d99eb374..62e59eb4a3a 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.tsx +++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.tsx @@ -94,10 +94,10 @@ export function ScopesSceneRenderer({ model }: SceneComponentProps) className={cx(!isExpanded && styles.iconNotExpanded)} aria-label={ isExpanded - ? t('scopes.root.collapse', 'Collapse scope filters') - : t('scopes.root.expand', 'Expand scope filters') + ? t('scopes.suggestedDashboards.toggle.collapse', 'Collapse scope filters') + : t('scopes.suggestedDashboards.toggle..expand', 'Expand scope filters') } - data-testid="scopes-root-expand" + data-testid="scopes-dashboards-expand" onClick={() => model.toggleIsExpanded()} /> )} diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx index 1749f5790f0..06566d270bc 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx +++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx @@ -10,7 +10,6 @@ import { t } from 'app/core/internationalization'; import { NodesMap } from './types'; export interface ScopesTreeLevelProps { - showQuery: boolean; nodes: NodesMap; nodePath: string[]; loadingNodeName: string | undefined; @@ -20,7 +19,6 @@ export interface ScopesTreeLevelProps { } export function ScopesTreeLevel({ - showQuery, nodes, nodePath, loadingNodeName, @@ -43,7 +41,7 @@ export function ScopesTreeLevel({ return ( <> - {showQuery && !anyChildExpanded && ( + {!anyChildExpanded && ( } className={styles.searchInput} @@ -101,7 +99,6 @@ export function ScopesTreeLevel({
{childNode.isExpanded && ( `scopes-tree-${nodeId}-search`, select: (nodeId: string) => `scopes-tree-${nodeId}-checkbox`, expand: (nodeId: string) => `scopes-tree-${nodeId}-expand`, title: (nodeId: string) => `scopes-tree-${nodeId}-title`, }, - basicSelector: { - container: 'scopes-basic-container', - innerContainer: 'scopes-basic-inner-container', - loading: 'scopes-basic-loading', - openAdvanced: 'scopes-basic-open-advanced', - input: 'scopes-basic-input', - }, - advancedSelector: { - container: 'scopes-advanced-container', - loading: 'scopes-advanced-loading', - apply: 'scopes-advanced-apply', - cancel: 'scopes-advanced-cancel', + filters: { + input: 'scopes-filters-input', + container: 'scopes-filters-container', + loading: 'scopes-filters-loading', + apply: 'scopes-filters-apply', + cancel: 'scopes-filters-cancel', }, dashboards: { + expand: 'scopes-dashboards-expand', container: 'scopes-dashboards-container', search: 'scopes-dashboards-search', loading: 'scopes-dashboards-loading', @@ -259,18 +251,13 @@ const selectors = { }, }; -export const queryRootExpand = () => screen.queryByTestId(selectors.root.expand); -export const getRootExpand = () => screen.getByTestId(selectors.root.expand); - -export const queryBasicInnerContainer = () => screen.queryByTestId(selectors.basicSelector.innerContainer); -export const getBasicInnerContainer = () => screen.getByTestId(selectors.basicSelector.innerContainer); -export const getBasicInput = () => screen.getByTestId(selectors.basicSelector.input); -export const getBasicOpenAdvanced = () => screen.getByTestId(selectors.basicSelector.openAdvanced); - -export const queryAdvancedApply = () => screen.queryByTestId(selectors.advancedSelector.apply); -export const getAdvancedApply = () => screen.getByTestId(selectors.advancedSelector.apply); -export const getAdvancedCancel = () => screen.getByTestId(selectors.advancedSelector.cancel); +export const getFiltersInput = () => screen.getByTestId(selectors.filters.input); +export const queryFiltersApply = () => screen.queryByTestId(selectors.filters.apply); +export const getFiltersApply = () => screen.getByTestId(selectors.filters.apply); +export const getFiltersCancel = () => screen.getByTestId(selectors.filters.cancel); +export const queryDashboardsExpand = () => screen.queryByTestId(selectors.dashboards.expand); +export const getDashboardsExpand = () => screen.getByTestId(selectors.dashboards.expand); export const queryDashboardsContainer = () => screen.queryByTestId(selectors.dashboards.container); export const getDashboardsContainer = () => screen.getByTestId(selectors.dashboards.container); export const getDashboardsSearch = () => screen.getByTestId(selectors.dashboards.search); diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 6d766c64cdf..b448f53a35b 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -1594,23 +1594,22 @@ "dismissable-button": "Close" }, "scopes": { - "advancedSelector": { + "filters": { "apply": "Apply", "cancel": "Cancel", + "input": { + "placeholder": "Select scopes...", + "removeAll": "Remove all scopes" + }, "title": "Select scopes" }, - "basicSelector": { - "openAdvanced": "Open advanced scope selector <1>", - "placeholder": "Select scopes...", - "removeAll": "Remove all scopes" - }, - "root": { - "collapse": "Collapse scope filters", - "expand": "Expand scope filters" - }, "suggestedDashboards": { "loading": "Loading dashboards", - "search": "Filter" + "search": "Filter", + "toggle": { + "collapse": "Collapse scope filters", + "expand": "Expand scope filters" + } }, "tree": { "collapse": "Collapse", diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index 71af32ec586..88f6ead1fcb 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -1594,23 +1594,22 @@ "dismissable-button": "Cľőşę" }, "scopes": { - "advancedSelector": { + "filters": { "apply": "Åppľy", "cancel": "Cäʼnčęľ", + "input": { + "placeholder": "Ŝęľęčŧ şčőpęş...", + "removeAll": "Ŗęmővę äľľ şčőpęş" + }, "title": "Ŝęľęčŧ şčőpęş" }, - "basicSelector": { - "openAdvanced": "Øpęʼn äđväʼnčęđ şčőpę şęľęčŧőř <1>", - "placeholder": "Ŝęľęčŧ şčőpęş...", - "removeAll": "Ŗęmővę äľľ şčőpęş" - }, - "root": { - "collapse": "Cőľľäpşę şčőpę ƒįľŧęřş", - "expand": "Ēχpäʼnđ şčőpę ƒįľŧęřş" - }, "suggestedDashboards": { "loading": "Ŀőäđįʼnģ đäşĥþőäřđş", - "search": "Fįľŧęř" + "search": "Fįľŧęř", + "toggle": { + "collapse": "Cőľľäpşę şčőpę ƒįľŧęřş", + "expand": "Ēχpäʼnđ şčőpę ƒįľŧęřş" + } }, "tree": { "collapse": "Cőľľäpşę",