mirror of https://github.com/grafana/grafana
Explore: Show a drawer with tabs for the library and query history (#86279)
* Create basic feature toggle * Rename context to reflect it contains query history and query library * Update icons and variants * Rename hooks * Update tests * Fix mock * Add tracking * Turn button into a toggle * Make dropdown active as well This is required to have better UI and an indication of selected state in split view * Update Query Library icon This is to make it consistent with the toolbar button * Hide query history button when query library is available This is to avoid confusing UX with 2 button triggering the drawer but with slightly different behavior * Make the drawer bigger for query library To avoid confusion for current users and test it internally a bit more it's behind a feature toggle. Bigger drawer may obstruct the view and add more friction in the UX. * Fix tests The test was failing because queryLibraryAvailable was set to true for tests. This change makes it more explicit what use case is being tested * Remove active state underline from the dropdown * Allow closing Query Library drawer from the toolbar * Simplify dropdown designpull/86812/head
Piotr Jamróz
1 year ago
committed by
GitHub
parent
de589b98c7
commit
f6e472f879
|
@ -0,0 +1,63 @@ |
||||
import React, { PropsWithChildren, useState, createContext, useContext, useEffect } from 'react'; |
||||
|
||||
import { config } from '@grafana/runtime'; |
||||
import { useSelector } from 'app/types'; |
||||
|
||||
import { selectRichHistorySettings } from '../state/selectors'; |
||||
|
||||
export enum Tabs { |
||||
QueryLibrary = 'Query library', |
||||
RichHistory = 'Query history', |
||||
Starred = 'Starred', |
||||
Settings = 'Settings', |
||||
} |
||||
|
||||
type QueryLibraryContextType = { |
||||
selectedTab?: Tabs; |
||||
setSelectedTab: (tab: Tabs) => void; |
||||
queryLibraryAvailable: boolean; |
||||
drawerOpened: boolean; |
||||
setDrawerOpened: (value: boolean) => void; |
||||
}; |
||||
|
||||
export const QueriesDrawerContext = createContext<QueryLibraryContextType>({ |
||||
selectedTab: undefined, |
||||
setSelectedTab: () => {}, |
||||
queryLibraryAvailable: false, |
||||
drawerOpened: false, |
||||
setDrawerOpened: () => {}, |
||||
}); |
||||
|
||||
export function useQueriesDrawerContext() { |
||||
return useContext(QueriesDrawerContext); |
||||
} |
||||
|
||||
export function QueriesDrawerContextProvider({ children }: PropsWithChildren) { |
||||
const queryLibraryAvailable = config.featureToggles.queryLibrary === true; |
||||
const [selectedTab, setSelectedTab] = useState<Tabs | undefined>( |
||||
queryLibraryAvailable ? Tabs.QueryLibrary : undefined |
||||
); |
||||
const [drawerOpened, setDrawerOpened] = useState<boolean>(false); |
||||
|
||||
const settings = useSelector(selectRichHistorySettings); |
||||
|
||||
useEffect(() => { |
||||
if (settings && !queryLibraryAvailable) { |
||||
setSelectedTab(settings.starredTabAsFirstTab ? Tabs.Starred : Tabs.RichHistory); |
||||
} |
||||
}, [settings, setSelectedTab, queryLibraryAvailable]); |
||||
|
||||
return ( |
||||
<QueriesDrawerContext.Provider |
||||
value={{ |
||||
queryLibraryAvailable, |
||||
selectedTab, |
||||
setSelectedTab, |
||||
drawerOpened, |
||||
setDrawerOpened, |
||||
}} |
||||
> |
||||
{children} |
||||
</QueriesDrawerContext.Provider> |
||||
); |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { Button, ButtonGroup, Dropdown, Menu, ToolbarButton } from '@grafana/ui'; |
||||
import { useStyles2 } from '@grafana/ui/'; |
||||
|
||||
import { Tabs, useQueriesDrawerContext } from './QueriesDrawerContext'; |
||||
import { i18n } from './utils'; |
||||
|
||||
type Props = { |
||||
variant: 'compact' | 'full'; |
||||
}; |
||||
|
||||
export function QueriesDrawerDropdown({ variant }: Props) { |
||||
const { selectedTab, setSelectedTab, queryLibraryAvailable, drawerOpened, setDrawerOpened } = |
||||
useQueriesDrawerContext(); |
||||
|
||||
const styles = useStyles2(getStyles); |
||||
|
||||
if (!queryLibraryAvailable) { |
||||
return undefined; |
||||
} |
||||
|
||||
function toggle(tab: Tabs) { |
||||
setSelectedTab(tab); |
||||
setDrawerOpened(false); |
||||
setDrawerOpened(true); |
||||
} |
||||
|
||||
const menu = ( |
||||
<Menu> |
||||
<Menu.Item label={i18n.queryLibrary} onClick={() => toggle(Tabs.QueryLibrary)} /> |
||||
<Menu.Item label={i18n.queryHistory} onClick={() => toggle(Tabs.RichHistory)} /> |
||||
</Menu> |
||||
); |
||||
|
||||
return ( |
||||
<ButtonGroup> |
||||
<ToolbarButton |
||||
icon="book" |
||||
variant={drawerOpened ? 'active' : 'canvas'} |
||||
onClick={() => setDrawerOpened(!drawerOpened)} |
||||
> |
||||
{variant === 'full' ? selectedTab : undefined} |
||||
</ToolbarButton> |
||||
{drawerOpened ? ( |
||||
<Button |
||||
className={styles.close} |
||||
variant="secondary" |
||||
icon="times" |
||||
onClick={() => setDrawerOpened(false)} |
||||
></Button> |
||||
) : ( |
||||
<Dropdown overlay={menu}> |
||||
<ToolbarButton className={styles.toggle} variant="canvas" icon="angle-down" /> |
||||
</Dropdown> |
||||
)} |
||||
</ButtonGroup> |
||||
); |
||||
} |
||||
|
||||
const getStyles = () => ({ |
||||
toggle: css({ width: '36px' }), |
||||
// tweaking icon position so it's nicely aligned when dropdown turns into a close button
|
||||
close: css({ width: '36px', '> svg': { position: 'relative', left: 2 } }), |
||||
}); |
||||
@ -0,0 +1,30 @@ |
||||
import React, { PropsWithChildren, useState } from 'react'; |
||||
|
||||
import { QueriesDrawerContext, Tabs } from './QueriesDrawerContext'; |
||||
|
||||
type Props = { |
||||
setDrawerOpened?: (value: boolean) => {}; |
||||
queryLibraryAvailable?: boolean; |
||||
} & PropsWithChildren; |
||||
|
||||
export function QueriesDrawerContextProviderMock(props: Props) { |
||||
const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.QueryLibrary); |
||||
const [drawerOpened, setDrawerOpened] = useState<boolean>(false); |
||||
|
||||
return ( |
||||
<QueriesDrawerContext.Provider |
||||
value={{ |
||||
queryLibraryAvailable: props.queryLibraryAvailable || false, |
||||
selectedTab, |
||||
setSelectedTab, |
||||
drawerOpened, |
||||
setDrawerOpened: (value) => { |
||||
props.setDrawerOpened?.(value); |
||||
setDrawerOpened(value); |
||||
}, |
||||
}} |
||||
> |
||||
{props.children} |
||||
</QueriesDrawerContext.Provider> |
||||
); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
import { t } from 'app//core/internationalization'; |
||||
|
||||
export const i18n = { |
||||
queryLibrary: t('explore.rich-history.query-library', 'Query library'), |
||||
queryHistory: t('explore.rich-history.query-history', 'Query history'), |
||||
}; |
||||
Loading…
Reference in new issue