chore: remove image zoom from News panel

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 = () => {
             <Warnings />
             <Root>
               <Main>
-                <ImageZoom />
                 <Page>
                   <Console />
                 </Page>

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<ReturnType<typeof setTimeout>>()
-  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)
-                              }
-                            },
-                          }
-                        : {})}
                     />
                   )}
 

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;

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,

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

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,

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