feat(auth): account scopes and expired pat workflow

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/App.css

@@ -7,6 +7,12 @@
 /** Tailwind CSS Configuration */
 @config "../../tailwind.config.mts";
 
+@layer components {
+  .gitify-scope-row {
+    @apply rounded-md py-1.5 px-4 bg-gitify-accounts;
+  }
+}
+
 html,
 body,
 #root {

src/renderer/App.tsx

@@ -9,6 +9,7 @@ import {
 import { BaseStyles, ThemeProvider } from '@primer/react';
 
 import { AppProvider } from './context/App';
+import { AccountScopesRoute } from './routes/AccountScopes';
 import { AccountsRoute } from './routes/Accounts';
 import { FiltersRoute } from './routes/Filters';
 import { LoginRoute } from './routes/Login';
@@ -78,6 +79,14 @@ export const App = () => {
                   }
                   path="/accounts"
                 />
+                <Route
+                  element={
+                    <RequireAuth>
+                      <AccountScopesRoute />
+                    </RequireAuth>
+                  }
+                  path="/account-scopes"
+                />
                 <Route element={<LoginRoute />} path="/login" />
                 <Route
                   element={<LoginWithDeviceFlowRoute />}

src/renderer/__mocks__/account-mocks.ts

@@ -8,6 +8,7 @@ import type {
   Token,
 } from '../types';
 
+import { getRecommendedScopeNames } from '../utils/auth/utils';
 import { mockGitifyUser } from './user-mocks';
 
 export const mockGitHubAppAccount: Account = {
@@ -16,7 +17,7 @@ export const mockGitHubAppAccount: Account = {
   token: 'token-987654321' as Token,
   hostname: Constants.GITHUB_HOSTNAME,
   user: mockGitifyUser,
-  hasRequiredScopes: true,
+  scopes: getRecommendedScopeNames(),
 };
 
 export const mockPersonalAccessTokenAccount: Account = {
@@ -25,7 +26,7 @@ export const mockPersonalAccessTokenAccount: Account = {
   token: 'token-123-456' as Token,
   hostname: Constants.GITHUB_HOSTNAME,
   user: mockGitifyUser,
-  hasRequiredScopes: true,
+  scopes: getRecommendedScopeNames(),
 };
 
 export const mockOAuthAccount: Account = {
@@ -34,7 +35,7 @@ export const mockOAuthAccount: Account = {
   token: 'token-1234568790' as Token,
   hostname: 'github.gitify.io' as Hostname,
   user: mockGitifyUser,
-  hasRequiredScopes: true,
+  scopes: getRecommendedScopeNames(),
 };
 
 export const mockGitHubCloudAccount: Account = {
@@ -44,7 +45,6 @@ export const mockGitHubCloudAccount: Account = {
   hostname: Constants.GITHUB_HOSTNAME,
   user: mockGitifyUser,
   version: 'latest',
-  hasRequiredScopes: true,
 };
 
 export const mockGitHubEnterpriseServerAccount: Account = {
@@ -53,7 +53,6 @@ export const mockGitHubEnterpriseServerAccount: Account = {
   token: 'token-1234568790' as Token,
   hostname: 'github.gitify.io' as Hostname,
   user: mockGitifyUser,
-  hasRequiredScopes: true,
 };
 
 export function mockAccountWithError(error: GitifyError): AccountNotifications {

src/renderer/components/Oops.test.tsx

@@ -7,6 +7,12 @@ import {
 
 import { Oops } from './Oops';
 
+const navigateMock = vi.fn();
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useNavigate: () => navigateMock,
+}));
+
 describe('renderer/components/Oops.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();

src/renderer/components/Oops.tsx

@@ -1,4 +1,7 @@
 import { type FC, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@primer/react';
 
 import { EmojiSplash } from './layout/EmojiSplash';
 
@@ -16,14 +19,31 @@ export const Oops: FC<OopsProps> = ({
   fullHeight = true,
 }: OopsProps) => {
   const err = error ?? Errors.UNKNOWN;
+  const navigate = useNavigate();
 
   const emoji = useMemo(
     () => err.emojis[Math.floor(Math.random() * err.emojis.length)],
     [err],
   );
 
+  const actions = err.actions?.length ? (
+    <>
+      {err.actions.map((action) => (
+        <Button
+          key={action.route}
+          leadingVisual={action.icon}
+          onClick={() => navigate(action.route)}
+          variant={action.variant}
+        >
+          {action.label}
+        </Button>
+      ))}
+    </>
+  ) : null;
+
   return (
     <EmojiSplash
+      actions={actions}
       emoji={emoji}
       fullHeight={fullHeight}
       heading={err.title}

src/renderer/components/icons/ScopeStatusIcon.test.tsx

@@ -0,0 +1,107 @@
+import { screen } from '@testing-library/react';
+
+import { describe, expect, it } from 'vitest';
+
+import { renderWithAppContext } from '../../__helpers__/test-utils';
+
+import { ScopeStatusIcon } from './ScopeStatusIcon';
+
+describe('renderer/components/icons/ScopeStatusIcon.tsx', () => {
+  describe('granted state', () => {
+    it('renders a success icon when granted', () => {
+      const tree = renderWithAppContext(<ScopeStatusIcon granted={true} />);
+      expect(tree.container).toMatchSnapshot();
+    });
+
+    it('renders a success icon with test id when withTestId is true', () => {
+      renderWithAppContext(
+        <ScopeStatusIcon granted={true} withTestId={true} />,
+      );
+      expect(
+        screen.getByTestId('account-scopes-scope-granted'),
+      ).toBeInTheDocument();
+    });
+
+    it('does not render a test id by default', () => {
+      renderWithAppContext(<ScopeStatusIcon granted={true} />);
+      expect(
+        screen.queryByTestId('account-scopes-scope-granted'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('missing state', () => {
+    it('renders a danger icon when not granted', () => {
+      const tree = renderWithAppContext(<ScopeStatusIcon granted={false} />);
+      expect(tree.container).toMatchSnapshot();
+    });
+
+    it('renders a danger icon with test id when withTestId is true', () => {
+      renderWithAppContext(
+        <ScopeStatusIcon granted={false} withTestId={true} />,
+      );
+      expect(
+        screen.getByTestId('account-scopes-scope-missing'),
+      ).toBeInTheDocument();
+    });
+
+    it('does not render a test id by default', () => {
+      renderWithAppContext(<ScopeStatusIcon granted={false} />);
+      expect(
+        screen.queryByTestId('account-scopes-scope-missing'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('notApplicable state', () => {
+    it('renders a dash icon when notApplicable', () => {
+      const tree = renderWithAppContext(
+        <ScopeStatusIcon granted={false} notApplicable={true} />,
+      );
+      expect(tree.container).toMatchSnapshot();
+    });
+
+    it('renders a dash icon with test id when withTestId is true', () => {
+      renderWithAppContext(
+        <ScopeStatusIcon
+          granted={false}
+          notApplicable={true}
+          withTestId={true}
+        />,
+      );
+      expect(screen.getByTestId('account-scopes-scope-na')).toBeInTheDocument();
+    });
+
+    it('does not render a test id by default', () => {
+      renderWithAppContext(
+        <ScopeStatusIcon granted={false} notApplicable={true} />,
+      );
+      expect(
+        screen.queryByTestId('account-scopes-scope-na'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('ignores granted=true when notApplicable is true', () => {
+      renderWithAppContext(
+        <ScopeStatusIcon
+          granted={true}
+          notApplicable={true}
+          withTestId={true}
+        />,
+      );
+      expect(screen.getByTestId('account-scopes-scope-na')).toBeInTheDocument();
+      expect(
+        screen.queryByTestId('account-scopes-scope-granted'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('size prop', () => {
+    it('renders correctly with a custom size', () => {
+      const tree = renderWithAppContext(
+        <ScopeStatusIcon granted={true} size={20} />,
+      );
+      expect(tree.container).toMatchSnapshot();
+    });
+  });
+});

src/renderer/components/icons/ScopeStatusIcon.tsx

@@ -0,0 +1,45 @@
+import type { FC } from 'react';
+
+import {
+  CheckCircleFillIcon,
+  DashIcon,
+  XCircleFillIcon,
+} from '@primer/octicons-react';
+
+export interface ScopeStatusIconProps {
+  granted: boolean;
+  notApplicable?: boolean;
+  size?: number;
+  withTestId?: boolean;
+}
+
+export const ScopeStatusIcon: FC<ScopeStatusIconProps> = ({
+  granted,
+  notApplicable = false,
+  size = 14,
+  withTestId = false,
+}) => {
+  if (notApplicable) {
+    return (
+      <DashIcon
+        className="opacity-30"
+        data-testid={withTestId ? 'account-scopes-scope-na' : undefined}
+        size={size}
+      />
+    );
+  }
+
+  return granted ? (
+    <CheckCircleFillIcon
+      className="text-gitify-success"
+      data-testid={withTestId ? 'account-scopes-scope-granted' : undefined}
+      size={size}
+    />
+  ) : (
+    <XCircleFillIcon
+      className="text-gitify-danger"
+      data-testid={withTestId ? 'account-scopes-scope-missing' : undefined}
+      size={size}
+    />
+  );
+};