IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

DS Picker: Use custom scrollbar (#68845)

Browse Source
This commit is contained in:
Ivan Ortega Alba 2023-05-22 23:55:18 +02:00 committed by GitHub
parent 1c4bb9ca00
commit 9e61172245
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/app/features/datasources/components/picker/DataSourceDropdown.tsx
View File

@ -8,7 +8,7 @@ import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { reportInteraction } from '@grafana/runtime';
import { DataSourceJsonData } from '@grafana/schema';
import { Button, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
import { Button, CustomScrollbar, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
import config from 'app/core/config';
import { useKeyNavigationListener } from 'app/features/search/hooks/useSearchKeyboardSelection';
@ -212,19 +212,21 @@ const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((prop
return (
<div style={props.style} ref={ref} className={styles.container}>
<DataSourceList
{...props}
enableKeyboardNavigation
className={styles.dataSourceList}
current={current}
onChange={changeCallback}
filter={(ds) => matchDataSourceWithSearch(ds, filterTerm)}
onClickEmptyStateCTA={() =>
reportInteraction(INTERACTION_EVENT_NAME, {
item: INTERACTION_ITEM.CONFIG_NEW_DS_EMPTY_STATE,
})
}
></DataSourceList>
<CustomScrollbar>
<DataSourceList
{...props}
enableKeyboardNavigation
className={styles.dataSourceList}
current={current}
onChange={changeCallback}
filter={(ds) => matchDataSourceWithSearch(ds, filterTerm)}
onClickEmptyStateCTA={() =>
reportInteraction(INTERACTION_EVENT_NAME, {
item: INTERACTION_ITEM.CONFIG_NEW_DS_EMPTY_STATE,
})
}
></DataSourceList>
</CustomScrollbar>
<div className={styles.footer}>
<ModalsController>
{({ showModal, hideModal }) => (
@ -267,7 +269,6 @@ PickerContent.displayName = 'PickerContent';
function getStylesPickerContent(theme: GrafanaTheme2) {
return {
container: css`
overflow-y: auto;
display: flex;
flex-direction: column;
max-width: 480px;
@ -279,7 +280,6 @@ function getStylesPickerContent(theme: GrafanaTheme2) {
`,
dataSourceList: css`
flex: 1;
overflow: scroll;
`,
footer: css`
flex: 0;