Skip to content

Internal developer portal teams page#2087

Merged
igorosip0v merged 40 commits into
mainfrom
internal-developer-portal-TeamsPage
Jul 15, 2026
Merged

Internal developer portal teams page#2087
igorosip0v merged 40 commits into
mainfrom
internal-developer-portal-TeamsPage

Conversation

@igorosip0v

Copy link
Copy Markdown
Contributor

PR Type

  • Regular Task
  • Bug Fix
  • QA Tests

Description

Adds an internal Admin Teams dashboard with server-driven data access and table controls.

The Teams page now supports:

  • server-side pagination, search, and sorting;
  • column visibility settings, with conditional GraphQL fields;
  • responsive desktop and mobile table layouts;
  • direct links from team identities to an admin team detail route;
  • authenticated admin-only routes and team data access.

The default ordering is team name ascending. Search, page, limit, visible columns, and sorting are represented in URL search parameters so table state is shareable and persists across navigation.

Checklist

  • I have self-reviewed this PR.
  • I have left comments in the code for clarity.
  • I have added necessary unit tests.
  • I have updated the documentation as needed.

Screen.Recording.2026-07-09.at.21.05.43.mov

igorosip0v and others added 26 commits July 6, 2026 17:24
…re Access and dev provider

- Added environment variables for admin authentication configuration in .env.example.
- Created admin authentication logic in `lib/admin-auth` with support for Cloudflare Access and a local dev provider.
- Implemented API route to retrieve authenticated admin user information.
- Developed internal dashboard page to display authenticated admin user details.
- Added unit tests for admin authentication functionality and API responses.
- Updated the `ADMIN_AUTH_DEV_GROUPS` handling in the dev provider to remove reliance on request headers.
- Adjusted related unit tests to reflect the change in group membership retrieval.
- Clarified comments in the `.env.example` file regarding local development settings.
- Replaced `notFound()` with `redirect("/unauthorized")` in `requireAdminUser` to improve user experience by redirecting unauthenticated requests to the unauthorized page.
- Updated unit tests to reflect the change in behavior, ensuring that unauthenticated requests now throw a redirect error instead of a not found error.
- Introduced `createSecurityHeadersResponse` function to handle security headers for admin routes.
- Implemented `isAdminPagePath` to identify admin paths.
- Updated the `proxy` function to return security headers for admin requests without invoking Auth0.
- Added unit tests to verify correct header settings for admin pages.
…vider

- Added `describeJwtVerifyError` function to standardize error descriptions during JWT verification failures.
- Updated the catch block in the authentication flow to log detailed error information using the new function.
- Enhanced unit tests to verify that the correct error details are logged when JWT verification fails.
…ider

- Replaced single JWKS variable with a Map to cache JWKS sets by team domain, improving efficiency.
- Updated the `getJwks` function to retrieve cached JWKS or create a new one as needed.
- Enhanced unit tests to verify caching behavior for multiple team domains.
- Updated the JSON mapping of identity-provider groups to dashboard roles in `.env.example` for clarity.
- Added detailed comments to the `AdminRole` enum in `types.ts` to describe each role's access level.
- Introduced `AdminAuthProviderName` type to improve type safety in `admin-auth` module.
- Enhanced the `requireAdminUser` function documentation to clarify its purpose and testing coverage.
- Added a new test suite to ensure all `/admin` pages call `requireAdminUser`, enforcing security standards.
- Implemented a new test suite to ensure all `/api/admin` route handlers call `authenticateAdminRequest`, enhancing security checks.
- Introduced `findAdminApiRouteFiles` function to identify relevant route files based on HTTP method exports.
- Updated existing tests to include checks for unguarded routes, ensuring compliance with authentication requirements.
…orldcoin/developer-portal into internal-developer-portal
…rdcoded default role

- Updated the admin role resolution logic to use a hardcoded default role (readonly) instead of relying on the ADMIN_AUTH_DEFAULT_ROLE environment variable.
- Removed references to ADMIN_AUTH_DEFAULT_ROLE from tests and configuration files, ensuring consistency across the codebase.
- Adjusted tests to reflect the new fallback behavior for unmapped groups.
Co-authored-by: Juan Broullon <juan.broullon@toolsforhumanity.com>
- Renamed `parseStringArray` to `parseGroupNames` to better reflect its functionality.
- Updated the group parsing logic to handle groups as objects containing `id` and `name` properties, aligning with Cloudflare's identity response format.
- Adjusted related tests to accommodate the new structure of group data.
#2078)

* feat(proxy): implement internal dashboard host handling and security enhancements

- Added support for the internal dashboard host in the proxy, allowing requests to the root path to be rewritten to /admin when the host matches the INTERNAL_DASHBOARD_HOST environment variable.
- Introduced host normalization logic to ensure case-insensitive comparisons for forwarded hosts.
- Enhanced security headers for responses to include content security policy and permissions policy.
- Updated unit tests to verify the new behavior for internal dashboard host requests and ensure proper handling of root paths.

* fix(proxy): correct root path handling for internal dashboard host

- Updated the proxy function to ensure that requests to the root path ("/") return the next response for non-internal dashboard hosts, while still allowing internal dashboard hosts to receive the appropriate rewrite response.
- This change clarifies the behavior of the proxy when handling requests to the root path, improving the overall routing logic.

* Internal developer portal UI (#2083)

* Add an option to disable posthog locally

* Implement internal dashboard's sidebar

* Enhance Admin Dashboard NavBar with responsive styles and class management

- Refactored CollapseButton to accept a className prop for better customization.
- Updated NavBar and NavBarItem components to utilize clsx for conditional styling and improved responsiveness.
- Adjusted layout styles in AdminLayout to ensure proper spacing and alignment across devices.

* Update NavBarItem component to improve active link detection for admin routes

- Enhanced the logic for determining active links in the NavBarItem component to correctly handle both "/admin" and its sub-paths.
- Ensured consistent behavior for active link styling across different navigation scenarios.

* Refactor admin dashboard layout adding header

- Introduced BackButton, ProfileBadge, and Search components for enhanced navigation and user interaction in the Admin Dashboard.
- Created a reusable UIModule component to standardize styling and layout for UI elements.
- Updated AdminLayout to integrate new components, improving the overall structure and responsiveness of the dashboard.

* Refactor Admin Dashboard components for improved styling and functionality

- Updated BackButton and ProfileBadge components to enhance layout and visual consistency.
- Introduced SearchIcon in the Search component for better user experience.
- Adjusted AdminLayout to streamline header structure and component integration.

* Enhance Admin Dashboard responsiveness with new breakpoints and styling adjustments

- Added new screen sizes ("3xl" and "4xl") to Tailwind configuration for improved responsiveness.
- Updated ProfileBadge, Search, CollapseButton, and NavBar components to utilize new breakpoints for better layout on larger screens.
- Refined AdminLayout to ensure consistent spacing and alignment across different device sizes.

* Restore the admin page guard in route wrappers
…d data handling

- Added TeamsTable component to manage team data display, including mobile and desktop views.
- Introduced columns definition for team attributes such as name, status, and metrics.
- Created supporting components: DesktopTeamsTable, MobileTeamsList, TeamIdentity, TeamMetric, and StatusBadge for better modularity.
- Implemented demo data for initial rendering and testing.
- Enhanced AdminDashboard layout for improved responsiveness and user experience.
- Added EmptyState component to handle scenarios with no teams available.
…ata fetching

- Updated TeamsTable component to require a data prop instead of using demo data.
- Modified AdminTeamsPage to fetch team data asynchronously and pass it to TeamsTable.
- Introduced GraphQL queries and a new fetchAdminTeams function to retrieve team data from the server.
- Added new GraphQL schema files for fetching admin teams and their associated data.
- Enhanced type definitions for TeamsTableProps to ensure data integrity.
- Added support for team data pagination by introducing a limit parameter in the GraphQL queries and related functions.
- Updated AdminTeamsPage to accept a limit prop and pass it to the TeamsTable component.
- Refactored fetchAdminTeams function to fetch paginated team data and aggregate counts.
- Enhanced the TeamsTable with controls for managing pagination and improved layout for better user experience.
- Added pagination support to the AdminTeamsPage by introducing a page parameter.
- Enhanced the TeamsTableControls to display current page and total pages.
- Created a new TeamsPagination component for improved user navigation through team data.
- Updated GraphQL queries to include offset for fetching paginated team data.
- Refactored fetchAdminTeams function to return current page and total pages for better data handling.
- Introduced a new ColumnSettings component to manage the visibility of team columns.
- Updated the AdminTeamsPage and related components to support dynamic column visibility based on user preferences.
- Enhanced the MobileTeamsList and TeamsTable components to conditionally render metrics and statuses based on the selected column visibility.
- Refactored GraphQL queries to include parameters for fetching specific team attributes based on visibility settings.
- Added utility functions for serializing and parsing column visibility states.
- Introduced a TeamsSearch component for searching teams by name or ID.
- Updated AdminTeamsPage and related components to handle search queries.
- Enhanced fetchAdminTeams function to filter teams based on search criteria.
- Refactored GraphQL queries to include search parameters for improved data fetching.
- Updated TeamsTableControls to integrate the new search feature.
…al segments

- Added token parsing logic for team search queries to support various fields and operators.
- Implemented visual segment generation for improved user experience in the TeamsSearch component.
- Updated fetch-teams logic to utilize parsed search tokens for filtering teams based on search criteria.
- Enhanced TeamsSearch component with new features for handling input and displaying search suggestions.
- Updated TeamsTableControls to utilize a grid layout for better alignment and spacing.
- Enhanced TeamsPagination with responsive grid columns and improved visibility of pagination elements.
- Refactored TeamsSearch to allow full-width input while maintaining responsive design.
- Adjusted CSS classes for better mobile and desktop compatibility across components.
- Added sorting capabilities to the TeamsTable component, allowing users to sort teams by various fields such as name, status, members count, and creation date.
- Introduced a new sorting utility module to handle sorting logic and state management.
- Updated AdminTeamsPage and related components to support sorting parameters in team data fetching.
- Enhanced DesktopTeamsTable to display sortable headers and manage sort state visually.
- Refactored GraphQL queries to include dynamic orderBy parameters based on user-selected sorting options.
- Introduced a new AdminTeamPage component for displaying individual team details.
- Updated the page routing to require admin authentication for accessing team pages.
- Enhanced MobileTeamsList and TeamIdentity components with links to team detail pages.
- Refactored DesktopTeamsTable to improve header cell rendering and maintain code consistency.
- Simplified GraphQL queries for fetching team data by consolidating parameters.
- Improved overall layout and responsiveness of team management components.
…minTeamPage

- Updated AdminTeamsPage and AdminTeamPage to improve layout with a grid structure for better alignment.
- Enhanced typography with updated font sizes and weights for headings and text descriptions.
- Added descriptive text to provide context for users browsing team information.
- Adjusted padding and margins for improved spacing and visual appeal.
@igorosip0v
igorosip0v requested a review from Takaros999 July 9, 2026 19:08
@igorosip0v igorosip0v self-assigned this Jul 9, 2026
Base automatically changed from internal-developer-portal to main July 10, 2026 11:39
@Takaros999

Copy link
Copy Markdown
Contributor

@codex review

@Takaros999 Takaros999 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8ead91c1ea

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +27 to +29
app(where: { deleted_at: { _is_null: true } })
@include(if: $includeAppsCount) {
team_id

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Count apps without the service-role row cap

When the Apps column is visible (the default), this server query runs through getAPIServiceGraphqlClient(), so it uses the Hasura service role; that role's app select permission is capped with limit: 1 in hasura/metadata/databases/default/tables/public_app.yaml. This root app selection can therefore return only one active app total, and appsByTeamId turns that truncated result into appsCount, causing almost every team to show 0/1 instead of its real app count. Use an aggregate count or another query path that is not capped by the service-role row limit.

Useful? React with 👍 / 👎.

* feat(auth): add internal_dashboard_readonly role and permissions

- Introduced a new role, internal_dashboard_readonly, with specific permissions across multiple tables including public_api_key, public_app, public_invite, public_membership, and public_team.
- Updated the GraphQL schema introspection to include the new role in the disabled_for_roles list.
- Enhanced the admin authentication system to support the new role, allowing for more granular access control in the internal dashboard.
- Updated environment variables and authentication logic to reflect changes in role management and access levels.

* feat(admin-auth): enhance admin authentication and proxy handling

- Introduced `hasAdminAuthenticationEvidence` function to validate admin authentication across different providers.
- Updated the `proxy` function to handle admin page and API requests, ensuring proper authorization and redirection for unauthorized access.
- Added new utility functions to identify admin paths and create appropriate responses for unauthorized requests.
- Enhanced unit tests to cover new authentication logic and proxy behavior for admin routes.
- Refactored admin authentication providers to implement the new evidence-checking mechanism.

* refactor(NavBar): replace CollapseIcon and ExpandIcon with PanelLeft and PanelRight from lucide-react

- Updated CollapseButton component to use new icons for collapse/expand functionality.
- Adjusted NavBar styles for better alignment and layout consistency.

* fix format

* refactor: improve cloudflare-access readability

* refactor: rename environment variables and update parsing logic for Cloudflare access levels

* Internal developer portal users (#2105)

* feat(users): implement user management features

- Added user column visibility options and parsing logic.
- Created user table components including mobile and desktop views.
- Implemented pagination and search functionalities for user management.
- Introduced sorting capabilities for user data.
- Enhanced user identity display with links to user details.
- Updated table controls for better user experience in managing user data.

* feat(teams): enhance admin teams query with aggregate metrics and pending invites

- Removed unused variable for pending invites count in the FetchAdminTeams query.
- Added memberships, apps, and API keys aggregate fields to the FetchAdminTeams query.
- Introduced FetchAdminTeamPendingInvites query to retrieve pending invites for specified team IDs.
- Updated the fetchAdminTeamsPage function to utilize new aggregate data and handle pending invites.
- Created unit tests to validate the new aggregate metrics and pending invites functionality.

* feat(apps): enhance admin apps management with new features (#2106)

* feat(apps): enhance admin apps management with new features

- Added new select permissions for internal dashboard readonly role in public_app_metadata.yaml.
- Updated select permissions in public_app.yaml to include created_at and id fields.
- Implemented AppsTable and AppsTableControls components for improved app listing and management.
- Introduced pagination, sorting, and search functionalities for better app data handling.
- Created utility functions for managing app column visibility and search queries.
- Added GraphQL queries for fetching admin apps with customizable fields and filters.
- Developed unit tests for query mapping and search functionalities.

* Quote verification status values in GraphQL filters

* Internal Dashboard team/:id page (#2109)

* feat(teams): enhance team management with new components and GraphQL queries

- Added new select permissions for internal_dashboard_readonly role in public_api_key.yaml, public_invite.yaml, and public_membership.yaml.
- Introduced TeamAppsPanel and TeamMembersPanel components for improved management of team apps and members.
- Implemented infinite scrolling for app and member lists with pagination and search functionalities.
- Created GraphQL queries for fetching team apps and members with customizable filters and pagination.
- Updated FieldSearch and LimitSelector components to support dynamic query parameters for better user experience.

* feat(users): Implement user/:id page (#2110)

* feat(users): Implement user/:id page

- Introduced UserAppsPanel and UserTeamsPanel components for displaying user-related apps and teams.
- Implemented infinite scrolling and search functionalities for app and team lists.
- Added GraphQL queries for fetching user apps and teams with pagination support.
- Updated AdminUserPage to integrate new panels and display user details more comprehensively.
- Enhanced user detail fetching logic to include additional user metrics and related resources.

* feat(admin-apps): Implement app/:id page (#2111)

* feat(admin-apps): Implement app/:id page

- Introduced `fetchAdminAppDetails` function to retrieve app details, draft metadata, and verification status.
- Created GraphQL query `FetchAdminAppDetails` for fetching app information based on app ID.
- Developed `AdminAppPage` component to display app details, including metadata workflow and team information.
- Added unit tests for the fetching logic to ensure correct mapping of app identity and metadata.

* feat(home): Implement home page for the internal developer portal (#2112)

- Added `fetchAdminGlobalSearch` function to handle search queries for apps, teams, and users.
- Created GraphQL queries for fetching search results based on user input.
- Developed API route for handling GET requests to the search endpoint.
- Introduced `Search` component with user interface for input and displaying results.
- Implemented input validation and error handling for search queries.
- Enhanced admin dashboard with a new search feature to improve navigation and resource access.
igorosip0v and others added 5 commits July 15, 2026 16:42
Share token parsing across admin searches and reject malformed date and status filters before they reach Hasura.

Co-authored-by: Cursor <cursoragent@cursor.com>
Add unique ID tie-breakers to detail list queries so offset pagination cannot skip or duplicate tied records.

Co-authored-by: Cursor <cursoragent@cursor.com>
Restore cumulative detail lists from URL state and serialize panel and search parameter updates.

Co-authored-by: Cursor <cursoragent@cursor.com>
Fetch queue counts separately from five-item previews to keep dashboard work bounded as datasets grow.

Co-authored-by: Cursor <cursoragent@cursor.com>
Clear stale global search selection while requests debounce and show the Created field on mobile app cards when enabled.

Co-authored-by: Cursor <cursoragent@cursor.com>
@igorosip0v

Copy link
Copy Markdown
Contributor Author

@codex reivew

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1a79fffdcf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread web/scenes/Admin/graphql/server/fetch-admin-home.gql Outdated
Comment thread web/components/AdminDashboard/common/search-tokens.ts
@igorosip0v
igorosip0v merged commit 74120f3 into main Jul 15, 2026
13 checks passed
@igorosip0v
igorosip0v deleted the internal-developer-portal-TeamsPage branch July 15, 2026 16:18
Gr1dlock added a commit that referenced this pull request Jul 16, 2026
Reconciles 11 new main commits (incl. #2095 Tailwind v4 migration, #2087
internal teams page, #2092 miniapp redesign, #2090 atomic invite consume)
with the Apollo Client 4 migration.

Only 2 conflicts (most auto-merged, incl. package.json keeping both AC4 and
Tailwind-v4 deps):
- pnpm-lock.yaml: regenerated via pnpm install against the merged package.json
  (kept AC4 @apollo/client ^4, added @tailwindcss/postcss + tailwindcss 4,
  tailwind-merge 3, @tanstack/react-table; dropped autoprefixer).
- PortalV3 MiniApp/Notifications: took main's #2092 redesign, re-applied AC4
  (useFetchNotificationAppMetadataQuery -> useQuery(FetchNotificationAppMetadataDocument)).
- Re-plumbed pv3-mini-app-notifications unit test to mock @apollo/client/react.

Verified: tsc clean (0), prettier clean, 117 jest suites / 754 tests pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants