Spike: [UIORGS-61] Figure out if we are able to show error messages with a link

Related Story

Spike: figure out if we are able to show error messages with a link

Investigation

During the investigation, it was found that Stripes Callout component supports string, HTML or React Component as a prop for rendering the message in the content of the callout.
So it possible to render hyperlink in the content of the callout based on back-end response code.
Also should be noticed that the default timeout for callout is 6 sec. In this case timeout for errors should be significantly increased so that user can follow the link if necessary or set to 0 to allow the user to close callout by himself.
If user clicks on hyperlink he will be redirected to the settings page.

Example of usage

import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';

import { get } from 'lodash';

export const ERROR_CODES = {
loanTypeIsNotDefined: 'loanTypeIsNotDefined',
};

const showUpdateOrderError = async (response, callout) => {
let error;

try {
error = await response.json();
} catch (parsingException) {
error = response;
}

const errorCode = get(error, 'errors.0.code');
const messageCode = get(ERROR_CODES, errorCode, '');

callout.sendCallout({
type: 'error',
message: (
<FormattedMessage
id="ui-orders.errors.loanTypeIsNotDefined"
values={{ code: <Link to="/settings/inventory/loantypes">{messageCode}</Link> }}
/>
),
timeout: 0,
});
};

export default showUpdateOrderError;

How it works

Open