SingleTopNav: Fix positioning of command palette (#95041)

fix positioning of command palette when singleTopNav is enabled
This commit is contained in:
Ashley Harrison 2024-10-21 12:06:44 +01:00 committed by GitHub
parent cc99e7b164
commit 324063eb3d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -28,7 +28,8 @@ import { CommandPaletteAction } from './types';
import { useMatches } from './useMatches'; import { useMatches } from './useMatches';
export function CommandPalette() { export function CommandPalette() {
const styles = useStyles2(getSearchStyles); const lateralSpace = getCommandPalettePosition();
const styles = useStyles2(getSearchStyles, lateralSpace);
const { query, showing, searchQuery } = useKBar((state) => ({ const { query, showing, searchQuery } = useKBar((state) => ({
showing: state.visualState === VisualState.showing, showing: state.visualState === VisualState.showing,
@ -86,7 +87,8 @@ interface RenderResultsProps {
const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResultsProps) => { const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResultsProps) => {
const { results: kbarResults, rootActionId } = useMatches(); const { results: kbarResults, rootActionId } = useMatches();
const styles = useStyles2(getSearchStyles); const lateralSpace = getCommandPalettePosition();
const styles = useStyles2(getSearchStyles, lateralSpace);
const dashboardsSectionTitle = t('command-palette.section.dashboard-search-results', 'Dashboards'); const dashboardsSectionTitle = t('command-palette.section.dashboard-search-results', 'Dashboards');
const foldersSectionTitle = t('command-palette.section.folder-search-results', 'Folders'); const foldersSectionTitle = t('command-palette.section.folder-search-results', 'Folders');
// because dashboard search results aren't registered as actions, we need to manually // because dashboard search results aren't registered as actions, we need to manually
@ -155,8 +157,7 @@ const getCommandPalettePosition = () => {
return lateralSpace; return lateralSpace;
}; };
const getSearchStyles = (theme: GrafanaTheme2) => { const getSearchStyles = (theme: GrafanaTheme2, lateralSpace: number) => {
const lateralSpace = getCommandPalettePosition();
const isSingleTopNav = config.featureToggles.singleTopNav; const isSingleTopNav = config.featureToggles.singleTopNav;
return { return {