Clarify credentials, permissions and setup on integration details

Author: emir-karabeg

apps/sim/platform/app/(shell)/integrations/_components/connected-credential/connected-credential.module.css

@@ -1,9 +1,14 @@
+.section {
+  display: grid;
+  gap: var(--ui-row-gap);
+}
 .identity {
   display: grid;
   min-inline-size: 0;
   gap: var(--ui-stack-gap);
+  overflow-wrap: anywhere;
 }
-.credential {
+.row {
   display: flex;
   align-items: center;
   justify-content: space-between;

apps/sim/platform/app/(shell)/integrations/_components/connected-credential/connected-credential.tsx

@@ -22,44 +22,44 @@ export function ConnectedCredential({
 }: ConnectedCredentialProps) {
   const [confirming, setConfirming] = useState(false)
   return (
-    <section aria-label='Connected credential' className={styles.credential}>
-      <div className={styles.identity}>
-        <h2 className={styles.muted} data-type='T050'>
-          Connected credential
-        </h2>
-        <p data-type='T059'>{account.label}</p>
-        {status && (
-          <p className={styles.muted} data-type='T050'>
-            {status}
-          </p>
-        )}
+    <section aria-label='Connected credential' className={styles.section}>
+      <h2 data-type='T042'>Connected credential</h2>
+      <div className={styles.row}>
+        <div className={styles.identity}>
+          <p data-type='T059'>{account.label}</p>
+          {status && (
+            <p className={styles.muted} data-type='T050'>
+              {status}
+            </p>
+          )}
+        </div>
+        <ActionMenu
+          label={`Manage ${account.label}`}
+          icon='I108'
+          triggerSize='row'
+          align='end'
+          tooltip={false}
+          actions={[
+            ...(account.canReconnect
+              ? [
+                  {
+                    id: 'reconnect',
+                    label: 'Reconnect account',
+                    disabled: !canAuthorize,
+                    onSelect: onReconnect,
+                  },
+                ]
+              : []),
+            {
+              id: 'disconnect',
+              label: 'Disconnect account',
+              destructive: true,
+              separatorBefore: account.canReconnect,
+              onSelect: () => setConfirming(true),
+            },
+          ]}
+        />
       </div>
-      <ActionMenu
-        label={`Manage ${account.label}`}
-        icon='I108'
-        triggerSize='row'
-        align='end'
-        tooltip={false}
-        actions={[
-          ...(account.canReconnect
-            ? [
-                {
-                  id: 'reconnect',
-                  label: 'Reconnect account',
-                  disabled: !canAuthorize,
-                  onSelect: onReconnect,
-                },
-              ]
-            : []),
-          {
-            id: 'disconnect',
-            label: 'Disconnect account',
-            destructive: true,
-            separatorBefore: account.canReconnect,
-            onSelect: () => setConfirming(true),
-          },
-        ]}
-      />
       {confirming && (
         <Modal
           open

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

@@ -16,9 +16,11 @@
 }
 .items {
   gap: var(--ui-list-gap);
+  list-style: disc outside;
+  padding-inline-start: var(--spacing-16);
   overflow-wrap: anywhere;
 }
-.items,
+.items li::marker,
 .heading p {
   color: var(--ui-secondary);
 }

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

@@ -84,20 +84,19 @@ export function IntegrationDetails({ integration, onChange }: IntegrationDetails
         titleRef={titleRef}
         description={integration.description}
         providerId={providerId}
-      >
-        {account && !staleCredential && (
-          <ConnectedCredential
-            account={account}
-            status={memberStatus(integration)}
-            canAuthorize={canAuthorize}
-            onReconnect={() => {
-              if (canAuthorize && account.canReconnect)
-                onChange({ ...integration, account: { ...account, status: 'active' } })
-            }}
-            onDisconnect={disconnect}
-          />
-        )}
-      </ProviderHeading>
+      />
+      {account && !staleCredential && (
+        <ConnectedCredential
+          account={account}
+          status={memberStatus(integration)}
+          canAuthorize={canAuthorize}
+          onReconnect={() => {
+            if (canAuthorize && account.canReconnect)
+              onChange({ ...integration, account: { ...account, status: 'active' } })
+          }}
+          onDisconnect={disconnect}
+        />
+      )}
       {staleCredential ? (
         <EmptyState
           title='This credential is no longer connected'

apps/sim/platform/app/(shell)/integrations/_components/provider-heading/provider-heading.module.css

@@ -9,16 +9,10 @@
   place-items: center;
   block-size: var(--leading-32);
 }
-.content,
 .copy {
   display: grid;
   min-inline-size: 0;
   overflow-wrap: anywhere;
-}
-.content {
-  gap: var(--ui-section-gap);
-}
-.copy {
   gap: var(--ui-stack-gap);
 }
 .copy p {

apps/sim/platform/app/(shell)/integrations/_components/provider-heading/provider-heading.tsx

@@ -1,35 +1,25 @@
-import type { ReactNode, Ref } from 'react'
+import type { Ref } from 'react'
 import styles from '@/platform/app/(shell)/integrations/_components/provider-heading/provider-heading.module.css'
 import { Icon } from '@/platform/design-system/components'
 
 interface ProviderHeadingProps {
   name: string
   description: string
   providerId?: string
-  children?: ReactNode
   titleRef?: Ref<HTMLHeadingElement>
 }
 
-export function ProviderHeading({
-  name,
-  description,
-  providerId,
-  children,
-  titleRef,
-}: ProviderHeadingProps) {
+export function ProviderHeading({ name, description, providerId, titleRef }: ProviderHeadingProps) {
   return (
     <header className={styles.header}>
       <span className={styles.mark}>
         {providerId ? <Icon providerId={providerId} /> : <Icon name='I070' />}
       </span>
-      <div className={styles.content}>
-        <div className={styles.copy}>
-          <h1 ref={titleRef} tabIndex={titleRef ? -1 : undefined} data-type='T076'>
-            {name}
-          </h1>
-          <p data-type='T048'>{description}</p>
-        </div>
-        {children}
+      <div className={styles.copy}>
+        <h1 ref={titleRef} tabIndex={titleRef ? -1 : undefined} data-type='T076'>
+          {name}
+        </h1>
+        <p data-type='T048'>{description}</p>
       </div>
     </header>
   )

apps/sim/platform/app/(shell)/integrations/_components/tool-permissions/tool-permissions.module.css

@@ -18,22 +18,15 @@
   color: var(--ui-secondary);
 }
 .group {
-  gap: var(--ui-list-gap);
-}
-.group + .group {
-  margin-block-start: var(--ui-section-gap);
+  gap: var(--ui-stack-gap);
 }
-.groupTitle,
 .tool {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--ui-row-gap);
   min-inline-size: 0;
 }
-.groupTitle {
-  min-block-size: var(--spacing-app-chip);
-}
 .list {
   gap: var(--ui-list-gap);
 }

apps/sim/platform/app/(shell)/integrations/_components/tool-permissions/tool-permissions.tsx

@@ -67,11 +67,9 @@ export function ToolPermissions({ account, permissions, onChange }: ToolPermissi
           ACTIONS.find((action) => action.value === defaultValue)?.label ?? defaultValue
         return (
           <section key={kind} className={styles.group} aria-label={label}>
-            <div className={styles.groupTitle}>
-              <h3 data-type='T059'>
-                <CountedLabel label={label} count={tools.length} />
-              </h3>
-            </div>
+            <h3 data-type='T059'>
+              <CountedLabel label={label} count={tools.length} />
+            </h3>
             <ul className={styles.list}>
               {matching.map((tool) => (
                 <li className={styles.tool} key={tool.id}>

apps/sim/platform/checks/integrations.spec.ts

@@ -9,7 +9,7 @@ test('an approved app can connect and disconnect a sample account during the sam
   const list = page.getByRole('main')
   await list.getByRole('searchbox', { name: 'Search integrations' }).fill('Linear issues')
   await list.getByRole('link', { name: /^Linear / }).click()
-  const guide = list.getByRole('link', { name: /Setup guide/ })
+  const guide = list.getByRole('link', { name: 'Docs (opens in a new tab)', exact: true })
   await expect(guide).toHaveAttribute('href', 'https://docs.sim.ai/search/linear')
   await expect(guide).toHaveAttribute('target', '_blank')
   await list.getByRole('button', { name: 'Linear', exact: true }).click()

apps/sim/platform/design-system/components/connection-prompt/connection-prompt.tsx

@@ -19,25 +19,19 @@ export function ConnectionPrompt({ title, options, setupGuideUrl }: ConnectionPr
     <div className={styles.prompt} data-material='shell'>
       <p data-type='T060'>{title}</p>
       <div className={styles.providers}>
+        {setupGuideUrl && (
+          <ControlRow
+            render={<Link href={setupGuideUrl} target='_blank' rel='noopener noreferrer' />}
+            icon='I079'
+            label='Docs'
+            accessibleLabel='Docs (opens in a new tab)'
+          />
+        )}
         {options.map(({ label, icon, onConnect }) => (
           <Button key={label} icon={icon} onClick={onConnect} disabled={!onConnect}>
             {label}
           </Button>
         ))}
-        {setupGuideUrl && (
-          <ControlRow
-            render={
-              <Link
-                href={setupGuideUrl}
-                target='_blank'
-                rel='noopener noreferrer'
-                aria-label='Setup guide (opens in a new tab)'
-              />
-            }
-            label='Setup guide'
-            trailingIcon='I030'
-          />
-        )}
       </div>
     </div>
   )