@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

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

@@ -3,21 +3,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * AppPage_ConnectedAccountsSettings — connecting a third-party account, at either owner scope.
  *
  * A bespoke `ENGINE_PANEL`, and the reason is the shape of the act rather than the shape of the data.
- * The stored credentials ARE a resource and the generic surface beside this one lists, inspects and
- * deletes them perfectly. What it cannot do is CONNECT: that is not a row somebody creates, it is a
+ * The stored credentials ARE a resource, and every act on a stored row (disconnect, turn off or on) goes
+ * through that resource's own operations. What a resource screen cannot do is CONNECT: that is not a row somebody creates, it is a
  * flow that leaves the application, obtains consent at a vendor, and returns with a grant nobody
  * typed. A resource screen has no mechanism for an action of that shape.
  *
  * ## Nothing is typed by hand
  *
- * The provider comes from a SELECT over what the application declares; the credential fields come
+ * The provider is a ROW of what the application declares; the credential fields come
  * from that provider's own secrets contract. Both were free text until this panel existed, which is
  * how somebody ends up typing `secretSlug` into a box and storing a grant in a slot nothing reads.
  *
- * So this panel is the ONLY place the application offers to add a credential. The list beside it hides
- * its resource CREATE (`actionVisibility: HIDDEN`, no empty-state call to action) — for a while it kept
+ * So this panel is the ONLY place the application offers to add a credential. The credential resource's own
+ * list hides its CREATE (`actionVisibility: HIDDEN`, no empty-state call to action) — for a while it kept
  * the free-text form as a second door, and a slot the provider does not declare was refused with a
- * message naming the valid ones that the form then reduced to a generic toast (#1040).
+ * message naming the valid ones that the form then reduced to a generic toast (#1040). Since #2319 that list
+ * is no longer a tab beside this panel: this panel's one list shows every connection with its acts, and two
+ * lists of the same rows made a person match them up by name.
  *
  * ## The flow follows the AUTH METHOD
  *
@@ -43,8 +45,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * 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
+ * connections: the catalogue offers one entry per connection (it folds members into their base and names them in
+ * `servesRefs`), and the panel lists one row per connection, held or offered (#2319), showing for a held one — 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.
@@ -55,11 +57,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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, useId, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { z } from 'zod';
 import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-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 { buildProviderDisplayNameLabelKey, isWildoBackendError, ProviderAuthMethod, ProviderConnectabilityBlocker, ProviderCredentialValidationState, OrganizationProviderCredentialSchema, UserProviderCredentialSchema, } from '@wildo-ai/saas-models';
+import { ExternalProvider_Connection_DelegationMode, ExternalProvider_Connection_OwnerScope, ProviderOAuth2EndpointPlaceholderPosition, ProviderVendorRegistrationAddressKind, connectionLendsMemberAccountToOrganization, connectionTargetNamesActingUser, } from '@wildo-ai/external-connectors-models';
 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';
@@ -76,10 +78,17 @@ 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';
+import { saveBlobAsFile } from '../../core/commons/save-blob-as-file.frontend.utils.js';
 const COMPONENT = FrontendComponentType.APP_LAYOUTS_CONNECTED_ACCOUNTS_SETTINGS;
-/** The select's schema. A provider ref is an open identifier, so the control validates shape only. */
-const PROVIDER_REF_SCHEMA = z.string().min(1);
-/** The chooser's own shape. Its OPTIONS are the provider's declared delegations, never this. */
+/**
+ * The longest description a stored credential row accepts, per owner, read from that owner's schema so the form stops
+ * what the write would refuse.
+ */
+const CREDENTIAL_DESCRIPTION_MAX_LENGTH = {
+    [ExternalProvider_Connection_OwnerScope.USER]: UserProviderCredentialSchema.shape.description.unwrap().maxLength ?? undefined,
+    [ExternalProvider_Connection_OwnerScope.ORGANIZATION]: OrganizationProviderCredentialSchema.shape.description.unwrap().maxLength ?? undefined,
+};
+/** The delegation chooser's own shape. Its OPTIONS are the provider's declared delegations, never this. */
 const DELEGATION_SCHEMA = z.string().min(1);
 /** The organization-wide-use acknowledgement's shape: a statement a person either makes or does not. */
 const ACKNOWLEDGEMENT_SCHEMA = z.boolean();
@@ -219,6 +228,17 @@ export const connectedAccountStanding = (connection) => {
             return ConnectedAccountStanding.NOT_YET_USED;
     }
 };
+/**
+ * The badge colour of each standing, total over the enum. Only a refusal is red: a turned-off connection is a decision
+ * somebody took, and a residue is something to tidy, not a failure.
+ */
+const STANDING_BADGE_VARIANT = {
+    [ConnectedAccountStanding.SUPERSEDED]: 'warning',
+    [ConnectedAccountStanding.DISABLED]: 'secondary',
+    [ConnectedAccountStanding.NEEDS_REAUTHORIZATION]: 'destructive',
+    [ConnectedAccountStanding.WORKING]: 'success',
+    [ConnectedAccountStanding.NOT_YET_USED]: 'secondary',
+};
 /** 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',
@@ -253,6 +273,25 @@ export const collectConnectedAccountLabelKeys = (providers, connections) => coll
     ...providers.flatMap((provider) => [provider.providerRef, ...(provider.servesRefs ?? [])]),
     ...connections.flatMap((connection) => [connection.connectionRef, ...connection.servesRefs, ...(connection.supersededByConnectionRef === undefined ? [] : [connection.supersededByConnectionRef])]),
 ].map(buildProviderDisplayNameLabelKey));
+/**
+ * The one list: every held connection first, in the listing's order, each beside its catalogue entry; then every catalogue
+ * entry nothing is held for, in the catalogue's order. One row per connection ref, so a vendor served by several refs
+ * is one row (#1727), and a held connection is never also offered as "not connected".
+ */
+export const buildConnectedAccountRows = (available, connections) => {
+    const catalogueRefOf = (provider) => provider.connectionRef ?? provider.providerRef;
+    const held = new Set(connections.map((connection) => connection.connectionRef));
+    return [
+        ...connections.map((connection) => ({
+            connectionRef: connection.connectionRef,
+            connection,
+            catalogueEntry: available.find((provider) => catalogueRefOf(provider) === connection.connectionRef),
+        })),
+        ...available
+            .filter((provider) => !held.has(catalogueRefOf(provider)))
+            .map((provider) => ({ connectionRef: catalogueRefOf(provider), catalogueEntry: provider })),
+    ];
+};
 /**
  * What the callback left in the URL on its way back. Read once — see the panel's mount.
  *
@@ -346,11 +385,110 @@ const ConnectionGrowAction = ({ connection, pending, catalogueEntry, ownerScope,
                                     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') }) }))] }));
 };
+/** The words of each address a vendor registration asks a person to type, total over the vocabulary (#2713). */
+const VENDOR_REGISTRATION_ADDRESS_LABEL_KEY = {
+    [ProviderVendorRegistrationAddressKind.MESSAGING_ENDPOINT]: 'vendorRegistrationMessagingEndpointLabel',
+};
+/**
+ * What an organization registers at a vendor for an app of its OWN (#2713): a Teams bot registered in the
+ * organization's tenant, which a Teams app package must name together with the application's name, website and
+ * messaging endpoint. Offered only where the catalogue says the application builds it for an organization.
+ *
+ * Fetched when opened rather than with the list: it is read from the organization's connection, and most visits never
+ * open it. Fetched again on every opening, so a bot connected meanwhile turns the steps into a package.
+ *
+ * The steps are the provider's own words, shown as written, the same standing as a credential field's description: a
+ * provider module carries no label tree. Everything around them is this panel's.
+ */
+const VendorRegistrationOffer = ({ providerRef, organizationId, label, t, tWith }) => {
+    const [open, setOpen] = useState(false);
+    const [registration, setRegistration] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const [copiedUrl, setCopiedUrl] = useState(null);
+    const show = useCallback(async () => {
+        setOpen(true);
+        setLoading(true);
+        setFailed(false);
+        setRegistration(null);
+        try {
+            setRegistration(await getManualCallsHttpClient().getProviderVendorRegistration(providerRef, {
+                ownerScope: ExternalProvider_Connection_OwnerScope.ORGANIZATION,
+                ownerId: organizationId,
+            }));
+        }
+        catch (caught) {
+            // A refusal (not an administrator, a provider that cannot build it here) is the backend's, said by its handler.
+            if (isWildoBackendError(caught)) {
+                setOpen(false);
+                throw caught;
+            }
+            setFailed(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [organizationId, providerRef]);
+    const copy = useCallback((url) => {
+        void navigator.clipboard?.writeText(url).then(() => setCopiedUrl(url), () => setCopiedUrl(null));
+    }, []);
+    if (!open) {
+        return (_jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, "aria-label": tWith('vendorRegistrationAccessibleName', { provider: label }), onClick: () => { void show(); }, children: t('vendorRegistrationButton') }) }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-xs font-medium text-muted-foreground", children: t('vendorRegistrationHeading') }), loading && _jsx(Text, { className: "text-xs text-muted-foreground", children: t('vendorRegistrationLoading') }), failed && _jsx(Text, { className: "text-xs text-muted-foreground", children: t('vendorRegistrationFailed') }), registration !== null && (_jsxs(_Fragment, { children: [(registration.addresses ?? []).length > 0 && (_jsx(DescriptionList, { children: (registration.addresses ?? []).map((address) => (_jsxs(React.Fragment, { children: [_jsx(DescriptionTerm, { children: t(VENDOR_REGISTRATION_ADDRESS_LABEL_KEY[address.kind] ?? address.kind) }), _jsx(DescriptionDetails, { children: _jsxs("span", { className: "flex flex-wrap items-center gap-item-xs", children: [_jsx("code", { className: "select-all break-all text-xs", children: address.url }), _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.GHOST, "aria-label": tWith('vendorRegistrationCopyAccessibleName', { address: address.url }), onClick: () => copy(address.url), children: t(copiedUrl === address.url ? 'vendorRegistrationCopiedButton' : 'vendorRegistrationCopyButton') })] }) })] }, address.kind))) })), _jsx("ol", { className: "flex list-decimal flex-col gap-item-xs pl-5", children: registration.steps.map((step) => (_jsx("li", { children: _jsx(Text, { className: "text-xs", children: step }) }, step))) })] })), _jsxs("div", { className: "flex flex-wrap justify-end gap-item-xs", children: [_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.GHOST, onClick: () => { setOpen(false); setCopiedUrl(null); }, children: t('vendorRegistrationHideButton') }), registration?.file !== undefined && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, onClick: () => saveBlobAsFile(new Blob([registration.file.content], { type: 'application/json' }), registration.file.name), children: tWith('vendorRegistrationDownloadButton', { file: registration.file.name }) }))] })] }));
+};
+/**
+ * The rows a held connection is stored as, with the acts on ONE row (#2474): its free-text description, read and edited
+ * in place, and, for a connection made of several slots, removing one of them. The connection-level acts (turn off or
+ * on, disconnect) stay on the row above; these went missing when the separate credential list was folded into the panel
+ * (#2319).
+ *
+ * A single-slot connection shows only its description, since its slot name says nothing a person needs. Removing the
+ * one slot is disconnecting, which already exists, so it is not offered here. Removing one of several asks first,
+ * because a feature reading that slot stops working.
+ */
+const StoredCredentialRows = ({ connection, descriptionMaxLength, label, t, tWith, onSaveDescription, onRemove }) => {
+    const [editingId, setEditingId] = useState(null);
+    const [draft, setDraft] = useState('');
+    const [confirmingRemoveId, setConfirmingRemoveId] = useState(null);
+    const [busyId, setBusyId] = useState(null);
+    const severalSlots = connection.credentials.length > 1;
+    const save = async (credentialId) => {
+        setBusyId(credentialId);
+        try {
+            if (await onSaveDescription(credentialId, draft))
+                setEditingId(null);
+        }
+        finally {
+            setBusyId(null);
+        }
+    };
+    const remove = async (credentialId) => {
+        setBusyId(credentialId);
+        try {
+            await onRemove(credentialId);
+        }
+        finally {
+            setBusyId(null);
+            setConfirmingRemoveId(null);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-xs font-medium text-muted-foreground", children: t(severalSlots ? 'credentialFieldsLabel' : 'descriptionLabel') }), _jsx("div", { className: "flex flex-col gap-item-xs", children: connection.credentials.map((credential) => {
+                    const editing = editingId === credential.credentialId;
+                    const confirmingRemove = confirmingRemoveId === credential.credentialId;
+                    const busy = busyId === credential.credentialId;
+                    return (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [severalSlots && _jsx(Text, { className: "text-sm font-medium", children: credential.secretSlug }), !editing && (_jsx(Text, { className: "text-sm text-muted-foreground", children: credential.description ?? t('noDescription') })), !editing && !confirmingRemove && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.GHOST, "aria-label": tWith('editDescriptionAccessibleName', { provider: label, slot: credential.secretSlug }), disabled: busyId !== null, onClick: () => { setEditingId(credential.credentialId); setDraft(credential.description ?? ''); setConfirmingRemoveId(null); }, children: t('editDescriptionButton') })), severalSlots && !editing && !confirmingRemove && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.GHOST, "aria-label": tWith('removeSlotAccessibleName', { provider: label, slot: credential.secretSlug }), disabled: busyId !== null, onClick: () => { setConfirmingRemoveId(credential.credentialId); setEditingId(null); }, children: t('removeSlotButton') }))] }), editing && (_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(InputRoot, { "aria-label": tWith('descriptionInputAccessibleName', { provider: label, slot: credential.secretSlug }), type: "text", maxLength: descriptionMaxLength, 
+                                        // The field the person just asked for; Edit removed the button that had focus.
+                                        autoFocus: true, value: draft, onChange: (event) => setDraft(event.target.value) }), _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, disabled: busy, onClick: () => { void save(credential.credentialId); }, children: t('saveDescriptionButton') }), _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, disabled: busy, onClick: () => setEditingId(null), children: t('cancelDescriptionButton') })] })), confirmingRemove && (_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(Text, { className: "text-sm", children: tWith('removeSlotConfirmation', { slot: credential.secretSlug }) }), _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DESTRUCTIVE, disabled: busy, "aria-label": tWith('removeSlotConfirmAccessibleName', { provider: label, slot: credential.secretSlug }), 
+                                        // The confirmation the person just asked for; Remove took the button that had focus.
+                                        autoFocus: true, onClick: () => { void remove(credential.credentialId); }, children: t('removeSlotConfirmButton') }), _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, disabled: busy, onClick: () => setConfirmingRemoveId(null), children: t('removeSlotCancelButton') })] }))] }, credential.credentialId));
+                }) })] }));
+};
 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.
 ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
-    const { tComponent, isReady } = useI18n({ component: COMPONENT });
+    const { tComponent, isReady, formatDateTime } = 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. */
@@ -367,7 +505,13 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
         : currentOrganizationId ?? null;
     const [providers, setProviders] = useState([]);
     const [loading, setLoading] = useState(true);
+    /** What the last ACT (connect, store, turn off or on) failed with; cleared by the next act that succeeds. */
     const [error, setError] = useState(null);
+    /**
+     * The catalogue could not be read. Its own state, not `error`: an act that succeeds clears `error`, and that must not
+     * make an incomplete list look complete.
+     */
+    const [providersFailed, setProvidersFailed] = useState(false);
     const [selectedRef, setSelectedRef] = useState('');
     const [busy, setBusy] = useState(false);
     /** Set ONLY when the provider declares both delegations for this scope — otherwise derived. */
@@ -429,14 +573,16 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
         (async () => {
             try {
                 const res = await getManualCallsHttpClient().listConnectableProviders();
-                if (!cancelled)
+                if (!cancelled) {
                     setProviders(res.providers ?? []);
+                    setProvidersFailed(false);
+                }
             }
             catch (e) {
                 if (isWildoBackendError(e))
                     throw e;
                 if (!cancelled)
-                    setError(t('errorGeneric'));
+                    setProvidersFailed(true);
             }
             finally {
                 if (!cancelled)
@@ -444,10 +590,10 @@ 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);
+    const { connections, loading: connectionsLoading, failed: connectionsFailed, reload: reloadConnections, disconnect, setEnabled, setCredentialDescription, removeCredential, } = useOwnerProviderConnections(ownerScope, ownerId);
     /** Re-authorization offers a refused call left behind (#1671), by connection. */
     const offers = useProviderScopeReauthorizationOffers();
     /*
@@ -472,6 +618,8 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
         try {
             await disconnect(connection);
             setDisconnectOutcome(ConnectedAccountDisconnectOutcome.DISCONNECTED);
+            // A banner left by an earlier failed act no longer describes the list.
+            setError(null);
         }
         catch (e) {
             if (isWildoBackendError(e))
@@ -488,6 +636,47 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
      * told", which is the safe direction: it sends the person to check at the vendor, where the worst
      * outcome is a wasted look rather than a belief that access ended when it did not.
      */
+    /** The connection being turned off or back on — one at a time, like a disconnect. */
+    const [togglingRef, setTogglingRef] = useState(null);
+    /**
+     * Turn one connection off or back on (#2319), through the credential resource's own UPDATE. Off keeps the grant and
+     * its answers and makes every feature the connection serves read it as absent; on restores it. A failure is said in
+     * the same place a failed disconnect is.
+     */
+    const handleSetEnabled = useCallback(async (connection, enabled) => {
+        setTogglingRef(connection.connectionRef);
+        setDisconnectOutcome(null);
+        try {
+            await setEnabled(connection, enabled);
+            // A banner left by an earlier failed act no longer describes the list.
+            setError(null);
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setError(t('errorGeneric'));
+        }
+        finally {
+            setTogglingRef(null);
+        }
+    }, [setEnabled, t]);
+    /** One stored row's description or removal (#2474). A failure is said where every act's failure is; `true` on success. */
+    const actOnStoredCredential = useCallback(async (act) => {
+        setDisconnectOutcome(null);
+        try {
+            await act();
+            setError(null);
+            return true;
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setError(t('errorGeneric'));
+            return false;
+        }
+    }, [t]);
+    const handleSaveCredentialDescription = useCallback((credentialId, description) => actOnStoredCredential(() => setCredentialDescription(credentialId, description)), [actOnStoredCredential, setCredentialDescription]);
+    const handleRemoveCredential = useCallback((credentialId) => actOnStoredCredential(() => removeCredential(credentialId)), [actOnStoredCredential, removeCredential]);
     const disconnectNoticeRef = useMemo(() => {
         if (available.length === 0)
             return 'disconnectNotice';
@@ -594,6 +783,10 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
             setAnswers({});
             setSavedNotice(t('credentialStoredNotice'));
             setBusy(false);
+            // The row now holds the credential: close its form and read the list again, so the state it shows is the
+            // stored one rather than "not connected".
+            setSelectedRef('');
+            reloadConnections();
         }
         catch (e) {
             if (isWildoBackendError(e))
@@ -601,15 +794,16 @@ ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
             setError(t('errorGeneric'));
             setBusy(false);
         }
-    }, [answers, delegation, lendsAccountToOrganization, organizationWideUseAcknowledged, ownerId, ownerScope, selected, t, user?._id]);
+    }, [answers, delegation, lendsAccountToOrganization, organizationWideUseAcknowledged, ownerId, ownerScope, reloadConnections, selected, t, user?._id]);
     if (!isReady)
         return null;
-    const providerOptions = available.map((provider) => ({
-        value: 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),
-    }));
+    /*
+     * The rows of the one list (#2319): every connection the owner HOLDS, first, in the order the listing answers, each
+     * beside the catalogue entry it belongs to; then every catalogue entry nothing is held for yet. Keyed by connection
+     * ref, the unit a person granted (#1727). A held connection the catalogue no longer offers (a superseded residue)
+     * keeps its row, with no connect act, so it can still be disconnected.
+     */
+    const providerRows = buildConnectedAccountRows(available, connections);
     const oauth2 = selected?.authMethods?.includes(ProviderAuthMethod.OAUTH2_AUTHORIZATION_CODE) ?? false;
     const missing = selected?.missingRegistration ?? [];
     const parameters = selected?.connectionParameters ?? [];
@@ -621,50 +815,60 @@ 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: [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) })] }) })] }));
+    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 }) }), providersFailed && _jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('catalogueFailed') }) }), 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('providersHeading') }), loading || connectionsLoading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : (_jsxs(_Fragment, { children: [connectionsFailed && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('connectionsFailed') }) })), providerRows.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (_jsx("ul", { "aria-labelledby": connectionsHeadingId, className: "flex flex-col gap-group", children: providerRows.map(({ connectionRef, connection, catalogueEntry }) => {
+                                    // A held connection is named by its base ref, an offered one by its catalogue ref: the names the vendor-name
+                                    // keys were collected for.
+                                    const label = labelOf(connection !== undefined ? connection.connectionRef : catalogueEntry?.providerRef ?? connectionRef);
+                                    const standing = connection === undefined ? undefined : connectedAccountStanding(connection);
+                                    const pending = connection === undefined || 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 confirming = confirmingDisconnectRef === connectionRef;
+                                    const disconnecting = disconnectingRef === connectionRef;
+                                    const toggling = togglingRef === connectionRef;
+                                    const isSelected = catalogueEntry !== undefined && selected?.providerRef === catalogueEntry.providerRef;
+                                    // A typed credential is replaced by entering it again (the store replaces the rows it holds); a granted
+                                    // one is renewed through the vendor, which is the reconnect below. Decided from what the PROVIDER
+                                    // declares, never from `holdsAuthorizationGrant`, which also reads false for a granted connection that
+                                    // is turned off: offering a typed replacement there would send the person to a vendor re-consent.
+                                    const typedProvider = catalogueEntry !== undefined && !(catalogueEntry.authMethods?.includes(ProviderAuthMethod.OAUTH2_AUTHORIZATION_CODE) ?? false);
+                                    const replaceable = connection !== undefined && typedProvider && standing !== ConnectedAccountStanding.SUPERSEDED;
+                                    return (_jsx("li", { children: _jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col gap-item-xs", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: label }), standing === undefined ? (_jsx(Badge, { variant: "outline", children: t('notConnectedBadge') })) : (_jsx(Badge, { variant: STANDING_BADGE_VARIANT[standing], children: t(STANDING_LABEL_KEY[standing]) }))] }), connection !== undefined && (_jsxs(DescriptionList, { children: [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(', ') })] })), connection.connectedAt !== undefined && (_jsxs(_Fragment, { children: [_jsx(DescriptionTerm, { children: t('connectedAtLabel') }), _jsx(DescriptionDetails, { children: formatDateTime(connection.connectedAt) })] })), connection.validationError !== undefined && (_jsxs(_Fragment, { children: [_jsx(DescriptionTerm, { children: t('lastRefusalLabel') }), _jsx(DescriptionDetails, { children: connection.validationError })] })), connection.lastValidatedAt !== undefined && (_jsxs(_Fragment, { children: [_jsx(DescriptionTerm, { children: t('lastValidatedAtLabel') }), _jsx(DescriptionDetails, { children: formatDateTime(connection.lastValidatedAt) })] })), connection.lastUsedAt !== undefined && (_jsxs(_Fragment, { children: [_jsx(DescriptionTerm, { children: t('lastUsedAtLabel') }), _jsx(DescriptionDetails, { children: formatDateTime(connection.lastUsedAt) })] })), connection.linkedByUserId !== undefined && (_jsxs(_Fragment, { children: [_jsx(DescriptionTerm, { children: t('linkedByLabel') }), _jsx(DescriptionDetails, { children: connection.linkedByUserId })] }))] })), connection !== undefined && standing !== ConnectedAccountStanding.SUPERSEDED && (_jsx(StoredCredentialRows, { connection: connection, descriptionMaxLength: CREDENTIAL_DESCRIPTION_MAX_LENGTH[ownerScope], label: label, t: t, tWith: tWith, onSaveDescription: handleSaveCredentialDescription, onRemove: handleRemoveCredential })), ownerScope === ExternalProvider_Connection_OwnerScope.ORGANIZATION && ownerId !== null
+                                                        && (catalogueEntry?.vendorRegistrationOwnerScopes ?? []).includes(ExternalProvider_Connection_OwnerScope.ORGANIZATION) && (_jsx(VendorRegistrationOffer, { providerRef: catalogueEntry.providerRef, organizationId: ownerId, label: label, t: t, tWith: tWith })), connection !== undefined && standing === ConnectedAccountStanding.SUPERSEDED && connection.supersededByConnectionRef !== undefined && (_jsx(Text, { className: "text-xs text-muted-foreground", children: tWith('supersededNotice', { connection: labelOf(connection.supersededByConnectionRef) }) })), connection !== undefined && !connection.enabled && (_jsx(Text, { className: "text-xs text-muted-foreground", children: t('disabledNotice') })), standing === ConnectedAccountStanding.NEEDS_REAUTHORIZATION && (_jsx(Text, { className: "text-xs text-muted-foreground", children: t('needsReauthorizationNotice') })), connection !== undefined && pending !== undefined && (_jsx(ConnectionGrowAction, { connection: connection, pending: pending, catalogueEntry: catalogueEntry, ownerScope: ownerScope, ownerId: ownerId, signedInUserId: user?._id ?? null, label: label, t: t, tWith: tWith })), connection !== undefined && 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') })] })] })) : (_jsxs("div", { className: "flex flex-wrap justify-end gap-item-xs", children: [catalogueEntry !== undefined && !isSelected && connection === undefined && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, "aria-label": tWith('connectAccessibleName', { provider: label }), onClick: () => chooseProvider(catalogueEntry.providerRef), children: t('connectButton') })), catalogueEntry !== undefined && !isSelected && replaceable && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, "aria-label": tWith('replaceCredentialAccessibleName', { provider: label }), onClick: () => chooseProvider(catalogueEntry.providerRef), children: t('replaceCredentialButton') })), catalogueEntry !== undefined && !isSelected && standing === ConnectedAccountStanding.NEEDS_REAUTHORIZATION && !replaceable && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, "aria-label": tWith('reconnectAccessibleName', { provider: label }), onClick: () => chooseProvider(catalogueEntry.providerRef), children: t('reconnectButton') })), connection !== undefined && standing !== ConnectedAccountStanding.SUPERSEDED && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, "aria-label": tWith(connection.enabled ? 'disableAccessibleName' : 'enableAccessibleName', { provider: label }), disabled: toggling || disconnectingRef !== null, onClick: () => { void handleSetEnabled(connection, !connection.enabled); }, children: t(connection.enabled ? 'disableButton' : 'enableButton') })), connection !== undefined && (_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, "aria-label": tWith('disconnectAccessibleName', { provider: label }), disabled: disconnectingRef !== null, onClick: () => { setConfirmingDisconnectRef(connectionRef); setDisconnectOutcome(null); }, children: t('disconnectButton') }))] })), isSelected && 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') })] })] })), _jsxs("div", { className: "flex justify-end gap-item-xs", children: [_jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.GHOST, disabled: busy, onClick: () => chooseProvider(''), children: t('connectCancelButton') }), _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') })] })] }))] }) }) }, 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(Text, { className: "text-xs text-muted-foreground", children: t(disconnectNoticeRef) })] }));
 };
 //# sourceMappingURL=AppPage_ConnectedAccountsSettings.js.map