feat(settings): add API Access page for Plus token management

packages/shared/src/components/profile/ProfileSettingsMenu.tsx

@@ -244,6 +244,11 @@ const useAccountPageItems = () => {
               icon: EmbedIcon,
               href: `${settingsUrl}/customization/integrations`,
             },
+            api: {
+              title: 'API Access',
+              icon: TerminalIcon,
+              href: `${settingsUrl}/api`,
+            },
           },
         },
         help: {

packages/shared/src/graphql/personalAccessTokens.ts

@@ -0,0 +1,65 @@
+import { gql } from 'graphql-request';
+
+export interface PersonalAccessToken {
+  id: string;
+  name: string;
+  tokenPrefix: string;
+  createdAt: Date;
+  expiresAt: Date | null;
+  lastUsedAt: Date | null;
+}
+
+export interface PersonalAccessTokenCreated extends PersonalAccessToken {
+  token: string;
+}
+
+export interface PersonalAccessTokensData {
+  personalAccessTokens: PersonalAccessToken[];
+}
+
+export interface CreatePersonalAccessTokenData {
+  createPersonalAccessToken: PersonalAccessTokenCreated;
+}
+
+export interface CreatePersonalAccessTokenInput {
+  name: string;
+  expiresInDays?: number | null;
+}
+
+export interface RevokePersonalAccessTokenData {
+  revokePersonalAccessToken: { _: boolean };
+}
+
+export const PERSONAL_ACCESS_TOKENS_QUERY = gql`
+  query PersonalAccessTokens {
+    personalAccessTokens {
+      id
+      name
+      tokenPrefix
+      createdAt
+      expiresAt
+      lastUsedAt
+    }
+  }
+`;
+
+export const CREATE_PERSONAL_ACCESS_TOKEN_MUTATION = gql`
+  mutation CreatePersonalAccessToken($input: CreatePersonalAccessTokenInput!) {
+    createPersonalAccessToken(input: $input) {
+      id
+      name
+      token
+      tokenPrefix
+      createdAt
+      expiresAt
+    }
+  }
+`;
+
+export const REVOKE_PERSONAL_ACCESS_TOKEN_MUTATION = gql`
+  mutation RevokePersonalAccessToken($id: ID!) {
+    revokePersonalAccessToken(id: $id) {
+      _
+    }
+  }
+`;

packages/shared/src/hooks/api/usePersonalAccessTokens.ts

@@ -0,0 +1,73 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { gqlClient } from '../../graphql/common';
+import {
+  PERSONAL_ACCESS_TOKENS_QUERY,
+  CREATE_PERSONAL_ACCESS_TOKEN_MUTATION,
+  REVOKE_PERSONAL_ACCESS_TOKEN_MUTATION,
+} from '../../graphql/personalAccessTokens';
+import type {
+  PersonalAccessTokensData,
+  CreatePersonalAccessTokenData,
+  CreatePersonalAccessTokenInput,
+  RevokePersonalAccessTokenData,
+} from '../../graphql/personalAccessTokens';
+import { generateQueryKey, RequestKey, StaleTime } from '../../lib/query';
+import { useAuthContext } from '../../contexts/AuthContext';
+
+export const personalAccessTokensQueryOptions = () => ({
+  queryKey: generateQueryKey(RequestKey.PersonalAccessTokens),
+  queryFn: async () => {
+    const data = await gqlClient.request<PersonalAccessTokensData>(
+      PERSONAL_ACCESS_TOKENS_QUERY,
+    );
+    return data.personalAccessTokens;
+  },
+  staleTime: StaleTime.OneMinute,
+});
+
+export const usePersonalAccessTokens = () => {
+  const { user } = useAuthContext();
+
+  return useQuery({
+    ...personalAccessTokensQueryOptions(),
+    enabled: !!user,
+  });
+};
+
+export const useCreatePersonalAccessToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (input: CreatePersonalAccessTokenInput) => {
+      const data = await gqlClient.request<CreatePersonalAccessTokenData>(
+        CREATE_PERSONAL_ACCESS_TOKEN_MUTATION,
+        { input },
+      );
+      return data.createPersonalAccessToken;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: generateQueryKey(RequestKey.PersonalAccessTokens),
+      });
+    },
+  });
+};
+
+export const useRevokePersonalAccessToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const data = await gqlClient.request<RevokePersonalAccessTokenData>(
+        REVOKE_PERSONAL_ACCESS_TOKEN_MUTATION,
+        { id },
+      );
+      return data.revokePersonalAccessToken;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: generateQueryKey(RequestKey.PersonalAccessTokens),
+      });
+    },
+  });
+};

packages/shared/src/lib/query.ts

@@ -239,6 +239,7 @@ export enum RequestKey {
   UserWorkspacePhotos = 'user_workspace_photos',
   Gear = 'gear',
   GearSearch = 'gear_search',
+  PersonalAccessTokens = 'personal_access_tokens',
 }
 
 export const getPostByIdKey = (id: string): QueryKey => [RequestKey.Post, id];