@@ -34,7 +35,15 @@ export const EditorSidebar = () => {
{snippet.id
?
+ window.location.replace(addQueryArgs(window.CODE_SNIPPETS?.urls.manage, { result: 'deleted' }))}
+ onError={error =>
+ handleRequestError(error, __('Could not delete snippet.', 'code-snippets'))}
+ />
: null}
diff --git a/src/js/components/EditorSidebar/actions/ExportButtons.tsx b/src/js/components/EditorSidebar/actions/ExportButtons.tsx
index d4b08d81..eb2cfa39 100644
--- a/src/js/components/EditorSidebar/actions/ExportButtons.tsx
+++ b/src/js/components/EditorSidebar/actions/ExportButtons.tsx
@@ -1,8 +1,8 @@
import React from 'react'
import { __ } from '@wordpress/i18n'
import { useRestAPI } from '../../../hooks/useRestAPI'
-import { Button } from '../../common/Button'
import { downloadSnippetExportFile } from '../../../utils/files'
+import { Button } from '../../common/Button'
import { useSnippetForm } from '../../../hooks/useSnippetForm'
import type { Snippet } from '../../../types/Snippet'
import type { SnippetsExport } from '../../../types/schema/SnippetsExport'
diff --git a/src/js/components/SnippetForm/SnippetForm.tsx b/src/js/components/SnippetForm/SnippetForm.tsx
index 0094e93b..c9462e03 100644
--- a/src/js/components/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/SnippetForm/SnippetForm.tsx
@@ -9,6 +9,7 @@ import { handleUnknownError } from '../../utils/errors'
import { createSnippetObject, getSnippetType, isCondition, validateSnippet } from '../../utils/snippets/snippets'
import { WithSnippetFormContext, useSnippetForm } from '../../hooks/useSnippetForm'
import { ConfirmDialog } from '../common/ConfirmDialog'
+import { Toolbar } from '../common/Toolbar'
import { UpsellDialog } from '../common/UpsellDialog'
import { ConditionModalButton } from '../ConditionModal/ConditionModalButton'
import { EditorSidebar } from '../EditorSidebar'
@@ -90,8 +91,8 @@ const EditForm: React.FC
-
-
- = {
html: 'application/x-httpd-php'
}
-const OPTIONS: SelectOption[] = [
- { value: 'php', label: __('Functions', 'code-snippets') },
- { value: 'html', label: __('Content', 'code-snippets') },
- { value: 'css', label: __('Styles', 'code-snippets') },
- { value: 'js', label: __('Scripts', 'code-snippets') },
- { value: 'cond', label: __('Conditions', 'code-snippets') }
-]
+const OPTIONS: SelectOption[] =
+ SNIPPET_TYPES.map(type =>
+ ({ value: type, label: SNIPPET_TYPE_LABELS[type] }))
const SnippetTypeOption: React.FC> = ({ label, value }) =>
-
-
- {Object.entries(shortcuts).map(([name, { label, mod, key }]) =>
-
+export const CodeEditorShortcuts: React.FC = ({ editorTheme }) => {
+ const { codeEditorInstance } = useSnippetForm()
+
+ const shortcutKeys: Map | undefined = useMemo(() => {
+ if (codeEditorInstance) {
+ const extraKeys = codeEditorInstance.codemirror.getOption('extraKeys')
+ const keyMapName = codeEditorInstance.codemirror.getOption('keyMap')
+
+ const combinedKeyMap: KeyMap = {
+ ...isMacOS() ? fallbackKeyMapMac : fallbackKeyMap,
+ ...keyMapName && getKeyMap(keyMapName),
+ ...'object' === typeof extraKeys ? extraKeys : undefined
+ }
+
+ return unpackKeyMap(combinedKeyMap)
+ }
+
+ return undefined
+ },
+ [codeEditorInstance]
+ )
+
+ return shortcutKeys
+ ?
+ : null
+}
diff --git a/src/js/components/SnippetForm/fields/SnippetTypeInput.tsx b/src/js/components/SnippetForm/fields/SnippetTypeInput.tsx
index 1e2b1200..989b795b 100644
--- a/src/js/components/SnippetForm/fields/SnippetTypeInput.tsx
+++ b/src/js/components/SnippetForm/fields/SnippetTypeInput.tsx
@@ -3,9 +3,9 @@ import classnames from 'classnames'
import { __, _x } from '@wordpress/i18n'
import Select from 'react-select'
import { useSnippetForm } from '../../../hooks/useSnippetForm'
-import { SNIPPET_TYPE_SCOPES } from '../../../types/Snippet'
+import { SNIPPET_TYPES, SNIPPET_TYPE_SCOPES } from '../../../types/Snippet'
import { isLicensed } from '../../../utils/screen'
-import { getSnippetType, isProType } from '../../../utils/snippets/snippets'
+import { SNIPPET_TYPE_LABELS, getSnippetType, isProType } from '../../../utils/snippets/snippets'
import { Badge } from '../../common/Badge'
import type { Dispatch, SetStateAction } from 'react'
import type { SnippetCodeType, SnippetType } from '../../../types/Snippet'
@@ -23,13 +23,9 @@ const EDITOR_MODES: Record| {label} | -
- {(Array.isArray(mod) ? mod : [mod]).map(modifier =>
-
- |
-
+
+
+
-
+
+
+ {Object.entries(keyMapLabels).map(([action, label]) => {
+ const keys = shortcutKeys.get(action)
+ return keys
+ ?
+
| {label} | +
+ {isMacOS()
+ ? |
+
diff --git a/src/js/components/SnippetForm/page/PageHeading.tsx b/src/js/components/SnippetForm/page/PageHeading.tsx
index 041dd3eb..b769f6d9 100644
--- a/src/js/components/SnippetForm/page/PageHeading.tsx
+++ b/src/js/components/SnippetForm/page/PageHeading.tsx
@@ -9,7 +9,7 @@ const OPTIONS = window.CODE_SNIPPETS_EDIT
const getAddNewHeading = (snippet: Snippet): string =>
'condition' === snippet.scope
? __('Add New Condition', 'code-snippets')
- : __('Add New Snippet', 'code-snippets')
+ : __('Create New Snippet', 'code-snippets')
export const PageHeading: React.FC = () => {
const { snippet, updateSnippet, setCurrentNotice } = useSnippetForm()
diff --git a/src/js/components/SnippetsTable/SnippetsListTable.tsx b/src/js/components/SnippetsTable/SnippetsListTable.tsx
new file mode 100644
index 00000000..fdb1f09c
--- /dev/null
+++ b/src/js/components/SnippetsTable/SnippetsListTable.tsx
@@ -0,0 +1,196 @@
+import { __, _x, sprintf } from '@wordpress/i18n'
+import React, { Fragment, useMemo } from 'react'
+import { addQueryArgs } from '@wordpress/url'
+import { useFilteredSnippets } from '../../hooks/useFilteredSnippets'
+import { useRestAPI } from '../../hooks/useRestAPI'
+import { useSnippetsFilters } from '../../hooks/useSnippetsFilters'
+import { useSnippetsList } from '../../hooks/useSnippetsList'
+import { handleUnknownError } from '../../utils/errors'
+import { REST_API_NAMESPACE, REST_BASE } from '../../utils/restAPI'
+import { getSnippetType } from '../../utils/snippets/snippets'
+import { ListTable } from '../common/ListTable'
+import { SubmitButton } from '../common/SubmitButton'
+import { TableColumns } from './TableColumns'
+import type { ListTableBulkAction } from '../common/ListTable'
+import type { Snippet, SnippetStatus } from '../../types/Snippet'
+
+const actions: ListTableBulkAction[] = [
+ {
+ name: __('Activate', 'code-snippets'),
+ apply: () => Promise.resolve()
+ },
+ {
+ name: __('Deactivate', 'code-snippets'),
+ apply: () => Promise.resolve()
+ },
+ {
+ name: __('Clone', 'code-snippets'),
+ apply: () => Promise.resolve()
+ },
+ {
+ name: __('Export', 'code-snippets'),
+ apply: () => Promise.resolve()
+ },
+ {
+ name: __('Export code', 'code-snippets'),
+ apply: () => Promise.resolve()
+ },
+ {
+ name: __('Delete', 'code-snippets'),
+ apply: () => Promise.resolve()
+ }
+]
+
+const STATUS_LABELS: [SnippetStatus | undefined, string][] = [
+ [undefined, __('All', 'code-snippets')],
+ ['active', __('Active', 'code-snippets')],
+ ['inactive', __('Inactive', 'code-snippets')],
+ ['recently_activated', __('Recently Activated', 'code-snippets')]
+]
+
+const SnippetStatusCounts = () => {
+ const { currentStatus, setCurrentStatus } = useSnippetsFilters()
+ const { snippetsByStatus } = useFilteredSnippets()
+ const visibleStatuses = STATUS_LABELS.filter(([status]) => snippetsByStatus.has(status))
+
+ return (
+ = ({ visibleSnippets }) => {
+ const { currentTag, setCurrentTag } = useSnippetsFilters()
+
+ const tagsList: Set = useMemo(
+ () => visibleSnippets.reduce((tags, snippet) => {
+ snippet.tags.forEach(tag => tags.add(tag))
+ return tags
+ }, new Set()),
+ [visibleSnippets])
+
+ return 0 < tagsList.size
+ ? snippet.id}
+ columns={TableColumns}
+ actions={actions}
+ itemsPerPage={window.CODE_SNIPPETS_MANAGE?.snippetsPerPage}
+ extraTableNav={which =>
+ <>
+ {'top' === which && = ({ type, setIsUpgradeDialogOpen }) => {
+ const { currentType, setCurrentType } = useSnippetsFilters()
+ const tabName = type ?? 'all'
+
+ return (
+ {
+ event.preventDefault()
+
+ if (type && !isLicensed() && isProType(type)) {
+ setIsUpgradeDialogOpen(true)
+ } else {
+ setCurrentType(type)
+ }
+ }}
+ >
+
+ {type ? SNIPPET_TYPE_LABELS[type] : __('All Snippets', 'code-snippets')}
+
+ {type &&
+
+
+
+
+
diff --git a/src/js/components/SnippetsTable/TableColumns.tsx b/src/js/components/SnippetsTable/TableColumns.tsx
new file mode 100644
index 00000000..55b7649a
--- /dev/null
+++ b/src/js/components/SnippetsTable/TableColumns.tsx
@@ -0,0 +1,248 @@
+import React, { Fragment, useState } from 'react'
+import { __, sprintf } from '@wordpress/i18n'
+import { addQueryArgs } from '@wordpress/url'
+import { humanTimeDiff } from '@wordpress/date'
+import { RawHTML } from '@wordpress/element'
+import { useFilteredSnippets } from '../../hooks/useFilteredSnippets'
+import { useRestAPI } from '../../hooks/useRestAPI'
+import { useSnippetsFilters } from '../../hooks/useSnippetsFilters'
+import { useSnippetsList } from '../../hooks/useSnippetsList'
+import { handleUnknownError } from '../../utils/errors'
+import { downloadSnippetExportFile } from '../../utils/files'
+import { isNetworkAdmin } from '../../utils/screen'
+import { getSnippetDisplayName, getSnippetEditUrl, getSnippetType } from '../../utils/snippets/snippets'
+import { Badge } from '../common/Badge'
+import { Button } from '../common/Button'
+import { DeleteButton } from '../common/DeleteButton'
+import type { Snippet } from '../../types/Snippet'
+import type { ListTableColumn } from '../common/ListTable'
+
+interface ColumnProps {
+ snippet: Snippet
+}
+
+const ActivateColumn: React.FC = ({ snippet }) => {
+ const { snippetsAPI: { activate, deactivate } } = useRestAPI()
+ const { activeByCondition } = useFilteredSnippets()
+ const { refreshSnippetsList } = useSnippetsList()
+
+ switch (snippet.scope) {
+ case 'single-use':
+ return (
+
+
+
+ )
+
+ case 'condition':
+ return (
+
+ {activeByCondition.get(snippet.id)?.length ?? 0}
+
+ )
+
+ default: {
+ const actionText = snippet.network && !snippet.shared_network
+ ? snippet.active ? __('Network Deactivate', 'code-snippets') : __('Network Activate', 'code-snippets')
+ : snippet.active ? __('Deactivate', 'code-snippets') : __('Activate', 'code-snippets')
+
+ return (
+ <>
+
+
+ {
+ (snippet.active ? deactivate(snippet) : activate(snippet))
+ .then(() => refreshSnippetsList())
+ .catch(handleUnknownError)
+ }}
+ />
+
+ )
+ }
+ }
+}
+
+const RowActions: React.FC = ({ snippet }) => {
+ const { snippetsAPI } = useRestAPI()
+ const { refreshSnippetsList } = useSnippetsList()
+
+ if (!isNetworkAdmin() && snippet.network && !snippet.shared_network) {
+ return (
+ = ({ snippet }) =>
+ <>
+ {isNetworkAdmin() || !snippet.network || window.CODE_SNIPPETS_MANAGE?.hasNetworkCap
+ ? {getSnippetDisplayName(snippet)}
+ : getSnippetDisplayName(snippet)}
+
+ {snippet.shared_network && {__('Shared on Network', 'code-snippets')}}
+
+ = ({ snippet }) => {
+ const { setCurrentType } = useSnippetsFilters()
+ const type = getSnippetType(snippet)
+
+ return (
+ {
+ event.preventDefault()
+ setCurrentType(type)
+ }}
+ >
+ = ({ snippet }) =>
+ snippet.tags.map((tag, index) =>
+
+
+ {tag}
+
+ {index < snippet.tags.length - 1 ? ', ' : ''}
+ )
+
+const DateColumn: React.FC = ({ snippet }) =>
+ snippet.modified
+ ?
+
+
+ : <>—
+
+const PriorityColumn: React.FC = ({ snippet }) => {
+ const [value, setValue] = useState(snippet.priority)
+ const { snippetsAPI } = useRestAPI()
+ const { refreshSnippetsList } = useSnippetsList()
+ const id = `snippet-${snippet.id}-priority`
+
+ const handleUpdate = () => {
+ snippetsAPI.update({ ...snippet, priority: value })
+ .then(response => {
+ if (response.id === snippet.id) {
+ setValue(response.priority)
+ }
+ })
+ .then(refreshSnippetsList)
+ .catch(handleUnknownError)
+ }
+
+ return (
+
+ )
+}
+
+export const TableColumns: ListTableColumn[] = [
+ {
+ id: 'activate',
+ render: snippet => {snippet.desc}
+ },
+ {
+ id: 'tags',
+ title: __('Tags', 'code-snippets'),
+ render: snippet => = {
+ Added: __('New features', 'code-snippets'),
+ Changed: __('Improvements', 'code-snippets'),
+ Deprecated: __('Deprecated features', 'code-snippets'),
+ Removed: __('Removed features', 'code-snippets'),
+ Fixed: __('Bug fixes', 'code-snippets'),
+ Security: __('Security updates', 'code-snippets'),
+ Other: __('Other', 'code-snippets')
+}
+
+const CHANGELOG_ICONS: Record = {
+ Added: 'lightbulb',
+ Changed: 'chart-line',
+ Deprecated: 'remove',
+ Removed: 'trash',
+ Fixed: 'buddicons-replies',
+ Security: 'shield',
+ Other: 'open-folder'
+}
+
+const PLUGIN_TYPE_LABELS: Record = {
+ core: __('Core', 'code-snippets'),
+ pro: __('Pro', 'code-snippets')
+}
+
+const CHANGELOG_DATA = window.CODE_SNIPPETS_WELCOME?.changelog
+
+interface ChangelogSectionProps {
+ section: ChangelogSectionTitle
+ entries: Record
+}
+
+const ChangelogSection: React.FC = ({ section, entries }) =>
+ <>
+ = ({ partners }) =>
+ <>
+
+ {partners.map(({ title, follow_url, image_url }) =>
+
+
+ 
+
+
+
+ )}
+
+
+
+interface ArticlesProps {
+ articles: ImageLinkSchema[]
+}
+
+const Articles: React.FC = ({ articles }) =>
+ <>
+
+ {articles.map(({ title, follow_url, image_url, description, category }) =>
+
+
+
+
+
+
+ )}
+
+
+
+export const WelcomePage = () =>
+ <>
+ | void
+ onError?: (error: unknown) => void
+}
+
+export const DeleteButton: React.FC = ({
+ snippet,
+ onSuccess,
+ onError,
+ className = 'delete-button',
+ setIsWorking,
+ ...buttonProps
+}) => {
const { snippetsAPI } = useRestAPI()
- const { snippet, setIsWorking, isWorking, handleRequestError } = useSnippetForm()
const [isDialogOpen, setIsDialogOpen] = useState(false)
return (
<>
-
+ {visibleStatuses.map(([status, label], index) =>
+
- + { + event.preventDefault() + setCurrentStatus(status) + }} + > + {`${label} `} + { + // translators: %d: number of snippets in the current view. + sprintf(_x('(%d)', 'table view count', 'code-snippets'), snippetsByStatus.get(status)?.length ?? 0) + } + + + {index < visibleStatuses.length - 1 && ' | '} +
+ {
+ event.preventDefault()
+ api.del(`${REST_BASE}/${REST_API_NAMESPACE}/v1/recently-active`)
+ .then(refreshSnippetsList)
+ .catch(handleUnknownError)
+ }}
+ />
+
+ : null
+}
+
+interface ExtraTableNavProps {
+ visibleSnippets: Snippet[]
+}
+
+const FilterByTagControl: React.FC
+
+
+ : null
+}
+
+const SearchBox = () => {
+ const { searchQuery, setSearchQuery } = useSnippetsFilters()
+
+ return (
+ + + setSearchQuery(event.target.value)} + placeholder={__('Search snippets', 'code-snippets')} + /> +
+ ) +} + +const NoItemsMessage = () => { + const { currentType, currentTag, searchQuery } = useSnippetsFilters() + + return searchQuery || currentTag + ? <> + {__('No snippets were found matching the current search query.', 'code-snippets')} + {__(' Please enter a new query or use the "Clear Filters" button above.', 'code-snippets')} + + : <>{currentType + ? __("It looks like you don't have any snippets of this type.", 'code-snippets') + : __("It looks like you don't have any snippets.", 'code-snippets')} + + {' '} + + {__('Perhaps you would like to add a new one?', 'code-snippets')} + + +} + +export const SnippetsListTable: React.FC = () => { + const { currentStatus } = useSnippetsFilters() + const { snippetsByStatus } = useFilteredSnippets() + + return ( + <> +
+
+ )
+}
+
+const SnippetsTableInner = () => {
+ const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+
+ return (
+ {__('Manage Code Snippets', 'code-snippets')}
+ + {searchQueryText || currentTag + ? + {__('Search results', 'code-snippets')} + + {/* translators: %s: search query. */} + {searchQueryText && sprintf(__(' for “%s”', 'code-snippets'), searchQueryText)} + + {/* translators: %s: search query. */} + {searchLineNumber && sprintf(__(' on line “%d”', 'code-snippets'), searchLineNumber)} + + {/* translators: %s: tag name. */} + {currentTag && sprintf(__(' in tag “%s”', 'code-snippets'), currentTag)} + + {' '} + + + : null} + + + {__('Create new snippet', 'code-snippets')} + +
+
+
+
+
+
+
+
+ )
+}
+
+export const SnippetsTable: React.FC = () =>
+
+
+
+
+ {snippet.active
+ ? {__('Network Active', 'code-snippets')}
+ : {__('Network Only', 'code-snippets')}}
+
+ )
+ }
+
+ if (snippet.shared_network && !window.CODE_SNIPPETS_MANAGE?.hasNetworkCap) {
+ return undefined
+ }
+
+ return (
+
+ {__('Edit', 'code-snippets')}{' | '}
+
+ {' | '}
+
+ {' | '}
+
+
+ )
+}
+
+const NameColumn: React.FC+ + {CHANGELOG_LABELS[section]} +
+-
+ {Object.entries(entries).map(([pluginType, changes]) =>
+ changes.map(change =>
+
- + + {PLUGIN_TYPE_LABELS[pluginType] ?? pluginType} + + {change} + ) + )} +
+
+
+
diff --git a/src/js/components/WelcomePage/WelcomePage.tsx b/src/js/components/WelcomePage/WelcomePage.tsx
new file mode 100644
index 00000000..6ef33fba
--- /dev/null
+++ b/src/js/components/WelcomePage/WelcomePage.tsx
@@ -0,0 +1,99 @@
+import { __ } from '@wordpress/i18n'
+import React, { useState } from 'react'
+import { Toolbar } from '../common/Toolbar'
+import { Changelog } from './Changelog'
+import type { ImageLinkSchema } from '../../types/schema/WelcomeSchema'
+
+const DATA = window.CODE_SNIPPETS_WELCOME
+
+const HeroImage = () => {
+ const [isImageLoaded, setImageLoaded] = useState(false)
+
+ return (
+ {__('Latest changes', 'code-snippets')}
+ + {__('View changelog', 'code-snippets')} + +
+ {CHANGELOG_DATA?.map(({ version, date, entries }) =>
+
+
+ {/* translators: %s: version number. */}
+
+
+ {CHANGELOG_SECTIONS.map(section =>
+ entries[section]
+ ?
+ )}
+
+ {sprintf(__('Version %s', 'code-snippets'), version)}
+{date}
+
+
+
+
+ {!isImageLoaded && }
+ 
setImageLoaded(true)}
+ />
+
+
+ )
+}
+
+interface PartnersProps {
+ partners: ImageLinkSchema[]
+}
+
+const Partners: React.FC{DATA?.hero.name}
+ + {__('Read more', 'code-snippets')} + +{__('Exclusive deals from our partners', 'code-snippets')}
+{title}
+ + {__('Visit', 'code-snippets')} + +{__('Helpful articles', 'code-snippets')}
+{category}
+{title}
+{description}
+ + {__('Read more', 'code-snippets')} + +
+
+
diff --git a/src/js/components/WelcomePage/index.ts b/src/js/components/WelcomePage/index.ts
new file mode 100644
index 00000000..ef5b08c9
--- /dev/null
+++ b/src/js/components/WelcomePage/index.ts
@@ -0,0 +1 @@
+export * from './WelcomePage'
diff --git a/src/js/components/EditorSidebar/actions/DeleteButton.tsx b/src/js/components/common/DeleteButton.tsx
similarity index 53%
rename from src/js/components/EditorSidebar/actions/DeleteButton.tsx
rename to src/js/components/common/DeleteButton.tsx
index 8f5f7d3b..97eaed04 100644
--- a/src/js/components/EditorSidebar/actions/DeleteButton.tsx
+++ b/src/js/components/common/DeleteButton.tsx
@@ -1,22 +1,34 @@
-import { addQueryArgs } from '@wordpress/url'
import React, { useState } from 'react'
import { __ } from '@wordpress/i18n'
-import { useRestAPI } from '../../../hooks/useRestAPI'
-import { Button } from '../../common/Button'
-import { ConfirmDialog } from '../../common/ConfirmDialog'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import { useRestAPI } from '../../hooks/useRestAPI'
+import { Button } from './Button'
+import { ConfirmDialog } from './ConfirmDialog'
+import type { Snippet } from '../../types/Snippet'
+import type { ButtonProps } from './Button'
-export const DeleteButton: React.FC = () => {
+export interface DeleteButtonProps extends ButtonProps {
+ snippet: Snippet
+ setIsWorking?: (isWorking: boolean) => void
+ onSuccess?: () => Promise{__('Resources and Updates', 'code-snippets')}
+ +
+
+
+ {DATA?.features &&