← All changes | js/components/ManageMenu/ManageMenu.tsx +29 -24 3.10.0 → 4.0.0-beta.2 View file →

		@@ -1,13 +1,11 @@
1	1	import React, { useEffect, useMemo, useState } from 'react'
2	2	import { __ } from '@wordpress/i18n'
3	3	import { createInterpolateElement } from '@wordpress/element'
4	4	import { fetchConstQueryParam, fetchQueryParam, updateQueryParams } from '../../utils/urls'
5		-import { DismissibleNotice } from '../common/Notice'
6		-import { SUBPAGES, Toolbar } from '../common/Toolbar'
7		-import { UpsellPage } from '../common/UpsellDialog'
8		-import { CommunityCloud } from './CommunityCloud/CommunityCloud'
9		-import { SnippetsTable } from './SnippetsTable'
	5	+import { DismissibleNotice, type NoticeType } from '../common/Notice'
	6	+import { Toolbar } from '../common/Toolbar'
	7	+import { SUBPAGES, SUBPAGE_ENTRIES, type SubpageName } from './subpages'
10	8
11	9	const repositionTableOptionsSettings = () => {
12	10	const screenOptionsForm = document.getElementById('adv-settings')
13	11	const tableOptions = screenOptionsForm?.querySelector<HTMLFieldSetElement>('fieldset.table-options-prefs')
		@@ -23,13 +21,28 @@
23	21	screenOptionsForm.insertBefore(tableOptions, columns)
24	22	}
25	23	}
26	24
27		-const getNoticeText = (result: string) => {
	25	+const getNotice = (result: string): { text: string, type: NoticeType } | undefined => {
28	26	switch (result) {
29	27	case 'deleted':
30		- return __('Snippet <strong>deleted</strong>.', 'code-snippets')
	28	+ return { text: __('Snippet <strong>deleted</strong>.', 'code-snippets'), type: 'success' }
31	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	+
32	45	default:
33	46	return undefined
34	47	}
35	48	}
		@@ -34,42 +47,34 @@
34	47	}
35	48	}
36	49
37	50	const PageNotices = () => {
38		- const [noticeText, setNoticeText] = useState(() => {
	51	+ const [notice, setNotice] = useState(() => {
39	52	const result = fetchQueryParam('result')
40	53	updateQueryParams({ result: undefined })
41		- return result && getNoticeText(result)
	54	+ return result ? getNotice(result) : undefined
42	55	})
43	56
44		- return noticeText
	57	+ return notice
45	58	? <DismissibleNotice
46	59	className="code-snippets-notice"
47	60	onDismiss={() => {
48		- setNoticeText(undefined)
	61	+ setNotice(undefined)
49	62	}}
50		- type="success">
51		- <p>{createInterpolateElement(noticeText, { strong: <strong /> })}</p>
	63	+ type={notice.type}>
	64	+ <p>{createInterpolateElement(notice.text, { strong: <strong /> })}</p>
52	65	</DismissibleNotice>
53	66	: null
54	67	}
55	68
56	69	interface PageContentParams {
57		- subpage: typeof SUBPAGES[number]
	70	+ subpage: SubpageName
58	71	}
59	72
60	73	const PageContent: React.FC<PageContentParams> = ({ subpage }) => {
61		- switch (subpage) {
62		- case 'snippets':
63		- return <SnippetsTable />
	74	+ const { Component } = SUBPAGE_ENTRIES[subpage]
64	75
65		- case 'cloud-community':
66		- return <CommunityCloud />
67		-
68		- case 'blueprints':
69		- case 'cloud-library':
70		- return <UpsellPage />
71		- }
	76	+ return <Component />
72	77	}
73	78
74	79	export const ManageMenu = () => {
75	80	const subpage = useMemo(() =>