fix: Indices and search menu item visibility

assets/src/admin/search/index.tsx

@@ -1,29 +1,29 @@
 /**
  * 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, {
 	type PostTypeOption,
 } 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 @@
 }
 
 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 @@
 			</>
 
 			{ siteType === 'governing-site' && (
-				<SiteIndexableEntities
-					sites={ sites }
-					allPostTypes={ allPostTypes }
-					currentSiteUrl={ withTrailingSlash( CURRENT_SITE_URL ) }
-					setNotice={ setNotice }
-					onEntitiesSaved={ handleEntitiesSaved }
-					saving={ saving }
-					setSaving={ setSaving }
-				/>
-			) }
-
-			{ siteType === 'governing-site' && (
-				<SiteSearchSettings
-					setNotice={ setNotice }
-					indexableEntities={ indexableEntities }
-					allPostTypes={ allPostTypes }
-					isIndexableEntitiesSaving={ saving }
-				/>
-			) }
-
-			{ showModal && (
-				<SiteModal
-					formData={ formData }
-					setFormData={ setFormData }
-					onSubmit={ handleFormSubmit }
-					onClose={ () => {
-						setShowModal( false );
-						setEditingIndex( null );
-						setFormData( { name: '', url: '', api_key: '' } );
-					} }
-					editing={ editingIndex !== null }
-					sites={ sites }
-					originalData={
-						editingIndex !== null
-							? sites[ editingIndex ]
-							: undefined
-					}
-				/>
+				<>
+					<div
+						className={
+							! hasPrerequisites
+								? 'onesearch-setup-overlay-blur'
+								: ''
+						}
+					>
+						<SiteIndexableEntities
+							sites={ sites }
+							allPostTypes={ allPostTypes }
+							currentSiteUrl={ withTrailingSlash(
+								CURRENT_SITE_URL
+							) }
+							setNotice={ setNotice }
+							onEntitiesSaved={ handleEntitiesSaved }
+							saving={ saving }
+							setSaving={ setSaving }
+						/>
+
+						<SiteSearchSettings
+							setNotice={ setNotice }
+							indexableEntities={ indexableEntities }
+							allPostTypes={ allPostTypes }
+							isIndexableEntitiesSaving={ saving }
+						/>
+					</div>
+
+					{ showModal && (
+						<SiteModal
+							formData={ formData }
+							setFormData={ setFormData }
+							onSubmit={ handleFormSubmit }
+							onClose={ () => {
+								setShowModal( false );
+								setEditingIndex( null );
+								setFormData( {
+									name: '',
+									url: '',
+									api_key: '',
+								} );
+							} }
+							editing={ editingIndex !== null }
+							sites={ sites }
+							originalData={
+								editingIndex !== null
+									? sites[ editingIndex ]
+									: undefined
+							}
+						/>
+					) }
+
+					{ ! hasPrerequisites && (
+						<>
+							<div className="onesearch-setup-overlay-backdrop" />
+							<div className="onesearch-setup-overlay-dialog">
+								<Card>
+									<CardBody>
+										<h2>
+											{ __(
+												'Setup Required',
+												'onesearch'
+											) }
+										</h2>
+										<p>
+											{ __(
+												'You need to add at least one Brand Site and configure your Algolia credentials before you can set up indices and search.',
+												'onesearch'
+											) }
+										</p>
+										<Button
+											variant="primary"
+											href={
+												window.OneSearchSettings
+													.setupUrl
+											}
+										>
+											{ __(
+												'Go to Settings',
+												'onesearch'
+											) }
+										</Button>
+									</CardBody>
+								</Card>
+							</div>
+						</>
+					) }
+				</>
 			) }
 		</>
 	);

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 = ( {
 					</Button>
 				</div>
 			</CardHeader>
+
+			{ /* Notice for warnings */ }
 			<CardBody className="onesearch-body">
-				{ /* Notice for warnings */ }
 				{ localNotice && (
 					<Notice
 						status={ localNotice.type }

assets/src/css/admin.scss

@@ -51,7 +51,6 @@
 		background-color: #e11d1d;
 		color: #fff;
 	}
-
 }
 
 body {
@@ -363,7 +362,13 @@ body {
 	margin: 0 0 2px 0;
 	font-size: 13px;
 	color: #666;
-	font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	font-family:
+		"SF Mono",
+		Consolas,
+		"Liberation Mono",
+		Menlo,
+		Courier,
+		monospace;
 }
 
 .onesearch-entity-site-domain {
@@ -404,6 +409,32 @@ body {
 	margin-right: 4px;
 }
 
+.onesearch-setup-overlay-blur {
+	filter: blur(6px);
+	pointer-events: none;
+	user-select: none;
+}
+
+.onesearch-setup-overlay-backdrop {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	z-index: 9998;
+}
+
+.onesearch-setup-overlay-dialog {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 9999;
+	max-width: 480px;
+	width: 100%;
+}
+
 .onesearch-governing-site-card {
 	display: flex;
 	justify-content: flex-end;

inc/Modules/Search/Admin.php

@@ -11,7 +11,6 @@
 
 use OneSearch\Contracts\Interfaces\Registrable;
 use OneSearch\Modules\Core\Assets;
-use OneSearch\Modules\Search\Settings as Search_Settings;
 use OneSearch\Modules\Settings\Settings;
 
 /**
@@ -34,7 +33,7 @@ final class Admin implements Registrable {
 	 * {@inheritDoc}
 	 */
 	public function register_hooks(): void {
-		if ( ! Settings::is_governing_site() || empty( Search_Settings::get_algolia_credentials() ) ) {
+		if ( ! Settings::is_governing_site() ) {
 			return;
 		}
 		add_action( 'admin_menu', [ $this, 'add_submenu' ] );
@@ -45,7 +44,7 @@ public function register_hooks(): void {
 	 * Register the settings page.
 	 */
 	public function add_submenu(): void {
-		// Register the "Indices and Search" submenu only for governing sites with Algolia credentials.
+		// Register the "Indices and Search" submenu for governing sites.
 		add_submenu_page(
 			self::MENU_SLUG,
 			__( 'Indices and Search', 'onesearch' ),

inc/Modules/Settings/Admin.php

@@ -85,7 +85,7 @@ public function add_submenu(): void {
 	 * Remove the default submenu added by WordPress.
 	 */
 	public function remove_default_submenu(): void {
-		if ( Settings::is_governing_site() && ! empty( Settings::get_shared_sites() ) ) {
+		if ( Settings::is_governing_site() ) {
 			return;
 		}
 		remove_submenu_page( self::MENU_SLUG, self::MENU_SLUG );