{snippet.id && !isCondition(snippet) ? = ({ setIsUpgradeDialog
{
+ window.location.replace(buildUrl(window.CODE_SNIPPETS?.urls.manage, { result: 'deleted' }))
+ }}
+ onError={error => {
+ handleRequestError(error, __('Could not delete snippet.', 'code-snippets'))
+ }}
+ />
: null}
@@ -56,4 +67,4 @@ export const EditorSidebar: React.FC
+
+ {__('Mark this snippet as read-only to prevent accidental changes or deletion.', 'code-snippets')}
+
+
+
+
+ )
+}
diff --git a/src/js/components/EditorSidebar/controls/MultisiteSharingSettings.tsx b/src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx
similarity index 88%
rename from src/js/components/EditorSidebar/controls/MultisiteSharingSettings.tsx
rename to src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx
index cefc8e818..be8dbc4f8 100644
--- a/src/js/components/EditorSidebar/controls/MultisiteSharingSettings.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { __ } from '@wordpress/i18n'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
-import { Tooltip } from '../../common/Tooltip'
+import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
+import { Tooltip } from '../../../common/Tooltip'
export const MultisiteSharingSettings: React.FC = () => {
const { snippet, setSnippet, isReadOnly } = useSnippetForm()
diff --git a/src/js/components/EditorSidebar/controls/PriorityInput.tsx b/src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx
similarity index 86%
rename from src/js/components/EditorSidebar/controls/PriorityInput.tsx
rename to src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx
index 2f8128df0..455d918c1 100644
--- a/src/js/components/EditorSidebar/controls/PriorityInput.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { __ } from '@wordpress/i18n'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
-import { Tooltip } from '../../common/Tooltip'
+import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
+import { Tooltip } from '../../../common/Tooltip'
export const PriorityInput = () => {
const { snippet, isReadOnly, setSnippet } = useSnippetForm()
diff --git a/src/js/components/EditorSidebar/controls/RTLControl.tsx b/src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx
similarity index 89%
rename from src/js/components/EditorSidebar/controls/RTLControl.tsx
rename to src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx
index 2dce2b256..be8c1977a 100644
--- a/src/js/components/EditorSidebar/controls/RTLControl.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { __ } from '@wordpress/i18n'
-import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
export const RTLControl: React.FC = () => {
const { codeEditorInstance } = useSnippetForm()
diff --git a/src/js/components/EditorSidebar/index.ts b/src/js/components/EditMenu/EditorSidebar/index.ts
similarity index 100%
rename from src/js/components/EditorSidebar/index.ts
rename to src/js/components/EditMenu/EditorSidebar/index.ts
diff --git a/src/js/components/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
similarity index 78%
rename from src/js/components/SnippetForm/SnippetForm.tsx
rename to src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index 10ac3ff68..0fe4ae2f8 100644
--- a/src/js/components/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -1,17 +1,19 @@
import React, { useState } from 'react'
import classnames from 'classnames'
import { __ } from '@wordpress/i18n'
-import { addQueryArgs } from '@wordpress/url'
-import { WithRestAPIContext } from '../../hooks/useRestAPI'
-import { WithSnippetsListContext, useSnippetsList } from '../../hooks/useSnippetsList'
-import { SubmitSnippetAction, useSubmitSnippet } from '../../hooks/useSubmitSnippet'
-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 { UpsellDialog } from '../common/UpsellDialog'
+import { WithRestAPIContext } from '../../../hooks/useRestAPI'
+import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
+import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
+import { SubmitSnippetAction, useSubmitSnippet } from '../../../hooks/useSubmitSnippet'
+import { handleUnknownError } from '../../../utils/errors'
+import { createSnippetObject, getSnippetType, isCondition, validateSnippet } from '../../../utils/snippets/snippets'
+import { buildUrl } from '../../../utils/urls'
+import { ConfirmDialog } from '../../common/ConfirmDialog'
+import { Toolbar } from '../../common/Toolbar'
+import { UpsellBanner } from '../../common/UpsellBanner'
+import { UpsellDialog } from '../../common/UpsellDialog'
import { EditorSidebar } from '../EditorSidebar'
-import { UpsellBanner } from '../common/UpsellBanner'
+import { WithSnippetFormContext, useSnippetForm } from './WithSnippetFormContext'
import { SnippetTypeInput } from './fields/SnippetTypeInput'
import { TagsEditor } from './fields/TagsEditor'
import { CodeEditor } from './fields/CodeEditor'
@@ -19,7 +21,7 @@ import { DescriptionEditor } from './fields/DescriptionEditor'
import { NameInput } from './fields/NameInput'
import { PageHeading } from './page/PageHeading'
import type { PropsWithChildren } from 'react'
-import type { Snippet } from '../../types/Snippet'
+import type { Snippet } from '../../../types/Snippet'
const editFormClassName = ({ snippet, isReadOnly, isExpanded }: {
snippet: Snippet,
@@ -84,15 +86,15 @@ const EditForm: React.FC{__('Lock snippet', 'code-snippets')}
+ +
{isCondition(snippet)
- ?
+ ?
{__('Back to all conditions', 'code-snippets')}
:
@@ -184,9 +186,12 @@ const EditFormWrap: React.FC = () => {
export const SnippetForm: React.FC = () =>
- {__('You are about to delete this snippet.', 'code-snippets')}{' '}
- {__('Are you sure?', 'code-snippets')}
-
- {__('Prevent accidental changes or deletion.', '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')}
-
- {__('All Snippets', 'code-snippets')}
-
- {__(' page to activate the imported snippets.', 'code-snippets')}
-
- {__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')}
-
- {__('Select the snippets you want to import:', 'code-snippets')}
-
- {__('Drag and drop files here, or click to browse', 'code-snippets')}
-
- {__('Supports JSON and XML files', 'code-snippets')}
-
- {__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')}
-
- {result.message}
-
- {__('Go to ', 'code-snippets')}
-
- {__('All Snippets', 'code-snippets')}
-
- {__(' to activate your imported snippets.', 'code-snippets')}
- {__('Loading importers...', 'code-snippets')} {__('Error loading importers:', 'code-snippets')} {importerSelection.error} {__('If you are using another Snippets plugin, you can import all existing snippets to your Code Snippets library.', 'code-snippets')}
- {__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')}
-
- {__('Loading snippets...', 'code-snippets')}
- {__('We found the following snippets.', 'code-snippets')}
- {message}
- {showSnippetsLink && (
- <>
- {' '}
-
- {__('Code Snippets Library', 'code-snippets')}
- .
-
- )}
- {__('Loading snippets…', 'code-snippets')} {children} {__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')} {__('Loading importers…', 'code-snippets')} {sprintf(__('Error loading importers: %s', 'code-snippets'), error.message)} {__('If you are using another snippets plugin, you can import those existing snippets to your Code Snippets library.', 'code-snippets')} {__('We found the following snippets:', 'code-snippets')} {__('Drag and drop files here, or click to browse', 'code-snippets')} {__('Supports JSON and XML files', 'code-snippets')}
+ {__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')}
+
+ {__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')}
+ {message}
+ {createInterpolateElement(
+ __('Go to All Snippets to activate your imported snippets.', 'code-snippets'),
+ { a: }
+ )}
+ {__('Select the snippets you would like to import.', 'code-snippets')} {__('Upload one or more Code Snippets export files and the snippets will be imported.', 'code-snippets')}
+ {createInterpolateElement(
+ __('Afterward, you will need to visit the All Snippets page to activate the imported snippets.', 'code-snippets'),
+ { a: }
+ )}
+ {__('An error occurred while fetching search results. Please try again.')} {__('No snippets or codevault could be found with that search term. Please try again.', 'code-snippets')}
+ {snippet.description.length > MAX_DESCRIPTION_LENGTH
+ ? `${snippet.description.slice(0, MAX_DESCRIPTION_LENGTH)}…`
+ : snippet.description}
+
+ {_x('by ', 'snippet author', 'code-snippets')}
+
+ {snippet.codevault}
+
+
+
+ setSearchQuery(event.target.value)}
+ placeholder={__('Search snippets', 'code-snippets')}
+ />
+
+ {__('Warning:', 'code-snippets')}{'\n'}
+ {__('Safe mode is active and snippets will not execute!', 'code-snippets')}{'\n'}
+
+ {createInterpolateElement(
+ __('Remove the {date} {category} {description}
+ {createInterpolateElement(
+ __('This snippet is currently active.', 'code-snippets'),
+ { strong: }
+ )}
+ {__('Moving it to the trash will also deactivate it.', 'code-snippets')}
+ {createInterpolateElement(
+ __('The snippet will be permanently deleted.', 'code-snippets'),
+ { strong: }
+ )}
+ {__('This action cannot be undone.', 'code-snippets')}
+
+
+
+ : 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..fff486951 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 '../WithSnippetFormContext'
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..2501f39ec 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 '../WithSnippetFormContext'
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..f9eee80fa 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 '../WithSnippetFormContext'
+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
+ ?
+
+
+ : null
+ })}
+
+ {label}
+
+ {isMacOS()
+ ?
+
{snippet.id
? <>
- {`${'condition' === snippet.scope
- ? __('Edit Condition', 'code-snippets')
- : __('Edit Snippet', 'code-snippets')} `}
+ {`${getPageHeading(snippet)} `}
{
- const { snippetsAPI } = useRestAPI()
- const { snippet, setIsWorking, isWorking, handleRequestError } = useSnippetForm()
- const [isDialogOpen, setIsDialogOpen] = useState(false)
-
- return (
- <>
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/js/components/Import/FromFileUpload/FileUploadForm.tsx b/src/js/components/Import/FromFileUpload/FileUploadForm.tsx
deleted file mode 100644
index 6369b89e2..000000000
--- a/src/js/components/Import/FromFileUpload/FileUploadForm.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { __ } from '@wordpress/i18n'
-import { Button } from '../../common/Button'
-import {
- DuplicateActionSelector,
- DragDropUploadArea,
- SelectedFilesList,
- SnippetSelectionTable,
- ImportResultDisplay
-} from './components'
-import { ImportCard } from '../shared'
-import {
- useFileSelection,
- useSnippetSelection,
- useImportWorkflow
-} from './hooks'
-
-type DuplicateAction = 'ignore' | 'replace' | 'skip'
-type Step = 'upload' | 'select'
-
-export const FileUploadForm: React.FC = () => {
- const [duplicateAction, setDuplicateAction] = useState{__('Lock Snippet', 'code-snippets')}
-
-
-
-
- )
-}
diff --git a/src/js/components/Import/FromFileUpload/components/DragDropUploadArea.tsx b/src/js/components/Import/FromFileUpload/components/DragDropUploadArea.tsx
deleted file mode 100644
index 1c8b60295..000000000
--- a/src/js/components/Import/FromFileUpload/components/DragDropUploadArea.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import { __ } from '@wordpress/i18n'
-import { useDragAndDrop } from '../hooks/useDragAndDrop'
-
-interface DragDropUploadAreaProps {
- fileInputRef: React.RefObject
-
- {__('Choose Files', 'code-snippets')}
-
-
-
-
-
-
-
-
-
-
-
- {__('Available Snippets', 'code-snippets')} ({importWorkflow.availableSnippets.length})
-
-
-
-
-
-
-
-
-
-
-
- onFileSelect(e.target.files)}
- style={{ display: 'none' }}
- disabled={disabled}
- />
-
- )
-}
diff --git a/src/js/components/Import/FromFileUpload/components/DuplicateActionSelector.tsx b/src/js/components/Import/FromFileUpload/components/DuplicateActionSelector.tsx
deleted file mode 100644
index b4757da09..000000000
--- a/src/js/components/Import/FromFileUpload/components/DuplicateActionSelector.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react'
-import { __ } from '@wordpress/i18n'
-import { ImportCard } from '../../shared'
-
-type DuplicateAction = 'ignore' | 'replace' | 'skip'
-
-interface DuplicateActionSelectorProps {
- value: DuplicateAction
- onChange: (action: DuplicateAction) => void
-}
-
-export const DuplicateActionSelector: React.FC📁
- {__('Duplicate Snippets', 'code-snippets')}
-
-
-
-
- {result.success ? '✓' : '✕'}
-
-
-
-
-
- {result.success
- ? __('Import Successful!', 'code-snippets')
- : __('Import Failed', 'code-snippets')
- }
-
-
-
- )}
-
- {__('Warnings:', 'code-snippets')}
-
-
- {result.warnings.map((warning, index) => (
-
-
-
- )
-}
diff --git a/src/js/components/Import/FromFileUpload/components/SnippetSelectionTable.tsx b/src/js/components/Import/FromFileUpload/components/SnippetSelectionTable.tsx
deleted file mode 100644
index 8a59d1977..000000000
--- a/src/js/components/Import/FromFileUpload/components/SnippetSelectionTable.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react'
-import { __ } from '@wordpress/i18n'
-import type { ImportableSnippet } from '../../../../hooks/useFileUploadAPI'
-
-interface SnippetSelectionTableProps {
- snippets: ImportableSnippet[]
- selectedSnippets: Set
- {__('Selected Files:', 'code-snippets')} ({files.length})
-
-
- {Array.from(files).map((file, index) => (
-
-
-
- ))}
-
- 📄
-
-
-
-
- {file.name}
-
- {formatFileSize(file.size)}
-
-
-
-
- )
-}
diff --git a/src/js/components/Import/FromFileUpload/components/index.ts b/src/js/components/Import/FromFileUpload/components/index.ts
deleted file mode 100644
index d05811037..000000000
--- a/src/js/components/Import/FromFileUpload/components/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { DuplicateActionSelector } from './DuplicateActionSelector'
-export { DragDropUploadArea } from './DragDropUploadArea'
-export { SelectedFilesList } from './SelectedFilesList'
-export { SnippetSelectionTable } from './SnippetSelectionTable'
-export { ImportResultDisplay } from './ImportResultDisplay'
diff --git a/src/js/components/Import/FromFileUpload/hooks/index.ts b/src/js/components/Import/FromFileUpload/hooks/index.ts
deleted file mode 100644
index 5826fc3eb..000000000
--- a/src/js/components/Import/FromFileUpload/hooks/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { useDragAndDrop } from './useDragAndDrop'
-export { useFileSelection } from './useFileSelection'
-export { useSnippetSelection } from './useSnippetSelection'
-export { useImportWorkflow } from './useImportWorkflow'
diff --git a/src/js/components/Import/FromFileUpload/hooks/useDragAndDrop.ts b/src/js/components/Import/FromFileUpload/hooks/useDragAndDrop.ts
deleted file mode 100644
index f6c3b0bb1..000000000
--- a/src/js/components/Import/FromFileUpload/hooks/useDragAndDrop.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useState } from 'react'
-
-interface UseDragAndDropProps {
- onFilesDrop: (files: FileList) => void
-}
-
-export const useDragAndDrop = ({ onFilesDrop }: UseDragAndDropProps) => {
- const [dragOver, setDragOver] = useState(false)
-
- const handleDragOver = (e: React.DragEvent) => {
- e.preventDefault()
- setDragOver(true)
- }
-
- const handleDragLeave = (e: React.DragEvent) => {
- e.preventDefault()
- setDragOver(false)
- }
-
- const handleDrop = (e: React.DragEvent) => {
- e.preventDefault()
- setDragOver(false)
-
- const files = e.dataTransfer.files
- if (files.length > 0) {
- onFilesDrop(files)
- }
- }
-
- return {
- dragOver,
- handleDragOver,
- handleDragLeave,
- handleDrop
- }
-}
diff --git a/src/js/components/Import/FromFileUpload/hooks/useFileSelection.ts b/src/js/components/Import/FromFileUpload/hooks/useFileSelection.ts
deleted file mode 100644
index 333fa4526..000000000
--- a/src/js/components/Import/FromFileUpload/hooks/useFileSelection.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState, useRef } from 'react'
-import { removeFileFromList } from '../utils/fileUtils'
-
-export const useFileSelection = () => {
- const [selectedFiles, setSelectedFiles] = useState
-
-
-
- {snippets.map(snippet => (
-
-
-
- {__('Name', 'code-snippets')}
- {__('Type', 'code-snippets')}
- {__('Description', 'code-snippets')}
- {__('Tags', 'code-snippets')}
-
-
- ))}
-
-
- onSnippetToggle(snippet.table_data.id)}
- />
-
-
- {snippet.table_data.title}
- {snippet.source_file && (
-
-
- from {snippet.source_file}
-
- )}
-
-
- {snippet.table_data.type}
-
-
-
- {truncateDescription(snippet.table_data.description)}
-
- {snippet.table_data.tags || '—'}
-
-
- )
- }
-
- if (importerSelection.error) {
- return (
-
-
- )
- }
-
- return (
-
-
-
-
- )
-}
diff --git a/src/js/components/Import/FromOtherPlugins/components/ImportOptions.tsx b/src/js/components/Import/FromOtherPlugins/components/ImportOptions.tsx
deleted file mode 100644
index ac084959e..000000000
--- a/src/js/components/Import/FromOtherPlugins/components/ImportOptions.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react'
-import { __ } from '@wordpress/i18n'
-import { ImportCard } from '../../shared'
-
-interface ImportOptionsProps {
- autoAddTags: boolean
- tagValue: string
- onAutoAddTagsChange: (enabled: boolean) => void
- onTagValueChange: (value: string) => void
-}
-
-export const ImportOptions: React.FC
-
-
-
- 📭
-
- {__('No snippets found', 'code-snippets')}
-
- {__('Import options', 'code-snippets')}
-
-
-
-
-
-
- {__('Available Snippets', 'code-snippets')} ({snippets.length})
-
-
-
-
-
-
-
-
-
-
-
-
- {snippets.map(snippet => (
-
-
-
- {__('Snippet Name', 'code-snippets')}
- {__('ID', 'code-snippets')}
-
-
- ))}
-
-
- onSnippetToggle(snippet.table_data.id)}
- />
-
- {snippet.table_data.title}
- {snippet.table_data.id}
-
-
-
-
-
-
- {isError ? '✕' : '✓'}
-
-
-
-
-
- {title}
-
-
-
- )
-}
diff --git a/src/js/components/Import/shared/components/ImportCard.tsx b/src/js/components/Import/shared/components/ImportCard.tsx
deleted file mode 100644
index 64d8182fa..000000000
--- a/src/js/components/Import/shared/components/ImportCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import type { HTMLAttributes } from 'react'
-
-export interface ImportCardProps extends Omit
- {
- e.preventDefault()
- handleTabChange('upload')
- }}
- >
- {__('Import Snippets', 'code-snippets')}
-
- {
- e.preventDefault()
- handleTabChange('plugins')
- }}
- >
- {__('Import from other plugins', 'code-snippets')}
-
-
-
-
- {children}
-
- )
-})
-
-ImportCard.displayName = 'ImportCard'
diff --git a/src/js/components/Import/shared/components/ImportSection.tsx b/src/js/components/Import/shared/components/ImportSection.tsx
deleted file mode 100644
index 262798c99..000000000
--- a/src/js/components/Import/shared/components/ImportSection.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import type { HTMLAttributes } from 'react'
-
-export interface ImportSectionProps extends Omit
- {children}
-
- )
-}
diff --git a/src/js/components/Import/shared/components/index.ts b/src/js/components/Import/shared/components/index.ts
deleted file mode 100644
index c59b6b1ca..000000000
--- a/src/js/components/Import/shared/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { ImportCard } from './ImportCard'
-export type { ImportCardProps } from './ImportCard'
-export { ImportSection } from './ImportSection'
-export type { ImportSectionProps } from './ImportSection'
diff --git a/src/js/components/Import/shared/index.ts b/src/js/components/Import/shared/index.ts
deleted file mode 100644
index cb64ac1b5..000000000
--- a/src/js/components/Import/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components'
diff --git a/src/js/components/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
new file mode 100644
index 000000000..1779a6eb3
--- /dev/null
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import { __ } from '@wordpress/i18n'
+import { WithRestAPIContext } from '../../hooks/useRestAPI'
+import { fetchQueryParam, updateQueryParam } from '../../utils/urls'
+import { UploadForm } from './UploadForm/UploadForm'
+import { MigrateForm } from './MigrateForm/MigrateForm'
+import type { ReactNode } from 'react'
+
+const TABS = ['upload', 'migrate'] as const
+
+type TabType = typeof TABS[number]
+
+const TAB_CONTENT: Record
+
+ )
+}
diff --git a/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx b/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
new file mode 100644
index 000000000..094357bbf
--- /dev/null
+++ b/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { __ } from '@wordpress/i18n'
+import { ImportCard } from '../common/ImportCard'
+import { useMigrationOptions } from './WithMigrationOptions'
+
+export const ImportOptions: React.FC = () => {
+ const { autoAddTags, setAutoAddTags, tagValue, setTagValue } = useMigrationOptions()
+
+ return (
+ {__('Import Snippets', 'code-snippets')}
+
+
+
+
+ {TABS.map(tab =>
+ {
+ event.preventDefault()
+ setActiveTab(tab)
+ updateQueryParam('tab', tab)
+ }}
+ >
+ {TAB_LABELS[tab]}
+ )}
+
+
+
+ {TAB_CONTENT[tab]}
+ )}
+ {__('Import options', 'code-snippets')}
+
+ {'error' === type ? '✕' : '✓'}
+
+
+ {title}
+
+
+ 📭
+ {__('No snippets found', 'code-snippets')}
+
+ {/* translators: %s: error message. */}
+
+ )
+ }
+
+ return (
+
+
+ )
+}
+
+export const MigrateForm: React.FC = () =>
+
+
+
+
+
+
+
+
+export interface SimpleSnippetTableProps {
+ selection: UseSelection
+
+
+ {sprintf(
+ // translators: %d: number of available snippets.
+ __('Available snippets (%d)', 'code-snippets'),
+ availableItems.length
+ )}
+
+
+
+
+
+
+
+
+ {availableItems.map(snippet =>
+
+
+
+ {__('Snippet name', 'code-snippets')}
+ {__('ID', 'code-snippets')}
+
+ )}
+
+
+ toggleItem(snippet.table_data.id)}
+ />
+
+ {snippet.table_data.title}
+ {snippet.table_data.id}
+ {
+ handleDragLeave(event)
+ handleFiles(event.dataTransfer.files)
+ }}
+ >
+
+
+ onFileSelect(event.target.files ?? undefined)}
+ disabled={disabled}
+ />
+
+ )
+}
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
new file mode 100644
index 000000000..c51694691
--- /dev/null
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { __ } from '@wordpress/i18n'
+import { ImportCard } from '../../common/ImportCard'
+
+export const ACTIONS = ['ignore', 'replace', 'skip'] as const
+
+export type DuplicateAction = typeof ACTIONS[number]
+
+const ACTION_LABELS: Record📁
+ {__('Duplicate snippets', 'code-snippets')}
+
+ {__('Choose files', 'code-snippets')}
+
+
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/UploadButton.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/UploadButton.tsx
new file mode 100644
index 000000000..b3831ca5e
--- /dev/null
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/UploadButton.tsx
@@ -0,0 +1,81 @@
+import { __ } from '@wordpress/i18n'
+import React from 'react'
+import { useRestAPI } from '../../../../hooks/useRestAPI'
+import { REST_NAMESPACED } from '../../../../utils/restAPI'
+import { Button } from '../../../common/Button'
+import type { Dispatch, SetStateAction } from 'react'
+import type { ImportableSnippetSchema } from '../../../../types/schema/ImportableSnippetSchema'
+import type { ImportResult } from '../SelectSnippets/ImportResultDisplay'
+
+interface FileParseResponse {
+ snippets: ImportableSnippetSchema[]
+ total_count: number
+ message: string
+ warnings?: string[]
+}
+
+export interface UploadedFile {
+ id: string
+ name: string
+ file: File
+}
+
+export interface UploadButtonProps {
+ onSuccess: (snippets: ImportableSnippetSchema[]) => void
+ selectedFiles: UploadedFile[] | undefined
+ setImportResult: (result: ImportResult | undefined) => void
+ isUploading: boolean
+ setIsUploading: Dispatch
+ {sprintf(
+ // translators: %d: number of selected files.
+ __('Selected files: (%d)', 'code-snippets'),
+ files.length
+ )}
+
+
+
+ {files.map(file =>
+
+
+
+ )}
+
+ 📄
+
+
+
+
+
+ {file.name}
+ {formatFileSize(file.file.size)}
+
+
+
+ {success ? '✓' : '✕'}
+
+
+
+
+ {success
+ ? __('Import Successful!', 'code-snippets')
+ : __('Import Failed', 'code-snippets')}
+
+
+ }
+ {__('Warnings:', 'code-snippets')}
+
+ {warnings.map(warning =>
+
+
+
+
+interface SelectSnippetsFormProps {
+ isImporting: boolean
+ availableSnippets: ImportableSnippetSchema[]
+ snippetSelection: UseSelection
+
+
+
+
+ {sprintf(
+ // translators: %d: number of available snippets.
+ __('Available snippets (%d)', 'code-snippets'),
+ availableSnippets.length
+ )}
+
+
+
+
+
+ )
+}
+
+interface SubmitFormProps {
+ children: ReactNode
+ duplicateAction: DuplicateAction
+ setImportResult: (result: ImportResult | undefined) => void
+ snippetSelection: UseSelection
+
+
+
diff --git a/src/js/components/ImportMenu/UploadForm/UploadForm.tsx b/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
new file mode 100644
index 000000000..9ab9fe551
--- /dev/null
+++ b/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
@@ -0,0 +1,72 @@
+import React, { useRef, useState } from 'react'
+import { __ } from '@wordpress/i18n'
+import { createInterpolateElement } from '@wordpress/element'
+import { ImportResultDisplay } from './SelectSnippets/ImportResultDisplay'
+import { SelectSnippets } from './SelectSnippets/SelectSnippets'
+import { SelectFiles } from './SelectFiles/SelectFiles'
+import { DuplicateActionSelector } from './SelectFiles/DuplicateActionSelector'
+import type { ImportableSnippetSchema } from '../../../types/schema/ImportableSnippetSchema'
+import type { ImportResult} from './SelectSnippets/ImportResultDisplay'
+import type { UploadedFile} from './SelectFiles/SelectFiles'
+import type { DuplicateAction} from './SelectFiles/DuplicateActionSelector'
+
+type Step = 'upload' | 'select'
+
+export const UploadForm: React.FC = () => {
+ const [duplicateAction, setDuplicateAction] = useState
+
+
+
+ {snippets.map(snippet =>
+
+
+
+ {__('Name', 'code-snippets')}
+ {__('Type', 'code-snippets')}
+ {__('Description', 'code-snippets')}
+ {__('Tags', 'code-snippets')}
+
+
+ )}
+
+
+ toggleItem(snippet.table_data.id)}
+ />
+
+
+ {snippet.table_data.title}
+ {snippet.source_file &&
+
+ {sprintf(
+ // translators: %s: source file name.
+ _x('from %s', 'import snippet source file', 'code-snippets'),
+ snippet.source_file
+ )}
+ }
+ {snippet.table_data.type}
+ {truncateDescription(snippet.table_data.description)}
+ {snippet.table_data.tags || '—'}
+
+
+ )
+}
diff --git a/src/js/components/ImportMenu/common/ImportCard.tsx b/src/js/components/ImportMenu/common/ImportCard.tsx
new file mode 100644
index 000000000..fa7af21d7
--- /dev/null
+++ b/src/js/components/ImportMenu/common/ImportCard.tsx
@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import classnames from 'classnames'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+export interface ImportCardProps extends Omit
+
+
+ {children}
+ )
+
+ImportCard.displayName = 'ImportCard'
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..c1c220172
--- /dev/null
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -0,0 +1,116 @@
+import { __ } from '@wordpress/i18n'
+import React, { useEffect } from 'react'
+import { Spinner } from '@wordpress/components'
+import { TablePagination } from '../../common/ListTable/TablePagination'
+import { SubmitButton } from '../../common/SubmitButton'
+import { useCloudSearch } from './WithCloudSearchContext'
+import { WithCloudSearchFiltersContext, useCloudSearchFilters } from './WithCloudSearchFiltersContext'
+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
+
+
+
+
+
+ : null
+}
+
+const ErrorBanner = () =>
+
+
+
+const NoSearchResultsBanner = () =>
+
+
+
+export const CloudSearch = () => {
+ const { searchResults, error, page } = useCloudSearch()
+
+ return (
+
+
+ )
+}
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
new file mode 100644
index 000000000..4903e7f99
--- /dev/null
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { __ } from '@wordpress/i18n'
+import classnames from 'classnames'
+import { WithRestAPIContext } from '../../../hooks/useRestAPI'
+import { isLicensed } from '../../../utils/screen'
+import { buildUrl, fetchQueryParam, updateQueryParam } from '../../../utils/urls'
+import { UpsellDialog } from '../../common/UpsellDialog'
+import { WithCloudSearchContext } from './WithCloudSearchContext'
+import { CloudSearch } from './CloudSearch'
+
+const TABS = ['snippets', 'bundles'] as const
+type TabName = typeof TABS[number]
+
+const TAB_LABELS: Record
+
+ )
+}
diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
new file mode 100644
index 000000000..11ab17a6f
--- /dev/null
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react'
+import { __ } from '@wordpress/i18n'
+import { CloudStatus } from '../../../types/schema/CloudSnippetSchema'
+import { updateQueryParam } from '../../../utils/urls'
+import { useCloudSearch } from './WithCloudSearchContext'
+import { useCloudSearchFilters } from './WithCloudSearchFiltersContext'
+import type { Dispatch, SetStateAction } from 'react'
+
+export const STATUS_LABELS: Record{__('Community Cloud', 'code-snippets')}
+
+
+ {TABS.map(tab =>
+ {
+ event.preventDefault()
+
+ if (PRO_TABS.includes(tab) && !isLicensed()) {
+ setIsUpsellDialogOpen(true)
+ } else {
+ updateQueryParam('tab', tab)
+ setCurrentTab(tab)
+ }
+ }}
+ >
+ {TAB_LABELS[tab]}
+ {PRO_TABS.includes(tab) && !isLicensed() && {__('Pro', 'code-snippets')}}
+ )}
+
+
+ {'snippets' === currentTab
+ ?
+
+
+interface PreviewModalProps {
+ isOpen: boolean
+ snippet: CloudSnippetSchema
+ setIsOpen: (isOpen: boolean) => void
+}
+
+const PreviewModal: React.FC
+ {
+ event.preventDefault()
+ setIsPreviewOpen(true)
+ }}
+ >
+ {snippet.name}
+
+
+
+
+
+
+
+
+
+ {'php' === snippetType ? '
+
+
+ )
+}
+
+interface SearchResultsProps {
+ results: CloudSnippetSchema[]
+}
+
+export const SearchResults: React.FC
+ {results.map(result =>
+
diff --git a/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx b/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
new file mode 100644
index 000000000..b8d10c06b
--- /dev/null
+++ b/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
@@ -0,0 +1,82 @@
+import React, { useCallback, useState } from 'react'
+import { createContextHook } from '../../../utils/bootstrap'
+import { REST_CLOUD_SEARCH_BASE } from '../../../utils/restAPI'
+import { useRestAPI } from '../../../hooks/useRestAPI'
+import { buildUrl, fetchQueryParam, updateQueryParam } from '../../../utils/urls'
+import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'
+import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'
+
+const SEARCH_PARAM = 's'
+const SEARCH_METHOD_PARAM = 'by'
+
+export interface CloudSearchContext {
+ page: number
+ error: boolean
+ query: string
+ doSearch: VoidFunction
+ totalItems: number
+ totalPages: number
+ isSearching: boolean
+ searchResults: CloudSnippetSchema[] | undefined
+ setPage: Dispatch
+ {visibleStatuses.map(([status, label], index) =>
+
+ )
+}
+
+const ClearRecentlyActiveButton: React.FC = () => {
+ const { api } = useRestAPI()
+ const { refreshSnippetsList } = useSnippetsList()
+ const { currentStatus } = useSnippetsFilters()
+
+ return 'recently_active' === currentStatus
+ ?
+
+ : null
+}
+
+interface ExtraTableNavProps {
+ visibleSnippets: Snippet[]
+}
+
+const FilterByTagControl: React.FC
+
+
+ : null
+}
+
+const SearchBox = () => {
+ const { searchQuery, setSearchQuery } = useSnippetsFilters()
+
+ return (
+
+ {__('Manage Code Snippets', 'code-snippets')}
+
+ {searchQueryText || currentTag
+ ?
+ {__('Search results', 'code-snippets')}
+
+ {/* translators: %s: search query. */}
+ {searchQueryText && sprintf(__(' for “%s”', 'code-snippets'), searchQueryText)}
+
+ {/* translators: %d: code line number. */}
+ {searchLineNumber && sprintf(__(' on line “%d”', 'code-snippets'), searchLineNumber)}
+
+ {/* translators: %s: tag name. */}
+ {currentTag && sprintf(__(' in tag “%s”', 'code-snippets'), currentTag)}
+
+ {' '}
+
+
+ : null}
+
+
+ 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 (
+
+
+ )
+}
+
+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 =>
+
+
+
+export const Changelog = () =>
+
+
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 }) =>
+
+ {sprintf(__('Version %s', 'code-snippets'), version)}
+
+
+ )
+}
+
+interface PartnersProps {
+ partners: ImageLinkSchema[]
+}
+
+const Partners: React.FC{DATA?.hero.name}
+
+ {__('Read more', 'code-snippets')}
+
+ setImageLoaded(true)}
+ />
+
{__('Exclusive deals from our partners', 'code-snippets')}
+
+
{title}
+
+ {__('Visit', 'code-snippets')}
+
+ {__('Helpful articles', 'code-snippets')}
+
+
{title}
+
+
+
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/common/DeleteButton.tsx b/src/js/components/common/DeleteButton.tsx
new file mode 100644
index 000000000..61f893706
--- /dev/null
+++ b/src/js/components/common/DeleteButton.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import { __ } from '@wordpress/i18n'
+import { createInterpolateElement } from '@wordpress/element'
+import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
+import { Button } from './Button'
+import { ConfirmDialog } from './ConfirmDialog'
+import type { Snippet } from '../../types/Snippet'
+import type { ButtonProps } from './Button'
+
+const TrashActiveConfirmMessage = () =>
+ <>
+ {__('Resources and Updates', 'code-snippets')}
+
+
+
+
+ {DATA?.features &&
- <>{children}
-
-
-
diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
new file mode 100644
index 000000000..19adf6848
--- /dev/null
+++ b/src/js/components/common/ListTable/ListTable.tsx
@@ -0,0 +1,144 @@
+import React, { useMemo, useState } from 'react'
+import classnames from 'classnames'
+import { fetchQueryParam } from '../../../utils/urls'
+import { TableHeadings } from './TableHeadings'
+import { TableItems } from './TableItems'
+import { TableNav } from './TableNav'
+import type { TableNavProps } from './TableNav'
+import type { TableHeadingsProps } from './TableHeadings'
+import type { Key, ReactNode } from 'react'
+
+export interface ListTableColumn
+
+
+
+ {
+ event.preventDefault()
+ setSortColumn(column)
+ setSortDirection(newSortDirection)
+ }}>
+ {column.title}
+
+
+
+
+ {isCurrent ? null
+ :
+ {/* translators: Hidden accessibility text. */}
+ {'asc' === newSortDirection ? __('Sort ascending.', 'code-snippets') : __('Sort descending.', 'code-snippets')}
+ }
+
+
+ )
+}
+
+export interface TableHeadingsProps
+
diff --git a/src/js/components/common/ListTable/TableItems.tsx b/src/js/components/common/ListTable/TableItems.tsx
new file mode 100644
index 000000000..7fd3ea00e
--- /dev/null
+++ b/src/js/components/common/ListTable/TableItems.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import type { Dispatch, Key, SetStateAction } from 'react'
+import type { ListTableColumn, ListTableItemsProps } from './ListTable'
+
+interface CheckboxCellProps
+ {
+ setSelected(new Set(event.target.checked ? items.map(getKey) : null))
+ }}
+ />
+
+
+ {columns.map(column => {
+ const cellProps: ThHTMLAttributes{column.title}
+ })}
+
+ {
+ setSelected(previous => {
+ const updated = new Set(previous)
+
+ if (event.target.checked) {
+ updated.add(getKey(item))
+ } else {
+ updated.delete(getKey(item))
+ }
+
+ return updated
+ })
+ }}
+ />
+
+
+interface TableCellProps{column.render(item)}
+ : {column.render(item)}
+}
+
+export interface TableItemsProps
+
+ )
+ :
+
diff --git a/src/js/components/common/ListTable/TableNav.tsx b/src/js/components/common/ListTable/TableNav.tsx
new file mode 100644
index 000000000..acb8be108
--- /dev/null
+++ b/src/js/components/common/ListTable/TableNav.tsx
@@ -0,0 +1,119 @@
+import React, { useMemo, useState } from 'react'
+import { __ } from '@wordpress/i18n'
+import { Spinner } from '@wordpress/components'
+import { handleUnknownError } from '../../../utils/errors'
+import { SubmitButton } from '../SubmitButton'
+import { TablePagination } from './TablePagination'
+import type { TablePaginationProps } from './TablePagination'
+import type { ListTableBulkAction, ListTableNavProps } from './ListTable'
+import type { Key } from 'react'
+
+interface BulkActionSelectProps{noItems}
+