refactor: consolidate UserAvatar, PatModal, hook

UserAvatar, PatModal, and useUserAvatar were separate public modules.
Consumers had to wire them together manually, and connection state
(whether a PAT was set) lived in the hook with no way to share it
across the component tree.

Merge PatModal and useUserAvatar into UserAvatar as private internals.
Add ForgeConnectionProvider with React context so that FunctionsListPage
can react when the user connects. Split FunctionsListPage into a
provider wrapper and a content component (required because useContext
resolves against ancestors, not descendants).

Update all tests to exercise the new public API (enableReconnect prop)
instead of testing deleted internals directly.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: twoGiants

.vscode/settings.json

@@ -16,8 +16,11 @@
   },
   "json.schemas": [
     {
-      "fileMatch": ["**/console-extensions.json"],
+      "fileMatch": [
+        "**/console-extensions.json"
+      ],
       "url": "./node_modules/@openshift-console/dynamic-plugin-sdk-webpack/schema/console-extensions.json"
     }
-  ]
+  ],
+  "typescript.preferences.importModuleSpecifier": "relative"
 }

src/components/PatModal.test.tsx

@@ -1,56 +1,158 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UserAvatar } from './UserAvatar';
+import { GithubService } from '../services/source-control/GithubService';
+import { PAT_KEY, USER_KEY } from '../services/types';
+import { ForgeConnectionContext } from '../context/ForgeConnectionProvider';
+import { ReactNode } from 'react';
 
 jest.mock('react-i18next', () => ({
   useTranslation: () => ({ t: (key: string) => key }),
 }));
 
-afterEach(() => {
-  jest.restoreAllMocks();
-});
+jest.mock('../services/source-control/GithubService', () => ({
+  GithubService: { validateToken: jest.fn() },
+}));
+
+const mockValidateToken = GithubService.validateToken as jest.Mock;
+
+const testUser = { login: 'twoGiants', avatarUrl: 'https://example.com/avatar.png' };
+
+function renderWithContext(
+  ui: ReactNode,
+  contextValue = { isActive: false, connectToForge: jest.fn() },
+) {
+  return render(
+    <ForgeConnectionContext.Provider value={contextValue}>{ui}</ForgeConnectionContext.Provider>,
+  );
+}
 
 describe('UserAvatar', () => {
-  it('renders "Connect to GitHub" with KeyIcon when user is null', () => {
-    render(<UserAvatar user={null} isClickable={false} onClick={jest.fn()} />);
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
 
-    expect(screen.getByText('Connect to GitHub')).toBeInTheDocument();
+  afterAll(() => {
+    sessionStorage.clear();
   });
+  describe('rendering', () => {
+    it('renders "Connect to GitHub" when no user is stored', () => {
+      renderWithContext(<UserAvatar enableReconnect={false} />);
+
+      expect(screen.getByText('Connect to GitHub')).toBeInTheDocument();
+    });
+
+    it('renders username when user is stored in sessionStorage', () => {
+      sessionStorage.setItem(PAT_KEY, 'ghp_test');
+      sessionStorage.setItem(USER_KEY, JSON.stringify(testUser));
+
+      renderWithContext(<UserAvatar enableReconnect />);
+
+      expect(screen.getByText('twoGiants')).toBeInTheDocument();
+    });
+
+    it('button is clickable when enableReconnect is true', async () => {
+      const user = userEvent.setup();
+      sessionStorage.setItem(PAT_KEY, 'ghp_test');
+      sessionStorage.setItem(USER_KEY, JSON.stringify(testUser));
+
+      renderWithContext(<UserAvatar enableReconnect />);
+
+      const button = screen.getByRole('button', { name: 'twoGiants' });
+      await user.click(button);
+
+      expect(screen.getByText('Personal Access Token')).toBeInTheDocument();
+    });
+
+    it('button is disabled when enableReconnect is false', async () => {
+      const user = userEvent.setup();
 
-  it('renders username with UserIcon when user is set', () => {
-    render(
-      <UserAvatar
-        user={{ login: 'twoGiants', avatarUrl: 'https://example.com/avatar.png' }}
-        isClickable={false}
-        onClick={jest.fn()}
-      />,
-    );
+      renderWithContext(<UserAvatar enableReconnect={false} />);
 
-    expect(screen.getByText('twoGiants')).toBeInTheDocument();
+      const button = screen.getByRole('button', { name: 'Connect to GitHub' });
+      expect(button).toBeDisabled();
+
+      await user.click(button);
+      expect(screen.queryByText('Personal Access Token')).not.toBeInTheDocument();
+    });
   });
 
-  it('clickable renders as button, calls onClick on click', async () => {
-    const user = userEvent.setup();
-    const onClick = jest.fn();
+  describe('modal auto-open', () => {
+    it('opens modal automatically when enableReconnect is true and no PAT stored', () => {
+      renderWithContext(<UserAvatar enableReconnect />);
+
+      expect(screen.getByText('Personal Access Token')).toBeInTheDocument();
+    });
+
+    it('does not auto-open modal when PAT is already stored', () => {
+      sessionStorage.setItem(PAT_KEY, 'ghp_test');
+      sessionStorage.setItem(USER_KEY, JSON.stringify(testUser));
+
+      renderWithContext(<UserAvatar enableReconnect />);
 
-    render(<UserAvatar user={null} isClickable={true} onClick={onClick} />);
+      expect(screen.queryByText('Personal Access Token')).not.toBeInTheDocument();
+    });
 
-    const button = screen.getByRole('button', { name: 'Connect to GitHub' });
-    await user.click(button);
+    it('does not auto-open modal when enableReconnect is false', () => {
+      renderWithContext(<UserAvatar enableReconnect={false} />);
 
-    expect(onClick).toHaveBeenCalled();
+      expect(screen.queryByText('Personal Access Token')).not.toBeInTheDocument();
+    });
   });
 
-  it('non-clickable renders as aria-disabled button that does not call onClick', async () => {
-    const u = userEvent.setup();
-    const onClick = jest.fn();
+  describe('PAT modal', () => {
+    it('Connect button disabled when input is empty', () => {
+      renderWithContext(<UserAvatar enableReconnect />);
+
+      expect(screen.getByRole('button', { name: 'Connect' })).toBeDisabled();
+    });
+
+    it('calls validateToken with PAT and updates UI on successful connect', async () => {
+      const user = userEvent.setup();
+      const connectToForge = jest.fn();
+      mockValidateToken.mockResolvedValue(testUser);
+
+      renderWithContext(<UserAvatar enableReconnect />, { isActive: false, connectToForge });
+
+      await user.type(screen.getByLabelText('Personal Access Token'), 'ghp_valid');
+      await user.click(screen.getByRole('button', { name: 'Connect' }));
+
+      await waitFor(() => {
+        expect(mockValidateToken).toHaveBeenCalledWith('ghp_valid');
+      });
+
+      expect(screen.getByText('twoGiants')).toBeInTheDocument();
+      expect(sessionStorage.getItem(PAT_KEY)).toBe('ghp_valid');
+      expect(JSON.parse(sessionStorage.getItem(USER_KEY)!)).toEqual(testUser);
+      expect(connectToForge).toHaveBeenCalled();
+    });
+
+    it('shows error alert when validateToken rejects', async () => {
+      const user = userEvent.setup();
+      mockValidateToken.mockRejectedValue(new Error('Bad credentials'));
+
+      renderWithContext(<UserAvatar enableReconnect />);
+
+      await user.type(screen.getByLabelText('Personal Access Token'), 'ghp_bad');
+      await user.click(screen.getByRole('button', { name: 'Connect' }));
+
+      expect(await screen.findByText('Bad credentials')).toBeInTheDocument();
+    });
+
+    it('closes modal when Cancel is clicked', async () => {
+      const user = userEvent.setup();
+
+      renderWithContext(<UserAvatar enableReconnect />);
 
-    render(<UserAvatar user={null} isClickable={false} onClick={onClick} />);
+      expect(screen.getByText('Personal Access Token')).toBeInTheDocument();
 
-    const button = screen.getByRole('button', { name: 'Connect to GitHub' });
-    expect(button).toHaveAttribute('aria-disabled', 'true');
+      await user.click(screen.getByRole('button', { name: 'Cancel' }));
 
-    await u.click(button);
-    expect(onClick).not.toHaveBeenCalled();
+      expect(screen.queryByText('Personal Access Token')).not.toBeInTheDocument();
+    });
   });
 });