feat(app): organization access token management ui (#6556)

Author: n1ru4l

.changeset/neat-ladybugs-pay.md

@@ -0,0 +1,16 @@
+---
+'hive': minor
+---
+
+Add organization access tokens; a new way to issue access tokens for performing actions with the CLI
+and doing usage reporting.
+
+**Breaking Change:** The `usage` service now requires environment variables for Postgres
+(`POSTGRES_SSL`, `POSTGRES_HOST`, `POSTGRES_PORT`, `POSTGRES_DB`, `POSTGRES_USER`,
+`POSTGRES_PASSWORD`) and Redis (`REDIS_HOST`, `REDIS_PORT`, `REDIS_PASSWORD`, `REDIS_TLS_ENABLED`).
+
+For more information please refer to the organization access token documentation.
+
+- [Product Update: Organization-Level Access Tokens for Enhanced Security & Flexibility](https://the-guild.dev/graphql/hive/product-updates/2025-03-10-new-access-tokens)
+- [Migration Guide: Moving from Registry Access Tokens to Access Tokens](https://the-guild.dev/graphql/hive/docs/migration-guides/organization-access-tokens)
+- [Access Token Documentation](https://the-guild.dev/graphql/hive/docs/management/access-tokens)

integration-tests/tests/api/organization-access-tokens.spec.ts

@@ -129,7 +129,7 @@ test.concurrent('create: failure invalid title', async ({ expect }) => {
     {
       details: {
         description: null,
-        title: Can only contain letters, numbers, " ", '_', and '-'.,
+        title: Can only contain letters, numbers, " ", "_", and "-".,
       },
       message: Invalid input provided.,
     }

integration-tests/tests/api/organization/members.spec.ts

@@ -11,6 +11,7 @@ test.concurrent('owner of an organization should have all scopes', async ({ expe
     [
       organization:describe,
       support:manageTickets,
+      accessToken:modify,
       organization:modifySlug,
       auditLog:export,
       organization:delete,

packages/services/api/src/modules/organization/lib/organization-access-token-permissions.ts

@@ -18,14 +18,14 @@ export const permissionGroups: Array<PermissionGroup> = [
     permissions: [
       {
         id: 'project:describe',
-        title: 'View project',
+        title: 'Describe project',
         description: 'Fetch information about the specified projects.',
       },
     ],
   },
   {
-    id: 'targets',
-    title: 'Targets',
+    id: 'usage-reporting',
+    title: 'Usage Reporting',
     permissions: [
       {
         id: 'usage:report',

packages/services/api/src/modules/organization/lib/organization-member-permissions.ts

@@ -17,6 +17,13 @@ export const permissionGroups: Array<PermissionGroup> = [
         title: 'Access support tickets',
         description: 'Member can access, create and reply to support tickets.',
       },
+      {
+        id: 'accessToken:modify',
+        title: 'Manage organization access tokens',
+        description: 'Member can create and delete organization access tokens.',
+        warning:
+          'Granting a role the ability to manage members enables it to elevate its own permissions.',
+      },
       {
         id: 'organization:modifySlug',
         title: 'Update organization slug',
@@ -266,7 +273,6 @@ assertAllRulesAreAssigned([
   'appDeployment:publish',
   'appDeployment:retire',
   'usage:report',
-  'accessToken:modify',
 ]);
 
 /**

packages/services/api/src/modules/organization/module.graphql.ts

@@ -88,6 +88,7 @@ export default gql`
     description: String
     permissions: [String!]!
     resources: ResourceAssignment!
+    firstCharacters: String!
     createdAt: DateTime!
   }
 
@@ -320,9 +321,17 @@ export default gql`
     """
     availableOrganizationPermissionGroups: [PermissionGroup!]!
     """
+    Whether the viewer can manage access tokens.
+    """
+    viewerCanManageAccessTokens: Boolean!
+    """
     Paginated organization access tokens.
     """
     accessTokens(first: Int, after: String): OrganizationAccessTokenConnection!
+    """
+    Get organization access token by id.
+    """
+    accessToken(id: ID!): OrganizationAccessToken
   }
 
   type OrganizationAccessTokenEdge {

packages/services/api/src/modules/organization/providers/organization-access-tokens.ts

@@ -31,7 +31,7 @@ import {
 const TitleInputModel = z
   .string()
   .trim()
-  .regex(/^[ a-zA-Z0-9_-]+$/, `Can only contain letters, numbers, " ", '_', and '-'.`)
+  .regex(/^[ a-zA-Z0-9_-]+$/, 'Can only contain letters, numbers, " ", "_", and "-".')
   .min(2, 'Minimum length is 2 characters.')
   .max(100, 'Maximum length is 100 characters.');
 
@@ -305,6 +305,30 @@ export class OrganizationAccessTokens {
       },
     };
   }
+
+  async get(args: { organizationId: string; id: string }) {
+    await this.session.assertPerformAction({
+      organizationId: args.organizationId,
+      params: { organizationId: args.organizationId },
+      action: 'accessToken:modify',
+    });
+
+    const row = await this.pool.maybeOne<unknown>(sql` /* OrganizationAccessTokens.getPaginated */
+      SELECT
+        ${organizationAccessTokenFields}
+      FROM
+        "organization_access_tokens"
+      WHERE
+        "id" = ${args.id}
+        AND "organization_id" = ${args.organizationId}
+    `);
+
+    if (row === null) {
+      return null;
+    }
+
+    return OrganizationAccessTokenModel.parse(row);
+  }
 }
 
 /**

packages/services/api/src/modules/organization/resolvers/Organization.ts

@@ -9,6 +9,7 @@ import type { OrganizationResolvers } from './../../../__generated__/types';
 
 export const Organization: Pick<
   OrganizationResolvers,
+  | 'accessToken'
   | 'accessTokens'
   | 'availableMemberPermissionGroups'
   | 'availableOrganizationPermissionGroups'
@@ -26,6 +27,7 @@ export const Organization: Pick<
   | 'viewerCanAssignUserRoles'
   | 'viewerCanDelete'
   | 'viewerCanExportAuditLogs'
+  | 'viewerCanManageAccessTokens'
   | 'viewerCanManageInvitations'
   | 'viewerCanManageRoles'
   | 'viewerCanModifySlug'
@@ -142,6 +144,13 @@ export const Organization: Pick<
           organizationId: organization.id,
         },
       }),
+      session.canPerformAction({
+        action: 'accessToken:modify',
+        organizationId: organization.id,
+        params: {
+          organizationId: organization.id,
+        },
+      }),
     ]).then(result => result.some(Boolean));
   },
   viewerCanSeeMembers: async (organization, _arg, { session }) => {
@@ -203,4 +212,19 @@ export const Organization: Pick<
       after: args.after ?? null,
     });
   },
+  viewerCanManageAccessTokens: async (organization, _arg, { session }) => {
+    return session.canPerformAction({
+      organizationId: organization.id,
+      action: 'accessToken:modify',
+      params: {
+        organizationId: organization.id,
+      },
+    });
+  },
+  accessToken: async (organization, args, { injector }) => {
+    return injector.get(OrganizationAccessTokens).get({
+      organizationId: organization.id,
+      id: args.id,
+    });
+  },
 };

packages/services/storage/src/index.ts

@@ -5207,7 +5207,6 @@ export function findTargetBySlug(deps: { pool: DatabasePool }) {
       return null;
     }
 
-    // Consider adding error handling similar to what was suggested for findTargetById.
     return TargetWithOrgIdModel.parse(data);
   };
 }

packages/web/app/package.json

@@ -52,6 +52,7 @@
     "@sentry/node": "7.120.2",
     "@sentry/react": "7.120.2",
     "@sentry/types": "7.120.2",
+    "@stepperize/react": "5.1.0",
     "@storybook/addon-essentials": "8.4.7",
     "@storybook/addon-interactions": "8.4.7",
     "@storybook/addon-links": "8.4.7",