feat: add tooltip for show participating setting (#1008)

* feat(settings): add tooltip for show participating

* feat(settings): add tooltip for show participating

* feat(settings): add tooltip for show participating

* feat(settings): add tooltip for show participating

* feat(settings): add tooltip for show participating

Author: setchy

src/components/fields/Checkbox.tsx

@@ -35,7 +35,9 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
             }
           >
             {props.label}
-            {props.tooltip && <Tooltip tooltip={props.tooltip} />}
+            {props.tooltip && (
+              <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
+            )}
           </label>
         </div>
       </div>

src/components/fields/Tooltip.test.tsx

@@ -6,6 +6,7 @@ import { type ITooltip, Tooltip } from './Tooltip';
 
 describe('components/fields/Tooltip.tsx', () => {
   const props: ITooltip = {
+    name: 'tooltip',
     tooltip: 'This is some tooltip text',
   };
 
@@ -17,7 +18,7 @@ describe('components/fields/Tooltip.tsx', () => {
   it('should display on mouse enter / leave', () => {
     render(<Tooltip {...props} />);
 
-    const tooltipElement = screen.getByTitle('tooltip');
+    const tooltipElement = screen.getByLabelText('tooltip');
 
     fireEvent.mouseEnter(tooltipElement);
     expect(tooltipElement).toMatchSnapshot();

src/components/fields/Tooltip.tsx

@@ -2,6 +2,7 @@ import { QuestionIcon } from '@primer/octicons-react';
 import { type FC, type ReactNode, useState } from 'react';
 
 export interface ITooltip {
+  name: string;
   tooltip: ReactNode | string;
 }
 
@@ -10,7 +11,8 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
 
   return (
     <span
-      title="tooltip"
+      id={props.name}
+      aria-label={props.name}
       className="relative"
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}

src/components/fields/__snapshots__/Tooltip.test.tsx.snap

@@ -119,6 +119,41 @@ describe('routes/Settings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('participating', false);
   });
 
+  it('should open official docs for showOnlyParticipating tooltip', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: mockSettings,
+            accounts: mockAccounts,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    const tooltipElement = screen.getByLabelText(
+      'tooltip-showOnlyParticipating',
+    );
+
+    fireEvent.mouseEnter(tooltipElement);
+
+    fireEvent.click(
+      screen.getByTitle(
+        'Open GitHub documentation for participating and watching notifications',
+      ),
+    );
+
+    expect(shell.openExternal).toHaveBeenCalledTimes(1);
+    expect(shell.openExternal).toHaveBeenCalledWith(
+      'https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications#about-participating-and-watching-notifications',
+    );
+  });
+
   it('should not be able to toggle the showBots checkbox when detailedNotifications is disabled', async () => {
     await act(async () => {
       render(

src/routes/Settings.test.tsx

@@ -8,6 +8,7 @@ import { ipcRenderer } from 'electron';
 
 import {
   type FC,
+  type MouseEvent,
   useCallback,
   useContext,
   useEffect,
@@ -44,6 +45,15 @@ export const SettingsRoute: FC = () => {
     );
   }, []);
 
+  const openGitHubParticipatingDocs = (event: MouseEvent<HTMLElement>) => {
+    // Don't trigger onClick of parent element.
+    event.stopPropagation();
+
+    openExternalLink(
+      'https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications#about-participating-and-watching-notifications',
+    );
+  };
+
   useEffect(() => {
     ipcRenderer.invoke('get-platform').then((result: string) => {
       setIsLinux(result === 'linux');
@@ -177,6 +187,22 @@ export const SettingsRoute: FC = () => {
             onChange={(evt) =>
               updateSetting('participating', evt.target.checked)
             }
+            tooltip={
+              <div>
+                <div className="pb-3">
+                  See{' '}
+                  <button
+                    type="button"
+                    className="text-blue-500"
+                    title="Open GitHub documentation for participating and watching notifications"
+                    onClick={openGitHubParticipatingDocs}
+                  >
+                    official docs
+                  </button>{' '}
+                  for more details.
+                </div>
+              </div>
+            }
           />
           <Checkbox
             name="showBots"