diff --git a/ui/src/providers/LocalStorageProvider/index.tsx b/ui/src/providers/LocalStorageProvider/index.tsx index 4f58d7949fdc988a25f4c371c1b3986f4c8da5ad..912c86487440a3d90fe2469f8197e29a3c690253 100644 --- a/ui/src/providers/LocalStorageProvider/index.tsx +++ b/ui/src/providers/LocalStorageProvider/index.tsx @@ -45,6 +45,7 @@ const defaultConfig: LocalConfig = { queryText: "", editorSplitterBasis: 350, resultsSplitterBasis: 350, + exampleQueriesVisited: false, } type ContextProps = { @@ -57,6 +58,7 @@ type ContextProps = { editorSplitterBasis: number resultsSplitterBasis: number updateSettings: (key: StoreKey, value: SettingsType) => void + exampleQueriesVisited: boolean } const defaultValues: ContextProps = { @@ -69,6 +71,7 @@ const defaultValues: ContextProps = { editorSplitterBasis: 350, resultsSplitterBasis: 350, updateSettings: (key: StoreKey, value: SettingsType) => undefined, + exampleQueriesVisited: false, } export const LocalStorageContext = createContext(defaultValues) @@ -113,6 +116,10 @@ export const LocalStorageProvider = ({ ), ) + const [exampleQueriesVisited, setExampleQueriesVisited] = useState( + getValue(StoreKey.EXAMPLE_QUERIES_VISITED) === "true", + ) + const updateSettings = (key: StoreKey, value: SettingsType) => { setValue(key, value.toString()) refreshSettings(key) @@ -130,6 +137,9 @@ export const LocalStorageProvider = ({ case StoreKey.EDITOR_LINE: setEditorLine(parseInteger(value, defaultConfig.editorLine)) break + case StoreKey.EXAMPLE_QUERIES_VISITED: + setExampleQueriesVisited(value === "true") + break case StoreKey.NOTIFICATION_ENABLED: setIsNotificationEnabled( parseBoolean(value, defaultConfig.isNotificationEnabled), @@ -168,6 +178,7 @@ export const LocalStorageProvider = ({ editorSplitterBasis, resultsSplitterBasis, updateSettings, + exampleQueriesVisited, }} > {children} diff --git a/ui/src/providers/LocalStorageProvider/types.ts b/ui/src/providers/LocalStorageProvider/types.ts index 9df57109a03589b957eea6ec5aecb2db33f45ffe..072745a2aadc5daafb7db52e459e6d374c14cdfc 100644 --- a/ui/src/providers/LocalStorageProvider/types.ts +++ b/ui/src/providers/LocalStorageProvider/types.ts @@ -33,4 +33,5 @@ export type LocalConfig = { queryText: string editorSplitterBasis: number resultsSplitterBasis: number + exampleQueriesVisited: boolean } diff --git a/ui/src/scenes/Editor/Menu/index.tsx b/ui/src/scenes/Editor/Menu/index.tsx index f4a4222c49de3fff3c2461f0aa30808659f3de9d..e8fdf6cc60ec8ed689d9d8dbd4911c37e35cedcf 100644 --- a/ui/src/scenes/Editor/Menu/index.tsx +++ b/ui/src/scenes/Editor/Menu/index.tsx @@ -78,9 +78,25 @@ const DocsearchInput = styled(Input)` white-space: nowrap; ` -const QueryPickerButton = styled(SecondaryButton)` +const QueryPickerButton = styled(SecondaryButton)<{ + firstTimeVisitor: boolean +}>` + position: relative; margin: 0 1rem; flex: 0 0 auto; + + ${({ firstTimeVisitor }) => + firstTimeVisitor && + `&:after { + border-radius: 50%; + content: ""; + background: #dc4949; + width: 8px; + height: 8px; + position: absolute; + top: -3px; + right: -3px; + }`} ` const MenuIcon = styled(_MenuIcon)` @@ -155,12 +171,19 @@ const Menu = () => { const running = useSelector(selectors.query.getRunning) const opened = useSelector(selectors.console.getSideMenuOpened) const { sm } = useScreenSize() - const { resultsSplitterBasis, updateSettings } = useLocalStorage() + const { + resultsSplitterBasis, + exampleQueriesVisited, + updateSettings, + } = useLocalStorage() const handleClick = useCallback(() => { dispatch(actions.query.toggleRunning()) }, [dispatch]) const handleToggle = useCallback((active) => { + if (!exampleQueriesVisited && active) { + updateSettings(StoreKey.EXAMPLE_QUERIES_VISITED, true) + } setPopperActive(active) }, []) const handleHidePicker = useCallback(() => { @@ -238,7 +261,7 @@ const Menu = () => { active={popperActive} onToggle={handleToggle} trigger={ - + Example queries diff --git a/ui/src/utils/localStorage/types.ts b/ui/src/utils/localStorage/types.ts index a2c55bcfeeb83b29b76340c185b6f4fdadb3d2c4..da3344e8ba1fe2aec6d8c86986cdd768cad70075 100644 --- a/ui/src/utils/localStorage/types.ts +++ b/ui/src/utils/localStorage/types.ts @@ -27,6 +27,7 @@ export enum StoreKey { QUERY_TEXT = "query.text", EDITOR_LINE = "editor.line", EDITOR_COL = "editor.col", + EXAMPLE_QUERIES_VISITED = "editor.exampleQueriesVisited", NOTIFICATION_ENABLED = "notification.enabled", NOTIFICATION_DELAY = "notification.delay", EDITOR_SPLITTER_BASIS = "splitter.editor.basis",