diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx index 466f3ee24..81c4da9bc 100644 --- a/src/renderer/components/fields/Tooltip.test.tsx +++ b/src/renderer/components/fields/Tooltip.test.tsx @@ -1,6 +1,10 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { BaseStyles, ThemeProvider } from '@primer/react'; + +import { mockSettings } from '../../__mocks__/state-mocks'; +import { AppContext } from '../../context/App'; import { type ITooltip, Tooltip } from './Tooltip'; describe('renderer/components/fields/Tooltip.tsx', () => { @@ -10,19 +14,44 @@ describe('renderer/components/fields/Tooltip.tsx', () => { }; it('should render', () => { - const tree = render(); - expect(tree).toMatchSnapshot(); + render( + + + + + + + , + ); + + expect(screen.getByTestId('tooltip-test')).toBeInTheDocument(); }); it('should display on mouse enter / leave', async () => { - render(); + render( + + + + + + + , + ); const tooltipElement = screen.getByTestId('tooltip-test'); await userEvent.hover(tooltipElement); - expect(tooltipElement).toMatchSnapshot(); + expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument(); await userEvent.unhover(tooltipElement); - expect(tooltipElement).toMatchSnapshot(); + expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); }); }); diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx index 0dc7b0089..f791baa5a 100644 --- a/src/renderer/components/fields/Tooltip.tsx +++ b/src/renderer/components/fields/Tooltip.tsx @@ -1,6 +1,7 @@ import { type FC, type ReactNode, useState } from 'react'; import { QuestionIcon } from '@primer/octicons-react'; +import { AnchoredOverlay } from '@primer/react'; export interface ITooltip { name: string; @@ -11,23 +12,31 @@ export const Tooltip: FC = (props: ITooltip) => { const [showTooltip, setShowTooltip] = useState(false); return ( - setShowTooltip(true)} - onMouseLeave={() => setShowTooltip(false)} - type="button" - > - - {showTooltip && ( - - - {props.tooltip} - - + ( + setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + type="button" + > + + )} - + side="outside-bottom" + > + + {props.tooltip} + + ); }; diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap index 21cec8378..bef3fb54a 100644 --- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap +++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap @@ -436,10 +436,12 @@ exports[`renderer/components/fields/Checkbox.tsx should render - tooltip 1`] = ` Appearance - - - - - - This is some tooltip text - - - -`; - -exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 2`] = ` - - - - - -`; - -exports[`renderer/components/fields/Tooltip.tsx should render 1`] = ` -{ - "asFragment": [Function], - "baseElement": - - - - - - - - , - "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/filters/__snapshots__/FilterSection.test.tsx.snap b/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap index 7b917a7bc..43b42d26a 100644 --- a/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap +++ b/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap @@ -59,10 +59,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle Open { onChange={(evt) => updateSetting('increaseContrast', evt.target.checked) } - tooltip={Enable high contrast.} + tooltip={ + + Enable high contrast colors for improved legibility. This + increases color contrast across the UI and may affect some + color-specific themes. + + } /> { onChange={(evt) => updateSetting('showAccountHeader', evt.target.checked) } + tooltip={ + + When enabled, displays an account header (avatar, username and + quick links) above the notifications list. + + } visible={!hasMultipleAccounts(auth)} /> @@ -171,7 +183,9 @@ export const AppearanceSettings: FC = () => { } tooltip={ - Wrap long notification titles instead of truncating them. + Wrap long notification titles onto multiple lines instead of + truncating with an ellipsis. This shows the full title but may + increase the height of the notification list. } /> diff --git a/src/renderer/components/settings/NotificationSettings.test.tsx b/src/renderer/components/settings/NotificationSettings.test.tsx index c28152685..e7e8a1ba3 100644 --- a/src/renderer/components/settings/NotificationSettings.test.tsx +++ b/src/renderer/components/settings/NotificationSettings.test.tsx @@ -1,6 +1,8 @@ import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { BaseStyles, ThemeProvider } from '@primer/react'; + import { mockAuth, mockSettings } from '../../__mocks__/state-mocks'; import { Constants } from '../../constants'; import { AppContext } from '../../context/App'; @@ -323,15 +325,19 @@ describe('renderer/components/settings/NotificationSettings.tsx', () => { await act(async () => { render( - - - , + + + + + + + , ); }); diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx index b720a3c96..e330c2886 100644 --- a/src/renderer/components/settings/NotificationSettings.tsx +++ b/src/renderer/components/settings/NotificationSettings.tsx @@ -58,6 +58,19 @@ export const NotificationSettings: FC = () => { { label: 'Repository', value: GroupBy.REPOSITORY }, { label: 'Date', value: GroupBy.DATE }, ]} + tooltip={ + + Choose how notifications are displayed in the list. + + Repository groups notifications by + their repository full name. + + + Date shows notifications in + chronological order. + + + } value={settings.groupBy} /> @@ -298,7 +311,7 @@ export const NotificationSettings: FC = () => { only participating notifications. - When unchecked, {APPLICATION.NAME} will + When unchecked, {APPLICATION.NAME} will fetch participating and watching notifications. diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx index 748a676fd..52f052300 100644 --- a/src/renderer/components/settings/SystemSettings.tsx +++ b/src/renderer/components/settings/SystemSettings.tsx @@ -32,6 +32,21 @@ export const SystemSettings: FC = () => { { label: 'Foreground', value: OpenPreference.FOREGROUND }, { label: 'Background', value: OpenPreference.BACKGROUND }, ]} + tooltip={ + + + Controls the behavior of how external links should opened. + + + Foreground will open the link and bring + the opened window or browser to the front. + + + Background opens the link without + stealing focus from the current window. + + + } value={settings.openLinks} /> @@ -60,6 +75,12 @@ export const SystemSettings: FC = () => { onChange={(evt) => updateSetting('showNotifications', evt.target.checked) } + tooltip={ + + Display native operating system notifications for new unread + notifications. + + } /> { label="Open at startup" name="openAtStartup" onChange={(evt) => updateSetting('openAtStartup', evt.target.checked)} + tooltip={ + Launch {APPLICATION.NAME} automatically at startup. + } visible={!window.gitify.platform.isLinux()} /> diff --git a/src/renderer/components/settings/TraySettings.tsx b/src/renderer/components/settings/TraySettings.tsx index f94c7060a..37e287f04 100644 --- a/src/renderer/components/settings/TraySettings.tsx +++ b/src/renderer/components/settings/TraySettings.tsx @@ -24,6 +24,12 @@ export const TraySettings: FC = () => { onChange={(evt) => updateSetting('showNotificationsCountInTray', evt.target.checked) } + tooltip={ + + Show the unread notification count next to the tray icon. Useful + for a quick glance at unread activity. + + } visible={window.gitify.platform.isMacOS()} /> diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap index b9e0b3f63..c799e84f9 100644 --- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap @@ -136,10 +136,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children Search diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap index 91000589a..53213d7c8 100644 --- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap @@ -260,10 +260,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] = Increase contrast + + + + + Show notification count + + + + + + + + + + Show system notifications + + + + + Open at startup + + + + + @@ -1759,7 +1917,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] = data-wrap="nowrap" > @@ -1850,7 +2008,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] = data-wrap="nowrap" > Accounts