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, Modal, 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,11 @@ interface FetchAllPostTypesResponse {
 }
 
 const OneSearchSettingsPage = () => {
+	const sharedSites = window.OneSearchSettings.sharedSites || [];
+	const hasAlgoliaCreds =
+		window.OneSearchSettings.hasAlgoliaCredentials ?? false;
+	const hasPrerequisites = sharedSites.length > 0 && hasAlgoliaCreds;
+
 	const [ siteType, setSiteType ] = useState< SiteType >( '' );
 	const [ showModal, setShowModal ] = useState( false );
 	const [ editingIndex, setEditingIndex ] = useState< number | null >( null );
@@ -289,44 +294,78 @@ const OneSearchSettingsPage = () => {
 			</>
 
 			{ 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="onesearch-search-content">
+						<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 && (
+						<Modal
+							className="onesearch-setup-modal"
+							overlayClassName="onesearch-setup-overlay"
+							onRequestClose={ () => {} }
+							shouldCloseOnEsc={ false }
+							shouldCloseOnClickOutside={ false }
+							size="medium"
+							__experimentalHideHeader
+						>
+							<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>
+						</Modal>
+					) }
+				</>
 			) }
 		</>
 	);

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,12 @@ body {
 	margin-right: 4px;
 }
 
+body:has(.onesearch-setup-overlay) .onesearch-search-content {
+	filter: blur(6px);
+	pointer-events: none;
+	user-select: none;
+}
+
 .onesearch-governing-site-card {
 	display: flex;
 	justify-content: flex-end;

assets/src/types/global.d.ts

@@ -22,6 +22,7 @@ export interface OneSearchSettings {
 	restNamespace: string;
 	currentSiteUrl: string;
 	indexableEntities?: Record< string, string[] >;
+	hasAlgoliaCredentials?: boolean;
 }
 
 export interface OneSearchOnboarding {

inc/Modules/Core/Assets.php

@@ -64,17 +64,20 @@ final class Assets implements Registrable {
 	 * @return array<string,mixed>
 	 */
 	public static function get_localized_data(): array {
+		$algolia_creds = Search_Settings::get_algolia_credentials();
+
 		if ( empty( self::$localized_data ) ) {
 			self::$localized_data = [
-				'currentSiteUrl'    => esc_url( home_url( '/' ) ),
-				'indexableEntities' => Search_Settings::get_indexable_entities(),
-				'nonce'             => wp_create_nonce( 'wp_rest' ),
-				'api_key'           => Settings::get_api_key(),
-				'restNamespace'     => Abstract_REST_Controller::NAMESPACE,
-				'restUrl'           => esc_url( home_url( '/wp-json/' ) ),
-				'setupUrl'          => admin_url( 'admin.php?page=onesearch-settings' ),
-				'sharedSites'       => array_values( Settings::get_shared_sites() ),
-				'siteType'          => Settings::get_site_type(),
+				'currentSiteUrl'        => esc_url( home_url( '/' ) ),
+				'hasAlgoliaCredentials' => ! empty( $algolia_creds['app_id'] ) && ! empty( $algolia_creds['write_key'] ),
+				'indexableEntities'     => Search_Settings::get_indexable_entities(),
+				'nonce'                 => wp_create_nonce( 'wp_rest' ),
+				'api_key'               => Settings::get_api_key(),
+				'restNamespace'         => Abstract_REST_Controller::NAMESPACE,
+				'restUrl'               => esc_url( home_url( '/wp-json/' ) ),
+				'setupUrl'              => admin_url( 'admin.php?page=onesearch-settings' ),
+				'sharedSites'           => array_values( Settings::get_shared_sites() ),
+				'siteType'              => Settings::get_site_type(),
 			];
 		}
 

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 );