diff --git a/src/renderer/components/AllRead.tsx b/src/renderer/components/AllRead.tsx index 56958617f..71af304eb 100644 --- a/src/renderer/components/AllRead.tsx +++ b/src/renderer/components/AllRead.tsx @@ -2,7 +2,7 @@ import { type FC, useContext, useMemo } from 'react'; import { AppContext } from '../context/App'; import { Constants } from '../utils/constants'; -import { hasFiltersSet } from '../utils/filters'; +import { hasAnyFiltersSet } from '../utils/filters'; import { EmojiSplash } from './layout/EmojiSplash'; interface IAllRead { @@ -12,7 +12,7 @@ interface IAllRead { export const AllRead: FC = ({ fullHeight = true }: IAllRead) => { const { settings } = useContext(AppContext); - const hasFilters = hasFiltersSet(settings); + const hasFilters = hasAnyFiltersSet(settings); const emoji = useMemo( () => diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx index df5a63a66..0c5de1d2c 100644 --- a/src/renderer/components/Sidebar.tsx +++ b/src/renderer/components/Sidebar.tsx @@ -16,7 +16,7 @@ import { APPLICATION } from '../../shared/constants'; import { AppContext } from '../context/App'; import { quitApp } from '../utils/comms'; import { Constants } from '../utils/constants'; -import { hasFiltersSet } from '../utils/filters'; +import { hasAnyFiltersSet } from '../utils/filters'; import { openGitHubIssues, openGitHubNotifications, @@ -114,7 +114,7 @@ export const Sidebar: FC = () => { description="Filter notifications" unsafeDisableTooltip={false} size="small" - variant={hasFiltersSet(settings) ? 'primary' : 'invisible'} + variant={hasAnyFiltersSet(settings) ? 'primary' : 'invisible'} tooltipDirection="e" onClick={() => toggleFilters()} data-testid="sidebar-filter-notifications" diff --git a/src/renderer/components/fields/Checkbox.test.tsx b/src/renderer/components/fields/Checkbox.test.tsx index 9f2d0c874..0620300e9 100644 --- a/src/renderer/components/fields/Checkbox.test.tsx +++ b/src/renderer/components/fields/Checkbox.test.tsx @@ -30,4 +30,19 @@ describe('renderer/components/fields/Checkbox.tsx', () => { ); expect(tree).toMatchSnapshot(); }); + + it('should render - positive counter unselected', () => { + const tree = render(); + expect(tree).toMatchSnapshot(); + }); + + it('should render - positive counter selected', () => { + const tree = render(); + expect(tree).toMatchSnapshot(); + }); + + it('should render - zero counter', () => { + const tree = render(); + expect(tree).toMatchSnapshot(); + }); }); diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx index 12934711a..c532e97ec 100644 --- a/src/renderer/components/fields/Checkbox.tsx +++ b/src/renderer/components/fields/Checkbox.tsx @@ -1,6 +1,6 @@ import type { FC, ReactNode } from 'react'; -import { Stack } from '@primer/react'; +import { CounterLabel, Stack } from '@primer/react'; import { cn } from '../../utils/cn'; import { Tooltip } from './Tooltip'; @@ -8,6 +8,7 @@ import { Tooltip } from './Tooltip'; export interface ICheckbox { name: string; label: string; + counter?: number; tooltip?: ReactNode | string; checked: boolean; disabled?: boolean; @@ -19,6 +20,8 @@ export const Checkbox: FC = ({ visible = true, ...props }: ICheckbox) => { + const counter = props.counter > 0 ? props.counter : undefined; + return ( visible && ( = ({ > {props.label} + {props.tooltip && ( )} + + {counter && ( + + {counter} + + )} ) ); diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx index 377494bbb..e1d860b0a 100644 --- a/src/renderer/components/fields/Tooltip.tsx +++ b/src/renderer/components/fields/Tooltip.tsx @@ -19,7 +19,7 @@ export const Tooltip: FC = (props: ITooltip) => { onMouseLeave={() => setShowTooltip(false)} data-testid={`tooltip-${props.name}`} > - + {showTooltip && ( diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap index c0d842194..a16c4a80b 100644 --- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap +++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap @@ -172,6 +172,278 @@ exports[`renderer/components/fields/Checkbox.tsx should render - not visible 1`] } `; +exports[`renderer/components/fields/Checkbox.tsx should render - positive counter selected 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ + + + +  ( + 5 + ) + +
+
+ , + "container":
+
+ + + + +  ( + 5 + ) + +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`renderer/components/fields/Checkbox.tsx should render - positive counter unselected 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ + + + +  ( + 5 + ) + +
+
+ , + "container":
+
+ + + + +  ( + 5 + ) + +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + exports[`renderer/components/fields/Checkbox.tsx should render - tooltip 1`] = ` { "asFragment": [Function], @@ -207,7 +479,7 @@ exports[`renderer/components/fields/Checkbox.tsx should render - tooltip 1`] = ` >
+
+ + +
+
+ , + "container":
+
+ + +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap index e5931df76..71c245140 100644 --- a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap +++ b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap @@ -9,7 +9,7 @@ exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / >