My Jetpack: Move manage connection link (#39251)

* MyJetpack: Moving connection management link * changelog * MyJetpack: Updating link CSS * MyJetpack: Updating tests to reflect latest changes
Automattic · Sep 5, 2024 · c5ea77c · c5ea77c
1 parent d43c2d0
commit c5ea77c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 9 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx b/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx
@@ -20,6 +20,7 @@ import type {
 	getSiteConnectionLineDataType,
 	getUserConnectionLineDataType,
 	ConnectionStatusCardType,
+	ConnectionItemButtonType,
 } from './types';
 import type { MouseEvent } from 'react';
 
@@ -58,15 +59,21 @@ const ConnectionListItem: ConnectionListItemType = ( {
 				<Icon icon={ icon } />
 				{ text }
 			</Text>
-			{ actionText && (
-				<Button variant="link" weight="regular" onClick={ onClick }>
-					{ actionText }
-				</Button>
+			{ actionText && status !== 'success' && (
+				<ConnectionItemButton actionText={ actionText } onClick={ onClick } />
 			) }
 		</div>
 	);
 };
 
+const ConnectionItemButton: ConnectionItemButtonType = ( { actionText, onClick } ) => {
+	return (
+		<Button variant="link" weight="regular" onClick={ onClick }>
+			{ actionText }
+		</Button>
+	);
+};
+
 const getSiteConnectionLineData: getSiteConnectionLineDataType = ( {
 	isRegistered,
 	hasSiteConnectionBrokenModules,
@@ -319,6 +326,14 @@ const ConnectionStatusCard: ConnectionStatusCardType = ( {
 						/>
 					) }
 				</div>
+				{ siteConnectionLineData?.status === 'success' && siteConnectionLineData?.actionText && (
+					<div className={ styles[ 'connect-action' ] }>
+						<ConnectionItemButton
+							onClick={ siteConnectionLineData?.onClick }
+							actionText={ siteConnectionLineData?.actionText }
+						/>
+					</div>
+				) }
 			</div>
 
 			<div>

diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/styles.module.scss b/projects/packages/my-jetpack/_inc/components/connection-status-card/styles.module.scss
@@ -1,3 +1,6 @@
+$myjetpack-connection-avatar-width: 32px;
+$myjetpack-connection-avatar-overlap: 10px;
+
 .connection-status-card {
 	.status {
 		display: flex;
@@ -7,20 +10,21 @@
 
 		.avatar-wrapper {
 			position: relative;
+			width: 2 * $myjetpack-connection-avatar-width - $myjetpack-connection-avatar-overlap; // width an icon and an avatar
 		}
 
 		.cloud {
 			width: 32px;
 		}
 
 		.jetpack {
-			width: 30px;
+			width: $myjetpack-connection-avatar-width;
 		}
 
 		.avatar {
-			width: 32px;
+			width: $myjetpack-connection-avatar-width;
 			position: absolute;
-			margin-left: -10px;
+			margin-left: -( $myjetpack-connection-avatar-overlap );
 			border-radius: 50%;
 		}
 
@@ -44,6 +48,11 @@
 		transform: rotate( 180deg );
 	}
 
+	.connect-action {
+		align-self: flex-end;
+		margin-bottom: 2px;
+	}
+
 	.list-item {
 		display: flex;
 		align-items: center;

diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.tsx b/projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.tsx
@@ -202,9 +202,9 @@ describe( 'ConnectionStatusCard', () => {
 			expect( screen.getByText( /Connected as/ ) ).toBeInTheDocument();
 		} );
 
-		it( 'renders two manage buttons', () => {
+		it( 'renders one manage button', () => {
 			setup();
-			expect( screen.getAllByRole( 'button', { name: 'Manage' } ) ).toHaveLength( 2 );
+			expect( screen.getAllByRole( 'button', { name: 'Manage' } ) ).toHaveLength( 1 );
 		} );
 	} );
 } );
diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/types.ts b/projects/packages/my-jetpack/_inc/components/connection-status-card/types.ts
@@ -11,6 +11,11 @@ interface ConnectionListItemProps {
 
 export type ConnectionListItemType = FC< ConnectionListItemProps >;
 
+export type ConnectionItemButtonType = FC< {
+	actionText: string;
+	onClick: ( e: MouseEvent ) => void;
+} >;
+
 interface getSiteConnectionLineDataProps {
 	isRegistered: boolean;
 	hasSiteConnectionBrokenModules: boolean;

diff --git a/projects/packages/my-jetpack/changelog/update-myjetpack-connection-link b/projects/packages/my-jetpack/changelog/update-myjetpack-connection-link
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Only moving a link to a component aboive it.
+
+