opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-31 21:32:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Sidebar: Create a sidebar that can render an extension (#102626)

Browse Source 
* Extension Sidebar: Add missing `web-section` icon

* Extension Sidebar: Add core extension sidebar components

* Extension Sidebar: Integrate extension sidebar into Grafana

* Extension Sidebar: Change extension point to alpha

* Extension Sidebar: Fix saved state of docked extensions

* Extension Sidebar: Delete from local storage if undocked

* Extension Sidebar: Move main scrollbar from body to pane

* Extension Sidebar: Expose `ExtensionInfo`

* Extension Sidebar: Move `useComponents` into ExtensionSidebar

* Extension Sidebar: Store selection in `localStorage`

* Extension Sidebar: Simplify return of extension point meta

* Extension Sidebar: Ensure `body` is scrollable when sidebar is closed

* Extension Sidebar: Add missing `GlobalStyles` change

* Extension Sidebar: Don't render `ExtensionSidebar` unless it should be open

* Extension Sidebar: Better toggle handling

* Extension Sidebar: Fix wrong header height

* Extension Sidebar: Change `getExtensionPointPluginMeta` to use `addedComponents` and add documentation

* Extension Sidebar: Add tests for `getExtensionPointPluginMeta`

* Extension Sidebar: Add tests for `ExtensionSidebarProvider`

* Extension Sidebar: Fix tests `ExtensionSidebarProvider`

* Extension Sidebar: Add tests `ExtensionToolbarItem`

* Extension Sidebar: Add `extensionSidebar` feature toggle

* Extension Sidebar: Put implementation behind `extensionSidebar` feature toggle

* update feature toggles

* fix lint

* Extension Sidebar: Only toggle if clicking the same button

* Extension Sidebar: Hide sidebar if chromeless

* Update feature toggles doc

* Sidebar: Add `isEnabled` to ExtensionSidebarProvider

* Extension Sidebar: Use conditional CSS classes

* Extension Sidebar: Move header height to GrafanaContext

* Sidebar: Adapt to feature toggle change

* Sidebar: Remove unused import

* Sidebar: Keep featuretoggles in ExtensionSidebar tests

* ProviderConfig: Keep `config` import in tests

* FeatureToggles: adapt to docs review

* fix typo
This commit is contained in:
Sven Grossmann
2025-04-03 12:16:35 +02:00
committed by GitHub
parent b97b1cc730
commit f277902682
23 changed files with 1033 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
View File

@ -27,12 +27,13 @@ import { getUtilityClassStyles } from './utilityClasses';
interface GlobalStylesProps {
hackNoBackdropBlur?: boolean;
isExtensionSidebarOpen?: boolean;
}
/** @internal */
export function GlobalStyles(props: GlobalStylesProps) {
const theme = useTheme2();
const { hackNoBackdropBlur } = props;
const { hackNoBackdropBlur, isExtensionSidebarOpen } = props;
return (
<Global
@ -43,7 +44,7 @@ export function GlobalStyles(props: GlobalStylesProps) {
getCodeStyles(theme),
getDashDiffStyles(theme),
getDashboardGridStyles(theme),
getElementStyles(theme),
getElementStyles(theme, isExtensionSidebarOpen),
getExtraStyles(theme),
getFilterTableStyles(theme),
getFontStyles(theme),

14
packages/grafana-ui/src/themes/GlobalStyles/elements.ts
View File

@ -4,7 +4,13 @@ import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data';
import { getFocusStyles } from '../mixins';
export function getElementStyles(theme: GrafanaTheme2) {
export function getElementStyles(theme: GrafanaTheme2, isExtensionSidebarOpen?: boolean) {
// in case the sidebar is closed, we want the body to scroll
// react select tries prevent scrolling by setting overflow/padding-right on the body
// Need type assertion here due to the use of !important
// see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const bodyOverflow = isExtensionSidebarOpen ? {} : { overflowY: 'auto !important' as 'auto' };
return css({
'*, *::before, *::after': {
boxSizing: 'inherit',
@ -40,11 +46,6 @@ export function getElementStyles(theme: GrafanaTheme2) {
position: 'unset',
color: theme.colors.text.primary,
backgroundColor: theme.colors.background.canvas,
// react select tries prevent scrolling by setting overflow/padding-right on the body
// Need type assertion here due to the use of !important
// see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
overflowY: 'auto !important' as 'auto',
paddingRight: '0 !important',
'@media print': {
overflow: 'visible',
@ -59,6 +60,7 @@ export function getElementStyles(theme: GrafanaTheme2) {
// see https://github.com/rsms/inter/issues/222
fontVariantLigatures: 'no-contextual',
...theme.typography.body,
...bodyOverflow,
},
'h1, .h1': getVariantStyles(theme.typography.h1),