feat(sidebar): show header for Data Explorer COMPASS-8904 (#6711)

* (feat)sidebar: show header for Data Explorer COMPASS-8904

* add preview badge

* styling

Author: nvs119

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

@@ -5,20 +5,28 @@ 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({
   lineHeight: '32px',
   fontWeight: 600,
 });
 
+const badgeStyles = css({
+  verticalAlign: 'middle',
+  marginLeft: spacing[100],
+});
+
 type Action = 'open-compass-settings';
 
 const actions: ItemAction<Action>[] = [
@@ -31,18 +39,33 @@ const actions: ItemAction<Action>[] = [
 
 export function SidebarHeader({
   onAction,
+  isCompassWeb,
 }: {
   onAction(actionName: Action): void;
+  isCompassWeb?: boolean;
 }): React.ReactElement {
   return (
     <div className={sidebarHeaderStyles} data-testid="sidebar-header">
-      <Subtitle className={sidebarHeaderTextStyles}>Compass</Subtitle>
-      <ItemActionControls<Action>
-        onAction={onAction}
-        iconSize="small"
-        actions={actions}
-        data-testid="connections-sidebar-title-actions"
-      ></ItemActionControls>
+      <Subtitle className={sidebarHeaderTextStyles}>
+        {isCompassWeb ? 'Data Explorer' : 'Compass'}
+        {isCompassWeb && (
+          <Badge
+            variant={BadgeVariant.Blue}
+            className={badgeStyles}
+            data-testid="sidebar-header-badge"
+          >
+            Preview
+          </Badge>
+        )}
+      </Subtitle>
+      {!isCompassWeb && (
+        <ItemActionControls<Action>
+          onAction={onAction}
+          iconSize="small"
+          actions={actions}
+          data-testid="connections-sidebar-title-actions"
+        ></ItemActionControls>
+      )}
     </div>
   );
 }

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

@@ -50,10 +50,10 @@ type MultipleConnectionSidebarProps = {
   activeWorkspace: WorkspaceTab | null;
   onConnectionCsfleModeChanged(connectionId: string, isEnabled: boolean): void;
   onSidebarAction(action: string, ...rest: any[]): void;
-  showSidebarHeader?: boolean;
   onOpenConnectViaModal?: (
     atlasMetadata: ConnectionInfo['atlasMetadata']
   ) => void;
+  isCompassWeb?: boolean;
 };
 
 const sidebarStyles = css({
@@ -92,8 +92,8 @@ export function MultipleConnectionSidebar({
   activeWorkspace,
   onSidebarAction,
   onConnectionCsfleModeChanged,
-  showSidebarHeader = true,
   onOpenConnectViaModal,
+  isCompassWeb,
 }: MultipleConnectionSidebarProps) {
   const [csfleModalConnectionId, setCsfleModalConnectionId] = useState<
     string | undefined
@@ -167,13 +167,14 @@ export function MultipleConnectionSidebar({
   return (
     <ResizableSidebar data-testid="navigation-sidebar" useNewTheme={true}>
       <aside className={sidebarStyles}>
-        {showSidebarHeader && (
-          <>
-            <SidebarHeader onAction={onSidebarAction} />
-            <Navigation currentLocation={activeWorkspace?.type ?? null} />
-            <HorizontalRule />
-          </>
-        )}
+        <>
+          <SidebarHeader
+            onAction={onSidebarAction}
+            isCompassWeb={isCompassWeb}
+          />
+          <Navigation currentLocation={activeWorkspace?.type ?? null} />
+          <HorizontalRule />
+        </>
         <ConnectionsNavigation
           connectionsWithStatus={connectionsWithStatus}
           activeWorkspace={activeWorkspace}

packages/compass-sidebar/src/plugin.tsx

@@ -14,15 +14,15 @@ const errorBoundaryStyles = css({
 });
 
 export interface SidebarPluginProps {
-  showSidebarHeader?: boolean;
   onOpenConnectViaModal?: (
     atlasMetadata: ConnectionInfo['atlasMetadata']
   ) => void;
+  isCompassWeb?: boolean;
 }
 
 const SidebarPlugin: React.FunctionComponent<SidebarPluginProps> = ({
-  showSidebarHeader,
   onOpenConnectViaModal,
+  isCompassWeb,
 }) => {
   const activeWorkspace = useActiveWorkspace();
   const { log, mongoLogId } = useLogger('COMPASS-SIDEBAR-UI');
@@ -41,9 +41,9 @@ const SidebarPlugin: React.FunctionComponent<SidebarPluginProps> = ({
       }}
     >
       <MultipleConnectionSidebar
-        showSidebarHeader={showSidebarHeader}
         activeWorkspace={activeWorkspace}
         onOpenConnectViaModal={onOpenConnectViaModal}
+        isCompassWeb={isCompassWeb}
       />
     </ErrorBoundary>
   );

packages/compass-web/src/entrypoint.tsx

@@ -202,8 +202,8 @@ function CompassWorkspace({
             renderSidebar={() => {
               return (
                 <CompassSidebarPlugin
-                  showSidebarHeader={false}
                   onOpenConnectViaModal={onOpenConnectViaModal}
+                  isCompassWeb={true}
                 ></CompassSidebarPlugin>
               );
             }}