feat: manage api keys permission in form

src/components/developers/RotateApiKeyDialog.tsx

@@ -194,7 +194,7 @@ export const RotateApiKeyDialog = forwardRef<
               formikProps={formikProps}
             />
             {!isPremium && (
-              <div className="flex w-full flex-row justify-between gap-2 rounded-xl bg-grey-100 px-6 py-4">
+              <div className="flex w-full flex-row items-center justify-between gap-2 rounded-xl bg-grey-100 px-6 py-4">
                 <div className="flex flex-col">
                   <div className="flex flex-row items-center gap-2">
                     <Typography variant="bodyHl" color="grey700">

src/components/form/Checkbox/Checkbox.tsx

@@ -114,7 +114,7 @@ export const Checkbox = ({
 }
 
 const InputContainer = styled.div`
-  margin-right: ${theme.spacing(4)};
+  margin-right: ${theme.spacing(3)};
   display: inline-flex;
   align-items: center;
 

src/components/form/Radio/Radio.tsx

@@ -136,7 +136,7 @@ const Container = styled.div`
 `
 
 const RadioContainer = styled.div`
-  margin-right: ${theme.spacing(4)};
+  margin-right: ${theme.spacing(3)};
   display: flex;
   align-items: flex-start;
   padding-top: 4px;

src/core/apolloClient/graphqlResolvers.tsx

@@ -54,6 +54,30 @@ export const typeDefs = gql`
     taxDateTooFarInFuture
     taxDateTooFarInPast
   }
+
+  enum ApiKeysPermissionsEnum {
+    add_on
+    analytic
+    applied_coupon
+    billable_metric
+    coupon
+    credit_note
+    customer
+    customer_usage
+    event
+    fee
+    invoice
+    lifetime_usage
+    organization
+    payment_request
+    plan
+    subscription
+    tax
+    wallet
+    wallet_transaction
+    webhook_endpoint
+    webhook_jwt_public_key
+  }
 `
 
 export const resolvers = {}

src/generated/graphql.tsx

@@ -190,6 +190,30 @@ export type ApiKey = {
   value: Scalars['String']['output'];
 };
 
+export enum ApiKeysPermissionsEnum {
+  AddOn = 'add_on',
+  Analytic = 'analytic',
+  AppliedCoupon = 'applied_coupon',
+  BillableMetric = 'billable_metric',
+  Coupon = 'coupon',
+  CreditNote = 'credit_note',
+  Customer = 'customer',
+  CustomerUsage = 'customer_usage',
+  Event = 'event',
+  Fee = 'fee',
+  Invoice = 'invoice',
+  LifetimeUsage = 'lifetime_usage',
+  Organization = 'organization',
+  PaymentRequest = 'payment_request',
+  Plan = 'plan',
+  Subscription = 'subscription',
+  Tax = 'tax',
+  Wallet = 'wallet',
+  WalletTransaction = 'wallet_transaction',
+  WebhookEndpoint = 'webhook_endpoint',
+  WebhookJwtPublicKey = 'webhook_jwt_public_key'
+}
+
 export type AppliedAddOn = {
   __typename?: 'AppliedAddOn';
   addOn: AddOn;
@@ -1047,6 +1071,7 @@ export type CreateApiKeyInput = {
   /** A unique identifier for the client performing the mutation. */
   clientMutationId?: InputMaybe<Scalars['String']['input']>;
   name?: InputMaybe<Scalars['String']['input']>;
+  permissions?: InputMaybe<Scalars['JSON']['input']>;
 };
 
 /** Autogenerated input type of CreateAppliedCoupon */
@@ -8579,7 +8604,7 @@ export type GetApiKeyToEditQueryVariables = Exact<{
 }>;
 
 
-export type GetApiKeyToEditQuery = { __typename?: 'Query', apiKey: { __typename?: 'ApiKey', id: string, name?: string | null, lastUsedAt?: any | null } };
+export type GetApiKeyToEditQuery = { __typename?: 'Query', apiKey: { __typename?: 'ApiKey', id: string, name?: string | null, lastUsedAt?: any | null, permissions: any } };
 
 export type CreateApiKeyMutationVariables = Exact<{
   input: CreateApiKeyInput;
@@ -23087,6 +23112,7 @@ export const GetApiKeyToEditDocument = gql`
     id
     name
     lastUsedAt
+    permissions
   }
 }
     `;