[Cases] Avoid empty renders of CasesProvider

Author: umbopepato

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -191,8 +191,9 @@ export const createAppMockRenderer = ({
                 releasePhase,
                 getFilesClient,
               }}
+              queryClient={queryClient}
             >
-              <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+              {children}
             </CasesProvider>
           </MemoryRouter>
         </ThemeProvider>

x-pack/plugins/cases/public/components/cases_context/index.tsx

@@ -12,6 +12,8 @@ import React, { useCallback, useMemo, useReducer } from 'react';
 
 import type { ScopedFilesClient } from '@kbn/files-plugin/public';
 import { FilesContext } from '@kbn/shared-ux-file-context';
+
+import type { QueryClient } from '@tanstack/react-query';
 import { QueryClientProvider } from '@tanstack/react-query';
 import type { CasesContextStoreAction } from './cases_context_reducer';
 import type {
@@ -63,7 +65,7 @@ export interface CasesContextProps
 
 export const CasesContext = React.createContext<CasesContextValue | undefined>(undefined);
 
-export const CasesProvider: React.FC<{ value: CasesContextProps }> = ({
+export const CasesProvider: React.FC<{ value: CasesContextProps; queryClient?: QueryClient }> = ({
   children,
   value: {
     externalReferenceAttachmentTypeRegistry,
@@ -75,6 +77,7 @@ export const CasesProvider: React.FC<{ value: CasesContextProps }> = ({
     releasePhase = 'ga',
     getFilesClient,
   },
+  queryClient = casesQueryClient,
 }) => {
   const { appId, appTitle } = useApplication();
   const [state, dispatch] = useReducer(casesContextReducer, getInitialCasesContextState());

x-pack/plugins/cases/public/components/cases_context/use_application.tsx

@@ -5,18 +5,27 @@
  * 2.0.
  */
 import useObservable from 'react-use/lib/useObservable';
+import type { BehaviorSubject, Observable } from 'rxjs';
 import { useKibana } from '../../common/lib/kibana';
 
 interface UseApplicationReturn {
   appId: string | undefined;
   appTitle: string | undefined;
 }
 
+/**
+ * Checks if the observable is stateful and, in case, sets up `useObservable` with an initial value
+ */
+const useStatefulObservable = <T,>(observable: Observable<T>) => {
+  const defaultValue = 'value' in observable ? (observable as BehaviorSubject<T>).value : undefined;
+  return useObservable(observable, defaultValue);
+};
+
 export const useApplication = (): UseApplicationReturn => {
   const { currentAppId$, applications$ } = useKibana().services.application;
   // retrieve the most recent value from the BehaviorSubject
-  const appId = useObservable(currentAppId$);
-  const applications = useObservable(applications$);
+  const appId = useStatefulObservable(currentAppId$);
+  const applications = useStatefulObservable(applications$);
 
   const appTitle = appId
     ? applications?.get(appId)?.category?.label ?? applications?.get(appId)?.title

x-pack/plugins/cases/public/components/create/description.test.tsx

@@ -18,7 +18,7 @@ import { FormTestComponent } from '../../common/test_utils';
 import type { FormSchema } from '@kbn/index-management-plugin/public/shared_imports';
 
 // FLAKY: https://github.com/elastic/kibana/issues/175204
-describe.skip('Description', () => {
+describe('Description', () => {
   let appMockRender: AppMockRenderer;
   const onSubmit = jest.fn();
   const draftStorageKey = `cases.caseView.createCase.description.markdownEditor`;