From e392e2ed398b3e6ad15ed95934ba430c2efcafa8 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Sat, 24 Apr 2021 08:26:24 +0300
Subject: [PATCH] feat(native-filters): add option to create value in select
 filter (#14314)

* feat(native-filters): add option to create value in select filter

* address comments
---
 .../components/Select/SelectFilterPlugin.tsx  | 20 +++++++++++++++++--
 .../components/Select/transformProps.ts       |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 6f777efb2..8efcaea17 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -72,6 +72,11 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       ? firstItem
       : initSelectValue,
   );
+  const [currentSuggestionSearch, setCurrentSuggestionSearch] = useState('');
+
+  const clearSuggestionSearch = () => {
+    setCurrentSuggestionSearch('');
+  };
 
   const [col] = groupby;
   const datatype: GenericDataType = coltypeMap[col];
@@ -137,7 +142,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   ]);
 
   const placeholderText =
-    (data || []).length === 0
+    data.length === 0
       ? t('No data')
       : tn('%s option', '%s options', data.length, data.length);
   return (
@@ -150,11 +155,14 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
         showSearch={showSearch}
         mode={multiSelect ? 'multiple' : undefined}
         placeholder={placeholderText}
+        onSearch={setCurrentSuggestionSearch}
+        onSelect={clearSuggestionSearch}
+        onBlur={clearSuggestionSearch}
         // @ts-ignore
         onChange={handleChange}
         ref={inputRef}
       >
-        {(data || []).map(row => {
+        {data.map(row => {
           const [value] = groupby.map(col => row[col]);
           return (
             // @ts-ignore
@@ -163,6 +171,14 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
             </Option>
           );
         })}
+        {currentSuggestionSearch &&
+          !ensureIsArray(values).some(
+            suggestion => suggestion === currentSuggestionSearch,
+          ) && (
+            <Option value={currentSuggestionSearch}>
+              {currentSuggestionSearch}
+            </Option>
+          )}
       </StyledSelect>
     </Styles>
   );
diff --git a/superset-frontend/src/filters/components/Select/transformProps.ts b/superset-frontend/src/filters/components/Select/transformProps.ts
index 4c57e86ac..c72239b2c 100644
--- a/superset-frontend/src/filters/components/Select/transformProps.ts
+++ b/superset-frontend/src/filters/components/Select/transformProps.ts
@@ -35,7 +35,7 @@ export default function transformProps(
   const newFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const { setDataMask = () => {} } = hooks;
   const [queryData] = queriesData;
-  const { colnames = [], coltypes = [], data } = queryData || [];
+  const { colnames = [], coltypes = [], data = [] } = queryData || {};
   const coltypeMap: Record<string, GenericDataType> = colnames.reduce(
     (accumulator, item, index) => ({ ...accumulator, [item]: coltypes[index] }),
     {},