[Enterprise Search] Upgrade to Kea 2.2-rc.4 (#76206)

* Add Kea 2.20.rc.3

* Remove Kea declarations

* Convert AppLogic files to use new syntax

- Utilizes MakeLogicType to type the logic file and remove bespoke typings
- Use object syntax for actions and reducers, instead of functions
- Add return types to actions in interface
- Remove interfaces from component (Kea does this automagically now)

- Also renamed IAppLogic* to IApp*

* Convert Workplace Search Overview files to use new syntax

- Utilizes MakeLogicType to type the logic file and remove bespoke typings
- Use object syntax for actions and reducers, instead of functions
- Add return types to actions in interface
- Remove interfaces from component (Kea does this automagically now)

- Also renamed mockLogic* to mockApp*

* Convert HttpLogic files to use new syntax

- Utilizes MakeLogicType to type the logic file and remove bespoke typings
- Use object syntax for actions and reducers, instead of functions
- Add return types to actions in interface
- Remove interfaces from component (Kea does this automagically now)

- Also renamed IHttpLogic* to IHttp*

* Convert FlashMessages files to use new syntax

- Utilizes MakeLogicType to type the logic file and remove bespoke typings
- Use object syntax for actions and reducers, instead of functions
- Add return types to actions in interface
- Remove interfaces from component (Kea does this automagically now)

* Remove hand-rolled Kea types

Bye-bye pretty code

* Upgrade to rc4 per author

From Kea author: “I’d suggest upgrading to rc.4 before merging though, as I seem to have committed some optional chaining operators ("?.") into the compiled JS output, which will cause errors if anyone is using an older browser. You can also wait for 2.2.0 final, but that might still be a week or more away…”

Co-authored-by: Elastic Machine <[email protected]>

Author: scottybollinger

x-pack/package.json

@@ -195,7 +195,7 @@
     "jsdom": "13.1.0",
     "jsondiffpatch": "0.4.1",
     "jsts": "^1.6.2",
-    "kea": "^2.0.1",
+    "kea": "2.2.0-rc.4",
     "loader-utils": "^1.2.3",
     "lz-string": "^1.4.4",
     "madge": "3.4.4",

x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.ts

@@ -4,28 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { kea } from 'kea';
+import { kea, MakeLogicType } from 'kea';
 
 import { IInitialAppData } from '../../../common/types';
-import { IKeaLogic } from '../shared/types';
 
-export interface IAppLogicValues {
+export interface IAppValues {
   hasInitialized: boolean;
 }
-export interface IAppLogicActions {
+export interface IAppActions {
   initializeAppData(props: IInitialAppData): void;
 }
 
-export const AppLogic = kea({
-  actions: (): IAppLogicActions => ({
+export const AppLogic = kea<MakeLogicType<IAppValues, IAppActions>>({
+  actions: {
     initializeAppData: (props) => props,
-  }),
-  reducers: () => ({
+  },
+  reducers: {
     hasInitialized: [
       false,
       {
         initializeAppData: () => true,
       },
     ],
-  }),
-}) as IKeaLogic<IAppLogicValues, IAppLogicActions>;
+  },
+});

x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx

@@ -11,8 +11,8 @@ import { useActions, useValues } from 'kea';
 import { i18n } from '@kbn/i18n';
 
 import { KibanaContext, IKibanaContext } from '../index';
-import { HttpLogic, IHttpLogicValues } from '../shared/http';
-import { AppLogic, IAppLogicActions, IAppLogicValues } from './app_logic';
+import { HttpLogic } from '../shared/http';
+import { AppLogic } from './app_logic';
 import { IInitialAppData } from '../../../common/types';
 
 import { APP_SEARCH_PLUGIN } from '../../../common/constants';
@@ -48,9 +48,9 @@ export const AppSearchUnconfigured: React.FC = () => (
 );
 
 export const AppSearchConfigured: React.FC<IInitialAppData> = (props) => {
-  const { hasInitialized } = useValues(AppLogic) as IAppLogicValues;
-  const { initializeAppData } = useActions(AppLogic) as IAppLogicActions;
-  const { errorConnecting } = useValues(HttpLogic) as IHttpLogicValues;
+  const { hasInitialized } = useValues(AppLogic);
+  const { initializeAppData } = useActions(AppLogic);
+  const { errorConnecting } = useValues(HttpLogic);
 
   useEffect(() => {
     if (!hasInitialized) initializeAppData(props);

x-pack/plugins/enterprise_search/public/applications/kea.d.ts

@@ -8,7 +8,7 @@ import React, { Fragment } from 'react';
 import { useValues } from 'kea';
 import { EuiCallOut, EuiCallOutProps, EuiSpacer } from '@elastic/eui';
 
-import { FlashMessagesLogic, IFlashMessagesValues } from './flash_messages_logic';
+import { FlashMessagesLogic } from './flash_messages_logic';
 
 const FLASH_MESSAGE_TYPES = {
   success: { color: 'success' as EuiCallOutProps['color'], icon: 'check' },
@@ -18,7 +18,7 @@ const FLASH_MESSAGE_TYPES = {
 };
 
 export const FlashMessages: React.FC = ({ children }) => {
-  const { messages } = useValues(FlashMessagesLogic) as IFlashMessagesValues;
+  const { messages } = useValues(FlashMessagesLogic);
 
   // If we have no messages to display, do not render the element at all
   if (!messages.length) return null;

x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages.tsx

@@ -4,12 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { kea } from 'kea';
+import { kea, MakeLogicType } from 'kea';
 import { ReactNode } from 'react';
 import { History } from 'history';
 
-import { IKeaLogic, TKeaReducers, IKeaParams } from '../types';
-
 export interface IFlashMessage {
   type: 'success' | 'info' | 'warning' | 'error';
   message: ReactNode;
@@ -22,27 +20,27 @@ export interface IFlashMessagesValues {
   historyListener: Function | null;
 }
 export interface IFlashMessagesActions {
-  setFlashMessages(messages: IFlashMessage | IFlashMessage[]): void;
+  setFlashMessages(messages: IFlashMessage | IFlashMessage[]): { messages: IFlashMessage[] };
   clearFlashMessages(): void;
-  setQueuedMessages(messages: IFlashMessage | IFlashMessage[]): void;
+  setQueuedMessages(messages: IFlashMessage | IFlashMessage[]): { messages: IFlashMessage[] };
   clearQueuedMessages(): void;
-  listenToHistory(history: History): void;
-  setHistoryListener(historyListener: Function): void;
+  listenToHistory(history: History): History;
+  setHistoryListener(historyListener: Function): { historyListener: Function };
 }
 
 const convertToArray = (messages: IFlashMessage | IFlashMessage[]) =>
   !Array.isArray(messages) ? [messages] : messages;
 
-export const FlashMessagesLogic = kea({
-  actions: (): IFlashMessagesActions => ({
+export const FlashMessagesLogic = kea<MakeLogicType<IFlashMessagesValues, IFlashMessagesActions>>({
+  actions: {
     setFlashMessages: (messages) => ({ messages: convertToArray(messages) }),
     clearFlashMessages: () => null,
     setQueuedMessages: (messages) => ({ messages: convertToArray(messages) }),
     clearQueuedMessages: () => null,
     listenToHistory: (history) => history,
     setHistoryListener: (historyListener) => ({ historyListener }),
-  }),
-  reducers: (): TKeaReducers<IFlashMessagesValues, IFlashMessagesActions> => ({
+  },
+  reducers: {
     messages: [
       [],
       {
@@ -63,8 +61,8 @@ export const FlashMessagesLogic = kea({
         setHistoryListener: (_, { historyListener }) => historyListener,
       },
     ],
-  }),
-  listeners: ({ values, actions }): Partial<IFlashMessagesActions> => ({
+  },
+  listeners: ({ values, actions }) => ({
     listenToHistory: (history) => {
       // On React Router navigation, clear previous flash messages and load any queued messages
       const unlisten = history.listen(() => {
@@ -81,7 +79,4 @@ export const FlashMessagesLogic = kea({
       if (removeHistoryListener) removeHistoryListener();
     },
   }),
-} as IKeaParams<IFlashMessagesValues, IFlashMessagesActions>) as IKeaLogic<
-  IFlashMessagesValues,
-  IFlashMessagesActions
->;
+});

x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages_logic.ts

@@ -8,19 +8,15 @@ import React, { useEffect } from 'react';
 import { useValues, useActions } from 'kea';
 import { History } from 'history';
 
-import {
-  FlashMessagesLogic,
-  IFlashMessagesValues,
-  IFlashMessagesActions,
-} from './flash_messages_logic';
+import { FlashMessagesLogic } from './flash_messages_logic';
 
 interface IFlashMessagesProviderProps {
   history: History;
 }
 
 export const FlashMessagesProvider: React.FC<IFlashMessagesProviderProps> = ({ history }) => {
-  const { historyListener } = useValues(FlashMessagesLogic) as IFlashMessagesValues;
-  const { listenToHistory } = useActions(FlashMessagesLogic) as IFlashMessagesActions;
+  const { historyListener } = useValues(FlashMessagesLogic);
+  const { listenToHistory } = useActions(FlashMessagesLogic);
 
   useEffect(() => {
     if (!historyListener) listenToHistory(history);

x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages_provider.tsx

@@ -4,32 +4,36 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { kea } from 'kea';
+import { kea, MakeLogicType } from 'kea';
 
 import { HttpSetup } from 'src/core/public';
 
-import { IKeaLogic, IKeaParams, TKeaReducers } from '../../shared/types';
-
-export interface IHttpLogicValues {
+export interface IHttpValues {
   http: HttpSetup;
   httpInterceptors: Function[];
   errorConnecting: boolean;
 }
-export interface IHttpLogicActions {
-  initializeHttp({ http, errorConnecting }: { http: HttpSetup; errorConnecting?: boolean }): void;
+export interface IHttpActions {
+  initializeHttp({
+    http,
+    errorConnecting,
+  }: {
+    http: HttpSetup;
+    errorConnecting?: boolean;
+  }): { http: HttpSetup; errorConnecting?: boolean };
   initializeHttpInterceptors(): void;
-  setHttpInterceptors(httpInterceptors: Function[]): void;
-  setErrorConnecting(errorConnecting: boolean): void;
+  setHttpInterceptors(httpInterceptors: Function[]): { httpInterceptors: Function[] };
+  setErrorConnecting(errorConnecting: boolean): { errorConnecting: boolean };
 }
 
-export const HttpLogic = kea({
-  actions: (): IHttpLogicActions => ({
+export const HttpLogic = kea<MakeLogicType<IHttpValues, IHttpActions>>({
+  actions: {
     initializeHttp: ({ http, errorConnecting }) => ({ http, errorConnecting }),
     initializeHttpInterceptors: () => null,
     setHttpInterceptors: (httpInterceptors) => ({ httpInterceptors }),
     setErrorConnecting: (errorConnecting) => ({ errorConnecting }),
-  }),
-  reducers: (): TKeaReducers<IHttpLogicValues, IHttpLogicActions> => ({
+  },
+  reducers: {
     http: [
       (null as unknown) as HttpSetup,
       {
@@ -49,7 +53,7 @@ export const HttpLogic = kea({
         setErrorConnecting: (_, { errorConnecting }) => errorConnecting,
       },
     ],
-  }),
+  },
   listeners: ({ values, actions }) => ({
     initializeHttpInterceptors: () => {
       const httpInterceptors = [];
@@ -80,7 +84,4 @@ export const HttpLogic = kea({
       });
     },
   }),
-} as IKeaParams<IHttpLogicValues, IHttpLogicActions>) as IKeaLogic<
-  IHttpLogicValues,
-  IHttpLogicActions
->;
+});

x-pack/plugins/enterprise_search/public/applications/shared/http/http_logic.ts

@@ -9,15 +9,15 @@ import { useActions } from 'kea';
 
 import { HttpSetup } from 'src/core/public';
 
-import { HttpLogic, IHttpLogicActions } from './http_logic';
+import { HttpLogic } from './http_logic';
 
 interface IHttpProviderProps {
   http: HttpSetup;
   errorConnecting?: boolean;
 }
 
 export const HttpProvider: React.FC<IHttpProviderProps> = (props) => {
-  const { initializeHttp, initializeHttpInterceptors } = useActions(HttpLogic) as IHttpLogicActions;
+  const { initializeHttp, initializeHttpInterceptors } = useActions(HttpLogic);
 
   useEffect(() => {
     initializeHttp(props);

x-pack/plugins/enterprise_search/public/applications/shared/http/http_provider.tsx

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { HttpLogic, IHttpLogicValues, IHttpLogicActions } from './http_logic';
+export { HttpLogic, IHttpValues, IHttpActions } from './http_logic';
 export { HttpProvider } from './http_provider';