feat(Native Filters): Configure creatable filter behavior (#33096)

superset-frontend/cypress-base/cypress/e2e/dashboard/shared_dashboard_functions.ts

@@ -55,6 +55,7 @@ export function prepareDashboardFilters(
         controlValues: {
           enableEmptyFilter: false,
           defaultToFirstItem: false,
+          creatable: true,
           multiSelect: true,
           searchAllOptions: false,
           inverseSelection: false,

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -48,6 +48,7 @@ export const nativeFilters: NativeFiltersState = {
         excluded: [],
       },
       controlValues: {
+        creatable: false,
         multiSelect: false,
         enableEmptyFilter: false,
         inverseSelection: false,
@@ -79,6 +80,7 @@ export const nativeFilters: NativeFiltersState = {
         excluded: [],
       },
       controlValues: {
+        creatable: false,
         multiSelect: false,
         enableEmptyFilter: false,
         inverseSelection: false,
@@ -463,6 +465,7 @@ export const buildNativeFilter = (
 ) => ({
   id,
   controlValues: {
+    creatable: true,
     multiSelect: true,
     enableEmptyFilter: false,
     defaultToFirstItem: false,

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -136,6 +136,7 @@ type ControlKey = keyof PluginFilterSelectCustomizeProps;
 const controlsOrder: ControlKey[] = [
   'enableEmptyFilter',
   'defaultToFirstItem',
+  'creatable',
   'multiSelect',
   'searchAllOptions',
   'inverseSelection',

superset-frontend/src/filters/components/Select/SelectFilterPlugin.stories.tsx

@@ -29,17 +29,20 @@ getChartTransformPropsRegistry().registerValue('filter_select', transformProps);
 export default {
   title: 'Filter Plugins',
   argTypes: {
+    creatable: { control: 'boolean', defaultValue: true },
     multiSelect: { control: 'boolean', defaultValue: true },
     inverseSelection: { control: 'boolean', defaultValue: false },
   },
 };
 
 export const Select = ({
+  creatable,
   multiSeelct,
   inverseSelection,
   width,
   height,
 }: {
+  creatable: boolean;
   multiSeelct: boolean;
   inverseSelection: boolean;
   width: number;
@@ -53,6 +56,7 @@ export const Select = ({
     formData={{
       adhoc_filters: [],
       extra_filters: [],
+      creatable,
       multiSelect: { multiSeelct },
       inverseSelection: { inverseSelection },
       row_limit: 1000,

superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx

@@ -27,6 +27,7 @@ jest.useFakeTimers();
 const selectMultipleProps = {
   formData: {
     sortAscending: true,
+    creatable: false,
     multiSelect: true,
     enableEmptyFilter: true,
     defaultToFirstItem: false,
@@ -259,4 +260,16 @@ describe('SelectFilterPlugin', () => {
     await userEvent.type(screen.getByRole('combobox'), '1');
     expect(screen.queryByLabelText(String(bigValue))).toBeInTheDocument();
   });
+
+  test('Should not allow for new values when creatable is false', () => {
+    getWrapper({ creatable: false });
+    userEvent.type(screen.getByRole('combobox'), 'new value');
+    expect(screen.queryByTitle('new value')).not.toBeInTheDocument();
+  });
+
+  test('Should allow for new values when creatable is false', async () => {
+    getWrapper({ creatable: true });
+    userEvent.type(screen.getByRole('combobox'), 'new value');
+    expect(await screen.findByTitle('new value')).toBeInTheDocument();
+  });
 });

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

@@ -100,6 +100,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   } = props;
   const {
     enableEmptyFilter,
+    creatable,
     multiSelect,
     showSearch,
     inverseSelection,
@@ -296,7 +297,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
         <Select
           name={formData.nativeFilterId}
           allowClear
-          allowNewOptions={!searchAllOptions}
+          allowNewOptions={!searchAllOptions && creatable !== false}
           allowSelectAll={!searchAllOptions}
           // @ts-ignore
           value={filterState.value || []}

superset-frontend/src/filters/components/Select/buildQuery.test.ts

@@ -30,6 +30,7 @@ describe('Select buildQuery', () => {
     filters: undefined,
     enableEmptyFilter: false,
     inverseSelection: false,
+    creatable: false,
     multiSelect: false,
     defaultToFirstItem: false,
     searchAllOptions: false,

superset-frontend/src/filters/components/Select/controlPanel.ts

@@ -27,6 +27,7 @@ const {
   enableEmptyFilter,
   inverseSelection,
   multiSelect,
+  creatable,
   defaultToFirstItem,
   searchAllOptions,
   sortAscending,
@@ -66,6 +67,19 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'creatable',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Allow creation of new values'),
+              default: creatable,
+              resetConfig: true,
+              affectsDataMask: true,
+              renderTrigger: true,
+            },
+          },
+        ],
         [
           {
             name: 'multiSelect',

superset-frontend/src/filters/components/Select/types.ts

@@ -36,6 +36,7 @@ export interface PluginFilterSelectCustomizeProps {
   defaultValue?: SelectValue;
   enableEmptyFilter: boolean;
   inverseSelection: boolean;
+  creatable: boolean;
   multiSelect: boolean;
   defaultToFirstItem: boolean;
   searchAllOptions: boolean;
@@ -71,6 +72,7 @@ export const DEFAULT_FORM_DATA: PluginFilterSelectCustomizeProps = {
   enableEmptyFilter: false,
   inverseSelection: false,
   defaultToFirstItem: false,
+  creatable: true,
   multiSelect: true,
   searchAllOptions: false,
   sortAscending: true,