Refine DataSource id to use actual key type instead of a wide string type

Summary: Current implementation uses type `string` as a key for indexing items stored in datasource. However, users can provide any key as an index which means that the type of index item can be anything, not only string. This diff introduces a more refined types for the key. It adds another requirement to provide a key property to a generic which is used to infer the index type.

Reviewed By: mweststrate, aigoncharov

Differential Revision: D31895751

fbshipit-source-id: 19ba907bd6f35df87e3fa442db5fc5cec6af174d

desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx

@@ -93,7 +93,7 @@ type DataManagerActions<T> =
   | Action<'setAutoScroll', {autoScroll: boolean}>;
 
 type DataManagerConfig<T> = {
-  dataSource: DataSource<T>;
+  dataSource: DataSource<T, T[keyof T]>;
   defaultColumns: DataTableColumn<T>[];
   scope: string;
   onSelect: undefined | ((item: T | undefined, items: T[]) => void);
@@ -279,11 +279,11 @@ export type DataTableManager<T> = {
   toggleColumnVisibility(column: keyof T): void;
   sortColumn(column: keyof T, direction?: SortDirection): void;
   setSearchValue(value: string): void;
-  dataSource: DataSource<T>;
+  dataSource: DataSource<T, T[keyof T]>;
 };
 
 export function createDataTableManager<T>(
-  dataSource: DataSource<T>,
+  dataSource: DataSource<T, T[keyof T]>,
   dispatch: DataTableDispatch<T>,
   stateRef: MutableRefObject<DataManagerState<T>>,
 ): DataTableManager<T> {
@@ -400,7 +400,7 @@ function addColumnFilter<T>(
 }
 
 export function getSelectedItem<T>(
-  dataSource: DataSource<T>,
+  dataSource: DataSource<T, T[keyof T]>,
   selection: Selection,
 ): T | undefined {
   return selection.current < 0
@@ -409,7 +409,7 @@ export function getSelectedItem<T>(
 }
 
 export function getSelectedItems<T>(
-  dataSource: DataSource<T>,
+  dataSource: DataSource<T, T[keyof T]>,
   selection: Selection,
 ): T[] {
   return [...selection.items]