Adding Search Indices to the Frontend

This guide explains how to add new indices to the frontend search functionality. The search system uses Meilisearch and requires configuration in two main files.

Files to Modify

1. app/src/composables/useHttp.js - Register the search endpoint
2. app/src/components/ui/CommandPalette/StartScreen.vue - Configure the index mapping

Step 1: Add Search Endpoint in useHttp.js

In useHttp.js, add a new entry to the REGISTRY object for your index:

const REGISTRY = {
  // ... existing entries ...
  "search.your_index": { service: 'search', path: "/indexes/your_index/search/" },
  "search.multiple": { service: 'search', path: "/multi-search" }, // This is required for multi-index search
}

For example, to add a search endpoint for projects:

"search.project": { service: 'search', path: "/indexes/project/search/" }

Step 2: Configure Index Mapping in StartScreen.vue

In StartScreen.vue, add your index to the indices object:

const indices = {
  // ... existing indices ...
  'your_index': 'your_resource',
}

The key is the Meilisearch index name, and the value is the resource name used in the application.

For example:

const indices = {
  'project': 'project',
  'milestones': 'milestones',
  'employee': 'employee',
}

Step 3: Update Search Function

The search function in StartScreen.vue should use the following format:

function search() {
  requests.value.search = getResource('search.multiple')
  requests.value.search.method = 'post'

  const searchQuery = removeHashtags(q.value)
  const searchIndices = customIndices.value.length > 0 ? customIndices.value : Object.keys(indices)

  requests.value.search.data = {
    "federation": {},
    "queries": searchIndices.map(index => ({
      "indexUid": index,
      "q": searchQuery
    }))
  }

  sendRequest(requests.value.search)
}

Example: Adding a New Index

Let's say you want to add a new index for "drivers":

1. Add to useHttp.js:

"search.driver": { service: 'search', path: "/indexes/driver/search/" }

2. Add to StartScreen.vue:

const indices = {
  // ... existing indices ...
  'driver': 'driver',
}

Important Notes

1. The index name in Meilisearch must match the key in the indices object
2. The resource name should match your application's resource naming convention
3. Make sure the Meilisearch index is properly configured on the backend
4. The index should have the necessary fields for search results (typically id, name, full_name, description)
5. The search request must include the federation field with an empty object
6. Each query in the queries array must have indexUid and q fields

Testing

After adding a new index:

1. Restart the frontend application
2. Try searching in the command palette
3. Verify that results from your new index appear in the search results
4. Check the network tab in your browser's developer tools to ensure the request format matches the example

Troubleshooting

If search results don't appear:

1. Check the browser console for errors
2. Verify the Meilisearch index exists and has data
3. Ensure the index name matches exactly between frontend and backend
4. Check that the search endpoint is correctly registered in useHttp.js
5. Verify the request format matches the example above
6. Check the network tab to see the exact request being sent