From 1e001451bdbbf3a3af2619da9557f93349ca3260 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 12 Nov 2024 15:43:04 +0000 Subject: [PATCH] ScrollContainer: Replace `CustomScrollbar` usage (#96229) * replace CustomScrollbar * use ScrollContainer in RolePickerMenu and PanelDataPane --- .../querybuilder/components/MetricSelect.tsx | 12 +-- .../components/RolePicker/RolePickerMenu.tsx | 14 ++- .../RolePicker/RolePickerSubMenu.tsx | 7 +- .../PanelDataPane/PanelDataPane.tsx | 10 +-- .../AddWidgetModal/AddWidgetModal.tsx | 85 ------------------- .../SubMenu/DashboardLinksDashboard.tsx | 8 +- .../features/query/components/QueryGroup.tsx | 7 +- .../scopes/internal/ScopesTreeItem.tsx | 11 +-- .../suggestionsInput/SuggestionsInput.tsx | 18 ++-- .../LogsQueryEditor/AzureCheatSheet.tsx | 21 ++--- 10 files changed, 49 insertions(+), 144 deletions(-) delete mode 100644 public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx diff --git a/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx b/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx index bdfdd52f3f0..4aa698fa7cb 100644 --- a/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx +++ b/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx @@ -12,7 +12,6 @@ import { config } from '@grafana/runtime'; import { AsyncSelect, Button, - CustomScrollbar, FormatOptionLabelMeta, getSelectStyles, Icon, @@ -22,6 +21,7 @@ import { useStyles2, useTheme2, } from '@grafana/ui'; +import { ScrollContainer } from '@grafana/ui/src/unstable'; import { PrometheusDatasource } from '../../datasource'; import { truncateResult } from '../../language_utils'; @@ -245,15 +245,9 @@ export function MetricSelect({ style={{ maxHeight: Math.round(maxHeight * 0.9) }} aria-label="Select options menu" > - + {children} - + {optionsLoaded && (
diff --git a/public/app/core/components/RolePicker/RolePickerMenu.tsx b/public/app/core/components/RolePicker/RolePickerMenu.tsx index ed68be79f07..193a5062a8f 100644 --- a/public/app/core/components/RolePicker/RolePickerMenu.tsx +++ b/public/app/core/components/RolePicker/RolePickerMenu.tsx @@ -1,8 +1,9 @@ import { css, cx } from '@emotion/css'; import { useEffect, useRef, useState } from 'react'; -import { Button, CustomScrollbar, Stack, TextLink, useStyles2, useTheme2 } from '@grafana/ui'; +import { Button, Stack, TextLink, useStyles2, useTheme2 } from '@grafana/ui'; import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles'; +import { ScrollContainer } from '@grafana/ui/src/unstable'; import { OrgRole, Role } from 'app/types'; import { BuiltinRoleSelector } from './BuiltinRoleSelector'; @@ -217,14 +218,11 @@ export const RolePickerMenu = ({ )} >
- {showBasicRole && (
@@ -254,7 +252,7 @@ export const RolePickerMenu = ({ showOnLeftSubMenu={menuLeft} /> ))} - +
); } @@ -128,8 +129,5 @@ function getStyles(theme: GrafanaTheme2) { flexShrink: 0, paddingLeft: theme.spacing(2), }), - scroll: css({ - background: theme.colors.background.primary, - }), }; } diff --git a/public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx b/public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx deleted file mode 100644 index 85572494816..00000000000 --- a/public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { css } from '@emotion/css'; -import { useMemo, useState } from 'react'; - -import { GrafanaTheme2, PanelPluginMeta } from '@grafana/data'; -import { locationService } from '@grafana/runtime'; -import { CustomScrollbar, Icon, Input, Modal, useStyles2 } from '@grafana/ui'; -import { onCreateNewWidgetPanel } from 'app/features/dashboard/utils/dashboard'; -import { VizTypePickerPlugin } from 'app/features/panel/components/VizTypePicker/VizTypePickerPlugin'; -import { filterPluginList, getWidgetPluginMeta } from 'app/features/panel/state/util'; -import { useSelector } from 'app/types'; - -export const AddWidgetModal = () => { - const styles = useStyles2(getStyles); - const [searchQuery, setSearchQuery] = useState(''); - const dashboard = useSelector((state) => state.dashboard.getModel()); - - const widgetsList: PanelPluginMeta[] = useMemo(() => { - return getWidgetPluginMeta(); - }, []); - - const filteredWidgetsTypes = useMemo((): PanelPluginMeta[] => { - return filterPluginList(widgetsList, searchQuery); - }, [widgetsList, searchQuery]); - - const onDismiss = () => { - locationService.partial({ addWidget: null }); - }; - - return ( - - } - placeholder="Search widget" - onChange={(e) => { - setSearchQuery(e.currentTarget.value); - }} - /> - -
- {filteredWidgetsTypes.map((plugin, index) => ( - { - const id = onCreateNewWidgetPanel(dashboard!, plugin.id); - locationService.partial({ editPanel: id, addWidget: null }); - }} - /> - ))} -
- - - ); -}; - -const getStyles = (theme: GrafanaTheme2) => ({ - modal: css({ - width: '65%', - maxWidth: '960px', - [theme.breakpoints.down('md')]: { - width: '100%', - }, - }), - searchInput: css({ - marginBottom: theme.spacing(2), - }), - grid: css({ - display: 'grid', - gridGap: theme.spacing(1), - }), -}); diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx index 76946da2697..8de5f5c24cf 100644 --- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx +++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx @@ -6,8 +6,9 @@ import { GrafanaTheme2, ScopedVars } from '@grafana/data'; import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize'; import { selectors } from '@grafana/e2e-selectors'; import { DashboardLink } from '@grafana/schema'; -import { CustomScrollbar, Dropdown, Icon, Button, Menu, useStyles2 } from '@grafana/ui'; +import { Dropdown, Icon, Button, Menu, useStyles2 } from '@grafana/ui'; import { ButtonLinkProps, LinkButton } from '@grafana/ui/src/components/Button'; +import { ScrollContainer } from '@grafana/ui/src/unstable'; import { getBackendSrv } from 'app/core/services/backend_srv'; import { DashboardSearchItem } from 'app/features/search/types'; @@ -36,7 +37,7 @@ function DashboardLinksMenu({ dashboardUID, link }: DashboardLinksMenuProps) { return (
- + {resolvedLinks.map((resolvedLink, index) => { return ( ); })} - +
); @@ -157,7 +158,6 @@ function getStyles(theme: GrafanaTheme2) { dropdown: css({ maxWidth: 'max(30vw, 300px)', maxHeight: '70vh', - overflowY: 'auto', }), button: css({ color: theme.colors.text.primary, diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx index affb0328aaf..e37977e3a45 100644 --- a/public/app/features/query/components/QueryGroup.tsx +++ b/public/app/features/query/components/QueryGroup.tsx @@ -16,7 +16,8 @@ import { import { selectors } from '@grafana/e2e-selectors'; import { getDataSourceSrv, locationService } from '@grafana/runtime'; import { DataQuery } from '@grafana/schema'; -import { Button, CustomScrollbar, HorizontalGroup, InlineFormLabel, Modal, stylesFactory } from '@grafana/ui'; +import { Button, HorizontalGroup, InlineFormLabel, Modal, stylesFactory } from '@grafana/ui'; +import { ScrollContainer } from '@grafana/ui/src/unstable'; import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp'; import config from 'app/core/config'; import { backendSrv } from 'app/core/services/backend_srv'; @@ -331,7 +332,7 @@ export class QueryGroup extends PureComponent { const styles = getStyles(); return ( - +
{this.renderTopSection(styles)} {dsSettings && ( @@ -346,7 +347,7 @@ export class QueryGroup extends PureComponent { )}
- + ); } } diff --git a/public/app/features/scopes/internal/ScopesTreeItem.tsx b/public/app/features/scopes/internal/ScopesTreeItem.tsx index 6d310688e74..54dbfdd2cdb 100644 --- a/public/app/features/scopes/internal/ScopesTreeItem.tsx +++ b/public/app/features/scopes/internal/ScopesTreeItem.tsx @@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css'; import { Dictionary } from 'lodash'; import { GrafanaTheme2 } from '@grafana/data'; -import { Checkbox, CustomScrollbar, Icon, RadioButtonDot, useStyles2 } from '@grafana/ui'; +import { Checkbox, Icon, RadioButtonDot, useStyles2 } from '@grafana/ui'; +import { ScrollContainer } from '@grafana/ui/src/unstable'; import { t } from 'app/core/internationalization'; import { ScopesTree } from './ScopesTree'; @@ -129,12 +130,12 @@ export function ScopesTreeItem({ if (isLastExpandedNode) { return ( - {children} - + ); } diff --git a/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx b/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx index 09c9066e9cb..055f58b4731 100644 --- a/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx +++ b/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx @@ -4,9 +4,10 @@ import { FormEvent, useCallback, useEffect, useRef, useState } from 'react'; import * as React from 'react'; import { GrafanaTheme2, VariableSuggestion } from '@grafana/data'; -import { CustomScrollbar, FieldValidationMessage, Portal, TextArea, useTheme2 } from '@grafana/ui'; +import { FieldValidationMessage, Portal, TextArea, useTheme2 } from '@grafana/ui'; import { DataLinkSuggestions } from '@grafana/ui/src/components/DataLinks/DataLinkSuggestions'; import { Input } from '@grafana/ui/src/components/Input/Input'; +import { ScrollContainer } from '@grafana/ui/src/unstable'; const modulo = (a: number, n: number) => a - n * Math.floor(a / n); const ERROR_TOOLTIP_OFFSET = 8; @@ -61,6 +62,7 @@ export const SuggestionsInput = ({ const [showingSuggestions, setShowingSuggestions] = useState(false); const [suggestionsIndex, setSuggestionsIndex] = useState(0); const [variableValue, setVariableValue] = useState(value.toString()); + const scrollRef = useRef(null); const [scrollTop, setScrollTop] = useState(0); const [inputHeight, setInputHeight] = useState(0); const [startPos, setStartPos] = useState(0); @@ -70,6 +72,10 @@ export const SuggestionsInput = ({ const inputRef = useRef(); + useEffect(() => { + scrollRef.current?.scrollTo(0, scrollTop); + }, [scrollTop]); + // the order of middleware is important! const middleware = [ flip({ @@ -189,10 +195,10 @@ export const SuggestionsInput = ({ {showingSuggestions && (
- setScrollTop(scrollTop)} + setScrollTop(event.currentTarget.scrollTop ?? 0)} + ref={scrollRef} > {/* This suggestion component has a specialized name, but is rather generalistic in implementation, @@ -205,7 +211,7 @@ export const SuggestionsInput = ({ onClose={() => setShowingSuggestions(false)} activeIndex={suggestionsIndex} /> - +
)} diff --git a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx index f415eb7fa56..da536d30376 100644 --- a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx @@ -3,17 +3,8 @@ import { useEffect, useMemo, useState } from 'react'; import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { reportInteraction } from '@grafana/runtime'; -import { - Button, - Card, - Collapse, - CustomScrollbar, - Field, - Input, - LoadingPlaceholder, - Select, - useStyles2, -} from '@grafana/ui'; +import { Button, Card, Collapse, Field, Input, LoadingPlaceholder, Select, useStyles2 } from '@grafana/ui'; +import { ScrollContainer } from '@grafana/ui/src/unstable'; import AzureLogAnalyticsDatasource from '../../azure_log_analytics/azure_log_analytics_datasource'; import { @@ -171,7 +162,7 @@ const AzureCheatSheet = (props: AzureCheatSheetProps) => { return totalQueries; }, 0)}
- + {Object.keys(visibleQueries).map((category: string) => { if (visibleQueries[category]!.length) { return ( @@ -186,14 +177,14 @@ const AzureCheatSheet = (props: AzureCheatSheetProps) => { return ( {query.displayName} - + - +
) : (