← All changes | js/components/ManageMenu/ManageMenu.tsx +65 -10 4.0.0-beta.1 → trunk View file →

		@@ -1,9 +1,11 @@
1		-import React, { useEffect, useMemo } from 'react'
2		-import { fetchQueryParam } from '../../utils/urls'
	1	+import React, { useEffect, useMemo, useState } from 'react'
	2	+import { __ } from '@wordpress/i18n'
	3	+import { createInterpolateElement } from '@wordpress/element'
	4	+import { fetchConstQueryParam, fetchQueryParam, updateQueryParams } from '../../utils/urls'
	5	+import { DismissibleNotice, type NoticeType } from '../common/Notice'
3	6	import { Toolbar } from '../common/Toolbar'
4		-import { CommunityCloud } from './CommunityCloud/CommunityCloud'
5		-import { SnippetsTable } from './SnippetsTable'
	7	+import { SUBPAGES, SUBPAGE_ENTRIES, type SubpageName } from './subpages'
6	8
7	9	const repositionTableOptionsSettings = () => {
8	10	const screenOptionsForm = document.getElementById('adv-settings')
9	11	const tableOptions = screenOptionsForm?.querySelector<HTMLFieldSetElement>('fieldset.table-options-prefs')
		@@ -19,13 +21,68 @@
19	21	screenOptionsForm.insertBefore(tableOptions, columns)
20	22	}
21	23	}
22	24
	25	+const getNotice = (result: string): { text: string, type: NoticeType } | undefined => {
	26	+ switch (result) {
	27	+ case 'deleted':
	28	+ return { text: __('Snippet <strong>deleted</strong>.', 'code-snippets'), type: 'success' }
	29	+
	30	+ case 'executed':
	31	+ return { text: __('Snippet <strong>executed</strong>.', 'code-snippets'), type: 'success' }
	32	+
	33	+ case 'run-once-failed':
	34	+ return {
	35	+ text: __('The snippet could not be run. Check that its code is valid and try again.', 'code-snippets'),
	36	+ type: 'error'
	37	+ }
	38	+
	39	+ case 'run-once-safe-mode':
	40	+ return {
	41	+ text: __('Snippet execution is disabled on this site, so the snippet was not run.', 'code-snippets'),
	42	+ type: 'warning'
	43	+ }
	44	+
	45	+ default:
	46	+ return undefined
	47	+ }
	48	+}
	49	+
	50	+const PageNotices = () => {
	51	+ const [notice, setNotice] = useState(() => {
	52	+ const result = fetchQueryParam('result')
	53	+ updateQueryParams({ result: undefined })
	54	+ return result ? getNotice(result) : undefined
	55	+ })
	56	+
	57	+ return notice
	58	+ ? <DismissibleNotice
	59	+ className="code-snippets-notice"
	60	+ onDismiss={() => {
	61	+ setNotice(undefined)
	62	+ }}
	63	+ type={notice.type}>
	64	+ <p>{createInterpolateElement(notice.text, { strong: <strong /> })}</p>
	65	+ </DismissibleNotice>
	66	+ : null
	67	+}
	68	+
	69	+interface PageContentParams {
	70	+ subpage: SubpageName
	71	+}
	72	+
	73	+const PageContent: React.FC<PageContentParams> = ({ subpage }) => {
	74	+ const { Component } = SUBPAGE_ENTRIES[subpage]
	75	+
	76	+ return <Component />
	77	+}
	78	+
23	79	export const ManageMenu = () => {
24		- const subpage = useMemo(() => fetchQueryParam('subpage'), [])
	80	+ const subpage = useMemo(() =>
	81	+ fetchConstQueryParam('subpage', SUBPAGES) ?? SUBPAGES[0], [])
25	82
26	83	useEffect(() => {
27		- if ('cloud-community' !== subpage) {
	84	+ if ('snippets' === subpage) {
28	85	repositionTableOptionsSettings()
29	86	}
30	87	}, [subpage])
31	88
		@@ -31,11 +88,9 @@
31	88
32	89	return (
33	90	<>
34	91	<Toolbar />
35		-
36		- {'cloud-community' === subpage
37		- ? <CommunityCloud />
38		- : <SnippetsTable />}
	92	+ <PageNotices />
	93	+ <PageContent subpage={subpage} />
39	94	</>
40	95	)
41	96	}