@manta-eu/react 0.2.0 → 0.2.1

package/src/providers/chat-socket-auth.ts

@@ -1,44 +1,123 @@
 import { chatTicketPath, chatTicketQueryParam } from "@manta-eu/client/shared/chat-manager";
 import { datastoreHeader, datastoreQueryParam } from "@manta-eu/client/shared/datastore-path";
 import { isPresent } from "@manta-eu/lib/present";
-import { useCallback, useEffect, useMemo } from "react";
+import { isTerminalCloseEvent } from "agents/client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { providerFetch } from "./manta-client-context";
 import { useMantaClient } from "./MantaClientProvider";
 
-// A reconnect always fetches a new ticket, and an expiring cache entry would replace a live socket.
-const ticketCacheTtlMs = 24 * 60 * 60 * 1000;
 const tokenRefreshCheckMs = 30_000;
+const reconnectDelaysMs = [0, 1_000, 2_000, 5_000, 10_000];
+const dropCountResetMs = 60_000;
+const stableConnectionMs = 5_000;
+// Any other 4xx is Manta refusing this person or datastore for good, so asking again cannot help.
+const retriedRefusals = new Set([401, 408, 429]);
 
 export type ChatSocketAuth =
   | { query: Record<string, string>; credentials: "include" }
-  | { query: () => Promise<Record<string, string>>; cacheTtl: number; credentials: "omit" };
+  | {
+      query: Record<string, string>;
+      enabled: boolean;
+      shouldReconnectOnClose: (event: CloseEvent) => boolean;
+      credentials: "omit";
+    };
+
+type Ticketed = { datastoreKey: string; query: Record<string, string> };
 
 function ticketFrom(body: unknown): string | undefined {
   if (typeof body !== "object" || body === null || !("ticket" in body)) return undefined;
   return typeof body.ticket === "string" ? body.ticket : undefined;
 }
 
+// partysocket clears shouldReconnect before a close it was asked for: an unmount, or a socket being replaced.
+function isRequestedClose(event: CloseEvent): boolean {
+  const target: unknown = event.target;
+  return typeof target === "object" && target !== null && "shouldReconnect" in target && !target.shouldReconnect;
+}
+
+/**
+ * A ticket is spent on its first connect, and partysocket would reconnect to the same URL, so the socket never
+ * reconnects by itself: each connect waits for a new ticket, and a dropped socket asks for one.
+ */
 export function useChatSocketAuth(datastoreQuery: Record<string, string>): ChatSocketAuth {
   const client = useMantaClient();
   const { getAccessToken, mantaBaseUrl } = client;
   const authorizedFetch = providerFetch(client);
+  const authorizedFetchRef = useRef(authorizedFetch);
+  authorizedFetchRef.current = authorizedFetch;
+  const hasAccessToken = getAccessToken !== undefined;
+  const datastoreKey = JSON.stringify(datastoreQuery);
+  const datastoreQueryRef = useRef(datastoreQuery);
+  datastoreQueryRef.current = datastoreQuery;
+  const [ticketed, setTicketed] = useState<Ticketed>();
+  const [connectRequest, setConnectRequest] = useState(0);
+  const drops = useRef({ count: 0, lastAt: 0 });
+  const ticketedAt = useRef<number>(undefined);
 
-  const ticketQuery = useCallback(async () => {
-    const response = await authorizedFetch(new URL(`/${chatTicketPath}`, mantaBaseUrl), {
-      method: "POST",
-      headers: datastoreHeader(datastoreQuery[datastoreQueryParam]),
-    });
-    const ticket = response.ok ? ticketFrom(await response.json()) : undefined;
-    if (!isPresent(ticket)) throw new Error(`Manta refused a chat ticket (${response.status})`);
-    return { ...datastoreQuery, [chatTicketQueryParam]: ticket };
-  }, [authorizedFetch, mantaBaseUrl, datastoreQuery]);
+  // A socket that stayed up starts the backoff over; one dropped at once, as a server refusing it would, does not.
+  const recordDrop = useCallback((socketClosed = false) => {
+    const now = Date.now();
+    const stayedUp = socketClosed && ticketedAt.current !== undefined && now - ticketedAt.current >= stableConnectionMs;
+    const fresh = stayedUp || now - drops.current.lastAt > dropCountResetMs;
+    drops.current = { count: fresh ? 1 : drops.current.count + 1, lastAt: now };
+    setConnectRequest((request) => request + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!hasAccessToken) return;
+    setTicketed((held) => (held?.datastoreKey === datastoreKey ? held : undefined));
+    let cancelled = false;
+    const delay = reconnectDelaysMs[Math.min(Math.max(drops.current.count - 1, 0), reconnectDelaysMs.length - 1)];
+    const timer = setTimeout(() => {
+      const query = datastoreQueryRef.current;
+      authorizedFetchRef
+        .current(new URL(`/${chatTicketPath}`, mantaBaseUrl), {
+          method: "POST",
+          headers: datastoreHeader(query[datastoreQueryParam]),
+        })
+        .then(async (response) => {
+          if (response.status >= 400 && response.status < 500 && !retriedRefusals.has(response.status)) {
+            if (!cancelled) console.warn(`Manta refused a chat ticket (${response.status}); not asking again`);
+            return;
+          }
+          const ticket = response.ok ? ticketFrom(await response.json()) : undefined;
+          if (!isPresent(ticket)) throw new Error(`Manta refused a chat ticket (${response.status})`);
+          if (cancelled) return;
+          ticketedAt.current = Date.now();
+          setTicketed({ datastoreKey, query: { ...query, [chatTicketQueryParam]: ticket } });
+        })
+        .catch((error: unknown) => {
+          if (cancelled) return;
+          console.warn("Could not get a chat ticket", error);
+          recordDrop();
+        });
+    }, delay);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [hasAccessToken, mantaBaseUrl, datastoreKey, connectRequest, recordDrop]);
+
+  const shouldReconnectOnClose = useCallback(
+    (event: CloseEvent) => {
+      if (!isRequestedClose(event) && !isTerminalCloseEvent(event)) recordDrop(true);
+      return false;
+    },
+    [recordDrop],
+  );
 
+  const ticketQuery = ticketed?.datastoreKey === datastoreKey ? ticketed.query : undefined;
   return useMemo(
     () =>
-      getAccessToken
-        ? { query: ticketQuery, cacheTtl: ticketCacheTtlMs, credentials: "omit" as const }
+      hasAccessToken
+        ? {
+            query: ticketQuery ?? datastoreQuery,
+            enabled: ticketQuery !== undefined,
+            shouldReconnectOnClose,
+            credentials: "omit" as const,
+          }
         : { query: datastoreQuery, credentials: "include" as const },
-    [getAccessToken, ticketQuery, datastoreQuery],
+    [hasAccessToken, ticketQuery, datastoreQuery, shouldReconnectOnClose],
   );
 }
 

package/src/providers/index.tsx

@@ -1,9 +1,12 @@
 import { defaultDeployment } from "@manta-eu/auth/default-deployment";
 import type { AccessTokenSource } from "@manta-eu/client";
+import { entityPath } from "@manta-eu/client/shared/explorer-paths";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
 import type { ReactNode } from "react";
 import { useState } from "react";
+import { Link } from "react-router";
+import { EntityLinkProvider, type EntityLinkProps } from "../graph/entity-link";
 import { ActiveDatastoreProvider, ActiveDatastoreRouter, useActiveDatastore } from "./ActiveDatastoreProvider";
 import { GenerateStructuredDataProvider } from "./GenerateStructuredDataProvider";
 import { KnowledgeGraphPollingProvider } from "./KnowledgeGraphPollingProvider";
@@ -89,6 +92,16 @@ function CoreProviders(props: ProvidersProps) {
   );
 }
 
+function RecordEntityLink(props: EntityLinkProps) {
+  const { iri, className, children } = props;
+
+  return (
+    <Link to={entityPath(iri)} className={className} onClick={(event) => event.stopPropagation()}>
+      {children}
+    </Link>
+  );
+}
+
 export function Providers(props: ProvidersProps) {
   const { children, ...coreProps } = props;
 
@@ -97,7 +110,9 @@ export function Providers(props: ProvidersProps) {
       <ThemeProvider>
         <CoreProviders {...coreProps}>
           <ActiveDatastoreRouter>
-            <NuqsAdapter>{children}</NuqsAdapter>
+            <NuqsAdapter>
+              <EntityLinkProvider component={RecordEntityLink}>{children}</EntityLinkProvider>
+            </NuqsAdapter>
           </ActiveDatastoreRouter>
         </CoreProviders>
       </ThemeProvider>

package/src/routes/activity/detail/ActivityChanges.tsx

@@ -8,6 +8,7 @@ import { useIntersectionObserver } from "usehooks-ts";
 import { DiffRow } from "../change-display";
 import { EntityNodeView, subsumesChangeRows } from "./EntityNodeView";
 import { LazyMount, viewportOverscan } from "./LazyMount";
+import { NoChangesMessage } from "./NoChangesMessage";
 import { useEntityNodes, type ActivityChangeGroup, type EntityNode } from "#ldo-ui";
 import { cn } from "#lib/utils";
 import { entityPath } from "#routes/data-explorer/namespaces";
@@ -52,10 +53,11 @@ type ChangeGroupProps = {
   node?: EntityNode;
   nodesLoading: boolean;
   scrollRoot: HTMLElement | null;
+  showLinks: boolean;
 };
 
 function ChangeGroup(props: ChangeGroupProps) {
-  const { group, selected, onJumpTo, node, nodesLoading, scrollRoot } = props;
+  const { group, selected, onJumpTo, node, nodesLoading, scrollRoot, showLinks } = props;
 
   // Answered from the change's own triples until the fetch lands, so the rows do not show then vanish.
   const typedCard = useMemo(
@@ -87,7 +89,7 @@ function ChangeGroup(props: ChangeGroupProps) {
           >
             {group.entityLabel}
           </button>
-          {isFullIri(group.entityIri) && (
+          {showLinks && isFullIri(group.entityIri) && (
             <Link
               to={entityPath(group.entityIri)}
               aria-label={`Open ${group.entityLabel} in the data explorer`}
@@ -145,10 +147,11 @@ type ChangeBlockProps = {
   activeIri: string | null;
   onJumpTo: (entityIri: string) => void;
   scrollRoot: HTMLElement | null;
+  showLinks: boolean;
 };
 
 function ChangeBlock(props: ChangeBlockProps) {
-  const { groups, activeIri, onJumpTo, scrollRoot } = props;
+  const { groups, activeIri, onJumpTo, scrollRoot, showLinks } = props;
 
   const { ref, isIntersecting } = useIntersectionObserver({
     root: scrollRoot,
@@ -173,6 +176,7 @@ function ChangeBlock(props: ChangeBlockProps) {
             .find(isPresent)}
           nodesLoading={isLoading}
           scrollRoot={scrollRoot}
+          showLinks={showLinks}
         />
       ))}
     </div>
@@ -188,10 +192,21 @@ export type ActivityChangesProps = {
   scrollTarget: { iri: string; nonce: number } | null;
   // Embedded runs in a short box, where the full-page scroll-room spacer would over-scroll.
   inline?: boolean;
+  running?: boolean;
+  showLinks?: boolean;
 };
 
 export function ActivityChanges(props: ActivityChangesProps) {
-  const { groups, activeIri, onActivate, onJumpTo, scrollTarget, inline = false } = props;
+  const {
+    groups,
+    activeIri,
+    onActivate,
+    onJumpTo,
+    scrollTarget,
+    inline = false,
+    running = false,
+    showLinks = true,
+  } = props;
 
   const blocks = useMemo(
     () =>
@@ -260,7 +275,7 @@ export function ActivityChanges(props: ActivityChangesProps) {
   if (!isPresent(groups)) {
     return (
       <div className="rounded-xl border border-muted-border bg-card p-5">
-        <p className="typography-small text-muted-foreground">No recorded changes.</p>
+        <NoChangesMessage running={running} />
       </div>
     );
   }
@@ -291,6 +306,7 @@ export function ActivityChanges(props: ActivityChangesProps) {
             activeIri={activeIri}
             onJumpTo={onJumpTo}
             scrollRoot={scrollRoot}
+            showLinks={showLinks}
           />
         ))}
 

package/src/routes/activity/detail/ActivityDetail.tsx

@@ -41,10 +41,20 @@ export type ActivityDetailProps = {
   variant?: "page" | "embedded";
   // Embedded only — lead-in above the run, rendered after it loads.
   caption?: ReactNode;
+  // Off when the host has no route for the run page or the data explorer.
+  showLinks?: boolean;
 };
 
 export function ActivityDetail(props: ActivityDetailProps) {
-  const { activityIri, leading, layout: controlledLayout, onLayoutChange, variant = "page", caption } = props;
+  const {
+    activityIri,
+    leading,
+    layout: controlledLayout,
+    onLayoutChange,
+    variant = "page",
+    caption,
+    showLinks = true,
+  } = props;
   const embedded = variant === "embedded";
 
   const [internalLayout, setInternalLayout] = useState<ActivityLayout>("timeline");
@@ -107,9 +117,13 @@ export function ActivityDetail(props: ActivityDetailProps) {
       />
     ) : null;
 
+  const isRunning = activity?.status === "running";
+
   const changes = (
     <ActivityChanges
       inline={embedded}
+      running={isRunning}
+      showLinks={showLinks}
       groups={groups}
       activeIri={activeIri}
       onActivate={activate}
@@ -140,7 +154,7 @@ export function ActivityDetail(props: ActivityDetailProps) {
       <div className="flex h-full min-h-0 flex-col gap-3">
         {isPresent(caption) && <p className="typography-small text-muted-foreground shrink-0">{caption}</p>}
         <div className="flex shrink-0 flex-wrap items-center gap-2">
-          {isPresent(activityIri) ? (
+          {showLinks && isPresent(activityIri) ? (
             <Link
               to={buildActivityHref(activityIri)}
               title={`Open ${activity.planLabel} run detail`}
@@ -160,7 +174,7 @@ export function ActivityDetail(props: ActivityDetailProps) {
           <Banner label={activity.errorMessage} className="max-h-40 shrink-0 overflow-y-auto" />
         )}
 
-        {isChangeSetLoading ? (
+        {isChangeSetLoading && !isRunning ? (
           <div className="flex items-center justify-center py-10">
             <Loader className="size-5" />
           </div>
@@ -234,7 +248,7 @@ export function ActivityDetail(props: ActivityDetailProps) {
           ) : layout === "steps" ? (
             <>
               <div className="min-h-0 flex-1 overflow-y-auto sm:hidden">
-                <ActivityStepsRail groups={groups} activeIri={activeIri} onSelect={activate} />
+                <ActivityStepsRail groups={groups} activeIri={activeIri} onSelect={activate} running={isRunning} />
                 <div className="border-t border-muted-border">
                   <ActivityStepDetail group={activeGroup} />
                 </div>
@@ -243,7 +257,12 @@ export function ActivityDetail(props: ActivityDetailProps) {
                 <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
                   <ResizablePanel defaultSize={26} minSize={18} maxSize={50} className="min-h-0">
                     <div className="h-full overflow-y-auto">
-                      <ActivityStepsRail groups={groups} activeIri={activeIri} onSelect={activate} />
+                      <ActivityStepsRail
+                        groups={groups}
+                        activeIri={activeIri}
+                        onSelect={activate}
+                        running={isRunning}
+                      />
                     </div>
                   </ResizablePanel>
 

package/src/routes/activity/detail/ActivityStepsRail.tsx

@@ -1,6 +1,7 @@
 import { humanCount } from "@manta-eu/lib/humanize";
 import { isPresent } from "@manta-eu/lib/present";
 import { formatStepTime } from "../format";
+import { NoChangesMessage } from "./NoChangesMessage";
 import type { ActivityChangeGroup } from "#ldo-ui";
 import { cn } from "#lib/utils";
 
@@ -8,15 +9,16 @@ export type ActivityStepsRailProps = {
   groups: ActivityChangeGroup[];
   activeIri: string | null;
   onSelect: (entityIri: string) => void;
+  running?: boolean;
 };
 
 export function ActivityStepsRail(props: ActivityStepsRailProps) {
-  const { groups, activeIri, onSelect } = props;
+  const { groups, activeIri, onSelect, running = false } = props;
 
   if (!isPresent(groups)) {
     return (
       <div className="p-4">
-        <p className="typography-small text-muted-foreground">No recorded changes.</p>
+        <NoChangesMessage running={running} />
       </div>
     );
   }

package/src/routes/activity/detail/ActivityTimeline.tsx

@@ -42,7 +42,7 @@ export function ActivityTimeline(props: ActivityTimelineProps) {
 
   if (!isPresent(bars)) {
     return (
-      <div className="rounded-xl border border-muted-border bg-card px-5 py-4">
+      <div className="shrink-0 rounded-xl border border-muted-border bg-card px-5 py-4">
         <p className="typography-small text-muted-foreground">No timestamps to plot.</p>
       </div>
     );
@@ -57,7 +57,7 @@ export function ActivityTimeline(props: ActivityTimelineProps) {
   const trackHeightPx = Math.max(laneCount, 1) * rowHeightPx;
 
   return (
-    <div className="overflow-auto rounded-xl border border-muted-border bg-card">
+    <div className="shrink-0 overflow-auto rounded-xl border border-muted-border bg-card">
       <div className="px-5 pb-3 pt-3" style={{ minWidth: `${trackMinWidthPx}px` }}>
         <div className="relative h-4">
           {ticks.map((tick, index) => (

package/src/routes/activity/detail/NoChangesMessage.tsx

@@ -0,0 +1,20 @@
+import { Loader } from "#components/loader/index";
+
+type NoChangesMessageProps = {
+  running?: boolean;
+};
+
+export function NoChangesMessage(props: NoChangesMessageProps) {
+  const { running = false } = props;
+
+  if (!running) {
+    return <p className="typography-small text-muted-foreground">No recorded changes.</p>;
+  }
+
+  return (
+    <p role="status" className="flex items-center gap-2 typography-small text-muted-foreground">
+      <Loader className="size-4 shrink-0" />
+      Running. Changes appear as each step completes.
+    </p>
+  );
+}

package/src/routes/data-explorer/components/RawTriples.tsx

@@ -7,8 +7,8 @@ import type { ReactNode } from "react";
 import { Link } from "react-router";
 import { useTriples } from "../triples";
 import { turtleForSubject } from "../turtle";
-import { TruncateTooltip } from "./TruncateTooltip";
 import { Skeleton } from "#components/skeleton/index";
+import { TruncateTooltip } from "#components/tooltip/index";
 import { decodeSkolem, isBlankNode, useInstanceLabel } from "#ldo-ui";
 import { cn } from "#lib/utils";
 

package/src/routes/data-explorer/components/RecentTypes.tsx

@@ -16,8 +16,8 @@ import { Breadcrumbs } from "./Breadcrumbs";
 import { DetailHeader, TypeBadge } from "./DetailHeader";
 import { ModifiedAgo } from "./ModifiedAgo";
 import { EntityName, LinkList, LinkRow, LoadingRows, StatusText } from "./RawTriples";
-import { TruncateTooltip } from "./TruncateTooltip";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#components/collapsible/index";
+import { TruncateTooltip } from "#components/tooltip/index";
 import { cn } from "#lib/utils";
 
 type RecentInstanceRowsProps = { recentType: RecentType };

package/src/routes/data-explorer/components/class-detail/Instances.tsx

@@ -7,7 +7,7 @@ import { LoadMoreButton } from "../LoadMoreButton";
 import { ModifiedAgo } from "../ModifiedAgo";
 import { entityNameClass, EntityName, LinkList, LinkRow, LoadingRows, StatusText } from "../RawTriples";
 import { SegmentBuilder } from "../SegmentBuilder";
-import { TruncateTooltip } from "../TruncateTooltip";
+import { TruncateTooltip } from "#components/tooltip/index";
 import { encodeBlankKey, useBlankInstances } from "#routes/data-explorer/blank-record";
 import { useFilteredCount, useFilteredInstances } from "#routes/data-explorer/filter-hooks";
 import { classAnchor, hasActiveConditions, type SegmentFilter } from "#routes/data-explorer/filter-query";

package/src/routes/data-explorer/components/namespace-detail/NamespaceClassRow.tsx

@@ -1,7 +1,7 @@
 import { humanCount } from "@manta-eu/lib/humanize";
 import { classPath } from "../../namespaces";
 import { entityNameClass, LinkRow } from "../RawTriples";
-import { TruncateTooltip } from "../TruncateTooltip";
+import { TruncateTooltip } from "#components/tooltip/index";
 import type { ExplorerClass } from "#routes/data-explorer/classes";
 
 type NamespaceClassRowProps = { entry: ExplorerClass; count?: number };

package/src/routes/data-explorer/components/ontology-coverage/CoverageTermColumns.tsx

@@ -4,10 +4,10 @@ import { useMemo } from "react";
 import { Link } from "react-router";
 import { classRef, namespaceLabel } from "../../namespaces";
 import { NamespaceSwatch } from "../NamespaceSwatch";
-import { TruncateTooltip } from "../TruncateTooltip";
 import { MissingValue } from "./MissingValue";
 import { RuleReferencesCell } from "./RuleReferencesCell";
 import { Badge } from "#components/badge/index";
+import { TruncateTooltip } from "#components/tooltip/index";
 import { sectionLabelClass } from "#ldo-ui";
 import { cn } from "#lib/utils";
 import type { CoverageTerm } from "#routes/data-explorer/coverage";

package/src/routes/data-explorer/components/ontology-coverage/UnobservedRuleVocabulary.tsx

@@ -6,13 +6,13 @@ import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router";
 import { classRef, namespaceLabel } from "../../namespaces";
 import { NamespaceSwatch } from "../NamespaceSwatch";
-import { TruncateTooltip } from "../TruncateTooltip";
 import { RuleReferencesCell } from "./RuleReferencesCell";
 import { Badge } from "#components/badge/index";
 import { EmptyState } from "#components/empty-state/index";
 import { SearchInput } from "#components/input/index";
 import { PaginationBlock } from "#components/pagination/index";
 import { createTableConfig, DataTable } from "#components/table/index";
+import { TruncateTooltip } from "#components/tooltip/index";
 import { shouldClampPageIndex, useFittedPagination } from "#hooks/useFittedPagination";
 import { sectionLabelClass } from "#ldo-ui";
 import { cn } from "#lib/utils";

package/src/routes/data-explorer/components/record-detail/ChatPreview.tsx

@@ -90,14 +90,14 @@ export function ChatPreview(props: ChatPreviewProps) {
 
   if (!node) return <StatusText>Nothing to preview.</StatusText>;
 
-  const EntityView = getEntityView(node.data.type, node.data.actionShape) ?? GenericView;
+  const EntityView = getEntityView(node.data.type, node.data.actionShape);
 
   return (
     <div className="flex flex-col gap-6">
       <section>
         <h3 className={cn(sectionLabelClass, "mb-1.5 text-muted-foreground")}>Chat rendering</h3>
         <div className="max-w-md">
-          <EntityView data={node.data} />
+          {EntityView ? <EntityView data={node.data} /> : <GenericView data={node.data} defaultExpanded />}
         </div>
       </section>
 

package/src/routes/integrations/components/connect-forms/DataConnectionConnectForm.tsx

@@ -23,6 +23,8 @@ import {
   nameSchema,
   pickSettings,
   settingsSchema,
+  sourceKey,
+  sourceSchema,
   storedValues,
   type ConnectorField,
   type DataConnectionValues,
@@ -39,22 +41,41 @@ export type StoredConnection = StoredDataConnection & { id: string };
 
 type Step = StepConfig<DataConnectionValues>;
 
-function nameStep(providerName: string): Step {
+const newSourceHint =
+  "Optional. Lowercase letters and digits. Left blank, Manta reuses the name of an earlier connection to this database, or takes one from the connection name. It can't change later.";
+const editingSourceHint = "Set when the connection was created. It can't change.";
+
+function nameStep(providerName: string, editing: boolean): Step {
   return {
     id: "name",
     title: "Name this connection",
     description: `Used to identify this ${providerName} database in Manta.`,
-    schema: z.object({ [nameKey]: nameSchema }),
+    schema: z.object({ [nameKey]: nameSchema, [sourceKey]: sourceSchema }),
     continueLabel: "Continue",
     render: (form) => (
-      <Input
-        id={inputId(nameKey)}
-        label="Name"
-        placeholder="Warehouse"
-        autoComplete="off"
-        error={form.formState.errors[nameKey]?.message?.toString()}
-        {...form.register(nameKey)}
-      />
+      <div className="grid gap-4">
+        <Input
+          id={inputId(nameKey)}
+          label="Name"
+          placeholder="Warehouse"
+          autoComplete="off"
+          error={form.formState.errors[nameKey]?.message?.toString()}
+          {...form.register(nameKey)}
+        />
+
+        {(!editing || isPresent(form.getValues(sourceKey))) && (
+          <Input
+            id={inputId(sourceKey)}
+            label="Source name"
+            placeholder="warehouse"
+            autoComplete="off"
+            disabled={editing}
+            helperText={editing ? editingSourceHint : newSourceHint}
+            error={form.formState.errors[sourceKey]?.message?.toString()}
+            {...form.register(sourceKey)}
+          />
+        )}
+      </div>
     ),
   };
 }
@@ -117,7 +138,7 @@ export function createSteps(
   const required = fields.filter((field) => field.required);
   const optional = fields.filter((field) => !field.required);
   const steps = [
-    nameStep(providerName),
+    nameStep(providerName, editing),
     connectionStep({ providerName, connectorType, stepFields: required, allFields: fields, editing }),
     ...(isPresent(optional) ? [optionalStep(optional, editing)] : []),
   ];
@@ -160,7 +181,12 @@ function DataConnectionWizard(props: DataConnectionWizardProps) {
 
   async function create(values: DataConnectionValues) {
     await createMutation.mutateAsync({
-      input: { name: values[nameKey], connectorType, settings: pickSettings(values, fields) },
+      input: {
+        name: values[nameKey],
+        connectorType,
+        sourceName: values[sourceKey] || undefined,
+        settings: pickSettings(values, fields),
+      },
     });
     toast.success(`${provider.name} added`, { description: "Manta is testing the connection." });
   }

package/src/routes/integrations/components/connect-forms/data-connection-fields.ts

@@ -5,12 +5,19 @@ import { z } from "zod";
 export type ConnectorField = GQLDataConnectorTypesQuery["dataConnectorTypes"][number]["fields"][number];
 
 export const nameKey = "connectionName";
+export const sourceKey = "sourceName";
 
 // The setting keys come from the connector descriptor at runtime, so the value type is an index signature.
 export type DataConnectionValues = { [nameKey]: string; [setting: string]: string };
 
 export const nameSchema = z.string().trim().min(1, "Name is required").max(64, "64 characters or fewer");
 
+export const sourceSchema = z
+  .string()
+  .trim()
+  .regex(/^([a-z][a-z0-9]*)?$/, "Use lowercase letters and digits, starting with a letter")
+  .optional();
+
 const valuePatterns: Partial<Record<GQLDataConnectorFieldType, { pattern: RegExp; message: string }>> = {
   [GQLDataConnectorFieldType.Integer]: { pattern: /^-?\d+$/, message: "Enter a whole number" },
   [GQLDataConnectorFieldType.Decimal]: { pattern: /^-?\d+(\.\d+)?$/, message: "Enter a number" },
@@ -40,7 +47,7 @@ export function settingsSchema(fields: readonly ConnectorField[]) {
 
 // The fields come at runtime, so the built schema has no static output type to infer.
 export function formSchema(fields: readonly ConnectorField[]): z.ZodType<DataConnectionValues, DataConnectionValues> {
-  return settingsSchema(fields).extend({ [nameKey]: nameSchema }) as unknown as z.ZodType<
+  return settingsSchema(fields).extend({ [nameKey]: nameSchema, [sourceKey]: sourceSchema }) as unknown as z.ZodType<
     DataConnectionValues,
     DataConnectionValues
   >;
@@ -55,13 +62,14 @@ export function pickSettings(values: DataConnectionValues, fields: readonly Conn
 }
 
 export function blankValues(fields: readonly ConnectorField[]): DataConnectionValues {
-  return { ...Object.fromEntries(fields.map((field) => [field.key, ""])), [nameKey]: "" };
+  return { ...Object.fromEntries(fields.map((field) => [field.key, ""])), [nameKey]: "", [sourceKey]: "" };
 }
 
 export type DataConnectionSetting = { key: string; value: string };
 
 export type StoredDataConnection = {
   name: string;
+  sourceName?: string | null;
   settings: readonly DataConnectionSetting[];
   candidateSettings?: readonly DataConnectionSetting[] | null;
   error?: string | null;
@@ -83,6 +91,7 @@ export function storedValues(stored: StoredDataConnection, fields: readonly Conn
   return {
     ...Object.fromEntries(fields.map((field) => [field.key, field.secret ? "" : (storedByKey.get(field.key) ?? "")])),
     [nameKey]: stored.name,
+    [sourceKey]: stored.sourceName ?? "",
   };
 }