[Workspace]Support search dev tools by its category name (#8920) (#8988)

* support search dev tools by category name * Changeset file for PR #8920 created/updated * address review comments --------- (cherry picked from commit 1c744d6) Signed-off-by: Hailong Cui <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Nov 29, 2024 · b4b5d1a · b4b5d1a
1 parent 56b8b19
commit b4b5d1a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/changelogs/fragments/8920.yml b/changelogs/fragments/8920.yml
@@ -0,0 +1,2 @@
+feat:
+- [workspace]support search dev tools by its category name ([#8920](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8920))
diff --git a/src/plugins/dev_tools/public/global_search/search_devtool_command.test.tsx b/src/plugins/dev_tools/public/global_search/search_devtool_command.test.tsx
@@ -32,6 +32,17 @@ describe('DevtoolSearchCommand', () => {
     expect(searchResult).toHaveLength(0);
   });
 
+  it('searchForDevTools matches category', async () => {
+    const searchResult = await searchForDevTools('dev', {
+      devTools: devToolsFn,
+      title: 'Dev tools',
+      uiActionsApi: uiActionsApiFn,
+    });
+
+    // match all sub apps
+    expect(searchResult).toHaveLength(2);
+  });
+
   it('searchForDevTools with match tool', async () => {
     const searchResult = await searchForDevTools('console', {
       devTools: devToolsFn,
@@ -56,7 +67,11 @@ describe('DevtoolSearchCommand', () => {
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  Dev tools
+                  <EuiHighlight
+                    search="console"
+                  >
+                    Dev tools
+                  </EuiHighlight>
                 </EuiFlexItem>
               </EuiFlexGroup>,
             },

diff --git a/src/plugins/dev_tools/public/global_search/search_devtool_command.tsx b/src/plugins/dev_tools/public/global_search/search_devtool_command.tsx
@@ -33,12 +33,18 @@ export const searchForDevTools = async (
       <EuiFlexItem>
         <EuiIcon type="consoleApp" color="text" />
       </EuiFlexItem>
-      <EuiFlexItem>{props.title}</EuiFlexItem>
+      <EuiFlexItem>
+        <EuiHighlight search={query}>{props.title}</EuiHighlight>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 
-  return tools
-    .filter((tool) => tool.title.toLowerCase().includes(query.toLowerCase()))
+  const titleMatched = props.title.toLowerCase().includes(query.toLowerCase());
+  const matchedTools = titleMatched
+    ? tools
+    : tools.filter((tool) => tool.title.toLowerCase().includes(query.toLowerCase()));
+
+  return matchedTools
     .map((tool) => ({
       breadcrumbs: [
         {