Connection: adapt js component for custom errors

projects/js-packages/components/changelog/update-connection-error-refactor-js

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Small bug fix for Action button component
+
+

projects/js-packages/components/components/action-button/index.jsx

@@ -67,9 +67,13 @@ ActionButton.propTypes = {
 	/** The error message string */
 	errorMessage: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 	/** The type/variant of button */
-	variant: PropTypes.arrayOf( PropTypes.oneOf( [ 'primary', 'secondary', 'link' ] ) ),
+	variant: PropTypes.oneOf( [ 'primary', 'secondary', 'link' ] ),
 	/** Will display the button as a link with an external icon. */
 	isExternalLink: PropTypes.bool,
+	/** Custom CSS class to apply to the button */
+	customClass: PropTypes.string,
+	/** Text to display when loading */
+	loadingText: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 };
 
 export default ActionButton;

projects/js-packages/connection/changelog/update-connection-error-refactor-js

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: removed hardcoded custom errors and added support for dynamic errors.

projects/js-packages/connection/components/connection-error-notice/index.jsx

@@ -1,4 +1,4 @@
-import { Spinner, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Spinner } from '@automattic/jetpack-components';
 import { Icon, Notice, Path, SVG } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
@@ -19,9 +19,7 @@ const ConnectionErrorNotice = props => {
 		actions = [], // New prop for custom actions
 	} = props;
 
-	const [ isBiggerThanMedium ] = useBreakpointMatch( [ 'md' ], [ '>' ] );
-	const wrapperClassName =
-		styles.notice + ( isBiggerThanMedium ? ' ' + styles[ 'bigger-than-medium' ] : '' );
+	const wrapperClassName = styles.notice;
 
 	const icon = (
 		<Icon
@@ -82,31 +80,41 @@ const ConnectionErrorNotice = props => {
 
 	if ( actions.length > 0 ) {
 		// Use custom actions
-		actionButtons = actions.map( ( action, index ) => (
-			<a
-				key={ index }
-				onClick={ action.onClick }
-				onKeyDown={ action.onClick }
-				className={ `${ styles.button } ${ action.variant === 'primary' ? styles.primary : '' }` }
-				href="#"
-			>
-				{ action.isLoading
-					? action.loadingText || __( 'Loading…', 'jetpack-connection-js' )
-					: action.label }
-			</a>
-		) );
+		actionButtons = actions.map( ( action, index ) => {
+			let buttonClassName = styles.button;
+			if ( action.variant === 'primary' ) {
+				buttonClassName += ' ' + styles.primary;
+			} else if ( action.variant === 'secondary' ) {
+				buttonClassName += ' ' + styles.secondary;
+			}
+
+			return (
+				<button
+					key={ index }
+					type="button"
+					onClick={ action.onClick }
+					onKeyDown={ action.onClick }
+					className={ buttonClassName }
+					disabled={ action.isLoading }
+				>
+					{ action.isLoading
+						? action.loadingText || __( 'Loading…', 'jetpack-connection-js' )
+						: action.label }
+				</button>
+			);
+		} );
 	} else if ( restoreConnectionCallback ) {
 		// Use default restore connection action for backward compatibility
 		actionButtons = [
-			<a
+			<button
 				key="restore"
+				type="button"
 				onClick={ restoreConnectionCallback }
 				onKeyDown={ restoreConnectionCallback }
 				className={ styles.button }
-				href="#"
 			>
 				{ __( 'Restore Connection', 'jetpack-connection-js' ) }
-			</a>,
+			</button>,
 		];
 	}
 

projects/js-packages/connection/components/connection-error-notice/styles.module.scss

@@ -25,7 +25,7 @@
 		margin: 0;
 		padding: 12px 4px;
 		flex-direction: column;
-		align-items: flex-start;
+		align-items: center;
 	}
 
 	// action button
@@ -41,7 +41,6 @@
 	}
 
 	.button, .button:visited, .button:active, .button:hover {
-		color: var( --jp-white );
 		font-weight: 600;
 		font-size: 16px;
 		line-height: 24px;
@@ -51,23 +50,57 @@
 		justify-content: center;
 		align-items: center;
 		padding: 8px 24px;
+		border-radius: var( --jp-border-radius );
+		display: inline-block;
 		margin-left: calc( var( --spacing-base ) * 2 + 24px ); // 40px
 		margin-top: 24px;
+	}
+
+	.primary, .primary:visited, .primary:active, .primary:hover {
+		color: var( --jp-white );
 		background: #000;
-		border-radius: var( --jp-border-radius );
+		border: 1px solid transparent;
+	}
 
-		&.primary {
-			background: var( --jp-green-50 );
+	.secondary, .secondary:visited, .secondary:active, .secondary:hover {
+		background: transparent;
+		color: var( --jp-gray-80 );
+		border: 1px solid var( --jp-gray-30 );
+
+		&:hover {
+			color: var( --jp-gray-100 );
+			border-color: var( --jp-gray-50 );
 		}
 	}
 
 	.actions {
 		display: flex;
 		gap: calc( var( --spacing-base ) * 2 ); // 16px
-		flex-wrap: wrap;
+		flex-direction: column;
+		text-align: center;
+		margin-top: calc( var( --spacing-base ) * 2 ); // 16px
+
+		.button, .button:visited, .button:active, .button:hover {
+			width: 100%;
+			max-width: 300px;
+			margin: 0;
+		}
 	}
 
-	&.bigger-than-medium {
+	// Media query for screens 1100px and above
+	@media (min-width: 1100px) {
+
+		.actions {
+			margin-left: 0;
+			margin-top: 0;
+			flex-direction: row;
+			align-items: center;
+
+			.button, .button:visited, .button:active, .button:hover {
+				width: auto;
+				max-width: none;
+			}
+		}
 
 		.button, .button:visited, .button:active, .button:hover {
 			margin-left: 0;

projects/js-packages/connection/components/connection-error-notice/test/index.test.jsx

@@ -0,0 +1,111 @@
+import { jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import ConnectionErrorNotice from '../index';
+
+describe( 'ConnectionErrorNotice', () => {
+	it( 'should not render when message is empty', () => {
+		const { container } = render( <ConnectionErrorNotice message="" /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render error message', () => {
+		render( <ConnectionErrorNotice message="Connection failed" /> );
+		// Message appears in both the notice and accessibility regions
+		const messageElements = screen.getAllByText( 'Connection failed' );
+		expect( messageElements.length ).toBeGreaterThan( 0 );
+	} );
+
+	it( 'should render with default restore connection action when restoreConnectionCallback is provided', () => {
+		const mockCallback = jest.fn();
+		render(
+			<ConnectionErrorNotice
+				message="Connection needs to be restored"
+				restoreConnectionCallback={ mockCallback }
+			/>
+		);
+
+		expect( screen.getAllByText( 'Connection needs to be restored' ).length ).toBeGreaterThan( 0 );
+		expect( screen.getByText( 'Restore Connection' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render custom actions when provided', () => {
+		const actions = [
+			{
+				label: 'Custom Action',
+				onClick: jest.fn(),
+				variant: 'primary',
+			},
+		];
+
+		render( <ConnectionErrorNotice message="Custom error occurred" actions={ actions } /> );
+
+		expect( screen.getAllByText( 'Custom error occurred' ).length ).toBeGreaterThan( 0 );
+		expect( screen.getByText( 'Custom Action' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should show loading state when isRestoringConnection is true', () => {
+		render(
+			<ConnectionErrorNotice
+				message="Connection is being restored"
+				isRestoringConnection={ true }
+			/>
+		);
+
+		// Message appears in both the notice and accessibility regions
+		const loadingElements = screen.getAllByText( 'Reconnecting Jetpack' );
+		expect( loadingElements.length ).toBeGreaterThan( 0 );
+	} );
+
+	it( 'should show restore connection error when provided', () => {
+		render(
+			<ConnectionErrorNotice
+				message="Original connection error"
+				restoreConnectionError="Failed to reconnect"
+			/>
+		);
+
+		expect( screen.getByText( /There was an error reconnecting Jetpack/ ) ).toBeInTheDocument();
+		expect( screen.getByText( /Failed to reconnect/ ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render multiple custom actions', () => {
+		const actions = [
+			{
+				label: 'First Action',
+				onClick: jest.fn(),
+				variant: 'primary',
+			},
+			{
+				label: 'Second Action',
+				onClick: jest.fn(),
+				variant: 'secondary',
+			},
+		];
+
+		render( <ConnectionErrorNotice message="Multiple actions available" actions={ actions } /> );
+
+		expect( screen.getAllByText( 'Multiple actions available' ).length ).toBeGreaterThan( 0 );
+		expect( screen.getByText( 'First Action' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Second Action' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render primary and secondary buttons', () => {
+		const actions = [
+			{
+				label: 'Primary Action',
+				onClick: jest.fn(),
+				variant: 'primary',
+			},
+			{
+				label: 'Secondary Action',
+				onClick: jest.fn(),
+				variant: 'secondary',
+			},
+		];
+
+		render( <ConnectionErrorNotice message="Testing secondary button" actions={ actions } /> );
+
+		expect( screen.getByText( 'Primary Action' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Secondary Action' ) ).toBeInTheDocument();
+	} );
+} );