fix: admin UI and community cloud fixes

src/css/common/_kebab-menu.scss

@@ -40,7 +40,7 @@
 	inline-size: 224px;
 	box-sizing: border-box;
 	margin: 0;
-	padding: 0;
+	padding: 6px 0;
 	list-style: none;
 	background: #fff;
 	border: 1px solid #e2e2e4;

src/css/edit/_form.scss

@@ -64,8 +64,7 @@ $sidebar-gap: 30px;
 		gap: 8px;
 		inline-size: 100%;
 		border-color: #ccc;
-		padding-block: 6px;
-		padding-inline: 12px;
+		padding: 6px 12px;
 	}
 
 	&.no-condition .cond-badge {

src/css/manage/_cloud-community.scss

@@ -83,6 +83,10 @@ $status-colors: (
 	.banner {
 		justify-content: center;
 	}
+
+	.cloud-search-filters select {
+		inline-size: 245px;
+	}
 }
 
 .bundle-share-code-form {

src/js/components/EditMenu/SnippetForm/SnippetForm.tsx

@@ -96,7 +96,7 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 							.replace(__('Create New Condition', 'code-snippets'), __('Edit Condition', 'code-snippets'))
 
 						const newUrl = buildUrl(window.CODE_SNIPPETS.urls.edit, { id: response.id })
-						window.history.pushState({}, document.title, newUrl)
+						window.history.replaceState({}, document.title, newUrl)
 					}
 				}
 			})

src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx

@@ -47,7 +47,7 @@ const StatusMessages: React.FC = () => {
 				</StatusDisplay>)}
 
 			{0 < importedIds.length && (
-			// translators: %d: number of imported snippets.
+				// translators: %d: number of imported snippets.
 				<StatusDisplay type="success" title={sprintf(__('%d snippets imported!', 'code-snippets'), importedIds.length)}>
 					{createInterpolateElement(
 						__('Selected snippets have been successfully imported to your <a>Code Snippets library</a>.', 'code-snippets'),
@@ -59,8 +59,8 @@ const StatusMessages: React.FC = () => {
 				</StatusDisplay>)}
 
 			{selectedImporter &&
-					isWorking !== MigrationStep.FetchSnippets && error?.step !== MigrationStep.FetchSnippets &&
-					0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
+				isWorking !== MigrationStep.FetchSnippets && error?.step !== MigrationStep.FetchSnippets &&
+				0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
 				<ImportCard className="no-snippets-card" role="status" aria-live="polite">
 					<div className="card-inner">
 						<div className="card-icon" aria-hidden="true">📭</div>

src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx

@@ -24,11 +24,8 @@ const TableNav: React.FC<TableNavProps> = ({ which, onImport, isImporting, selec
 		>
 			{isImporting
 				? __('Importing…', 'code-snippets')
-				: sprintf(
-					// translators: %d: number of selected snippets.
-					__('Import Selected (%d)', 'code-snippets'),
-					selection.selectedItems.size
-				)}
+				// translators: %d: number of selected snippets.
+				: sprintf(__('Import Selected (%d)', 'code-snippets'), selection.selectedItems.size)}
 		</Button>
 	</div>
 

src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx

@@ -48,11 +48,8 @@ export interface SelectedFilesListProps {
 export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onRemoveFile }) =>
 	<div className="selected-files">
 		<h3>
-			{sprintf(
-				// translators: %d: number of selected files.
-				__('Selected files: (%d)', 'code-snippets'),
-				files.length
-			)}
+			{// translators: %d: number of selected files.
+				sprintf(__('Selected files: (%d)', 'code-snippets'), files.length)}
 		</h3>
 
 		<div className="selected-files-list">

src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx

@@ -8,7 +8,7 @@ import { Button } from '../../../common/Button'
 import { ImportCard } from '../../common/ImportCard'
 import { useSelection } from '../../../../hooks/useSelection'
 import { SnippetSelectionTable } from './SnippetSelectionTable'
-import type { FormEventHandler, ReactNode} from 'react'
+import type { FormEventHandler, ReactNode } from 'react'
 import type { UseSelection } from '../../../../hooks/useSelection'
 import type { ImportResult } from './ImportResultDisplay'
 import type { ImportableSnippetSchema } from '../../../../types/schema/ImportableSnippetSchema'
@@ -67,11 +67,8 @@ const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippe
 		<>
 			<div className="tablenav top">
 				<div>
-					<h2>{sprintf(
-						// translators: %d: number of available snippets.
-						__('Available snippets (%d)', 'code-snippets'),
-						availableSnippets.length
-					)}</h2>
+					<h2>{// translators: %d: number of available snippets.
+						sprintf(__('Available snippets (%d)', 'code-snippets'), availableSnippets.length)}</h2>
 					<p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
 				</div>
 				<div className="table-actions">

src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx

@@ -4,8 +4,7 @@ import classnames from 'classnames'
 import { Spinner } from '@wordpress/components'
 import { useRestAPI } from '../../../hooks/useRestAPI'
 import { REST_BASES } from '../../../utils/restAPI'
-import { isLicensed } from '../../../utils/screen'
-import { isProSnippet } from '../../../utils/snippets/snippets'
+import { isCloudSnippetDownloadable } from '../../../utils/snippets/snippets'
 import { TableNav } from '../../common/ListTable/TableNavigation'
 import { LoadingStatusNotices } from '../../common/LoadingStatusNotices'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
@@ -67,9 +66,6 @@ const SearchBox = () => {
 	)
 }
 
-const isSnippetDownloadable = (snippet: CloudSnippetSchema): boolean =>
-	!snippet.local_id && (isLicensed() || !isProSnippet(snippet))
-
 interface SearchResultsGridProps {
 	snippets: CloudSnippetSchema[]
 	selected: Set<CloudSnippetSchema['id']>
@@ -88,19 +84,21 @@ const SearchResultsGrid: React.FC<SearchResultsGridProps> = ({ snippets, selecte
 				snippet={result}
 				author={<CloudSnippetAuthor codevaultSlug={result.codevault} />}
 				isSelected={selected.has(result.id)}
-				onSelectedChange={isSelected => {
-					setSelected(previous => {
-						const updated = new Set(previous)
-
-						if (isSelected) {
-							updated.add(result.id)
-						} else {
-							updated.delete(result.id)
-						}
-
-						return updated
-					})
-				}}
+				onSelectedChange={isCloudSnippetDownloadable(result)
+					? isSelected => {
+						setSelected(previous => {
+							const updated = new Set(previous)
+
+							if (isSelected) {
+								updated.add(result.id)
+							} else {
+								updated.delete(result.id)
+							}
+
+							return updated
+						})
+					}
+					: undefined}
 			/>)}
 	</ul>
 
@@ -130,7 +128,7 @@ const useSearchResultsSelection = () => {
 	): Promise<void> => {
 		if ('download' === action) {
 			await Promise.all((searchResults?.snippets ?? [])
-				.filter(snippet => selectedIds.has(snippet.id) && isSnippetDownloadable(snippet))
+				.filter(snippet => selectedIds.has(snippet.id) && isCloudSnippetDownloadable(snippet))
 				.map(({ id }) => api.post(`${REST_BASES.cloud.snippets}/${id}/download`)))
 
 			doSearch()
@@ -166,7 +164,11 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 				which="top"
 				actions={CLOUD_BULK_ACTIONS}
 				doAction={doAction}
-				selectAllKeys={searchResults.snippets.map(snippet => snippet.id)}
+				selectAllKeys={'card' === snippetView
+					? searchResults.snippets
+						.filter(snippet => isCloudSnippetDownloadable(snippet))
+						.map(snippet => snippet.id)
+					: undefined}
 				extraTableNav={() => <SearchFilters />}
 				endTableNav={which =>
 					'top' === which

src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx

@@ -1,6 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n'
 import React, { useState } from 'react'
-import { getSnippetType } from '../../../utils/snippets/snippets'
+import { getSnippetType , isCloudSnippetDownloadable } from '../../../utils/snippets/snippets'
 import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
 import { Button } from '../../common/Button'
@@ -24,8 +24,8 @@ const updateSelection = (setSelected: SetSelected, ids: CloudSnippetId[], isSele
 
 interface CloudSnippetRowProps {
 	snippet: CloudSnippetSchema
-	selected: Set<CloudSnippetId>
-	setSelected: SetSelected
+	selected?: Set<CloudSnippetId>
+	setSelected?: SetSelected
 }
 
 interface CloudSnippetActionsProps extends Pick<CloudSnippetRowProps, 'snippet'> {
@@ -65,20 +65,22 @@ const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet, selected, se
 
 	return (
 		<tr>
-			<th scope="row" className="check-column">
-				<input
-					id={`cb-select-${snippet.id}`}
-					type="checkbox"
-					name="checked[]"
-					checked={selected.has(snippet.id)}
-					aria-label={sprintf(
-						// translators: %s: snippet name.
-						__('Select %s', 'code-snippets'),
-						snippet.name
-					)}
-					onChange={event => updateSelection(setSelected, [snippet.id], event.target.checked)}
-				/>
-			</th>
+			{selected && setSelected
+				? <th scope="row" className="check-column">
+					{isCloudSnippetDownloadable(snippet) && <input
+						id={`cb-select-${snippet.id}`}
+						type="checkbox"
+						name="checked[]"
+						checked={selected.has(snippet.id)}
+						aria-label={sprintf(
+							// translators: %s: snippet name.
+							__('Select %s', 'code-snippets'),
+							snippet.name
+						)}
+						onChange={event => updateSelection(setSelected, [snippet.id], event.target.checked)}
+					/>}
+				</th>
+				: null}
 
 			<td className="column-name column-primary">
 				<strong>
@@ -110,29 +112,38 @@ const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet, selected, se
 
 export interface CloudSnippetsTableProps {
 	snippets: CloudSnippetSchema[]
-	selected: Set<CloudSnippetId>
-	setSelected: SetSelected
+	selected?: Set<CloudSnippetId>
+	setSelected?: SetSelected
 }
 
 /**
  * Table view for lists of cloud snippets (community search results and
  * bundle contents), mirroring the card actions. Descriptions are clamped
- * so all rows stay the same height.
+ * so all rows stay the same height. Selection is only offered when the
+ * containing view provides selection state, as bundle contents have no
+ * bulk actions.
  */
-export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({ snippets, selected, setSelected }) =>
-	<table className="wp-list-table widefat fixed striped cloud-snippets-table">
+export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({
+	snippets,
+	selected,
+	setSelected
+}) => {
+	const downloadable = snippets.filter(snippet => isCloudSnippetDownloadable(snippet))
+
+	return <table className="wp-list-table widefat fixed striped cloud-snippets-table">
 		<thead>
 			<tr>
-				<td className="column-cb check-column">
-					<input
-						id="cb-select-all-cloud-snippets"
-						type="checkbox"
-						checked={0 < snippets.length && snippets.every(snippet => selected.has(snippet.id))}
-						aria-label={__('Select all snippets', 'code-snippets')}
-						onChange={event =>
-							updateSelection(setSelected, snippets.map(snippet => snippet.id), event.target.checked)}
-					/>
-				</td>
+				{selected && setSelected && (
+					<td className="column-cb check-column">
+						<input
+							id="cb-select-all-cloud-snippets"
+							type="checkbox"
+							checked={0 < downloadable.length && downloadable.every(snippet => selected.has(snippet.id))}
+							aria-label={__('Select all snippets', 'code-snippets')}
+							onChange={event =>
+								updateSelection(setSelected, downloadable.map(snippet => snippet.id), event.target.checked)}
+						/>
+					</td>)}
 				<th scope="col" className="column-name column-primary">{__('Name', 'code-snippets')}</th>
 				<th scope="col" className="column-type">{__('Type', 'code-snippets')}</th>
 				<th scope="col" className="column-status">{__('Status', 'code-snippets')}</th>
@@ -147,3 +158,4 @@ export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({ snippets
 				<CloudSnippetRow key={snippet.id} {...{ snippet, selected, setSelected }} />)}
 		</tbody>
 	</table>
+}

src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx

@@ -59,22 +59,33 @@ const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({
 			</h3>
 		</div>
 
-		{0 < snippet.tags.length || snippet.updated && (
-			<div className="snippet-card-meta">
-				{0 < snippet.tags.length && (
-					<span className="cloud-snippet-tags">{snippet.tags.join(', ')}</span>)}
+		{0 < snippet.tags.length || snippet.updated
+			? <div className="snippet-card-meta">
+				{0 < snippet.tags.length
+					? <span className="cloud-snippet-tags">
+						<span className="snippet-card-tags-label">
+							{__('Tags:', 'code-snippets')}
+						</span> {snippet.tags.join(', ')}
+					</span>
+					: null}
 
-				{snippet.updated && (
-					<time className="snippet-card-modified" dateTime={snippet.updated} title={snippet.updated}>
-						{/* translators: %s: human-readable time difference, including "ago" suffix. */
-							sprintf(__('Modified %s', 'code-snippets'), humanTimeDiff(snippet.updated, undefined))}
-					</time>)}
-			</div>)}
+				{snippet.updated
+					? <time className="snippet-card-modified" dateTime={snippet.updated} title={snippet.updated}>
+						{sprintf(
+							/* translators: %s: human-readable time difference. */
+							__('Modified %s', 'code-snippets'),
+							humanTimeDiff(snippet.updated, undefined)
+						)}
+					</time>
+					: null}
+			</div>
+			: null}
 
-		{snippet.description && (
-			<p className="snippet-description-content">
+		{snippet.description
+			? <p className="snippet-description-content">
 				{truncateChars(stripTags(snippet.description))}
-			</p>)}
+			</p>
+			: null}
 
 		{author}
 	</div>