add preview badge

Author: nvs119

packages/compass-sidebar/src/components/multiple-connections/header/sidebar-header.tsx

@@ -5,13 +5,16 @@ import {
   css,
   type ItemAction,
   ItemActionControls,
+  Badge,
+  BadgeVariant,
 } from '@mongodb-js/compass-components';
 
 const sidebarHeaderStyles = css({
   paddingLeft: spacing[400],
   paddingRight: spacing[400],
   display: 'flex',
   justifyContent: 'space-between',
+  alignItems: 'center',
 });
 
 const sidebarHeaderTextStyles = css({
@@ -41,6 +44,11 @@ export function SidebarHeader({
       <Subtitle className={sidebarHeaderTextStyles}>
         {isCompassWeb ? 'Data Explorer' : 'Compass'}
       </Subtitle>
+      {isCompassWeb && (
+        <Badge variant={BadgeVariant.Blue} data-testid="sidebar-header-badge">
+          Preview
+        </Badge>
+      )}
       {!isCompassWeb && (
         <ItemActionControls<Action>
           onAction={onAction}