feat(options): hideSearch/placeholder/cache invalidate

src/plugins/controls/common/options_list/types.ts

@@ -23,7 +23,9 @@ export interface OptionsListEmbeddableInput extends DataControlInput {
   hideExclude?: boolean;
   hideExists?: boolean;
   hideSort?: boolean;
+  hideSearch?: boolean;
   exclude?: boolean;
+  placeholder?: string;
 }
 
 export type OptionsListField = FieldSpec & {

src/plugins/controls/public/options_list/components/options_list.scss

@@ -1,3 +1,5 @@
+@import '../../control_group/control_group.scss';
+
 .optionsList__anchorOverride {
   display:block;
 }
@@ -86,3 +88,7 @@
 .optionsList--sortPopover {
   width: $euiSizeXL * 7;
 }
+
+.optionsList__popover {
+  min-width: $controlMinWidth;
+}

src/plugins/controls/public/options_list/components/options_list_control.tsx

@@ -47,6 +47,8 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
   const exclude = select((state) => state.explicitInput.exclude);
   const id = select((state) => state.explicitInput.id);
 
+  const placeholder = select((state) => state.explicitInput.placeholder);
+
   const loading = select((state) => state.output.loading);
 
   // debounce loading state so loading doesn't flash when user types
@@ -128,7 +130,7 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
       >
         {hasSelections || existsSelected
           ? selectionDisplayNode
-          : OptionsListStrings.control.getPlaceholder()}
+          : placeholder ?? OptionsListStrings.control.getPlaceholder()}
       </EuiFilterButton>
     </div>
   );

src/plugins/controls/public/options_list/components/options_list_popover.tsx

@@ -43,6 +43,7 @@ export const OptionsListPopover = ({
   const field = select((state) => state.componentState.field);
 
   const hideExclude = select((state) => state.explicitInput.hideExclude);
+  const hideSearch = select((state) => state.explicitInput.hideSearch);
   const fieldName = select((state) => state.explicitInput.fieldName);
   const title = select((state) => state.explicitInput.title);
   const id = select((state) => state.explicitInput.id);
@@ -52,12 +53,13 @@ export const OptionsListPopover = ({
   return (
     <div
       id={`control-popover-${id}`}
+      className={`optionsList__popover`}
       style={{ width: width > 300 ? width : undefined }}
       data-test-subj={`optionsList-control-popover`}
       aria-label={OptionsListStrings.popover.getAriaLabel(fieldName)}
     >
       <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
-      {field?.type !== 'boolean' && (
+      {field?.type !== 'boolean' && !hideSearch && (
         <OptionsListPopoverActionBar
           showOnlySelected={showOnlySelected}
           setShowOnlySelected={setShowOnlySelected}

src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx

@@ -41,6 +41,7 @@ import { OptionsListControl } from '../components/options_list_control';
 import { ControlsDataViewsService } from '../../services/data_views/types';
 import { ControlsOptionsListService } from '../../services/options_list/types';
 import { OptionsListField } from '../../../common/options_list/types';
+import { OptionsListStrings } from '../components/options_list_strings';
 
 const diffDataFetchProps = (
   last?: OptionsListDataFetchProps,
@@ -112,6 +113,10 @@ export class OptionsListEmbeddable extends Embeddable<OptionsListEmbeddableInput
     this.initialize();
   }
 
+  public getInputPlaceHolder = () =>
+    this.reduxEmbeddableTools.getState().explicitInput.placeholder ??
+    OptionsListStrings.control.getPlaceholder();
+
   private initialize = async () => {
     const { selectedOptions: initialSelectedOptions } = this.getInput();
     if (!initialSelectedOptions) this.setInitializationFinished();
@@ -268,7 +273,7 @@ export class OptionsListEmbeddable extends Embeddable<OptionsListEmbeddableInput
     return { dataView: this.dataView, field: this.field! };
   };
 
-  private runOptionsListQuery = async () => {
+  private runOptionsListQuery = async (clearCache: boolean = false) => {
     const {
       dispatch,
       getState,
@@ -307,6 +312,9 @@ export class OptionsListEmbeddable extends Embeddable<OptionsListEmbeddableInput
               mode: 'absolute' as 'absolute',
             }
           : globalTimeRange;
+      if (clearCache) {
+        this.optionsListService.clearOptionsListCache();
+      }
       const { suggestions, invalidSelections, totalCardinality, rejected } =
         await this.optionsListService.runOptionsListRequest(
           {
@@ -405,8 +413,8 @@ export class OptionsListEmbeddable extends Embeddable<OptionsListEmbeddableInput
     return [newFilter];
   };
 
-  reload = () => {
-    this.runOptionsListQuery();
+  reload = (clearCache: boolean = false) => {
+    this.runOptionsListQuery(clearCache);
   };
 
   public destroy = () => {

src/plugins/controls/public/services/options_list/options_list_service.ts

@@ -104,6 +104,10 @@ class OptionsListService implements ControlsOptionsListService {
       return { rejected: true } as OptionsListResponse;
     }
   };
+
+  public clearOptionsListCache = () => {
+    this.cachedOptionsListRequest.cache = new memoize.Cache();
+  };
 }
 
 export interface OptionsListServiceRequiredServices {

src/plugins/controls/public/services/options_list/types.ts

@@ -13,4 +13,6 @@ export interface ControlsOptionsListService {
     request: OptionsListRequest,
     abortSignal: AbortSignal
   ) => Promise<OptionsListResponse>;
+
+  clearOptionsListCache: () => void;
 }

src/plugins/embeddable/public/lib/containers/container.ts

@@ -156,8 +156,10 @@ export abstract class Container<
     this.updateInput(panels as Partial<TContainerInput>);
   }
 
-  public reload() {
-    Object.values(this.children).forEach((child) => child.reload());
+  public reload(clearCache: boolean = false) {
+    Object.values(this.children).forEach((child) =>
+      child instanceof ErrorEmbeddable ? child.reload() : child.reload(clearCache)
+    );
   }
 
   public async addNewEmbeddable<

src/plugins/embeddable/public/lib/embeddables/embeddable.tsx

@@ -119,14 +119,16 @@ export abstract class Embeddable<
    *
    * In case if input data did change and reload is requested input$ and output$ would still emit before `reload` is called
    *
+   * @param clearCache can be passed in case there is cache that needs to cleared before reloading the data
+   *
    * The order would be as follows:
    * input$
    * output$
    * reload()
    * ----
    * updated$
    */
-  public abstract reload(): void;
+  public abstract reload(clearCache?: boolean): void;
 
   /**
    * Merges input$ and output$ streams and debounces emit till next macro-task.

src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts

@@ -189,9 +189,11 @@ export interface IEmbeddable<
 
   /**
    * Reload the embeddable so output and rendering is up to date. Especially relevant
-   * if the embeddable takes relative time as input (e.g. now to now-15)
+   * if the embeddable takes relative time as input (e.g. now to now-15).
+   *
+   * @param clearCache can be passed in case there is a need to clear any cache by the embeddable
    */
-  reload(): void;
+  reload(clearCache?: boolean): void;
 
   /**
    * An embeddable can return inspector adapters if it wants the inspector to be