feat: add runtime PAT entry and user avatar by matejvasek · Pull Request #15 · functions-dev/ocp-console-plugin

matejvasek · 2026-04-23T10:29:57Z

Summary

Replace compile-time PAT injection (webpack DefinePlugin) with runtime entry via a modal dialog, storing the PAT in sessionStorage
Add custom Octokit authStrategy that reads the token lazily per-request from sessionStorage
Add PatModal component (PAT entry with validation feedback) and UserAvatar component (connection status in page header)
Add shared useUserAvatar hook managing PAT state, sessionStorage persistence, and modal lifecycle
Extend EmptyState with hint text and disabled Create button when unauthenticated
Wire all three views (list, create, edit) with the avatar; list page auto-opens the modal and skips GitHub API calls when no PAT is stored

Test plan

62 tests pass (yarn test), zero lint errors (yarn lint), zero type errors in src/ (npx tsc --noEmit)
Open list page without PAT: modal appears, Create button is disabled, no GitHub API calls
Enter valid PAT: modal closes, avatar shows username, function repos load
Enter invalid PAT: error alert shown in modal
Navigate to create/edit pages: avatar shows username (non-clickable)
Refresh page: PAT and user restored from sessionStorage, no modal
Verify no __GITHUB_PAT__ references remain in src/ or webpack.config.ts

Demo

Screencast.From.2026-04-27.22-09-24.mp4

🤖 Generated with Claude Code

twoGiants

First batch. Second batch follows after the next call 🤙 😸

twoGiants

Next batch.

twoGiants

Ok, last batch.

twoGiants · 2026-04-24T13:30:41Z

Lets update this after approval.

Simplify EmptyState to a single isCreateDisabled prop. When disabled, show only the PAT hint text instead of both messages, and remove the redundant Tooltip from the disabled button. Remove Tooltip from the table-view Create button in FunctionsListPage as well. Protect FunctionCreatePage against unauthenticated access via URL by showing a warning alert and hiding the form when no PAT is stored. Clean up UserAvatar: remove all useCallback wrappers, remove unused logout, use guard pattern in readStoredUser, extract usePatModal hook, shrink modal to small variant, disable Cancel and modal close while validating. Extract shared errorMessage utility. Remove stale question from features.json and update i18n keys. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Matej Vašek <matejvasek@gmail.com>

matejvasek · 2026-04-27T20:14:51Z

How it looks now:
https://github.com/user-attachments/assets/830d6903-1598-471e-a635-14c3b124d474

twoGiants

Ok, you and Claude did great! I would approve and merge.

Can you open a cleanup follow up with the fixes I mention in the comments below?

I'd like to have this PR in my branch for a full e2e flow test.

twoGiants · 2026-04-28T13:03:16Z

+    it('disables Cancel button while validating', async () => {
+      const user = userEvent.setup();
+      let resolveConnect: () => void;
+      mockFetchUserInfo.mockReturnValue(
+        new Promise<void>((resolve) => {
+          resolveConnect = resolve;
+        }),
+      );
+
+      renderWithContext(<UserAvatar enableReconnect />);
+
+      await user.type(screen.getByLabelText('Personal Access Token'), 'ghp_slow');
+      await user.click(screen.getByRole('button', { name: 'Connect' }));
+
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
+
+      resolveConnect!();
+    });


No need to resolve as we don't assert after resolution. You can remove resolveConnect and change the mockReturnValue to new Promise(() => {}). Makes the test a bit simpler.

twoGiants · 2026-04-28T13:07:22Z


 export default function FunctionCreatePage() {
  const { t } = useTranslation('plugin__console-functions-plugin');
+  const isConnected = !!sessionStorage.getItem(PAT_KEY);


No, this is a hack. Use context for that. Same pattern as in the List page:

function useFunctionListPage(): { // ... isConnectedToForge: boolean; } { const isConnectedToForge = useContext(ForgeConnectionContext).isActive;

twoGiants · 2026-04-28T13:11:03Z

+jest.mock('../components/UserAvatar', () => ({
+  UserAvatar: ({ enableReconnect }: { enableReconnect: boolean }) => (
+    <span data-testid="user-avatar">{enableReconnect ? 'reconnect' : 'no-reconnect'}</span>
+  ),
+}));


I don't think you have to mock the component here, only the services. If you can do without mocking it, do it without.

twoGiants · 2026-04-28T13:13:35Z

+jest.mock('../components/UserAvatar', () => ({
+  UserAvatar: ({ enableReconnect }: { enableReconnect: boolean }) => (
+    <span data-testid="user-avatar">{enableReconnect ? 'reconnect' : 'no-reconnect'}</span>
+  ),
+}));


Don't mock if you don't have to.

Replace compile-time PAT injection (webpack DefinePlugin, __GITHUB_PAT__) with runtime entry via a modal dialog. PAT is stored in sessionStorage and read lazily per-request through a cached Octokit getter. UserAvatar component renders in ListPageHeader on every page. On the list page it is clickable (opens PatModal to connect or reconnect); on create and edit pages it is read-only. PatModal auto-opens on first visit when no PAT is stored. Cancel and modal close are disabled while validation is in flight. ForgeConnectionProvider context lets FunctionsListPage react when the user connects. EmptyState shows a PAT hint and disables the Create button when not connected. FunctionCreatePage hides the form entirely and shows a warning alert when accessed without a PAT. GithubService refactored: single Octokit instance with a cached getter that re-creates it only when the token changes. fetchUserInfo added to SourceControlService interface (forge-agnostic). GitHubUser renamed to ForgeUser. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Matej Vašek <matejvasek@gmail.com>

matejvasek changed the title ~~feat: add runtime PAT entry and user avatar~~ feat: add runtime PAT entry and user avatar [draft C] Apr 23, 2026

twoGiants requested changes Apr 23, 2026

View reviewed changes

twoGiants reviewed Apr 23, 2026

View reviewed changes

Comment thread src/components/EmptyState.tsx Outdated

Comment thread src/components/EmptyState.tsx

Comment thread src/components/UserAvatar.tsx Outdated

Comment thread src/services/types.ts Outdated

Comment thread src/hooks/useUserAvatar.ts Outdated

twoGiants requested changes Apr 24, 2026

View reviewed changes

matejvasek changed the title ~~feat: add runtime PAT entry and user avatar [draft C]~~ feat: add runtime PAT entry and user avatar Apr 27, 2026

matejvasek requested a review from twoGiants April 27, 2026 20:14

matejvasek marked this pull request as ready for review April 27, 2026 20:23

twoGiants approved these changes Apr 28, 2026

View reviewed changes

matejvasek force-pushed the 011-feat-github-pat-avatar-ver-C branch from d8e19cb to 1e51bf1 Compare April 28, 2026 13:55

matejvasek merged commit 0d93997 into master Apr 28, 2026
4 checks passed

Conversation

matejvasek commented Apr 23, 2026 • edited by twoGiants Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Demo

Uh oh!

twoGiants left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

twoGiants left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

twoGiants left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

twoGiants Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matejvasek commented Apr 27, 2026

Uh oh!

twoGiants left a comment

Choose a reason for hiding this comment

Uh oh!

twoGiants Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

twoGiants Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

twoGiants Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

twoGiants Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

matejvasek commented Apr 23, 2026 •

edited by twoGiants

Loading