From 5c6c4f44d3760aee13c61fc75102dd6bfa807dfe Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 5 Dec 2024 17:26:26 +0100 Subject: [PATCH] [ML] Improve some TS. (#202314) ## Summary - Follow up to #175178 to fix some breaking TS changes after the TS `v4.9.5` upgrade. - Follow up to #182344 to replace `any` in `useCallback` with proper types. - Fixes #176123. ### Checklist - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. --- .../src/use_cancellable_search.ts | 10 ++++++---- .../components/full_time_range_selector.test.tsx | 12 ++++++------ .../components/flyout_layout.tsx | 2 +- .../log_rate_analysis_results_table.tsx | 4 ++-- .../log_rate_analysis_results_table_groups.tsx | 6 +++--- .../aiops/public/hooks/use_cancellable_search.ts | 5 ++--- .../data_drift/use_data_drift_result.ts | 4 +--- .../ml_anomaly_alert_trigger.tsx | 2 +- .../plugins/ml/public/alerting/job_selector.tsx | 2 +- ...nomaly_detection_jobs_health_rule_trigger.tsx | 4 ++-- .../feature_importance/decision_path_chart.tsx | 2 +- .../components/analytics_list/analytics_list.tsx | 2 +- .../explorer/actions/load_explorer_data.ts | 2 +- .../application/explorer/anomaly_timeline.tsx | 2 +- .../ml/public/application/explorer/explorer.tsx | 2 +- .../filter_agg/components/filter_range_form.tsx | 10 ++++++++-- .../filter_agg/components/filter_term_form.tsx | 16 ++++++++++++++-- .../hooks/use_latest_function_config.ts | 2 +- 18 files changed, 53 insertions(+), 36 deletions(-) diff --git a/x-pack/packages/ml/cancellable_search/src/use_cancellable_search.ts b/x-pack/packages/ml/cancellable_search/src/use_cancellable_search.ts index 375fd6e44b435..5d144cc82ea9c 100644 --- a/x-pack/packages/ml/cancellable_search/src/use_cancellable_search.ts +++ b/x-pack/packages/ml/cancellable_search/src/use_cancellable_search.ts @@ -6,13 +6,16 @@ */ import { useCallback, useRef, useState } from 'react'; -import type { IKibanaSearchResponse } from '@kbn/search-types'; +import type { IKibanaSearchRequest, IKibanaSearchResponse } from '@kbn/search-types'; import { isRunningResponse } from '@kbn/data-plugin/common'; import { tap } from 'rxjs'; import type { DataPublicPluginStart } from '@kbn/data-plugin/public'; export interface UseCancellableSearch { - runRequest: ( + runRequest: < + RequestBody extends IKibanaSearchRequest, + ResponseType extends IKibanaSearchResponse + >( requestBody: RequestBody, options?: object ) => Promise; @@ -26,13 +29,12 @@ export function useCancellableSearch(data: DataPublicPluginStart) { const [isLoading, setIsFetching] = useState(false); const runRequest = useCallback( - ( + ( requestBody: RequestBody, options = {} ): Promise => { return new Promise((resolve, reject) => { data.search - // @ts-expect-error upgrade typescript v4.9.5 .search(requestBody, { abortSignal: abortController.current.signal, ...options, diff --git a/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.test.tsx b/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.test.tsx index a217bbc4fb2cf..8c383b6439ef4 100644 --- a/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.test.tsx +++ b/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.test.tsx @@ -9,7 +9,8 @@ import moment from 'moment'; import React from 'react'; import { act, render, fireEvent } from '@testing-library/react'; -import type { Query } from '@kbn/es-query'; +import type { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types'; + import type { DataView } from '@kbn/data-views-plugin/public'; import type { TimefilterContract } from '@kbn/data-plugin/public'; import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; @@ -48,9 +49,10 @@ describe('FullTimeRangeSelector', () => { timeFieldName: '@timestamp', } as unknown as DataView; - const query: Query = { - language: 'kuery', - query: 'region:us-east-1', + const query: QueryDslQueryContainer = { + term: { + region: 'us-east-1', + }, }; const props = { @@ -70,7 +72,6 @@ describe('FullTimeRangeSelector', () => { const { getByText } = render( - {/* @ts-expect-error upgrade typescript v4.9.5*/} @@ -99,7 +100,6 @@ describe('FullTimeRangeSelector', () => { const { getByText } = render( - {/* @ts-expect-error upgrade typescript v4.9.5*/} diff --git a/x-pack/packages/ml/inference_integration_flyout/components/flyout_layout.tsx b/x-pack/packages/ml/inference_integration_flyout/components/flyout_layout.tsx index 22c904e63561e..77b7f623099a3 100644 --- a/x-pack/packages/ml/inference_integration_flyout/components/flyout_layout.tsx +++ b/x-pack/packages/ml/inference_integration_flyout/components/flyout_layout.tsx @@ -51,7 +51,7 @@ export const InferenceFlyout: React.FC = ({ }, [inferenceEndpointError]); const onChangingInferenceEndpoint = useCallback( - (value: any) => { + (value: string) => { setInferenceEndpointId(value); onInferenceEndpointChange(value); }, diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx index e9072c2929f14..ded175a89dfbc 100644 --- a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx +++ b/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx @@ -10,7 +10,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { orderBy, isEqual } from 'lodash'; import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; -import type { EuiTableSortingType } from '@elastic/eui'; +import type { Criteria, EuiTableSortingType } from '@elastic/eui'; import { useEuiBackgroundColor, EuiBasicTable } from '@elastic/eui'; import type { SignificantItem } from '@kbn/ml-agg-utils'; @@ -109,7 +109,7 @@ export const LogRateAnalysisResultsTable: FC = groupFilter !== undefined ); - const onChange = useCallback((tableSettings: any) => { + const onChange = useCallback((tableSettings: Criteria) => { if (tableSettings.page) { const { index, size } = tableSettings.page; setPageIndex(index); diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx index 6bd0a5e4ce213..ceeeb79c1232c 100644 --- a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx +++ b/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx @@ -9,7 +9,7 @@ import type { FC } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { orderBy, isEqual } from 'lodash'; -import type { EuiBasicTableColumn, EuiTableSortingType } from '@elastic/eui'; +import type { EuiBasicTableColumn, EuiTableSortingType, Criteria } from '@elastic/eui'; import { useEuiBackgroundColor, EuiBadge, @@ -77,7 +77,7 @@ export const LogRateAnalysisResultsGroupsTable: FC( + const [sortField, setSortField] = useState( zeroDocsFallback ? DEFAULT_SORT_FIELD_ZERO_DOCS_FALLBACK : DEFAULT_SORT_FIELD ); const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>( @@ -247,7 +247,7 @@ export const LogRateAnalysisResultsGroupsTable: FC { + const onChange = useCallback((tableSettings: Criteria) => { if (tableSettings.page) { const { index, size } = tableSettings.page; setPageIndex(index); diff --git a/x-pack/plugins/aiops/public/hooks/use_cancellable_search.ts b/x-pack/plugins/aiops/public/hooks/use_cancellable_search.ts index 4d721d64c987f..77373a7d490e9 100644 --- a/x-pack/plugins/aiops/public/hooks/use_cancellable_search.ts +++ b/x-pack/plugins/aiops/public/hooks/use_cancellable_search.ts @@ -6,7 +6,7 @@ */ import { useCallback, useRef, useState } from 'react'; -import type { IKibanaSearchResponse } from '@kbn/search-types'; +import type { IKibanaSearchRequest, IKibanaSearchResponse } from '@kbn/search-types'; import { isRunningResponse } from '@kbn/data-plugin/common'; import { tap } from 'rxjs'; import { useAiopsAppContext } from './use_aiops_app_context'; @@ -17,12 +17,11 @@ export function useCancellableSearch() { const [isLoading, setIsFetching] = useState(false); const runRequest = useCallback( - ( + ( requestBody: RequestBody ): Promise => { return new Promise((resolve, reject) => { data.search - // @ts-expect-error upgrade typescript v4.9.5 .search(requestBody, { abortSignal: abortController.current.signal, }) diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/use_data_drift_result.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/use_data_drift_result.ts index 158b3477b5cb1..e8d2a48f56d08 100644 --- a/x-pack/plugins/data_visualizer/public/application/data_drift/use_data_drift_result.ts +++ b/x-pack/plugins/data_visualizer/public/application/data_drift/use_data_drift_result.ts @@ -506,9 +506,7 @@ const fetchComparisonDriftedData = async ({ ); fieldsWithNoOverlap.forEach((field) => { - // @ts-expect-error upgrade typescript v4.9.5 - if (driftedResp.aggregations) { - // @ts-expect-error upgrade typescript v4.9.5 + if (driftedResp?.aggregations) { driftedResp.aggregations[`${field}_ks_test`] = { // Setting -Infinity to represent astronomically small number // which would be represented as < 0.000001 in table diff --git a/x-pack/plugins/ml/public/alerting/anomaly_detection_rule/ml_anomaly_alert_trigger.tsx b/x-pack/plugins/ml/public/alerting/anomaly_detection_rule/ml_anomaly_alert_trigger.tsx index 3d70b4bbdc16d..445df758f4c9d 100644 --- a/x-pack/plugins/ml/public/alerting/anomaly_detection_rule/ml_anomaly_alert_trigger.tsx +++ b/x-pack/plugins/ml/public/alerting/anomaly_detection_rule/ml_anomaly_alert_trigger.tsx @@ -226,7 +226,7 @@ const MlAnomalyAlertTrigger: FC = ({ { + onChange={useCallback((update: Partial) => { Object.keys(update).forEach((k) => { setRuleParams(k, update[k as keyof MlAnomalyDetectionAlertAdvancedSettings]); }); diff --git a/x-pack/plugins/ml/public/alerting/job_selector.tsx b/x-pack/plugins/ml/public/alerting/job_selector.tsx index 68bc75e2de2b5..0bee10c0c6a81 100644 --- a/x-pack/plugins/ml/public/alerting/job_selector.tsx +++ b/x-pack/plugins/ml/public/alerting/job_selector.tsx @@ -18,7 +18,7 @@ import type { MlApi } from '../application/services/ml_api_service'; import { ALL_JOBS_SELECTION } from '../../common/constants/alerts'; import { LoadingIndicator } from '../application/components/loading_indicator'; -interface JobSelection { +export interface JobSelection { jobIds?: JobId[]; groupIds?: string[]; } diff --git a/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx b/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx index 2b51db2859714..c798cf3911f48 100644 --- a/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx +++ b/x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx @@ -16,7 +16,7 @@ import type { RuleTypeParamsExpressionProps } from '@kbn/triggers-actions-ui-plu import { isPopulatedObject } from '@kbn/ml-is-populated-object'; import { isDefined } from '@kbn/ml-is-defined'; import type { MlAnomalyDetectionJobsHealthRuleParams } from '../../../common/types/alerts'; -import { JobSelectorControl } from '../job_selector'; +import { JobSelectorControl, type JobSelection } from '../job_selector'; import { jobsApiProvider } from '../../application/services/ml_api_service/jobs'; import { HttpService } from '../../application/services/http_service'; import { useMlKibana } from '../../application/contexts/kibana'; @@ -129,7 +129,7 @@ const AnomalyDetectionJobsHealthRuleTrigger: FC = ({ { + onChange={useCallback((update: JobSelection) => { const callback = onAlertParamChange('excludeJobs'); if (isPopulatedObject(update)) { callback(update); diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx index 2805563eeb7fd..b2532b225db2b 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx @@ -122,7 +122,7 @@ export const DecisionPathChart = ({ ); // if regression, guarantee up to num_precision significant digits without having it in scientific notation // if classification, hide the numeric values since we only want to show the path - const tickFormatter = useCallback((d: any) => formatSingleValue(d, '').toString(), []); + const tickFormatter = useCallback((d: number) => formatSingleValue(d, '').toString(), []); return (
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx index 8f192f3919e16..a63f0851a87bf 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx @@ -100,7 +100,7 @@ export const DataFrameAnalyticsList: FC = ({ const searchQueryText = pageState.queryText ?? ''; const setSearchQueryText = useCallback( - (value: any) => { + (value: string) => { updatePageState({ queryText: value }); }, [updatePageState] diff --git a/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts b/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts index 41a3da0586e02..19bf333e0d2bd 100644 --- a/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts +++ b/x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts @@ -236,7 +236,7 @@ export const useExplorerData = (): [Partial | undefined, (d: any) const explorerData$ = useMemo(() => loadExplorerData$.pipe(switchMap(loadExplorerData)), []); const explorerData = useObservable(explorerData$); - const update = useCallback((c: any) => { + const update = useCallback((c: LoadExplorerDataConfig) => { loadExplorerData$.next(c); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx index ae12b8b1fa4ac..b64afb345f5bc 100644 --- a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx +++ b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx @@ -465,7 +465,7 @@ export const AnomalyTimeline: FC = React.memo( { + onChange={useCallback((update: number | undefined) => { setSeverityUpdate(update); }, [])} /> diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.tsx b/x-pack/plugins/ml/public/application/explorer/explorer.tsx index ab503c11d7955..ba95fc6671bcb 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer.tsx +++ b/x-pack/plugins/ml/public/application/explorer/explorer.tsx @@ -232,7 +232,7 @@ export const Explorer: FC = ({ ); const onPanelWidthChange = useCallback( - (newSizes: any) => { + (newSizes: { [key: string]: number }) => { setAnomalyExplorerPanelState({ mainPage: { size: newSizes.mainPage, diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx index ec4520ef87fd7..1304ca1c6e131 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_range_form.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback } from 'react'; +import React, { useCallback, type ComponentProps } from 'react'; import { EuiFieldNumber, EuiFormRow, @@ -18,6 +18,12 @@ import { FormattedMessage } from '@kbn/i18n-react'; import type { FilterAggConfigRange } from '../types'; const BUTTON_SIZE = 40; + +// The config prop of the component, to be used for the `updateConfig` function. +type FilterRangeFormConfig = ComponentProps< + Exclude +>['config']; + /** * Form component for the range filter aggregation for number type fields. */ @@ -31,7 +37,7 @@ export const FilterRangeForm: FilterAggConfigRange['aggTypeConfig']['FilterAggFo const includeTo = config?.includeTo ?? false; const updateConfig = useCallback( - (update: any) => { + (update: FilterRangeFormConfig) => { onChange({ config: { ...config, diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx index 2e52eb67ac49a..04793ee426cca 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx @@ -6,7 +6,14 @@ */ import { debounce } from 'lodash'; -import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import React, { + useCallback, + useContext, + useEffect, + useMemo, + useState, + type ComponentProps, +} from 'react'; import useUpdateEffect from 'react-use/lib/useUpdateEffect'; import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; @@ -24,6 +31,11 @@ import { useToastNotifications } from '../../../../../../../app_dependencies'; import type { FilterAggConfigTerm } from '../types'; +// The config prop of the component, to be used for the `updateConfig` function. +type FilterRangeFormConfig = ComponentProps< + Exclude +>['config']; + /** * Form component for the term filter aggregation. */ @@ -51,7 +63,7 @@ export const FilterTermForm: FilterAggConfigTerm['aggTypeConfig']['FilterAggForm }, []); const updateConfig = useCallback( - (update: any) => { + (update: FilterRangeFormConfig) => { onChange({ config: { ...config, diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/hooks/use_latest_function_config.ts b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/hooks/use_latest_function_config.ts index f0530ee9afa70..1fb865055c0d4 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/hooks/use_latest_function_config.ts +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/hooks/use_latest_function_config.ts @@ -161,7 +161,7 @@ export function useLatestFunctionConfig( }, [dataView, data.search.aggs, runtimeMappings]); const updateLatestFunctionConfig = useCallback( - (update: any) => + (update: Partial) => setLatestFunctionConfig({ ...config, ...update,