feat: Featured Snippets, search and filtering for Community page

src/css/manage/_cloud-community.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use '../common/theme';
 @use '../common/banners';
 
@@ -15,6 +16,16 @@
 		flex: 0 0 165px;
 	}
 
+	.cloud-search-submit {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		.components-spinner {
+			margin: 0;
+		}
+	}
+
 	.cloud-search-query {
 		flex: 1;
 		position: relative;
@@ -51,6 +62,10 @@
 			block-size: 100%;
 		}
 
+		nav {
+			margin-inline-start: auto;
+		}
+
 		.tablenav-pages {
 			margin: 0;
 			margin-inline-start: auto;
@@ -169,3 +184,16 @@
 .cloud-search-results .cloud-search-result footer > .components-spinner {
 	margin: 0;
 }
+
+.cloud-pro-button.button {
+	background-color: theme.$secondary;
+	border-color: theme.$secondary;
+	color: #fff;
+
+	&:hover,
+	&:focus {
+		background-color: color.adjust(theme.$secondary, $lightness: -10%);
+		border-color: color.adjust(theme.$secondary, $lightness: -10%);
+		color: #fff;
+	}
+}

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

@@ -2,7 +2,6 @@ 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'
@@ -43,14 +42,18 @@ const SearchBox = () => {
 					placeholder={__('e.g. Remove unused JavaScript…', 'code-snippets')}
 				/>
 				<span role="status" aria-live="polite">
-					{isSearching && <>
-						<Spinner />
-						<span className="screen-reader-text">{__('Searching…', 'code-snippets')}</span>
-					</>}
+					{isSearching &&
+						<span className="screen-reader-text">{__('Searching…', 'code-snippets')}</span>}
 				</span>
 			</div>
 
-			<SubmitButton primary disabled={isSearching} text={__('Search Cloud Library', 'code-snippets')} />
+			<button
+				type="submit"
+				className="button button-primary cloud-search-submit"
+				disabled={isSearching}
+			>
+				{isSearching ? <Spinner /> : __('Search Cloud Library', 'code-snippets')}
+			</button>
 		</form>
 	)
 }
@@ -78,18 +81,22 @@ const SearchResultsTable = () => {
 				/>
 			</div>
 
-			<SearchResults results={filteredSearchResults} />
-
-			<div className="tablenav bottom">
-				<TablePagination
-					which="bottom"
-					totalItems={totalItems}
-					totalPages={totalPages}
-					disabled={isSearching}
-					currentPage={page}
-					setCurrentPage={setPage}
-				/>
-			</div>
+			{0 < filteredSearchResults.length
+				? <>
+					<SearchResults results={filteredSearchResults} />
+
+					<div className="tablenav bottom">
+						<TablePagination
+							which="bottom"
+							totalItems={totalItems}
+							totalPages={totalPages}
+							disabled={isSearching}
+							currentPage={page}
+							setCurrentPage={setPage}
+						/>
+					</div>
+				</>
+				: <NoSearchResultsBanner />}
 		</>
 		: null
 }
@@ -104,20 +111,30 @@ const NoSearchResultsBanner = () =>
 		<p>{__('No snippets or codevault could be found with that search term. Please try again.', 'code-snippets')}</p>
 	</div>
 
+const CloudSnippetsHeading: React.FC<{ isFeatured: boolean }> = ({ isFeatured }) =>
+	<h3 className="cloud-snippets-heading">
+		{isFeatured
+			? __('Featured Snippets', 'code-snippets')
+			: __('Search Results', 'code-snippets')}
+	</h3>
+
 export const CloudSearch = () => {
-	const { searchResults, error, page } = useCloudSearch()
+	const { searchResults, error, isFeatured } = useCloudSearch()
 
 	return (
 		<div className="cloud-search">
 			<SearchBox />
 
 			{error && <ErrorBanner />}
 
-			{0 < page && 0 === searchResults?.length
-				? <NoSearchResultsBanner />
-				: <WithCloudSearchFiltersContext>
-					<SearchResultsTable />
-				</WithCloudSearchFiltersContext>}
+			{searchResults !== undefined
+				? <>
+					<CloudSnippetsHeading isFeatured={isFeatured} />
+					<WithCloudSearchFiltersContext>
+						<SearchResultsTable />
+					</WithCloudSearchFiltersContext>
+				</>
+				: null}
 		</div>
 	)
 }

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

@@ -3,7 +3,6 @@ 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<CloudStatus, string> = {
@@ -15,7 +14,8 @@ export const STATUS_LABELS: Record<CloudStatus, string> = {
 }
 
 export interface CloudSearchFilters {
-	tags: string
+	category: number
+	type: number
 	status: number
 }
 
@@ -35,7 +35,7 @@ const SearchFilter: React.FC<SearchFilterProps> = ({ options, filter, filters, s
 		</label>
 
 		<select
-			id="cloud-search-category"
+			id={`cloud-search-${filter}`}
 			className="cloud-search-category-filter"
 			value={filters[filter]}
 			onChange={event => {
@@ -55,42 +55,48 @@ const SearchFilter: React.FC<SearchFilterProps> = ({ options, filter, filters, s
 	</>
 
 export const SearchFilters = () => {
-	const { searchResults: snippets } = useCloudSearch()
-	const { filters, setFilters } = useCloudSearchFilters()
+	const { availableFilters, filters, setFilters } = useCloudSearch()
 
-	const options: { [K in keyof CloudSearchFilters]: [CloudSearchFilters[K], string][] } = useMemo(
-		() => {
-			const tags = new Set<string>()
-			const statuses = new Set<CloudStatus>()
+	const categoryOptions: [number, string][] = useMemo(
+		() => (availableFilters.categories ?? []).map(c => [c.id, c.name]),
+		[availableFilters.categories]
+	)
 
-			snippets?.forEach(snippet => {
-				snippet.tags.forEach(tag => tags.add(tag))
-				statuses.add(snippet.status)
-			})
+	const typeOptions: [number, string][] = useMemo(
+		() => (availableFilters.types ?? []).map(t => [t.id, t.name]),
+		[availableFilters.types]
+	)
 
-			return {
-				tags: Array.from(tags).sort().map(tag => [tag, tag]),
-				status: Array.from(statuses).sort().map(status => [status, STATUS_LABELS[status]])
-			}
-		},
-		[snippets])
+	const statusOptions: [number, string][] = useMemo(
+		() => (availableFilters.statuses ?? []).map(s => [s.id, s.name]),
+		[availableFilters.statuses]
+	)
 
 	return (
 		<>
 			<SearchFilter
-				filter="tags"
+				filter="category"
 				filters={filters}
 				setFilters={setFilters}
-				options={options.tags}
+				options={categoryOptions}
 				label={__('Snippet Category', 'code-snippets')}
 				allOptionLabel={__('All Categories', 'code-snippets')}
 			/>
 
+			<SearchFilter
+				filter="type"
+				filters={filters}
+				setFilters={setFilters}
+				options={typeOptions}
+				label={__('Snippet Type', 'code-snippets')}
+				allOptionLabel={__('All Types', 'code-snippets')}
+			/>
+
 			<SearchFilter
 				filter="status"
 				filters={filters}
 				setFilters={setFilters}
-				options={options.status}
+				options={statusOptions}
 				label={__('Snippet Status', 'code-snippets')}
 				allOptionLabel={__('All Snippet Statuses', 'code-snippets')}
 			/>

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

@@ -11,6 +11,7 @@ import { getSnippetEditUrl, getSnippetType, isProSnippet } from '../../../utils/
 import { Badge } from '../../common/Badge'
 import { Button } from '../../common/Button'
 import { ErrorTooltip } from '../../common/Tooltip'
+import { UpsellDialog } from '../../common/UpsellDialog'
 import { STATUS_LABELS } from './SearchFilters'
 import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'
 
@@ -69,7 +70,7 @@ const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({ snippet, setI
 
 		<p className="cloud-snippet-author">
 			{_x('by ', 'snippet author', 'code-snippets')}
-			<a href={`https://codesnippets.cloud/codevault/${snippet.codevault}`} target="_blank" rel="noopener noreferrer">
+			<a href={`${window.CODE_SNIPPETS?.urls.cloud}codevault/${snippet.codevault}`} target="_blank" rel="noopener noreferrer">
 				{snippet.codevault}
 			</a>
 		</p>
@@ -105,6 +106,7 @@ const DownloadButton: React.FC<DownloadButtonProps> = ({ snippet }) => {
 	const [isWorking, setIsWorking] = useState(false)
 	const [errorMessage, setErrorMessage] = useState<string>()
 	const [localSnippetId, setLocalSnippetId] = useState<number>()
+	const [isUpsellOpen, setIsUpsellOpen] = useState(false)
 
 	const handleDownload = () => {
 		setIsWorking(true)
@@ -133,7 +135,12 @@ const DownloadButton: React.FC<DownloadButtonProps> = ({ snippet }) => {
 
 		if (isProSnippet(snippet) && !isLicensed()) {
 			return (
-				<Button primary disabled>{__('Pro only', 'code-snippets')}</Button>
+				<>
+					<Button className="cloud-pro-button" onClick={() => setIsUpsellOpen(true)}>
+						{__('Pro Only', 'code-snippets')}
+					</Button>
+					<UpsellDialog isOpen={isUpsellOpen} setIsOpen={setIsUpsellOpen} />
+				</>
 			)
 		}