@wildo-ai/saas-frontend-lib 1.1.5 → 1.1.6

package/dist/esm/components/settings/AppPage_ConnectedAccountsSettings.js

@@ -39,21 +39,40 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * integration have different owners, different authorization and different readers, and the scope is
  * what keeps them apart at every call this panel makes.
  *
+ * ## One row per CONNECTION, never one per ref (#1727)
+ *
+ * A vendor can be served by several refs — an engine part and the add-on packages beside it — declared as one shared
+ * connection (`providers.sharedConnections`, #1725) that holds ONE grant (#1670). So both halves of this panel speak in
+ * connections: the chooser offers one entry per connection (the catalogue folds members into their base and names
+ * them in `servesRefs`), and the list above it shows one row per connection the owner holds — its vendor label, the
+ * features it serves, the scopes its consent has accumulated (#1671), one health state, one "grant more access" when a
+ * feature was refused for a missing scope, and one disconnect that says it ends access for every feature listed. A
+ * vendor served by one ref is a connection of one ref and reads as it always did.
+ *
+ * Vendor names are the i18n tree's `providers.<ref>.displayName` (`buildProviderDisplayNameLabelKey`), owned by the
+ * connection's BASE ref; a name nobody has authored renders the raw ref, so the gap looks like a gap.
+ *
  * assurance-control: WILDO.IDENTITY.DELEGATED_AUTHORIZATION — the surface on which a principal
  * authorizes this application to act toward a named third party on their behalf.
  */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { z } from 'zod';
 import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
-import { isWildoBackendError, ProviderAuthMethod, ProviderConnectabilityBlocker } from '@wildo-ai/saas-models';
+import { buildProviderDisplayNameLabelKey, isWildoBackendError, ProviderAuthMethod, ProviderConnectabilityBlocker, ProviderCredentialValidationState, } from '@wildo-ai/saas-models';
 import { ExternalProvider_Connection_DelegationMode, ExternalProvider_Connection_OwnerScope, ProviderOAuth2EndpointPlaceholderPosition, connectionLendsMemberAccountToOrganization, connectionTargetNamesActingUser, } from '@wildo-ai/external-connectors-models';
-import { Card, CardContent, CardHeader, CardTitle } from '../../components/sections/card.js';
+import { Card, CardContent } from '../../components/sections/card.js';
 import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
 import { InputRoot } from '../../components/form/controls/input.js';
 import { Checkbox } from '../../components/form/controls/boolean/checkbox.js';
 import { Select } from '../../components/form/controls/enum/select.js';
 import { Text } from '../../components/typography/text.js';
 import { Alert, AlertDescription } from '../../components/overlays/containers/alert.js';
+import { Badge } from '../../components/data-display/badge.js';
+import { DescriptionDetails, DescriptionList, DescriptionTerm } from '../../components/data-display/description-list.js';
+import { Subheading } from '../../components/typography/heading.js';
+import { collectFrontendProviderDisplayLabelKeys, resolveFrontendProviderDisplayLabel, } from '../../core/external-providers/frontend-provider-display-label.frontend.utils.js';
+import { findProviderScopeReauthorizationOffer, useProviderScopeReauthorizationOffers, } from '../../core/external-providers/provider-scope-reauthorization-offers.frontend.js';
+import { useOwnerProviderConnections } from './useOwnerProviderConnections.js';
 import { useI18n } from '../../core/i18n/useI18n.js';
 import { useUserOrgs } from '../../core/security/useUserOrgs.js';
 import { getManualCallsHttpClient, } from '../../core/requests/wildo-http-client-manual-calls.frontend.service.js';
@@ -159,6 +178,81 @@ export const describeRequestedScopes = (scopes, answers, pendingLabel) => scopes
     const answer = (Object.hasOwn(answers, placeholder[1]) ? answers[placeholder[1]] : undefined)?.trim() ?? '';
     return answer === '' ? pendingLabel : `${answer}${scope.slice(placeholder[0].length)}`;
 });
+/**
+ * How one CONNECTION stands, as the list shows it (#1727) — one state for the connection, never one per ref.
+ *
+ * Ordered by what the person must do: a superseded row serves nothing any more, a disabled one resolves as absent, a
+ * refused one must be re-authorized; only then does the grant's own validation say whether it has been proven.
+ */
+export var ConnectedAccountStanding;
+(function (ConnectedAccountStanding) {
+    /** Stored under a ref before that ref joined a shared connection: nothing reads it (#1670, no re-seal door). */
+    ConnectedAccountStanding["SUPERSEDED"] = "SUPERSEDED";
+    /** A row of it is disabled, so every ref it serves resolves it as absent. */
+    ConnectedAccountStanding["DISABLED"] = "DISABLED";
+    /** The vendor refused it: every ref it serves needs it re-authorized — said ONCE, on the connection. */
+    ConnectedAccountStanding["NEEDS_REAUTHORIZATION"] = "NEEDS_REAUTHORIZATION";
+    /** The vendor accepted it. */
+    ConnectedAccountStanding["WORKING"] = "WORKING";
+    /** Stored, and not yet proven either way. */
+    ConnectedAccountStanding["NOT_YET_USED"] = "NOT_YET_USED";
+})(ConnectedAccountStanding || (ConnectedAccountStanding = {}));
+/** How the last disconnect on this screen ended — the notice it owes the person. */
+export var ConnectedAccountDisconnectOutcome;
+(function (ConnectedAccountDisconnectOutcome) {
+    ConnectedAccountDisconnectOutcome["DISCONNECTED"] = "DISCONNECTED";
+    /** A row could not be deleted; rows already deleted stay deleted, and the list is read again either way. */
+    ConnectedAccountDisconnectOutcome["FAILED"] = "FAILED";
+})(ConnectedAccountDisconnectOutcome || (ConnectedAccountDisconnectOutcome = {}));
+/** The standing of one connection, from the listing's fields. */
+export const connectedAccountStanding = (connection) => {
+    if (connection.supersededByConnectionRef !== undefined)
+        return ConnectedAccountStanding.SUPERSEDED;
+    if (!connection.enabled)
+        return ConnectedAccountStanding.DISABLED;
+    switch (connection.validationState) {
+        case ProviderCredentialValidationState.INVALID:
+            return ConnectedAccountStanding.NEEDS_REAUTHORIZATION;
+        case ProviderCredentialValidationState.VALID:
+            return ConnectedAccountStanding.WORKING;
+        case ProviderCredentialValidationState.UNVALIDATED:
+            return ConnectedAccountStanding.NOT_YET_USED;
+    }
+};
+/** The authored words for each standing — one key per member, so a new standing is a compile error here. */
+const STANDING_LABEL_KEY = {
+    [ConnectedAccountStanding.SUPERSEDED]: 'statusSuperseded',
+    [ConnectedAccountStanding.DISABLED]: 'statusDisabled',
+    [ConnectedAccountStanding.NEEDS_REAUTHORIZATION]: 'statusNeedsReauthorization',
+    [ConnectedAccountStanding.WORKING]: 'statusWorking',
+    [ConnectedAccountStanding.NOT_YET_USED]: 'statusNotYetUsed',
+};
+/**
+ * What a pending re-authorization offer (#1671) still asks of THIS connection — `undefined` when nothing is left.
+ *
+ * The offer was composed when a call was refused; the connection may have been granted some of those scopes since
+ * (another re-authorization, a reconnect). So a scope the connection already records is dropped here rather than
+ * requested again — the start leg would refuse it as `SCOPES_ALREADY_GRANTED` anyway, and asking a person to consent
+ * to what they already granted is noise. An offer for another connection is not this connection's.
+ */
+export const pendingReauthorizationFor = (connection, offer) => {
+    if (offer === undefined || offer.connectionRef !== connection.connectionRef)
+        return undefined;
+    const granted = new Set(connection.grantedScopes ?? []);
+    const requestableScopes = offer.requestableScopes.filter((scope) => !granted.has(scope));
+    const administratorConsentScopes = offer.administratorConsentScopes.filter((scope) => !granted.has(scope));
+    if (requestableScopes.length === 0 && administratorConsentScopes.length === 0)
+        return undefined;
+    return { requestableScopes, administratorConsentScopes, offer };
+};
+/**
+ * Every provider display-label key the panel may render (#1727): each connection's and each served ref's, from the
+ * catalogue and from the listing. The i18n tree's `providers.<ref>.displayName` is the only source of a vendor's name.
+ */
+export const collectConnectedAccountLabelKeys = (providers, connections) => collectFrontendProviderDisplayLabelKeys([
+    ...providers.flatMap((provider) => [provider.providerRef, ...(provider.servesRefs ?? [])]),
+    ...connections.flatMap((connection) => [connection.connectionRef, ...connection.servesRefs, ...(connection.supersededByConnectionRef === undefined ? [] : [connection.supersededByConnectionRef])]),
+].map(buildProviderDisplayNameLabelKey));
 /**
  * What the callback left in the URL on its way back. Read once — see the panel's mount.
  *
@@ -194,6 +288,64 @@ const clearApprovalFromAddressBar = () => {
     url.searchParams.delete('code');
     window.history.replaceState(window.history.state, '', url.toString());
 };
+/**
+ * "Grant more access" on one connection (#1671, #1727): grow the stored grant by exactly the scopes a refused call
+ * needs, through the ref that call used, naming the operation so the grant's audit row names its cause.
+ *
+ * ## It asks only what the declaration leaves open, like the connect form
+ *
+ * The start leg checks the (owner scope, delegation) pair, and the grant's audit row records the delegation, so a
+ * delegation is never assumed: one admitted at this scope is the answer; several (the engine `microsoft` admits both a
+ * tenant identity and a member's own account for an organization) are a question for the person, asked here with the
+ * connect form's own words. A connection that lends a member's account to the organization asks for the same
+ * acknowledgement the connect did.
+ *
+ * ## Only the member who linked an organization's account may grow it
+ *
+ * The start leg refuses anyone else (`NOT_THE_LINKING_MEMBER`, failing closed when no linker is recorded), so the
+ * button is not offered to them: they are told who can, instead of pressing into a refusal.
+ */
+const ConnectionGrowAction = ({ connection, pending, catalogueEntry, ownerScope, ownerId, signedInUserId, label, t, tWith, }) => {
+    const acknowledgementDescriptionId = useId();
+    const [delegationChoice, setDelegationChoice] = useState('');
+    const [acknowledged, setAcknowledged] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const delegations = catalogueEntry === undefined ? [] : admissibleDelegationsForScope(catalogueEntry, ownerScope);
+    const delegation = delegations.length === 1 ? delegations[0] : delegations.find((candidate) => candidate === delegationChoice);
+    const lends = delegation !== undefined && connectionLendsMemberAccountToOrganization({ ownerScope, delegation });
+    const mayGrow = ownerScope === ExternalProvider_Connection_OwnerScope.USER
+        || (connection.linkedByUserId !== undefined && connection.linkedByUserId === signedInUserId);
+    const grow = useCallback(async () => {
+        if (ownerId === null || delegation === undefined)
+            return;
+        setBusy(true);
+        setFailed(false);
+        try {
+            const { authorizeUrl } = await getManualCallsHttpClient().startProviderConnection(pending.offer.providerRef, {
+                target: buildConnectionTarget({ ownerScope, ownerId, delegation, signedInUserId }),
+                addScopes: pending.requestableScopes,
+                forOperationId: pending.offer.operationId,
+                ...(lends ? { acknowledgesOrganizationWideUse: acknowledged } : {}),
+            });
+            // The browser leaves for the vendor; see the connect handler for why nothing is set afterwards.
+            window.location.href = authorizeUrl;
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setFailed(true);
+            setBusy(false);
+        }
+    }, [acknowledged, delegation, lends, ownerId, ownerScope, pending, signedInUserId]);
+    return (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-xs", children: t('reauthorizationOfferDescription') }), pending.requestableScopes.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('reauthorizationScopesPrefix'), ' ', pending.requestableScopes.join(', ')] })), pending.administratorConsentScopes.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('reauthorizationAdministratorPrefix'), ' ', pending.administratorConsentScopes.join(', ')] })), pending.requestableScopes.length > 0 && !mayGrow && (_jsx(Text, { className: "text-xs text-muted-foreground", children: t('reauthorizationLinkerOnlyNotice') })), pending.requestableScopes.length > 0 && mayGrow && (_jsxs(_Fragment, { children: [delegations.length > 1 && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('delegationHeading') }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('delegationDescription') }), _jsx(Select, { name: `delegation-${connection.connectionRef}`, schema: DELEGATION_SCHEMA, options: delegations.map((mode) => ({
+                                    value: mode,
+                                    label: t(mode === ExternalProvider_Connection_DelegationMode.SERVICE ? 'delegationServiceOption' : 'delegationUserOption'),
+                                })), value: delegationChoice, placeholder: t('delegationPlaceholder'), onChange: (mode) => {
+                                    setDelegationChoice(mode);
+                                    setAcknowledged(false);
+                                } })] })), lends && (_jsxs("div", { className: "flex items-start gap-item-xs", children: [_jsx(Checkbox, { name: `organizationWideUseAcknowledged-${connection.connectionRef}`, schema: ACKNOWLEDGEMENT_SCHEMA, checked: acknowledged, onCheckedChange: setAcknowledged, "aria-describedby": acknowledgementDescriptionId }), _jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('organizationWideUseAcknowledgement') }), _jsx(Text, { id: acknowledgementDescriptionId, className: "text-xs text-muted-foreground", children: t('organizationWideUseDescription') })] })] })), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, "aria-label": tWith('grantMoreAccessAccessibleName', { provider: label }), disabled: busy || ownerId === null || delegation === undefined || (lends && !acknowledged), onClick: grow, children: t('grantMoreAccessButton') }) })] })), failed && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('errorGeneric') }) }))] }));
+};
 export const AppPage_ConnectedAccountsSettings = ({ 
 // Defaults to the person's own, which is the destination this panel was built for; the
 // organization surface passes the scope explicitly.
@@ -201,6 +353,9 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
     const { tComponent, isReady } = useI18n({ component: COMPONENT });
     const { user, currentOrganizationId } = useUserOrgs();
     const t = useCallback((key) => tComponent(COMPONENT, key), [tComponent]);
+    /** A label whose words carry a vendor name or a list — `{provider}`, `{connection}` — declared in the labels file. */
+    const tWith = useCallback((key, params) => tComponent(COMPONENT, key, params), [tComponent]);
+    const connectionsHeadingId = useId();
     /**
      * WHOSE account, resolved for the scope in play.
      *
@@ -291,6 +446,43 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
         return () => { cancelled = true; };
     }, [t]);
     const available = useMemo(() => selectProvidersForScope(providers, ownerScope), [providers, ownerScope]);
+    /** The connections this owner HOLDS — one row each (#1727). */
+    const { connections, loading: connectionsLoading, failed: connectionsFailed, disconnect, } = useOwnerProviderConnections(ownerScope, ownerId);
+    /** Re-authorization offers a refused call left behind (#1671), by connection. */
+    const offers = useProviderScopeReauthorizationOffers();
+    /*
+     * Vendor names come from the i18n tree, keyed on each connection's BASE ref. Loaded through their own `useI18n`
+     * rather than folded into the component's: the key set grows when the listing arrives, and gating the whole panel
+     * on it would blank the panel for that moment. An unloaded or unauthored name renders the raw ref.
+     */
+    const providerLabelKeys = useMemo(() => collectConnectedAccountLabelKeys(providers, connections), [providers, connections]);
+    const { t: translateProvider } = useI18n({ keys: providerLabelKeys });
+    const labelOf = useCallback((providerRef) => resolveFrontendProviderDisplayLabel({ providerRef, translate: translateProvider }), [translateProvider]);
+    /** The connection whose disconnect is awaiting confirmation — one at a time. */
+    const [confirmingDisconnectRef, setConfirmingDisconnectRef] = useState(null);
+    const [disconnectingRef, setDisconnectingRef] = useState(null);
+    const [disconnectOutcome, setDisconnectOutcome] = useState(null);
+    /**
+     * End one connection. The confirmation above the button already said it ends access for every feature listed; this
+     * deletes every row of it through the credential resource's own DELETE (`useOwnerProviderConnections`).
+     */
+    const handleDisconnect = useCallback(async (connection) => {
+        setDisconnectingRef(connection.connectionRef);
+        setDisconnectOutcome(null);
+        try {
+            await disconnect(connection);
+            setDisconnectOutcome(ConnectedAccountDisconnectOutcome.DISCONNECTED);
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setDisconnectOutcome(ConnectedAccountDisconnectOutcome.FAILED);
+        }
+        finally {
+            setDisconnectingRef(null);
+            setConfirmingDisconnectRef(null);
+        }
+    }, [disconnect]);
     /*
      * WHICH disconnect notice is true here. `undefined` from an older backend counts as "cannot be
      * told", which is the safe direction: it sends the person to check at the vendor, where the worst
@@ -414,9 +606,9 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
         return null;
     const providerOptions = available.map((provider) => ({
         value: provider.providerRef,
-        // The ref VERBATIM. There is no authored label for an open vocabulary of vendors, and deriving
-        // words from an identifier would invent display text no translator can reach.
-        label: provider.providerRef,
+        // The CONNECTION's vendor name from the i18n tree (`providers.<ref>.displayName`), one option per connection
+        // (#1727). It used to be the ref verbatim; an unauthored name still renders the ref, never words derived from it.
+        label: labelOf(provider.providerRef),
     }));
     const oauth2 = selected?.authMethods?.includes(ProviderAuthMethod.OAUTH2_AUTHORIZATION_CODE) ?? false;
     const missing = selected?.missingRegistration ?? [];
@@ -429,39 +621,50 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
     // in the address every call dials, exactly as an endpoint placeholder is a hole in the vendor's URLs.
     const unanswered = [...parameters, ...(oauth2 ? [] : credentialFields.filter((f) => f.required).map((f) => f.slug))]
         .some((key) => (answers[key] ?? '').trim() === '');
-    return (_jsxs("div", { className: "flex flex-col gap-section", children: [_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx("h3", { className: "text-base font-semibold tracking-tight", children: t('pageTitle') }), _jsx(Text, { className: "text-sm text-muted-foreground", children: t('pageDescription') })] }), outcome.connected !== undefined && (_jsx(Alert, { children: _jsx(AlertDescription, { children: t('connectedNotice') }) })), outcome.connectionError === 'declined' && (_jsx(Alert, { children: _jsx(AlertDescription, { children: t('declinedNotice') }) })), outcome.connectionError !== undefined && outcome.connectionError !== 'declined' && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('failedNotice') }) })), savedNotice && _jsx(Alert, { children: _jsx(AlertDescription, { children: savedNotice }) }), error && _jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) }), configurationGaps.length > 0 && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: _jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('configurationGapsHeading') }), _jsx(Text, { className: "text-xs", children: t('configurationGapsDescription') }), _jsx("ul", { className: "list-disc pl-4", children: configurationGaps.map((gap) => (_jsxs("li", { className: "text-xs", children: [gap.providerRef, ': ', gap.envVarNames.join(', ')] }, gap.providerRef))) })] }) }) })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('chooseProviderHeading') }) }), _jsxs(CardContent, { className: "flex flex-col gap-group", children: [loading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : providerOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (_jsxs(_Fragment, { children: [_jsx(Select, { name: "providerRef", schema: PROVIDER_REF_SCHEMA, options: providerOptions, value: selectedRef, placeholder: t('choosePlaceholder'), onChange: chooseProvider }), selected !== undefined && (_jsxs("div", { className: "flex flex-col gap-group", children: [missing.length > 0 && (_jsx(Alert, { variant: "destructive", children: _jsxs(AlertDescription, { children: [t('notRegisteredNotice'), ' ', missing.map((slot) => slot.envVarName).join(', ')] }) })), !oauth2 && missing.length === 0 && (_jsx(Text, { className: "text-xs text-muted-foreground", children: t('pastedCredentialNotice') })), delegations.length > 1 && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('delegationHeading') }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('delegationDescription') }), _jsx(Select, { name: "delegation", schema: DELEGATION_SCHEMA, options: delegations.map((mode) => ({
-                                                            value: mode,
-                                                            label: t(mode === ExternalProvider_Connection_DelegationMode.SERVICE
-                                                                ? 'delegationServiceOption'
-                                                                : 'delegationUserOption'),
-                                                        })), value: delegationChoice, placeholder: t('delegationPlaceholder'), onChange: (mode) => {
-                                                            setDelegationChoice(mode);
-                                                            // An acknowledgement given for one delegation is not consent to another:
-                                                            // switching away and back must ask again.
-                                                            setOrganizationWideUseAcknowledged(false);
-                                                        } })] })), oauth2 && scopes.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('scopesPrefix'), ' ', describeRequestedScopes(scopes, answers, t('scopeChosenBelow')).join(', ')] })), (parameters.length > 0 || (!oauth2 && credentialFields.length > 0)) && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('parametersHeading') }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('parametersDescription') })] })), [
-                                                // The credential itself, for a typed one: a secret, so a password field.
-                                                ...(oauth2 ? [] : credentialFields.map((field) => ({ key: field.slug, label: field.slug, description: field.description, choices: undefined, secret: true }))),
-                                                // The placeholders — the endpoints' for an authorization flow, the REST base URL's for
-                                                // a typed credential (#1097): which cloud, which subdomain. Not secrets, and shown.
-                                                ...parameters.map((name) => ({ key: name, label: name, description: undefined, choices: parameterChoices[name], secret: false })),
-                                            ].map((field) => (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: field.label }), field.description !== undefined && (_jsx(Text, { className: "text-xs text-muted-foreground", children: field.description })), field.choices !== undefined && (field.choices.hostSuffixes ?? []).length === 0 ? (_jsx(Select, { name: field.key, schema: CONNECTION_PARAMETER_SCHEMA, options: field.choices.values.map((value) => ({ value, label: value })), value: answers[field.key] ?? '', onChange: (value) => setAnswers((previous) => ({ ...previous, [field.key]: value })) })) : (_jsxs(_Fragment, { children: [field.choices !== undefined && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('parameterAdmittedHostsPrefix'), ' ', [
-                                                                        ...field.choices.values,
-                                                                        ...(field.choices.hostSuffixes ?? []).map((suffix) => (field.choices?.position === ProviderOAuth2EndpointPlaceholderPosition.ORIGIN
-                                                                            ? `https://*${suffix}`
-                                                                            : `*${suffix}`)),
-                                                                    ].join(', ')] })), _jsx(InputRoot, { "aria-label": field.label, 
-                                                                // A credential is typed into a password field; a connection parameter — which
-                                                                // cloud, which directory — is not a secret and is shown.
-                                                                type: field.secret ? 'password' : 'text', value: answers[field.key] ?? '', onChange: (event) => setAnswers((previous) => ({ ...previous, [field.key]: event.target.value })) })] }))] }, field.key))), lendsAccountToOrganization && (_jsxs("div", { className: "flex items-start gap-item-xs", children: [_jsx(Checkbox, { name: "organizationWideUseAcknowledged", schema: ACKNOWLEDGEMENT_SCHEMA, checked: organizationWideUseAcknowledged, onCheckedChange: setOrganizationWideUseAcknowledged, "aria-describedby": "organization-wide-use-description" }), _jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('organizationWideUseAcknowledgement') }), _jsx(Text, { id: "organization-wide-use-description", className: "text-xs text-muted-foreground", children: t('organizationWideUseDescription') })] })] })), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, disabled: busy
-                                                        || ownerId === null
-                                                        // Any blocker except NO_AUTHORIZATION_FLOW, which is the typed-credential path this
-                                                        // same button serves. An endpoint the provider cannot resolve (#623) refuses on
-                                                        // press whatever is typed, so the button must not invite the press.
-                                                        || (selected.notConnectableBecause !== undefined
-                                                            && selected.notConnectableBecause !== ProviderConnectabilityBlocker.NO_AUTHORIZATION_FLOW)
-                                                        || unanswered
-                                                        || delegation === undefined
-                                                        || (lendsAccountToOrganization && !organizationWideUseAcknowledged), onClick: handleConnect, children: busy ? t('connectingButton') : t('connectButton') }) })] }))] })), _jsx(Text, { className: "text-xs text-muted-foreground", children: t(disconnectNoticeRef) })] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-section", children: [outcome.connected !== undefined && (_jsx(Alert, { children: _jsx(AlertDescription, { children: t('connectedNotice') }) })), outcome.connectionError === 'declined' && (_jsx(Alert, { children: _jsx(AlertDescription, { children: t('declinedNotice') }) })), outcome.connectionError !== undefined && outcome.connectionError !== 'declined' && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('failedNotice') }) })), savedNotice && _jsx(Alert, { children: _jsx(AlertDescription, { children: savedNotice }) }), error && _jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) }), disconnectOutcome === ConnectedAccountDisconnectOutcome.DISCONNECTED && (_jsx(Alert, { children: _jsx(AlertDescription, { children: t('disconnectedNotice') }) })), disconnectOutcome === ConnectedAccountDisconnectOutcome.FAILED && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('disconnectFailedNotice') }) })), _jsxs("section", { "aria-labelledby": connectionsHeadingId, className: "flex flex-col gap-group", children: [_jsx(Subheading, { level: 3, id: connectionsHeadingId, children: t('connectionsHeading') }), connectionsLoading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('connectionsLoading') })) : connectionsFailed ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('connectionsFailed') }) })) : connections.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('connectionsEmpty') })) : (_jsx("ul", { "aria-labelledby": connectionsHeadingId, className: "flex flex-col gap-group", children: connections.map((connection) => {
+                            const label = labelOf(connection.connectionRef);
+                            const standing = connectedAccountStanding(connection);
+                            const pending = standing === ConnectedAccountStanding.SUPERSEDED
+                                ? undefined
+                                // THIS owner's offer only: a person's own grant and their organization's share a connection ref.
+                                : pendingReauthorizationFor(connection, ownerId === null ? undefined : findProviderScopeReauthorizationOffer(offers, { ownerScope, ownerId }, connection.connectionRef));
+                            const catalogueEntry = available.find((provider) => (provider.connectionRef ?? provider.providerRef) === connection.connectionRef);
+                            const confirming = confirmingDisconnectRef === connection.connectionRef;
+                            const disconnecting = disconnectingRef === connection.connectionRef;
+                            return (_jsx("li", { children: _jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: label }), _jsxs(DescriptionList, { children: [_jsx(DescriptionTerm, { children: t('statusLabel') }), _jsx(DescriptionDetails, { children: _jsx(Badge, { variant: standing === ConnectedAccountStanding.WORKING ? 'success' : standing === ConnectedAccountStanding.NOT_YET_USED ? 'secondary' : 'destructive', children: t(STANDING_LABEL_KEY[standing]) }) }), connection.servesRefs.length > 0 && (_jsxs(_Fragment, { children: [_jsx(DescriptionTerm, { children: t('servesLabel') }), _jsx(DescriptionDetails, { children: connection.servesRefs.map(labelOf).join(', ') })] })), (connection.grantedScopes ?? []).length > 0 && (_jsxs(_Fragment, { children: [_jsx(DescriptionTerm, { children: t('grantedScopesLabel') }), _jsx(DescriptionDetails, { children: (connection.grantedScopes ?? []).join(', ') })] }))] }), standing === ConnectedAccountStanding.SUPERSEDED && connection.supersededByConnectionRef !== undefined && (_jsx(Text, { className: "text-xs text-muted-foreground", children: tWith('supersededNotice', { connection: labelOf(connection.supersededByConnectionRef) }) })), standing === ConnectedAccountStanding.NEEDS_REAUTHORIZATION && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-xs text-muted-foreground", children: t('needsReauthorizationNotice') }), catalogueEntry !== undefined && (_jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, "aria-label": tWith('reconnectAccessibleName', { provider: label }), onClick: () => chooseProvider(catalogueEntry.providerRef), children: t('reconnectButton') }) }))] })), pending !== undefined && (_jsx(ConnectionGrowAction, { connection: connection, pending: pending, catalogueEntry: catalogueEntry, ownerScope: ownerScope, ownerId: ownerId, signedInUserId: user?._id ?? null, label: label, t: t, tWith: tWith })), confirming ? (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-xs", children: tWith('disconnectConfirmDescription', { provider: label }) }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t(connection.revocationTellsVendor ? 'disconnectRevokesNotice' : 'disconnectNotice') }), _jsxs("div", { className: "flex justify-end gap-item-xs", children: [_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.GHOST, disabled: disconnecting, onClick: () => setConfirmingDisconnectRef(null), children: t('disconnectCancelButton') }), _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DESTRUCTIVE, "aria-label": tWith('disconnectConfirmAccessibleName', { provider: label }), disabled: disconnecting, onClick: () => { void handleDisconnect(connection); }, children: t('disconnectConfirmButton') })] })] })) : (_jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, "aria-label": tWith('disconnectAccessibleName', { provider: label }), disabled: disconnectingRef !== null, onClick: () => { setConfirmingDisconnectRef(connection.connectionRef); setDisconnectOutcome(null); }, children: t('disconnectButton') }) }))] }) }) }, connection.connectionRef));
+                        }) }))] }), configurationGaps.length > 0 && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: _jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('configurationGapsHeading') }), _jsx(Text, { className: "text-xs", children: t('configurationGapsDescription') }), _jsx("ul", { className: "list-disc pl-4", children: configurationGaps.map((gap) => (_jsxs("li", { className: "text-xs", children: [labelOf(gap.providerRef), ': ', gap.envVarNames.join(', ')] }, gap.providerRef))) })] }) }) })), _jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col gap-group", children: [loading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : providerOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (_jsxs(_Fragment, { children: [_jsx(Select, { name: "providerRef", schema: PROVIDER_REF_SCHEMA, options: providerOptions, value: selectedRef, placeholder: t('choosePlaceholder'), onChange: chooseProvider }), selected !== undefined && (_jsxs("div", { className: "flex flex-col gap-group", children: [(selected.servesRefs ?? []).length > 1 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('servesLabel'), ' ', (selected.servesRefs ?? []).map(labelOf).join(', ')] })), !oauth2 && missing.length === 0 && (_jsx(Text, { className: "text-xs text-muted-foreground", children: t('pastedCredentialNotice') })), delegations.length > 1 && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('delegationHeading') }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('delegationDescription') }), _jsx(Select, { name: "delegation", schema: DELEGATION_SCHEMA, options: delegations.map((mode) => ({
+                                                        value: mode,
+                                                        label: t(mode === ExternalProvider_Connection_DelegationMode.SERVICE
+                                                            ? 'delegationServiceOption'
+                                                            : 'delegationUserOption'),
+                                                    })), value: delegationChoice, placeholder: t('delegationPlaceholder'), onChange: (mode) => {
+                                                        setDelegationChoice(mode);
+                                                        // An acknowledgement given for one delegation is not consent to another:
+                                                        // switching away and back must ask again.
+                                                        setOrganizationWideUseAcknowledged(false);
+                                                    } })] })), oauth2 && scopes.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('scopesPrefix'), ' ', describeRequestedScopes(scopes, answers, t('scopeChosenBelow')).join(', ')] })), (parameters.length > 0 || (!oauth2 && credentialFields.length > 0)) && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('parametersHeading') }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('parametersDescription') })] })), [
+                                            // The credential itself, for a typed one: a secret, so a password field.
+                                            ...(oauth2 ? [] : credentialFields.map((field) => ({ key: field.slug, label: field.slug, description: field.description, choices: undefined, secret: true }))),
+                                            // The placeholders — the endpoints' for an authorization flow, the REST base URL's for
+                                            // a typed credential (#1097): which cloud, which subdomain. Not secrets, and shown.
+                                            ...parameters.map((name) => ({ key: name, label: name, description: undefined, choices: parameterChoices[name], secret: false })),
+                                        ].map((field) => (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: field.label }), field.description !== undefined && (_jsx(Text, { className: "text-xs text-muted-foreground", children: field.description })), field.choices !== undefined && (field.choices.hostSuffixes ?? []).length === 0 ? (_jsx(Select, { name: field.key, schema: CONNECTION_PARAMETER_SCHEMA, options: field.choices.values.map((value) => ({ value, label: value })), value: answers[field.key] ?? '', onChange: (value) => setAnswers((previous) => ({ ...previous, [field.key]: value })) })) : (_jsxs(_Fragment, { children: [field.choices !== undefined && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('parameterAdmittedHostsPrefix'), ' ', [
+                                                                    ...field.choices.values,
+                                                                    ...(field.choices.hostSuffixes ?? []).map((suffix) => (field.choices?.position === ProviderOAuth2EndpointPlaceholderPosition.ORIGIN
+                                                                        ? `https://*${suffix}`
+                                                                        : `*${suffix}`)),
+                                                                ].join(', ')] })), _jsx(InputRoot, { "aria-label": field.label, 
+                                                            // A credential is typed into a password field; a connection parameter — which
+                                                            // cloud, which directory — is not a secret and is shown.
+                                                            type: field.secret ? 'password' : 'text', value: answers[field.key] ?? '', onChange: (event) => setAnswers((previous) => ({ ...previous, [field.key]: event.target.value })) })] }))] }, field.key))), lendsAccountToOrganization && (_jsxs("div", { className: "flex items-start gap-item-xs", children: [_jsx(Checkbox, { name: "organizationWideUseAcknowledged", schema: ACKNOWLEDGEMENT_SCHEMA, checked: organizationWideUseAcknowledged, onCheckedChange: setOrganizationWideUseAcknowledged, "aria-describedby": "organization-wide-use-description" }), _jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('organizationWideUseAcknowledgement') }), _jsx(Text, { id: "organization-wide-use-description", className: "text-xs text-muted-foreground", children: t('organizationWideUseDescription') })] })] })), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, disabled: busy
+                                                    || ownerId === null
+                                                    // Any blocker except NO_AUTHORIZATION_FLOW, which is the typed-credential path this
+                                                    // same button serves. An endpoint the provider cannot resolve (#623) refuses on
+                                                    // press whatever is typed, so the button must not invite the press.
+                                                    || (selected.notConnectableBecause !== undefined
+                                                        && selected.notConnectableBecause !== ProviderConnectabilityBlocker.NO_AUTHORIZATION_FLOW)
+                                                    || unanswered
+                                                    || delegation === undefined
+                                                    || (lendsAccountToOrganization && !organizationWideUseAcknowledged), onClick: handleConnect, children: busy ? t('connectingButton') : t('connectButton') }) })] }))] })), _jsx(Text, { className: "text-xs text-muted-foreground", children: t(disconnectNoticeRef) })] }) })] }));
 };
 //# sourceMappingURL=AppPage_ConnectedAccountsSettings.js.map