Use (first usable) datastore url when importing remote dataset (#6462)

* use (first usable) datastore url when importing remote dataset

* update changelog

Author: philippotto

CHANGELOG.unreleased.md

@@ -21,6 +21,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed sharing button for users who are currently visiting a dataset or annotation which was shared with them. [#6438](https://github.com/scalableminds/webknossos/pull/6438)
 - Fixed the duplicate function for annotations with an editable mapping (a.k.a. supervoxel proofreading) layer. [#6446](https://github.com/scalableminds/webknossos/pull/6446)
 - Fixed isosurface loading for volume annotations with mappings. [#6458](https://github.com/scalableminds/webknossos/pull/6458)
+- Fixed importing of remote datastore (e.g., zarr) when datastore is set up separately. [#6462](https://github.com/scalableminds/webknossos/pull/6462)
 
 ### Removed
 

frontend/javascripts/admin/admin_rest_api.ts

@@ -1479,12 +1479,13 @@ export async function exploreRemoteDataset(
 }
 
 export async function storeRemoteDataset(
+  datastoreUrl: string,
   datasetName: string,
   organizationName: string,
   datasource: string,
 ): Promise<Response> {
   return doWithToken((token) =>
-    fetch(`/data/datasets/${organizationName}/${datasetName}?token=${token}`, {
+    fetch(`${datastoreUrl}/data/datasets/${organizationName}/${datasetName}?token=${token}`, {
       method: "PUT",
       headers: { "Content-Type": "application/json" },
       body: datasource,

frontend/javascripts/admin/dataset/dataset_add_zarr_view.tsx

@@ -1,7 +1,7 @@
 import { Form, Input, Button, Col, Radio, Row, Collapse } from "antd";
 import { connect } from "react-redux";
 import React, { useState } from "react";
-import type { APIUser } from "types/api_flow_types";
+import type { APIDataStore, APIUser } from "types/api_flow_types";
 import type { OxalisState } from "oxalis/store";
 import { exploreRemoteDataset, isDatasetNameValid, storeRemoteDataset } from "admin/admin_rest_api";
 import messages from "messages";
@@ -21,6 +21,7 @@ const RadioGroup = Radio.Group;
 
 type OwnProps = {
   onAdded: (arg0: string, arg1: string) => Promise<void>;
+  datastores: Array<APIDataStore>;
 };
 type StateProps = {
   activeUser: APIUser | null | undefined;
@@ -136,6 +137,13 @@ function DatasetAddZarrView(props: Props) {
   }
 
   async function handleStoreDataset() {
+    const uploadableDatastores = props.datastores.filter((datastore) => datastore.allowsUpload);
+    const datastoreToUse = uploadableDatastores[0];
+    if (!datastoreToUse) {
+      Toast.error("Could not find datastore that allows uploading.");
+      return;
+    }
+
     if (datasourceConfig && activeUser) {
       let configJSON;
       try {
@@ -148,6 +156,7 @@ function DatasetAddZarrView(props: Props) {
           throw new Error(nameValidationResult);
         }
         const response = await storeRemoteDataset(
+          datastoreToUse.url,
           configJSON.id.name,
           activeUser.organization,
           datasourceConfig,