fix(plugin-search): respect custom api route in reindexButton (#10258)

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->
### What?
This PR fixes an issue with `plugin-search` where the ReindexButton was
not directing the reindex call to the correct endpoint location if the
user defined a custom config api route.

### Why?
To allow collection reindexing even when the default base api path gets
overriden with a user-provided one.

### How?
By threading the custom route to the ReindexButton component that calls
the reindex endpoint.

Fixes #10245

Notes:
- I think the `basePath` check/manipulation might be better in the RSC
instead of the client

Edit: @JessChowdhury Didn't see you were assigned until after! Felt bad
about this since it's my bad, wanted to take some ownership over the bug
here, my mistake!

packages/plugin-search/src/Search/index.ts

@@ -8,6 +8,7 @@ import { generateReindexHandler } from '../utilities/generateReindexHandler.js'
 export const generateSearchCollection = (
   pluginConfig: SearchPluginConfigWithLocales,
 ): CollectionConfig => {
+  const apiBasePath = pluginConfig?.apiBasePath || '/api'
   const searchSlug = pluginConfig?.searchOverrides?.slug || 'search'
   const searchCollections = pluginConfig?.collections || []
   const collectionLabels = pluginConfig?.labels
@@ -70,6 +71,7 @@ export const generateSearchCollection = (
               {
                 path: '@payloadcms/plugin-search/client#ReindexButton',
                 serverProps: {
+                  apiBasePath,
                   collectionLabels,
                   searchCollections,
                   searchSlug,

packages/plugin-search/src/Search/ui/ReindexButton/index.client.tsx

@@ -20,6 +20,7 @@ import { ReindexConfirmModal } from './ReindexConfirmModal/index.js'
 const confirmReindexModalSlug = 'confirm-reindex-modal'
 
 export const ReindexButtonClient: React.FC<ReindexButtonProps> = ({
+  apiBasePath,
   collectionLabels,
   searchCollections,
   searchSlug,
@@ -45,8 +46,10 @@ export const ReindexButtonClient: React.FC<ReindexButtonProps> = ({
     closeConfirmModal()
     setLoading(true)
 
+    const basePath = apiBasePath.endsWith('/') ? apiBasePath.slice(0, -1) : apiBasePath
+
     try {
-      const endpointRes = await fetch(`/api/${searchSlug}/reindex?locale=${locale.code}`, {
+      const endpointRes = await fetch(`${basePath}/${searchSlug}/reindex?locale=${locale.code}`, {
         body: JSON.stringify({
           collections: reindexCollections,
         }),
@@ -67,7 +70,7 @@ export const ReindexButtonClient: React.FC<ReindexButtonProps> = ({
       setReindexCollections([])
       setLoading(false)
     }
-  }, [closeConfirmModal, isLoading, reindexCollections, router, searchSlug, locale])
+  }, [closeConfirmModal, isLoading, reindexCollections, router, searchSlug, locale, apiBasePath])
 
   const handleShowConfirmModal = useCallback(
     (collections: string | string[] = searchCollections) => {

packages/plugin-search/src/Search/ui/ReindexButton/index.tsx

@@ -3,7 +3,7 @@ import type { SearchReindexButtonServerComponent } from './types.js'
 import { ReindexButtonClient } from './index.client.js'
 
 export const ReindexButton: SearchReindexButtonServerComponent = (props) => {
-  const { collectionLabels, i18n, searchCollections, searchSlug } = props
+  const { apiBasePath, collectionLabels, i18n, searchCollections, searchSlug } = props
 
   const getStaticLocalizedPluralLabels = () => {
     return Object.fromEntries(
@@ -26,6 +26,7 @@ export const ReindexButton: SearchReindexButtonServerComponent = (props) => {
 
   return (
     <ReindexButtonClient
+      apiBasePath={apiBasePath}
       collectionLabels={getStaticLocalizedPluralLabels()}
       searchCollections={searchCollections}
       searchSlug={searchSlug}

packages/plugin-search/src/Search/ui/ReindexButton/types.ts

@@ -3,6 +3,7 @@ import type { CustomComponent, PayloadServerReactComponent, StaticLabel } from '
 import type { CollectionLabels } from '../../../types.js'
 
 export type ReindexButtonProps = {
+  apiBasePath: string
   collectionLabels: Record<string, StaticLabel>
   searchCollections: string[]
   searchSlug: string

packages/plugin-search/src/index.ts

@@ -37,6 +37,7 @@ export const searchPlugin =
 
       const pluginConfig: SearchPluginConfigWithLocales = {
         // write any config defaults here
+        apiBasePath: config.routes?.api,
         deleteDrafts: true,
         labels,
         locales,

packages/plugin-search/src/types.ts

@@ -31,6 +31,7 @@ export type BeforeSync = (args: {
 export type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]
 
 export type SearchPluginConfig = {
+  apiBasePath?: string
   beforeSync?: BeforeSync
   collections?: string[]
   defaultPriorities?: {