diff --git a/packages/compass-welcome/src/components/connection-list.tsx b/packages/compass-welcome/src/components/connection-list.tsx new file mode 100644 index 00000000000..ed5b3db9c66 --- /dev/null +++ b/packages/compass-welcome/src/components/connection-list.tsx @@ -0,0 +1,114 @@ +import React from 'react'; +import { + Icon, + SpinLoader, + Description, + spacing, + css, + palette, + keyframes, +} from '@mongodb-js/compass-components'; +import { + useConnectionIds, + useConnectionInfoForId, + useConnectionForId, +} from '@mongodb-js/compass-connections/provider'; + +/** + * Returns a list of connection ids for connections that are in an active state + * (connecting, connected, or failed). This is useful for components that need + * to show activity status without subscribing to the full connection state. + */ +export function useActiveConnectionIds() { + return useConnectionIds( + (connection) => + connection.status === 'connecting' || + connection.status === 'connected' || + connection.status === 'failed' + ); +} + +const connectionListStyles = css({ + marginTop: spacing[400], + listStyle: 'none', + padding: 0, + // Save space to avoid jumping + // items are about: spacing[200] (margin) + ~24px (icon/text height) + minHeight: `${spacing[200] * 3 + 72}px`, +}); + +const fadeInFromAbove = keyframes({ + '0%': { + opacity: 0, + transform: `translateY(-${spacing[100]}px)`, + }, + '100%': { + opacity: 1, + transform: 'translateY(0)', + }, +}); + +const connectionItemStyles = css({ + marginBottom: spacing[200], + display: 'flex', + alignItems: 'center', + gap: spacing[200], + animation: `${fadeInFromAbove} 300ms ease-out`, +}); + +interface ConnectionStatusProps { + connectionId: string; +} + +function ConnectionStatus({ connectionId }: ConnectionStatusProps) { + const connectionInfo = useConnectionInfoForId(connectionId); + const connection = useConnectionForId(connectionId); + + if (!connectionInfo || !connection) { + return null; + } + + const connectionName = connectionInfo.title; + const status = connection.status; + + const { icon, statusText } = + status === 'connected' + ? { + icon: ( + + ), + statusText: `Connected to ${connectionName}`, + } + : status === 'failed' + ? { + icon: , + statusText: `Failed to connect to ${connectionName}`, + } + : { + icon: , + statusText: `Connecting to ${connectionName}`, + }; + + return ( +
  • + {icon} + {statusText} +
    • + ); +} + +export default function ConnectionList() { + const activeConnectionIds = useActiveConnectionIds(); + + if (activeConnectionIds.length === 0) { + return null; + } + + return ( +
      + {activeConnectionIds.map((connectionId) => ( + + ))} +
    + ); +} diff --git a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx index 768a73e0b92..5c320d67f76 100644 --- a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx @@ -18,7 +18,8 @@ import { import { useTelemetry } from '@mongodb-js/compass-telemetry/provider'; import { useConnectionActions } from '@mongodb-js/compass-connections/provider'; import { usePreference } from 'compass-preferences-model/provider'; -import { WelcomeTabImage } from './welcome-image'; +import { WelcomeTabImage, WelcomePlugImage } from './welcome-image'; +import ConnectionList, { useActiveConnectionIds } from './connection-list'; const sectionContainerStyles = css({ margin: 0, @@ -126,12 +127,14 @@ export default function DesktopWelcomeTab() { 'enableCreatingNewConnections' ); + const activeConnectionIds = useActiveConnectionIds(); + return (
    - + {activeConnectionIds.length ? : }

    Welcome to MongoDB Compass

    - {enableCreatingNewConnections && ( + {!activeConnectionIds.length && enableCreatingNewConnections ? ( <> To get started, connect to an existing server or
    ); diff --git a/packages/compass-welcome/src/components/web-welcome-tab.tsx b/packages/compass-welcome/src/components/web-welcome-tab.tsx index 0973f6b498d..da7b3213dea 100644 --- a/packages/compass-welcome/src/components/web-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/web-welcome-tab.tsx @@ -9,7 +9,8 @@ import { Link, } from '@mongodb-js/compass-components'; import { useConnectionIds } from '@mongodb-js/compass-connections/provider'; -import { WelcomeTabImage } from './welcome-image'; +import { WelcomePlugImage, WelcomeTabImage } from './welcome-image'; +import ConnectionList, { useActiveConnectionIds } from './connection-list'; const welcomeTabStyles = css({ display: 'flex', @@ -28,36 +29,41 @@ const contentBodyStyles = css({ export default function WebWelcomeTab() { const numConnections = useConnectionIds().length; + const activeConnectionIds = useActiveConnectionIds(); + return (
    - + {activeConnectionIds.length ? : }

    Welcome! Explore your data

    -
    - - {numConnections === 0 - ? 'To get started, create your first MongoDB Cluster.' - : 'To get started, connect to an existing cluster.'} - - {numConnections === 0 && ( - <> - - - Need more help?{' '} - - View documentation - - - - )} -
    + {!activeConnectionIds.length && ( +
    + + {numConnections === 0 + ? 'To get started, create your first MongoDB Cluster.' + : 'To get started, connect to an existing cluster.'} + + {numConnections === 0 && ( + <> + + + Need more help?{' '} + + View documentation + + + + )} +
    + )} + {activeConnectionIds.length > 0 ? : null}
    ); diff --git a/packages/compass-welcome/src/components/welcome-image.tsx b/packages/compass-welcome/src/components/welcome-image.tsx index 2c67b51c84f..6ad6aae9b84 100644 --- a/packages/compass-welcome/src/components/welcome-image.tsx +++ b/packages/compass-welcome/src/components/welcome-image.tsx @@ -330,6 +330,7 @@ export function WelcomeModalImage(props: SVGProps) { export function WelcomeTabImage(props: SVGProps) { return ( ) { ); } + +export function WelcomePlugImage(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}