feat(components): use DS Error State in Stepper (#4644)

Author: romainseb

.changeset/light-pumpkins-smoke.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-components': minor
+---
+
+feat(components): use ErrorState in the Stepper

packages/components/src/Stepper/Stepper.component.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Stepper as CoralStepper } from '@talend/design-system';
+import { ErrorState, StackVertical, Stepper as CoralStepper } from '@talend/design-system';
 import Icon from '../Icon';
 import CircularProgress from '../CircularProgress';
 import { getTheme } from '../theme';
@@ -33,6 +33,8 @@ const LOADING_STEP_STATUSES = {
  */
 const isErrorInSteps = steps => steps.some(step => step.status === LOADING_STEP_STATUSES.FAILURE);
 
+const getStepInError = steps => steps.find(step => step.status === LOADING_STEP_STATUSES.FAILURE);
+
 /**
  * This function tells if all the steps are successful
  * @param {array} steps array of steps
@@ -149,7 +151,7 @@ const transitionEmptyToLoading = transition(TRANSITION_STATE.STEPS, DEFAULT_TRAN
 
 function Stepper({ steps, title, renderActions, children }) {
 	const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);
-	const isInError = isErrorInSteps(steps);
+	const errorStep = getStepInError(steps);
 	const [transitionState, setTransitionState] = useState(
 		isStepsLoading(steps) || !children ? TRANSITION_STATE.STEPS : TRANSITION_STATE.CHILD,
 	);
@@ -170,25 +172,29 @@ function Stepper({ steps, title, renderActions, children }) {
 		}
 	}, [steps]);
 
+	if (!!errorStep) {
+		return (
+			<StackVertical gap={0} align="center" justify="center">
+				<ErrorState title={errorStep.label} description={errorStep.message?.label} />
+				{renderActions && renderActions(!!errorStep) ? (
+					<div>{renderActions(!!errorStep)}</div>
+				) : null}
+			</StackVertical>
+		);
+	}
+
 	return (
 		<React.Fragment>
 			<StepperTransition active={transitionState === TRANSITION_STATE.CHILD}>
 				{children}
 			</StepperTransition>
 			<StepperTransition active={transitionState === TRANSITION_STATE.STEPS}>
 				<div className={getClass('stepper')}>
-					<div
-						className={getClass('loading-content-steps', {
-							'stepper-content-error': isInError,
-						})}
-					>
+					<div className={getClass('loading-content-steps')}>
 						{title && <h2>{title}</h2>}
 						<ol className={getClass('stepper-steps')}>
 							{steps.map((step, index, array) => showStep(t, step, index, array))}
 						</ol>
-						{renderActions && renderActions(isInError) ? (
-							<div>{renderActions(isInError)}</div>
-						) : null}
 					</div>
 				</div>
 			</StepperTransition>

packages/components/src/Stepper/Stepper.component.module.scss

@@ -8,10 +8,6 @@ $stepper-icon-size: $svg-md-size !default;
 	justify-content: center;
 	padding-left: $padding-small;
 
-	&-content-error {
-		width: 75rem;
-	}
-
 	&-step {
 		padding: $padding-small 0;
 

packages/components/src/Stepper/Stepper.component.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Stepper from './Stepper.component';
 
+jest.unmock('@talend/design-system');
+
 describe('Stepper Component', () => {
 	describe('render', () => {
 		it('should render when there is no errors in the steps', () => {
@@ -15,12 +17,12 @@ describe('Stepper Component', () => {
 			];
 			const renderActions = jest.fn();
 			// when
-			const wrapper = shallow(
+			const { baseElement } = render(
 				<Stepper steps={steps} title={title} renderActions={renderActions} />,
 			);
 			// then
-			expect(renderActions).toHaveBeenCalledWith(false);
-			expect(wrapper.getElement()).toMatchSnapshot();
+			expect(renderActions).not.toHaveBeenCalledWith();
+			expect(baseElement).toMatchSnapshot();
 		});
 
 		it('should render when there is an errors in the steps', () => {
@@ -41,14 +43,14 @@ describe('Stepper Component', () => {
 			];
 			const renderActions = jest.fn();
 			// when
-			const wrapper = shallow(
+			const { baseElement } = render(
 				<Stepper steps={steps} title={title} renderActions={renderActions}>
 					Import successfull
 				</Stepper>,
 			);
 			// then
 			expect(renderActions).toHaveBeenCalledWith(true);
-			expect(wrapper.getElement()).toMatchSnapshot();
+			expect(baseElement).toMatchSnapshot();
 		});
 	});
 });

packages/components/src/Stepper/Stepper.stories.js

@@ -2,6 +2,13 @@ import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import Action from '../Actions/Action';
 import Stepper from './Stepper.component';
+import {
+	ButtonPrimary,
+	ButtonSecondary,
+	Link,
+	StackHorizontal,
+	StackVertical,
+} from '@talend/design-system';
 
 export default {
 	title: 'Messaging & Communication/Stepper',
@@ -13,11 +20,13 @@ function renderActions(isInError) {
 		return null;
 	}
 	return (
-		<React.Fragment>
-			<Action label="retry" bsStyle="info" className="btn-inverse button-padding" />
-			<Action label="edit dataset" bsStyle="info" className="button-padding" />
-			<Action label="edit connection" bsStyle="info" className="button-padding" />
-		</React.Fragment>
+		<StackVertical gap="S" padding="M" align="center">
+			<StackHorizontal gap="M">
+				<ButtonPrimary onClick={action('retry')}>Retry</ButtonPrimary>
+				<ButtonSecondary onClick={action('cancel')}>Cancel</ButtonSecondary>
+			</StackHorizontal>
+			<Link href="http://www.google.com">Get the documentation</Link>
+		</StackVertical>
 	);
 }