From d47486969c424e386fd0f7f96b1eeaeacbbd88a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Thu, 16 Nov 2023 15:31:47 +0100
Subject: [PATCH 1/3] invalidates cache of tags after feature removal

---
 .../project/inventory-panel/features/modals/delete/index.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx
index 4073ca02f8..7eb51710b4 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx
@@ -52,6 +52,7 @@ const DeleteModal = ({
     bulkDeleteFeatureFromProject(pid, deletableFeatureIds, session)
       .then(async () => {
         await queryClient.invalidateQueries(['all-features', pid]);
+        await queryClient.invalidateQueries(['project-tags', pid]);
 
         onDismiss();
 

From 9b23707fc324830c03ceb44b4ce9ee8926b5fe65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Thu, 16 Nov 2023 15:32:34 +0100
Subject: [PATCH 2/3] fixes issue typing tag after opening modal twice or more

---
 .../features/modals/upload/index.tsx             | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
index 4417304f2a..5b4886677e 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
@@ -224,9 +224,10 @@ export const FeatureUploadModal = ({
 
   const handleKeyPress = useCallback(
     (event: Parameters<InputHTMLAttributes<HTMLInputElement>['onKeyDown']>[0]) => {
+      formRef.current.change('tag', event.currentTarget.value);
+
       if (event.key === 'Enter') {
         setTagIsDone(true);
-        formRef.current.change('tag', event.currentTarget.value);
         setTagsMenuOpen(false);
       }
     },
@@ -260,6 +261,12 @@ export const FeatureUploadModal = ({
     );
   }, [pid, downloadShapefileTemplateMutation, addToast]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      setTagIsDone(false);
+    }
+  }, [setTagIsDone, isOpen]);
+
   return (
     <Modal id="features-upload" open={isOpen} size="narrow" onDismiss={onDismiss}>
       <FormRFF<FormValues>
@@ -329,8 +336,9 @@ export const FeatureUploadModal = ({
                                 className="h-10 w-full rounded-md border border-gray-600 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600"
                                 placeholder="Type to pick or create tag..."
                                 value={fprops.input.value}
-                                onFocus={() => setTagsMenuOpen(true)}
-                                onBlur={() => setTagIsDone(true)}
+                                onFocus={() => {
+                                  setTagsMenuOpen(true);
+                                }}
                                 onKeyDown={handleKeyPress}
                               />
 
@@ -370,7 +378,7 @@ export const FeatureUploadModal = ({
                               >
                                 <Icon
                                   icon={CLOSE_SVG}
-                                  className="h-2 w-2 text-gray-100  group-hover:text-white"
+                                  className="h-2 w-2 text-gray-900  group-hover:text-white"
                                 />
                               </button>
                             </div>

From a54883ecef0c2ef1750fc9a1330319145aa13da4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Thu, 16 Nov 2023 17:50:25 +0100
Subject: [PATCH 3/3] invalidates tags cache on feature upload

---
 .../features/modals/edit-bulk/index.tsx                |  4 ++--
 .../inventory-panel/features/modals/edit/index.tsx     |  4 ++--
 .../inventory-panel/features/modals/upload/index.tsx   | 10 +++++++---
 .../features/add/add-modal/uploader/component.tsx      |  4 ++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
index a7232b7521..1f3cecc240 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
@@ -191,11 +191,11 @@ const EditBulkModal = ({
                             </p>
                           )}
 
-                          {tagsMenuOpen && (
+                          {tagsMenuOpen && tagsQuery.data?.length > 0 && (
                             <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-900 shadow-md">
                               <div className="text-sm text-gray-900">Recent:</div>
                               <div className="flex flex-wrap gap-2.5">
-                                {tagsQuery.data?.map((tag) => (
+                                {tagsQuery.data.map((tag) => (
                                   <button
                                     key={tag}
                                     className="inline-block rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5"
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx
index 08d21a5298..77bf58b0b1 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx
@@ -210,11 +210,11 @@ const EditModal = ({
                             onKeyDown={handleKeyPress}
                           />
 
-                          {tagsMenuOpen && (
+                          {tagsMenuOpen && tagsQuery.data?.length > 0 && (
                             <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-900 shadow-md">
                               <div className="text-sm text-gray-900">Recent:</div>
                               <div className="flex flex-wrap gap-2.5">
-                                {tagsQuery.data?.map((tag) => (
+                                {tagsQuery.data.map((tag) => (
                                   <button
                                     key={tag}
                                     className="inline-block rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5"
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
index 5b4886677e..8f231e5ff6 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
@@ -9,6 +9,7 @@ import React, {
 
 import { useDropzone, DropzoneProps } from 'react-dropzone';
 import { Form as FormRFF, Field as FieldRFF, FormProps } from 'react-final-form';
+import { useQueryClient } from 'react-query';
 
 import { useRouter } from 'next/router';
 
@@ -56,6 +57,7 @@ export const FeatureUploadModal = ({
 }): JSX.Element => {
   const formRef = useRef<FormProps<FormValues>['form']>(null);
   const tagsSectionRef = useRef<ElementRef<'div'>>(null);
+  const queryClient = useQueryClient();
 
   const [loading, setLoading] = useState(false);
   const [successFile, setSuccessFile] = useState<{ name: FormValues['name'] }>(null);
@@ -157,9 +159,11 @@ export const FeatureUploadModal = ({
       data.append('tagName', tag);
 
       const mutationResponse = {
-        onSuccess: () => {
+        onSuccess: async () => {
+          await queryClient.invalidateQueries(['project-tags', pid]);
           setSuccessFile({ ...successFile });
           onClose();
+
           addToast(
             'success-upload-feature-file',
             <>
@@ -342,11 +346,11 @@ export const FeatureUploadModal = ({
                                 onKeyDown={handleKeyPress}
                               />
 
-                              {tagsMenuOpen && (
+                              {tagsMenuOpen && tagsQuery.data?.length > 0 && (
                                 <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-900 shadow-md">
                                   <div className="text-sm text-gray-900">Recent:</div>
                                   <div className="flex flex-wrap gap-2.5">
-                                    {tagsQuery.data?.map((tag) => (
+                                    {tagsQuery.data.map((tag) => (
                                       <button
                                         key={tag}
                                         className="inline-block rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5"
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx
index a5f3d0a712..4d1a06fef2 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx
@@ -264,11 +264,11 @@ export const ScenariosFeaturesAddUploader = (): JSX.Element => {
                             onKeyDown={handleKeyPress}
                           />
 
-                          {tagsMenuOpen && (
+                          {tagsMenuOpen && tagsQuery.data?.length > 0 && (
                             <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-900 shadow-md">
                               <div className="text-sm text-gray-900">Recent:</div>
                               <div className="flex flex-wrap gap-2.5">
-                                {tagsQuery.data?.map((tag) => (
+                                {tagsQuery.data.map((tag) => (
                                   <button
                                     key={tag}
                                     className="inline-block rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5"