ElasticPress / 5.0.2

ElasticPress v5.0.2

elasticpress / assets / js / features / apps / features.js

features.js in ElasticPress 5.0.2, at assets/js/features/apps/features.js

272 lines 5.6 KB

Raw Download Zip

1	/**
2	* WordPress dependencies.
3	*/
4	import { Button, Flex, FlexItem, Notice, Panel, PanelBody, TabPanel } from '@wordpress/components';
5	import { useMemo, useState, WPElement } from '@wordpress/element';
6	import { __ } from '@wordpress/i18n';
7
8	/**
9	* Internal dependencies.
10	*/
11	import { useSettingsScreen } from '../../settings-screen';
12	import { syncUrl } from '../config';
13	import { useFeatureSettings } from '../provider';
14	import Feature from '../components/feature';
15	import Tab from '../components/tab';
16
17	/**
18	* Styles.
19	*/
20	import '../style.css';
21
22	/**
23	* Feature settings dashboard app.
24	*
25	* @returns {WPElement} Reports component.
26	*/
27	export default () => {
28	const { createNotice } = useSettingsScreen();
29	const {
30	features,
31	isBusy,
32	isModified,
33	isSyncing,
34	isSyncRequired,
35	resetSettings,
36	saveSettings,
37	setIsSyncing,
38	} = useFeatureSettings();
39
40	/**
41	* URL to start a sync.
42	*/
43	const syncNowUrl = useMemo(() => {
44	const url = new URL(syncUrl);
45
46	url.searchParams.append('do_sync', 'features');
47
48	return url.toString();
49	}, []);
50
51	/**
52	* Generic error notice.
53	*/
54	const errorNotice = __('Could not save feature settings. Please try again.', 'elasticpress');
55
56	/**
57	* Action when a sync is in progress
58	*/
59	const isSyncingActions = [
60	{
61	url: syncUrl,
62	label: __('View sync status', 'elasticpress'),
63	},
64	];
65
66	/**
67	* Notice when a sync is in progress.
68	*/
69	const isSyncingNotice = __('Cannot save settings while a sync is in progress.', 'elasticpress');
70
71	/**
72	* Reset notice.
73	*/
74	const resetNotice = __('Changes to feature settings discarded.', 'elasticpress');
75
76	/**
77	* Action when syncing later.
78	*/
79	const syncLaterActions = [
80	{
81	url: syncNowUrl,
82	label: __('Sync', 'elasticpress'),
83	},
84	];
85
86	/**
87	* Prompt when syncing later.
88	*/
89	const syncLaterConfirm = __(
90	'If you choose to sync later some settings changes may not take effect until the sync is performed. Save and sync later?',
91	'elasticpress',
92	);
93
94	/**
95	* Prompt when syncing now.
96	*/
97	const syncNowConfirm = __(
98	'Saving these settings will begin re-syncing your content. Save and sync now?',
99	'elasticpress',
100	);
101
102	/**
103	* Notice when syncing now.
104	*/
105	const syncNowNotice = __('Feature settings saved. Starting sync…', 'elasticpress');
106
107	/**
108	* Success notice.
109	*/
110	const successNotice = __('Feature settings saved.', 'elasticpress');
111
112	/**
113	* Whether the user has chosen to sync later when saving. Used to show the
114	* busy state on the correct button.
115	*/
116	const [willSyncLater, setWillSyncLater] = useState(false);
117
118	/**
119	* Feature settings tabs.
120	*/
121	const tabs = features
122	.filter((f) => f.isVisible)
123	.map((f) => {
124	return {
125	name: f.slug,
126	title: <Tab feature={f.slug} />,
127	};
128	});
129
130	/**
131	* Error handler.
132	*
133	* @param {Error} e Error object.
134	*/
135	const onError = (e) => {
136	if (e.data === 'is_syncing') {
137	createNotice('error', isSyncingNotice, { actions: isSyncingActions });
138	setIsSyncing(true);
139	return;
140	}
141
142	const errorMessage = `${__(
143	'ElasticPress: Could not save feature settings.',
144	'elasticpress',
145	)}\n${e.message}`;
146
147	console.error(errorMessage); // eslint-disable-line no-console
148
149	createNotice('error', errorNotice);
150	};
151
152	/**
153	* Form submission event handler.
154	*
155	* @param {Event} event Submit event.
156	* @returns {void}
157	*/
158	const onSubmit = async (event) => {
159	event.preventDefault();
160
161	if (isSyncRequired) {
162	// eslint-disable-next-line no-alert
163	if (!window.confirm(syncNowConfirm)) {
164	return;
165	}
166	}
167
168	setWillSyncLater(false);
169
170	try {
171	await saveSettings();
172
173	if (isSyncRequired) {
174	createNotice('success', syncNowNotice);
175
176	window.location = syncNowUrl;
177	} else {
178	createNotice('success', successNotice);
179	}
180	} catch (e) {
181	onError(e);
182	}
183	};
184
185	/**
186	* Save and sync later button click event.
187	*
188	* @returns {void}
189	*/
190	const onClickSyncLater = async () => {
191	// eslint-disable-next-line no-alert
192	if (!window.confirm(syncLaterConfirm)) {
193	return;
194	}
195
196	setWillSyncLater(true);
197
198	try {
199	await saveSettings(false);
200
201	createNotice('success', successNotice, { actions: syncLaterActions });
202	} catch (e) {
203	onError(e);
204	}
205	};
206
207	/**
208	* Form reset event handler.
209	*
210	* @param {Event} event Reset event.
211	* @returns {void}
212	*/
213	const onReset = (event) => {
214	event.preventDefault();
215
216	resetSettings();
217
218	createNotice('success', resetNotice);
219	};
220
221	return (
222	<form onReset={onReset} onSubmit={onSubmit}>
223	<Panel className="ep-dashboard-panel">
224	<PanelBody>
225	{isSyncing ? (
226	<Notice actions={isSyncingActions} isDismissible={false} status="warning">
227	{isSyncingNotice}
228	</Notice>
229	) : null}
230	<TabPanel className="ep-dashboard-tabs" orientation="vertical" tabs={tabs}>
231	{({ name }) => <Feature feature={name} key={name} />}
232	</TabPanel>
233	</PanelBody>
234	</Panel>
235	<Flex justify="start">
236	<FlexItem>
237	<Button
238	disabled={isBusy \|\| isSyncing}
239	isBusy={isBusy && !willSyncLater}
240	type="submit"
241	variant="primary"
242	>
243	{isSyncRequired
244	? __('Save and sync now', 'elasticpress')
245	: __('Save changes', 'elasticpress')}
246	</Button>
247	</FlexItem>
248	{isSyncRequired ? (
249	<FlexItem>
250	<Button
251	disabled={isBusy \|\| isSyncing}
252	isBusy={isBusy && willSyncLater}
253	onClick={onClickSyncLater}
254	type="button"
255	variant="secondary"
256	>
257	{__('Save and sync later', 'elasticpress')}
258	</Button>
259	</FlexItem>
260	) : null}
261	{isModified ? (
262	<FlexItem>
263	<Button disabled={isBusy} type="reset" variant="tertiary">
264	{__('Discard changes', 'elasticpress')}
265	</Button>
266	</FlexItem>
267	) : null}
268	</Flex>
269	</form>
270	);
271	};
272