Connect member accounts inline with canonical provider descriptions

Author: emir-karabeg

apps/sim/platform/app/(shell)/home/_components/connected-widget/connected-widget.module.css

@@ -1,22 +1,5 @@
 .connect {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-section-gap);
+  display: grid;
   block-size: var(--ui-widget-max-size);
   min-block-size: 0;
-  padding: var(--spacing-16);
-  border: var(--spacing-stroke-default) solid var(--ui-divider);
-  border-radius: var(--radius-menu-shared);
-  text-align: center;
-}
-.connect p {
-  color: var(--ui-secondary);
-}
-.providers {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--ui-row-gap);
 }

apps/sim/platform/app/(shell)/home/_components/connected-widget/connected-widget.tsx

@@ -3,7 +3,8 @@
 import { type ReactNode, useState } from 'react'
 import styles from '@/platform/app/(shell)/home/_components/connected-widget/connected-widget.module.css'
 import { HomeSection } from '@/platform/app/(shell)/home/_components/home-section/home-section'
-import { ActionMenu, Button } from '@/platform/design-system/components'
+import { ActionMenu } from '@/platform/design-system/components'
+import { ConnectionPrompt } from '@/platform/design-system/components/connection-prompt/connection-prompt'
 import type { MenuAction } from '@/platform/design-system/components/menu/action-menu'
 import { Modal } from '@/platform/design-system/components/modal/modal'
 
@@ -53,20 +54,15 @@ export function ConnectedWidget({
       {connected ? (
         children
       ) : (
-        <div className={styles.connect} data-material='shell'>
-          <p data-type='T060'>Connect your {title.toLowerCase()}</p>
-          <div className={styles.providers}>
-            {integrations[title].map(({ name, icon }) => (
-              <Button
-                key={name}
-                disabled={!onConnectionChange}
-                icon={icon}
-                onClick={() => onConnectionChange?.(true)}
-              >
-                {name}
-              </Button>
-            ))}
-          </div>
+        <div className={styles.connect}>
+          <ConnectionPrompt
+            title={`Connect your ${title.toLowerCase()}`}
+            options={integrations[title].map(({ name, icon }) => ({
+              label: name,
+              icon,
+              onConnect: onConnectionChange ? () => onConnectionChange(true) : undefined,
+            }))}
+          />
         </div>
       )}
       <Modal

apps/sim/platform/app/(shell)/integrations/_components/account-authorization/account-authorization.tsx

@@ -0,0 +1,15 @@
+.scopes,
+.scope {
+  display: grid;
+  min-inline-size: 0;
+}
+.scopes {
+  gap: var(--ui-section-gap);
+}
+.scope {
+  gap: var(--ui-stack-gap);
+  overflow-wrap: anywhere;
+}
+.scope > span + span {
+  color: var(--ui-secondary);
+}

apps/sim/platform/app/(shell)/integrations/_components/connection-access/connection-access.module.css

@@ -0,0 +1,24 @@
+import styles from '@/platform/app/(shell)/integrations/_components/connection-access/connection-access.module.css'
+import { Disclosure } from '@/platform/design-system/components'
+import type { OrganizationIntegration } from '@/platform/lib/integrations/model'
+
+interface ConnectionAccessProps {
+  integration: OrganizationIntegration
+}
+
+export function ConnectionAccess({ integration }: ConnectionAccessProps) {
+  const scopes = integration.requestedScopes
+  if (!scopes?.length) return null
+  return (
+    <Disclosure label='Requested permissions' variant='activity'>
+      <ul className={styles.scopes} aria-label='Requested provider permissions'>
+        {scopes.map(({ id, label }) => (
+          <li key={id} className={styles.scope}>
+            <span data-type='T059'>{label}</span>
+            {label !== id && <span data-type='T050'>{id}</span>}
+          </li>
+        ))}
+      </ul>
+    </Disclosure>
+  )
+}

apps/sim/platform/app/(shell)/integrations/_components/connection-access/connection-access.tsx

@@ -10,19 +10,13 @@
 .account {
   gap: var(--ui-section-gap);
 }
-.header,
-.actions {
+.header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-}
-.header {
   justify-content: space-between;
   gap: var(--ui-row-gap);
 }
-.actions {
-  gap: var(--ui-action-gap);
-}
 .list {
   gap: var(--ui-list-gap);
   margin-inline: calc(-1 * var(--ui-row-inset));

apps/sim/platform/app/(shell)/integrations/_components/integration-details/integration-details.module.css

@@ -2,17 +2,17 @@
 
 import { useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { AccountAuthorization } from '@/platform/app/(shell)/integrations/_components/account-authorization/account-authorization'
+import { ConnectionAccess } from '@/platform/app/(shell)/integrations/_components/connection-access/connection-access'
 import styles from '@/platform/app/(shell)/integrations/_components/integration-details/integration-details.module.css'
 import { ToolPermissions } from '@/platform/app/(shell)/integrations/_components/tool-permissions/tool-permissions'
 import {
   ActionMenu,
   ActivityRow,
-  Button,
   Chip,
   EmptyState,
   Modal,
 } from '@/platform/design-system/components'
+import { ConnectionPrompt } from '@/platform/design-system/components/connection-prompt/connection-prompt'
 import {
   SettingsRow,
   SettingsSurface,
@@ -24,26 +24,23 @@ interface IntegrationDetailsProps {
   onChange: (next: OrganizationIntegration) => void
 }
 
-type AccountAction =
-  | { kind: 'connect' }
-  | { kind: 'reconnect' | 'disconnect'; account: IntegrationAccount }
-
 function accountStatus(account: IntegrationAccount) {
   return account.status === 'active' ? 'Connected' : 'Reconnect needed'
 }
 
 export function IntegrationDetails({ integration, onChange }: IntegrationDetailsProps) {
   const router = useRouter()
   const search = useSearchParams()
-  const [action, setAction] = useState<AccountAction | null>(null)
+  const [removing, setRemoving] = useState<IntegrationAccount | null>(null)
   const { accounts, providerId, connectableMethod } = integration
   const requested = search.get('account')
   const selected = requested
     ? accounts.find((entry) => entry.id === requested)
     : accounts.length === 1
       ? accounts[0]
       : undefined
-  const canConnect = integration.availability === 'ready' && connectableMethod !== null
+  const canConnect =
+    !accounts.length && integration.availability === 'ready' && connectableMethod !== null
   const candidate = integration.connectionCandidate
   const canAttach =
     integration.fixtureAuthorization &&
@@ -59,6 +56,26 @@ export function IntegrationDetails({ integration, onChange }: IntegrationDetails
     return `/integrations/${encodeURIComponent(providerId)}${next.size ? `?${next}` : ''}`
   }
 
+  function connect() {
+    if (!canAttach || !candidate) return
+    onChange({
+      ...integration,
+      accounts: [candidate],
+      connectableMethod: null,
+      connectionCandidate: undefined,
+    })
+  }
+
+  function reconnect(account: IntegrationAccount) {
+    if (!integration.fixtureAuthorization || !account.canReconnect) return
+    onChange({
+      ...integration,
+      accounts: accounts.map((item) =>
+        item.id === account.id ? { ...item, status: 'active' } : item
+      ),
+    })
+  }
+
   function disconnect(account: IntegrationAccount) {
     const restore = integration.availability === 'ready' && account.canReconnect
     onChange({
@@ -95,27 +112,16 @@ export function IntegrationDetails({ integration, onChange }: IntegrationDetails
     )
   }
   if (integration.availability === 'managed' && !accounts.length) {
-    return (
-      <EmptyState
-        title='Organization managed'
-        description='Your access follows your GitLab project permissions.'
-      />
-    )
+    return <EmptyState title='Organization managed' description={integration.accessDescription} />
   }
 
+  const accountHeading = !selected && accounts.length > 1 ? 'Accounts' : 'Account'
   return (
     <div className={styles.sections}>
-      <section className={styles.account} aria-label={selected ? 'Account' : 'Accounts'}>
+      <section className={styles.account} aria-label={accountHeading}>
         <header className={styles.header}>
-          <h2 data-type='T093'>{selected ? 'Account' : 'Accounts'}</h2>
-          <div className={styles.actions}>
-            {selected && accounts.length > 1 && <Chip href={accountHref()}>All accounts</Chip>}
-            {canConnect && accounts.length > 0 && (
-              <Button size='compact' onClick={() => setAction({ kind: 'connect' })}>
-                Add account
-              </Button>
-            )}
-          </div>
+          <h2 data-type='T093'>{accountHeading}</h2>
+          {selected && accounts.length > 1 && <Chip href={accountHref()}>All accounts</Chip>}
         </header>
         {selected ? (
           <SettingsSurface>
@@ -131,7 +137,8 @@ export function IntegrationDetails({ integration, onChange }: IntegrationDetails
                         {
                           id: 'reconnect',
                           label: 'Reconnect account',
-                          onSelect: () => setAction({ kind: 'reconnect', account: selected }),
+                          disabled: !integration.fixtureAuthorization,
+                          onSelect: () => reconnect(selected),
                         },
                       ]
                     : []),
@@ -140,7 +147,7 @@ export function IntegrationDetails({ integration, onChange }: IntegrationDetails
                     label: 'Disconnect account',
                     destructive: true,
                     separatorBefore: selected.canReconnect,
-                    onSelect: () => setAction({ kind: 'disconnect', account: selected }),
+                    onSelect: () => setRemoving(selected),
                   },
                 ]}
               />
@@ -157,18 +164,21 @@ export function IntegrationDetails({ integration, onChange }: IntegrationDetails
               />
             ))}
           </ul>
-        ) : (
-          <EmptyState
-            title='No accounts connected'
-            action={
-              canConnect ? (
-                <Button size='compact' onClick={() => setAction({ kind: 'connect' })}>
-                  Connect account
-                </Button>
-              ) : undefined
-            }
+        ) : canConnect ? (
+          <ConnectionPrompt
+            title={`Connect your ${integration.name} account`}
+            options={[
+              {
+                label: integration.name,
+                icon: { providerId: integration.providerId },
+                onConnect: canAttach ? connect : undefined,
+              },
+            ]}
           />
+        ) : (
+          <EmptyState title='No accounts connected' description={integration.accessDescription} />
         )}
+        <ConnectionAccess integration={integration} />
       </section>
       {selected?.permissions && (
         <ToolPermissions
@@ -185,56 +195,16 @@ export function IntegrationDetails({ integration, onChange }: IntegrationDetails
           }
         />
       )}
-      {action?.kind === 'disconnect' && (
+      {removing && (
         <Modal
           open
-          onOpenChange={() => setAction(null)}
+          onOpenChange={() => setRemoving(null)}
           title='Disconnect account?'
           variant='confirm'
           destructive
-          description={`Sim will lose access to ${action.account.label}.`}
+          description={`Sim will lose access to ${removing.label}.`}
           confirmLabel='Disconnect'
-          onConfirm={() => disconnect(action.account)}
-        />
-      )}
-      {action?.kind === 'connect' && canConnect && connectableMethod && (
-        <AccountAuthorization
-          provider={integration.name}
-          method={connectableMethod}
-          candidateLabel={candidate?.label}
-          onClose={() => setAction(null)}
-          onAuthorize={
-            canAttach && candidate
-              ? () => {
-                  onChange({
-                    ...integration,
-                    accounts: [...accounts, candidate],
-                    connectableMethod: null,
-                    connectionCandidate: undefined,
-                  })
-                  router.replace(accountHref(candidate.id), { scroll: false })
-                }
-              : undefined
-          }
-        />
-      )}
-      {action?.kind === 'reconnect' && action.account.canReconnect && (
-        <AccountAuthorization
-          provider={integration.name}
-          method={action.account.method}
-          account={action.account}
-          onClose={() => setAction(null)}
-          onAuthorize={
-            integration.fixtureAuthorization
-              ? () =>
-                  onChange({
-                    ...integration,
-                    accounts: accounts.map((entry) =>
-                      entry.id === action.account.id ? { ...entry, status: 'active' } : entry
-                    ),
-                  })
-              : undefined
-          }
+          onConfirm={() => disconnect(removing)}
         />
       )}
     </div>

apps/sim/platform/app/(shell)/integrations/_components/integration-details/integration-details.tsx

@@ -33,7 +33,9 @@ export function IntegrationList({ integrations, secrets }: IntegrationListProps)
     name: item.name,
     detail: memberStatus(item),
     section: sectionFor(item),
-    searchable: [item.name, ...item.accounts.map(({ label }) => label)].join(' ').toLowerCase(),
+    searchable: [item.name, item.description, ...item.accounts.map(({ label }) => label)]
+      .join(' ')
+      .toLowerCase(),
   }))
   if (secrets) {
     const managed = secrets.mode === 'organization'