Sync dataset name with datasource in add remote view

CHANGELOG.unreleased.md

@@ -26,6 +26,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fix performance bottleneck when deleting a lot of trees at once. [#8176](https://github.com/scalableminds/webknossos/pull/8176)
 - Fix that listing datasets with the `api/datasets` route without compression failed due to missing permissions regarding public datasets. [#8249](https://github.com/scalableminds/webknossos/pull/8249)
 - Fix a bug where changing the color of a segment via the menu in the segments tab would update the segment color of the previous segment, on which the context menu was opened. [#8225](https://github.com/scalableminds/webknossos/pull/8225)
+- Fix a bug where in the add remote dataset view the dataset name setting was not in sync with the datasource setting of the advanced tab making the form not submittable. [#8245](https://github.com/scalableminds/webknossos/pull/8245)
 - Fix a bug when importing an NML with groups when only groups but no trees exist in an annotation. [#8176](https://github.com/scalableminds/webknossos/pull/8176)
 - Fix a bug where trying to delete a non-existing node (via the API, for example) would delete the whole active tree. [#8176](https://github.com/scalableminds/webknossos/pull/8176)
 - Fix a bug where dataset uploads would fail if the organization directory on disk is missing. [#8230](https://github.com/scalableminds/webknossos/pull/8230)

frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx

@@ -252,13 +252,13 @@ function DatasetAddRemoteView(props: Props) {
     form.setFieldsValue({ dataSourceJson });
     // Since this function sets the JSON string, we have to update the
     // data which is rendered by the "simple" page.
-    syncDataSourceFields(form, "simple");
+    syncDataSourceFields(form, "simple", true);
     form.validateFields();
   };
 
   async function handleStoreDataset() {
     // Sync simple with advanced and get newest datasourceJson
-    syncDataSourceFields(form, dataSourceEditMode === "simple" ? "advanced" : "simple");
+    syncDataSourceFields(form, dataSourceEditMode === "simple" ? "advanced" : "simple", true);
     try {
       await form.validateFields();
     } catch (_e) {
@@ -376,7 +376,7 @@ function DatasetAddRemoteView(props: Props) {
               form={form}
               activeDataSourceEditMode={dataSourceEditMode}
               onChange={(activeEditMode) => {
-                syncDataSourceFields(form, activeEditMode);
+                syncDataSourceFields(form, activeEditMode, true);
                 form.validateFields();
                 setDataSourceEditMode(activeEditMode);
               }}
@@ -515,7 +515,7 @@ function AddRemoteLayer({
     }
 
     // Sync simple with advanced and get newest datasourceJson
-    syncDataSourceFields(form, dataSourceEditMode === "simple" ? "advanced" : "simple");
+    syncDataSourceFields(form, dataSourceEditMode === "simple" ? "advanced" : "simple", true);
     const datasourceConfigStr = form.getFieldValue("dataSourceJson");
     const datastoreToUse = uploadableDatastores.find(
       (datastore) => form.getFieldValue("datastoreUrl") === datastore.url,

frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx

@@ -33,12 +33,16 @@ import { type APIDataLayer, type APIDataset, APIJobType } from "types/api_flow_t
 import { useStartAndPollJob } from "admin/job/job_hooks";
 import { AllUnits, LongUnitToShortUnitMap, type Vector3 } from "oxalis/constants";
 import Toast from "libs/toast";
+import type { ArbitraryObject } from "types/globals";
 
 const FormItem = Form.Item;
 
 export const syncDataSourceFields = (
   form: FormInstance,
   syncTargetTabKey: "simple" | "advanced",
+  // Syncing the dataset name is optional as this is needed for the add remote view, but not for the edit view.
+  // In the edit view, the datasource.id fields should never be changed and the backend will automatically ignore all changes to the id field.
+  syncDatasetName = false,
 ): void => {
   if (!form) {
     return;
@@ -47,12 +51,25 @@ export const syncDataSourceFields = (
   if (syncTargetTabKey === "advanced") {
     // Copy from simple to advanced: update json
     const dataSourceFromSimpleTab = form.getFieldValue("dataSource");
+    if (syncDatasetName && dataSourceFromSimpleTab) {
+      dataSourceFromSimpleTab.id ??= {};
+      dataSourceFromSimpleTab.id.name = form.getFieldValue(["dataset", "name"]);
+    }
     form.setFieldsValue({
       dataSourceJson: jsonStringify(dataSourceFromSimpleTab),
     });
   } else {
-    const dataSourceFromAdvancedTab = parseMaybe(form.getFieldValue("dataSourceJson"));
+    const dataSourceFromAdvancedTab = parseMaybe(
+      form.getFieldValue("dataSourceJson"),
+    ) as ArbitraryObject | null;
     // Copy from advanced to simple: update form values
+    if (syncDatasetName && dataSourceFromAdvancedTab?.id?.name) {
+      form.setFieldsValue({
+        dataset: {
+          name: dataSourceFromAdvancedTab.id.name,
+        },
+      });
+    }
     form.setFieldsValue({
       dataSource: dataSourceFromAdvancedTab,
     });