feat(compass-welcome): show connection progress on welcome COMPASS-9634 (#7258)

Author: nbbeeken

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: (
+            <Icon glyph="Checkmark" size="small" color={palette.green.dark2} />
+          ),
+          statusText: `Connected to ${connectionName}`,
+        }
+      : status === 'failed'
+      ? {
+          icon: <Icon glyph="X" size="small" color={palette.red.base} />,
+          statusText: `Failed to connect to ${connectionName}`,
+        }
+      : {
+          icon: <SpinLoader size={16} />,
+          statusText: `Connecting to ${connectionName}`,
+        };
+
+  return (
+    <li className={connectionItemStyles}>
+      {icon}
+      <Description>{statusText}</Description>
+    </li>
+  );
+}
+
+export default function ConnectionList() {
+  const activeConnectionIds = useActiveConnectionIds();
+
+  if (activeConnectionIds.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className={connectionListStyles}>
+      {activeConnectionIds.map((connectionId) => (
+        <ConnectionStatus key={connectionId} connectionId={connectionId} />
+      ))}
+    </ul>
+  );
+}

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 (
     <div className={welcomeTabStyles}>
-      <WelcomeTabImage />
+      {activeConnectionIds.length ? <WelcomePlugImage /> : <WelcomeTabImage />}
       <div>
         <H3>Welcome to MongoDB Compass</H3>
-        {enableCreatingNewConnections && (
+        {!activeConnectionIds.length && enableCreatingNewConnections ? (
           <>
             <Body>To get started, connect to an existing server or</Body>
             <Button
@@ -145,7 +148,9 @@ export default function DesktopWelcomeTab() {
             </Button>
             <AtlasHelpSection />
           </>
-        )}
+        ) : activeConnectionIds.length ? (
+          <ConnectionList />
+        ) : null}
       </div>
     </div>
   );

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 (
     <div className={welcomeTabStyles}>
-      <WelcomeTabImage />
+      {activeConnectionIds.length ? <WelcomePlugImage /> : <WelcomeTabImage />}
       <div>
         <H3>Welcome! Explore your data</H3>
-        <div className={contentBodyStyles}>
-          <Body>
-            {numConnections === 0
-              ? 'To get started, create your first MongoDB Cluster.'
-              : 'To get started, connect to an existing cluster.'}
-          </Body>
-          {numConnections === 0 && (
-            <>
-              <Button
-                as={Link}
-                data-testid="add-new-atlas-cluster-button"
-                variant={ButtonVariant.Primary}
-                href={'#/clusters/starterTemplates'}
-              >
-                Create a Cluster
-              </Button>
-              <Body>
-                Need more help?{' '}
-                <Link href="https://www.mongodb.com/docs/atlas/create-connect-deployments/">
-                  View documentation
-                </Link>
-              </Body>
-            </>
-          )}
-        </div>
+        {!activeConnectionIds.length && (
+          <div className={contentBodyStyles}>
+            <Body>
+              {numConnections === 0
+                ? 'To get started, create your first MongoDB Cluster.'
+                : 'To get started, connect to an existing cluster.'}
+            </Body>
+            {numConnections === 0 && (
+              <>
+                <Button
+                  as={Link}
+                  data-testid="add-new-atlas-cluster-button"
+                  variant={ButtonVariant.Primary}
+                  href={'#/clusters/starterTemplates'}
+                >
+                  Create a Cluster
+                </Button>
+                <Body>
+                  Need more help?{' '}
+                  <Link href="https://www.mongodb.com/docs/atlas/create-connect-deployments/">
+                    View documentation
+                  </Link>
+                </Body>
+              </>
+            )}
+          </div>
+        )}
+        {activeConnectionIds.length > 0 ? <ConnectionList /> : null}
       </div>
     </div>
   );