fix: EntitySelect (pinterest#1215)

* fix: EntitySelect * check creatable * comments * comments * fix undefined
arrowtail-precision · Jan 3, 2024 · 987fb79 · 987fb79
1 parent 8672478
commit 987fb79
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git 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
@@ -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"
         />
     );