diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss
index ba29ff97..93143046 100644
--- a/src/css/manage/_cloud-community.scss
+++ b/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;
+ }
+}
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index a31b7a4d..e45f9183 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/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')}
/>
- {isSearching && <>
-
- {__('Searching…', 'code-snippets')}
- >}
+ {isSearching &&
+ {__('Searching…', 'code-snippets')}}
-
+
)
}
@@ -78,18 +81,22 @@ const SearchResultsTable = () => {
/>
-
-
-
+ {0 < filteredSearchResults.length
+ ? <>
+
+
+
+ >
+ : }
>
: null
}
@@ -104,8 +111,15 @@ const NoSearchResultsBanner = () =>
{__('No snippets or codevault could be found with that search term. Please try again.', 'code-snippets')}
+const CloudSnippetsHeading: React.FC<{ isFeatured: boolean }> = ({ isFeatured }) =>
+
+ {isFeatured
+ ? __('Featured Snippets', 'code-snippets')
+ : __('Search Results', 'code-snippets')}
+
+
export const CloudSearch = () => {
- const { searchResults, error, page } = useCloudSearch()
+ const { searchResults, error, isFeatured } = useCloudSearch()
return (
@@ -113,11 +127,14 @@ export const CloudSearch = () => {
{error && }
- {0 < page && 0 === searchResults?.length
- ?
- :
-
- }
+ {searchResults !== undefined
+ ? <>
+
+
+
+
+ >
+ : null}
)
}
diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
index 11ab17a6..eb58e3ee 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
+++ b/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 = {
@@ -15,7 +14,8 @@ export const STATUS_LABELS: Record = {
}
export interface CloudSearchFilters {
- tags: string
+ category: number
+ type: number
status: number
}
@@ -35,7 +35,7 @@ const SearchFilter: React.FC = ({ options, filter, filters, s