Fix bug

elastic · Jun 30, 2022 · dee014a · dee014a
1 parent c5c5cf0
commit dee014a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/x-pack/plugins/cases/public/client/ui/get_cases_context.tsx b/x-pack/plugins/cases/public/client/ui/get_cases_context.tsx
@@ -43,20 +43,28 @@ const CasesProviderLazyWrapper = ({
     </Suspense>
   );
 };
+
 CasesProviderLazyWrapper.displayName = 'CasesProviderLazyWrapper';
 
 export const getCasesContextLazy = ({
   externalReferenceAttachmentTypeRegistry,
-}: Pick<GetCasesContextPropsInternal, 'externalReferenceAttachmentTypeRegistry'>) => {
-  // eslint-disable-next-line react/display-name
-  return (
-    props: GetCasesContextProps & {
-      children: ReactNode;
-    }
-  ) => (
+}: Pick<
+  GetCasesContextPropsInternal,
+  'externalReferenceAttachmentTypeRegistry'
+>): (() => React.FC<GetCasesContextProps>) => {
+  const CasesProviderLazyWrapperWithRegistry: React.FC<GetCasesContextProps> = ({
+    children,
+    ...props
+  }) => (
     <CasesProviderLazyWrapper
       {...props}
       externalReferenceAttachmentTypeRegistry={externalReferenceAttachmentTypeRegistry}
-    />
+    >
+      {children}
+    </CasesProviderLazyWrapper>
   );
+
+  CasesProviderLazyWrapperWithRegistry.displayName = 'CasesProviderLazyWrapperWithRegistry';
+
+  return () => CasesProviderLazyWrapperWithRegistry;
 };
diff --git a/x-pack/plugins/cases/public/plugin.ts b/x-pack/plugins/cases/public/plugin.ts
@@ -96,6 +96,14 @@ export class CasesUiPlugin
     const config = this.initializerContext.config.get<CasesUiConfigType>();
     KibanaServices.init({ ...core, ...plugins, kibanaVersion: this.kibanaVersion, config });
 
+    /**
+     * getCasesContextLazy returns a new component each time is being called. To avoid re-renders
+     * we get the component on start and provide the same component to all consumers.
+     */
+    const getCasesContext = getCasesContextLazy({
+      externalReferenceAttachmentTypeRegistry: this.externalReferenceAttachmentTypeRegistry,
+    });
+
     return {
       api: createClientAPI({ http: core.http }),
       ui: {
@@ -104,10 +112,7 @@ export class CasesUiPlugin
             ...props,
             externalReferenceAttachmentTypeRegistry: this.externalReferenceAttachmentTypeRegistry,
           }),
-        getCasesContext: () =>
-          getCasesContextLazy({
-            externalReferenceAttachmentTypeRegistry: this.externalReferenceAttachmentTypeRegistry,
-          }),
+        getCasesContext,
         getRecentCases: (props) =>
           getRecentCasesLazy({
             ...props,

diff --git a/x-pack/plugins/cases/public/types.ts b/x-pack/plugins/cases/public/types.ts
@@ -6,7 +6,7 @@
  */
 
 import { CoreStart, IHttpFetchError, ResponseErrorBody } from '@kbn/core/public';
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement } from 'react';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import type { Storage } from '@kbn/kibana-utils-plugin/public';
@@ -96,11 +96,8 @@ export interface CasesUiStart {
      * @return {ReactElement<GetCasesProps>}
      */
     getCases: (props: GetCasesProps) => ReactElement<GetCasesProps>;
-    getCasesContext: () => (
-      props: GetCasesContextProps & {
-        children: ReactNode;
-      }
-    ) => ReactElement<GetCasesContextProps>;
+    getCasesContext: () => React.FC<GetCasesContextProps>;
+
     /**
      * Modal to select a case in a list of all owner cases
      * @param props GetAllCasesSelectorModalProps