diff --git a/assets/src/admin/search/index.tsx b/assets/src/admin/search/index.tsx index 7956d66..19ca3ab 100644 --- a/assets/src/admin/search/index.tsx +++ b/assets/src/admin/search/index.tsx @@ -1,13 +1,18 @@ /** * WordPress dependencies */ -import { useState, useEffect, createRoot } from '@wordpress/element'; +import { Button, Card, CardBody, Snackbar } from '@wordpress/components'; +import { createRoot, useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Snackbar } from '@wordpress/components'; /** * External dependencies */ +import type { + BrandSite, + defaultBrandSite, + NoticeType, +} from '@/admin/settings/page'; import SiteIndexableEntities from '@/components/SiteIndexableEntities'; import SiteModal from '@/components/SiteModal'; import SiteSearchSettings, { @@ -15,15 +20,10 @@ import SiteSearchSettings, { } from '@/components/SiteSearchSettings'; import { API_NAMESPACE, - NONCE, CURRENT_SITE_URL, + NONCE, withTrailingSlash, } from '@/js/utils'; -import type { - BrandSite, - defaultBrandSite, - NoticeType, -} from '@/admin/settings/page'; import type { SiteType } from '@/types/global'; type BrandSiteFormData = typeof defaultBrandSite; @@ -49,6 +49,10 @@ interface FetchAllPostTypesResponse { } const OneSearchSettingsPage = () => { + const gSharedSites = window.OneSearchSettings.sharedSites || []; + const hasBrandSites = gSharedSites.length > 0; + const hasPrerequisites = hasBrandSites; + const [ siteType, setSiteType ] = useState< SiteType >( '' ); const [ showModal, setShowModal ] = useState( false ); const [ editingIndex, setEditingIndex ] = useState< number | null >( null ); @@ -289,44 +293,94 @@ const OneSearchSettingsPage = () => { > { siteType === 'governing-site' && ( - - ) } - - { siteType === 'governing-site' && ( - - ) } - - { showModal && ( - { - setShowModal( false ); - setEditingIndex( null ); - setFormData( { name: '', url: '', api_key: '' } ); - } } - editing={ editingIndex !== null } - sites={ sites } - originalData={ - editingIndex !== null - ? sites[ editingIndex ] - : undefined - } - /> + <> + + + + + + + { showModal && ( + { + setShowModal( false ); + setEditingIndex( null ); + setFormData( { + name: '', + url: '', + api_key: '', + } ); + } } + editing={ editingIndex !== null } + sites={ sites } + originalData={ + editingIndex !== null + ? sites[ editingIndex ] + : undefined + } + /> + ) } + + { ! hasPrerequisites && ( + <> + + + + + + { __( + 'Setup Required', + 'onesearch' + ) } + + + { __( + 'You need to add at least one Brand Site and configure your Algolia credentials before you can set up indices and search.', + 'onesearch' + ) } + + + { __( + 'Go to Settings', + 'onesearch' + ) } + + + + + > + ) } + > ) } > ); diff --git a/assets/src/components/SiteSearchSettings.tsx b/assets/src/components/SiteSearchSettings.tsx index 4b83a37..d66ef69 100644 --- a/assets/src/components/SiteSearchSettings.tsx +++ b/assets/src/components/SiteSearchSettings.tsx @@ -7,22 +7,22 @@ import { Card, CardBody, CardHeader, - ToggleControl, - Spinner, Notice, + Spinner, + ToggleControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * External dependencies */ -import { useState, useEffect, useCallback, useRef } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; /** * Internal dependencies */ -import { NONCE, withTrailingSlash } from '../js/utils'; import type { NoticeType } from '@/admin/settings/page'; +import { NONCE, withTrailingSlash } from '../js/utils'; /** * Create NONCE middleware for apiFetch @@ -468,8 +468,9 @@ const SiteSearchSettings = ( { + + { /* Notice for warnings */ } - { /* Notice for warnings */ } { localNotice && (
+ { __( + 'You need to add at least one Brand Site and configure your Algolia credentials before you can set up indices and search.', + 'onesearch' + ) } +