@puredesktop/puredesktop-ui-bridge 2.1.8 → 2.1.9

package/src/components/common/connections/ProviderConnection.tsx

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  connectCredentialOAuth,
+  disconnectCredential,
+  readCredentialStatus,
+  setCredentialOAuthConfig,
+  type OAuthCredentialStatus,
+} from '../../../bridge/credentials.mjs'
+import { Button } from '../buttons/Button.js'
+import { FormField } from '../inputs/FormField.js'
+import { TextField } from '../inputs/TextField.js'
+import {
+  ConnectionButtonRow,
+  ConnectionFieldGrid,
+  ConnectionPanel,
+  ConnectionPanelText,
+  ConnectionPanelTitle,
+  ConnectionTestResult,
+} from './ConnectionSetup.js'
+
+/**
+ * Bridge surface the component talks to. Overridable for tests; production
+ * defaults to the shell credentials bridge. The shell owns all state — this
+ * component never caches connection state and never sees secret material.
+ */
+export interface ProviderConnectionClient {
+  status(request: { id: string }): Promise<OAuthCredentialStatus>
+  setOAuthConfig(request: {
+    id: string
+    clientId: string
+    clientSecret: string
+    scopes?: string[]
+  }): Promise<unknown>
+  connectOAuth(request: {
+    id: string
+    scopes?: string[]
+  }): Promise<{ email?: string }>
+  disconnect(request: { id: string; forget?: boolean }): Promise<unknown>
+}
+
+const bridgeClient: ProviderConnectionClient = {
+  status: readCredentialStatus,
+  setOAuthConfig: setCredentialOAuthConfig,
+  connectOAuth: connectCredentialOAuth,
+  disconnect: disconnectCredential,
+}
+
+export interface ProviderConnectionProps {
+  /** Shell credential id, e.g. `google.oauth`. */
+  credentialId: string
+  title: string
+  description?: string
+  /** Scopes this app needs; merged into the connection request. */
+  scopes?: string[]
+  /** "How to create an OAuth client" walkthrough for the unconfigured state. */
+  helpUrl?: string
+  /** Called after connect/disconnect so the host app can rebuild providers. */
+  onStatusChange?: (status: OAuthCredentialStatus) => void
+  client?: ProviderConnectionClient
+}
+
+type Busy = 'idle' | 'saving' | 'connecting' | 'disconnecting'
+
+export function ProviderConnection({
+  credentialId,
+  title,
+  description,
+  scopes,
+  helpUrl,
+  onStatusChange,
+  client = bridgeClient,
+}: ProviderConnectionProps): React.ReactElement {
+  const [status, setStatus] = useState<OAuthCredentialStatus | null>(null)
+  const [clientIdDraft, setClientIdDraft] = useState('')
+  const [clientSecretDraft, setClientSecretDraft] = useState('')
+  const [busy, setBusy] = useState<Busy>('idle')
+  const [error, setError] = useState<string | null>(null)
+
+  const refresh = useCallback(async () => {
+    const next = await client.status({ id: credentialId })
+    setStatus(next)
+    onStatusChange?.(next)
+    return next
+  }, [client, credentialId, onStatusChange])
+
+  useEffect(() => {
+    refresh().catch(cause =>
+      setError(cause instanceof Error ? cause.message : String(cause)),
+    )
+  }, [refresh])
+
+  const scopesRequest = useMemo(
+    () => (scopes?.length ? { scopes } : {}),
+    [scopes],
+  )
+
+  const saveConfig = useCallback(async () => {
+    setBusy('saving')
+    setError(null)
+    try {
+      await client.setOAuthConfig({
+        id: credentialId,
+        clientId: clientIdDraft,
+        clientSecret: clientSecretDraft,
+        ...scopesRequest,
+      })
+      // Write-only: the secret leaves the DOM the moment it is saved.
+      setClientSecretDraft('')
+      setClientIdDraft('')
+      await refresh()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setBusy('idle')
+    }
+  }, [client, credentialId, clientIdDraft, clientSecretDraft, refresh, scopesRequest])
+
+  const connect = useCallback(async () => {
+    setBusy('connecting')
+    setError(null)
+    try {
+      await client.connectOAuth({ id: credentialId, ...scopesRequest })
+      await refresh()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setBusy('idle')
+    }
+  }, [client, credentialId, refresh, scopesRequest])
+
+  const disconnect = useCallback(async () => {
+    setBusy('disconnecting')
+    setError(null)
+    try {
+      await client.disconnect({ id: credentialId })
+      await refresh()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setBusy('idle')
+    }
+  }, [client, credentialId, refresh])
+
+  const configured = status?.configured === true
+  const connected = status?.connected === true
+  const needsReconnect = status?.needsReconnect === true
+  const working = busy !== 'idle'
+
+  return (
+    <ConnectionPanel aria-busy={working}>
+      <ConnectionPanelTitle>{title}</ConnectionPanelTitle>
+      {description ? (
+        <ConnectionPanelText>{description}</ConnectionPanelText>
+      ) : null}
+
+      {!configured ? (
+        <>
+          <ConnectionPanelText>
+            Paste the OAuth client id and secret from your Google Cloud
+            console.{' '}
+            {helpUrl ? (
+              <a href={helpUrl} target="_blank" rel="noreferrer">
+                How to create an OAuth client
+              </a>
+            ) : null}
+          </ConnectionPanelText>
+          <ConnectionFieldGrid>
+            <FormField label="Client id" htmlFor={`${credentialId}-client-id`}>
+              <TextField
+                id={`${credentialId}-client-id`}
+                value={clientIdDraft}
+                autoComplete="off"
+                spellCheck={false}
+                disabled={working}
+                onChange={event => setClientIdDraft(event.target.value)}
+              />
+            </FormField>
+            <FormField
+              label="Client secret"
+              htmlFor={`${credentialId}-client-secret`}
+              hint="Stored in the encrypted vault; never shown again."
+            >
+              <TextField
+                id={`${credentialId}-client-secret`}
+                type="password"
+                value={clientSecretDraft}
+                autoComplete="off"
+                spellCheck={false}
+                disabled={working}
+                onChange={event => setClientSecretDraft(event.target.value)}
+              />
+            </FormField>
+          </ConnectionFieldGrid>
+          <ConnectionButtonRow>
+            <Button
+              type="button"
+              disabled={
+                working || !clientIdDraft.trim() || !clientSecretDraft.trim()
+              }
+              onClick={() => void saveConfig()}
+            >
+              {busy === 'saving' ? 'Saving…' : 'Save'}
+            </Button>
+          </ConnectionButtonRow>
+        </>
+      ) : null}
+
+      {configured && !connected && !needsReconnect ? (
+        <ConnectionButtonRow>
+          <Button
+            type="button"
+            variant="subtle"
+            disabled={working}
+            onClick={() => void disconnect()}
+          >
+            Remove
+          </Button>
+          <Button
+            type="button"
+            disabled={working}
+            onClick={() => void connect()}
+          >
+            {busy === 'connecting' ? 'Waiting for browser…' : 'Sign in with Google'}
+          </Button>
+        </ConnectionButtonRow>
+      ) : null}
+
+      {needsReconnect ? (
+        <ConnectionTestResult
+          tone="warning"
+          title="Reconnect required"
+          message={
+            status?.email
+              ? `Access for ${status.email} has expired or was revoked.`
+              : 'Access has expired or was revoked.'
+          }
+        />
+      ) : null}
+
+      {configured && (connected || needsReconnect) ? (
+        <ConnectionButtonRow>
+          <Button
+            type="button"
+            variant="subtle"
+            disabled={working}
+            onClick={() => void disconnect()}
+          >
+            Disconnect
+          </Button>
+          <Button
+            type="button"
+            disabled={working}
+            onClick={() => void connect()}
+          >
+            {busy === 'connecting'
+              ? 'Waiting for browser…'
+              : needsReconnect
+                ? 'Reconnect'
+                : 'Reconnect account'}
+          </Button>
+        </ConnectionButtonRow>
+      ) : null}
+
+      {connected ? (
+        <ConnectionTestResult
+          tone="success"
+          title={status?.email ? `Connected as ${status.email}` : 'Connected'}
+          message="Mail and Calendar share this connection."
+        />
+      ) : null}
+
+      {error ? (
+        <ConnectionTestResult tone="error" title="Something went wrong" message={error} />
+      ) : null}
+    </ConnectionPanel>
+  )
+}

package/src/components/common/connections/index.ts

@@ -24,3 +24,8 @@ export {
   type ConnectionTestResultProps,
   type ConnectionTestTone,
 } from './ConnectionSetup.js'
+export {
+  ProviderConnection,
+  type ProviderConnectionClient,
+  type ProviderConnectionProps,
+} from './ProviderConnection.js'

package/src/components/common/containers/AppFrame.tsx

@@ -15,14 +15,18 @@ export interface AppFrameProps
   themeFromBridge?: boolean
   /** Optional actions rendered in the app header's action slot. */
   headerActions?: ReactNode
-  /** Open document's file name, shown beside the wordmark. */
-  headerDocumentName?: ReactNode
-}
+  /** Open document's file name, shown beside the wordmark. */
+  headerDocumentName?: ReactNode
+  /** Hide the app wordmark when identity is already provided by host chrome. */
+  hideWordmark?: boolean
+  /** Optional app identity slug used before the shell bridge is ready. */
+  identityAppSlug?: string
+}
 
 const StyledRoot = styled.div`
   display: flex;
   flex-direction: column;
-  /* width: 100%; */
+  width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
@@ -38,10 +42,12 @@ export function AppFrame({
   children,
   className,
   themeFromBridge = true,
-  headerActions,
-  headerDocumentName,
-  ...rest
-}: AppFrameProps): React.ReactElement {
+  headerActions,
+  headerDocumentName,
+  hideWordmark = false,
+  identityAppSlug,
+  ...rest
+}: AppFrameProps): React.ReactElement {
   const { meta, ready } = usePlatformBridge()
   const { manifest } = usePlatformAppManifest(meta?.appSlug ?? null, ready)
 
@@ -51,17 +57,18 @@ export function AppFrame({
 
   useEffect(() => {
     const root = document.documentElement
-    if (meta?.appSlug) {
-      root.dataset.app = meta.appSlug
+    const appSlug = meta?.appSlug ?? identityAppSlug
+    if (appSlug) {
+      root.dataset.app = appSlug
     } else {
       delete root.dataset.app
     }
     return () => {
-      if (root.dataset.app === meta?.appSlug) {
+      if (root.dataset.app === appSlug) {
         delete root.dataset.app
       }
     }
-  }, [meta?.appSlug])
+  }, [identityAppSlug, meta?.appSlug])
 
   usePlatformThemeFromBridge(themeFromBridge)
   const themeAttrs = usePlatformThemeDocumentAttrs(themeFromBridge)
@@ -76,13 +83,13 @@ export function AppFrame({
         data-platform-surface-palette={themeAttrs.surfacePalette || undefined}
         {...rest}
       >
-        {manifest && (
-          <AppHeader
-            manifest={manifest}
-            actions={headerActions}
-            documentName={headerDocumentName}
-          />
-        )}
+        {manifest && !hideWordmark && (
+          <AppHeader
+            manifest={manifest}
+            actions={headerActions}
+            documentName={headerDocumentName}
+          />
+        )}
         {children}
       </StyledRoot>
     </>

package/src/components/common/containers/AppHeader.tsx

@@ -4,13 +4,13 @@ import type { PlatformAppManifest } from '../../../bridge/types.js'
 
 export type { PlatformAppManifest }
 
-export interface AppHeaderProps {
-  manifest: PlatformAppManifest
-  /** Optional slot for the app's tools — the header earns its row. */
-  actions?: React.ReactNode
-  /**
-   * Convention: the open document's file name, shown beside the wordmark
-   * (like any document-based app's window title).
+export interface AppHeaderProps {
+  manifest: PlatformAppManifest
+  /** Optional slot for the app's tools — the header earns its row. */
+  actions?: React.ReactNode
+  /**
+   * Convention: the open document's file name, shown beside the wordmark
+   * (like any document-based app's window title).
    */
   documentName?: React.ReactNode
 }
@@ -66,19 +66,19 @@ const ActionSlot = styled.div`
 
 export const APP_HEADER_ACTIONS_PORTAL_ID = 'purescience-app-header-actions'
 
-export function AppHeader({
-  manifest,
-  actions,
-  documentName,
-}: AppHeaderProps): React.ReactElement {
-  return (
-    <StyledHeader>
-      <PureAppWordmark
-        appName={manifest.navigationLabel ?? manifest.slug}
-        size="sm"
-        accentName
-      />
-      {documentName ? <DocumentName>{documentName}</DocumentName> : null}
+export function AppHeader({
+  manifest,
+  actions,
+  documentName,
+}: AppHeaderProps): React.ReactElement {
+  return (
+    <StyledHeader>
+      <PureAppWordmark
+        appName={manifest.navigationLabel ?? manifest.slug}
+        size="sm"
+        accentName
+      />
+      {documentName ? <DocumentName>{documentName}</DocumentName> : null}
       <ActionSlot id={APP_HEADER_ACTIONS_PORTAL_ID}>{actions}</ActionSlot>
     </StyledHeader>
   )