diff --git a/packages/web-console/src/components/PopperToggle/index.tsx b/packages/web-console/src/components/PopperToggle/index.tsx index 5b7866962..bbbc53595 100644 --- a/packages/web-console/src/components/PopperToggle/index.tsx +++ b/packages/web-console/src/components/PopperToggle/index.tsx @@ -43,7 +43,7 @@ type Props = Readonly<{ placement: Placement modifiers: Options["modifiers"] onToggle?: (_active: boolean) => void - trigger: ReactNode + trigger?: ReactNode }> export const PopperToggle = ({ diff --git a/packages/web-console/src/scenes/Editor/Menu/index.tsx b/packages/web-console/src/scenes/Editor/Menu/index.tsx index c71fc8473..ba0c23fd6 100644 --- a/packages/web-console/src/scenes/Editor/Menu/index.tsx +++ b/packages/web-console/src/scenes/Editor/Menu/index.tsx @@ -35,9 +35,9 @@ import { Notification2, Play, Stop, + Question, } from "styled-icons/remix-line" import { Menu as _MenuIcon } from "styled-icons/remix-fill" -import { HelpCircle } from "styled-icons/boxicons-regular" import { Slack } from "styled-icons/boxicons-logos" import { @@ -50,6 +50,7 @@ import { PopperToggle, SecondaryButton, SuccessButton, + Text, toast, Tooltip, TransitionDuration, @@ -57,7 +58,7 @@ import { useKeyPress, useScreenSize, } from "../../../components" -import { FeedbackDialog } from "@questdb/react-components" +import { Button, DropdownMenu, FeedbackDialog } from "@questdb/react-components" import { actions, selectors } from "../../../store" import { color } from "../../../utils" @@ -138,35 +139,31 @@ const SideMenuMenuButton = styled(TransparentButton)` } ` -const MenuButton = styled(SecondaryButton)` - margin-right: 1rem; +const MenuItems = styled.div` + display: grid; + gap: 1rem; + grid-auto-flow: column; + align-items: center; +` + +const DropdownMenuItem = styled(DropdownMenu.Item)` + color: ${({ theme }) => theme.color.foreground}; ` const MenuLink: React.FunctionComponent<{ href: string - icon: React.ReactNode - tooltipText: string -}> = ({ href, icon, tooltipText }) => { - const Trigger = ( - - - {icon} - - - ) - - return ( - - {tooltipText} - - ) -} + text: string +}> = ({ href, text }) => ( + + {text} + +) const Menu = () => { const dispatch = useDispatch() @@ -175,6 +172,7 @@ const Menu = () => { const [shortcutsPopperActive, setShortcutsPopperActive] = useState() const [isFeedbackSubmitting, setIsFeedbackSubmitting] = useState(false) + const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false) const escPress = useKeyPress("Escape") const { savedQueries } = useSelector(selectors.console.getConfig) const running = useSelector(selectors.query.getRunning) @@ -265,86 +263,100 @@ const Menu = () => { - ( - setOpen(true)}> - - {!sm && Feedback} - - )} - onSubmit={async ({ - email, - message, - }: { - email: string - message: string - }) => { - setIsFeedbackSubmitting(true) - try { - await quest.sendFeedback({ - email, - message, - telemetryConfig, - }) - toast.success( - "Thank you for your feedback! Our team will review it shortly.", - ) - } catch (err) { - toast.error("Something went wrong. Please try again later.") - throw err - } finally { - setIsFeedbackSubmitting(false) + + + + + + + + + e.preventDefault()}> + + ( + setOpen(true)}> + Feedback + + )} + onSubmit={async ({ + email, + message, + }: { + email: string + message: string + }) => { + setIsFeedbackSubmitting(true) + try { + await quest.sendFeedback({ + email, + message, + telemetryConfig, + }) + toast.success( + "Thank you for your feedback! Our team will review it shortly.", + ) + } catch (err) { + toast.error("Something went wrong. Please try again later.") + throw err + } finally { + setIsFeedbackSubmitting(false) + } + }} + /> + + + + + + + + + + handleShortcutsToggle(true)}> + + Shortcuts + + + + + dispatch(actions.console.setActivePanel("news"))} + > + + } - }} - /> - - } - tooltipText="Questions? Join our Slack" - /> - - } - tooltipText="Go to Web Console help" - /> + placement="bottom" + tooltip="QuestDB News" + /> + - - {!sm && Shortcuts} - - } - placement="bottom" + trigger={
} > - - - dispatch(actions.console.setActivePanel("news"))} - > - - - } - placement="bottom" - tooltip="QuestDB News" - /> - {sm && ( theme.color.selection}; background: ${({ theme }) => theme.color.black40}; width: 100%;