From 45b74ec0ad5d39d26dfe8b9dad8f7ddfb7dd2378 Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Tue, 25 Jun 2024 14:46:30 +0200
Subject: [PATCH] Fix resource-array props not removed when input is empty

---
 browser/CHANGELOG.md                                 |  1 +
 .../src/components/SideBar/DriveSwitcher.tsx         |  2 +-
 .../src/components/forms/InputResourceArray.tsx      |  4 ++--
 .../views/OntologyPage/PropertyDatatypePicker.tsx    | 12 ++++++------
 browser/e2e/tests/filePicker.spec.ts                 |  2 --
 browser/e2e/tests/ontology.spec.ts                   |  1 -
 6 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
index f8a5393c6..50770de67 100644
--- a/browser/CHANGELOG.md
+++ b/browser/CHANGELOG.md
@@ -13,6 +13,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - [#896](https://github.com/atomicdata-dev/atomic-server/issues/896) Fix an issue where sidebar items require a double tap on iOS.
 - Updated the look & feel of the sidebar a bit.
 - [#893](https://github.com/atomicdata-dev/atomic-server/issues/893) Fix tables not showing any rows when viewing from a different server.
+- Fix an issue where the resource-array properties would be set to an empty array instead of removing the property when removing all items in the input.
 
 ### @tomic/react
 
diff --git a/browser/data-browser/src/components/SideBar/DriveSwitcher.tsx b/browser/data-browser/src/components/SideBar/DriveSwitcher.tsx
index 511918c1a..6d4ba73c7 100644
--- a/browser/data-browser/src/components/SideBar/DriveSwitcher.tsx
+++ b/browser/data-browser/src/components/SideBar/DriveSwitcher.tsx
@@ -91,7 +91,7 @@ export function DriveSwitcher() {
         disabled: !agent,
       },
     ],
-    [savedDrivesMap, drive, historyMap],
+    [savedDrivesMap, drive, historyMap, agent],
   );
 
   return <DropdownMenu trigger={Trigger} items={items} />;
diff --git a/browser/data-browser/src/components/forms/InputResourceArray.tsx b/browser/data-browser/src/components/forms/InputResourceArray.tsx
index 1f486abad..292d6e422 100644
--- a/browser/data-browser/src/components/forms/InputResourceArray.tsx
+++ b/browser/data-browser/src/components/forms/InputResourceArray.tsx
@@ -41,14 +41,14 @@ export default function InputResourceArray({
   }
 
   function handleClear() {
-    setArray([]);
+    setArray(undefined);
   }
 
   const handleRemoveRowList = useIndexDependantCallback(
     (index: number) => () => {
       const newArray = [...array];
       newArray.splice(index, 1);
-      setArray(newArray);
+      setArray(newArray.length === 0 ? undefined : newArray);
     },
     array,
     [setArray],
diff --git a/browser/data-browser/src/views/OntologyPage/PropertyDatatypePicker.tsx b/browser/data-browser/src/views/OntologyPage/PropertyDatatypePicker.tsx
index 61e9df0e6..6d889b307 100644
--- a/browser/data-browser/src/views/OntologyPage/PropertyDatatypePicker.tsx
+++ b/browser/data-browser/src/views/OntologyPage/PropertyDatatypePicker.tsx
@@ -19,6 +19,12 @@ const options = Object.entries(reverseDatatypeMapping)
   }))
   .filter(x => x.value !== 'unknown-datatype');
 
+const isResourceLike = (datatype: string) => {
+  return (
+    datatype === Datatype.ATOMIC_URL || datatype === Datatype.RESOURCEARRAY
+  );
+};
+
 export function PropertyDatatypePicker({
   resource,
   disabled,
@@ -30,12 +36,6 @@ export function PropertyDatatypePicker({
     commit: true,
   });
 
-  const isResourceLike = (datatype: string) => {
-    return (
-      datatype === Datatype.ATOMIC_URL || datatype === Datatype.RESOURCEARRAY
-    );
-  };
-
   const clearInapplicableProps = (datatype: string) => {
     if (!isResourceLike(datatype)) {
       setClassType(undefined);
diff --git a/browser/e2e/tests/filePicker.spec.ts b/browser/e2e/tests/filePicker.spec.ts
index 328dc0762..01b76c606 100644
--- a/browser/e2e/tests/filePicker.spec.ts
+++ b/browser/e2e/tests/filePicker.spec.ts
@@ -42,8 +42,6 @@ const createModel = async (page: Page) => {
 
   await expect(page.locator(`h1:has-text("${ONTOLOGY_NAME}")`)).toBeVisible();
 
-  page.getByRole('button', { name: 'Edit', exact: true }).click();
-
   await page.getByRole('button', { name: 'Add class', exact: true }).click();
   await page.getByPlaceholder('shortname').fill('robot');
   await page.getByRole('button', { name: 'Save' }).click();
diff --git a/browser/e2e/tests/ontology.spec.ts b/browser/e2e/tests/ontology.spec.ts
index 9ca6bb7dc..764e5ce67 100644
--- a/browser/e2e/tests/ontology.spec.ts
+++ b/browser/e2e/tests/ontology.spec.ts
@@ -36,7 +36,6 @@ test.describe('Ontology', async () => {
     await page.locator('dialog[open] button:has-text("Create")').click();
     await expect(page.locator(`h1:has-text("${ontologyName}")`)).toBeVisible();
 
-    await page.getByRole('button', { name: 'Edit', exact: true }).click();
     await page
       .getByTestId('markdown-editor')
       .fill('Data model for youtube thumbnail editor');