From 3c68ef95be70207ef778f3a098f54a10c67f8920 Mon Sep 17 00:00:00 2001 From: Ashar Fuadi Date: Thu, 9 Apr 2026 13:21:53 +0700 Subject: [PATCH] MSD: refactor interim omnibar: extract store and events --- client/dashboard/app/boot.tsx | 2 +- .../dashboard/app/interim-omnibar/index.tsx | 2 +- .../interim-omnibar-container.tsx | 2 +- .../app/interim-omnibar/interim-omnibar.tsx | 20 ++----------------- .../{click-handlers.ts => omnibar-events.ts} | 0 .../app/interim-omnibar/omnibar-store.ts | 18 +++++++++++++++++ client/dashboard/app/notifications/index.tsx | 2 +- client/dashboard/app/root/index.tsx | 2 +- 8 files changed, 25 insertions(+), 23 deletions(-) rename client/dashboard/app/interim-omnibar/{click-handlers.ts => omnibar-events.ts} (100%) create mode 100644 client/dashboard/app/interim-omnibar/omnibar-store.ts diff --git a/client/dashboard/app/boot.tsx b/client/dashboard/app/boot.tsx index 79f702fe750b..5afaa870b701 100644 --- a/client/dashboard/app/boot.tsx +++ b/client/dashboard/app/boot.tsx @@ -13,7 +13,7 @@ import wpcom from 'calypso/lib/wp'; import isDashboardEnv from '../utils/is-dashboard-env'; import { handleOAuthCallback } from './auth/oauth-callback'; import { loadPreferencesHelper } from './dev-tools/preferences'; -import { omnibarEvents } from './interim-omnibar/click-handlers'; +import { omnibarEvents } from './interim-omnibar/omnibar-events'; import Layout from './layout'; import limitTotalSnackbars from './snackbars/limit-total-snackbars'; import type { AppConfig } from './context'; diff --git a/client/dashboard/app/interim-omnibar/index.tsx b/client/dashboard/app/interim-omnibar/index.tsx index cace0025e0b5..cfb64aa09a9c 100644 --- a/client/dashboard/app/interim-omnibar/index.tsx +++ b/client/dashboard/app/interim-omnibar/index.tsx @@ -1,5 +1,5 @@ import { hydrateRoot } from 'react-dom/client'; -import type { OmnibarEvents } from './click-handlers'; +import type { OmnibarEvents } from './omnibar-events'; export default async function loadOmnibar( events: OmnibarEvents ) { const container = document.getElementById( 'wpcom-omnibar' ); diff --git a/client/dashboard/app/interim-omnibar/interim-omnibar-container.tsx b/client/dashboard/app/interim-omnibar/interim-omnibar-container.tsx index a58b6a39db6b..f20151f80012 100644 --- a/client/dashboard/app/interim-omnibar/interim-omnibar-container.tsx +++ b/client/dashboard/app/interim-omnibar/interim-omnibar-container.tsx @@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'; import { useCallback, useEffect, useState } from 'react'; import { AUTH_QUERY_KEY, initializeCurrentUser } from '../auth'; import { InterimOmnibar } from './interim-omnibar'; -import type { OmnibarEvents } from './click-handlers'; +import type { OmnibarEvents } from './omnibar-events'; import type { Site, User } from '@automattic/api-core'; interface InterimOmnibarContainerProps { diff --git a/client/dashboard/app/interim-omnibar/interim-omnibar.tsx b/client/dashboard/app/interim-omnibar/interim-omnibar.tsx index b3dc98514af9..60c1539367ba 100644 --- a/client/dashboard/app/interim-omnibar/interim-omnibar.tsx +++ b/client/dashboard/app/interim-omnibar/interim-omnibar.tsx @@ -7,28 +7,12 @@ import { MasterbarLoggedIn } from 'calypso/layout/masterbar/logged-in'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { getSiteDisplayName } from '../../utils/site-name'; import { logout } from '../auth'; -import { omnibarEvents } from './click-handlers'; +import { omnibarEvents } from './omnibar-events'; +import { createOmnibarStore } from './omnibar-store'; import type { User, Site } from '@automattic/api-core'; const noop = () => {}; -type StoreType = Parameters< typeof ReduxProvider >[ 0 ][ 'store' ]; - -// Fake Redux store so child components using connect() (e.g. Notifications) don't crash. -// Intercepts specific actions so the dashboard can handle them. -function createOmnibarStore( onToggleNotifications?: () => void ): StoreType { - return { - getState: () => ( { ui: { section: false, isNotificationsOpen: false } } ), - dispatch: ( action: { type: string } ) => { - if ( action.type === 'NOTIFICATIONS_PANEL_TOGGLE' ) { - onToggleNotifications?.(); - } - return action; - }, - subscribe: () => () => {}, - } as unknown as StoreType; -} - // Separate query client for the legacy masterbar so its internal queries // (e.g. useGetDomainsQuery in MasterbarLaunchButton) don't pollute the Dashboard cache. const omnibarQueryClient = new QueryClient(); diff --git a/client/dashboard/app/interim-omnibar/click-handlers.ts b/client/dashboard/app/interim-omnibar/omnibar-events.ts similarity index 100% rename from client/dashboard/app/interim-omnibar/click-handlers.ts rename to client/dashboard/app/interim-omnibar/omnibar-events.ts diff --git a/client/dashboard/app/interim-omnibar/omnibar-store.ts b/client/dashboard/app/interim-omnibar/omnibar-store.ts new file mode 100644 index 000000000000..5a2a05bc6233 --- /dev/null +++ b/client/dashboard/app/interim-omnibar/omnibar-store.ts @@ -0,0 +1,18 @@ +import { Provider as ReduxProvider } from 'react-redux'; + +type StoreType = Parameters< typeof ReduxProvider >[ 0 ][ 'store' ]; + +// Fake Redux store so child components using connect() (e.g. Notifications) don't crash. +// Intercepts specific actions so the dashboard can handle them. +export function createOmnibarStore( onToggleNotifications?: () => void ): StoreType { + return { + getState: () => ( { ui: { section: false, isNotificationsOpen: false } } ), + dispatch: ( action: { type: string } ) => { + if ( action.type === 'NOTIFICATIONS_PANEL_TOGGLE' ) { + onToggleNotifications?.(); + } + return action; + }, + subscribe: () => () => {}, + } as unknown as StoreType; +} diff --git a/client/dashboard/app/notifications/index.tsx b/client/dashboard/app/notifications/index.tsx index f95c4c796e8b..a6583ac2b4ad 100644 --- a/client/dashboard/app/notifications/index.tsx +++ b/client/dashboard/app/notifications/index.tsx @@ -9,7 +9,7 @@ import { Suspense, lazy, useCallback, useEffect, useState } from 'react'; import wpcom from 'calypso/lib/wp'; import { useAuth } from '../auth'; import { useHelpCenter } from '../help-center'; -import { useOmnibarEvent } from '../interim-omnibar/click-handlers'; +import { useOmnibarEvent } from '../interim-omnibar/omnibar-events'; import { useLocale } from '../locale'; import './style.scss'; diff --git a/client/dashboard/app/root/index.tsx b/client/dashboard/app/root/index.tsx index edb5d7d0cf4e..31af39823629 100644 --- a/client/dashboard/app/root/index.tsx +++ b/client/dashboard/app/root/index.tsx @@ -18,7 +18,7 @@ import { bumpStat } from '../analytics'; import CommandPalette from '../command-palette'; import { useAppContext } from '../context'; import Header from '../header'; -import { useOmnibarEvent } from '../interim-omnibar/click-handlers'; +import { useOmnibarEvent } from '../interim-omnibar/omnibar-events'; import OmnibarHelpCenter from '../interim-omnibar/omnibar-help-center'; import { NavigationBlockerRegistry } from '../navigation-blocker'; import Notifications from '../notifications';