code-snippets / js / components / ImportMenu / UploadForm / SelectSnippets / ImportResultDisplay.tsx

ImportResultDisplay.tsx in Code Snippets 3.10.2, at js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx

63 lines 1.8 KB

Raw Download Zip

1	import React from 'react'
2	import { __ } from '@wordpress/i18n'
3	import { createInterpolateElement } from '@wordpress/element'
4	import { ImportCard } from '../../common/ImportCard'
5	import type { ReactNode } from 'react'
6
7	export interface ImportResult {
8	success: boolean
9	message: string
10	imported?: number
11	warnings?: string[]
12	step: 'upload' \| 'select'
13	}
14
15	export interface ImportResultDisplayProps {
16	success: boolean
17	message: ReactNode
18	warnings?: string[]
19	step: 'upload' \| 'select'
20	}
21
22	export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ success, message, warnings, step }) =>
23	<ImportCard className="import-result-display-card">
24	<div className={`import-result import-result-${success ? 'success' : 'failure'}`}>
25	<div className="import-result-icon" aria-hidden="true">
26	<span>{success ? '✓' : '✕'}</span>
27	</div>
28
29	<div>
30	<h2>
31	{'upload' === step && (success
32	? __('File upload successful', 'code-snippets')
33	: __('File upload error', 'code-snippets'))}
34
35	{'select' === step && (success
36	? __('Import successful', 'code-snippets')
37	: __('Import error', 'code-snippets'))}
38	</h2>
39
40	<p className="import-result-message">{message}</p>
41
42	{success && (
43	<p className="import-result-link">
44	{createInterpolateElement(
45	__('Go to <a>All Snippets</a> to activate your imported snippets.', 'code-snippets'),
46	{
47	// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
48	a: <a href={window.CODE_SNIPPETS?.urls.manage} />
49	}
50	)}
51	</p>)}
52
53	{warnings && 0 < warnings.length && (
54	<div className="import-result-warnings">
55	<h3>{__('Warnings:', 'code-snippets')}</h3>
56	<ul>
57	{warnings.map(warning => <li key={warning}>{warning}</li>)}
58	</ul>
59	</div>)}
60	</div>
61	</div>
62	</ImportCard>
63