Merge branch 'main' into refactor/remove-legacy-account-structures

Author: setchy

config/webpack.config.renderer.base.ts

@@ -40,10 +40,10 @@ const configuration: webpack.Configuration = {
   },
 
   plugins: [
-    // Development Keys - See README.md
+    // Development Keys - See CONTRIBUTING.md
     new webpack.EnvironmentPlugin({
-      OAUTH_CLIENT_ID: '3fef4433a29c6ad8f22c',
-      OAUTH_CLIENT_SECRET: '9670de733096c15322183ff17ed0fc8704050379',
+      OAUTH_CLIENT_ID: 'Ov23liQIkFs5ehQLNzHF',
+      OAUTH_CLIENT_SECRET: '404b80632292e18419dbd2a6ed25976856e95255',
     }),
 
     // Extract CSS into a separate file

package.json

@@ -80,6 +80,12 @@
       "package.json"
     ],
     "electronLanguages": ["en"],
+    "protocols": [
+      {
+        "name": "Gitify",
+        "schemes": ["gitify"]
+      }
+    ],
     "mac": {
       "category": "public.app-category.developer-tools",
       "icon": "assets/images/app-icon.icns",

src/main/main.ts

@@ -19,8 +19,8 @@ const browserWindowOpts = {
   minHeight: 400,
   resizable: false,
   skipTaskbar: true, // Hide the app from the Windows taskbar
+  // TODO ideally we would disable this as use a preload script with a context bridge
   webPreferences: {
-    enableRemoteModule: true,
     nodeIntegration: true,
     contextIsolation: false,
   },
@@ -37,11 +37,14 @@ const mb = menubar({
 const menuBuilder = new MenuBuilder(mb);
 const contextMenu = menuBuilder.buildMenu();
 
-/**
- * Electron Auto Updater only supports macOS and Windows
- * https://github.com/electron/update-electron-app
- */
+// Register your app as the handler for a custom protocol
+app.setAsDefaultProtocolClient('gitify');
+
 if (isMacOS() || isWindows()) {
+  /**
+   * Electron Auto Updater only supports macOS and Windows
+   * https://github.com/electron/update-electron-app
+   */
   const updater = new Updater(mb, menuBuilder);
   updater.initialize();
 }
@@ -54,13 +57,6 @@ app.whenReady().then(async () => {
   mb.on('ready', () => {
     mb.app.setAppUserModelId(APPLICATION.ID);
 
-    /**
-     * TODO: Remove @electron/remote use - see #650
-     * GitHub OAuth 2 Login Flows - Enable Remote Browser Window Launch
-     */
-    require('@electron/remote/main').initialize();
-    require('@electron/remote/main').enable(mb.window.webContents);
-
     // Tray configuration
     mb.tray.setToolTip(APPLICATION.NAME);
     mb.tray.setIgnoreDoubleClickEvents(true);
@@ -172,3 +168,9 @@ app.whenReady().then(async () => {
     app.setLoginItemSettings(settings);
   });
 });
+
+// Handle gitify:// custom protocol URL events for OAuth 2.0 callback
+app.on('open-url', (event, url) => {
+  event.preventDefault();
+  mb.window.webContents.send(namespacedEvent('auth-callback'), url);
+});

src/renderer/__mocks__/state-mocks.ts

@@ -79,16 +79,16 @@ export const mockToken = 'token-123-456' as Token;
 const mockAppearanceSettings: AppearanceSettingsState = {
   theme: Theme.SYSTEM,
   zoomPercentage: 100,
-  detailedNotifications: true,
-  showPills: true,
-  showNumber: true,
   showAccountHeader: false,
   wrapNotificationTitle: false,
 };
 
 const mockNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
   fetchAllNotifications: true,
+  detailedNotifications: true,
+  showPills: true,
+  showNumber: true,
   participating: false,
   markAsDoneOnOpen: false,
   markAsDoneOnUnsubscribe: false,

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<IAllRead> = ({ fullHeight = true }: IAllRead) => {
   const { settings } = useContext(AppContext);
 
-  const hasFilters = hasFiltersSet(settings);
+  const hasFilters = hasAnyFiltersSet(settings);
 
   const emoji = useMemo(
     () =>

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"

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(<Checkbox {...props} counter={5} checked={false} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render - positive counter selected', () => {
+    const tree = render(<Checkbox {...props} counter={5} checked={true} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render - zero counter', () => {
+    const tree = render(<Checkbox {...props} counter={0} />);
+    expect(tree).toMatchSnapshot();
+  });
 });

src/renderer/components/fields/Checkbox.tsx

@@ -1,13 +1,14 @@
 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';
 
 export interface ICheckbox {
   name: string;
   label: string;
+  counter?: number;
   tooltip?: ReactNode | string;
   checked: boolean;
   disabled?: boolean;
@@ -19,6 +20,8 @@ export const Checkbox: FC<ICheckbox> = ({
   visible = true,
   ...props
 }: ICheckbox) => {
+  const counter = props.counter > 0 ? props.counter : undefined;
+
   return (
     visible && (
       <Stack
@@ -46,9 +49,16 @@ export const Checkbox: FC<ICheckbox> = ({
         >
           {props.label}
         </label>
+
         {props.tooltip && (
           <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
         )}
+
+        {counter && (
+          <CounterLabel scheme={props.checked ? 'primary' : 'secondary'}>
+            {counter}
+          </CounterLabel>
+        )}
       </Stack>
     )
   );

src/renderer/components/fields/Tooltip.tsx

@@ -19,7 +19,7 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
       onMouseLeave={() => setShowTooltip(false)}
       data-testid={`tooltip-${props.name}`}
     >
-      <QuestionIcon className="ml-1 text-gitify-tooltip-icon" />
+      <QuestionIcon className="text-gitify-tooltip-icon" />
       {showTooltip && (
         <Box className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
           <Box className="text-left text-xs text-gitify-font">