[Index Management] Migrate JS to TS (elastic#260603)

Closes elastic#202868.

> Review tip: this PR is intentionally split into 2 commits
(rename-only, then code changes). If GitHub shows some `.js → .ts` moves
as delete+add, it's due to rename-detection heuristics when files
changed substantially—reviewing commit-by-commit is recommended.

## Summary

- Migrates the Index Management plugin public application layer (store,
actions, reducers, selectors, containers, lib) to TypeScript while
keeping runtime behavior stable.
- Removes implicit-`any` boundaries by typing store/actions/components
and aligning Redux thunk dispatch types with actual runtime contracts.
- Keeps changes scoped to the migration path; no server route changes
are included in this PR.

## What changed (high level)

### Runtime code
- Migrated 26 JS files to TS/TSX across store (actions, reducers,
selectors), containers, and lib utilities.
- Added `store/types.ts` centralizing Redux state interfaces
(`IndicesState`, `RowStatusState`, `TableState`, `IndexManagementState`)
and `AppDispatch` (`ThunkDispatch`) for type-safe async actions.
- Typed all action creators with `AppDispatch` for thunk support.
- Typed reducers with `handleActions<State, any>` to work within
`redux-actions` type constraints (where `createAction` returns
`Action<any>`).
- Typed selectors with `IndexManagementState`; fixed argument count
mismatches in `getPageOfIndices`/`getPager`.
- Typed container components handling `connect` + `withRouter` HOC
composition.
- Typed `IndexTable` class component props and state.
- Typed lib utilities (`flattenPanelTree`, `indexStatusLabels`).
- Removed `.d.ts` stubs that are no longer needed after full TS
conversion.

### Tests
- Removed `@ts-ignore` from `indices_filter.test.ts`; provided full mock
state matching `IndexManagementState`.

## Parity notes
- No intentional behavior changes.

## Test plan
- `node scripts/type_check --project
x-pack/platform/plugins/shared/index_management/tsconfig.json` — 0
errors
- `node scripts/eslint $(git diff --name-only HEAD~2..HEAD
--diff-filter=d)` — no errors found
- `node scripts/jest
x-pack/platform/plugins/shared/index_management/public/application/store/selectors/indices_filter.test.ts`
— 2/2 passed
- `node scripts/check_changes.ts` — all pre-commit checks passed

Assisted with Cursor using Claude 4.6 Opus

Made with [Cursor](https://cursor.com)

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: kapral18

x-pack/platform/packages/shared/index-management/index_management_shared_types/src/types.ts

@@ -8,7 +8,6 @@
 import type {
   IlmExplainLifecycleLifecycleExplain,
   HealthStatus,
-  IndicesStatsIndexMetadataState,
   Uuid,
 } from '@elastic/elasticsearch/lib/api/types';
 import type { ScopedHistory } from '@kbn/core-application-browser';
@@ -147,7 +146,8 @@ export interface IndexAttributes {
   // The types from here below represent information returned from the index stats API;
   // treated optional as the stats API is not available on serverless
   health?: HealthStatus;
-  status?: IndicesStatsIndexMetadataState;
+  // Some consumers (e.g. the indices list UI) display user-friendly status text.
+  status?: string;
   uuid?: Uuid;
   documents?: number;
   size?: number;

x-pack/platform/plugins/shared/index_management/common/types/data_streams.ts

@@ -9,6 +9,7 @@ import type {
   ByteSize,
   IndicesDataStream,
   IndicesDataStreamsStatsDataStreamsStatsItem,
+  HealthStatus,
   Metadata,
   IndicesDataStreamIndex,
   IndicesDataStreamLifecycleWithRollover,
@@ -34,7 +35,7 @@ export type HealthFromEs = 'GREEN' | 'YELLOW' | 'RED';
 
 export type DataStreamIndexFromEs = IndicesDataStreamIndex;
 
-export type Health = 'green' | 'yellow' | 'red';
+export type Health = Lowercase<HealthStatus>;
 
 export type IndexMode = (typeof IndexMode)[keyof typeof IndexMode];
 

x-pack/platform/plugins/shared/index_management/public/application/components/data_health.tsx

@@ -7,13 +7,13 @@
 
 import React from 'react';
 import { EuiHealth } from '@elastic/eui';
-import type { Health } from '../../../common/types';
+import type { HealthStatus } from '@elastic/elasticsearch/lib/api/types';
 
 interface Props {
-  health: Health;
+  health: HealthStatus;
 }
 
-const healthToColor = (health: Health) => {
+const healthToColor = (health: HealthStatus) => {
   switch (health) {
     case 'green':
       return 'success';

x-pack/platform/plugins/shared/index_management/public/application/lib/flatten_panel_tree.js

@@ -0,0 +1,117 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { flattenPanelTree } from './flatten_panel_tree';
+
+type PanelTree = Parameters<typeof flattenPanelTree>[0];
+
+const findPanel = (panels: ReturnType<typeof flattenPanelTree>, id: number) => {
+  const panel = panels.find((p) => p.id === id);
+  if (!panel) {
+    throw new Error(`Missing panel with id ${id}`);
+  }
+  return panel;
+};
+
+describe('flatten_panel_tree', () => {
+  test('flattens a single panel with no items', () => {
+    const tree: PanelTree = { id: 0 };
+    const panels = flattenPanelTree(tree);
+
+    expect(panels).toHaveLength(1);
+    expect(panels[0]).toEqual({ id: 0 });
+  });
+
+  test('flattens nested panels and rewrites item.panel objects to ids', () => {
+    const tree: PanelTree = {
+      id: 0,
+      title: 'root',
+      items: [
+        {
+          name: 'Go to child',
+          panel: {
+            id: 1,
+            title: 'child',
+            items: [{ name: 'Leaf item' }],
+          },
+        },
+      ],
+    };
+
+    const panels = flattenPanelTree(tree);
+
+    const root = findPanel(panels, 0);
+    const child = findPanel(panels, 1);
+
+    expect(root.items?.[0]).toMatchObject({ name: 'Go to child', panel: 1 });
+    expect(child.items?.[0]).toMatchObject({ name: 'Leaf item' });
+
+    // The input tree is not mutated
+    const originalPanel =
+      tree.items?.[0] && 'panel' in tree.items[0] ? tree.items[0].panel : undefined;
+    expect(typeof originalPanel).toBe('object');
+    expect(originalPanel).toMatchObject({ id: 1 });
+  });
+
+  test('preserves separators and custom render items', () => {
+    const tree: PanelTree = {
+      id: 0,
+      items: [
+        { isSeparator: true },
+        { renderItem: () => 'custom' },
+        { name: 'Child', panel: { id: 2, items: [{ name: 'Nested' }] } },
+      ],
+    };
+
+    const panels = flattenPanelTree(tree);
+    const root = findPanel(panels, 0);
+
+    expect(root.items?.[0]).toMatchObject({ isSeparator: true });
+    expect(root.items?.[1]).toMatchObject({ renderItem: expect.any(Function) });
+    expect(root.items?.[2]).toMatchObject({ name: 'Child', panel: 2 });
+    expect(findPanel(panels, 2).items?.[0]).toMatchObject({ name: 'Nested' });
+  });
+
+  test('does not rewrite numeric panel references', () => {
+    const tree: PanelTree = {
+      id: 0,
+      items: [{ name: 'Go', panel: 2 }],
+    };
+
+    const panels = flattenPanelTree(tree);
+    const root = findPanel(panels, 0);
+    expect(root.items?.[0]).toMatchObject({ panel: 2 });
+  });
+
+  test('flattens multiple nested branches', () => {
+    const tree: PanelTree = {
+      id: 0,
+      items: [
+        { name: 'A', panel: { id: 1, items: [{ name: 'A1' }] } },
+        {
+          name: 'B',
+          panel: {
+            id: 2,
+            items: [{ name: 'B1', panel: { id: 3, items: [{ name: 'B2' }] } }],
+          },
+        },
+      ],
+    };
+
+    const panels = flattenPanelTree(tree);
+
+    expect(findPanel(panels, 0).items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ name: 'A', panel: 1 }),
+        expect.objectContaining({ name: 'B', panel: 2 }),
+      ])
+    );
+    expect(findPanel(panels, 1).items?.[0]).toMatchObject({ name: 'A1' });
+    expect(findPanel(panels, 2).items?.[0]).toMatchObject({ name: 'B1', panel: 3 });
+    expect(findPanel(panels, 3).items?.[0]).toMatchObject({ name: 'B2' });
+  });
+});

x-pack/platform/plugins/shared/index_management/public/application/lib/flatten_panel_tree.test.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { EuiContextMenuPanelDescriptor } from '@elastic/eui';
+import type {
+  EuiContextMenuPanelItemDescriptorEntry,
+  EuiContextMenuPanelItemSeparator,
+  EuiContextMenuPanelItemRenderCustom,
+} from '@elastic/eui/src/components/context_menu/context_menu';
+
+type PanelTreeItem =
+  | (Omit<EuiContextMenuPanelItemDescriptorEntry, 'panel'> & {
+      panel?: PanelTree | number;
+    })
+  | EuiContextMenuPanelItemSeparator
+  | EuiContextMenuPanelItemRenderCustom;
+
+type PanelTree = Omit<EuiContextMenuPanelDescriptor, 'items'> & { items?: PanelTreeItem[] };
+type FlattenedPanelTreeItem =
+  | EuiContextMenuPanelItemDescriptorEntry
+  | EuiContextMenuPanelItemSeparator
+  | EuiContextMenuPanelItemRenderCustom;
+
+const isEntryItem = (
+  item: PanelTreeItem
+): item is Omit<EuiContextMenuPanelItemDescriptorEntry, 'panel'> & {
+  panel?: PanelTree | number;
+} => {
+  return 'name' in item && !('renderItem' in item);
+};
+
+export const flattenPanelTree = (
+  tree: PanelTree,
+  array: EuiContextMenuPanelDescriptor[] = []
+): EuiContextMenuPanelDescriptor[] => {
+  const items = tree.items?.map((item): FlattenedPanelTreeItem => {
+    if (isEntryItem(item)) {
+      if (item.panel && typeof item.panel !== 'number') {
+        flattenPanelTree(item.panel, array);
+      }
+
+      const panel = typeof item.panel === 'number' ? item.panel : item.panel?.id;
+      return { ...item, panel };
+    }
+    return item;
+  });
+
+  const { items: _items, ...panel } = tree;
+  array.push(items ? { ...panel, items } : panel);
+
+  return array;
+};

x-pack/platform/plugins/shared/index_management/public/application/lib/flatten_panel_tree.ts

@@ -17,7 +17,7 @@ import {
   INDEX_FORCEMERGING,
 } from '../../../common/constants';
 
-export const indexStatusLabels = {
+export const indexStatusLabels: Record<string, string> = {
   [INDEX_CLEARING_CACHE]: i18n.translate(
     'xpack.idxMgmt.indexStatusLabels.clearingCacheStatusLabel',
     {