[New Feature] Command Bar in Docs

[leecalcote]

Current Behavior

Layer5 has a number of products. Each product has many resources. Each project site has a site search for that specific project. Visitors cannot search across all products at the same time. time.

Desired Behavior

In MeshMap, there needs to be a command palette to search through all the possible available resources and MeshMap, that can be designs, filters and applications, that also can be components on the MeshMap from any number of registered components, that could be components from Visualizer.

Priority: start with Designer, move to Visualizer.

Implementation

1. Research the following two open source libraries:

• https://github.com/timc1/kbar (https://kbar.vercel.app)
• https://github.com/pacocoursey/cmdk (https://cmdk.paco.me/)

1. Support the following resources in Designer:
   (Resource type: what to display in the search preview)
   1. Meshery Catalog Design filenames: display owner and last modified date
   2. Meshery Catalog WASM Filter names: display owner and last modified date
   3. Meshery Integrations Models Names: display first portion of description
   4. Meshery Integrations Model Component Names: display first portion of description
   5. Meshery Integrations Model Policy Names: display first portion of description

Acceptance Criteria

1. Light and dark modes are supported.
2. On press of hotkey CMD+K (mac), CTL+K (win / lnx), the command bar is surfaced and displayed to the user.

Reference Implementations

• Spotlight search on Mac (CMD+spacebar)
• Google Drive's desktop app (OPTION+ALT+G)
• Search bar on Linux (alt+spacebar)
• ClickUp command bar (CMD+K)
• GitHub Command Palette (CMD+K)

---

Contributor Guide

• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)

[SAHU-01]

@leecalcote may I work on this?

[SAHU-01]

@leecalcote I had a couple of questions:

1. Should the Command Bar be implemented only for MeshMap in Docs or for all?
2. In the Implementation section of the issue it mentions, what the search preview should display for ex., Catalog Design filenames should display the owner and last modified date, I'm afraid the docs don't have this info it's likely inside MeshMap, could you specify the requirement for the preview in docs?
3. I'll share the design first and then proceed with the implementation, but should I use the docs.layer5.io page in Figma to create a draft for this?

[leecalcote]

Hi @SAHU-01, I'll have to apologize. I’m scratching my head at how we arrived at this issue being posted under the documentation site’s repo. I suppose that at the time given that this is the 11th issue created on the repo (a very early issue) that we were looking for a convenient way to allow site visitors to search across documentation, but when copy/pasting from a similarly written issue as a feature for :meshmap:, that we (I) didn’t rewrite the issue appropriately.

In that time, we’ve been successful with implementing the search field that you find in the upper right hand corner of the documentation site. This feature is an outstanding request for MeshMap, however, it’s not on our immediate roadmap. So, we should probably close this issue.

If you are interested to getting involved with MeshMap, though, we do frequently invite individuals who have proven themselves to be consistent and net positive contributors to join a core team of maintainers working on special projects like Cloud and MeshMap. I'll contact you in the community Slack regarding opportunities to do so.