feat(ui): add red dot indicator on "Example Queries" button (#1993)

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<ContextProps>(defaultValues)
@@ -113,6 +116,10 @@ export const LocalStorageProvider = ({
     ),
   )
 
+  const [exampleQueriesVisited, setExampleQueriesVisited] = useState<boolean>(
+    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}

ui/src/providers/LocalStorageProvider/types.ts

@@ -33,4 +33,5 @@ export type LocalConfig = {
   queryText: string
   editorSplitterBasis: number
   resultsSplitterBasis: number
+  exampleQueriesVisited: boolean
 }

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={
-            <QueryPickerButton onClick={handleClick}>
+            <QueryPickerButton firstTimeVisitor={!exampleQueriesVisited}>
               <Add size="18px" />
               <span>Example queries</span>
             </QueryPickerButton>

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",