From cb8d689bd8030450997716aaeef6db43f8334911 Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Thu, 22 Aug 2024 14:07:15 +0300 Subject: [PATCH] feat: command menu docs (#7963) Also rebranded command bar to command menu, because that seems more suitable. Command bar is more like a horizontal/vertical list/bar of icons, like sidebar. Command menu is more of a dropdown. https://unleash-docs-git-command-docs-unleash-team.vercel.app/reference/command-menu --------- Co-authored-by: melindafekete --- .../src/component/commandBar/CommandBar.tsx | 2 +- website/docs/reference/command-menu.md | 46 ++++++++++++++++++ website/sidebars.js | 1 + website/static/img/command-menu.png | Bin 0 -> 7149 bytes 4 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 website/docs/reference/command-menu.md create mode 100644 website/static/img/command-menu.png diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx index 25cb4889ea..9701022191 100644 --- a/frontend/src/component/commandBar/CommandBar.tsx +++ b/frontend/src/component/commandBar/CommandBar.tsx @@ -201,7 +201,7 @@ export const CommandBar = () => { searchInputRef.current?.blur(); } }); - const placeholder = `Command bar (${hotkey})`; + const placeholder = `Command menu (${hotkey})`; const findCommandBarLinksAndSelectedIndex = () => { const allCommandBarLinks = diff --git a/website/docs/reference/command-menu.md b/website/docs/reference/command-menu.md new file mode 100644 index 0000000000..ce14c9a038 --- /dev/null +++ b/website/docs/reference/command-menu.md @@ -0,0 +1,46 @@ +--- +title: Command Menu +--- + +:::note Availability + +**Version**: 6.2+. + +::: + +## Overview + +The Command Menu provides a powerful interface for quick navigation and efficient workflow management within Unleash. It enables users to access recently visited pages, navigate through projects, and search for specific flags or features, all from a single command interface. + +![Command Menu accessible from the top navbar.](/img/command-menu.png) + +## Quick suggestions + +When you open the Command Menu, it displays the last five pages you visited, whether they are features, projects, or other types of pages. This allows you to resume your recent work without having to manually navigate back to those pages. + +## Page navigation + +The Command Menu includes a list of all available pages, enabling quick navigation. This feature is particularly useful when you need to move swiftly between different sections of Unleash. + +## Keyboard shortcuts + +To facilitate a mouse-free workflow, the Command Menu can be accessed using a keyboard shortcut: + +- **Windows/Linux**: `Ctrl + K` +- **macOS**: `Cmd + K` + +This allows you to bring up the Command Menu instantly, ensuring that you can maintain your flow without interruption. + +## Search functionality + +The Command Menu's search feature allows you to quickly find flags, projects, and pages based on your input. The search returns the following: + +- **Feature flags**: The first three feature flags that match your input. The search also includes descriptions, which are displayed when you hover over a feature flag in the dropdown list. +- **Projects**: The first three projects matching the search input. +- **Pages**: Any page that contains the input text. + +This search functionality is designed to be comprehensive, allowing you to find what you need based on various criteria, including text within descriptions. + +## Feature request capability + +If your search query does not return any results, you can request new features using the **Suggest capability** button. diff --git a/website/sidebars.js b/website/sidebars.js index 229ff46877..5f7ae8a234 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -287,6 +287,7 @@ module.exports = { 'reference/archived-toggles', 'reference/banners', 'reference/change-requests', + 'reference/command-menu', 'reference/custom-activation-strategies', 'reference/dependent-features', 'reference/environments', diff --git a/website/static/img/command-menu.png b/website/static/img/command-menu.png new file mode 100644 index 0000000000000000000000000000000000000000..21e58aa9b27ce1259e494f2754e77e6ec40a01be GIT binary patch literal 7149 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