Allow the docs plugin to use the sidebar (#106905)

This commit is contained in:
Jack Baldry 2025-06-24 15:10:28 +01:00 committed by GitHub
parent 27a5bab1c1
commit 10b6dd97f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 24 additions and 4 deletions

View File

@ -11,7 +11,12 @@ import { DEFAULT_EXTENSION_SIDEBAR_WIDTH } from './ExtensionSidebar';
export const EXTENSION_SIDEBAR_EXTENSION_POINT_ID = 'grafana/extension-sidebar/v0-alpha'; export const EXTENSION_SIDEBAR_EXTENSION_POINT_ID = 'grafana/extension-sidebar/v0-alpha';
export const EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY = 'grafana.navigation.extensionSidebarDocked'; export const EXTENSION_SIDEBAR_DOCKED_LOCAL_STORAGE_KEY = 'grafana.navigation.extensionSidebarDocked';
export const EXTENSION_SIDEBAR_WIDTH_LOCAL_STORAGE_KEY = 'grafana.navigation.extensionSidebarWidth'; export const EXTENSION_SIDEBAR_WIDTH_LOCAL_STORAGE_KEY = 'grafana.navigation.extensionSidebarWidth';
const PERMITTED_EXTENSION_SIDEBAR_PLUGINS = ['grafana-investigations-app', 'grafana-assistant-app', 'grafana-dash-app']; const PERMITTED_EXTENSION_SIDEBAR_PLUGINS = [
'grafana-investigations-app',
'grafana-assistant-app',
'grafana-dash-app',
'grafana-grafanadocsplugin-app',
];
type ExtensionSidebarContextType = { type ExtensionSidebarContextType = {
/** /**

View File

@ -14,10 +14,12 @@ export function ExtensionToolbarItem() {
useExtensionSidebarContext(); useExtensionSidebarContext();
let dockedComponentTitle = ''; let dockedComponentTitle = '';
let dockedPluginId = '';
if (dockedComponentId) { if (dockedComponentId) {
const dockedComponent = getComponentMetaFromComponentId(dockedComponentId); const dockedComponent = getComponentMetaFromComponentId(dockedComponentId);
if (dockedComponent) { if (dockedComponent) {
dockedComponentTitle = dockedComponent.componentTitle; dockedComponentTitle = dockedComponent.componentTitle;
dockedPluginId = dockedComponent.pluginId;
} }
} }
@ -47,6 +49,7 @@ export function ExtensionToolbarItem() {
setDockedComponentId(getComponentIdFromComponentMeta(components[0].pluginId, components[0])); setDockedComponentId(getComponentIdFromComponentMeta(components[0].pluginId, components[0]));
} }
}} }}
pluginId={components[0].pluginId}
/> />
<NavToolbarSeparator /> <NavToolbarSeparator />
</> </>
@ -85,6 +88,7 @@ export function ExtensionToolbarItem() {
setDockedComponentId(undefined); setDockedComponentId(undefined);
} }
}} }}
pluginId={dockedPluginId}
/> />
) : ( ) : (
<Dropdown overlay={MenuItems} placement="bottom-end"> <Dropdown overlay={MenuItems} placement="bottom-end">

View File

@ -9,13 +9,24 @@ interface ToolbarItemButtonProps {
isOpen: boolean; isOpen: boolean;
title?: string; title?: string;
onClick?: () => void; onClick?: () => void;
pluginId?: string;
}
function getPluginIcon(pluginId?: string): string {
switch (pluginId) {
case 'grafana-grafanadocsplugin-app':
return 'book';
default:
return 'ai-sparkle';
}
} }
function ExtensionToolbarItemButtonComponent( function ExtensionToolbarItemButtonComponent(
{ isOpen, title, onClick }: ToolbarItemButtonProps, { isOpen, title, onClick, pluginId }: ToolbarItemButtonProps,
ref: React.ForwardedRef<HTMLButtonElement> ref: React.ForwardedRef<HTMLButtonElement>
) { ) {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const icon = getPluginIcon(pluginId);
if (isOpen) { if (isOpen) {
// render button to close the sidebar // render button to close the sidebar
@ -23,7 +34,7 @@ function ExtensionToolbarItemButtonComponent(
<ToolbarButton <ToolbarButton
ref={ref} ref={ref}
className={cx(styles.button, styles.buttonActive)} className={cx(styles.button, styles.buttonActive)}
icon="ai-sparkle" icon={icon}
data-testid="extension-toolbar-button-close" data-testid="extension-toolbar-button-close"
variant="default" variant="default"
onClick={onClick} onClick={onClick}
@ -40,7 +51,7 @@ function ExtensionToolbarItemButtonComponent(
<ToolbarButton <ToolbarButton
ref={ref} ref={ref}
className={cx(styles.button)} className={cx(styles.button)}
icon="ai-sparkle" icon={icon}
data-testid="extension-toolbar-button-open" data-testid="extension-toolbar-button-open"
variant="default" variant="default"
onClick={onClick} onClick={onClick}