diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index eff531ba8..80d1d9379 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -44,7 +44,7 @@ The renderer is layered. **Runtime imports flow in one direction only** — a mo - `stores/` holds client state (Zustand): persisted `accounts` and `settings`, session `filters` and notification action failures. - `stores/index.ts` is the public store facade for `hooks`, `components`, and `routes`. Lower layers (`utils`) import the specific store module instead (for example `stores/useFiltersStore`): the barrel re-exports every store and its dependencies, which would pull the account/auth/forge graph into leaf utilities and create cycles. - `utils` and `stores` are **peers** — they may reference each other. Neither may import `hooks`, `components`, or `routes`. -- `components/` is grouped by feature (`notifications`, `filters`, `settings`, `login`, `fields`, `avatars`, `layout`, `metrics`, `primitives`). +- `components/` is grouped by feature (`notifications`, `filters`, `settings`, `login`, `avatars`, `layout`, `metrics`, `primitives`). - The composition root (`App.tsx`, `index.tsx`) is the only place allowed to wire every layer together. ## State ownership diff --git a/src/renderer/components/fields/Checkbox.test.tsx b/src/renderer/components/fields/Checkbox.test.tsx deleted file mode 100644 index 3e540f0b2..000000000 --- a/src/renderer/components/fields/Checkbox.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { renderWithProviders } from '../../__helpers__/test-utils'; - -import { Checkbox, type CheckboxProps } from './Checkbox'; - -describe('renderer/components/fields/Checkbox.tsx', () => { - const props: CheckboxProps = { - name: 'appearance', - label: 'Appearance', - checked: true, - onChange: vi.fn(), - }; - - it('should render - visible', () => { - const tree = renderWithProviders(); - expect(tree.container).toMatchSnapshot(); - }); - - it('should render - not visible', () => { - const tree = renderWithProviders(); - expect(tree.container).toMatchSnapshot(); - }); - - it('should render - disabled', () => { - const tree = renderWithProviders(); - expect(tree.container).toMatchSnapshot(); - }); - - it('should render - tooltip', () => { - const tree = renderWithProviders(Hello world} />); - expect(tree.container).toMatchSnapshot(); - }); - - it('should render - positive counter unselected', () => { - const tree = renderWithProviders(); - expect(tree.container).toMatchSnapshot(); - }); - - it('should render - positive counter selected', () => { - const tree = renderWithProviders(); - expect(tree.container).toMatchSnapshot(); - }); - - it('should render - zero counter', () => { - const tree = renderWithProviders(); - expect(tree.container).toMatchSnapshot(); - }); -}); diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx deleted file mode 100644 index 1cf5a0861..000000000 --- a/src/renderer/components/fields/Checkbox.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import type { ReactNode } from 'react'; - -import { Stack } from '@primer/react'; - -import { cn } from 'cn'; - -import { CustomCounter } from '../primitives/CustomCounter'; - -import { Tooltip } from './Tooltip'; - -export interface CheckboxProps { - name: string; - label: string; - counter?: number; - tooltip?: ReactNode | string; - checked: boolean; - disabled?: boolean; - visible?: boolean; - onChange: (evt: React.ChangeEvent) => void; -} - -export function Checkbox({ visible = true, ...props }: CheckboxProps) { - const counter = props?.counter === 0 ? '0' : props.counter; - - return ( - visible && ( - - - - - - {props.tooltip && } - - {counter && ( - - )} - - ) - ); -} diff --git a/src/renderer/components/fields/FieldLabel.test.tsx b/src/renderer/components/fields/FieldLabel.test.tsx deleted file mode 100644 index db452d146..000000000 --- a/src/renderer/components/fields/FieldLabel.test.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import { renderWithProviders } from '../../__helpers__/test-utils'; - -import { FieldLabel, type FieldLabelProps } from './FieldLabel'; - -describe('renderer/components/fields/FieldLabel.tsx', () => { - const props: FieldLabelProps = { - name: 'appearance', - label: 'Appearance', - }; - - it('should render', () => { - const tree = renderWithProviders(); - expect(tree.container).toMatchSnapshot(); - }); - - it('should render optional help and show it on click', async () => { - renderWithProviders(); - - expect(screen.getByText('Appearance')).not.toHaveClass('mr-1'); - expect(screen.getByTestId('tooltip-icon-tooltip-appearance')).toBeInTheDocument(); - expect(screen.queryByText('Appearance help')).not.toBeInTheDocument(); - - await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-appearance')); - - expect(screen.getByText('Appearance help')).toBeInTheDocument(); - }); -}); diff --git a/src/renderer/components/fields/FieldLabel.tsx b/src/renderer/components/fields/FieldLabel.tsx deleted file mode 100644 index 948e537f9..000000000 --- a/src/renderer/components/fields/FieldLabel.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { ReactNode } from 'react'; - -import { cn } from 'cn'; - -import { Tooltip } from './Tooltip'; - -export interface FieldLabelProps { - name: string; - label: string; - tooltip?: ReactNode | string; -} - -export function FieldLabel(props: Readonly) { - return ( - <> - - - {props.tooltip && } - - ); -} diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx deleted file mode 100644 index 1bb598fba..000000000 --- a/src/renderer/components/fields/Tooltip.test.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import { renderWithProviders } from '../../__helpers__/test-utils'; - -import { Tooltip, type TooltipProps } from './Tooltip'; - -describe('renderer/components/fields/Tooltip.tsx', () => { - const props: TooltipProps = { - name: 'test', - tooltip: 'This is some tooltip text', - }; - - it('should render', () => { - renderWithProviders(); - - expect(screen.getByTestId('tooltip-icon-test')).toBeInTheDocument(); - expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); - }); - - it('should toggle (show/hide) tooltip on clicking tooltip icon', async () => { - renderWithProviders(); - - const tooltipIconElement = screen.getByTestId('tooltip-icon-test'); - - // Open tooltip - await userEvent.click(tooltipIconElement); - expect(screen.getByText(props.tooltip as string)).toBeInTheDocument(); - - // Close tooltip - await userEvent.click(tooltipIconElement); - expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); - }); - - it('should hide tooltip when clicking outside', async () => { - renderWithProviders(); - - const tooltipIconElement = screen.getByTestId('tooltip-icon-test'); - - // Open tooltip - await userEvent.click(tooltipIconElement); - expect(screen.getByText(props.tooltip as string)).toBeInTheDocument(); - - // Click outside to close - await userEvent.click(document.body); - expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); - }); -}); diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap deleted file mode 100644 index e90fafc3b..000000000 --- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap +++ /dev/null @@ -1,222 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`renderer/components/fields/Checkbox.tsx > should render - disabled 1`] = ` -
-
- - -
-
-`; - -exports[`renderer/components/fields/Checkbox.tsx > should render - not visible 1`] = `
`; - -exports[`renderer/components/fields/Checkbox.tsx > should render - positive counter selected 1`] = ` -
-
- - - - 5 - -
-
-`; - -exports[`renderer/components/fields/Checkbox.tsx > should render - positive counter unselected 1`] = ` -
-
- - - - 5 - -
-
-`; - -exports[`renderer/components/fields/Checkbox.tsx > should render - tooltip 1`] = ` -
-
- - - -
-
-`; - -exports[`renderer/components/fields/Checkbox.tsx > should render - visible 1`] = ` -
-
- - -
-
-`; - -exports[`renderer/components/fields/Checkbox.tsx > should render - zero counter 1`] = ` -
-
- - - - 0 - -
-
-`; diff --git a/src/renderer/components/fields/__snapshots__/FieldLabel.test.tsx.snap b/src/renderer/components/fields/__snapshots__/FieldLabel.test.tsx.snap deleted file mode 100644 index 355b71580..000000000 --- a/src/renderer/components/fields/__snapshots__/FieldLabel.test.tsx.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`renderer/components/fields/FieldLabel.tsx > should render 1`] = ` -
- -
-`; diff --git a/src/renderer/components/filters/AccountFilter.tsx b/src/renderer/components/filters/AccountFilter.tsx index 73ce74936..141fe8b0f 100644 --- a/src/renderer/components/filters/AccountFilter.tsx +++ b/src/renderer/components/filters/AccountFilter.tsx @@ -4,10 +4,10 @@ import { Stack, Text } from '@primer/react'; import { useNotifications } from '../../hooks/useNotifications'; import { useAccountsStore, useFiltersStore } from '../../stores'; -import { Checkbox } from '../fields/Checkbox'; import { SectionHeading } from '../primitives/SectionHeading'; import { getAccountUUID } from '../../utils/auth/utils'; +import { FilterCheckbox } from './FilterCheckbox'; export function AccountFilter() { const { notifications } = useNotifications(); @@ -35,7 +35,7 @@ export function AccountFilter() { 0; return ( - { + it('renders a labelled checkbox with a counter', () => { + renderWithProviders( + , + ); + + expect(screen.getByTestId('checkbox-issues')).toBeChecked(); + expect(screen.getByText('Issues')).toBeInTheDocument(); + expect(screen.getByText('3')).toBeInTheDocument(); + }); + + it('renders help and disabled state', async () => { + renderWithProviders( + , + ); + + expect(screen.getByTestId('checkbox-issues')).toBeDisabled(); + + await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-issues')); + + expect(screen.getByText('Only issues assigned to you.')).toBeInTheDocument(); + }); +}); diff --git a/src/renderer/components/filters/FilterCheckbox.tsx b/src/renderer/components/filters/FilterCheckbox.tsx new file mode 100644 index 000000000..e5a873dda --- /dev/null +++ b/src/renderer/components/filters/FilterCheckbox.tsx @@ -0,0 +1,60 @@ +import type { ReactNode } from 'react'; + +import { Checkbox, CounterLabel } from '@primer/react'; + +import { cn } from 'cn'; + +import { HelpPopover } from '../primitives/HelpPopover'; + +export interface FilterCheckboxProps { + name: string; + label: string; + checked: boolean; + counter?: number; + disabled?: boolean; + tooltip?: ReactNode; + onChange: () => void; +} + +export function FilterCheckbox({ + name, + label, + checked, + counter, + disabled = false, + tooltip, + onChange, +}: Readonly) { + const id = `filter-${name}`; + + return ( +
+ + + + + {tooltip && } + + {counter !== undefined && ( + + {counter} + + )} +
+ ); +} diff --git a/src/renderer/components/filters/FilterSection.tsx b/src/renderer/components/filters/FilterSection.tsx index 6480217e7..5e2075b4b 100644 --- a/src/renderer/components/filters/FilterSection.tsx +++ b/src/renderer/components/filters/FilterSection.tsx @@ -6,10 +6,10 @@ import { Stack, Text } from '@primer/react'; import { useNotifications } from '../../hooks/useNotifications'; import { type FiltersState, useFiltersStore, useSettingsStore } from '../../stores'; -import { Checkbox } from '../fields/Checkbox'; import { SectionHeading } from '../primitives/SectionHeading'; import type { Filter } from '../../utils/notifications/filters'; +import { FilterCheckbox } from './FilterCheckbox'; import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning'; export interface FilterSectionProps { @@ -88,7 +88,7 @@ function FilterSectionComponent({ const count = filterCounts.get(type) ?? 0; return ( - should render itself & data-wrap="nowrap" >
@@ -85,14 +83,20 @@ exports[`renderer/components/filters/FilterSection.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Closed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Closed" + data-variant="invisible" id="tooltip-Closed" tabindex="0" type="button" > + +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( 0 + )
@@ -199,14 +224,20 @@ exports[`renderer/components/filters/FilterSection.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Open" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Open" + data-variant="invisible" id="tooltip-Open" tabindex="0" type="button" > + +  ( 1 + )
@@ -255,14 +293,20 @@ exports[`renderer/components/filters/FilterSection.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 3 + )
@@ -350,24 +403,22 @@ exports[`renderer/components/filters/FilterSection.tsx > should render itself & data-wrap="nowrap" >
@@ -375,14 +426,20 @@ exports[`renderer/components/filters/FilterSection.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Closed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Closed" + data-variant="invisible" id="tooltip-Closed" tabindex="0" type="button" > + +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( 0 + )
@@ -489,14 +567,20 @@ exports[`renderer/components/filters/FilterSection.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Open" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Open" + data-variant="invisible" id="tooltip-Open" tabindex="0" type="button" > + +  ( 1 + )
@@ -545,14 +636,20 @@ exports[`renderer/components/filters/FilterSection.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 3 + )
diff --git a/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap index 00506e47c..f206685f8 100644 --- a/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap +++ b/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap @@ -51,14 +51,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-reason" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-reason" + data-variant="invisible" id="tooltip-reason" tabindex="0" type="button" >
@@ -112,14 +116,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Agent Session Finished" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Agent Session Finished" + data-variant="invisible" id="tooltip-Agent Session Finished" tabindex="0" type="button" > + +  ( 0 + )
@@ -168,14 +185,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Approval Requested" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Approval Requested" + data-variant="invisible" id="tooltip-Approval Requested" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -224,14 +254,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Assigned" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Assigned" + data-variant="invisible" id="tooltip-Assigned" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -280,14 +323,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Authored" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Authored" + data-variant="invisible" id="tooltip-Authored" tabindex="0" type="button" > + +  ( 1 + )
@@ -336,14 +392,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Commented" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Commented" + data-variant="invisible" id="tooltip-Commented" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -392,14 +461,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Invitation Received" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Invitation Received" + data-variant="invisible" id="tooltip-Invitation Received" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -448,14 +530,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Member Feature Requested" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Member Feature Requested" + data-variant="invisible" id="tooltip-Member Feature Requested" tabindex="0" type="button" > + +  ( 0 + )
@@ -504,14 +599,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Mentioned" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Mentioned" + data-variant="invisible" id="tooltip-Mentioned" tabindex="0" type="button" > + +  ( 0 + )
@@ -560,14 +668,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Review Requested" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Review Requested" + data-variant="invisible" id="tooltip-Review Requested" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -616,14 +737,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Security Advisory Credit Received" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Security Advisory Credit Received" + data-variant="invisible" id="tooltip-Security Advisory Credit Received" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -672,14 +806,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Security Alert Received" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Security Alert Received" + data-variant="invisible" id="tooltip-Security Alert Received" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -728,14 +875,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-State Changed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-State Changed" + data-variant="invisible" id="tooltip-State Changed" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -784,14 +944,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Team Mentioned" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Team Mentioned" + data-variant="invisible" id="tooltip-Team Mentioned" tabindex="0" type="button" > + +  ( 0 + )
@@ -840,14 +1013,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Updated" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Updated" + data-variant="invisible" id="tooltip-Updated" tabindex="0" type="button" > + +  ( 0 + )
@@ -896,14 +1082,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Updated" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Updated" + data-variant="invisible" id="tooltip-Updated" tabindex="0" type="button" > + +  ( + 3 + ) +
@@ -952,14 +1151,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Workflow Run Completed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Workflow Run Completed" + data-variant="invisible" id="tooltip-Workflow Run Completed" tabindex="0" type="button" > + +  ( 0 + )
@@ -1008,14 +1220,20 @@ exports[`renderer/components/filters/ReasonFilter.tsx > should render itself & i aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 0 + )
diff --git a/src/renderer/components/filters/__snapshots__/ReviewRequestTypeFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/ReviewRequestTypeFilter.test.tsx.snap index 685632e3e..55da4b750 100644 --- a/src/renderer/components/filters/__snapshots__/ReviewRequestTypeFilter.test.tsx.snap +++ b/src/renderer/components/filters/__snapshots__/ReviewRequestTypeFilter.test.tsx.snap @@ -51,14 +51,20 @@ exports[`renderer/components/filters/ReviewRequestTypeFilter.tsx > should render aria-expanded="false" aria-haspopup="true" aria-label="tooltip-review-request-type" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-review-request-type" + data-variant="invisible" id="tooltip-review-request-type" tabindex="0" type="button" >
@@ -112,14 +116,20 @@ exports[`renderer/components/filters/ReviewRequestTypeFilter.tsx > should render aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Direct" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Direct" + data-variant="invisible" id="tooltip-Direct" tabindex="0" type="button" > + +  ( 0 + )
@@ -168,14 +185,20 @@ exports[`renderer/components/filters/ReviewRequestTypeFilter.tsx > should render aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Team" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Team" + data-variant="invisible" id="tooltip-Team" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -224,14 +254,20 @@ exports[`renderer/components/filters/ReviewRequestTypeFilter.tsx > should render aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 4 + )
diff --git a/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap index 27a6d3214..4c428d589 100644 --- a/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap +++ b/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap @@ -54,14 +54,20 @@ exports[`renderer/components/filters/StateFilter.tsx > should render itself & it aria-expanded="false" aria-haspopup="true" aria-label="tooltip-state" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-state" + data-variant="invisible" id="tooltip-state" tabindex="0" type="button" >
@@ -115,14 +119,20 @@ exports[`renderer/components/filters/StateFilter.tsx > should render itself & it aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Closed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Closed" + data-variant="invisible" id="tooltip-Closed" tabindex="0" type="button" > + +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( 0 + )
@@ -229,14 +260,20 @@ exports[`renderer/components/filters/StateFilter.tsx > should render itself & it aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Open" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Open" + data-variant="invisible" id="tooltip-Open" tabindex="0" type="button" > + +  ( 1 + )
@@ -285,14 +329,20 @@ exports[`renderer/components/filters/StateFilter.tsx > should render itself & it aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 3 + )
diff --git a/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap index 4c6e491ab..2d1cb3583 100644 --- a/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap +++ b/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap @@ -51,14 +51,20 @@ exports[`renderer/components/filters/SubjectTypeFilter.tsx > should render itsel aria-expanded="false" aria-haspopup="true" aria-label="tooltip-type" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-type" + data-variant="invisible" id="tooltip-type" tabindex="0" type="button" >
+ +  ( 0 + )
+ +  ( + 0 + ) +
+ +  ( 0 + )
+ +  ( 0 + )
+ +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( 0 + )
+ +  ( 0 + )
+ +  ( 0 + )
+ +  ( + 2 + ) +
+ +  ( + 1 + ) +
+ +  ( 1 + )
+ +  ( + 0 + ) +
+ +  ( + 0 + ) +
@@ -518,14 +620,20 @@ exports[`renderer/components/filters/SubjectTypeFilter.tsx > should render itsel aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 0 + )
diff --git a/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap index b666e5b9a..6a2a66450 100644 --- a/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap +++ b/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap @@ -51,14 +51,20 @@ exports[`renderer/components/filters/UserTypeFilter.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-user-type" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-user-type" + data-variant="invisible" id="tooltip-user-type" tabindex="0" type="button" >
@@ -112,14 +116,20 @@ exports[`renderer/components/filters/UserTypeFilter.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Bot" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Bot" + data-variant="invisible" id="tooltip-Bot" tabindex="0" type="button" > + +  ( 0 + )
+ +  ( 0 + )
+ +  ( 1 + )
@@ -226,14 +257,20 @@ exports[`renderer/components/filters/UserTypeFilter.tsx > should render itself & aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 3 + )
diff --git a/src/renderer/components/primitives/HelpPopover.test.tsx b/src/renderer/components/primitives/HelpPopover.test.tsx new file mode 100644 index 000000000..ab106554b --- /dev/null +++ b/src/renderer/components/primitives/HelpPopover.test.tsx @@ -0,0 +1,67 @@ +import { fireEvent, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { renderWithProviders } from '../../__helpers__/test-utils'; + +import { HelpPopover, type HelpPopoverProps } from './HelpPopover'; + +describe('renderer/components/primitives/HelpPopover.tsx', () => { + const props: HelpPopoverProps = { + name: 'test', + content: 'This is some help text', + }; + + it('should render', () => { + renderWithProviders(); + + expect(screen.getByTestId('tooltip-icon-test')).toBeInTheDocument(); + expect(screen.queryByText(props.content as string)).not.toBeInTheDocument(); + }); + + it('should toggle (show/hide) help on clicking the icon', async () => { + renderWithProviders(); + + const icon = screen.getByTestId('tooltip-icon-test'); + + await userEvent.click(icon); + expect(screen.getByText(props.content as string)).toBeInTheDocument(); + + await userEvent.click(icon); + expect(screen.queryByText(props.content as string)).not.toBeInTheDocument(); + }); + + it('should hide help when its scroll container scrolls', async () => { + renderWithProviders( +
+
+ +
+
, + ); + + const scrollContainer = screen.getByTestId('scroll-container'); + Object.defineProperty(scrollContainer, 'clientHeight', { configurable: true, value: 100 }); + Object.defineProperty(scrollContainer, 'scrollHeight', { configurable: true, value: 400 }); + + await userEvent.click(screen.getByTestId('tooltip-icon-test')); + expect(screen.getByText(props.content as string)).toBeInTheDocument(); + + fireEvent.scroll(scrollContainer); + + await waitFor(() => { + expect(screen.queryByText(props.content as string)).not.toBeInTheDocument(); + }); + }); + + it('should hide help when clicking outside', async () => { + renderWithProviders(); + + const icon = screen.getByTestId('tooltip-icon-test'); + + await userEvent.click(icon); + expect(screen.getByText(props.content as string)).toBeInTheDocument(); + + await userEvent.click(document.body); + expect(screen.queryByText(props.content as string)).not.toBeInTheDocument(); + }); +}); diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/primitives/HelpPopover.tsx similarity index 65% rename from src/renderer/components/fields/Tooltip.tsx rename to src/renderer/components/primitives/HelpPopover.tsx index bfe11d4b0..b9abe52ea 100644 --- a/src/renderer/components/fields/Tooltip.tsx +++ b/src/renderer/components/primitives/HelpPopover.tsx @@ -1,27 +1,26 @@ import { type ReactNode, useEffect, useRef, useState } from 'react'; import { QuestionIcon } from '@primer/octicons-react'; -import { AnchoredOverlay } from '@primer/react'; +import { AnchoredOverlay, IconButton } from '@primer/react'; import { cn } from 'cn'; -export interface TooltipProps { +export interface HelpPopoverProps { name: string; - tooltip: ReactNode | string; + content: ReactNode | string; } -export function Tooltip(props: Readonly) { - const [shouldShowTooltipContents, setShouldShowTooltipContents] = useState(false); +export function HelpPopover(props: Readonly) { + const [shouldShowContents, setShouldShowContents] = useState(false); const scrollContainerRef = useRef(null); const overlayRef = useRef(null); useEffect(() => { - if (!shouldShowTooltipContents) { + if (!shouldShowContents) { return; } - // Find the scrollable parent container const findScrollContainer = (element: HTMLElement | null): HTMLElement | null => { if (!element) { return null; @@ -37,20 +36,20 @@ export function Tooltip(props: Readonly) { return findScrollContainer(element.parentElement); }; - const tooltipButton = document.getElementById(props.name); - scrollContainerRef.current = findScrollContainer(tooltipButton); + const anchor = document.getElementById(props.name); + scrollContainerRef.current = findScrollContainer(anchor); const handleScroll = () => { - setShouldShowTooltipContents(false); + setShouldShowContents(false); }; const handleClickOutside = (event: MouseEvent) => { if ( overlayRef.current && !overlayRef.current.contains(event.target as Node) && - !tooltipButton?.contains(event.target as Node) + !anchor?.contains(event.target as Node) ) { - setShouldShowTooltipContents(false); + setShouldShowContents(false); } }; @@ -66,23 +65,25 @@ export function Tooltip(props: Readonly) { } document.removeEventListener('mousedown', handleClickOutside); }; - }, [shouldShowTooltipContents, props.name]); + }, [shouldShowContents, props.name]); return ( ( - + onClick={() => setShouldShowContents(!shouldShowContents)} + size="small" + unsafeDisableTooltip={true} + variant="invisible" + /> )} side="outside-bottom" > @@ -90,13 +91,13 @@ export function Tooltip(props: Readonly) { className={cn( 'z-10 w-60 p-2', 'text-left text-xs text-gitify-font', - 'rounded-sm border border-gray-300 shadow-sm bg-gitify-tooltip-popout', + 'rounded-gitify-sm border border-gitify-notification-border bg-gitify-tooltip-popout shadow-gitify-sm', )} data-testid={`tooltip-content-${props.name}`} ref={overlayRef} role="tooltip" > - {props.tooltip} + {props.content} ); diff --git a/src/renderer/components/primitives/SectionHeading.tsx b/src/renderer/components/primitives/SectionHeading.tsx index fd284fb0d..e41371172 100644 --- a/src/renderer/components/primitives/SectionHeading.tsx +++ b/src/renderer/components/primitives/SectionHeading.tsx @@ -3,7 +3,7 @@ import type { ReactNode } from 'react'; import type { Icon } from '@primer/octicons-react'; import { Heading, Stack } from '@primer/react'; -import { Tooltip } from '../fields/Tooltip'; +import { HelpPopover } from './HelpPopover'; type SectionHeadingTag = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; @@ -23,13 +23,13 @@ export function SectionHeading({ as = 'h4', ...props }: Readonly {props.tooltip} } + name={`tooltip-${name}`} /> ); diff --git a/src/renderer/components/settings/controls/SettingsChoice.tsx b/src/renderer/components/settings/controls/SettingsChoice.tsx index a3f8ed581..e113b8f52 100644 --- a/src/renderer/components/settings/controls/SettingsChoice.tsx +++ b/src/renderer/components/settings/controls/SettingsChoice.tsx @@ -4,7 +4,7 @@ import { SegmentedControl, Select } from '@primer/react'; import { cn } from 'cn'; -import { Tooltip } from '../../fields/Tooltip'; +import { HelpPopover } from '../../primitives/HelpPopover'; export interface SettingsChoiceOption { label: string; @@ -140,7 +140,7 @@ export function SettingsChoice({ > {label} - {tooltip && } + {tooltip && }
{control}
diff --git a/src/renderer/components/settings/controls/SettingsRow.tsx b/src/renderer/components/settings/controls/SettingsRow.tsx index af4d02139..907e0ad60 100644 --- a/src/renderer/components/settings/controls/SettingsRow.tsx +++ b/src/renderer/components/settings/controls/SettingsRow.tsx @@ -2,7 +2,7 @@ import { type ReactNode, useId } from 'react'; import { cn } from 'cn'; -import { Tooltip } from '../../fields/Tooltip'; +import { HelpPopover } from '../../primitives/HelpPopover'; export interface SettingsRowProps { name: string; @@ -44,7 +44,7 @@ export function SettingsRow({ {label} - {tooltip && } + {tooltip && }
{children}
diff --git a/src/renderer/components/settings/controls/SettingsToggle.tsx b/src/renderer/components/settings/controls/SettingsToggle.tsx index 3f2d54414..98336b35f 100644 --- a/src/renderer/components/settings/controls/SettingsToggle.tsx +++ b/src/renderer/components/settings/controls/SettingsToggle.tsx @@ -4,7 +4,7 @@ import { ToggleSwitch } from '@primer/react'; import { cn } from 'cn'; -import { Tooltip } from '../../fields/Tooltip'; +import { HelpPopover } from '../../primitives/HelpPopover'; export interface SettingsToggleProps { name: string; @@ -53,7 +53,7 @@ export function SettingsToggle({ > {label} - {tooltip && } + {tooltip && } {caption && ( diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-dark-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-dark-classic-chromium-linux.png index 4be81f34d..20f1592e3 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-dark-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-dark-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-light-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-light-classic-chromium-linux.png index e6bbae9b4..8b332a415 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-light-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/filters-light-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-classic-chromium-linux.png index 6e95d87c6..94c617443 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-glass-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-glass-chromium-linux.png index 53f7b6655..a9900b332 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-glass-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark-glass-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_colorblind-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_colorblind-classic-chromium-linux.png index 4b120d09a..04b4990be 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_colorblind-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_colorblind-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_dimmed-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_dimmed-classic-chromium-linux.png index c95515e22..dbae533d6 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_dimmed-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_dimmed-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_tritanopia-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_tritanopia-classic-chromium-linux.png index 39d566381..861ebb716 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_tritanopia-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-dark_tritanopia-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-classic-chromium-linux.png index 947aad1c4..9586134d6 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-glass-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-glass-chromium-linux.png index 6390cd7e2..6830d2422 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-glass-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light-glass-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_colorblind-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_colorblind-classic-chromium-linux.png index bc8d1ae6c..ecf72ab23 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_colorblind-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_colorblind-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_tritanopia-classic-chromium-linux.png b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_tritanopia-classic-chromium-linux.png index fd60fcafe..e502f0a3a 100644 Binary files a/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_tritanopia-classic-chromium-linux.png and b/src/renderer/routes/__screenshots__/routes.visual.test.tsx/settings-light_tritanopia-classic-chromium-linux.png differ diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap index 43c6ec0d8..5afc24b17 100644 --- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap @@ -149,14 +149,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-account" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-account" + data-variant="invisible" id="tooltip-account" tabindex="0" type="button" >
+ +  ( 0 + )
+ +  ( 0 + )
@@ -291,14 +311,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-search" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-search" + data-variant="invisible" id="tooltip-search" tabindex="0" type="button" >
@@ -600,14 +630,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Bot" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Bot" + data-variant="invisible" id="tooltip-Bot" tabindex="0" type="button" > + +  ( 0 + )
+ +  ( + 0 + ) +
+ +  ( + 0 + ) +
@@ -714,14 +771,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 0 + )
@@ -795,14 +867,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-type" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-type" + data-variant="invisible" id="tooltip-type" tabindex="0" type="button" >
+ +  ( + 0 + ) +
+ +  ( 0 + )
+ +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( 0 + )
+ +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( + 0 + ) +
+ +  ( 0 + )
+ +  ( 0 + )
+ +  ( 0 + )
+ +  ( 0 + )
+ +  ( + 0 + ) +
@@ -1262,14 +1436,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -1346,14 +1535,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-state" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-state" + data-variant="invisible" id="tooltip-state" tabindex="0" type="button" >
@@ -1407,14 +1600,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Closed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Closed" + data-variant="invisible" id="tooltip-Closed" tabindex="0" type="button" > + +  ( 0 + )
+ +  ( 0 + )
+ +  ( 0 + )
@@ -1521,14 +1741,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Open" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Open" + data-variant="invisible" id="tooltip-Open" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -1577,14 +1810,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( + 0 + ) +
@@ -1658,14 +1906,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-review-request-type" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-review-request-type" + data-variant="invisible" id="tooltip-review-request-type" tabindex="0" type="button" >
+
@@ -1719,14 +1971,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Direct" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Direct" + data-variant="invisible" id="tooltip-Direct" tabindex="0" type="button" > + +  ( 0 + )
@@ -1775,14 +2040,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Team" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Team" + data-variant="invisible" id="tooltip-Team" tabindex="0" type="button" > + +  ( 0 + )
@@ -1831,14 +2109,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 0 + )
@@ -1912,14 +2205,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-reason" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-reason" + data-variant="invisible" id="tooltip-reason" tabindex="0" type="button" >
@@ -1973,14 +2270,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Agent Session Finished" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Agent Session Finished" + data-variant="invisible" id="tooltip-Agent Session Finished" tabindex="0" type="button" > + +  ( 0 + )
@@ -2029,14 +2339,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Approval Requested" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Approval Requested" + data-variant="invisible" id="tooltip-Approval Requested" tabindex="0" type="button" > + +  ( 0 + )
@@ -2085,14 +2408,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Assigned" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Assigned" + data-variant="invisible" id="tooltip-Assigned" tabindex="0" type="button" > + +  ( 0 + )
@@ -2141,14 +2477,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Authored" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Authored" + data-variant="invisible" id="tooltip-Authored" tabindex="0" type="button" > + +  ( 0 + )
@@ -2197,14 +2546,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Commented" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Commented" + data-variant="invisible" id="tooltip-Commented" tabindex="0" type="button" > + +  ( 0 + )
@@ -2253,14 +2615,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Invitation Received" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Invitation Received" + data-variant="invisible" id="tooltip-Invitation Received" tabindex="0" type="button" > + +  ( 0 + )
@@ -2309,14 +2684,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Member Feature Requested" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Member Feature Requested" + data-variant="invisible" id="tooltip-Member Feature Requested" tabindex="0" type="button" > + +  ( 0 + )
@@ -2365,14 +2753,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Mentioned" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Mentioned" + data-variant="invisible" id="tooltip-Mentioned" tabindex="0" type="button" > + +  ( 0 + )
@@ -2421,14 +2822,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Review Requested" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Review Requested" + data-variant="invisible" id="tooltip-Review Requested" tabindex="0" type="button" > + +  ( 0 + )
@@ -2477,14 +2891,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Security Advisory Credit Received" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Security Advisory Credit Received" + data-variant="invisible" id="tooltip-Security Advisory Credit Received" tabindex="0" type="button" > + +  ( 0 + )
@@ -2533,14 +2960,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Security Alert Received" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Security Alert Received" + data-variant="invisible" id="tooltip-Security Alert Received" tabindex="0" type="button" > + +  ( 0 + )
@@ -2589,14 +3029,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-State Changed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-State Changed" + data-variant="invisible" id="tooltip-State Changed" tabindex="0" type="button" > + +  ( 0 + )
@@ -2645,14 +3098,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Team Mentioned" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Team Mentioned" + data-variant="invisible" id="tooltip-Team Mentioned" tabindex="0" type="button" > + +  ( 0 + )
@@ -2701,14 +3167,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Updated" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Updated" + data-variant="invisible" id="tooltip-Updated" tabindex="0" type="button" > + +  ( 0 + )
@@ -2757,14 +3236,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Updated" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Updated" + data-variant="invisible" id="tooltip-Updated" tabindex="0" type="button" > + +  ( 0 + )
@@ -2813,14 +3305,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Workflow Run Completed" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Workflow Run Completed" + data-variant="invisible" id="tooltip-Workflow Run Completed" tabindex="0" type="button" > + +  ( 0 + )
@@ -2869,14 +3374,20 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil aria-expanded="false" aria-haspopup="true" aria-label="tooltip-Other" + class="prc-Button-ButtonBase-9n-Xk text-gitify-tooltip-icon! prc-Button-IconButton-fyge7" + data-component="IconButton" + data-loading="false" + data-no-visuals="true" + data-size="small" data-testid="tooltip-icon-tooltip-Other" + data-variant="invisible" id="tooltip-Other" tabindex="0" type="button" > + +  ( 0 + )
@@ -2916,7 +3436,7 @@ exports[`renderer/routes/Filters.tsx > General > should render itself & its chil data-wrap="nowrap" >