[PR #3171] [MERGED] feat: revamped spotlight #4263

New issue

Closed

opened 2026-03-17 01:48:55 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:48:55 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3171
Author: @AndrewBastin
Created: 7/4/2023
Status: ✅ Merged
Merged: 7/11/2023
Merged by: @AndrewBastin

Base: release/2023.8.0 ← Head: refactor/spotlight

📝 Commits (10+)

053aafc feat: add clear history action
873801a chore: add minisearch and bump @vueuse/core dep
07ec133 refactor: provide global i18n function through the module
4b6e0c5 refactor: expose function to get a service instance from dioc through module
86a62c2 feat: initial reworked spotlight implementation
0c15cbc feat: introduce debug service
6b883db refactor: ability for defineActionHandler to be able to control binding
c1b73a9 feat: add action handler to login and logout components
89e981d chore: update vitest config to support loading icons
3ada19d feat: general spotlight improvements and introducing user searcher

📊 Changes

36 files changed (+3899 additions, -1001 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+6 -0)
📝 packages/hoppscotch-common/package.json (+2 -1)
📝 packages/hoppscotch-common/src/components.d.ts (+4 -3)
📝 packages/hoppscotch-common/src/components/app/Footer.vue (+1 -1)
➖ packages/hoppscotch-common/src/components/app/Fuse.vue (+0 -69)
📝 packages/hoppscotch-common/src/components/app/Header.vue (+13 -2)
➖ packages/hoppscotch-common/src/components/app/PowerSearch.vue (+0 -122)
➖ packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue (+0 -68)
📝 packages/hoppscotch-common/src/components/app/Shortcuts.vue (+35 -44)
📝 packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue (+3 -8)
➕ packages/hoppscotch-common/src/components/app/spotlight/Entry.vue (+122 -0)
➕ packages/hoppscotch-common/src/components/app/spotlight/entry/GQLHistory.vue (+30 -0)
➕ packages/hoppscotch-common/src/components/app/spotlight/entry/RESTHistory.vue (+43 -0)
➕ packages/hoppscotch-common/src/components/app/spotlight/index.vue (+238 -0)
📝 packages/hoppscotch-common/src/components/firebase/Logout.vue (+8 -3)
📝 packages/hoppscotch-common/src/components/history/index.vue (+5 -0)
📝 packages/hoppscotch-common/src/helpers/actions.ts (+74 -21)
📝 packages/hoppscotch-common/src/helpers/keybindings.ts (+2 -2)
➖ packages/hoppscotch-common/src/helpers/powerSearchNavigation.ts (+0 -55)
📝 packages/hoppscotch-common/src/helpers/shortcuts.ts (+142 -311)

...and 16 more files

📄 Description

Closes HFE-91 HFE-92 HFE-123 HFE-125

Description

This PR intends to improve the Spotlight feature of Hoppscotch and make it more dynamic and flexible to search through different type of things into the app and try to score the more relevant stuff up on the list, along with the ability to render custom and dynamic entries with custom UI on search entries.

Stuff that is changed

Actions created for clearing history (history.clear), user log in (user.login), user log out (user.logout) along with their handlers in a corresponding component.
Actions with args created for opening a new rest request (rest.request.open) and GraphQL request (gql.request.open).
Updated defineActionHandler to be able to specify if the action handle is available, this lets action handlers to opt out of handling actions and unbind as a result and bind back in again when ready. It takes in a boolean ref that will be watched for this to happen, if no ref is passed, it will keep the old behaviour.
Updated HoppAction type to play properly with HoppActionWithArgs implementation.
Added i18n strings for a couple of things
Bumped @vueuse/core and introduced minisearch as a dependency
Introduced getService function on modules/dioc to be able to expose services to non-service code. This function is marked deprecated as its usage is generally discouraged and is only there to help with legacy code.
Introduced getI18n function to let i18n strings be available outside component code (like services).
Removed AppFuse component as it is not necessary anymore.
Renamed and moved AppPowerSearch component to AppSpotlight
Renamed and moved AppPowerSearchEntry component to AppSpotlightEntry
Removed powerSearchNavigation helper
Updated AppSpotlight to use new arrow key mechanism rather than the old mechanism provided by powerSearchNavigation
Updated AppSpotlight to use the Spotlight Service to do the searching.
Added a loading spinner on AppSpotlight to show if any of the searchers are loading
Introduced Debug Service that is only bound on dev mode which logs events and service and container binds/events into the console along with that provide _getService and _getBoundServiceIDs() global functions.
Introduced Spotlight Service that communicates with the UI and provides search results powered by searcher services.
Introduce SpotlightSearcher interface that defines how a searcher should work
Introduce abstract StaticSpotlightSearcherService that abstracts searcher service implementations for static documents.
Introduce 2 searchers, UserSpotlightSearcherService (extending StaticSpotlightSearcherService) and HistorySpotlightSearcherService that provide login/logout and history based search entries respectively.
Introduced tests for the newly introduced services.
Updated vitest.config.ts to let Vitest parse icon imports and Vue components.
The keyboard shortcut for opening Spotlight is changed from / to cmd+k
The keyboard shortcut for opening Keyboard Shortcuts flyout is changed from cmd+k to cmd+/

NOTE: This is an initial implementation to get started, once this is merged, we can iteratively add other searchers as required.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Additional Information

N/A

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/3171 **Author:** [@AndrewBastin](https://github.com/AndrewBastin) **Created:** 7/4/2023 **Status:** ✅ Merged **Merged:** 7/11/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.8.0` ← **Head:** `refactor/spotlight` --- ### 📝 Commits (10+) - [`053aafc`](https://github.com/hoppscotch/hoppscotch/commit/053aafc17afc44fa54c5f86557d9f945cabb1f12) feat: add clear history action - [`873801a`](https://github.com/hoppscotch/hoppscotch/commit/873801a0cc8138cbc3640d7c1d56e66ba56adf16) chore: add minisearch and bump @vueuse/core dep - [`07ec133`](https://github.com/hoppscotch/hoppscotch/commit/07ec133299001c5acafe6e6457d7e7460cd96745) refactor: provide global i18n function through the module - [`4b6e0c5`](https://github.com/hoppscotch/hoppscotch/commit/4b6e0c5a3b6f62bad1244d492a823921096e6197) refactor: expose function to get a service instance from dioc through module - [`86a62c2`](https://github.com/hoppscotch/hoppscotch/commit/86a62c28699dd6f13f9ad2d7ae55a08515c4361e) feat: initial reworked spotlight implementation - [`0c15cbc`](https://github.com/hoppscotch/hoppscotch/commit/0c15cbc6c7f4da9a9fecc2e7778e99a8c2bc7c63) feat: introduce debug service - [`6b883db`](https://github.com/hoppscotch/hoppscotch/commit/6b883db32e33c4f118a0c79ad78e4ee58ca04bed) refactor: ability for defineActionHandler to be able to control binding - [`c1b73a9`](https://github.com/hoppscotch/hoppscotch/commit/c1b73a927be4db7a1c375791fb97f34c7c584ddd) feat: add action handler to login and logout components - [`89e981d`](https://github.com/hoppscotch/hoppscotch/commit/89e981df11baf89a956148eec997d50d7ee35533) chore: update vitest config to support loading icons - [`3ada19d`](https://github.com/hoppscotch/hoppscotch/commit/3ada19dd7626b1fd9c3cc7a0f7154c0ef24af433) feat: general spotlight improvements and introducing user searcher ### 📊 Changes **36 files changed** (+3899 additions, -1001 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+6 -0) 📝 `packages/hoppscotch-common/package.json` (+2 -1) 📝 `packages/hoppscotch-common/src/components.d.ts` (+4 -3) 📝 `packages/hoppscotch-common/src/components/app/Footer.vue` (+1 -1) ➖ `packages/hoppscotch-common/src/components/app/Fuse.vue` (+0 -69) 📝 `packages/hoppscotch-common/src/components/app/Header.vue` (+13 -2) ➖ `packages/hoppscotch-common/src/components/app/PowerSearch.vue` (+0 -122) ➖ `packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue` (+0 -68) 📝 `packages/hoppscotch-common/src/components/app/Shortcuts.vue` (+35 -44) 📝 `packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue` (+3 -8) ➕ `packages/hoppscotch-common/src/components/app/spotlight/Entry.vue` (+122 -0) ➕ `packages/hoppscotch-common/src/components/app/spotlight/entry/GQLHistory.vue` (+30 -0) ➕ `packages/hoppscotch-common/src/components/app/spotlight/entry/RESTHistory.vue` (+43 -0) ➕ `packages/hoppscotch-common/src/components/app/spotlight/index.vue` (+238 -0) 📝 `packages/hoppscotch-common/src/components/firebase/Logout.vue` (+8 -3) 📝 `packages/hoppscotch-common/src/components/history/index.vue` (+5 -0) 📝 `packages/hoppscotch-common/src/helpers/actions.ts` (+74 -21) 📝 `packages/hoppscotch-common/src/helpers/keybindings.ts` (+2 -2) ➖ `packages/hoppscotch-common/src/helpers/powerSearchNavigation.ts` (+0 -55) 📝 `packages/hoppscotch-common/src/helpers/shortcuts.ts` (+142 -311) _...and 16 more files_ </details> ### 📄 Description Closes HFE-91 HFE-92 HFE-123 HFE-125 ### Description This PR intends to improve the Spotlight feature of Hoppscotch and make it more dynamic and flexible to search through different type of things into the app and try to score the more relevant stuff up on the list, along with the ability to render custom and dynamic entries with custom UI on search entries. ### Stuff that is changed - Actions created for clearing history (`history.clear`), user log in (`user.login`), user log out (`user.logout`) along with their handlers in a corresponding component. - Actions with args created for opening a new rest request (`rest.request.open`) and GraphQL request (`gql.request.open`). - Updated `defineActionHandler` to be able to specify if the action handle is available, this lets action handlers to opt out of handling actions and unbind as a result and bind back in again when ready. It takes in a boolean ref that will be watched for this to happen, if no ref is passed, it will keep the old behaviour. - Updated `HoppAction` type to play properly with `HoppActionWithArgs` implementation. - Added i18n strings for a couple of things - Bumped `@vueuse/core` and introduced `minisearch` as a dependency - Introduced `getService` function on `modules/dioc` to be able to expose services to non-service code. This function is marked deprecated as its usage is generally discouraged and is only there to help with legacy code. - Introduced `getI18n` function to let i18n strings be available outside component code (like services). - Removed `AppFuse` component as it is not necessary anymore. - Renamed and moved `AppPowerSearch` component to `AppSpotlight` - Renamed and moved `AppPowerSearchEntry` component to `AppSpotlightEntry` - Removed `powerSearchNavigation` helper - Updated AppSpotlight to use new arrow key mechanism rather than the old mechanism provided by `powerSearchNavigation` - Updated `AppSpotlight` to use the Spotlight Service to do the searching. - Added a loading spinner on `AppSpotlight` to show if any of the searchers are loading - Introduced Debug Service that is only bound on dev mode which logs events and service and container binds/events into the console along with that provide `_getService` and `_getBoundServiceIDs()` global functions. - Introduced Spotlight Service that communicates with the UI and provides search results powered by searcher services. - Introduce `SpotlightSearcher` interface that defines how a searcher should work - Introduce abstract `StaticSpotlightSearcherService` that abstracts searcher service implementations for static documents. - Introduce 2 searchers, `UserSpotlightSearcherService` (extending `StaticSpotlightSearcherService`) and `HistorySpotlightSearcherService` that provide login/logout and history based search entries respectively. - Introduced tests for the newly introduced services. - Updated `vitest.config.ts` to let Vitest parse icon imports and Vue components. - The keyboard shortcut for opening Spotlight is changed from `/` to `cmd+k` - The keyboard shortcut for opening Keyboard Shortcuts flyout is changed from `cmd+k` to `cmd+/` NOTE: This is an initial implementation to get started, once this is merged, we can iteratively add other searchers as required. ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [x] I have updated the documentation as required - [x] All the tests have passed ### Additional Information N/A --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>