fix(credentials): scope personal connections to organizations (#7598)

* fix(credentials): use organization groups for personal connections

* fix(credentials): scope GitLab personal tokens to organizations

* fix(credentials): polish connection hint and provider picker sizing

Author: TheodoreSpeaks

apps/sim/app/api/credentials/[id]/route.ts

@@ -30,7 +30,10 @@ export const GET = defineInternalJsonRoute({
   rateLimit,
   errorPolicy: internalCredentialDetailErrorPolicy,
   parseOptions: credentialValidationParseOptions,
-  mapInput: ({ params }) => ({ credentialId: params.id }),
+  mapInput: ({ params, query }) => ({
+    credentialId: params.id,
+    ...(query.workspaceId ? { assertedWorkspaceId: query.workspaceId } : {}),
+  }),
   useCase: getWorkspaceCredentialUseCase,
   present: ({ credential, access }) => ({
     credential: toWorkspaceCredential(credential, access),
@@ -44,7 +47,11 @@ export const PUT = defineInternalJsonRoute({
   rateLimit,
   errorPolicy: internalCredentialErrorPolicy,
   parseOptions: credentialValidationParseOptions,
-  mapInput: ({ params, body }) => ({ credentialId: params.id, ...body }),
+  mapInput: ({ params, body, query }) => ({
+    credentialId: params.id,
+    ...body,
+    ...(query.workspaceId ? { assertedWorkspaceId: query.workspaceId } : {}),
+  }),
   useCase: updateWorkspaceCredentialUseCase,
   present: ({ credential, access }) => ({
     credential: toWorkspaceCredential(credential, access),
@@ -58,7 +65,10 @@ export const DELETE = defineInternalJsonRoute({
   rateLimit,
   errorPolicy: internalCredentialErrorPolicy,
   parseOptions: credentialValidationParseOptions,
-  mapInput: ({ params }) => ({ credentialId: params.id }),
+  mapInput: ({ params, query }) => ({
+    credentialId: params.id,
+    ...(query.workspaceId ? { workspaceId: query.workspaceId } : {}),
+  }),
   useCase: deleteCredentialUseCase,
   present: () => ({ success: true as const }),
 })

apps/sim/app/workspace/[workspaceId]/components/credential-detail/hooks/use-credential-detail-form.ts

@@ -4,8 +4,8 @@ import { useCallback, useState } from 'react'
 import { toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
+import { useUnsavedChangesGuard } from '@/app/workspace/[workspaceId]/components/credential-detail/hooks/use-unsaved-changes-guard'
 import { useUpdateWorkspaceCredential, type WorkspaceCredential } from '@/hooks/queries/credentials'
-import { useUnsavedChangesGuard } from './use-unsaved-changes-guard'
 
 const logger = createLogger('CredentialDetailForm')
 
@@ -26,6 +26,7 @@ export interface CredentialDetailFormSection {
 }
 
 interface UseCredentialDetailFormParams {
+  workspaceId?: string
   credential: WorkspaceCredential | null
   isAdmin: boolean
   /** Where the back link / discard navigates to. */
@@ -47,12 +48,13 @@ interface UseCredentialDetailFormParams {
  * into that one save and one guard.
  */
 export function useCredentialDetailForm({
+  workspaceId,
   credential,
   isAdmin,
   backHref,
   section,
 }: UseCredentialDetailFormParams) {
-  const updateCredential = useUpdateWorkspaceCredential()
+  const updateCredential = useUpdateWorkspaceCredential(workspaceId)
 
   const [displayNameDraft, setDisplayNameDraft] = useState('')
   const [descriptionDraft, setDescriptionDraft] = useState('')

apps/sim/app/workspace/[workspaceId]/integrations/components/connect-personal-token-modal.tsx

@@ -44,7 +44,7 @@ function PersonalTokenForm({
   const [host, setHost] = useState(instanceUrl ? new URL(instanceUrl).host : 'gitlab.com')
   const [token, setToken] = useState('')
   const create = useCreateWorkspaceCredential()
-  const update = useUpdateWorkspaceCredential()
+  const update = useUpdateWorkspaceCredential(workspaceId)
   const pending = create.isPending || update.isPending
   const error = (credentialId ? update.error : create.error)?.message
   function submit() {
@@ -88,7 +88,7 @@ function PersonalTokenForm({
           type='custom'
           title='Personal access token'
           required
-          hint='Use a token with the api scope. Only you can use this connection.'
+          hint='Only you can use this connection.'
         >
           <SecretInput
             value={token}

apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx

@@ -82,7 +82,7 @@ export function ConnectedCredentialDetail({
   const { data: oauthConnections = [] } = useOAuthConnections()
   const connectOAuthService = useConnectOAuthService()
   const createDraft = useCreateCredentialDraft()
-  const deleteCredential = useDeleteWorkspaceCredential()
+  const deleteCredential = useDeleteWorkspaceCredential(workspaceId)
 
   const credential = useMemo<WorkspaceCredential | null>(
     () => credentials.find((c) => c.id === credentialId) ?? null,
@@ -107,7 +107,12 @@ export function ConnectedCredentialDetail({
   const [isShareModalOpen, setIsShareModalOpen] = useState(false)
   const [reconnectOpen, setReconnectOpen] = useState(false)
 
-  const form = useCredentialDetailForm({ credential, isAdmin, backHref: integrationsHref })
+  const form = useCredentialDetailForm({
+    credential,
+    isAdmin,
+    backHref: integrationsHref,
+    workspaceId,
+  })
 
   const oauthServiceNameByProviderId = useMemo(
     () => new Map(oauthConnections.map((service) => [service.providerId, service.name])),

apps/sim/ee/credential-groups/components/organization-account-provider-catalog.tsx

@@ -84,7 +84,7 @@ export function OrganizationAccountProviderCatalog({
       <ChipModalHeader onClose={onClose} closeDisabled={pending}>
         Add provider
       </ChipModalHeader>
-      <ChipModalBody className='h-[480px] max-h-[70dvh] overflow-hidden'>
+      <ChipModalBody className='h-[480px] max-h-[70dvh] flex-none overflow-hidden'>
         <ChipModalField
           type='custom'
           title='Find a provider'

apps/sim/hooks/queries/credentials.ts

@@ -26,6 +26,7 @@ import {
 } from '@/lib/api/contracts/organization-credentials'
 import { environmentKeys } from '@/hooks/queries/environment'
 import { oauthConnectionsKeys } from '@/hooks/queries/oauth/oauth-connections'
+import { personalCredentialKeys } from '@/hooks/queries/personal-credentials'
 import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
 import { workspaceCredentialListQueryOptions } from '@/hooks/queries/utils/fetch-workspace-credentials'
 import { invalidateSelectorQueries } from '@/hooks/queries/utils/selector-keys'
@@ -60,13 +61,18 @@ export function useWorkspaceCredentials(params: {
   })
 }
 
-export function useWorkspaceCredential(credentialId?: string, enabled = true) {
+export function useWorkspaceCredential(
+  credentialId?: string,
+  enabled = true,
+  workspaceId?: string
+) {
   return useQuery<WorkspaceCredential | null>({
-    queryKey: workspaceCredentialKeys.detail(credentialId),
+    queryKey: workspaceCredentialKeys.detailForWorkspace(credentialId, workspaceId),
     queryFn: async ({ signal }) => {
       if (!credentialId) return null
       const data = await requestJson(getWorkspaceCredentialContract, {
         params: { id: credentialId },
+        query: { workspaceId },
         signal,
       })
       return data.credential ?? null
@@ -103,6 +109,7 @@ export function useCreateWorkspaceCredential() {
     },
     onSettled: () =>
       Promise.all([
+        queryClient.invalidateQueries({ queryKey: personalCredentialKeys.lists() }),
         queryClient.invalidateQueries({
           queryKey: workspaceCredentialKeys.lists(),
         }),
@@ -114,7 +121,7 @@ export function useCreateWorkspaceCredential() {
   })
 }
 
-export function useUpdateWorkspaceCredential() {
+export function useUpdateWorkspaceCredential(workspaceId?: string) {
   const queryClient = useQueryClient()
 
   return useMutation({
@@ -130,6 +137,7 @@ export function useUpdateWorkspaceCredential() {
       return requestJson(updateWorkspaceCredentialContract, {
         params: { id: credentialId },
         body,
+        query: { workspaceId },
       })
     },
     onMutate: async (variables) => {
@@ -142,7 +150,7 @@ export function useUpdateWorkspaceCredential() {
         queryKey: workspaceCredentialKeys.lists(),
       })
       const previousDetail = queryClient.getQueryData<WorkspaceCredential | null>(
-        workspaceCredentialKeys.detail(variables.credentialId)
+        workspaceCredentialKeys.detailForWorkspace(variables.credentialId, workspaceId)
       )
 
       /** Applies the in-flight edit to one cached credential. */
@@ -163,7 +171,7 @@ export function useUpdateWorkspaceCredential() {
        * Discard to restore the pre-save value over the committed one.
        */
       queryClient.setQueryData<WorkspaceCredential | null>(
-        workspaceCredentialKeys.detail(variables.credentialId),
+        workspaceCredentialKeys.detailForWorkspace(variables.credentialId, workspaceId),
         (old) => (old ? withEdit(old) : old)
       )
 
@@ -185,13 +193,14 @@ export function useUpdateWorkspaceCredential() {
       }
       if (context?.previousDetail !== undefined) {
         queryClient.setQueryData(
-          workspaceCredentialKeys.detail(variables.credentialId),
+          workspaceCredentialKeys.detailForWorkspace(variables.credentialId, workspaceId),
           context.previousDetail
         )
       }
     },
     onSettled: (_data, _error, variables) =>
       Promise.all([
+        queryClient.invalidateQueries({ queryKey: personalCredentialKeys.lists() }),
         queryClient.invalidateQueries({
           queryKey: workspaceCredentialKeys.detail(variables.credentialId),
         }),
@@ -206,15 +215,19 @@ export function useUpdateWorkspaceCredential() {
   })
 }
 
-export function useDeleteWorkspaceCredential() {
+export function useDeleteWorkspaceCredential(workspaceId?: string) {
   const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async (credentialId: string) => {
-      return requestJson(deleteWorkspaceCredentialContract, { params: { id: credentialId } })
+      return requestJson(deleteWorkspaceCredentialContract, {
+        params: { id: credentialId },
+        query: { workspaceId },
+      })
     },
     onSettled: (_data, _error, credentialId) =>
       Promise.all([
+        queryClient.invalidateQueries({ queryKey: personalCredentialKeys.lists() }),
         queryClient.invalidateQueries({ queryKey: workspaceCredentialKeys.detail(credentialId) }),
         queryClient.invalidateQueries({ queryKey: workspaceCredentialKeys.lists() }),
         queryClient.invalidateQueries({ queryKey: OAUTH_CREDENTIALS_KEY }),

apps/sim/hooks/queries/scoped-credentials.ts

@@ -105,7 +105,11 @@ export function useUpdateScopedCredential() {
           params: { id: credentialId },
           body: { ...body, organizationId: body.organizationId },
         })
-      return requestJson(updateWorkspaceCredentialContract, { params: { id: credentialId }, body })
+      return requestJson(updateWorkspaceCredentialContract, {
+        params: { id: credentialId },
+        body,
+        query: { workspaceId: 'workspaceId' in input ? input.workspaceId : undefined },
+      })
     },
     onSuccess: reconcile,
   })

apps/sim/hooks/queries/utils/credential-keys.ts

@@ -19,6 +19,10 @@ export const workspaceCredentialKeys = {
   details: () => [...workspaceCredentialKeys.all, 'detail'] as const,
   detail: (credentialId?: string) =>
     [...workspaceCredentialKeys.details(), credentialId ?? 'none'] as const,
+  detailForWorkspace: (credentialId?: string, workspaceId?: string) =>
+    workspaceId
+      ? ([...workspaceCredentialKeys.detail(credentialId), 'workspace', workspaceId] as const)
+      : workspaceCredentialKeys.detail(credentialId),
   members: (credentialId?: string) =>
     [...workspaceCredentialKeys.detail(credentialId), 'members'] as const,
   /**

apps/sim/lib/api/contracts/credentials.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { workspaceIdSchema } from '@/lib/api/contracts/primitives'
+import { organizationIdSchema, workspaceIdSchema } from '@/lib/api/contracts/primitives'
 import { defineRouteContract } from '@/lib/api/contracts/types'
 import {
   ATLASSIAN_PRODUCTS,
@@ -36,7 +36,8 @@ export const workspaceCredentialRoleSchema = z.enum(['admin', 'member'])
 export const workspaceCredentialMemberStatusSchema = z.enum(['active', 'pending', 'revoked'])
 export const workspaceCredentialSchema = z.object({
   id: z.string(),
-  workspaceId: z.string(),
+  workspaceId: z.string().nullable(),
+  organizationId: organizationIdSchema.optional(),
   type: workspaceCredentialTypeSchema,
   displayName: z.string(),
   description: z.string().nullable(),
@@ -466,6 +467,7 @@ export const getWorkspaceCredentialContract = defineRouteContract({
   method: 'GET',
   path: '/api/credentials/[id]',
   params: credentialIdParamsSchema,
+  query: z.object({ workspaceId: workspaceIdSchema.optional() }),
   response: {
     mode: 'json',
     schema: z.object({
@@ -528,6 +530,7 @@ export const updateWorkspaceCredentialContract = defineRouteContract({
   method: 'PUT',
   path: '/api/credentials/[id]',
   params: credentialIdParamsSchema,
+  query: z.object({ workspaceId: workspaceIdSchema.optional() }),
   body: updateCredentialByIdBodySchema,
   response: {
     mode: 'json',
@@ -541,6 +544,7 @@ export const deleteWorkspaceCredentialContract = defineRouteContract({
   method: 'DELETE',
   path: '/api/credentials/[id]',
   params: credentialIdParamsSchema,
+  query: z.object({ workspaceId: workspaceIdSchema.optional() }),
   response: {
     mode: 'json',
     schema: z.object({