Show catalog descriptions, a single credential, and actual Search access

Author: emir-karabeg

apps/sim/platform/app/(shell)/_components/session/integration-changes.tsx

@@ -5,7 +5,7 @@ import type { IntegrationsData, OrganizationIntegration } from '@/platform/lib/i
 
 type AccountEdits = Pick<
   OrganizationIntegration,
-  'accounts' | 'connectableMethod' | 'connectionCandidate'
+  'account' | 'connectableMethod' | 'connectionCandidate'
 >
 
 function useEdits() {
@@ -37,7 +37,7 @@ export function useOrganizationIntegrations(data: IntegrationsData | null) {
       setAccounts((current) => ({
         ...current,
         [item.providerId]: {
-          accounts: item.accounts,
+          account: item.account,
           connectableMethod: item.connectableMethod,
           connectionCandidate: item.connectionCandidate,
         },

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

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

…redential-actions/credential-actions.tsx …cted-credential/connected-credential.tsxapps/sim/platform/app/(shell)/integrations/_components/credential-actions/credential-actions.tsx renamed to apps/sim/platform/app/(shell)/integrations/_components/connected-credential/connected-credential.tsx apps/sim/platform/app/(shell)/integrations/_components/credential-actions/credential-actions.tsx renamed to apps/sim/platform/app/(shell)/integrations/_components/connected-credential/connected-credential.tsx

@@ -1,25 +1,39 @@
 'use client'
 
 import { useState } from 'react'
+import styles from '@/platform/app/(shell)/integrations/_components/connected-credential/connected-credential.module.css'
 import { ActionMenu, Modal } from '@/platform/design-system/components'
 import type { IntegrationAccount } from '@/platform/lib/integrations/model'
 
-interface CredentialActionsProps {
+interface ConnectedCredentialProps {
   account: IntegrationAccount
+  status?: string
   canAuthorize: boolean
   onReconnect: () => void
   onDisconnect: () => void
 }
 
-export function CredentialActions({
+export function ConnectedCredential({
   account,
+  status,
   canAuthorize,
   onReconnect,
   onDisconnect,
-}: CredentialActionsProps) {
+}: 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>
+        )}
+      </div>
       <ActionMenu
         label={`Manage ${account.label}`}
         icon='I108'
@@ -58,6 +72,6 @@ export function CredentialActions({
           onConfirm={onDisconnect}
         />
       )}
-    </>
+    </section>
   )
 }

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

@@ -1,25 +1,24 @@
 .section,
-.scopes,
-.scope {
+.heading,
+.group,
+.items {
   display: grid;
   min-inline-size: 0;
 }
 .section {
   gap: var(--ui-section-gap);
 }
-.header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+.heading {
+  gap: var(--ui-stack-gap);
+}
+.group {
   gap: var(--ui-row-gap);
 }
-.scopes {
+.items {
   gap: var(--ui-list-gap);
-  margin-block-start: var(--ui-row-gap);
-}
-.scope {
-  gap: var(--ui-stack-gap);
   overflow-wrap: anywhere;
+}
+.items,
+.heading p {
   color: var(--ui-secondary);
 }

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

@@ -1,51 +1,66 @@
-'use client'
-
-import { useState } from 'react'
 import styles from '@/platform/app/(shell)/integrations/_components/connection-access/connection-access.module.css'
 import {
   SCOPE_GROUPS,
   scopeGroup,
 } from '@/platform/app/(shell)/integrations/_components/connection-access/scope-groups'
-import { Button, Disclosure } from '@/platform/design-system/components'
+import { CountedLabel } from '@/platform/design-system/components/overflow-text/counted-label'
 import type { OrganizationIntegration } from '@/platform/lib/integrations/model'
 
+interface AccessGroupProps {
+  title: string
+  items: readonly { id: string; label: string }[]
+}
+
+function AccessGroup({ title, items }: AccessGroupProps) {
+  if (!items.length) return null
+  return (
+    <div className={styles.group}>
+      <h3 data-type='T059'>
+        <CountedLabel label={title} count={items.length} />
+      </h3>
+      <ul className={styles.items} aria-label={title}>
+        {items.map(({ id, label }) => (
+          <li data-type='T060' key={id}>
+            {label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
 interface ConnectionAccessProps {
   integration: OrganizationIntegration
 }
 
 export function ConnectionAccess({ integration }: ConnectionAccessProps) {
-  const [showIds, setShowIds] = useState(false)
-  const scopes = integration.requestedScopes
-  if (!scopes?.length) return null
+  const { searchReads, searchResource, requestedScopes, availability, accessDescription } =
+    integration
   return (
-    <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>
+    <>
+      {searchResource &&
+        availability === 'ready' &&
+        (searchReads.length > 0 || !requestedScopes?.length) && (
+          <section className={styles.section} aria-label='Search access'>
+            <header className={styles.heading}>
+              <h2 data-type='T093'>Search access</h2>
+              <p data-type='T060'>{accessDescription}</p>
+            </header>
+            <AccessGroup title='Read-only tools' items={searchReads} />
+          </section>
+        )}
+      {requestedScopes && requestedScopes.length > 0 && (
+        <section className={styles.section} aria-label='Requested permissions'>
+          <h2 data-type='T093'>Requested permissions</h2>
+          {SCOPE_GROUPS.map((group) => (
+            <AccessGroup
+              key={group}
+              title={group}
+              items={requestedScopes.filter(({ id }) => scopeGroup(id) === group)}
+            />
+          ))}
+        </section>
+      )}
+    </>
   )
 }