From 6d3a4396e10e3bad8acbb875bc8a13edd52895f6 Mon Sep 17 00:00:00 2001 From: Neal Beeken Date: Sun, 7 Sep 2025 23:34:35 -0400 Subject: [PATCH 1/7] feat(compass-welcome): add basic welcome page spinners for connections COMPASS-9634 --- .../src/components/connection-list.tsx | 89 +++++++++++++++++++ .../src/components/desktop-welcome-tab.tsx | 18 +++- .../src/components/web-welcome-tab.tsx | 61 +++++++------ 3 files changed, 140 insertions(+), 28 deletions(-) create mode 100644 packages/compass-welcome/src/components/connection-list.tsx 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..bc98182302d --- /dev/null +++ b/packages/compass-welcome/src/components/connection-list.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import { + Icon, + SpinLoader, + Description, + spacing, + css, + palette, +} from '@mongodb-js/compass-components'; +import { + useConnectionIds, + useConnectionInfoForId, + useConnectionForId, +} from '@mongodb-js/compass-connections/provider'; + +const connectionListStyles = css({ + marginTop: spacing[400], + listStyle: 'none', + padding: 0, +}); + +const connectionItemStyles = css({ + marginBottom: spacing[200], + display: 'flex', + alignItems: 'center', + gap: spacing[200], +}); + +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 = useConnectionIds( + (connection) => + connection.status === 'connecting' || + connection.status === 'connected' || + connection.status === 'failed' + ); + + 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..f59ea3e39d5 100644 --- a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx @@ -16,9 +16,13 @@ import { Icon, } from '@mongodb-js/compass-components'; import { useTelemetry } from '@mongodb-js/compass-telemetry/provider'; -import { useConnectionActions } from '@mongodb-js/compass-connections/provider'; +import { + useConnectionActions, + useConnectionIds, +} from '@mongodb-js/compass-connections/provider'; import { usePreference } from 'compass-preferences-model/provider'; import { WelcomeTabImage } from './welcome-image'; +import ConnectionList from './connection-list'; const sectionContainerStyles = css({ margin: 0, @@ -126,12 +130,19 @@ export default function DesktopWelcomeTab() { 'enableCreatingNewConnections' ); + const activeConnectionIds = useConnectionIds( + (connection) => + connection.status === 'connecting' || + connection.status === 'connected' || + connection.status === 'failed' + ); + return (

    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..1859514c958 100644 --- a/packages/compass-welcome/src/components/web-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/web-welcome-tab.tsx @@ -10,6 +10,7 @@ import { } from '@mongodb-js/compass-components'; import { useConnectionIds } from '@mongodb-js/compass-connections/provider'; import { WelcomeTabImage } from './welcome-image'; +import ConnectionList from './connection-list'; const welcomeTabStyles = css({ display: 'flex', @@ -28,36 +29,46 @@ const contentBodyStyles = css({ export default function WebWelcomeTab() { const numConnections = useConnectionIds().length; + const activeConnectionIds = useConnectionIds( + (connection) => + connection.status === 'connecting' || + connection.status === 'connected' || + connection.status === 'failed' + ); + return (

    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 && }
    ); From feda6d68a22dcf103e61331228e8341dbceb0d3a Mon Sep 17 00:00:00 2001 From: Neal Beeken Date: Sun, 7 Sep 2025 23:41:27 -0400 Subject: [PATCH 2/7] chore: centralize active logic --- .../src/components/connection-list.tsx | 21 +++++++++++++------ .../src/components/desktop-welcome-tab.tsx | 14 +++---------- .../src/components/web-welcome-tab.tsx | 9 ++------ 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/packages/compass-welcome/src/components/connection-list.tsx b/packages/compass-welcome/src/components/connection-list.tsx index bc98182302d..6b5915ba779 100644 --- a/packages/compass-welcome/src/components/connection-list.tsx +++ b/packages/compass-welcome/src/components/connection-list.tsx @@ -13,6 +13,20 @@ import { 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', @@ -68,12 +82,7 @@ function ConnectionStatus({ connectionId }: ConnectionStatusProps) { } export default function ConnectionList() { - const activeConnectionIds = useConnectionIds( - (connection) => - connection.status === 'connecting' || - connection.status === 'connected' || - connection.status === 'failed' - ); + const activeConnectionIds = useActiveConnectionIds(); if (activeConnectionIds.length === 0) { return null; diff --git a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx index f59ea3e39d5..50ef51451cf 100644 --- a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx @@ -16,13 +16,10 @@ import { Icon, } from '@mongodb-js/compass-components'; import { useTelemetry } from '@mongodb-js/compass-telemetry/provider'; -import { - useConnectionActions, - useConnectionIds, -} from '@mongodb-js/compass-connections/provider'; +import { useConnectionActions } from '@mongodb-js/compass-connections/provider'; import { usePreference } from 'compass-preferences-model/provider'; import { WelcomeTabImage } from './welcome-image'; -import ConnectionList from './connection-list'; +import ConnectionList, { useActiveConnectionIds } from './connection-list'; const sectionContainerStyles = css({ margin: 0, @@ -130,12 +127,7 @@ export default function DesktopWelcomeTab() { 'enableCreatingNewConnections' ); - const activeConnectionIds = useConnectionIds( - (connection) => - connection.status === 'connecting' || - connection.status === 'connected' || - connection.status === 'failed' - ); + const activeConnectionIds = useActiveConnectionIds(); return (
    diff --git a/packages/compass-welcome/src/components/web-welcome-tab.tsx b/packages/compass-welcome/src/components/web-welcome-tab.tsx index 1859514c958..bcfc53a24fb 100644 --- a/packages/compass-welcome/src/components/web-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/web-welcome-tab.tsx @@ -10,7 +10,7 @@ import { } from '@mongodb-js/compass-components'; import { useConnectionIds } from '@mongodb-js/compass-connections/provider'; import { WelcomeTabImage } from './welcome-image'; -import ConnectionList from './connection-list'; +import ConnectionList, { useActiveConnectionIds } from './connection-list'; const welcomeTabStyles = css({ display: 'flex', @@ -29,12 +29,7 @@ const contentBodyStyles = css({ export default function WebWelcomeTab() { const numConnections = useConnectionIds().length; - const activeConnectionIds = useConnectionIds( - (connection) => - connection.status === 'connecting' || - connection.status === 'connected' || - connection.status === 'failed' - ); + const activeConnectionIds = useActiveConnectionIds(); return (
    From 3c23d91d2dde2dd65500534cbd5a7cad23986f54 Mon Sep 17 00:00:00 2001 From: Neal Beeken Date: Sun, 7 Sep 2025 23:53:21 -0400 Subject: [PATCH 3/7] chore: animate and avoid jumping --- .../src/components/connection-list.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/compass-welcome/src/components/connection-list.tsx b/packages/compass-welcome/src/components/connection-list.tsx index 6b5915ba779..ed5b3db9c66 100644 --- a/packages/compass-welcome/src/components/connection-list.tsx +++ b/packages/compass-welcome/src/components/connection-list.tsx @@ -6,6 +6,7 @@ import { spacing, css, palette, + keyframes, } from '@mongodb-js/compass-components'; import { useConnectionIds, @@ -31,6 +32,20 @@ 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({ @@ -38,6 +53,7 @@ const connectionItemStyles = css({ display: 'flex', alignItems: 'center', gap: spacing[200], + animation: `${fadeInFromAbove} 300ms ease-out`, }); interface ConnectionStatusProps { From b040d6ebcb8003c029b4e3f15babb6769f915f0c Mon Sep 17 00:00:00 2001 From: Neal Beeken Date: Mon, 8 Sep 2025 00:05:29 -0400 Subject: [PATCH 4/7] fix: showing zero --- packages/compass-welcome/src/components/web-welcome-tab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-welcome/src/components/web-welcome-tab.tsx b/packages/compass-welcome/src/components/web-welcome-tab.tsx index bcfc53a24fb..dba64064673 100644 --- a/packages/compass-welcome/src/components/web-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/web-welcome-tab.tsx @@ -63,7 +63,7 @@ export default function WebWelcomeTab() { )}
    )} - {activeConnectionIds.length && } + {activeConnectionIds.length > 0 && }
    ); From 2e29c53420336a28312471946352387c2b02489d Mon Sep 17 00:00:00 2001 From: Neal Beeken Date: Mon, 8 Sep 2025 00:42:29 -0400 Subject: [PATCH 5/7] chore: use plug image --- .../src/components/desktop-welcome-tab.tsx | 6 +- .../src/components/web-welcome-tab.tsx | 6 +- .../src/components/welcome-image.tsx | 210 ++++++++++++++++++ 3 files changed, 218 insertions(+), 4 deletions(-) diff --git a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx index 50ef51451cf..9ebed275ee1 100644 --- a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx @@ -18,7 +18,7 @@ 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({ @@ -131,7 +131,9 @@ export default function DesktopWelcomeTab() { return (
    - + {(activeConnectionIds.length && ) || ( + + )}

    Welcome to MongoDB Compass

    {(!activeConnectionIds.length && enableCreatingNewConnections && ( diff --git a/packages/compass-welcome/src/components/web-welcome-tab.tsx b/packages/compass-welcome/src/components/web-welcome-tab.tsx index dba64064673..61f49d0391c 100644 --- a/packages/compass-welcome/src/components/web-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/web-welcome-tab.tsx @@ -9,7 +9,7 @@ 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({ @@ -33,7 +33,9 @@ export default function WebWelcomeTab() { return (
    - + {(activeConnectionIds.length && ) || ( + + )}

    Welcome! Explore your data

    {!activeConnectionIds.length && ( diff --git a/packages/compass-welcome/src/components/welcome-image.tsx b/packages/compass-welcome/src/components/welcome-image.tsx index 2c67b51c84f..7944e2091c4 100644 --- a/packages/compass-welcome/src/components/welcome-image.tsx +++ b/packages/compass-welcome/src/components/welcome-image.tsx @@ -426,3 +426,213 @@ export function WelcomeTabImage(props: SVGProps) { ); } + +export function WelcomePlugImage(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} From b37868bb23eec1c6a7bd210fce3b3c19d888dcd5 Mon Sep 17 00:00:00 2001 From: Neal Beeken Date: Mon, 8 Sep 2025 11:32:46 -0400 Subject: [PATCH 6/7] fix: ternary and darkmode on web fix --- .../src/components/desktop-welcome-tab.tsx | 11 +- .../src/components/web-welcome-tab.tsx | 6 +- .../src/components/welcome-image.tsx | 112 +++++++++--------- 3 files changed, 64 insertions(+), 65 deletions(-) diff --git a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx index 9ebed275ee1..5c320d67f76 100644 --- a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx @@ -131,12 +131,10 @@ export default function DesktopWelcomeTab() { return (
    - {(activeConnectionIds.length && ) || ( - - )} + {activeConnectionIds.length ? : }

    Welcome to MongoDB Compass

    - {(!activeConnectionIds.length && 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 61f49d0391c..da7b3213dea 100644 --- a/packages/compass-welcome/src/components/web-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/web-welcome-tab.tsx @@ -33,9 +33,7 @@ export default function WebWelcomeTab() { return (
    - {(activeConnectionIds.length && ) || ( - - )} + {activeConnectionIds.length ? : }

    Welcome! Explore your data

    {!activeConnectionIds.length && ( @@ -65,7 +63,7 @@ export default function WebWelcomeTab() { )}
    )} - {activeConnectionIds.length > 0 && } + {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 7944e2091c4..91dd5f5bad9 100644 --- a/packages/compass-welcome/src/components/welcome-image.tsx +++ b/packages/compass-welcome/src/components/welcome-image.tsx @@ -15,7 +15,7 @@ export function WelcomeModalImage(props: SVGProps) { @@ -330,6 +330,7 @@ export function WelcomeModalImage(props: SVGProps) { export function WelcomeTabImage(props: SVGProps) { return ( ) { export function WelcomePlugImage(props: SVGProps) { return ( ) { d="M89.8202 186.92C98.8611 186.92 106.19 179.591 106.19 170.55C106.19 161.509 98.8611 154.18 89.8202 154.18C80.7793 154.18 73.4502 161.509 73.4502 170.55C73.4502 179.591 80.7793 186.92 89.8202 186.92Z" fill="black" stroke="black" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" /> ) { ); From fdd49f91eb5b0fb823d79886eaa0baf5d1c0a6e0 Mon Sep 17 00:00:00 2001 From: Neal Beeken Date: Mon, 15 Sep 2025 10:48:03 -0400 Subject: [PATCH 7/7] put raw css back --- packages/compass-welcome/src/components/welcome-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-welcome/src/components/welcome-image.tsx b/packages/compass-welcome/src/components/welcome-image.tsx index 91dd5f5bad9..6ad6aae9b84 100644 --- a/packages/compass-welcome/src/components/welcome-image.tsx +++ b/packages/compass-welcome/src/components/welcome-image.tsx @@ -15,7 +15,7 @@ export function WelcomeModalImage(props: SVGProps) {