@@ -41,7 +42,15 @@ export const EditorSidebar: React.FC = ({ setIsUpgradeDialog
{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/EditMenu/EditorSidebar/actions/ExportButtons.tsx
similarity index 77%
rename from src/js/components/EditorSidebar/actions/ExportButtons.tsx
rename to src/js/components/EditMenu/EditorSidebar/actions/ExportButtons.tsx
index d4b08d818..25ba92d54 100644
--- a/src/js/components/EditorSidebar/actions/ExportButtons.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/actions/ExportButtons.tsx
@@ -1,11 +1,11 @@
import React from 'react'
import { __ } from '@wordpress/i18n'
-import { useRestAPI } from '../../../hooks/useRestAPI'
-import { Button } from '../../common/Button'
-import { downloadSnippetExportFile } from '../../../utils/files'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
-import type { Snippet } from '../../../types/Snippet'
-import type { SnippetsExport } from '../../../types/schema/SnippetsExport'
+import { useRestAPI } from '../../../../hooks/useRestAPI'
+import { useSnippetForm } from '../../../../hooks/useSnippetForm'
+import { downloadSnippetExportFile } from '../../../../utils/files'
+import { Button } from '../../../common/Button'
+import type { SnippetsExport } from '../../../../types/schema/SnippetsExport'
+import type { Snippet } from '../../../../types/Snippet'
interface ExportButtonProps {
name: string
diff --git a/src/js/components/EditorSidebar/actions/ShortcodeInfo.tsx b/src/js/components/EditMenu/EditorSidebar/actions/ShortcodeInfo.tsx
similarity index 94%
rename from src/js/components/EditorSidebar/actions/ShortcodeInfo.tsx
rename to src/js/components/EditMenu/EditorSidebar/actions/ShortcodeInfo.tsx
index c5128ada0..8edc1308e 100644
--- a/src/js/components/EditorSidebar/actions/ShortcodeInfo.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/actions/ShortcodeInfo.tsx
@@ -1,10 +1,10 @@
import React, { useState } from 'react'
import { CheckboxControl, ExternalLink, Modal } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
-import { Button } from '../../common/Button'
-import { CopyToClipboardButton } from '../../common/CopyToClipboardButton'
-import type { Dispatch, SetStateAction } from 'react'
+import { useSnippetForm } from '../../../../hooks/useSnippetForm'
+import { Button } from '../../../common/Button'
+import { CopyToClipboardButton } from '../../../common/CopyToClipboardButton'
+import type { Dispatch, SetStateAction} from 'react'
type ShortcodeAtts = Record
+
+
+
+ : null
+}
diff --git a/src/js/components/SnippetForm/fields/DescriptionEditor.tsx b/src/js/components/EditMenu/SnippetForm/fields/DescriptionEditor.tsx
similarity index 96%
rename from src/js/components/SnippetForm/fields/DescriptionEditor.tsx
rename to src/js/components/EditMenu/SnippetForm/fields/DescriptionEditor.tsx
index 659635085..8e590d729 100644
--- a/src/js/components/SnippetForm/fields/DescriptionEditor.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/DescriptionEditor.tsx
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect } from 'react'
import { __ } from '@wordpress/i18n'
import domReady from '@wordpress/dom-ready'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import { useSnippetForm } from '../../../../hooks/useSnippetForm'
export const EDITOR_ID = 'snippet_description'
diff --git a/src/js/components/SnippetForm/fields/NameInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/NameInput.tsx
similarity index 91%
rename from src/js/components/SnippetForm/fields/NameInput.tsx
rename to src/js/components/EditMenu/SnippetForm/fields/NameInput.tsx
index eb3ae0cf0..0f3f7164c 100644
--- a/src/js/components/SnippetForm/fields/NameInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/NameInput.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { __ } from '@wordpress/i18n'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import { useSnippetForm } from '../../../../hooks/useSnippetForm'
export const NameInput: React.FC = () => {
const { snippet, setSnippet, isReadOnly } = useSnippetForm()
diff --git a/src/js/components/SnippetForm/fields/SnippetLocationInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx
similarity index 87%
rename from src/js/components/SnippetForm/fields/SnippetLocationInput.tsx
rename to src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx
index 2a39ac32d..4fa704ee3 100644
--- a/src/js/components/SnippetForm/fields/SnippetLocationInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx
@@ -1,11 +1,11 @@
import { __ } from '@wordpress/i18n'
import React from 'react'
import Select from 'react-select'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
-import { SNIPPET_TYPE_SCOPES } from '../../../types/Snippet'
-import { getSnippetType, isCondition } from '../../../utils/snippets/snippets'
-import type { SnippetCodeScope } from '../../../types/Snippet'
-import type { SelectOption } from '../../../types/SelectOption'
+import { useSnippetForm } from '../../../../hooks/useSnippetForm'
+import { SNIPPET_TYPE_SCOPES } from '../../../../types/Snippet'
+import { getSnippetType, isCondition } from '../../../../utils/snippets/snippets'
+import type { SnippetCodeScope } from '../../../../types/Snippet'
+import type { SelectOption } from '../../../../types/SelectOption'
const SCOPE_ICONS: Record
+
+
+ {Object.entries(keyMapLabels).map(([action, label]) => {
+ const keys = shortcutKeys.get(action)
+ return keys
+ ?
+
+ | {label} | +
+ {isMacOS()
+ ? |
+
{__('Duplicate Snippets', 'code-snippets')}
-- {__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')} -
- - -
-
-
-
- {result.success ? '✓' : '✕'}
-
-
-
-
- - {result.success - ? __('Import Successful!', 'code-snippets') - : __('Import Failed', 'code-snippets') - } -
-- {result.message} -
- - {result.success && ( -- {__('Go to ', 'code-snippets')} - - {__('All Snippets', 'code-snippets')} - - {__(' to activate your imported snippets.', 'code-snippets')} -
- )} - - {result.warnings && result.warnings.length > 0 && ( -
-
- )}
- - {__('Warnings:', 'code-snippets')} -
--
- {result.warnings.map((warning, index) => (
-
- - {warning} - - ))} -
{__('Import options', 'code-snippets')}
- -- {__('Loading snippets...', 'code-snippets')} -
- )} -{__('Upload one or more Code Snippets export files and the snippets will be imported.', 'code-snippets')}
- +{__('Afterward, you will need to visit the ', 'code-snippets')} @@ -83,10 +79,10 @@ export const FileUploadForm: React.FC = () => { {__(' page to activate the imported snippets.', 'code-snippets')}
- {currentStep === 'upload' && ( + {'upload' === currentStep && <> - {(!importWorkflow.uploadResult || !importWorkflow.uploadResult.success) && ( + {!importWorkflow.uploadResult?.success && <>
-
@@ -171,30 +166,29 @@ export const FileUploadForm: React.FC = () => {
onSnippetToggle={snippetSelection.handleSnippetToggle}
onSelectAll={snippetSelection.handleSelectAll}
/>
-
+
-
- )}
+ }
- {importWorkflow.uploadResult && (
- 📁
@@ -57,7 +58,7 @@ export const DragDropUploadArea: React.FC{__('Duplicate Snippets', 'code-snippets')}
++ {__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')} +
+ + +
+
+
+
+ {result.success ? '✓' : '✕'}
+
+
+
+
+
+ + {result.success + ? __('Import Successful!', 'code-snippets') + : __('Import Failed', 'code-snippets') + } +
++ {result.message} +
+ + {result.success && ++ {__('Go to ', 'code-snippets')} + + + {__('All Snippets', 'code-snippets')} + + {__(' to activate your imported snippets.', 'code-snippets')} +
} + + {result.warnings && 0 < result.warnings.length &&
+
}
+ + {__('Warnings:', 'code-snippets')} +
+-
+ {result.warnings.map((warning, index) =>
+
- + {warning} + )} +
- {Array.from(files).map((file, index) => (
+ {Array.from(files).map((file, index) =>
- ))}
+ )}
= ({
from {snippet.source_file}
- )}
+ }
{__('If you are using another Snippets plugin, you can import all existing snippets to your Code Snippets library.', 'code-snippets')}
- +
-
- 📭
- - {__('No snippets found', 'code-snippets')} -
-- {__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')} -
-
+
+ 📭
+ + {__('No snippets found', 'code-snippets')} +
++ {__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')} +
+{__('Import options', 'code-snippets')}
+ ++ {__('Loading snippets...', 'code-snippets')} +
} +
-
diff --git a/src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx b/src/js/components/ImportMenu/FromOtherPlugins/components/StatusDisplay.tsx
similarity index 74%
rename from src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx
rename to src/js/components/ImportMenu/FromOtherPlugins/components/StatusDisplay.tsx
index 09e0b39a2..a3159062b 100644
--- a/src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx
+++ b/src/js/components/ImportMenu/FromOtherPlugins/components/StatusDisplay.tsx
@@ -1,8 +1,8 @@
import React from 'react'
import { __ } from '@wordpress/i18n'
-import { ImportCard } from '../../shared'
+import { ImportCard } from '../../common/components/ImportCard'
-interface StatusDisplayProps {
+export interface StatusDisplayProps {
type: 'error' | 'success'
title: string
message: string
@@ -15,17 +15,17 @@ export const StatusDisplay: React.FC = ({
message,
showSnippetsLink = false
}) => {
- const isError = type === 'error'
-
+ const isError = 'error' === type
+
return (
-
diff --git a/src/js/components/Import/FromOtherPlugins/hooks/useImportSnippetSelection.ts b/src/js/components/ImportMenu/FromOtherPlugins/hooks/useImportSnippetSelection.ts
similarity index 96%
rename from src/js/components/Import/FromOtherPlugins/hooks/useImportSnippetSelection.ts
rename to src/js/components/ImportMenu/FromOtherPlugins/hooks/useImportSnippetSelection.ts
index 298f6a6a2..8fd1e6196 100644
--- a/src/js/components/Import/FromOtherPlugins/hooks/useImportSnippetSelection.ts
+++ b/src/js/components/ImportMenu/FromOtherPlugins/hooks/useImportSnippetSelection.ts
@@ -32,7 +32,7 @@ export const useImportSnippetSelection = (availableSnippets: ImportableSnippet[]
)
}
- const isAllSelected = selectedSnippets.size === availableSnippets.length && availableSnippets.length > 0
+ const isAllSelected = selectedSnippets.size === availableSnippets.length && 0 < availableSnippets.length
return {
selectedSnippets,
diff --git a/src/js/components/Import/FromOtherPlugins/hooks/useImporterSelection.ts b/src/js/components/ImportMenu/FromOtherPlugins/hooks/useImporterSelection.ts
similarity index 87%
rename from src/js/components/Import/FromOtherPlugins/hooks/useImporterSelection.ts
rename to src/js/components/ImportMenu/FromOtherPlugins/hooks/useImporterSelection.ts
index 71080a3a7..c5662cea8 100644
--- a/src/js/components/Import/FromOtherPlugins/hooks/useImporterSelection.ts
+++ b/src/js/components/ImportMenu/FromOtherPlugins/hooks/useImporterSelection.ts
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react'
-import { useImportersAPI, type Importer } from '../../../../hooks/useImportersAPI'
+import { useEffect, useState } from 'react'
+import { type Importer, useImportersAPI } from '../../../../hooks/useImportersAPI'
export const useImporterSelection = () => {
const [importers, setImporters] = useState([])
@@ -7,7 +7,7 @@ export const useImporterSelection = () => {
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState(null)
const [tagValue, setTagValue] = useState('')
-
+
const importersAPI = useImportersAPI()
useEffect(() => {
@@ -22,7 +22,7 @@ export const useImporterSelection = () => {
}
}
- fetchImporters()
+ void fetchImporters()
}, [importersAPI])
const handleImporterChange = (newImporter: string) => {
diff --git a/src/js/components/Import/FromOtherPlugins/hooks/useSnippetImport.ts b/src/js/components/ImportMenu/FromOtherPlugins/hooks/useSnippetImport.ts
similarity index 94%
rename from src/js/components/Import/FromOtherPlugins/hooks/useSnippetImport.ts
rename to src/js/components/ImportMenu/FromOtherPlugins/hooks/useSnippetImport.ts
index a20a60b16..d4b7821b3 100644
--- a/src/js/components/Import/FromOtherPlugins/hooks/useSnippetImport.ts
+++ b/src/js/components/ImportMenu/FromOtherPlugins/hooks/useSnippetImport.ts
@@ -1,6 +1,6 @@
import { useState } from 'react'
import { __ } from '@wordpress/i18n'
-import { useImportersAPI, type ImportableSnippet } from '../../../../hooks/useImportersAPI'
+import { type ImportableSnippet, useImportersAPI } from '../../../../hooks/useImportersAPI'
import { isNetworkAdmin } from '../../../../utils/screen'
export const useSnippetImport = () => {
@@ -42,7 +42,7 @@ export const useSnippetImport = () => {
autoAddTags: boolean,
tagValue: string
): Promise => {
- if (selectedSnippetIds.length === 0) {
+ if (0 === selectedSnippetIds.length) {
alert(__('Please select snippets to import.', 'code-snippets'))
return false
}
@@ -66,7 +66,7 @@ export const useSnippetImport = () => {
setImportSuccess(response.data.imported)
- if (response.data.imported.length > 0) {
+ if (0 < response.data.imported.length) {
setSnippets([])
return true
} else {
diff --git a/src/js/components/Import/ImportApp.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
similarity index 65%
rename from src/js/components/Import/ImportApp.tsx
rename to src/js/components/ImportMenu/ImportMenu.tsx
index 2d036bddf..8fe02f533 100644
--- a/src/js/components/Import/ImportApp.tsx
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -1,25 +1,28 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
import { __ } from '@wordpress/i18n'
import { FileUploadForm } from './FromFileUpload/FileUploadForm'
import { ImportForm } from './FromOtherPlugins/ImportForm'
-import { ImportSection } from './shared'
+import { ImportSection } from './common/components/ImportSection'
type TabType = 'upload' | 'plugins'
-export const ImportApp: React.FC = () => {
+const isTabType = (value: string): value is TabType =>
+ 'upload' === value || 'plugins' === value
+
+export const ImportMenu: React.FC = () => {
const [activeTab, setActiveTab] = useState('upload')
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search)
- const tabParam = urlParams.get('tab') as TabType
- if (tabParam === 'plugins' || tabParam === 'upload') {
+ const tabParam = urlParams.get('tab')
+ if (tabParam && isTabType(tabParam)) {
setActiveTab(tabParam)
}
}, [])
const handleTabChange = (tab: TabType) => {
setActiveTab(tab)
-
+
const url = new URL(window.location.href)
url.searchParams.set('tab', tab)
window.history.replaceState({}, '', url)
@@ -29,9 +32,9 @@ export const ImportApp: React.FC = () => {
+
-
+
diff --git a/src/js/components/Import/shared/components/ImportCard.tsx b/src/js/components/ImportMenu/common/components/ImportCard.tsx
similarity index 68%
rename from src/js/components/Import/shared/components/ImportCard.tsx
rename to src/js/components/ImportMenu/common/components/ImportCard.tsx
index 64d8182fa..04f8732b0 100644
--- a/src/js/components/Import/shared/components/ImportCard.tsx
+++ b/src/js/components/ImportMenu/common/components/ImportCard.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
import classnames from 'classnames'
-import type { HTMLAttributes } from 'react'
+import type { CSSProperties , HTMLAttributes, ReactNode} from 'react'
export interface ImportCardProps extends Omit, 'className'> {
- children: React.ReactNode
+ children: ReactNode
className?: string
variant?: 'default' | 'controls'
}
-export const ImportCard = React.forwardRef(({
+export const ImportCard = forwardRef(({
children,
className,
variant = 'default',
style,
...props
}, ref) => {
- const cardStyle: React.CSSProperties = {
+ const cardStyle: CSSProperties = {
backgroundColor: '#ffffff',
padding: '25px',
borderRadius: '5px',
@@ -30,7 +30,7 @@ export const ImportCard = React.forwardRef(({
ref={ref}
className={classnames(
{
- 'import-controls': variant === 'controls'
+ 'import-controls': 'controls' === variant
},
className
)}
diff --git a/src/js/components/Import/shared/components/ImportSection.tsx b/src/js/components/ImportMenu/common/components/ImportSection.tsx
similarity index 84%
rename from src/js/components/Import/shared/components/ImportSection.tsx
rename to src/js/components/ImportMenu/common/components/ImportSection.tsx
index 262798c99..21158cffc 100644
--- a/src/js/components/Import/shared/components/ImportSection.tsx
+++ b/src/js/components/ImportMenu/common/components/ImportSection.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { CSSProperties, HTMLAttributes } from 'react'
export interface ImportSectionProps extends Omit, 'style'> {
children: React.ReactNode
@@ -15,7 +15,7 @@ export const ImportSection: React.FC = ({
style,
...props
}) => {
- const sectionStyle: React.CSSProperties = {
+ const sectionStyle: CSSProperties = {
display: active ? 'block' : 'none',
paddingTop: 0,
...style
diff --git a/src/js/components/ImportMenu/index.ts b/src/js/components/ImportMenu/index.ts
new file mode 100644
index 000000000..611b9fa7a
--- /dev/null
+++ b/src/js/components/ImportMenu/index.ts
@@ -0,0 +1 @@
+export * from './ImportMenu'
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
new file mode 100644
index 000000000..b0a04d3b2
--- /dev/null
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -0,0 +1,112 @@
+import { __ } from '@wordpress/i18n'
+import React from 'react'
+import { Spinner } from '@wordpress/components'
+import { useCloudSearch } from '../../../hooks/useCloudSearch'
+import { WithCloudSearchFiltersContext, useCloudSearchFilters } from '../../../hooks/useCloudSearchFilters'
+import { TablePagination } from '../../common/ListTable/TablePagination'
+import { SubmitButton } from '../../common/SubmitButton'
+import { SearchFilters } from './SearchFilters'
+import { SearchResults } from './SearchResults'
+import type { FormEventHandler } from 'react'
+
+const SearchBox = () => {
+ const { query, searchByCodevault, setQuery, setSearchByCodevault, isSearching, doSearch } = useCloudSearch()
+
+ const handleSubmit: FormEventHandler = event => {
+ event.preventDefault()
+ doSearch()
+ }
+
+ return (
+
+ )
+}
+
+const SearchResultsTable = () => {
+ const { page, totalItems, totalPages, setPage } = useCloudSearch()
+ const { filteredSearchResults } = useCloudSearchFilters()
+
+ return filteredSearchResults
+ ? <>
+ = {
+ snippets: __('Code Snippets', 'code-snippets'),
+ bundles: __('Bundles', 'code-snippets')
+}
+
+interface NavTabsProps {
+ currentTab: TabName
+ setCurrentTab: (tab: TabName) => void
+}
+
+const NavTabs: React.FC = ({ currentTab, setCurrentTab }) =>
+ = {
+ [CloudStatus.Public]: __('Public', 'code-snippets'),
+ [CloudStatus.Private]: __('Private', 'code-snippets'),
+ [CloudStatus.Unverified]: __('Unverified', 'code-snippets'),
+ [CloudStatus.AI_Verified]: __('AI Verified', 'code-snippets'),
+ [CloudStatus.Pro_Verified]: __('Pro Verified', 'code-snippets')
+}
+
+export interface CloudSearchFilters {
+ tags: string
+ status: number
+}
+
+interface SearchFilterProps {
+ label: string
+ filter: keyof CloudSearchFilters
+ filters: CloudSearchFilters
+ setFilters: Dispatch>
+ options: [string | number, string][]
+ allOptionLabel: string
+}
+
+const SearchFilter: React.FC = ({ options, filter, filters, setFilters, label, allOptionLabel }) =>
+ <>
+
+
+
+
+
+export const SearchFilters = () => {
+ const { searchResults: snippets } = useCloudSearch()
+ const { filters, setFilters } = useCloudSearchFilters()
+
+ const options: { [K in keyof CloudSearchFilters]: [CloudSearchFilters[K], string][] } = useMemo(
+ () => {
+ const tags = new Set()
+ const statuses = new Set()
+
+ snippets?.forEach(snippet => {
+ snippet.tags.forEach(tag => tags.add(tag))
+ statuses.add(snippet.status)
+ })
+
+ return {
+ tags: Array.from(tags).sort().map(tag => [tag, tag]),
+ status: Array.from(statuses).sort().map(status => [status, STATUS_LABELS[status]])
+ }
+ },
+ [snippets])
+
+ return (
+ <>
+ = ({ snippet, setIsPreviewOpen }) =>
+ = ({ snippet, isOpen, setIsOpen }) => {
+ const snippetType = getSnippetType(snippet)
+
+ return isOpen
+ ? setIsOpen(false)} title={snippet.name}>
+
+ : null
+}
+
+interface SearchResultProps {
+ snippet: CloudSnippetSchema
+}
+
+const SearchResult: React.FC = ({ snippet }) => {
+ const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+
+ useEffect(() => {
+ if (isPreviewOpen) {
+ Prism.highlightAll()
+ }
+ }, [isPreviewOpen])
+
+ return (
+ = ({ results }) =>
+ [] = [
+ {
+ 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}
+ totalPages={itemsPerPage && Math.ceil(totalItems / itemsPerPage)}
+ 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 &&
+
+ : null
+
+const SnippetsTableInner = () => {
+ const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+
+ return (
+
+
+
+
+
+
diff --git a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
new file mode 100644
index 000000000..2b9d6c97c
--- /dev/null
+++ b/src/js/components/ManageMenu/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 => = {
- saveChanges: {
- label: __('Save changes', 'code-snippets'),
- mod: 'Cmd',
- key: 'S'
- },
- selectAll: {
- label: __('Select all', 'code-snippets'),
- mod: 'Cmd',
- key: 'A'
- },
- beginSearch: {
- label: __('Begin searching', 'code-snippets'),
- mod: 'Cmd',
- key: 'F'
- },
- findNext: {
- label: __('Find next', 'code-snippets'),
- mod: 'Cmd',
- key: 'G'
- },
- findPrevious: {
- label: __('Find previous', 'code-snippets'),
- mod: ['Shift', 'Cmd'],
- key: 'G'
- },
- replace: {
- label: __('Replace', 'code-snippets'),
- mod: ['Shift', 'Cmd'],
- key: 'F'
- },
- replaceAll: {
- label: __('Replace all', 'code-snippets'),
- mod: ['Shift', 'Cmd', 'Option'],
- key: 'R'
- },
- search: {
- label: __('Persistent search', 'code-snippets'),
- mod: 'Alt',
- key: 'F'
- },
- toggleComment: {
- label: __('Toggle comment', 'code-snippets'),
- mod: 'Cmd',
- key: '/'
- },
- swapLineUp: {
- label: __('Swap line up', 'code-snippets'),
- mod: 'Option',
- key: 'Up'
- },
- swapLineDown: {
- label: __('Swap line down', 'code-snippets'),
- mod: 'Option',
- key: 'Down'
- },
- autoIndent: {
- label: __('Auto-indent current line or selection', 'code-snippets'),
- mod: 'Shift',
- key: 'Tab'
- }
-}
-
-const SEP = _x('-', 'keyboard shortcut separator', 'code-snippets')
-
-const ModifierKey: React.FC<{ modifier: KeyboardKey }> = ({ modifier }) => {
- switch (modifier) {
- case 'Ctrl':
- case 'Cmd':
- return (
- <>
- {KEYBOARD_KEYS.Ctrl}
- {KEYBOARD_KEYS.Cmd}
- {SEP}
-
- )
-
- case 'Option':
- return (
-
- {KEYBOARD_KEYS.Option}{SEP}
-
- )
-
- default:
- return <>{KEYBOARD_KEYS[modifier]}{SEP}
- }
-}
-
-export interface CodeEditorShortcutsProps {
- editorTheme: string
-}
-
-export const CodeEditorShortcuts: React.FC = ({ editorTheme }) =>
- = {
+ 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 WelcomeMenu = () =>
+ <>
+ | 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 (
<>
= ({
{message} - {showSnippetsLink && ( + {showSnippetsLink && <> {' '} {__('Code Snippets Library', 'code-snippets')} . - )} + }
{ + onClick={e => { e.preventDefault() handleTabChange('upload') }} @@ -39,9 +42,9 @@ export const ImportApp: React.FC = () => { {__('Import Snippets', 'code-snippets')} { + onClick={e => { e.preventDefault() handleTabChange('plugins') }} @@ -50,11 +53,11 @@ export const ImportApp: React.FC = () => {
-
+
+
+
+
+
+ : null
+}
+
+const ErrorBanner = () =>
+
+
+
+const NoSearchResultsBanner = () =>
+ {__('An error occurred while fetching search results. Please try again.')}
+
+
+
+export const CloudSearch = () => {
+ const { searchResults, error, page } = useCloudSearch()
+
+ return (
+ {__('No snippets or codevault could be found with that search term. Please try again.', 'code-snippets')}
+
+
+ }
+
+ )
+}
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
new file mode 100644
index 000000000..2fbaad1f1
--- /dev/null
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { __ } from '@wordpress/i18n'
+import classnames from 'classnames'
+import { addQueryArgs } from '@wordpress/url'
+import { WithCloudSearchContext } from '../../../hooks/useCloudSearch'
+import { WithRestAPIContext } from '../../../hooks/useRestAPI'
+import { fetchQueryParam, updateQueryParam } from '../../../utils/urls'
+import { CloudSearch } from './CloudSearch'
+
+const TABS = ['snippets', 'bundles'] as const
+type TabName = typeof TABS[number]
+
+const TAB_LABELS: Record+ {TABS.map(tab => + { + event.preventDefault() + updateQueryParam('tab', tab) + setCurrentTab(tab) + }} + > + {TAB_LABELS[tab]} + )} +
+ +export const CommunityCloud = () => { + const [currentTab, setCurrentTab] = useState(() => fetchQueryParam('tab') as TabName | null ?? TABS[0]) + + return ( +
+
+
+
+
+ : null}
+
+ )
+}
diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
new file mode 100644
index 000000000..e791cb212
--- /dev/null
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react'
+import { __ } from '@wordpress/i18n'
+import { useCloudSearch } from '../../../hooks/useCloudSearch'
+import { useCloudSearchFilters } from '../../../hooks/useCloudSearchFilters'
+import { CloudStatus } from '../../../types/schema/CloudSnippetSchema'
+import { updateQueryParam } from '../../../utils/urls'
+import type { Dispatch, SetStateAction } from 'react'
+
+export const STATUS_LABELS: Record{__('Community Cloud', 'code-snippets')}
+ +
+
+
+interface PreviewModalProps {
+ isOpen: boolean
+ snippet: CloudSnippetSchema
+ setIsOpen: (isOpen: boolean) => void
+}
+
+const PreviewModal: React.FC+ { + event.preventDefault() + setIsPreviewOpen(true) + }} + > + {snippet.name} + +
+ +
+
+
+ + {snippet.description.length > MAX_DESCRIPTION_LENGTH + ? `${snippet.description.slice(0, MAX_DESCRIPTION_LENGTH)}…` + : snippet.description} +
+ ++ {_x('by ', 'snippet author', 'code-snippets')} + + {snippet.codevault} + +
+
+
+ {'php' === snippetType ? '
+
+
+
+ )
+}
+
+interface SearchResultsProps {
+ results: CloudSnippetSchema[]
+}
+
+export const SearchResults: React.FC
+ {results.map(result =>
+
diff --git a/src/js/components/ManageMenu/ManageMenu.tsx b/src/js/components/ManageMenu/ManageMenu.tsx
new file mode 100644
index 000000000..8710cedcb
--- /dev/null
+++ b/src/js/components/ManageMenu/ManageMenu.tsx
@@ -0,0 +1,19 @@
+import React, { useMemo } from 'react'
+import { fetchQueryParam } from '../../utils/urls'
+import { Toolbar } from '../common/Toolbar'
+import { CommunityCloud } from './CommunityCloud/CommunityCloud'
+import { SnippetsTable } from './SnippetsTable'
+
+export const ManageMenu = () => {
+ const subpage = useMemo(() => fetchQueryParam('subpage'), [])
+
+ 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() + + const totalItems = snippetsByStatus.get(currentStatus)?.length ?? 0 + const itemsPerPage = window.CODE_SNIPPETS_MANAGE?.snippetsPerPage + + 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} +
+ +
+ {__('Warning:', 'code-snippets')}{'\n'}
+ {__('Safe mode is active and snippets will not execute!', 'code-snippets')}{'\n'}
+
+ {createInterpolateElement(
+ __('Remove the CODE_SNIPPETS_SAFE_MODE constant from wp-config.php file to turn off safe mode.', 'code-snippets'),
+ {
+ code:
+ }
+ )}{'\n'}
+
+
+ {__('Read more', '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
-
-
-
diff --git a/src/js/components/WelcomeMenu/Changelog.tsx b/src/js/components/WelcomeMenu/Changelog.tsx
new file mode 100644
index 000000000..303667320
--- /dev/null
+++ b/src/js/components/WelcomeMenu/Changelog.tsx
@@ -0,0 +1,85 @@
+import React, { Fragment } from 'react'
+import { __, sprintf } from '@wordpress/i18n'
+import { CHANGELOG_SECTIONS } from '../../types/schema/WelcomeSchema'
+import type { ChangelogSectionTitle } from '../../types/schema/WelcomeSchema'
+
+const CHANGELOG_LABELS: Record
-
-
- {Object.entries(shortcuts).map(([name, { label, mod, key }]) =>
-
-
- | {label} | -
- {(Array.isArray(mod) ? mod : [mod]).map(modifier =>
-
- |
-
+ + {CHANGELOG_LABELS[section]} +
+-
+ {Object.entries(entries).map(([pluginType, changes]) =>
+ changes.map(change =>
+
- + + {PLUGIN_TYPE_LABELS[pluginType] ?? pluginType} + + {change} + ) + )} +
+
+
+
diff --git a/src/js/components/WelcomeMenu/WelcomeMenu.tsx b/src/js/components/WelcomeMenu/WelcomeMenu.tsx
new file mode 100644
index 000000000..145a03d29
--- /dev/null
+++ b/src/js/components/WelcomeMenu/WelcomeMenu.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/WelcomeMenu/index.ts b/src/js/components/WelcomeMenu/index.ts
new file mode 100644
index 000000000..c6aa4faaa
--- /dev/null
+++ b/src/js/components/WelcomeMenu/index.ts
@@ -0,0 +1 @@
+export * from './WelcomeMenu'
diff --git a/src/js/components/EditorSidebar/actions/DeleteButton.tsx b/src/js/components/common/DeleteButton.tsx
similarity index 50%
rename from src/js/components/EditorSidebar/actions/DeleteButton.tsx
rename to src/js/components/common/DeleteButton.tsx
index 7d584e582..ba28262a2 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 &&