From 987fb79d9ce7c652bac5aee6c18719fb7f696a88 Mon Sep 17 00:00:00 2001
From: "J.C. Zhong" <jianchengzhong@pinterest.com>
Date: Thu, 6 Apr 2023 15:33:28 -0700
Subject: [PATCH] fix: EntitySelect (#1215)

* fix: EntitySelect

* check creatable

* comments

* comments

* fix undefined
---
 .../webapp/components/Search/EntitySelect.tsx | 25 +++++++++++--------
 .../components/Search/SearchOverview.tsx      |  2 --
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/querybook/webapp/components/Search/EntitySelect.tsx b/querybook/webapp/components/Search/EntitySelect.tsx
index 25e8da5e2..4844db104 100644
--- a/querybook/webapp/components/Search/EntitySelect.tsx
+++ b/querybook/webapp/components/Search/EntitySelect.tsx
@@ -20,7 +20,12 @@ interface IEntitySelectProps {
     placeholder?: string;
     onSelect?: (entity: string) => void;
     onEntitiesChange?: (entities: string[]) => void;
+
+    /**
+     * will validate only if creatable is true
+     */
     validateEntity?: (entity: string) => boolean;
+
     mini?: boolean;
 }
 
@@ -60,25 +65,23 @@ export const EntitySelect = ({
         [entities, selectedEntities]
     );
 
-    const isValid = React.useMemo(
+    const isInvalidForCreation = React.useMemo(
         () =>
-            !searchText ||
-            (!selectedEntities.includes(searchText) &&
-                validateEntity(searchText)),
-        [searchText, selectedEntities, validateEntity]
+            creatable &&
+            searchText.length > 0 &&
+            (selectedEntities.includes(searchText) ||
+                (validateEntity && !validateEntity(searchText))),
+        [searchText, creatable, selectedEntities, validateEntity]
     );
 
     const handleEntitySelect = useCallback(
         (option) => {
-            const valid =
-                !selectedEntities.includes(option) &&
-                (validateEntity?.(option) ?? true);
-            if (valid) {
+            if (!selectedEntities.includes(option)) {
                 onSelect?.(option);
                 onEntitiesChange?.([...selectedEntities, option]);
             }
         },
-        [selectedEntities, validateEntity, onSelect, onEntitiesChange]
+        [selectedEntities, onSelect, onEntitiesChange]
     );
 
     const handleEntityRemove = useCallback(
@@ -104,7 +107,7 @@ export const EntitySelect = ({
                     ))}
                 </div>
             )}
-            <div className={isValid ? undefined : 'invalid'}>
+            <div className={isInvalidForCreation ? 'invalid' : undefined}>
                 <SimpleReactSelect
                     creatable={creatable}
                     value={searchText}
diff --git a/querybook/webapp/components/Search/SearchOverview.tsx b/querybook/webapp/components/Search/SearchOverview.tsx
index 21fea41b9..27719b4e4 100644
--- a/querybook/webapp/components/Search/SearchOverview.tsx
+++ b/querybook/webapp/components/Search/SearchOverview.tsx
@@ -23,7 +23,6 @@ import {
     makeReactSelectStyle,
     miniAsyncReactSelectStyles,
 } from 'lib/utils/react-select';
-import { isTagValid } from 'lib/utils/tag';
 import { queryMetastoresSelector } from 'redux/dataSources/selector';
 import * as dataTableSearchActions from 'redux/dataTableSearch/action';
 import { currentEnvironmentSelector } from 'redux/environment/selector';
@@ -345,7 +344,6 @@ export const SearchOverview: React.FC<ISearchOverviewProps> = ({
             selectedEntities={searchFilters?.tags || []}
             loadEntities={TableTagResource.search}
             onEntitiesChange={updateTags}
-            validateEntity={isTagValid}
             placeholder="search tag"
         />
     );