diff --git a/e2e/questdb b/e2e/questdb index cc1e5555b..8bb20f7ce 160000 --- a/e2e/questdb +++ b/e2e/questdb @@ -1 +1 @@ -Subproject commit cc1e5555bab53e65ff28b1c0948e44496db51d12 +Subproject commit 8bb20f7ce06a65a7c846816cb75458929ad7cdc2 diff --git a/src/scenes/Layout/index.tsx b/src/scenes/Layout/index.tsx index 14967b92e..0fb3d77dd 100644 --- a/src/scenes/Layout/index.tsx +++ b/src/scenes/Layout/index.tsx @@ -37,7 +37,6 @@ import { } from "../../providers" import { Help } from "./help" import { Warnings } from "./warning" -import { ImageZoom } from "../News/image-zoom" import { AIChatButton } from "./AIChatButton" import { TableDetailsButton } from "./TableDetailsButton" import { TableDetailsDrawer } from "../Schema/TableDetailsDrawer" @@ -106,7 +105,6 @@ const Layout = () => {
- diff --git a/src/scenes/News/image-zoom.tsx b/src/scenes/News/image-zoom.tsx deleted file mode 100644 index 782015352..000000000 --- a/src/scenes/News/image-zoom.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React, { useEffect, useRef, useState } from "react" -import styled from "styled-components" -import { useSelector, useDispatch } from "react-redux" -import { Box } from "../../components" -import { selectors, actions } from "../../store" -import { Thumbnail } from "./thumbnail" - -const Root = styled(Box).attrs({ align: "center", justifyContent: "center" })<{ - visible: boolean -}>` - width: 100%; - height: 100%; - position: absolute; - z-index: 1000; - opacity: ${({ visible }) => (visible ? 1 : 0)}; - pointer-events: ${({ visible }) => (visible ? "auto" : "none")}; -` - -const Overlay = styled.div<{ visible: boolean }>` - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: rgba(33, 34, 44, 0.9); - opacity: ${({ visible }) => (visible ? 1 : 0)}; - pointer-events: ${({ visible }) => (visible ? "auto" : "none")}; - transition: opacity 0.2s ease-in-out; - cursor: pointer; -` - -const Wrapper = styled.div` - z-index: 1001; - cursor: pointer; - - img { - border: 1px solid ${({ theme }) => theme.color.offWhite}; - border-radius: ${({ theme }) => theme.borderRadius}; - } -` - -export const ImageZoom = () => { - const imageToZoom = useSelector(selectors.console.getImageToZoom) - const dispatch = useDispatch() - const rootRef = useRef(null) - const [rootWidth, setRootWidth] = useState(0) - const [rootHeight, setRootHeight] = useState(0) - const activeSidebar = useSelector(selectors.console.getActiveSidebar) - - const handleEsc = (event: KeyboardEvent) => { - if (event.key === "Escape") { - dispatch(actions.console.setImageToZoom(undefined)) - } - } - - useEffect(() => { - if (rootRef.current) { - setRootWidth(rootRef.current.offsetWidth) - setRootHeight(rootRef.current.offsetHeight) - } - }, [imageToZoom]) - - useEffect(() => { - if (activeSidebar?.type === "news") { - document.addEventListener("keydown", handleEsc) - } else { - document.removeEventListener("keydown", handleEsc) - } - }, [activeSidebar]) - - if (activeSidebar?.type !== "news") { - return null - } - - return ( - - dispatch(actions.console.setImageToZoom(undefined))} - /> - {imageToZoom && ( - dispatch(actions.console.setImageToZoom(undefined))} - > - - - )} - - ) -} diff --git a/src/scenes/News/index.tsx b/src/scenes/News/index.tsx index 0997fc182..2cd7bacdb 100644 --- a/src/scenes/News/index.tsx +++ b/src/scenes/News/index.tsx @@ -6,7 +6,7 @@ import { PrimaryToggleButton, } from "../../components" import styled from "styled-components" -import React, { useEffect, useState, useContext, useRef } from "react" +import React, { useEffect, useState, useContext } from "react" import { QuestContext } from "../../providers" import { NewsItem } from "../../utils" import { useDispatch, useSelector } from "react-redux" @@ -93,11 +93,6 @@ const News = () => { // This boolean is to animate the bell icon and display a bullet indicator const [hasUnreadNews, setHasUnreadNews] = useState(false) const activeSidebar = useSelector(selectors.console.getActiveSidebar) - const imageToZoom = useSelector(selectors.console.getImageToZoom) - - const hoverTimeoutRef = useRef>() - const imageToZoomRef = useRef(imageToZoom) - imageToZoomRef.current = imageToZoom const getEnterpriseNews = async () => { setIsLoading(true) @@ -249,42 +244,6 @@ const News = () => { width={newsItem.thumbnail[0].thumbnails.large.width} height={newsItem.thumbnail[0].thumbnails.large.height} fadeIn - {...(newsItem && newsItem.thumbnail - ? { - onMouseOver: () => { - if (newsItem.thumbnail) { - hoverTimeoutRef.current = setTimeout(() => { - if (newsItem && newsItem.thumbnail) { - dispatch( - actions.console.setImageToZoom({ - src: newsItem.thumbnail[0].thumbnails - .large.url, - width: - newsItem.thumbnail[0].thumbnails.large - .width, - height: - newsItem.thumbnail[0].thumbnails.large - .height, - alt: newsItem.title, - }), - ) - } - }, 500) - } - }, - onMouseOut: () => { - clearTimeout(hoverTimeoutRef.current) - // Only dismiss if zoom isn't visible (overlay intercepts mouse when visible) - if (!imageToZoomRef.current) { - setTimeout(() => { - dispatch( - actions.console.setImageToZoom(undefined), - ) - }, 250) - } - }, - } - : {})} /> )} diff --git a/src/scenes/News/thumbnail.tsx b/src/scenes/News/thumbnail.tsx index 6f9ba7aa3..5573a3a6f 100644 --- a/src/scenes/News/thumbnail.tsx +++ b/src/scenes/News/thumbnail.tsx @@ -11,7 +11,7 @@ const Root = styled.div` border-radius: ${({ theme }) => theme.borderRadius}; box-shadow: 0 7px 30px -10px ${({ theme }) => theme.color.black}; overflow: hidden; - background: ${({ theme }) => theme.color.backgroundLighter}; + background: ${({ theme }) => theme.color.backgroundDarker}; svg { position: absolute; diff --git a/src/store/Console/actions.ts b/src/store/Console/actions.ts index 094882289..377e1fb0b 100644 --- a/src/store/Console/actions.ts +++ b/src/store/Console/actions.ts @@ -21,24 +21,13 @@ * limitations under the License. * ******************************************************************************/ -import { - ConsoleAction, - ConsoleAT, - ImageToZoom, - Sidebar, - BottomPanel, -} from "./types" +import { ConsoleAction, ConsoleAT, Sidebar, BottomPanel } from "./types" const setActiveBottomPanel = (panel: BottomPanel): ConsoleAction => ({ payload: panel, type: ConsoleAT.SET_ACTIVE_BOTTOM_PANEL, }) -const setImageToZoom = (image?: ImageToZoom): ConsoleAction => ({ - payload: image, - type: ConsoleAT.SET_IMAGE_TO_ZOOM, -}) - const toggleSideMenu = (): ConsoleAction => ({ type: ConsoleAT.TOGGLE_SIDE_MENU, }) @@ -67,7 +56,6 @@ const openSidebar = (): ConsoleAction => ({ export default { toggleSideMenu, setActiveBottomPanel, - setImageToZoom, pushSidebarHistory, goBackInSidebar, goForwardInSidebar, diff --git a/src/store/Console/reducers.ts b/src/store/Console/reducers.ts index e3349d064..ba90fc868 100644 --- a/src/store/Console/reducers.ts +++ b/src/store/Console/reducers.ts @@ -29,7 +29,6 @@ const MAX_HISTORY_SIZE = 20 export const initialState: ConsoleStateShape = { sideMenuOpened: false, activeBottomPanel: "zeroState", - imageToZoom: undefined, sidebarHistory: [], sidebarHistoryPosition: -1, sidebarVisible: false, @@ -54,13 +53,6 @@ const _console = ( } } - case ConsoleAT.SET_IMAGE_TO_ZOOM: { - return { - ...state, - imageToZoom: action.payload, - } - } - case ConsoleAT.PUSH_SIDEBAR_HISTORY: { const newSidebar = action.payload const { sidebarHistory, sidebarHistoryPosition, sidebarVisible } = state diff --git a/src/store/Console/selectors.ts b/src/store/Console/selectors.ts index d75eca0ed..508deecf2 100644 --- a/src/store/Console/selectors.ts +++ b/src/store/Console/selectors.ts @@ -21,13 +21,7 @@ * limitations under the License. * ******************************************************************************/ -import { - StoreShape, - Sidebar, - BottomPanel, - ImageToZoom, - TableDetailsTarget, -} from "types" +import { StoreShape, Sidebar, BottomPanel, TableDetailsTarget } from "types" const getSideMenuOpened: (store: StoreShape) => boolean = (store) => store.console.sideMenuOpened @@ -52,10 +46,6 @@ const getActiveSidebar: (store: StoreShape) => Sidebar = (store) => { const getActiveBottomPanel: (store: StoreShape) => BottomPanel = (store) => store.console.activeBottomPanel -const getImageToZoom: (store: StoreShape) => ImageToZoom | undefined = ( - store, -) => store.console.imageToZoom - const getTableDetailsTarget: (store: StoreShape) => TableDetailsTarget = ( store, ) => { @@ -90,7 +80,6 @@ export default { getSideMenuOpened, getActiveSidebar, getActiveBottomPanel, - getImageToZoom, getTableDetailsTarget, canGoBackInSidebar, canGoForwardInSidebar, diff --git a/src/store/Console/types.ts b/src/store/Console/types.ts index ab05bfcd0..17cfd82a0 100644 --- a/src/store/Console/types.ts +++ b/src/store/Console/types.ts @@ -36,17 +36,9 @@ export type Sidebar = { export type BottomPanel = "result" | "zeroState" | "import" -export type ImageToZoom = { - src: string - alt: string - width: number - height: number -} - export type ConsoleStateShape = Readonly<{ sideMenuOpened: boolean activeBottomPanel: BottomPanel - imageToZoom: ImageToZoom | undefined sidebarHistory: Sidebar[] sidebarHistoryPosition: number sidebarVisible: boolean @@ -55,7 +47,6 @@ export type ConsoleStateShape = Readonly<{ export enum ConsoleAT { TOGGLE_SIDE_MENU = "CONSOLE/TOGGLE_SIDE_MENU", SET_ACTIVE_BOTTOM_PANEL = "CONSOLE/SET_ACTIVE_BOTTOM_PANEL", - SET_IMAGE_TO_ZOOM = "CONSOLE/SET_IMAGE_TO_ZOOM", PUSH_SIDEBAR_HISTORY = "CONSOLE/PUSH_SIDEBAR_HISTORY", GO_BACK_IN_SIDEBAR = "CONSOLE/GO_BACK_IN_SIDEBAR", GO_FORWARD_IN_SIDEBAR = "CONSOLE/GO_FORWARD_IN_SIDEBAR", @@ -72,11 +63,6 @@ type SetActiveBottomPanelAction = Readonly<{ type: ConsoleAT.SET_ACTIVE_BOTTOM_PANEL }> -type SetImageToZoomAction = Readonly<{ - payload?: ImageToZoom - type: ConsoleAT.SET_IMAGE_TO_ZOOM -}> - type PushSidebarHistoryAction = Readonly<{ payload: Sidebar type: ConsoleAT.PUSH_SIDEBAR_HISTORY @@ -101,7 +87,6 @@ type OpenSidebarAction = Readonly<{ export type ConsoleAction = | ToggleSideMenuAction | SetActiveBottomPanelAction - | SetImageToZoomAction | PushSidebarHistoryAction | GoBackInSidebarAction | GoForwardInSidebarAction