IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

AzureMonitor: Scroll to selected resource in the resource picker (#43976)

Browse Source
This commit is contained in:
Andres Martinez Gotor 2022-01-18 18:01:03 +01:00 committed by GitHub
parent 54280fc9d7
commit fe46a5afe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedResourceTable.test.tsx
View File

@ -1,14 +1,24 @@
import { act, render, screen } from '@testing-library/react'; import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { createMockResourcePickerRows } from '../../__mocks__/resourcePickerRows';
import { createMockResourcePickerRows } from '../../__mocks__/resourcePickerRows';
import NestedResourceTable from './NestedResourceTable'; import NestedResourceTable from './NestedResourceTable';
import { findRow } from './utils'; import { findRow } from './utils';
describe('AzureMonitor NestedResourceTable', () => { describe('AzureMonitor NestedResourceTable', () => {
const noop: any = () => {}; const noop: any = () => {};
const getElementById = document.getElementById;
beforeEach(() => {
document.getElementById = jest.fn().mockReturnValue({
scrollIntoView: jest.fn(),
});
});
afterEach(() => {
document.getElementById = getElementById;
});
it('renders subscriptions', () => { it('renders subscriptions', () => {
const rows = createMockResourcePickerRows(); const rows = createMockResourcePickerRows();

16
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx
View File

@ -1,9 +1,10 @@
import { cx } from '@emotion/css'; import { cx } from '@emotion/css';
import { Checkbox, Icon, IconButton, LoadingPlaceholder, useStyles2, useTheme2, FadeTransition } from '@grafana/ui'; import { Checkbox, FadeTransition, Icon, IconButton, LoadingPlaceholder, useStyles2, useTheme2 } from '@grafana/ui';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { Space } from '../Space'; import { Space } from '../Space';
import getStyles from './styles'; import getStyles from './styles';
import { ResourceRowType, ResourceRow, ResourceRowGroup } from './types'; import { ResourceRow, ResourceRowGroup, ResourceRowType } from './types';
import { findRow } from './utils'; import { findRow } from './utils';
interface NestedRowsProps { interface NestedRowsProps {
@ -182,6 +183,17 @@ const NestedEntry: React.FC<NestedEntryProps> = ({
const checkboxId = `checkbox_${entry.id}`; const checkboxId = `checkbox_${entry.id}`;
// Scroll to the selected element if it's not in the view
// Only do it once, when the component is mounted
useEffect(() => {
if (isSelected) {
document.getElementById(checkboxId)?.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return ( return (
<div className={styles.nestedEntry} style={{ marginLeft: level * (3 * theme.spacing.gridSize) }}> <div className={styles.nestedEntry} style={{ marginLeft: level * (3 * theme.spacing.gridSize) }}>
{/* When groups are selectable, I *think* we will want to show a 2-wide space instead {/* When groups are selectable, I *think* we will want to show a 2-wide space instead