mirror of https://github.com/grafana/grafana
Sidebar: Create a sidebar that can render an extension (#102626)
* 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 typopull/103255/head
Sven Grossmann
4 months ago
committed by
GitHub
parent
b97b1cc730
commit
f277902682
|
@ -0,0 +1,64 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { usePluginComponents } from '@grafana/runtime'; |
||||||
|
import { useTheme2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { |
||||||
|
EXTENSION_SIDEBAR_EXTENSION_POINT_ID, |
||||||
|
getComponentMetaFromComponentId, |
||||||
|
useExtensionSidebarContext, |
||||||
|
} from './ExtensionSidebarProvider'; |
||||||
|
|
||||||
|
export const EXTENSION_SIDEBAR_WIDTH = '300px'; |
||||||
|
|
||||||
|
export function ExtensionSidebar() { |
||||||
|
const styles = getStyles(useTheme2()); |
||||||
|
const { dockedComponentId, isEnabled } = useExtensionSidebarContext(); |
||||||
|
const { components, isLoading } = usePluginComponents({ extensionPointId: EXTENSION_SIDEBAR_EXTENSION_POINT_ID }); |
||||||
|
|
||||||
|
if (isLoading || !dockedComponentId || !isEnabled) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const dockedMeta = getComponentMetaFromComponentId(dockedComponentId); |
||||||
|
if (!dockedMeta) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const ExtensionComponent = components.find( |
||||||
|
(c) => c.meta.pluginId === dockedMeta.pluginId && c.meta.title === dockedMeta.componentTitle |
||||||
|
); |
||||||
|
|
||||||
|
if (!ExtensionComponent) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.sidebarWrapper}> |
||||||
|
<div className={styles.content}> |
||||||
|
<ExtensionComponent /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => { |
||||||
|
return { |
||||||
|
sidebarWrapper: css({ |
||||||
|
backgroundColor: theme.colors.background.primary, |
||||||
|
borderLeft: `1px solid ${theme.colors.border.weak}`, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: theme.spacing(1), |
||||||
|
padding: theme.spacing(1), |
||||||
|
width: EXTENSION_SIDEBAR_WIDTH, |
||||||
|
height: '100%', |
||||||
|
}), |
||||||
|
content: css({ |
||||||
|
flex: 1, |
||||||
|
minHeight: 0, |
||||||
|
overflow: 'auto', |
||||||
|
}), |
||||||
|
}; |
||||||
|
}; |
||||||
@ -0,0 +1,241 @@ |
|||||||
|
import { render, screen, act } from '@testing-library/react'; |
||||||
|
// import { render } from 'test/test-utils';
|
||||||
|
|
||||||
|
import { store } from '@grafana/data'; |
||||||
|
import { config } from '@grafana/runtime'; |
||||||
|
import { getExtensionPointPluginMeta } from 'app/features/plugins/extensions/utils'; |
||||||
|
|
||||||
|
import { |
||||||
|
ExtensionSidebarContextProvider, |
||||||
|
useExtensionSidebarContext, |
||||||
|
getComponentIdFromComponentMeta, |
||||||
|
getComponentMetaFromComponentId, |
||||||
|
EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY, |
||||||
|
} from './ExtensionSidebarProvider'; |
||||||
|
|
||||||
|
// Mock the store
|
||||||
|
jest.mock('@grafana/data', () => ({ |
||||||
|
...jest.requireActual('@grafana/data'), |
||||||
|
store: { |
||||||
|
get: jest.fn(), |
||||||
|
set: jest.fn(), |
||||||
|
delete: jest.fn(), |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
// Mock the extension point plugin meta
|
||||||
|
jest.mock('app/features/plugins/extensions/utils', () => ({ |
||||||
|
...jest.requireActual('app/features/plugins/extensions/utils'), |
||||||
|
getExtensionPointPluginMeta: jest.fn(), |
||||||
|
})); |
||||||
|
|
||||||
|
jest.mock('@grafana/runtime', () => ({ |
||||||
|
...jest.requireActual('@grafana/runtime'), |
||||||
|
config: { |
||||||
|
...jest.requireActual('@grafana/runtime').config, |
||||||
|
featureToggles: { |
||||||
|
...jest.requireActual('@grafana/runtime').config.featureToggles, |
||||||
|
extensionSidebar: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
const mockComponent = { |
||||||
|
title: 'Test Component', |
||||||
|
description: 'Test Description', |
||||||
|
targets: [], |
||||||
|
}; |
||||||
|
|
||||||
|
const mockPluginMeta = { |
||||||
|
pluginId: 'grafana-investigations-app', |
||||||
|
addedComponents: [mockComponent], |
||||||
|
}; |
||||||
|
|
||||||
|
describe('ExtensionSidebarProvider', () => { |
||||||
|
beforeEach(() => { |
||||||
|
jest.clearAllMocks(); |
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue(new Map([[mockPluginMeta.pluginId, mockPluginMeta]])); |
||||||
|
jest.replaceProperty(config.featureToggles, 'extensionSidebar', true); |
||||||
|
}); |
||||||
|
|
||||||
|
const TestComponent = () => { |
||||||
|
const context = useExtensionSidebarContext(); |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div data-testid="is-open">{context.isOpen.toString()}</div> |
||||||
|
<div data-testid="docked-component-id">{context.dockedComponentId || 'undefined'}</div> |
||||||
|
<div data-testid="available-components-size">{context.availableComponents.size}</div> |
||||||
|
<div data-testid="plugin-ids">{Array.from(context.availableComponents.keys()).join(', ')}</div> |
||||||
|
<div data-testid="is-enabled">{context.isEnabled.toString()}</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
it('should provide default context values', () => { |
||||||
|
render( |
||||||
|
<ExtensionSidebarContextProvider> |
||||||
|
<TestComponent /> |
||||||
|
</ExtensionSidebarContextProvider> |
||||||
|
); |
||||||
|
|
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('false'); |
||||||
|
expect(screen.getByTestId('docked-component-id')).toHaveTextContent('undefined'); |
||||||
|
expect(screen.getByTestId('available-components-size')).toHaveTextContent('1'); |
||||||
|
expect(screen.getByTestId('is-enabled')).toHaveTextContent('true'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should have empty available components when feature toggle is disabled', () => { |
||||||
|
jest.replaceProperty(config.featureToggles, 'extensionSidebar', false); |
||||||
|
|
||||||
|
render( |
||||||
|
<ExtensionSidebarContextProvider> |
||||||
|
<TestComponent /> |
||||||
|
</ExtensionSidebarContextProvider> |
||||||
|
); |
||||||
|
|
||||||
|
expect(screen.getByTestId('is-enabled')).toHaveTextContent('false'); |
||||||
|
expect(screen.getByTestId('available-components-size')).toHaveTextContent('0'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should load docked component from storage if available', () => { |
||||||
|
const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); |
||||||
|
(store.get as jest.Mock).mockReturnValue(componentId); |
||||||
|
|
||||||
|
render( |
||||||
|
<ExtensionSidebarContextProvider> |
||||||
|
<TestComponent /> |
||||||
|
</ExtensionSidebarContextProvider> |
||||||
|
); |
||||||
|
|
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('true'); |
||||||
|
expect(screen.getByTestId('docked-component-id')).toHaveTextContent(componentId); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not load docked component from storage if feature toggle is disabled', () => { |
||||||
|
jest.replaceProperty(config.featureToggles, 'extensionSidebar', false); |
||||||
|
|
||||||
|
const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); |
||||||
|
(store.get as jest.Mock).mockReturnValue(componentId); |
||||||
|
|
||||||
|
render( |
||||||
|
<ExtensionSidebarContextProvider> |
||||||
|
<TestComponent /> |
||||||
|
</ExtensionSidebarContextProvider> |
||||||
|
); |
||||||
|
|
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('false'); |
||||||
|
expect(screen.getByTestId('docked-component-id')).toHaveTextContent('undefined'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should update storage when docked component changes', () => { |
||||||
|
const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); |
||||||
|
|
||||||
|
const TestComponentWithActions = () => { |
||||||
|
const context = useExtensionSidebarContext(); |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
context.setDockedComponentId(componentId); |
||||||
|
}} |
||||||
|
> |
||||||
|
Set Component |
||||||
|
</button> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
context.setDockedComponentId(undefined); |
||||||
|
}} |
||||||
|
> |
||||||
|
Clear Component |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
render( |
||||||
|
<ExtensionSidebarContextProvider> |
||||||
|
<TestComponentWithActions /> |
||||||
|
</ExtensionSidebarContextProvider> |
||||||
|
); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
screen.getByText('Set Component').click(); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(store.set).toHaveBeenCalledWith(EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY, componentId); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
screen.getByText('Clear Component').click(); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(store.delete).toHaveBeenCalledWith(EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should only include permitted plugins in available components', () => { |
||||||
|
const permittedPluginMeta = { |
||||||
|
pluginId: 'grafana-investigations-app', |
||||||
|
addedComponents: [mockComponent], |
||||||
|
}; |
||||||
|
|
||||||
|
const prohibitedPluginMeta = { |
||||||
|
pluginId: 'disabled-plugin', |
||||||
|
addedComponents: [mockComponent], |
||||||
|
}; |
||||||
|
|
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue( |
||||||
|
new Map([ |
||||||
|
[permittedPluginMeta.pluginId, permittedPluginMeta], |
||||||
|
[prohibitedPluginMeta.pluginId, prohibitedPluginMeta], |
||||||
|
]) |
||||||
|
); |
||||||
|
|
||||||
|
render( |
||||||
|
<ExtensionSidebarContextProvider> |
||||||
|
<TestComponent /> |
||||||
|
</ExtensionSidebarContextProvider> |
||||||
|
); |
||||||
|
|
||||||
|
// Should only include the enabled plugin
|
||||||
|
expect(screen.getByTestId('available-components-size')).toHaveTextContent('1'); |
||||||
|
expect(screen.getByTestId('plugin-ids')).toHaveTextContent(permittedPluginMeta.pluginId); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('Utility Functions', () => { |
||||||
|
describe('getComponentIdFromComponentMeta', () => { |
||||||
|
it('should create a valid component ID', () => { |
||||||
|
const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); |
||||||
|
|
||||||
|
expect(componentId).toBe( |
||||||
|
JSON.stringify({ pluginId: mockPluginMeta.pluginId, componentTitle: mockComponent.title }) |
||||||
|
); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('getComponentMetaFromComponentId', () => { |
||||||
|
it('should parse a valid component ID', () => { |
||||||
|
const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); |
||||||
|
|
||||||
|
const meta = getComponentMetaFromComponentId(componentId); |
||||||
|
expect(meta).toEqual({ |
||||||
|
pluginId: mockPluginMeta.pluginId, |
||||||
|
componentTitle: mockComponent.title, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return undefined for invalid JSON', () => { |
||||||
|
const meta = getComponentMetaFromComponentId('invalid-json'); |
||||||
|
expect(meta).toBeUndefined(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return undefined for missing required fields', () => { |
||||||
|
const meta = getComponentMetaFromComponentId(JSON.stringify({ pluginId: mockPluginMeta.pluginId })); |
||||||
|
expect(meta).toBeUndefined(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return undefined for wrong field types', () => { |
||||||
|
const meta = getComponentMetaFromComponentId(JSON.stringify({ pluginId: 123, componentTitle: 'Test Component' })); |
||||||
|
expect(meta).toBeUndefined(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,132 @@ |
|||||||
|
import { createContext, ReactNode, useContext, useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import { store, type ExtensionInfo } from '@grafana/data'; |
||||||
|
import { config } from '@grafana/runtime'; |
||||||
|
import { ExtensionPointPluginMeta, getExtensionPointPluginMeta } from 'app/features/plugins/extensions/utils'; |
||||||
|
|
||||||
|
export const EXTENSION_SIDEBAR_EXTENSION_POINT_ID = 'grafana/extension-sidebar/v0-alpha'; |
||||||
|
export const EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY = 'grafana.navigation.extensionSidebarDocked'; |
||||||
|
const PERMITTED_EXTENSION_SIDEBAR_PLUGINS = ['grafana-investigations-app']; |
||||||
|
|
||||||
|
type ExtensionSidebarContextType = { |
||||||
|
/** |
||||||
|
* Whether the extension sidebar is enabled. |
||||||
|
*/ |
||||||
|
isEnabled: boolean; |
||||||
|
/** |
||||||
|
* Whether the extension sidebar is open. |
||||||
|
*/ |
||||||
|
isOpen: boolean; |
||||||
|
/** |
||||||
|
* The id of the component that is currently docked in the sidebar. If the id is undefined, nothing will be rendered. |
||||||
|
*/ |
||||||
|
dockedComponentId: string | undefined; |
||||||
|
/** |
||||||
|
* Sest the id of the component that will be rendered in the extension sidebar. |
||||||
|
*/ |
||||||
|
setDockedComponentId: (componentId: string | undefined) => void; |
||||||
|
/** |
||||||
|
* A map of all components that are available for the extension point. |
||||||
|
*/ |
||||||
|
availableComponents: ExtensionPointPluginMeta; |
||||||
|
}; |
||||||
|
|
||||||
|
export const ExtensionSidebarContext = createContext<ExtensionSidebarContextType>({ |
||||||
|
isEnabled: !!config.featureToggles.extensionSidebar, |
||||||
|
isOpen: false, |
||||||
|
dockedComponentId: undefined, |
||||||
|
setDockedComponentId: () => {}, |
||||||
|
availableComponents: new Map(), |
||||||
|
}); |
||||||
|
|
||||||
|
export function useExtensionSidebarContext() { |
||||||
|
return useContext(ExtensionSidebarContext); |
||||||
|
} |
||||||
|
|
||||||
|
interface ExtensionSidebarContextProps { |
||||||
|
children: ReactNode; |
||||||
|
} |
||||||
|
|
||||||
|
export const ExtensionSidebarContextProvider = ({ children }: ExtensionSidebarContextProps) => { |
||||||
|
const storedDockedPluginId = store.get(EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY); |
||||||
|
const isEnabled = !!config.featureToggles.extensionSidebar; |
||||||
|
// get all components for this extension point, but only for the permitted plugins
|
||||||
|
// if the extension sidebar is not enabled, we will return an empty map
|
||||||
|
const availableComponents = isEnabled |
||||||
|
? new Map( |
||||||
|
Array.from(getExtensionPointPluginMeta(EXTENSION_SIDEBAR_EXTENSION_POINT_ID).entries()).filter(([pluginId]) => |
||||||
|
PERMITTED_EXTENSION_SIDEBAR_PLUGINS.includes(pluginId) |
||||||
|
) |
||||||
|
) |
||||||
|
: new Map< |
||||||
|
string, |
||||||
|
{ |
||||||
|
readonly addedComponents: ExtensionInfo[]; |
||||||
|
readonly addedLinks: ExtensionInfo[]; |
||||||
|
} |
||||||
|
>(); |
||||||
|
|
||||||
|
// check if the stored docked component is still available
|
||||||
|
let defaultDockedComponentId: string | undefined; |
||||||
|
if (storedDockedPluginId) { |
||||||
|
const dockedMeta = getComponentMetaFromComponentId(storedDockedPluginId); |
||||||
|
if (dockedMeta) { |
||||||
|
const plugin = availableComponents.get(dockedMeta.pluginId); |
||||||
|
if (plugin) { |
||||||
|
const component = plugin.addedComponents.find((c) => c.title === dockedMeta.componentTitle); |
||||||
|
if (component) { |
||||||
|
defaultDockedComponentId = storedDockedPluginId; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
const [dockedComponentId, setDockedComponentId] = useState<string | undefined>(defaultDockedComponentId); |
||||||
|
|
||||||
|
// update the stored docked component id when it changes
|
||||||
|
useEffect(() => { |
||||||
|
if (dockedComponentId) { |
||||||
|
store.set(EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY, dockedComponentId); |
||||||
|
} else { |
||||||
|
store.delete(EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY); |
||||||
|
} |
||||||
|
}, [dockedComponentId]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<ExtensionSidebarContext.Provider |
||||||
|
value={{ |
||||||
|
isEnabled, |
||||||
|
isOpen: isEnabled && dockedComponentId !== undefined, |
||||||
|
dockedComponentId, |
||||||
|
setDockedComponentId, |
||||||
|
availableComponents, |
||||||
|
}} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</ExtensionSidebarContext.Provider> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export function getComponentIdFromComponentMeta(pluginId: string, component: ExtensionInfo) { |
||||||
|
return JSON.stringify({ pluginId, componentTitle: component.title }); |
||||||
|
} |
||||||
|
|
||||||
|
export function getComponentMetaFromComponentId( |
||||||
|
componentId: string |
||||||
|
): { pluginId: string; componentTitle: string } | undefined { |
||||||
|
try { |
||||||
|
const parsed = JSON.parse(componentId); |
||||||
|
if ( |
||||||
|
typeof parsed === 'object' && |
||||||
|
parsed !== null && |
||||||
|
'pluginId' in parsed && |
||||||
|
'componentTitle' in parsed && |
||||||
|
typeof parsed.pluginId === 'string' && |
||||||
|
typeof parsed.componentTitle === 'string' |
||||||
|
) { |
||||||
|
return parsed; |
||||||
|
} |
||||||
|
return undefined; |
||||||
|
} catch (error) { |
||||||
|
return undefined; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,209 @@ |
|||||||
|
import { render, screen } from '@testing-library/react'; |
||||||
|
import userEvent from '@testing-library/user-event'; |
||||||
|
|
||||||
|
import { store } from '@grafana/data'; |
||||||
|
import { config } from '@grafana/runtime'; |
||||||
|
import { getExtensionPointPluginMeta } from 'app/features/plugins/extensions/utils'; |
||||||
|
|
||||||
|
import { ExtensionSidebarContextProvider, useExtensionSidebarContext } from './ExtensionSidebarProvider'; |
||||||
|
import { ExtensionToolbarItem } from './ExtensionToolbarItem'; |
||||||
|
|
||||||
|
// Mock the extension point plugin meta
|
||||||
|
jest.mock('app/features/plugins/extensions/utils', () => ({ |
||||||
|
...jest.requireActual('app/features/plugins/extensions/utils'), |
||||||
|
getExtensionPointPluginMeta: jest.fn(), |
||||||
|
})); |
||||||
|
|
||||||
|
// Mock store
|
||||||
|
jest.mock('@grafana/data', () => ({ |
||||||
|
...jest.requireActual('@grafana/data'), |
||||||
|
store: { |
||||||
|
get: jest.fn(), |
||||||
|
set: jest.fn(), |
||||||
|
delete: jest.fn(), |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
jest.mock('@grafana/runtime', () => ({ |
||||||
|
...jest.requireActual('@grafana/runtime'), |
||||||
|
config: { |
||||||
|
...jest.requireActual('@grafana/runtime').config, |
||||||
|
featureToggles: { |
||||||
|
...jest.requireActual('@grafana/runtime').config.featureToggles, |
||||||
|
extensionSidebar: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
const mockComponent = { |
||||||
|
title: 'Test Component', |
||||||
|
description: 'Test Description', |
||||||
|
targets: [], |
||||||
|
}; |
||||||
|
|
||||||
|
const mockPluginMeta = { |
||||||
|
pluginId: 'grafana-investigations-app', |
||||||
|
addedComponents: [mockComponent], |
||||||
|
}; |
||||||
|
|
||||||
|
const TestComponent = () => { |
||||||
|
const { isOpen, dockedComponentId } = useExtensionSidebarContext(); |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div data-testid="is-open">{isOpen.toString()}</div> |
||||||
|
<div data-testid="docked-component-id">{dockedComponentId}</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const setup = () => { |
||||||
|
return render( |
||||||
|
<ExtensionSidebarContextProvider> |
||||||
|
<ExtensionToolbarItem /> |
||||||
|
<TestComponent /> |
||||||
|
</ExtensionSidebarContextProvider> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
describe('ExtensionToolbarItem', () => { |
||||||
|
beforeEach(() => { |
||||||
|
jest.clearAllMocks(); |
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue(new Map([[mockPluginMeta.pluginId, mockPluginMeta]])); |
||||||
|
(store.get as jest.Mock).mockClear(); |
||||||
|
(store.set as jest.Mock).mockClear(); |
||||||
|
(store.delete as jest.Mock).mockClear(); |
||||||
|
jest.replaceProperty(config.featureToggles, 'extensionSidebar', true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not render when feature toggle is disabled', () => { |
||||||
|
jest.replaceProperty(config.featureToggles, 'extensionSidebar', false); |
||||||
|
setup(); |
||||||
|
expect(screen.queryByRole('button')).not.toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not render when no components are available', () => { |
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue(new Map()); |
||||||
|
setup(); |
||||||
|
expect(screen.queryByRole('button')).not.toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render a single button when only one component is available', () => { |
||||||
|
setup(); |
||||||
|
|
||||||
|
const button = screen.getByTestId('extension-toolbar-button'); |
||||||
|
expect(button).toBeInTheDocument(); |
||||||
|
expect(button).toHaveAttribute('aria-label', mockComponent.description); |
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('false'); |
||||||
|
expect(screen.getByTestId('docked-component-id')).toHaveTextContent(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should toggle the sidebar when clicking a single component button', async () => { |
||||||
|
setup(); |
||||||
|
|
||||||
|
const button = screen.getByTestId('extension-toolbar-button'); |
||||||
|
await userEvent.click(button); |
||||||
|
|
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('true'); |
||||||
|
expect(screen.getByTestId('docked-component-id')).toHaveTextContent(mockComponent.title); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render a dropdown menu when multiple components are available', async () => { |
||||||
|
const multipleComponentsMeta = { |
||||||
|
pluginId: 'grafana-investigations-app', |
||||||
|
addedComponents: [ |
||||||
|
{ ...mockComponent, title: 'Component 1' }, |
||||||
|
{ ...mockComponent, title: 'Component 2' }, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue( |
||||||
|
new Map([[multipleComponentsMeta.pluginId, multipleComponentsMeta]]) |
||||||
|
); |
||||||
|
|
||||||
|
setup(); |
||||||
|
|
||||||
|
const button = screen.getByTestId('extension-toolbar-button'); |
||||||
|
expect(button).toBeInTheDocument(); |
||||||
|
|
||||||
|
await userEvent.click(button); |
||||||
|
expect(screen.getAllByRole('menuitem')).toHaveLength(multipleComponentsMeta.addedComponents.length); |
||||||
|
expect(screen.getByText(multipleComponentsMeta.addedComponents[0].title)).toBeInTheDocument(); |
||||||
|
expect(screen.getByText(multipleComponentsMeta.addedComponents[1].title)).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show menu items when clicking the dropdown button', async () => { |
||||||
|
const multipleComponentsMeta = { |
||||||
|
pluginId: 'grafana-investigations-app', |
||||||
|
addedComponents: [ |
||||||
|
{ ...mockComponent, title: 'Component 1' }, |
||||||
|
{ ...mockComponent, title: 'Component 2' }, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue( |
||||||
|
new Map([[multipleComponentsMeta.pluginId, multipleComponentsMeta]]) |
||||||
|
); |
||||||
|
|
||||||
|
setup(); |
||||||
|
|
||||||
|
const button = screen.getByTestId('extension-toolbar-button'); |
||||||
|
await userEvent.click(button); |
||||||
|
|
||||||
|
// Menu items should be visible
|
||||||
|
expect(screen.getByText('Component 1')).toBeInTheDocument(); |
||||||
|
expect(screen.getByText('Component 2')).toBeInTheDocument(); |
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('false'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should toggle the sidebar when clicking a menu item', async () => { |
||||||
|
const multipleComponentsMeta = { |
||||||
|
pluginId: 'grafana-investigations-app', |
||||||
|
addedComponents: [ |
||||||
|
{ ...mockComponent, title: 'Component 1' }, |
||||||
|
{ ...mockComponent, title: 'Component 2' }, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue( |
||||||
|
new Map([[multipleComponentsMeta.pluginId, multipleComponentsMeta]]) |
||||||
|
); |
||||||
|
|
||||||
|
setup(); |
||||||
|
|
||||||
|
// Open the dropdown
|
||||||
|
const button = screen.getByTestId('extension-toolbar-button'); |
||||||
|
await userEvent.click(button); |
||||||
|
|
||||||
|
// Click a menu item
|
||||||
|
await userEvent.click(screen.getByText('Component 1')); |
||||||
|
|
||||||
|
// The button should now be active
|
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('true'); |
||||||
|
expect(screen.getByTestId('docked-component-id')).toHaveTextContent('Component 1'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should close the sidebar when clicking an active menu item', async () => { |
||||||
|
const multipleComponentsMeta = { |
||||||
|
pluginId: 'grafana-investigations-app', |
||||||
|
addedComponents: [ |
||||||
|
{ ...mockComponent, title: 'Component 1' }, |
||||||
|
{ ...mockComponent, title: 'Component 2' }, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
(getExtensionPointPluginMeta as jest.Mock).mockReturnValue( |
||||||
|
new Map([[multipleComponentsMeta.pluginId, multipleComponentsMeta]]) |
||||||
|
); |
||||||
|
|
||||||
|
setup(); |
||||||
|
|
||||||
|
const button = screen.getByTestId('extension-toolbar-button'); |
||||||
|
await userEvent.click(button); |
||||||
|
await userEvent.click(screen.getByText('Component 1')); |
||||||
|
|
||||||
|
await userEvent.click(button); |
||||||
|
await userEvent.click(screen.getByText('Component 1')); |
||||||
|
|
||||||
|
expect(screen.getByTestId('is-open')).toHaveTextContent('false'); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
|
||||||
|
import { Dropdown, Menu, ToolbarButton } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { getComponentIdFromComponentMeta, useExtensionSidebarContext } from './ExtensionSidebarProvider'; |
||||||
|
|
||||||
|
export function ExtensionToolbarItem() { |
||||||
|
const [isMenuOpen, setIsMenuOpen] = useState(false); |
||||||
|
const { availableComponents, dockedComponentId, setDockedComponentId, isOpen, isEnabled } = |
||||||
|
useExtensionSidebarContext(); |
||||||
|
|
||||||
|
if (!isEnabled || availableComponents.size === 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
// get a flat list of all components with their pluginId
|
||||||
|
const components = Array.from(availableComponents.entries()).flatMap(([pluginId, { addedComponents }]) => |
||||||
|
addedComponents.map((c) => ({ ...c, pluginId })) |
||||||
|
); |
||||||
|
|
||||||
|
if (components.length === 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
if (components.length === 1) { |
||||||
|
return ( |
||||||
|
<ToolbarButton |
||||||
|
icon="web-section" |
||||||
|
data-testid="extension-toolbar-button" |
||||||
|
variant={isOpen ? 'active' : 'default'} |
||||||
|
tooltip={components[0].description} |
||||||
|
onClick={() => { |
||||||
|
if (isOpen) { |
||||||
|
setDockedComponentId(undefined); |
||||||
|
} else { |
||||||
|
setDockedComponentId(getComponentIdFromComponentMeta(components[0].pluginId, components[0])); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const MenuItems = ( |
||||||
|
<Menu> |
||||||
|
{components.map((c) => { |
||||||
|
const id = getComponentIdFromComponentMeta(c.pluginId, c); |
||||||
|
return ( |
||||||
|
<Menu.Item |
||||||
|
key={id} |
||||||
|
active={dockedComponentId === id} |
||||||
|
label={c.title} |
||||||
|
onClick={() => { |
||||||
|
if (isOpen && dockedComponentId === id) { |
||||||
|
setDockedComponentId(undefined); |
||||||
|
} else { |
||||||
|
setDockedComponentId(id); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</Menu> |
||||||
|
); |
||||||
|
return ( |
||||||
|
<Dropdown overlay={MenuItems} onVisibleChange={setIsMenuOpen} placement="bottom-end"> |
||||||
|
<ToolbarButton |
||||||
|
data-testid="extension-toolbar-button" |
||||||
|
icon="web-section" |
||||||
|
isOpen={isMenuOpen} |
||||||
|
variant={isOpen ? 'active' : 'default'} |
||||||
|
/> |
||||||
|
</Dropdown> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import { config } from '@grafana/runtime'; |
||||||
|
import { GlobalStyles } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { useExtensionSidebarContext } from './ExtensionSidebarProvider'; |
||||||
|
|
||||||
|
/** |
||||||
|
* This component is used to wrap the GlobalStyles component and pass the isExtensionSidebarOpen prop to it. |
||||||
|
* Since GlobalStyles is imported from @grafana/ui, we need to wrap it in a component to use the useExtensionSidebarContext hook. |
||||||
|
*/ |
||||||
|
export const GlobalStylesWrapper = () => { |
||||||
|
const { isOpen } = useExtensionSidebarContext(); |
||||||
|
|
||||||
|
return <GlobalStyles hackNoBackdropBlur={config.featureToggles.noBackdropBlur} isExtensionSidebarOpen={isOpen} />; |
||||||
|
}; |
||||||
Loading…
Reference in new issue