Simplify integration headers and group member permissions

Author: emir-karabeg

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

@@ -1,15 +1,25 @@
+.section,
 .scopes,
 .scope {
   display: grid;
   min-inline-size: 0;
 }
-.scopes {
+.section {
   gap: var(--ui-section-gap);
 }
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-row-gap);
+}
+.scopes {
+  gap: var(--ui-list-gap);
+  margin-block-start: var(--ui-row-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.tsx

@@ -1,24 +1,51 @@
+'use client'
+
+import { useState } from 'react'
 import styles from '@/platform/app/(shell)/integrations/_components/connection-access/connection-access.module.css'
-import { Disclosure } from '@/platform/design-system/components'
+import {
+  SCOPE_GROUPS,
+  scopeGroup,
+} from '@/platform/app/(shell)/integrations/_components/connection-access/scope-groups'
+import { Button, Disclosure } from '@/platform/design-system/components'
 import type { OrganizationIntegration } from '@/platform/lib/integrations/model'
 
 interface ConnectionAccessProps {
   integration: OrganizationIntegration
 }
 
 export function ConnectionAccess({ integration }: ConnectionAccessProps) {
+  const [showIds, setShowIds] = useState(false)
   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>
+    <section className={styles.section} aria-label='Requested permissions'>
+      <header className={styles.header}>
+        <h2 data-type='T093'>Requested permissions</h2>
+        <Button
+          size='compact'
+          variant='quiet'
+          render={<button type='button' aria-expanded={showIds} />}
+          onClick={() => setShowIds(!showIds)}
+        >
+          {showIds ? 'Hide scope IDs' : 'Show scope IDs'}
+        </Button>
+      </header>
+      {SCOPE_GROUPS.map((group) => {
+        const entries = scopes.filter(({ id }) => scopeGroup(id) === group)
+        if (!entries.length) return null
+        return (
+          <Disclosure key={group} label={group} initiallyOpen>
+            <ul className={styles.scopes} aria-label={group}>
+              {entries.map(({ id, label }) => (
+                <li key={id} className={styles.scope}>
+                  <span data-type='T060'>{label}</span>
+                  {showIds && label !== id && <span data-type='T050'>{id}</span>}
+                </li>
+              ))}
+            </ul>
+          </Disclosure>
+        )
+      })}
+    </section>
   )
 }

apps/sim/platform/app/(shell)/integrations/_components/connection-access/scope-groups.ts

@@ -0,0 +1,35 @@
+const ACCOUNT_SCOPES = new Set([
+  'openid',
+  'userinfo.email',
+  'userinfo.profile',
+  'read:me',
+  'offline_access',
+  'refresh_token',
+])
+
+const GOOGLE_WRITE_SCOPES = new Set([
+  'gmail.send',
+  'gmail.modify',
+  'gmail.labels',
+  'calendar',
+  'drive',
+  'drive.file',
+  'meetings.space.created',
+])
+
+export const SCOPE_GROUPS = [
+  'Account and sign-in',
+  'Read and search',
+  'Write and manage',
+  'Provider access',
+] as const
+
+export function scopeGroup(id: string): (typeof SCOPE_GROUPS)[number] {
+  const scope = id.replace(/^https:\/\/www\.googleapis\.com\/auth\//, '')
+  if (ACCOUNT_SCOPES.has(scope)) return 'Account and sign-in'
+  if (GOOGLE_WRITE_SCOPES.has(scope) || /^(write|delete|manage)(:|$)/.test(scope))
+    return 'Write and manage'
+  if (/^(read|search)(:|$)|:(read|history)([.:]|$)|\.readonly$/.test(scope))
+    return 'Read and search'
+  return 'Provider access'
+}

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

@@ -0,0 +1,63 @@
+'use client'
+
+import { useState } from 'react'
+import { ActionMenu, Modal } from '@/platform/design-system/components'
+import type { IntegrationAccount } from '@/platform/lib/integrations/model'
+
+interface CredentialActionsProps {
+  account: IntegrationAccount
+  canAuthorize: boolean
+  onReconnect: () => void
+  onDisconnect: () => void
+}
+
+export function CredentialActions({
+  account,
+  canAuthorize,
+  onReconnect,
+  onDisconnect,
+}: CredentialActionsProps) {
+  const [confirming, setConfirming] = useState(false)
+  return (
+    <>
+      <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
+          onOpenChange={setConfirming}
+          title='Disconnect account?'
+          variant='confirm'
+          destructive
+          description={`Sim will lose access to ${account.label}.`}
+          confirmLabel='Disconnect'
+          onConfirm={onDisconnect}
+        />
+      )}
+    </>
+  )
+}

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

@@ -1,22 +1,11 @@
-.sections,
 .account,
 .list {
   display: grid;
   min-inline-size: 0;
 }
-.sections {
-  gap: var(--ui-product-section-gap);
-}
 .account {
   gap: var(--ui-section-gap);
 }
-.header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ui-row-gap);
-}
 .list {
   gap: var(--ui-list-gap);
   margin-inline: calc(-1 * var(--ui-row-inset));