fix(emcn): keep the segmented control hugging its segments (#7470)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts

@@ -132,6 +132,22 @@ export const credentialGroupProviderSearchUrlKeys = {
   clearOnDefault: true,
 } as const
 
+/**
+ * Filters the people enrolled in a credential group by email. Its own key rather than the
+ * provider filter's, so switching tabs does not carry a term that matches nothing on the
+ * other side.
+ */
+export const credentialGroupPeopleSearchParam = {
+  key: 'credential-group-people',
+  parser: parseAsString.withDefault(''),
+} as const
+
+/** A transient list filter: no back-stack entry, and absent from the URL when empty. */
+export const credentialGroupPeopleSearchUrlKeys = {
+  history: 'replace',
+  clearOnDefault: true,
+} as const
+
 /**
  * `group-tab` is the active tab inside the deep-linked permission-group detail
  * view, so a shared `group-id` link can land on the same tab (mirrors

apps/sim/ee/credential-groups/components/credential-group-access.tsx

@@ -221,7 +221,6 @@ export function CredentialGroupAccess({
 
   const sectionAction = (
     <Chip
-      variant='primary'
       onClick={() => setShowAddWorkflow(true)}
       disabled={
         saving ||

apps/sim/ee/credential-groups/components/credential-group-detail.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { Chip, ChipConfirmModal, ChipModalTabs, toast } from '@sim/emcn'
-import { ArrowLeft, Plus, User } from '@sim/emcn/icons'
+import { ArrowLeft, Plus } from '@sim/emcn/icons'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useQueryState } from 'nuqs'
 import { McpIcon } from '@/components/icons'
@@ -17,11 +17,14 @@ import { getCredentialGroupProviderService } from '@/lib/credential-groups/provi
 import { SLACK_CUSTOM_BOT_PROVIDER_ID } from '@/lib/oauth/types'
 import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import {
+  credentialGroupPeopleSearchParam,
+  credentialGroupPeopleSearchUrlKeys,
   credentialGroupProviderSearchParam,
   credentialGroupProviderSearchUrlKeys,
   credentialGroupTabParam,
   credentialGroupTabUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
+import { MemberAvatar } from '@/app/workspace/[workspaceId]/settings/components/member-list'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
@@ -125,13 +128,35 @@ export function CredentialGroupDetail({
     { ...credentialGroupProviderSearchParam.parser, ...credentialGroupProviderSearchUrlKeys }
   )
   const setProviderSearch = useDebouncedSearchSetter(setProviderSearchParam)
+  const [peopleSearch, setPeopleSearchParam] = useQueryState(credentialGroupPeopleSearchParam.key, {
+    ...credentialGroupPeopleSearchParam.parser,
+    ...credentialGroupPeopleSearchUrlKeys,
+  })
+  const setPeopleSearch = useDebouncedSearchSetter(setPeopleSearchParam)
   const [showInvite, setShowInvite] = useState(false)
   const [showDelete, setShowDelete] = useState(false)
   const [deletingEnrollmentId, setDeletingEnrollmentId] = useState<string | null>(null)
   const [draftName, setDraftName] = useState<string | null>(null)
   const [draftDescription, setDraftDescription] = useState<string | null>(null)
   const credentialGroup = detail.data?.pages[0]?.credentialGroup
   const enrollments = detail.data?.pages.flatMap((page) => page.enrollments) ?? []
+  const peopleFilter = peopleSearch.trim().toLowerCase()
+  /**
+   * Only the pages already loaded: the enrollment list is cursor-paginated with no
+   * server-side term, so a match on a later page appears only once it is fetched.
+   */
+  const visibleEnrollments = peopleFilter
+    ? enrollments.filter((enrollment) => enrollment.email.toLowerCase().includes(peopleFilter))
+    : enrollments
+  /**
+   * `+` means more people exist than are loaded, so it stays on the total. While
+   * filtering, the match count is reported against that total rather than replacing
+   * it — otherwise `People (2+)` reads as a two-person group with more to come.
+   */
+  const loadedTotal = `${enrollments.length}${detail.hasNextPage ? '+' : ''}`
+  const peopleLabel = peopleFilter
+    ? `People (${visibleEnrollments.length} of ${loadedTotal})`
+    : `People (${loadedTotal})`
   const deletingEnrollment = deletingEnrollmentId
     ? (enrollments.find((enrollment) => enrollment.id === deletingEnrollmentId) ?? null)
     : null
@@ -290,7 +315,14 @@ export function CredentialGroupDetail({
                 placeholder: 'Search accounts and MCP servers...',
                 disabled: detail.isPending,
               }
-            : undefined
+            : activeTab === 'people'
+              ? {
+                  value: peopleSearch,
+                  onChange: setPeopleSearch,
+                  placeholder: 'Search people...',
+                  disabled: detail.isPending,
+                }
+              : undefined
         }
       >
         {detail.error ? (
@@ -320,7 +352,7 @@ export function CredentialGroupDetail({
 
             {activeTab === 'people' && (
               <SettingsSection
-                label={`People (${enrollments.length}${detail.hasNextPage ? '+' : ''})`}
+                label={peopleLabel}
                 action={
                   detail.hasNextPage ? (
                     <Chip
@@ -332,16 +364,18 @@ export function CredentialGroupDetail({
                   ) : undefined
                 }
               >
-                {enrollments.length === 0 ? (
-                  <SettingsEmptyState variant='inline'>No people invited yet</SettingsEmptyState>
+                {visibleEnrollments.length === 0 ? (
+                  <SettingsEmptyState variant='inline'>
+                    {peopleFilter ? 'No people match your search' : 'No people invited yet'}
+                  </SettingsEmptyState>
                 ) : (
                   <div className={RESOURCE_LIST_STACK}>
-                    {enrollments.map((enrollment) => {
+                    {visibleEnrollments.map((enrollment) => {
                       return (
                         <SettingsResourceRow
                           key={enrollment.id}
-                          icon={<User className='text-[var(--text-icon)]' />}
-                          iconFilled
+                          icon={<MemberAvatar name={enrollment.email} image={null} />}
+                          iconVariant='custom'
                           title={enrollment.email}
                           description={
                             <EnrollmentConnections

apps/sim/ee/credential-groups/components/credential-group-details.tsx

@@ -242,7 +242,7 @@ export function CredentialGroupDetails({
               error={!name.trim()}
             />
           </SettingRow>
-          <SettingRow label='Description' optional htmlFor='credential-group-description'>
+          <SettingRow label='Description' htmlFor='credential-group-description'>
             <ChipTextarea
               id='credential-group-description'
               value={description}
@@ -437,7 +437,6 @@ export function CredentialGroupDetails({
         title={`Remove ${
           removingProvider ? getCredentialGroupProviderService(removingProvider).name : 'account'
         }`}
-        defaultAction='confirm'
         text='People will no longer be asked to connect this account. Existing credentials are retained but will no longer be returned by this group.'
         dismissLabel='Cancel'
         confirm={{
@@ -454,7 +453,6 @@ export function CredentialGroupDetails({
         title={`Remove ${
           removingMcpConnector ? MANAGED_MCP_CONNECTORS[removingMcpConnector].name : 'MCP app'
         }`}
-        defaultAction='confirm'
         text='People will no longer be able to connect this app. Existing OAuth grants and saved tool metadata will be revoked.'
         dismissLabel='Cancel'
         confirm={{

apps/sim/ee/credential-groups/components/credential-groups-settings.tsx

@@ -8,6 +8,8 @@ import { useQueryState } from 'nuqs'
 import {
   credentialGroupIdParam,
   credentialGroupIdUrlKeys,
+  credentialGroupPeopleSearchParam,
+  credentialGroupPeopleSearchUrlKeys,
   credentialGroupProviderSearchParam,
   credentialGroupProviderSearchUrlKeys,
   credentialGroupTabParam,
@@ -54,15 +56,22 @@ export function CredentialGroupsSettings({ workspaceId }: CredentialGroupsSettin
     ...credentialGroupProviderSearchParam.parser,
     ...credentialGroupProviderSearchUrlKeys,
   })
+  /** Scoped to one group's enrolled people, and reset alongside the other two. */
+  const [, setPeopleSearch] = useQueryState(credentialGroupPeopleSearchParam.key, {
+    ...credentialGroupPeopleSearchParam.parser,
+    ...credentialGroupPeopleSearchUrlKeys,
+  })
   const openGroup = (groupId: string) => {
     void setSelectedGroupId(groupId)
     void setSelectedTab(null)
     void setProviderSearch(null)
+    void setPeopleSearch(null)
   }
   const closeGroup = () => {
     void setSelectedGroupId(null, { history: 'replace' })
     void setSelectedTab(null)
     void setProviderSearch(null)
+    void setPeopleSearch(null)
   }
   const selectedGroup = selectedGroupId
     ? groups.find((group) => group.id === selectedGroupId)

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -359,11 +359,8 @@ export interface ChipModalTabsProps {
  * content conditionally below.
  *
  * Reusing `ChipSwitch` keeps every tabbed modal visually identical to the
- * segmented toggles elsewhere in the app (e.g. the billing-period switch).
- *
- * Pinned to `w-fit` so the pill always hugs its tabs: dropped directly into a
- * flex column the `inline-flex` trough is otherwise blockified and stretched
- * full-width by `align-items: stretch`. A caller-supplied width class still wins.
+ * segmented toggles elsewhere in the app (e.g. the billing-period switch),
+ * including the `w-fit` trough that hugs its tabs in a flex column.
  *
  * @example
  * ```tsx
@@ -390,7 +387,7 @@ function ChipModalTabs({
       onChange={onChange}
       aria-label={ariaLabel}
       options={tabs.map((tab) => ({ value: tab.value, label: tab.label, icon: tab.icon }))}
-      className={cn('w-fit', className)}
+      className={className}
     />
   )
 }

packages/emcn/src/components/chip-switch/chip-switch.test.tsx

@@ -0,0 +1,63 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it } from 'vitest'
+import { ChipSwitch } from './chip-switch'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+const OPTIONS = [
+  { value: 'logs', label: 'Logs' },
+  { value: 'input', label: 'Workflow input' },
+] as const
+
+function mount(className?: string): HTMLElement {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() =>
+    root?.render(
+      <ChipSwitch
+        value='logs'
+        onChange={() => {}}
+        options={OPTIONS}
+        aria-label='Stage'
+        className={className}
+      />
+    )
+  )
+  const trough = container.querySelector<HTMLElement>('[role="radiogroup"]')
+  if (!trough) throw new Error('trough not rendered')
+  return trough
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('ChipSwitch', () => {
+  it('hugs its segments by default', () => {
+    expect(mount().className).toContain('w-fit')
+  })
+
+  it('lets a caller-supplied width win', () => {
+    const className = mount('w-full').className
+    expect(className).toContain('w-full')
+    expect(className).not.toContain('w-fit')
+  })
+
+  it('marks only the active segment as checked', () => {
+    const trough = mount()
+    const checked = [...trough.querySelectorAll('[role="radio"]')].map((segment) =>
+      segment.getAttribute('aria-checked')
+    )
+    expect(checked).toEqual(['true', 'false'])
+  })
+})

packages/emcn/src/components/chip-switch/chip-switch.tsx

@@ -40,6 +40,11 @@ export interface ChipSwitchProps<T extends string = string> {
  * exactly. The active segment is a flat lifted surface against the trough
  * (`--surface-2` light / `--surface-6` dark, no shadow) for a clean, even pill.
  *
+ * The trough is pinned to `w-fit` so it always hugs its segments: `inline-flex`
+ * alone does not survive a flex column, where `align-items: stretch` blockifies
+ * the container and pulls it edge to edge. A caller-supplied width class still
+ * wins through {@link cn}.
+ *
  * @example
  * <ChipSwitch
  *   value={view}
@@ -62,7 +67,7 @@ export function ChipSwitch<T extends string>({
       role='radiogroup'
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex items-center rounded-[10px] bg-[var(--surface-5)] p-[2px] dark:bg-[var(--surface-4)]',
+        'inline-flex w-fit items-center rounded-[10px] bg-[var(--surface-5)] p-[2px] dark:bg-[var(--surface-4)]',
         className
       )}
     >