Merge branch 'main' into fleet-retries

packages/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx

@@ -8,7 +8,15 @@
 
 import { i18n } from '@kbn/i18n';
 import useUpdateEffect from 'react-use/lib/useUpdateEffect';
-import React, { useState, useCallback, Dispatch, FocusEvent, useContext, useMemo } from 'react';
+import React, {
+  useState,
+  useCallback,
+  Dispatch,
+  FocusEvent,
+  useContext,
+  useMemo,
+  ChangeEventHandler,
+} from 'react';
 import { css } from '@emotion/react';
 
 import {
@@ -126,9 +134,9 @@ export function ColorRangeItem({
     [colorRange.start, colorRanges, dispatch, index, popoverInFocus, dataBounds, palettes, isLast]
   );
 
-  const onValueChange = useCallback(
+  const onValueChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
     ({ target: { value: targetValue } }) => {
-      setLocalValue(targetValue);
+      setLocalValue(+targetValue);
       dispatch({
         type: 'updateValue',
         payload: { index, value: targetValue, accessor, dataBounds, palettes },
@@ -138,7 +146,7 @@ export function ColorRangeItem({
   );
 
   const onUpdateColor = useCallback(
-    (color) => {
+    (color: string) => {
       dispatch({ type: 'updateColor', payload: { index, color, dataBounds, palettes } });
     },
     [dispatch, index, dataBounds, palettes]

packages/kbn-content-management-utils/kibana.jsonc

@@ -1,5 +1,5 @@
 {
-  "type": "shared-common",
+  "type": "shared-server",
   "id": "@kbn/content-management-utils",
   "owner": "@elastic/kibana-data-discovery"
 }

packages/kbn-dom-drag-drop/index.ts

@@ -14,6 +14,7 @@ export {
   type DraggingIdentifier,
   type DragDropAction,
   type DropOverlayWrapperProps,
+  type DroppableProps,
   Draggable,
   Droppable,
   useDragDropContext,

packages/kbn-grouping/src/components/accordion_panel/index.tsx

@@ -102,7 +102,7 @@ const GroupPanelComponent = <T,>({
   );
 
   const onToggle = useCallback(
-    (isOpen) => {
+    (isOpen: boolean) => {
       if (onToggleGroup) {
         onToggleGroup(isOpen, groupBucket);
       }

packages/kbn-grouping/src/hooks/use_grouping.tsx

@@ -56,7 +56,7 @@ export type DynamicGroupingProps<T> = Pick<
 /** Interface for configuring grouping package where T is the consumer `GroupingAggregation`
  *  @interface GroupingArgs<T>
  */
-interface GroupingArgs<T> {
+export interface GroupingArgs<T> {
   componentProps: StaticGroupingProps<T>;
   defaultGroupingOptions: GroupOption[];
   fields: FieldSpec[];

packages/kbn-management/settings/components/field_input/code_editor.tsx

@@ -70,7 +70,7 @@ export const CodeEditor = ({ onChange, type, isReadOnly, name, ...props }: CodeE
     editorModel.setValue(trimmedValue);
   }, []);
 
-  const editorDidMount = useCallback(
+  const editorDidMount = useCallback<NonNullable<KibanaReactCodeEditorProps['editorDidMount']>>(
     (editor) => {
       setEditorCalculatedHeight(editor);
 

packages/kbn-management/settings/components/field_input/input/array_input.tsx

@@ -13,6 +13,7 @@ import { getFieldInputValue } from '@kbn/management-settings-utilities';
 import { useUpdate } from '@kbn/management-settings-utilities';
 
 import { debounce } from 'lodash';
+import { OnInputChangeFn } from '@kbn/management-settings-types';
 import { useServices } from '../services';
 import { InputProps } from '../types';
 import { TEST_SUBJ_PREFIX_FIELD } from '.';
@@ -39,7 +40,7 @@ export const ArrayInput = ({
   const onUpdate = useUpdate({ onInputChange, field });
 
   const updateValue = useCallback(
-    async (newValue: string, onUpdateFn) => {
+    async (newValue: string, onUpdateFn: OnInputChangeFn<'array'>) => {
       const parsedValue = newValue
         .replace(REGEX, ',')
         .split(',')

packages/kbn-management/settings/components/field_input/input/number_input.tsx

@@ -12,6 +12,7 @@ import { EuiFieldNumber, EuiFieldNumberProps } from '@elastic/eui';
 import { getFieldInputValue, useUpdate } from '@kbn/management-settings-utilities';
 
 import { debounce } from 'lodash';
+import { OnInputChangeFn } from '@kbn/management-settings-types';
 import { InputProps } from '../types';
 import { TEST_SUBJ_PREFIX_FIELD } from '.';
 import { useServices } from '../services';
@@ -36,7 +37,7 @@ export const NumberInput = ({
   const onUpdate = useUpdate({ onInputChange, field });
 
   const updateValue = useCallback(
-    async (newValue: number, onUpdateFn) => {
+    async (newValue: number, onUpdateFn: OnInputChangeFn<'number'>) => {
       const validationResponse = await validateChange(field.id, newValue);
       if (validationResponse.successfulValidation && !validationResponse.valid) {
         onUpdateFn({

packages/kbn-securitysolution-autocomplete/src/field_value_lists/index.tsx

@@ -64,7 +64,7 @@ export const AutocompleteFieldListsComponent: React.FC<AutocompleteFieldListsPro
     largeLists: [],
   });
   const { loading, result, start } = useFindListsBySize();
-  const getLabel = useCallback(({ name }) => name, []);
+  const getLabel = useCallback(({ name }: ListSchema) => name, []);
 
   const optionsMemo = useMemo(
     () => filterFieldToList(listData, selectedField),

packages/kbn-securitysolution-autocomplete/src/operator/index.tsx

@@ -44,7 +44,7 @@ export const OperatorComponent: React.FC<OperatorState> = ({
   selectedField,
   'aria-label': ariaLabel,
 }): JSX.Element => {
-  const getLabel = useCallback(({ message }): string => message, []);
+  const getLabel = useCallback(({ message }: OperatorOption): string => message, []);
   const optionsMemo = useMemo(
     (): OperatorOption[] =>
       operatorOptions != null && operatorOptions.length > 0

packages/kbn-securitysolution-exception-list-components/src/search_bar/index.tsx

@@ -9,7 +9,7 @@
 import React, { useCallback } from 'react';
 import type { FC } from 'react';
 
-import type { IconType, SearchFilterConfig } from '@elastic/eui';
+import type { EuiSearchBarProps, IconType, SearchFilterConfig } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiSearchBar } from '@elastic/eui';
 import type { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
 import type { GetExceptionItemProps } from '../types';
@@ -73,7 +73,7 @@ const SearchBarComponent: FC<SearchBarProps> = ({
   onSearch,
   onAddExceptionClick,
 }) => {
-  const handleOnSearch = useCallback(
+  const handleOnSearch = useCallback<NonNullable<EuiSearchBarProps['onChange']>>(
     ({ queryText }): void => {
       onSearch({ search: queryText });
     },

packages/kbn-securitysolution-list-utils/src/helpers/index.test.ts

@@ -204,6 +204,26 @@ describe('Helpers', () => {
         ])
       ).toBeTruthy();
     });
+
+    test('it returns true if there are entries joined with an OR that have a wildcard and the wrong operator', () => {
+      expect(
+        hasWrongOperatorWithWildcard([
+          {
+            description: '',
+            name: '',
+            type: 'simple',
+            entries: [{ type: 'match', value: 'withwildcard?', field: '', operator: 'included' }],
+          },
+          {
+            description: '',
+            name: '',
+            type: 'simple',
+            entries: [{ type: 'match', value: 'withwildcard?*', field: '', operator: 'included' }],
+          },
+        ])
+      ).toBeTruthy();
+    });
+
     test('it returns false if there are no exception entries with a wildcard and the wrong operator', () => {
       expect(
         hasWrongOperatorWithWildcard([
@@ -219,5 +239,25 @@ describe('Helpers', () => {
         ])
       ).toBeFalsy();
     });
+
+    test('it returns true if there are nested entries with a wildcard and the wrong operator', () => {
+      expect(
+        hasWrongOperatorWithWildcard([
+          {
+            description: '',
+            name: '',
+            type: 'simple',
+            entries: [
+              { type: 'match', value: 'nowildcard', field: '', operator: 'excluded' },
+              {
+                field: '',
+                type: 'nested',
+                entries: [{ type: 'match', value: 'wildcard?', field: '', operator: 'excluded' }],
+              },
+            ],
+          },
+        ])
+      ).toBeTruthy();
+    });
   });
 });

packages/kbn-securitysolution-list-utils/src/helpers/index.ts

@@ -1032,7 +1032,16 @@ export const getMappingConflictsInfo = (field: DataViewField): FieldConflictsInf
 export const hasWrongOperatorWithWildcard = (
   items: ExceptionsBuilderReturnExceptionItem[]
 ): boolean => {
-  const allEntries = items.flatMap((item) => item.entries);
+  // flattens array of multiple entries added with OR
+  const multipleEntries = items.flatMap((item) => item.entries);
+  // flattens nested entries
+  const allEntries = multipleEntries.flatMap((item) => {
+    if (item.type === 'nested') {
+      return item.entries;
+    }
+    return item;
+  });
+
   return allEntries.some((e) => {
     if (e.type !== 'list' && 'value' in e) {
       return validateHasWildcardWithWrongOperator({

packages/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { EuiFormRow, EuiHorizontalRule, EuiRange } from '@elastic/eui';
+import { EuiFormRow, EuiHorizontalRule, EuiRange, EuiRangeProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { debounce } from 'lodash';
 import { RowHeightSettings, RowHeightSettingsProps } from './row_height_settings';
@@ -63,9 +63,9 @@ export const UnifiedDataTableAdditionalDisplaySettings: React.FC<
     [onChangeSampleSize]
   );
 
-  const onChangeActiveSampleSize = useCallback(
+  const onChangeActiveSampleSize = useCallback<NonNullable<EuiRangeProps['onChange']>>(
     (event) => {
-      if (!event.target.value) {
+      if (!('value' in event.target) || !event.target.value) {
         setActiveSampleSize('');
         return;
       }

packages/kbn-visualization-ui-components/components/color_picker.tsx

@@ -28,6 +28,17 @@ const tooltipContent = {
   }),
 };
 
+export interface ColorPickerProps {
+  overwriteColor?: string | null;
+  defaultColor?: string | null;
+  isClearable?: boolean;
+  setConfig: (config: { color?: string }) => void;
+  label?: string;
+  disableHelpTooltip?: boolean;
+  disabledMessage?: string;
+  showAlpha?: boolean;
+}
+
 export const ColorPicker = ({
   overwriteColor,
   defaultColor,
@@ -37,16 +48,7 @@ export const ColorPicker = ({
   disableHelpTooltip,
   disabledMessage,
   showAlpha,
-}: {
-  overwriteColor?: string | null;
-  defaultColor?: string | null;
-  isClearable?: boolean;
-  setConfig: (config: { color?: string }) => void;
-  label?: string;
-  disableHelpTooltip?: boolean;
-  disabledMessage?: string;
-  showAlpha?: boolean;
-}) => {
+}: ColorPickerProps) => {
   const [colorText, setColorText] = useState(overwriteColor || defaultColor);
   const [validatedColor, setValidatedColor] = useState(overwriteColor || defaultColor);
   const [currentColorAlpha, setCurrentColorAlpha] = useState(getColorAlpha(colorText));

packages/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx

@@ -33,6 +33,18 @@ export const defaultFilter: Query = {
   language: 'kuery',
 };
 
+export interface FilterQueryInputProps {
+  inputFilter: Query | undefined;
+  onChange: (query: Query) => void;
+  dataView: DataViewBase;
+  helpMessage?: string | null;
+  label?: string;
+  initiallyOpen?: boolean;
+  ['data-test-subj']?: string;
+  queryInputServices: QueryInputServices;
+  appName: string;
+}
+
 export function FilterQueryInput({
   inputFilter,
   onChange,
@@ -43,17 +55,7 @@ export function FilterQueryInput({
   ['data-test-subj']: dataTestSubj,
   queryInputServices,
   appName,
-}: {
-  inputFilter: Query | undefined;
-  onChange: (query: Query) => void;
-  dataView: DataViewBase;
-  helpMessage?: string | null;
-  label?: string;
-  initiallyOpen?: boolean;
-  ['data-test-subj']?: string;
-  queryInputServices: QueryInputServices;
-  appName: string;
-}) {
+}: FilterQueryInputProps) {
   const [filterPopoverOpen, setFilterPopoverOpen] = useState(Boolean(initiallyOpen));
 
   const onClosePopup: EuiPopoverProps['closePopover'] = useCallback(() => {

packages/kbn-visualization-ui-components/index.ts

@@ -40,6 +40,7 @@ export type {
   IconSet,
   AccessorConfig,
   QueryInputServices,
+  ColorPickerProps,
 } from './components';
 
 export type { FormatFactory, LineStyle } from './types';

packages/react/kibana_mount/utils.ts

@@ -17,7 +17,7 @@ export const useIfMounted = () => {
     []
   );
 
-  const ifMounted = useCallback((func) => {
+  const ifMounted = useCallback((func?: () => void) => {
     if (isMounted.current && func) {
       func();
     }

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

@@ -194,7 +194,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = ({
 
   const getColor = useCallback(
     (
-      value,
+      value: number,
       paletteConfig: PaletteOutput<CustomPaletteState>,
       bands: number[],
       percentageMode?: boolean

src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx

@@ -18,6 +18,8 @@ import {
   Wordcloud,
   RenderChangeListener,
   LEGACY_LIGHT_THEME,
+  ElementClickListener,
+  WordCloudElementEvent,
 } from '@elastic/charts';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
 import {
@@ -190,13 +192,13 @@ export const TagCloudChart = ({
     []
   );
 
-  const handleWordClick = useCallback(
+  const handleWordClick = useCallback<ElementClickListener>(
     (elements) => {
       if (!bucket) {
         return;
       }
       const termsBucketId = getColumnByAccessor(bucket, visData.columns)!.id;
-      const clickedValue = elements[0][0].text;
+      const clickedValue = (elements[0] as WordCloudElementEvent)[0].text;
 
       const columnIndex = visData.columns.findIndex((col) => col.id === termsBucketId);
       if (columnIndex < 0) {

src/plugins/charts/public/services/active_cursor/use_active_cursor.ts

@@ -11,7 +11,7 @@ import { animationFrameScheduler } from 'rxjs';
 import { useCallback, useEffect, RefObject } from 'react';
 import { filter, debounceTime } from 'rxjs';
 
-import type { Chart } from '@elastic/charts';
+import type { Chart, PointerUpdateListener } from '@elastic/charts';
 
 import { parseSyncOptions } from './active_cursor_utils';
 
@@ -24,9 +24,9 @@ export const useActiveCursor = (
   activeCursor: ActiveCursor,
   chartRef: RefObject<Chart>,
   syncOptions: ActiveCursorSyncOption
-) => {
+): PointerUpdateListener => {
   const { accessors, isDateHistogram } = parseSyncOptions(syncOptions);
-  const handleCursorUpdate = useCallback(
+  const handleCursorUpdate = useCallback<PointerUpdateListener>(
     (cursor) => {
       activeCursor.activeCursor$?.next({
         cursor,

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

@@ -157,7 +157,7 @@ export const OptionsListPopoverSuggestions = ({
   }, [loadMoreSuggestions, totalCardinality]);
 
   const renderOption = useCallback(
-    (option, searchStringValue) => {
+    (option: EuiSelectableOption, searchStringValue: string) => {
       if (!allowExpensiveQueries || searchTechnique === 'exact') return option.label;
 
       return (