Omnibar: support dotcom site badge nodes

Author: fushar

client/dashboard/app/omnibar/omnibar.tsx

@@ -14,6 +14,7 @@ import { omnibarEvents } from './events';
 import { OmnibarHomeIcon } from './home';
 import { useHelpCenterPlugin } from './plugin-help-center';
 import { useNotificationsPlugin } from './plugin-notifications';
+import { buildSiteBadgeNode } from './plugin-site-badges';
 import { useStatsSparklinePlugin } from './plugin-stats-sparkline';
 import { buildWpcomAccountNode } from './plugin-wpcom-account';
 import type { AppConfig } from '../context';
@@ -22,25 +23,16 @@ import type { OmnibarNodeBuilders } from '@automattic/omnibar';
 
 const onClickResponsiveMenu = () => omnibarEvents.mobileMenu.emit();
 
-const UNSUPPORTED_DOTCOM_NODE_IDS = new Set( [
-	'site-plan',
-	'site-plan-badge',
-	'site-status-badge',
-] );
-
 const DOTCOM_NODE_BUILDERS: OmnibarNodeBuilders = {
 	'my-wpcom-account': buildWpcomAccountNode,
+	'site-plan-badge': buildSiteBadgeNode,
+	'site-status-badge': buildSiteBadgeNode,
 };
 
 function removeUnsupportedNodes( nodes: AdminBarNode[], supports: AppConfig[ 'supports' ] ) {
-	return nodes.filter( ( node ) => {
-		if ( UNSUPPORTED_DOTCOM_NODE_IDS.has( node.id ) ) {
-			return false;
-		}
-		// The palette is only mounted where the app supports it, so elsewhere the
-		// admin bar's button would open nothing.
-		return node.id !== 'command-palette' || supports.commandPalette;
-	} );
+	// The palette is only mounted where the app supports it, so elsewhere the
+	// admin bar's button would open nothing.
+	return nodes.filter( ( node ) => node.id !== 'command-palette' || supports.commandPalette );
 }
 
 export default function OmnibarContainer( { user }: { user?: User } ) {

client/dashboard/app/omnibar/plugin-site-badges.scss

@@ -0,0 +1,26 @@
+.omnibar__popover {
+	[role='menuitem']:has( .omnibar__site-badge ),
+	.omnibar__menu-static-item:has( .omnibar__site-badge ) {
+		min-width: 260px;
+	}
+
+	.omnibar__site-badge {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		width: 100%;
+	}
+
+	.omnibar__site-badge-value {
+		box-sizing: border-box;
+		flex-shrink: 0;
+		padding-inline: 8px;
+		border-radius: 2px;
+		background-color: rgba( 255, 255, 255, 0.15 );
+		color: var( --omnibar-text-color );
+		font-size: 12px;
+		line-height: 20px;
+	}
+}

client/dashboard/app/omnibar/plugin-site-badges.tsx

@@ -0,0 +1,28 @@
+import type { AdminBarNode, OmnibarNode } from '@automattic/omnibar';
+
+import './plugin-site-badges.scss';
+
+export function buildSiteBadgeNode( adminBarNode: AdminBarNode ): Partial< OmnibarNode > {
+	const doc = new DOMParser().parseFromString( adminBarNode.title || '', 'text/html' );
+	const info = doc.querySelector( '.wp-admin-bar__site-info' );
+	const label = info?.querySelector( '.wp-admin-bar__site-info-label' )?.textContent?.trim();
+	const value = info?.querySelector( '.wp-admin-bar__info-badges' )?.textContent?.trim();
+
+	if ( ! value ) {
+		return {};
+	}
+
+	const href = info?.getAttribute( 'href' ) ?? undefined;
+
+	return {
+		title: undefined,
+		href,
+		interactive: !! href,
+		render: () => (
+			<span className="omnibar__site-badge">
+				<span className="omnibar__site-badge-label">{ label }</span>
+				<span className="omnibar__site-badge-value">{ value }</span>
+			</span>
+		),
+	};
+}

packages/omnibar/src/components/omnibar-menu.scss

@@ -1,3 +1,5 @@
+@import './variables';
+
 .omnibar__popover {
 	// All colors used by the Menu's internal Emotion styles read from these
 	// CSS custom properties (see node_modules/@wordpress/components/src/menu/styles.ts).
@@ -28,9 +30,28 @@
 		padding-inline: 10px;
 	}
 
+	.omnibar__menu-static-item {
+		box-sizing: border-box;
+		grid-column: 1 / -1;
+		display: grid;
+		grid-template-columns: minmax( 0, max-content ) 1fr;
+		align-items: center;
+		min-height: 32px;
+		padding-block: 4px;
+		padding-inline: 10px;
+		color: var( --omnibar-text-color );
+		font-size: $omnibar-font-size;
+		line-height: 20px;
+
+		> * {
+			grid-column: 2;
+		}
+	}
+
 	.omnibar__menu-group.is-secondary {
 		grid-column: 1 / -1;
 		margin-block-start: 8px;
+		padding-block: 4px;
 		background-color: var( --omnibar-secondary-group-background );
 
 		&:first-child {

packages/omnibar/src/components/omnibar-menu.tsx

@@ -27,6 +27,14 @@ function OmnibarMenuItem( { node }: { node: OmnibarNode } ) {
 		);
 	}
 
+	if ( node.interactive === false ) {
+		return (
+			<div className="omnibar__menu-static-item">
+				<OmnibarNodeContent node={ node } />
+			</div>
+		);
+	}
+
 	return (
 		<Menu.Item render={ node.href ? <a href={ node.href } /> : undefined }>
 			<OmnibarNodeContent node={ node } />

packages/omnibar/src/types/omnibar.ts

@@ -9,6 +9,7 @@ export interface OmnibarNode {
 	variant?: 'secondary';
 	href?: string;
 	onClick?: () => void;
+	interactive?: boolean;
 	meta?: SiteActionNodeMeta & UserInfoNodeMeta;
 	render?: ( node: OmnibarNode ) => React.ReactNode;
 	children?: OmnibarNode[];