From 32f4c1856f8dd8c66e037605e8a2e2e6220acb0e Mon Sep 17 00:00:00 2001
From: "jakub.nowak" <jakub.nowak@synerise.com>
Date: Thu, 20 Jul 2023 06:21:45 +0000
Subject: [PATCH] feat(context-selector): add filtering by subtitle

---
 .../ContextSelectorDropdown.tsx               |  7 ++++-
 .../src/__specs__/ContextSelector.spec.tsx    | 28 +++++++++++++++++++
 .../ContextSelector/data/index.data.tsx       |  3 ++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx b/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx
index b0680769b6..a5a316784d 100644
--- a/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx
+++ b/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx
@@ -156,7 +156,12 @@ const ContextSelectorDropdown: React.FC<ContextDropdownProps> = ({
     const itemsNumber = items.length;
     for (let i = 0; i < itemsNumber; i += 1) {
       const item = items[i];
-      const matching = !searchQuery || item.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const searchQueryInLowerCase = searchQuery.toLowerCase();
+      const isMatchingName = item.name?.toLowerCase().includes(searchQueryInLowerCase);
+      const isMatchingSubtitle = item.subtitle?.toLowerCase().includes(searchQueryInLowerCase);
+      const matching = !searchQuery || isMatchingName || isMatchingSubtitle;
+
       if (matching) {
         result.push({
           className: classNames,
diff --git a/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx b/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx
index d6d874a6ab..b0112ffad0 100644
--- a/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx
+++ b/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx
@@ -61,4 +61,32 @@ describe('Context selector component', () => {
 
     expect(handleDeactivate).toBeCalled();
   });
+
+  test("should display the correct item when searched by subtitle", async () => {
+    const { getByText , getByPlaceholderText, queryByText } = renderWithProvider(
+        RENDER_CONTEXT_SELECTOR({
+          items: [
+            {
+              name: 'Name 1',
+              id: 'id_1',
+              icon: <ApiM />,
+            },
+            {
+              name: 'Name 2',
+              subtitle: 'subtitle 2',
+              id: 'id_2',
+              icon: <ApiM />,
+            },
+          ]
+        })
+    );
+
+    userEvent.click(getByText(CONTEXT_TEXTS.buttonLabel));
+
+    const searchInput = getByPlaceholderText(CONTEXT_TEXTS.searchPlaceholder);
+    await userEvent.type(searchInput, 'subtitle 2');
+
+    expect(queryByText("Name 2")).toBeInTheDocument();
+    expect(queryByText("Name 1")).not.toBeInTheDocument();
+  })
 });
diff --git a/packages/portal/stories/components/ContextSelector/data/index.data.tsx b/packages/portal/stories/components/ContextSelector/data/index.data.tsx
index b97a90216b..479a1625e9 100644
--- a/packages/portal/stories/components/ContextSelector/data/index.data.tsx
+++ b/packages/portal/stories/components/ContextSelector/data/index.data.tsx
@@ -173,6 +173,7 @@ export const CONTEXT_ITEMS = [
   },
   {
     name: 'Slack',
+    subtitle: 'Desktop App',
     id: '1234-1234-1234-1238',
     icon: <WebhookM />,
     groupName: 'Integrations',
@@ -180,6 +181,7 @@ export const CONTEXT_ITEMS = [
   },
   {
     name: 'Github',
+    subtitle: 'Website',
     id: '1234-1234-1234-12123',
     icon: <WebhookM />,
     groupName: 'Integrations',
@@ -187,6 +189,7 @@ export const CONTEXT_ITEMS = [
   },
   {
     name: 'Booking.com',
+    subtitle: 'Website',
     id: '1234-1234-1234-1223123',
     icon: <WebhookM />,
     groupName: 'Integrations',