From eb5138127b4c8282f2c135b5634802e69f959354 Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 27 Jul 2026 16:02:33 +1000 Subject: [PATCH] [UI] Add search result preview (#12475) * [UI] Add search result preview * Updated search docs --- docs/docs/concepts/ui/global_search.md | 11 +++++++++++ docs/docs/settings/user.md | 1 + src/backend/InvenTree/common/setting/user.py | 8 ++++++++ src/frontend/src/components/nav/SearchDrawer.tsx | 12 ++++++++++++ .../src/pages/Index/Settings/UserSettings.tsx | 1 + 5 files changed, 33 insertions(+) diff --git a/docs/docs/concepts/ui/global_search.md b/docs/docs/concepts/ui/global_search.md index c6a81385ec..1219ec64a3 100644 --- a/docs/docs/concepts/ui/global_search.md +++ b/docs/docs/concepts/ui/global_search.md @@ -16,6 +16,17 @@ Search results are organized by category (e.g. Parts, Stock, Manufacturing, etc. To navigate to the detail page for a particular search result, simply click on the desired result from the search results list. This will take you directly to the relevant page within the InvenTree system, allowing you to view and interact with the specific item or information you were searching for. +### Preview Panel + +Instead of navigating directly to a result's detail page, search results can be configured to open in the [preview panel](./preview_panels.md), keeping the global search menu open behind it. + +To enable this behavior, both of the following user settings must be enabled, found in the *Search* tab of the [user settings](../../settings/user.md) page: + +- **Table Preview Panel** - enables the preview panel feature generally +- **Search Results Preview Panel** - enables the preview panel specifically for global search results + +With both settings enabled, clicking on a search result opens the preview drawer instead of navigating away. As with other preview panel usages, hold `Ctrl` (or `Cmd` on macOS) while clicking, or middle-click, to bypass the preview and navigate directly to the detail page. + ### Full Results The "global search" menu provides a limited set of search results for each category, typically showing the most relevant or recent results. To view the full set of search results for a particular category, click on the "View all results" button located at the top-left of the search results list for that category: diff --git a/docs/docs/settings/user.md b/docs/docs/settings/user.md index b95abcb10a..6bb8162269 100644 --- a/docs/docs/settings/user.md +++ b/docs/docs/settings/user.md @@ -43,6 +43,7 @@ Customize settings for search results: {{ usersetting("SEARCH_WHOLE") }} {{ usersetting("SEARCH_REGEX") }} {{ usersetting("SEARCH_NOTES") }} +{{ usersetting("SEARCH_RESULTS_PREVIEW_PANEL") }} {{ usersetting("SEARCH_PREVIEW_RESULTS") }} {{ usersetting("SEARCH_PREVIEW_SHOW_PARTS") }} {{ usersetting("SEARCH_HIDE_INACTIVE_PARTS") }} diff --git a/src/backend/InvenTree/common/setting/user.py b/src/backend/InvenTree/common/setting/user.py index 7d7891854d..24d0fccd15 100644 --- a/src/backend/InvenTree/common/setting/user.py +++ b/src/backend/InvenTree/common/setting/user.py @@ -159,6 +159,14 @@ USER_SETTINGS: dict[str, InvenTreeSettingsKeyType] = { 'default': 10, 'validator': [int, MinValueValidator(1)], }, + 'SEARCH_RESULTS_PREVIEW_PANEL': { + 'name': _('Search Results Preview Panel'), + 'description': _( + 'Open search results in the preview panel, rather than navigating directly to the result' + ), + 'default': False, + 'validator': bool, + }, 'SEARCH_REGEX': { 'name': _('Regex Search'), 'description': _('Enable regular expressions in search queries'), diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx index d2e3a28c9b..777c37130c 100644 --- a/src/frontend/src/components/nav/SearchDrawer.tsx +++ b/src/frontend/src/components/nav/SearchDrawer.tsx @@ -47,6 +47,7 @@ import { } from '@lib/functions/Navigation'; import { showNotification } from '@mantine/notifications'; import { api } from '../../App'; +import { openGlobalPreview } from '../../states/PreviewDrawerState'; import { useUserSettingsState } from '../../states/SettingsStates'; import { useUserState } from '../../states/UserState'; import { RenderInstance } from '../render/Instance'; @@ -468,6 +469,17 @@ export function SearchDrawer({ return; } + const showPreviewPanel = + userSettings.isSet('ENABLE_PREVIEW_PANEL') && + userSettings.isSet('SEARCH_RESULTS_PREVIEW_PANEL'); + + if (showPreviewPanel && !eventModified(event)) { + // Open the result in the preview panel, keeping the search drawer open + cancelEvent(event); + openGlobalPreview(query, pk); + return; + } + if (eventModified(event)) { // Keep the drawer open in this condition } else { diff --git a/src/frontend/src/pages/Index/Settings/UserSettings.tsx b/src/frontend/src/pages/Index/Settings/UserSettings.tsx index 64a3d2b8fe..abb63d87e5 100644 --- a/src/frontend/src/pages/Index/Settings/UserSettings.tsx +++ b/src/frontend/src/pages/Index/Settings/UserSettings.tsx @@ -80,6 +80,7 @@ export default function UserSettings() { 'SEARCH_WHOLE', 'SEARCH_REGEX', 'SEARCH_NOTES', + 'SEARCH_RESULTS_PREVIEW_PANEL', 'SEARCH_PREVIEW_RESULTS', 'SEARCH_PREVIEW_SHOW_PARTS', 'SEARCH_HIDE_INACTIVE_PARTS',