This component provides a service to show progress when we have long loading steps.
The main purpose is to have this workflow ->
- Init the steps with labels & set events to fail / success
- When you have some progress in the app, you have dispatchers available
Here, it will not make the process work by itself, it's an api that provide tools to update the state
First of all, you have to register the module in your application, it's the default export of the module :
// index.js file
import StepperModule from '@talend/react-stepper';
export default {
id: 'MyModuleName',
// ... Modules stuff
modules: [StepperModule, ...myOtherModules],
};
After bootstrapping the module, there is a reducer listening the events. StepperService provides some actionCreators to manage the loading state. For each of these action creators, some parameters are required: the resourceType & the resourceId. Theses parameters allow the Stepper service to identify each loading with uniqueness.
A step is an object that matches this typescript interface :
interface Step {
label: string; // displayed aside the icon
message: string; // displayed as a description for what could go wrong
status: LOADING_STEP_STATUSES; // match the icon to show
loadingOn: string[] | string; // list of event for set to loading state
failureOn: string[] | string; // list of event for set to failure state
successOn: string[] | string; // list of event for set to success state
}
This action is used to bootstrap a loading resourceType / resourceId. Steps are required to do so
import { StepperActions, StepperConstants } from '@talend/react-stepper';
const steps = [
{
label: 'Fetch Sample',
status: StepperConstants.LOADING_STEP_STATUSES.LOADING,
failureOn: ['FETCH_SAMPLE_ACCESS_FAILURE', 'SAMPLE_FETCHING_FAILURE'],
successOn: 'SAMPLE_FETCHED',
},
{
label: 'Update Sample',
failureOn: ['SAMPLE_UPDATE_FAILURE', 'SAMPLE_REFRESH_FAILURE'],
loadingOn: 'SAMPLE_FETCHED',
successOn: 'SAMPLE_REFRESHED',
},
{
label: 'Update Quality',
failureOn: 'SAMPLE_QUALITY_FAILURE',
loadingOn: 'SAMPLE_REFRESHED',
successOn: 'SAMPLE_QUALITY_SUCCESS',
},
];
StepperActions.initStepper('dataset', 'id12', steps);
This action is used when a loading is over and we want to remove it from the store it requires only the resourceType & the resourceId
StepperActions.removeStepper('dataset', 'id12');
This action is used when an event has to be processed, the workflow for a dispatched event is :
- If a step has a successOn as event, the current step status is set to success
- If a step has a loadingOn as event, the current step status is set to loading
- If a step has a failureOn as event, the current step status is set to failure & all the steps that are not in success status are set to aborted
A message can be also passed to the failure event to display a label below the current fail step
const failAction = StepperActions.proceedLoadingEvent(
'dataset',
'id12',
'FETCH_SAMPLE_ACCESS_FAILURE',
'This call has failed because the remote engine is not working',
);
You may want to know for some use cases if a loading step is currently in loading state, it will return a boolean to say if it's finished.
isResourceLoading
selector :
import { StepperSelectors } from '@talend/react-stepper';
function mapStateToProps(store) {
const isLoading = StepperSelectors.isResourceLoading(store, 'dataset', 'id12');
}
For some use cases, you may want to get the current state of the steps. It could be to know if the loading step has ended but with an error or to count how many steps are done... It will return the step with the same given model shape at init.
import { StepperSelectors } from '@talend/react-stepper';
function mapStateToProps(store) {
const steps = StepperSelectors.getStepsForResource(store, 'dataset', 'id12');
}
Take a list of steps in parameter and tell if all the steps are in a success state
import { StepperUtils } from '@talend/react-stepper';
// ... get the steps
const steps = StepperUtils.isAllSuccessful(steps);
Take a list of steps in parameter and tell if there is an error in the steps
import { StepperUtils } from '@talend/react-stepper';
// ... get the steps
const steps = StepperUtils.isErrorInSteps(steps);
Take a list of steps in parameter and tell if the loading steps is still loading
import { StepperUtils } from '@talend/react-stepper';
// ... get the steps
const steps = StepperUtils.isStepsLoading(steps);