Merge remote-tracking branch 'origin/feat/connector-service-account-auth' into feat/connector-service-account-auth

Author: Vikhyath Mondreti

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -1,19 +1,8 @@
 'use client'
 
 import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
-import {
-  ArrowRight,
-  Check,
-  ChevronDown,
-  cn,
-  Expandable,
-  ExpandableContent,
-  SecretReveal,
-  SquareArrowUpRight,
-  Tooltip,
-  toast,
-} from '@sim/emcn'
-import { TerminalWindow } from '@sim/emcn/icons'
+import { cn, Expandable, ExpandableContent, SecretReveal, Tooltip, toast } from '@sim/emcn'
+import { ArrowRight, Check, ChevronDown, SquareArrowUpRight, TerminalWindow } from '@sim/emcn/icons'
 import { isRecordLike } from '@sim/utils/object'
 import { useParams } from 'next/navigation'
 import { ThinkingLoader } from '@/components/ui'

apps/sim/app/workspace/[workspaceId]/home/components/search-sources/search-sources.test.tsx

@@ -11,7 +11,6 @@ const mocks = vi.hoisted(() => ({
   connect: vi.fn(),
 }))
 vi.mock('@/app/workspace/[workspaceId]/providers/workspace-host-provider', () => ({
-  useWorkspaceHostContext: () => ({ features: { knowledgeMemberAccess: mocks.enabled() } }),
   useOptionalWorkspaceHostContext: () => ({ features: { knowledgeMemberAccess: mocks.enabled() } }),
 }))
 vi.mock('@/hooks/queries/workspace', () => ({

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -10,7 +10,8 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Button, cn, Paperclip, Plus, Slash, Tooltip, toast } from '@sim/emcn'
+import { Chip, cn, Tooltip, toast } from '@sim/emcn'
+import { Paperclip, Plus, Slash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
 import { getMothershipAttachmentPreviewUrl } from '@/lib/copilot/chat/attachment-preview'
@@ -711,43 +712,34 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
             <>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
-                    type='button'
-                    variant='ghost'
+                  <Chip
+                    shape='round'
+                    leftIcon={Plus}
                     onClick={handlePlusClick}
                     aria-label='Add resources'
-                    className='size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
-                  >
-                    <Plus className='size-[16px] text-[var(--text-icon)]' />
-                  </Button>
+                  />
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top'>Add resources</Tooltip.Content>
               </Tooltip.Root>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
-                    type='button'
-                    variant='ghost'
+                  <Chip
+                    shape='round'
+                    leftIcon={Paperclip}
                     onClick={handleFileSelectStable}
                     aria-label='Attach file'
-                    className='size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
-                  >
-                    <Paperclip className='size-[16px] text-[var(--text-icon)]' />
-                  </Button>
+                  />
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top'>Attach file</Tooltip.Content>
               </Tooltip.Root>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
-                    type='button'
-                    variant='ghost'
+                  <Chip
+                    shape='round'
+                    leftIcon={Slash}
                     onClick={handleSlashTriggerClick}
                     aria-label='Skills'
-                    className='size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
-                  >
-                    <Slash className='size-[16px] text-[var(--text-icon)]' />
-                  </Button>
+                  />
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top'>Skills</Tooltip.Content>
               </Tooltip.Root>

apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { type ReactNode, useEffect, useMemo, useState } from 'react'
 import {
   Button,
   Chip,
@@ -10,7 +10,6 @@ import {
   ChipModalField,
   Code,
   CopyCodeButton,
-  Label,
   SecretInput,
   Wizard,
 } from '@sim/emcn'
@@ -167,7 +166,7 @@ export function ConnectSlackBotModal({
 
   // Shared server-side derivation: uses the app public base (not
   // window.location.origin) so Slack's servers can reach it.
-  const requestUrl = useMemo(() => buildSlackCustomBotRequestUrl(credentialId), [credentialId])
+  const requestUrl = buildSlackCustomBotRequestUrl(credentialId)
 
   const descriptionError = getAgentDescriptionError(appDescription)
   const slashCommandsError = getSlashCommandsError(slashCommands)
@@ -204,7 +203,7 @@ export function ConnectSlackBotModal({
   ])
 
   const capabilityIds = useMemo(() => [...selected], [selected])
-  const setCapabilityIds = useCallback((next: string[]) => setSelected(new Set(next)), [])
+  const setCapabilityIds = (next: string[]) => setSelected(new Set(next))
 
   const isPending = createCredential.isPending || updateCredential.isPending
 
@@ -495,10 +494,7 @@ function StepCreate({ manifestJson }: StepCreateProps) {
           <div className='mt-2 overflow-hidden rounded-md border border-[var(--border-1)]'>
             <div className='flex items-center justify-between border-[var(--border-1)] border-b bg-[var(--surface-4)] px-3 py-1'>
               <span className='font-sans text-[var(--text-tertiary)] text-xs'>manifest.json</span>
-              <CopyCodeButton
-                code={manifestJson}
-                className='text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]'
-              />
+              <CopyCodeButton code={manifestJson} />
             </div>
             <Code.Viewer code={manifestJson} language='json' wrapText className='max-h-[180px]' />
           </div>
@@ -579,10 +575,9 @@ interface SecretFieldProps {
 }
 function SecretField({ label, value, onChange, placeholder }: SecretFieldProps) {
   return (
-    <div className='flex flex-col gap-[9px]'>
-      <Label className='text-[var(--text-muted)] text-small'>{label}</Label>
+    <ChipModalField type='custom' title={label}>
       <SecretInput value={value} onChange={onChange} placeholder={placeholder} />
-    </div>
+    </ChipModalField>
   )
 }
 
@@ -605,9 +600,7 @@ function StepDone({ pending, created, error, onRetry }: StepDoneProps) {
     return (
       <div className='flex flex-col items-center gap-3 py-10 text-center'>
         <p className='max-w-sm text-[var(--text-error)] text-sm leading-relaxed'>{error}</p>
-        <Button variant='default' onClick={onRetry}>
-          Try again
-        </Button>
+        <Chip onClick={onRetry}>Try again</Chip>
       </div>
     )
   }

apps/sim/app/workspace/[workspaceId]/integrations/components/integration-section/integration-section.tsx

@@ -1,22 +1,35 @@
 import type { ReactNode } from 'react'
-import { RESOURCE_LIST_GRID } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import {
+  RESOURCE_LIST_GRID,
+  RESOURCE_LIST_STACK,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 interface IntegrationSectionProps {
   label: string
+  description?: string
+  layout?: 'grid' | 'list'
   children: ReactNode
 }
 
 /**
  * Labeled section used throughout the integrations surface: the shared
  * {@link SettingsSection} label/divider chrome wrapped around the shared
- * responsive card grid, so the integrations list, the connected credentials
+ * resource grid or list, so the integrations list, the connected credentials
  * list, and the integration detail templates cannot drift from settings.
  */
-export function IntegrationSection({ label, children }: IntegrationSectionProps) {
+export function IntegrationSection({
+  label,
+  description,
+  layout = 'grid',
+  children,
+}: IntegrationSectionProps) {
   return (
     <SettingsSection label={label}>
-      <div className={RESOURCE_LIST_GRID}>{children}</div>
+      {description && (
+        <p className='mb-3 text-[var(--text-muted)] text-caption leading-relaxed'>{description}</p>
+      )}
+      <div className={layout === 'list' ? RESOURCE_LIST_STACK : RESOURCE_LIST_GRID}>{children}</div>
     </SettingsSection>
   )
 }

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -56,7 +56,7 @@ import {
   documentParsers,
   documentUrlKeys,
 } from '@/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/search-params'
-import { ActionBar } from '@/app/workspace/[workspaceId]/knowledge/[id]/components'
+import { ActionBar } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar'
 import { getDocumentIcon } from '@/app/workspace/[workspaceId]/knowledge/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { CONNECTOR_META_REGISTRY } from '@/connectors/registry'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -3,7 +3,7 @@
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Badge,
-  Button,
+  Chip,
   ChipConfirmModal,
   type ChipConfirmTextSegment,
   ChipDatePicker,
@@ -16,7 +16,6 @@ import {
   cellIconNodeClass,
   chipContentGap,
   chipContentLabelClass,
-  chipVariants,
   cn,
   FloatingTooltip,
   isTextClipped,
@@ -1067,20 +1066,18 @@ export function KnowledgeBase({
     () => (
       <AutoWidthPanel>
         <div className='flex flex-col gap-2'>
-          <div className='flex h-5 items-center justify-between'>
+          <div className='flex items-center justify-between'>
             <span className={FILTER_SECTION_LABEL_CLASS}>Status</span>
             {enabledFilter !== 'all' && (
-              <Button
-                variant='ghost'
+              <Chip
                 onClick={() => {
                   setEnabledFilter('all')
                   setSelectedDocuments(new Set())
                   setIsSelectAllMode(false)
                 }}
-                className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-caption hover-hover:text-[var(--text-secondary)]'
               >
                 Clear
-              </Button>
+              </Chip>
             )}
           </div>
           <ChipDropdown
@@ -1119,35 +1116,34 @@ export function KnowledgeBase({
           const ConnectorIcon = def?.icon
           const syncInFlight = isConnectorSyncingOrPending(connector)
           return (
-            <button
+            <Chip
               key={connector.id}
-              type='button'
               onClick={() => setShowConnectorsModal(true)}
-              className={cn(chipVariants({ variant: 'filled' }), 'max-w-[180px]')}
+              className='max-w-[180px]'
+              leftAdornment={
+                <span className='relative flex size-[14px] shrink-0 items-center justify-center'>
+                  {syncInFlight ? (
+                    <Loader className='size-[14px]' animate />
+                  ) : (
+                    ConnectorIcon && <BrandIcon icon={ConnectorIcon} className='size-[14px]' />
+                  )}
+                  {connector.status !== 'active' && !syncInFlight && (
+                    <span
+                      className={cn(
+                        '-right-0.5 -top-0.5 absolute size-1.5 rounded-xs border border-[var(--surface-2)]',
+                        connector.status === 'error'
+                          ? 'bg-[var(--text-error)]'
+                          : connector.status === 'disabled'
+                            ? 'bg-[var(--caution)]'
+                            : 'bg-[var(--text-muted)]'
+                      )}
+                    />
+                  )}
+                </span>
+              }
             >
-              <span className='relative flex size-[14px] shrink-0 items-center justify-center'>
-                {syncInFlight ? (
-                  <Loader className='size-[14px]' animate />
-                ) : (
-                  ConnectorIcon && <BrandIcon icon={ConnectorIcon} className='size-[14px]' />
-                )}
-                {connector.status !== 'active' && !syncInFlight && (
-                  <span
-                    className={cn(
-                      '-right-0.5 -top-0.5 absolute size-1.5 rounded-xs border border-[var(--surface-2)]',
-                      connector.status === 'error'
-                        ? 'bg-[var(--text-error)]'
-                        : connector.status === 'disabled'
-                          ? 'bg-[var(--caution)]'
-                          : 'bg-[var(--text-muted)]'
-                    )}
-                  />
-                )}
-              </span>
-              <span className='truncate text-[var(--text-body)]'>
-                {def?.name || connector.connectorType}
-              </span>
-            </button>
+              {def?.name || connector.connectorType}
+            </Chip>
           )
         })}
       </>
@@ -1770,17 +1766,9 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
 
   return (
     <div className='mt-3 border-[var(--border-1)] border-t pt-3'>
-      <div className='flex h-5 items-center justify-between'>
+      <div className='flex items-center justify-between'>
         <span className={FILTER_SECTION_LABEL_CLASS}>Filter by tags</span>
-        {activeCount > 0 && (
-          <Button
-            variant='ghost'
-            className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-caption hover-hover:text-[var(--text-secondary)]'
-            onClick={() => onChange([])}
-          >
-            Clear all
-          </Button>
-        )}
+        {activeCount > 0 && <Chip onClick={() => onChange([])}>Clear all</Chip>}
       </div>
 
       <div
@@ -1827,14 +1815,11 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
                     />
                   )}
                 </div>
-                <Button
-                  variant='ghost'
-                  className='relative size-[30px] shrink-0 p-0 text-[var(--text-muted)] before:absolute before:inset-[-5px] before:content-[""] hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-error)]'
+                <Chip
                   onClick={() => removeFilter(entry.id)}
                   aria-label='Remove tag filter'
-                >
-                  <X className='size-[14px]' />
-                </Button>
+                  leftIcon={X}
+                />
               </div>
               {entry.tagSlot && (
                 <TagFilterValueControl
@@ -1847,14 +1832,11 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
         })}
       </div>
 
-      <Button
-        variant='ghost'
-        onClick={addFilter}
-        className='mt-2 h-[30px] w-full justify-start gap-2 px-2 text-[var(--text-secondary)] text-caption hover-hover:text-[var(--text-primary)]'
-      >
-        <Plus className='size-[14px]' />
-        Add filter
-      </Button>
+      <div className='mt-2'>
+        <Chip fullWidth leftIcon={Plus} onClick={addFilter}>
+          Add filter
+        </Chip>
+      </div>
     </div>
   )
 }