feat: search notifications

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/filters/SearchFilter.tsx

@@ -120,7 +120,6 @@ export const SearchFilter: FC = () => {
         <TokenSearchInput
           icon={CheckCircleFillIcon}
           iconColorClass={IconColor.GREEN}
-          isDetailedNotificationsEnabled={settings.detailedNotifications}
           label="Include"
           onAdd={addIncludeSearchToken}
           onRemove={removeIncludeSearchToken}
@@ -131,7 +130,6 @@ export const SearchFilter: FC = () => {
         <TokenSearchInput
           icon={NoEntryFillIcon}
           iconColorClass={IconColor.RED}
-          isDetailedNotificationsEnabled={settings.detailedNotifications}
           label="Exclude"
           onAdd={addExcludeSearchToken}
           onRemove={removeExcludeSearchToken}

src/renderer/components/filters/SearchFilterSuggestions.test.tsx

@@ -1,70 +1,113 @@
 import { render } from '@testing-library/react';
 
+import { mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
+import type { SettingsState } from '../../types';
 import { SearchFilterSuggestions } from './SearchFilterSuggestions';
 
 describe('renderer/components/filters/SearchFilterSuggestions.tsx', () => {
   const mockOnClose = jest.fn();
 
   it('should render itself & its children - closed', () => {
     const tree = render(
-      <SearchFilterSuggestions
-        inputValue={''}
-        isDetailedNotificationsEnabled={false}
-        onClose={mockOnClose}
-        open={false}
-      />,
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: false,
+          } as SettingsState,
+        }}
+      >
+        <SearchFilterSuggestions
+          inputValue={''}
+          onClose={mockOnClose}
+          open={false}
+        />
+      </AppContext.Provider>,
     );
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should render itself & its children - open', () => {
     const tree = render(
-      <SearchFilterSuggestions
-        inputValue={''}
-        isDetailedNotificationsEnabled={false}
-        onClose={mockOnClose}
-        open={true}
-      />,
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: true,
+          } as SettingsState,
+        }}
+      >
+        <SearchFilterSuggestions
+          inputValue={''}
+          onClose={mockOnClose}
+          open={true}
+        />
+      </AppContext.Provider>,
     );
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should render itself & its children - open with detailed enabled', () => {
     const tree = render(
-      <SearchFilterSuggestions
-        inputValue={''}
-        isDetailedNotificationsEnabled={true}
-        onClose={mockOnClose}
-        open={true}
-      />,
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: true,
+          } as SettingsState,
+        }}
+      >
+        <SearchFilterSuggestions
+          inputValue={''}
+          onClose={mockOnClose}
+          open={true}
+        />
+      </AppContext.Provider>,
     );
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should render itself & its children - input token invalid', () => {
     const tree = render(
-      <SearchFilterSuggestions
-        inputValue={'invalid'}
-        isDetailedNotificationsEnabled={false}
-        onClose={mockOnClose}
-        open={true}
-      />,
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: false,
+          } as SettingsState,
+        }}
+      >
+        <SearchFilterSuggestions
+          inputValue={'invalid'}
+          onClose={mockOnClose}
+          open={true}
+        />
+      </AppContext.Provider>,
     );
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should render itself & its children - input token valid', () => {
     const tree = render(
-      <SearchFilterSuggestions
-        inputValue={'repo:'}
-        isDetailedNotificationsEnabled={false}
-        onClose={mockOnClose}
-        open={true}
-      />,
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: false,
+          } as SettingsState,
+        }}
+      >
+        <SearchFilterSuggestions
+          inputValue={'repo:'}
+          onClose={mockOnClose}
+          open={true}
+        />
+      </AppContext.Provider>,
     );
 
     expect(tree).toMatchSnapshot();

src/renderer/components/filters/SearchFilterSuggestions.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { useContext, type FC } from 'react';
 
 import { Box, Popover, Stack, Text } from '@primer/react';
 
@@ -9,26 +9,28 @@ import {
   BASE_SEARCH_QUALIFIERS,
   SEARCH_DELIMITER,
 } from '../../utils/notifications/filters/search';
+import { AppContext } from '../../context/App';
 
 interface SearchFilterSuggestionsProps {
   open: boolean;
   inputValue: string;
-  isDetailedNotificationsEnabled: boolean;
   onClose: () => void;
 }
 
 export const SearchFilterSuggestions: FC<SearchFilterSuggestionsProps> = ({
   open,
   inputValue,
-  isDetailedNotificationsEnabled,
   onClose,
 }) => {
+
+  const { settings } = useContext(AppContext);
+
   if (!open) {
     return null;
   }
 
   const lower = inputValue.toLowerCase();
-  const base = isDetailedNotificationsEnabled
+  const base = settings.detailedNotifications
     ? ALL_SEARCH_QUALIFIERS
     : BASE_SEARCH_QUALIFIERS;
   const suggestions = base.filter(

src/renderer/components/filters/TokenSearchInput.tsx

@@ -15,7 +15,6 @@ interface TokenSearchInputProps {
   iconColorClass: string;
   tokens: readonly SearchToken[]; // raw token strings
   showSuggestionsOnFocusIfEmpty: boolean;
-  isDetailedNotificationsEnabled: boolean;
   onAdd: (token: SearchToken) => void;
   onRemove: (token: SearchToken) => void;
 }
@@ -28,7 +27,6 @@ export const TokenSearchInput: FC<TokenSearchInputProps> = ({
   iconColorClass,
   tokens,
   showSuggestionsOnFocusIfEmpty,
-  isDetailedNotificationsEnabled,
   onAdd,
   onRemove,
 }) => {
@@ -117,7 +115,6 @@ export const TokenSearchInput: FC<TokenSearchInputProps> = ({
         />
         <SearchFilterSuggestions
           inputValue={inputValue}
-          isDetailedNotificationsEnabled={isDetailedNotificationsEnabled}
           onClose={() => setShowSuggestions(false)}
           open={showSuggestions}
         />