From 691e07a11e3d39e63a44d59e9ea19ff0014be965 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Romain?= Date: Mon, 20 Mar 2023 16:52:41 +0100 Subject: [PATCH] feat(components): use DS Error State in Stepper (#4644) --- .changeset/light-pumpkins-smoke.md | 5 + .../src/Stepper/Stepper.component.js | 26 +- .../src/Stepper/Stepper.component.module.scss | 4 - .../src/Stepper/Stepper.component.test.js | 14 +- .../components/src/Stepper/Stepper.stories.js | 19 +- .../Stepper.component.test.js.snap | 302 +++++++++--------- 6 files changed, 195 insertions(+), 175 deletions(-) create mode 100644 .changeset/light-pumpkins-smoke.md diff --git a/.changeset/light-pumpkins-smoke.md b/.changeset/light-pumpkins-smoke.md new file mode 100644 index 00000000000..6ea2814d0fb --- /dev/null +++ b/.changeset/light-pumpkins-smoke.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': minor +--- + +feat(components): use ErrorState in the Stepper diff --git a/packages/components/src/Stepper/Stepper.component.js b/packages/components/src/Stepper/Stepper.component.js index f1f6f021559..5d9bba6e222 100644 --- a/packages/components/src/Stepper/Stepper.component.js +++ b/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,6 +172,17 @@ function Stepper({ steps, title, renderActions, children }) { } }, [steps]); + if (!!errorStep) { + return ( + + + {renderActions && renderActions(!!errorStep) ? ( +
{renderActions(!!errorStep)}
+ ) : null} + + ); + } + return ( @@ -177,18 +190,11 @@ function Stepper({ steps, title, renderActions, children }) {
-
+
{title &&

{title}

}
    {steps.map((step, index, array) => showStep(t, step, index, array))}
- {renderActions && renderActions(isInError) ? ( -
{renderActions(isInError)}
- ) : null}
diff --git a/packages/components/src/Stepper/Stepper.component.module.scss b/packages/components/src/Stepper/Stepper.component.module.scss index e7dcfed0b60..c728e51e972 100644 --- a/packages/components/src/Stepper/Stepper.component.module.scss +++ b/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; diff --git a/packages/components/src/Stepper/Stepper.component.test.js b/packages/components/src/Stepper/Stepper.component.test.js index a792c1b09e3..77d4d190eea 100644 --- a/packages/components/src/Stepper/Stepper.component.test.js +++ b/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( , ); // 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( Import successfull , ); // then expect(renderActions).toHaveBeenCalledWith(true); - expect(wrapper.getElement()).toMatchSnapshot(); + expect(baseElement).toMatchSnapshot(); }); }); }); diff --git a/packages/components/src/Stepper/Stepper.stories.js b/packages/components/src/Stepper/Stepper.stories.js index 30c6f8702ad..d1d69abc8eb 100644 --- a/packages/components/src/Stepper/Stepper.stories.js +++ b/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 ( - - - - - + + + Retry + Cancel + + Get the documentation + ); } diff --git a/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap b/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap index e36b9898d9d..44b4a4ddd23 100644 --- a/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap +++ b/packages/components/src/Stepper/__snapshots__/Stepper.component.test.js.snap @@ -1,179 +1,181 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Stepper Component render should render when there is an errors in the steps 1`] = ` - - - Import successfull - - + +
-
-

- Test -

-
    -
  1. -
    - - Fetch Sample -
    -
    2. -
  2. + + + + + + +
    -
    - Global Quality -
    -
    - - We couldn't connect to the remote engine - -
    -
    3. -
  3. -
    - - Flattening - (Aborted) -
    -
    4. -
  4. -
    - - Column Quality - (Aborted) -
    -
    5. -
-
+ +

+ We couldn't connect to the remote engine +

+
+
+
- - + + `; exports[`Stepper Component render should render when there is no errors in the steps 1`] = ` - - - + +
-

- Test -

-
    -
  1. + Test + +
      -
      - - Fetch Sample -
      - -
    1. -
      + + Fetch Sample +
      +
      2. +
    2. - - Global Quality -
- -
  • -
    + + + + Global Quality +
    +
    • +
  • - - Flattening -
    • - -
  • -
    + + + + Flattening +
    +
    • +
  • - - - - - Column Quality - (Pending) -
    • - - + + - + + Column Quality + (Pending) + + + + -     -     + + `;