Better typings for useUIExtension

paul-tavares · paul-tavares · commit 80fa113b3cff · 2020-11-06T16:59:23.000-05:00
diff --git a/x-pack/plugins/ingest_manager/common/types/ui_extensions.ts b/x-pack/plugins/ingest_manager/common/types/ui_extensions.ts
@@ -13,10 +13,7 @@ export type UIExtensionRegistrationCallback = (extensionPoint: UIExtensionPoint)
 /** Internal storage for registered UI Extension Points */
 export interface UIExtensionsStorage {
   [key: string]: Partial<
-    Record<
-      UIExtensionPoint['type'],
-      Partial<Record<UIExtensionPoint['view'], UIExtensionPoint['component']>>
-    >
+    Record<UIExtensionPoint['type'], Partial<Record<UIExtensionPoint['view'], UIExtensionPoint>>>
   >;
 }
 
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_ui_extension.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_ui_extension.ts
@@ -4,16 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { ComponentType, LazyExoticComponent, useContext } from 'react';
+import React, { useContext } from 'react';
 import { UIExtensionPoint, UIExtensionsStorage } from '../../../../common/types/ui_extensions';
 
 export const UIExtensionsContext = React.createContext<UIExtensionsStorage>({});
 
-export const useUIExtension = (
+type SpecificExtensionPoint<A, T, V> = A extends { type: T; view: V } ? A : never;
+
+export const useUIExtension = <
+  T extends UIExtensionPoint['type'] = UIExtensionPoint['type'],
+  V extends UIExtensionPoint['view'] = UIExtensionPoint['view']
+>(
   integration: UIExtensionPoint['integration'],
-  type: UIExtensionPoint['type'],
-  view: UIExtensionPoint['view']
-): LazyExoticComponent<ComponentType<any>> | undefined => {
-  const extensions = useContext(UIExtensionsContext);
-  return extensions?.[integration]?.[type]?.[view];
+  type: T,
+  view: V
+): SpecificExtensionPoint<UIExtensionPoint, T, V>['component'] | undefined => {
+  const extension = useContext(UIExtensionsContext)?.[integration]?.[type]?.[view];
+  if (extension) {
+    return extension.component;
+  }
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/services/ui_extensions.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/services/ui_extensions.ts
@@ -26,7 +26,6 @@ export const createExtensionRegistrationCallback = (
       storage[extensionPoint.integration][extensionPoint.type] = {};
     }
 
-    storage[extensionPoint.integration][extensionPoint.type]![extensionPoint.view] =
-      extensionPoint.component;
+    storage[extensionPoint.integration][extensionPoint.type]![extensionPoint.view] = extensionPoint;
   };
 };

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,6 @@ export const createExtensionRegistrationCallback = (`
`26`	`26`	`storage[extensionPoint.integration][extensionPoint.type] = {};`
`27`	`27`	`}`
`28`	`28`
`29`		`- storage[extensionPoint.integration][extensionPoint.type]![extensionPoint.view] =`
`30`		`- extensionPoint.component;`
	`29`	`+ storage[extensionPoint.integration][extensionPoint.type]![extensionPoint.view] = extensionPoint;`
`31`	`30`	`};`
`32`	`31`	`};`