Merge branch 'feature/context-selector-search-by-subtitle' into 'master'

feat(context-selector): add filtering by subtitle See merge request Frontend/synerise-design!2544
Synerise · Jul 20, 2023 · d2a4a84 · d2a4a84
2 parents fb83842 + 32f4c18
commit d2a4a84
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git 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
@@ -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
@@ -173,20 +173,23 @@ export const CONTEXT_ITEMS = [
   },
   {
     name: 'Slack',
+    subtitle: 'Desktop App',
     id: '1234-1234-1234-1238',
     icon: <WebhookM />,
     groupName: 'Integrations',
     groupId: 'ALL',
   },
   {
     name: 'Github',
+    subtitle: 'Website',
     id: '1234-1234-1234-12123',
     icon: <WebhookM />,
     groupName: 'Integrations',
     groupId: 'ALL',
   },
   {
     name: 'Booking.com',
+    subtitle: 'Website',
     id: '1234-1234-1234-1223123',
     icon: <WebhookM />,
     groupName: 'Integrations',