Task List: Personalize your store / Import products - error message is not formatted correctly (https://github.com/woocommerce/woocommerce-admin/pull/8173)

* Use __() to display a generic error message on sample item import rather than passing through the server message because it probably has tags.

* Add changelog for 4314/8173.

* Add support for __unstableHTML option to Snackbar.

* Use __unstableHTML option to display server-side error messages as they come in.

* Update changelog description for 4314/8173.
This commit is contained in:
Jacob Sewell 2022-01-25 13:06:38 -06:00 committed by GitHub
parent af2f0f7a78
commit 917545577f
3 changed files with 25 additions and 3 deletions

View File

@ -0,0 +1,4 @@
Significance: minor
Type: Fix
Preserve HTML markup in server-side error messages received from sample product import request. #8173

View File

@ -4,7 +4,12 @@
import { noop } from 'lodash';
import classnames from 'classnames';
import { speak } from '@wordpress/a11y';
import { useEffect, forwardRef, renderToString } from '@wordpress/element';
import {
RawHTML,
useEffect,
forwardRef,
renderToString,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import warning from '@wordpress/warning';
import { Button } from '@wordpress/components';
@ -45,6 +50,7 @@ function Snackbar(
// It is distinct from onRemove, which _looks_ like a callback but is
// actually the function to call to remove the snackbar from the UI.
onDismiss = null,
__unstableHTML = false,
},
ref
) {
@ -102,6 +108,10 @@ function Snackbar(
}
);
if ( __unstableHTML === true ) {
children = <RawHTML>{ children }</RawHTML>;
}
return (
<div
ref={ ref }

View File

@ -137,8 +137,16 @@ class Appearance extends Component {
this.setState( { isPending: false } );
this.completeStep();
} )
.catch( ( error ) => {
createNotice( 'error', error.message );
.catch( ( { message } ) => {
createNotice(
'error',
message ||
__(
'There was an error importing the sample products',
'woocommerce-admin'
),
{ __unstableHTML: true }
);
this.setState( { isPending: false } );
} );
}