@manta-eu/react 0.8.1 → 0.9.0

package/src/routes/data-explorer/components/uploads/IngestRunsList.tsx

@@ -0,0 +1,63 @@
+import { Link } from "react-router";
+import { entityPath } from "../../namespaces";
+import type { IngestRun, UploadedFile } from "../../uploads";
+import { ArrowLinkIcon, arrowLinkClass } from "../ArrowLink";
+import { ModifiedAgo } from "../ModifiedAgo";
+import { EntityName, LinkList } from "../RawTriples";
+import { IngestStateStatus } from "./IngestStateStatus";
+import { TruncateTooltip } from "#components/tooltip/index";
+import { cn } from "#lib/utils";
+
+type IngestRunRowProps = { run: IngestRun; file: UploadedFile | undefined };
+
+function IngestRunRow(props: IngestRunRowProps) {
+  const { run, file } = props;
+
+  return (
+    <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:gap-3">
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <Link to={entityPath(run.file)} className="min-w-0 hover:underline">
+          {file ? (
+            <TruncateTooltip
+              text={file.fileName}
+              className="typography-small-medium block truncate text-default-foreground"
+            />
+          ) : (
+            <EntityName iri={run.file} />
+          )}
+        </Link>
+
+        <div className="typography-tiny flex flex-wrap items-center gap-x-2 text-muted-foreground">
+          {run.endedAt && <ModifiedAgo modified={run.endedAt} />}
+          <Link to={entityPath(run.iri)} className="hover:underline">
+            Run details
+          </Link>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <IngestStateStatus state={{ kind: "run", run }} />
+        {run.dataset && (
+          <Link to={entityPath(run.dataset)} className={cn("typography-small", arrowLinkClass)}>
+            Dataset
+            <ArrowLinkIcon />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type IngestRunsListProps = { runs: readonly IngestRun[]; fileByIri: ReadonlyMap<string, UploadedFile> };
+
+export function IngestRunsList(props: IngestRunsListProps) {
+  const { runs, fileByIri } = props;
+
+  return (
+    <LinkList>
+      {runs.map((run) => (
+        <IngestRunRow key={run.iri} run={run} file={fileByIri.get(run.file)} />
+      ))}
+    </LinkList>
+  );
+}

package/src/routes/data-explorer/components/uploads/IngestStateStatus.tsx

@@ -0,0 +1,45 @@
+import { match } from "ts-pattern";
+import type { FileIngestState, IngestRun } from "../../uploads";
+import { Status, type StatusVariant } from "#components/status/index";
+
+type StatusDisplay = { label: string; variant: StatusVariant };
+
+const countFormat = new Intl.NumberFormat("en-US");
+
+function recordCount(count: number): string {
+  return `${countFormat.format(count)} ${count === 1 ? "record" : "records"}`;
+}
+
+function ingestedDisplay(run: IngestRun): StatusDisplay {
+  const read = run.recordsRead === undefined ? "Ingested" : `Ingested ${recordCount(run.recordsRead)}`;
+  const dropped = run.recordsDropped ? `, ${countFormat.format(run.recordsDropped)} dropped` : "";
+
+  return { label: `${read}${dropped}`, variant: run.recordsDropped ? "warning" : "success" };
+}
+
+function runDisplay(run: IngestRun): StatusDisplay {
+  return match(run.status)
+    .with("ingested", () => ingestedDisplay(run))
+    .with("unparsable", (): StatusDisplay => ({ label: "Could not be read", variant: "error" }))
+    .with("too_large", (): StatusDisplay => ({ label: "Too large to ingest", variant: "warning" }))
+    .with("gone", (): StatusDisplay => ({ label: "Removed before ingest", variant: "neutral" }))
+    .exhaustive();
+}
+
+export function ingestStateDisplay(state: FileIngestState): StatusDisplay {
+  return match(state)
+    .with({ kind: "waiting" }, (): StatusDisplay => ({ label: "Waiting for ingest", variant: "neutral" }))
+    .with({ kind: "stored" }, (): StatusDisplay => ({ label: "Stored", variant: "neutral" }))
+    .with({ kind: "run" }, ({ run }) => runDisplay(run))
+    .exhaustive();
+}
+
+type IngestStateStatusProps = { state: FileIngestState; className?: string };
+
+export function IngestStateStatus(props: IngestStateStatusProps) {
+  const { state, className } = props;
+
+  const { label, variant } = ingestStateDisplay(state);
+
+  return <Status label={label} variant={variant} className={className} />;
+}

package/src/routes/data-explorer/components/uploads/UploadedFilesList.tsx

@@ -0,0 +1,93 @@
+import { userIriPrefix } from "@manta-eu/client/shared/stakeholder-iri";
+import { redirectPath } from "@manta-eu/ldo/redirect-queries";
+import { humanBytes } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { Download, FileText } from "lucide-react";
+import { Link } from "react-router";
+import { entityPath } from "../../namespaces";
+import type { UploadedFileWithState } from "../../uploads";
+import { ModifiedAgo } from "../ModifiedAgo";
+import { EntityName, LinkList } from "../RawTriples";
+import { IngestStateStatus } from "./IngestStateStatus";
+import { Button } from "#components/button/index";
+import { TruncateTooltip } from "#components/tooltip/index";
+import { useRedirectEndpoint } from "#ldo-ui";
+
+type UploaderProps = { iri: string | undefined; currentUserIri: string | undefined };
+
+function Uploader(props: UploaderProps) {
+  const { iri, currentUserIri } = props;
+
+  if (!iri) return null;
+
+  if (iri === currentUserIri) return <span>by you</span>;
+
+  if (iri.startsWith(userIriPrefix)) return <span>by a teammate</span>;
+
+  return (
+    <span className="flex min-w-0 items-center gap-1">
+      by <EntityName iri={iri} />
+    </span>
+  );
+}
+
+type UploadedFileRowProps = { file: UploadedFileWithState; currentUserIri: string | undefined };
+
+function UploadedFileRow(props: UploadedFileRowProps) {
+  const { file, currentUserIri } = props;
+
+  const redirectEndpoint = useRedirectEndpoint();
+
+  return (
+    <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:gap-3">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <FileText className="size-4 shrink-0 text-muted-foreground" />
+
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <Link to={entityPath(file.iri)} className="min-w-0 hover:underline">
+            <TruncateTooltip
+              text={file.fileName}
+              className="typography-small-medium block truncate text-default-foreground"
+            />
+          </Link>
+
+          <div className="typography-tiny flex min-w-0 flex-wrap items-center gap-x-2 text-muted-foreground">
+            {file.byteSize !== undefined && <span>{humanBytes(file.byteSize)}</span>}
+            {isPresent(file.extension) && <span title={file.mediaType}>{file.extension.toUpperCase()}</span>}
+            {file.uploadedAt && <ModifiedAgo modified={file.uploadedAt} />}
+            <Uploader iri={file.uploader} currentUserIri={currentUserIri} />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 pl-7 sm:pl-0">
+        <IngestStateStatus state={file.state} />
+
+        <Button asChild variant="ghost" size="xs" className="size-7 shrink-0 p-0">
+          <a
+            href={redirectPath(file.iri, redirectEndpoint)}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`Download ${file.fileName}`}
+          >
+            <Download className="size-4" />
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+type UploadedFilesListProps = { files: readonly UploadedFileWithState[]; currentUserIri?: string };
+
+export function UploadedFilesList(props: UploadedFilesListProps) {
+  const { files, currentUserIri } = props;
+
+  return (
+    <LinkList>
+      {files.map((file) => (
+        <UploadedFileRow key={file.iri} file={file} currentUserIri={currentUserIri} />
+      ))}
+    </LinkList>
+  );
+}

package/src/routes/data-explorer/components/uploads/UploadsPages.tsx

@@ -0,0 +1,80 @@
+import { getUserIri } from "@manta-eu/client/shared/stakeholder-iri";
+import { isPresent } from "@manta-eu/lib/present";
+import { explorerCrumb } from "../../namespaces";
+import { uploadsLimit, useUploads } from "../../uploads";
+import { Breadcrumbs } from "../Breadcrumbs";
+import { DetailHeader } from "../DetailHeader";
+import { LoadingRows, StatusText } from "../RawTriples";
+import { IngestRunsList } from "./IngestRunsList";
+import { UploadedFilesList } from "./UploadedFilesList";
+import { useAuthContext } from "#providers/AuthContext";
+
+export type UploadedFilesSectionProps = { emptyText?: string };
+
+export function UploadedFilesSection(props: UploadedFilesSectionProps) {
+  const { emptyText = "No files uploaded yet." } = props;
+
+  const { isOperator, user } = useAuthContext();
+  const { files, isLoading, error } = useUploads({ includeAllFiles: isOperator });
+
+  if (isLoading) return <LoadingRows />;
+
+  if (error) return <StatusText role="alert">Failed to load files.</StatusText>;
+
+  if (!isPresent(files)) return <StatusText>{emptyText}</StatusText>;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <UploadedFilesList files={files} currentUserIri={getUserIri(user.id)} />
+      {files.length >= uploadsLimit && (
+        <p className="typography-caption text-muted-foreground">Showing the newest {uploadsLimit} files.</p>
+      )}
+    </div>
+  );
+}
+
+export function UploadedFilesPage() {
+  const { isOperator } = useAuthContext();
+
+  return (
+    <div className="flex max-w-5xl flex-col gap-6">
+      <Breadcrumbs trail={[explorerCrumb, { label: "Files" }]} />
+
+      <DetailHeader title="Files" />
+
+      <p className="typography-small -mt-3 max-w-prose text-muted-foreground">
+        {isOperator
+          ? "Every file in this datastore, newest first, with how its ingest into the knowledge graph ended."
+          : "Files uploaded to this datastore, newest first, with how their ingest into the knowledge graph ended."}{" "}
+        CSV, Parquet, Turtle and N-Triples files are ingested automatically; other files are stored.
+      </p>
+
+      <UploadedFilesSection />
+    </div>
+  );
+}
+
+export function IngestRunsPage() {
+  const { isOperator } = useAuthContext();
+  const { runs, fileByIri, isLoading, error } = useUploads({ includeAllFiles: isOperator });
+
+  return (
+    <div className="flex max-w-5xl flex-col gap-6">
+      <Breadcrumbs trail={[explorerCrumb, { label: "Ingest runs" }]} />
+
+      <DetailHeader title="Ingest runs" />
+
+      <p className="typography-small -mt-3 max-w-prose text-muted-foreground">
+        Each attempt to add an uploaded file to the knowledge graph, newest first.
+      </p>
+
+      {isLoading && <LoadingRows />}
+
+      {error && <StatusText role="alert">Failed to load ingest runs.</StatusText>}
+
+      {!isLoading && !error && !isPresent(runs) && <StatusText>No file has been ingested yet.</StatusText>}
+
+      {isPresent(runs) && <IngestRunsList runs={runs} fileByIri={fileByIri} />}
+    </div>
+  );
+}

package/src/routes/data-explorer/index.tsx

@@ -9,6 +9,12 @@ export { DataExplorerLayout } from "./components/DataExplorerLayout";
 export { ExplorerEmptyState as DataExplorerIndexRoute } from "./components/ExplorerEmptyState";
 export { CoverageOverview as DataExplorerCoverageRoute } from "./components/ontology-coverage";
 export { RecentTypes as DataExplorerRecentRoute } from "./components/RecentTypes";
+export {
+  IngestRunsPage as DataExplorerIngestRoute,
+  UploadedFilesPage as DataExplorerFilesRoute,
+  UploadedFilesSection,
+  type UploadedFilesSectionProps,
+} from "./components/uploads/UploadsPages";
 
 export function DataExplorerPrefixRoute() {
   const { prefix } = useParams<{ prefix: string }>();

package/src/routes/data-explorer/namespaces.ts

@@ -96,8 +96,12 @@ export function localName(iri: string, prefix: string): string {
 export { entityPath, entitySegment, explorerPath };
 export const recentSegment = "recent";
 export const coverageSegment = "coverage";
+export const filesSegment = "files";
+export const ingestRunsSegment = "ingest-runs";
 export const recentPath = `${explorerPath}/${recentSegment}`;
 export const coveragePath = `${explorerPath}/${coverageSegment}`;
+export const filesPath = `${explorerPath}/${filesSegment}`;
+export const ingestRunsPath = `${explorerPath}/${ingestRunsSegment}`;
 export const explorerCrumb = { label: "Data", to: explorerPath };
 
 export function isExplorerPrefix(value: string | undefined): value is string {
@@ -105,7 +109,9 @@ export function isExplorerPrefix(value: string | undefined): value is string {
 }
 
 export function isNamespaceSegment(segment: string | undefined): segment is string {
-  return isPresent(segment) && ![recentSegment, coverageSegment, entitySegment].includes(segment);
+  const reserved = [recentSegment, coverageSegment, filesSegment, ingestRunsSegment, entitySegment];
+
+  return isPresent(segment) && !reserved.includes(segment);
 }
 
 export function namespacePath(key: string): string {

package/src/routes/data-explorer/uploads.ts

@@ -0,0 +1,205 @@
+import { userIriPrefix } from "@manta-eu/client/shared/stakeholder-iri";
+import { isIngestableExtension } from "@manta-eu/client/shared/upload";
+import { ingestManual } from "@manta-eu/ldo";
+import { ingest, nfo, nmo, prov } from "@manta-eu/ldo/namespaces";
+import { getExtension } from "@manta-eu/lib/file";
+import { useQueryClient } from "@tanstack/react-query";
+import type { RDF } from "ldkit/rdf";
+import { useCallback, useMemo } from "react";
+import { bindingCount, bindingValue, useSparqlSelect } from "#ldo-ui";
+
+export const uploadsLimit = 500;
+
+export const ingestPollIntervalMs = 15_000;
+
+const uploadsQueryKey = ["uploaded-files"] as const;
+
+export type UploadedFile = {
+  iri: string;
+  fileName: string;
+  mediaType?: string;
+  byteSize?: number;
+  extension?: string;
+  uploadedAt?: string;
+  uploader?: string;
+  purpose?: string;
+};
+
+export type IngestStatus = "ingested" | "unparsable" | "gone" | "too_large";
+
+export type IngestRun = {
+  iri: string;
+  file: string;
+  status: IngestStatus;
+  endedAt?: string;
+  recordsRead?: number;
+  recordsDropped?: number;
+  dataset?: string;
+};
+
+export type FileIngestState = { kind: "waiting" } | { kind: "stored" } | { kind: "run"; run: IngestRun };
+
+const ingestStatuses = new Set<string>(["ingested", "unparsable", "gone", "too_large"]);
+
+function isIngestStatus(value: string | undefined): value is IngestStatus {
+  return value !== undefined && ingestStatuses.has(value);
+}
+
+// Operators see every file node; members see the files a user uploaded.
+export function uploadedFilesQuery(includeAllFiles: boolean): string {
+  const uploaderPattern = includeAllFiles
+    ? `OPTIONAL { ?file <${prov.wasAttributedTo}> ?uploader }`
+    : `?file <${prov.wasAttributedTo}> ?uploader .
+  FILTER(STRSTARTS(STR(?uploader), "${userIriPrefix}"))`;
+
+  return `SELECT ?file ?fileName ?mediaType ?byteSize ?extension ?uploadedAt ?uploader ?purpose WHERE {
+  ?file a <${nfo.FileDataObject}> .
+  FILTER(isIRI(?file))
+  ${uploaderPattern}
+  OPTIONAL { ?file <${nfo.fileName}> ?fileName }
+  OPTIONAL { ?file <${nmo.contentMimeType}> ?mediaType }
+  OPTIONAL { ?file <${nfo.fileSize}> ?byteSize }
+  OPTIONAL { ?file <${nfo.fileExtension}> ?extension }
+  OPTIONAL { ?file <${prov.generatedAtTime}> ?uploadedAt }
+  OPTIONAL { ?file <${ingestManual.uploadPurpose}> ?purpose }
+}
+ORDER BY DESC(STR(?uploadedAt)) STR(?file)
+LIMIT ${uploadsLimit}`;
+}
+
+export const ingestRunsQuery = `SELECT ?run ?file ?status ?endedAt ?recordsRead ?recordsDropped ?dataset WHERE {
+  ?run a <${ingest.IngestRun}> ;
+    <${prov.used}> ?file ;
+    <${ingest.status}> ?status .
+  FILTER(isIRI(?run))
+  OPTIONAL { ?run <${prov.endedAtTime}> ?endedAt }
+  OPTIONAL { ?run <${ingest.recordsRead}> ?recordsRead }
+  OPTIONAL { ?run <${ingest.recordsDropped}> ?recordsDropped }
+  OPTIONAL { ?run <${prov.generated}> ?dataset }
+}
+ORDER BY DESC(STR(?endedAt)) STR(?run)
+LIMIT ${uploadsLimit}`;
+
+export function uploadedFilesFromBindings(bindings: RDF.Bindings[]): UploadedFile[] {
+  const files = new Map<string, UploadedFile>();
+
+  for (const binding of bindings) {
+    const iri = bindingValue(binding, "file");
+
+    if (!iri || files.has(iri)) continue;
+
+    const fileName = bindingValue(binding, "fileName") ?? iri;
+
+    files.set(iri, {
+      iri,
+      fileName,
+      mediaType: bindingValue(binding, "mediaType"),
+      byteSize: bindingCount(binding, "byteSize"),
+      extension: bindingValue(binding, "extension") ?? getExtension(fileName),
+      uploadedAt: bindingValue(binding, "uploadedAt"),
+      uploader: bindingValue(binding, "uploader"),
+      purpose: bindingValue(binding, "purpose"),
+    });
+  }
+
+  return [...files.values()];
+}
+
+export function ingestRunsFromBindings(bindings: RDF.Bindings[]): IngestRun[] {
+  const runs = new Map<string, IngestRun>();
+
+  for (const binding of bindings) {
+    const iri = bindingValue(binding, "run");
+    const file = bindingValue(binding, "file");
+    const status = bindingValue(binding, "status");
+
+    if (!iri || !file || !isIngestStatus(status) || runs.has(iri)) continue;
+
+    runs.set(iri, {
+      iri,
+      file,
+      status,
+      endedAt: bindingValue(binding, "endedAt"),
+      recordsRead: bindingCount(binding, "recordsRead"),
+      recordsDropped: bindingCount(binding, "recordsDropped"),
+      dataset: bindingValue(binding, "dataset"),
+    });
+  }
+
+  return [...runs.values()];
+}
+
+export function latestRunByFile(runs: readonly IngestRun[]): Map<string, IngestRun> {
+  const latest = new Map<string, IngestRun>();
+
+  for (const run of runs) {
+    const current = latest.get(run.file);
+
+    if (!current || (run.endedAt ?? "") > (current.endedAt ?? "")) latest.set(run.file, run);
+  }
+
+  return latest;
+}
+
+// Only a file recorded with the "file" purpose is picked up by ingest; a bundle or an older upload is only stored.
+export function fileIngestState(file: UploadedFile, run: IngestRun | undefined): FileIngestState {
+  if (run) return { kind: "run", run };
+
+  return file.purpose === "file" && isIngestableExtension(file.extension) ? { kind: "waiting" } : { kind: "stored" };
+}
+
+export function filesWithIngestState(
+  files: readonly UploadedFile[],
+  runs: readonly IngestRun[],
+): UploadedFileWithState[] {
+  const latest = latestRunByFile(runs);
+
+  return files.map((file) => ({ ...file, state: fileIngestState(file, latest.get(file.iri)) }));
+}
+
+export function hasWaitingFile(files: readonly UploadedFileWithState[]): boolean {
+  return files.some((file) => file.state.kind === "waiting");
+}
+
+export type UploadedFileWithState = UploadedFile & { state: FileIngestState };
+
+type UseUploadsOptions = { includeAllFiles: boolean };
+
+export function useUploads(options: UseUploadsOptions) {
+  const { includeAllFiles } = options;
+
+  const filesQuery = useSparqlSelect({
+    query: uploadedFilesQuery(includeAllFiles),
+    queryKey: [...uploadsQueryKey, "files", includeAllFiles],
+  });
+
+  const files = useMemo(() => uploadedFilesFromBindings(filesQuery.data ?? []), [filesQuery.data]);
+
+  const runsQuery = useSparqlSelect({
+    query: ingestRunsQuery,
+    queryKey: [...uploadsQueryKey, "runs"],
+    refetchInterval: (query) =>
+      hasWaitingFile(filesWithIngestState(files, ingestRunsFromBindings(query.state.data ?? [])))
+        ? ingestPollIntervalMs
+        : false,
+  });
+
+  const runs = useMemo(() => ingestRunsFromBindings(runsQuery.data ?? []), [runsQuery.data]);
+  const filesWithState = useMemo(() => filesWithIngestState(files, runs), [files, runs]);
+  const fileByIri = useMemo(() => new Map(files.map((file) => [file.iri, file])), [files]);
+
+  return {
+    files: filesWithState,
+    runs,
+    fileByIri,
+    hasWaiting: hasWaitingFile(filesWithState),
+    isLoading: filesQuery.isLoading || runsQuery.isLoading,
+    error: filesQuery.error ?? runsQuery.error,
+  };
+}
+
+export function useInvalidateUploads() {
+  const queryClient = useQueryClient();
+
+  return useCallback(() => queryClient.invalidateQueries({ queryKey: uploadsQueryKey }), [queryClient]);
+}

package/src/routes/datastores/components/LinkUnlinkedDatastoreDialog.tsx

@@ -1,5 +1,6 @@
 import { useLinkUnlinkedDatastoreMutation, useDatastoreTreeQuery, useUnlinkedDatastoresQuery } from "@manta-eu/client";
 import { parseError } from "@manta-eu/client/shared/error-utils";
+import { normalizeGroupPath, pathSegments } from "@manta-eu/client/shared/team";
 import { isPresent } from "@manta-eu/lib/present";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
@@ -30,6 +31,7 @@ export type SuggestedLinkTarget = {
 export type LinkUnlinkedDatastoreDialogProps = {
   datastoreId: string;
   organizationNames: string[];
+  groupPathsByOrganization: Map<string, string[]>;
   existingOrganizationNames: Set<string>;
   suggestedMatch?: SuggestedLinkTarget;
   onClose: () => void;
@@ -37,8 +39,17 @@ export type LinkUnlinkedDatastoreDialogProps = {
 
 type Mode = "new" | "existing";
 
+const organizationRootPath = "/";
+
 export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogProps) {
-  const { datastoreId, organizationNames, existingOrganizationNames, suggestedMatch, onClose } = props;
+  const {
+    datastoreId,
+    organizationNames,
+    groupPathsByOrganization,
+    existingOrganizationNames,
+    suggestedMatch,
+    onClose,
+  } = props;
   const { mantaClient } = useMantaClient();
   const queryClient = useQueryClient();
 
@@ -46,6 +57,11 @@ export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogPr
   const [organizationName, setOrganizationName] = useState("");
   const [existingOrganizationName, setExistingOrganizationName] = useState(suggestedMatch?.organizationName ?? "");
   const [name, setName] = useState(suggestedMatch?.name ?? "");
+  const [parentGroupPath, setParentGroupPath] = useState(
+    suggestedMatch ? normalizeGroupPath(suggestedMatch.parentPath.join("/")) : organizationRootPath,
+  );
+  const parentGroupPaths = groupPathsByOrganization.get(existingOrganizationName) ?? [];
+  const offeredParentGroupPath = parentGroupPaths.includes(parentGroupPath) ? parentGroupPath : organizationRootPath;
 
   const linkMutation = useLinkUnlinkedDatastoreMutation(mantaClient, {
     onSuccess: (result) => {
@@ -53,7 +69,11 @@ export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogPr
         void queryClient.invalidateQueries({ queryKey: useDatastoreTreeQuery.getKey() });
         void queryClient.invalidateQueries({ queryKey: useUnlinkedDatastoresQuery.getKey() });
         void queryClient.invalidateQueries({ queryKey: ["DatastoreProvisioningStatuses"] });
-        toast.success(`Linked to the existing datastore '${datastoreId}'`);
+        toast.success(
+          result.linkUnlinkedDatastore.pending
+            ? `Linked to '${datastoreId}', which is still being built`
+            : `Linked to the existing datastore '${datastoreId}'`,
+        );
         toastProviderWarning(result.linkUnlinkedDatastore.providerWarning);
         onClose();
       } else {
@@ -72,12 +92,12 @@ export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogPr
 
   const canSubmit = mode === "new" ? !!organizationName.trim() && !tenantCheck.blocked : !!existingOrganizationName;
   const atExistingOrganizationRoot = mode === "existing" && !name.trim();
-  const suggestedParentPath =
-    suggestedMatch &&
-    existingOrganizationName === suggestedMatch.organizationName &&
-    name.trim() === suggestedMatch.name
-      ? suggestedMatch.parentPath
-      : [];
+  const parentPath = pathSegments(offeredParentGroupPath);
+
+  function selectOrganization(organization: string) {
+    setExistingOrganizationName(organization);
+    setParentGroupPath(organizationRootPath);
+  }
 
   function submit() {
     if (!canSubmit) return;
@@ -107,7 +127,7 @@ export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogPr
           : {
               datastoreId,
               organizationName: existingOrganizationName,
-              ...(isPresent(suggestedParentPath) ? { parentPath: suggestedParentPath } : {}),
+              ...(isPresent(parentPath) ? { parentPath } : {}),
               name: name.trim(),
               atOrganizationRoot: false,
             };
@@ -143,7 +163,7 @@ export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogPr
           </>
         ) : (
           <>
-            <Select value={existingOrganizationName} onValueChange={setExistingOrganizationName}>
+            <Select value={existingOrganizationName} onValueChange={selectOrganization}>
               <SelectTrigger label="Organization" id="link-organization">
                 <SelectValue placeholder="Select an organization…" />
               </SelectTrigger>
@@ -155,6 +175,25 @@ export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogPr
                 ))}
               </SelectContent>
             </Select>
+            {isPresent(parentGroupPaths) && (
+              <Select
+                value={offeredParentGroupPath}
+                onValueChange={setParentGroupPath}
+                disabled={atExistingOrganizationRoot}
+              >
+                <SelectTrigger label="Under" id="link-parent-group">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={organizationRootPath}>Organization root</SelectItem>
+                  {parentGroupPaths.map((path) => (
+                    <SelectItem key={path} value={path}>
+                      {path}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
             <Input
               label="Datastore name"
               placeholder="Leave empty to link to the organization root"