[Cases] Refactor attach alert to new case flyout

x-pack/plugins/cases/common/ui/types.ts

@@ -26,15 +26,6 @@ export interface CasesContextFeatures {
 
 export type CasesFeatures = Partial<CasesContextFeatures>;
 
-export interface CasesContextValue {
-  owner: string[];
-  appId: string;
-  appTitle: string;
-  userCanCrud: boolean;
-  basePath: string;
-  features: CasesContextFeatures;
-}
-
 export interface CasesUiConfigType {
   markdownPlugins: {
     lens: boolean;

x-pack/plugins/cases/public/components/cases_context/cases_context_reducer.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CreateCaseFlyoutProps } from '../create/flyout';
+
+export const initialCasesContextState = (): CasesContextState => {
+  return {
+    createCaseFlyout: {
+      isFlyoutOpen: false,
+    },
+  };
+};
+
+export interface CasesContextState {
+  createCaseFlyout: {
+    isFlyoutOpen: boolean;
+    props?: CreateCaseFlyoutProps;
+  };
+}
+
+export enum CasesContextStoreActionsList {
+  OPEN_CREATE_CASE_FLYOUT,
+  CLOSE_CREATE_CASE_FLYOUT,
+}
+export type CasesContextStoreAction =
+  | {
+      type: CasesContextStoreActionsList.OPEN_CREATE_CASE_FLYOUT;
+      payload: CreateCaseFlyoutProps;
+    }
+  | { type: CasesContextStoreActionsList.CLOSE_CREATE_CASE_FLYOUT };
+
+export const casesContextReducer: React.Reducer<CasesContextState, CasesContextStoreAction> = (
+  state: CasesContextState,
+  action: CasesContextStoreAction
+): CasesContextState => {
+  switch (action.type) {
+    case CasesContextStoreActionsList.OPEN_CREATE_CASE_FLYOUT: {
+      return { ...state, createCaseFlyout: { isFlyoutOpen: true, props: action.payload } };
+    }
+    case CasesContextStoreActionsList.CLOSE_CREATE_CASE_FLYOUT: {
+      return { ...state, createCaseFlyout: { isFlyoutOpen: false } };
+    }
+    default:
+      return state;
+  }
+};

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { getCreateCaseFlyoutLazyNoProvider } from '../../methods';
+import { CasesContextState } from './cases_context_reducer';
+
+export const CasesContextUI = ({ state }: { state: CasesContextState }) => {
+  return (
+    <>
+      {state.createCaseFlyout.isFlyoutOpen && state.createCaseFlyout.props !== undefined
+        ? getCreateCaseFlyoutLazyNoProvider(state.createCaseFlyout.props)
+        : null}
+    </>
+  );
+};
+CasesContextUI.displayName = 'CasesContextUi';

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

@@ -5,21 +5,38 @@
  * 2.0.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useReducer, useMemo } from 'react';
 import { merge } from 'lodash';
-import { CasesContextValue, CasesFeatures } from '../../../common/ui/types';
 import { DEFAULT_FEATURES } from '../../../common/constants';
 import { DEFAULT_BASE_PATH } from '../../common/navigation';
 import { useApplication } from './use_application';
+import {
+  CasesContextStoreAction,
+  casesContextReducer,
+  CasesContextState,
+  initialCasesContextState,
+} from './cases_context_reducer';
+import { CasesContextFeatures, CasesFeatures } from '../../containers/types';
+import { CasesContextUI } from './cases_context_ui';
 
-export const CasesContext = React.createContext<CasesContextValue | undefined>(undefined);
+export interface CasesContextValue {
+  owner: string[];
+  appId: string;
+  appTitle: string;
+  userCanCrud: boolean;
+  basePath: string;
+  features: CasesContextFeatures;
+  state: CasesContextState;
+  dispatch: (action: CasesContextStoreAction) => void;
+}
 
-export interface CasesContextProps
-  extends Omit<CasesContextValue, 'appId' | 'appTitle' | 'basePath' | 'features'> {
+export interface CasesContextProps extends Pick<CasesContextValue, 'owner' | 'userCanCrud'> {
   basePath?: string;
   features?: CasesFeatures;
 }
 
+export const CasesContext = React.createContext<CasesContextValue | undefined>(undefined);
+
 export interface CasesContextStateValue extends Omit<CasesContextValue, 'appId' | 'appTitle'> {
   appId?: string;
   appTitle?: string;
@@ -30,16 +47,19 @@ export const CasesProvider: React.FC<{ value: CasesContextProps }> = ({
   value: { owner, userCanCrud, basePath = DEFAULT_BASE_PATH, features = {} },
 }) => {
   const { appId, appTitle } = useApplication();
-  const [value, setValue] = useState<CasesContextStateValue>(() => ({
-    owner,
-    userCanCrud,
-    basePath,
-    /**
-     * The empty object at the beginning avoids the mutation
-     * of the DEFAULT_FEATURES object
-     */
-    features: merge({}, DEFAULT_FEATURES, features),
-  }));
+  const [state, dispatch] = useReducer(casesContextReducer, initialCasesContextState());
+  const [baseValue, setBaseValue] = useState<Omit<CasesContextStateValue, 'state' | 'dispatch'>>(
+    () => ({
+      owner,
+      userCanCrud,
+      basePath,
+      /**
+       * The empty object at the beginning avoids the mutation
+       * of the DEFAULT_FEATURES object
+       */
+      features: merge({}, DEFAULT_FEATURES, features),
+    })
+  );
 
   /**
    * `userCanCrud` prop may change by the parent plugin.
@@ -48,7 +68,7 @@ export const CasesProvider: React.FC<{ value: CasesContextProps }> = ({
    */
   useEffect(() => {
     if (appId && appTitle) {
-      setValue((prev) => ({
+      setBaseValue((prev) => ({
         ...prev,
         appId,
         appTitle,
@@ -57,12 +77,22 @@ export const CasesProvider: React.FC<{ value: CasesContextProps }> = ({
     }
   }, [appTitle, appId, userCanCrud]);
 
+  const value = useMemo(() => {
+    return { ...baseValue, state, dispatch };
+  }, [baseValue, state]);
+
   return isCasesContextValue(value) ? (
-    <CasesContext.Provider value={value}>{children}</CasesContext.Provider>
+    <CasesContext.Provider value={value}>
+      <CasesContextUI state={value.state} />
+      {children}
+    </CasesContext.Provider>
   ) : null;
 };
 CasesProvider.displayName = 'CasesProvider';
 
 function isCasesContextValue(value: CasesContextStateValue): value is CasesContextValue {
   return value.appId != null && value.appTitle != null && value.userCanCrud != null;
 }
+
+// eslint-disable-next-line import/no-default-export
+export default CasesProvider;

x-pack/plugins/cases/public/components/create/flyout/create_case_flyout.tsx

@@ -16,8 +16,8 @@ import { UsePostComment } from '../../../containers/use_post_comment';
 
 export interface CreateCaseFlyoutProps {
   afterCaseCreated?: (theCase: Case, postComment: UsePostComment['postComment']) => Promise<void>;
-  onClose: () => void;
-  onSuccess: (theCase: Case) => Promise<void>;
+  onClose?: () => void;
+  onSuccess?: (theCase: Case) => Promise<void>;
   attachments?: CreateCaseAttachment;
 }
 
@@ -66,6 +66,8 @@ const FormWrapper = styled.div`
 
 export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
   ({ afterCaseCreated, onClose, onSuccess, attachments }) => {
+    const handleCancel = onClose || function () {};
+    const handleOnSuccess = onSuccess || async function () {};
     return (
       <>
         <GlobalStyle />
@@ -85,8 +87,8 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
               <CreateCaseForm
                 afterCaseCreated={afterCaseCreated}
                 attachments={attachments}
-                onCancel={onClose}
-                onSuccess={onSuccess}
+                onCancel={handleCancel}
+                onSuccess={handleOnSuccess}
                 withSteps={false}
               />
             </FormWrapper>

x-pack/plugins/cases/public/components/create/flyout/use_cases_add_to_new_case_flyout.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CasesContextStoreActionsList } from '../../cases_context/cases_context_reducer';
+import { useCasesContext } from '../../cases_context/use_cases_context';
+import { CreateCaseFlyoutProps } from './create_case_flyout';
+
+export const useCasesAddToNewCasesFlyout = (props: CreateCaseFlyoutProps) => {
+  const context = useCasesContext();
+  const closeFlyout = () => {
+    context.dispatch({
+      type: CasesContextStoreActionsList.CLOSE_CREATE_CASE_FLYOUT,
+    });
+  };
+  const openFlyout = () => {
+    context.dispatch({
+      type: CasesContextStoreActionsList.OPEN_CREATE_CASE_FLYOUT,
+      payload: {
+        ...props,
+        onClose: () => {
+          closeFlyout();
+          if (props.onClose) {
+            return props.onClose();
+          }
+        },
+        afterCaseCreated: async (...args) => {
+          closeFlyout();
+          if (props.afterCaseCreated) {
+            return props.afterCaseCreated(...args);
+          }
+        },
+      },
+    });
+  };
+  return {
+    open: openFlyout,
+    close: closeFlyout,
+  };
+};
+
+export type UseCasesAddToNewCasesFlyout = typeof useCasesAddToNewCasesFlyout;

x-pack/plugins/cases/public/components/create/form.tsx

@@ -57,6 +57,7 @@ const MySpinner = styled(EuiLoadingSpinner)`
 `;
 export type SupportedCreateCaseAttachment = CommentRequestAlertType | CommentRequestUserType;
 export type CreateCaseAttachment = SupportedCreateCaseAttachment[];
+export type CaseAttachments = SupportedCreateCaseAttachment[];
 
 export interface CreateCaseFormFieldsProps {
   connectors: ActionConnector[];

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

@@ -19,6 +19,8 @@ export type { GetCreateCaseFlyoutProps } from './methods/get_create_case_flyout'
 export type { GetAllCasesSelectorModalProps } from './methods/get_all_cases_selector_modal';
 export type { GetRecentCasesProps } from './methods/get_recent_cases';
 
+export type { CaseAttachments } from './components/create/form';
+
 export type { ICasesDeepLinkId } from './common/navigation';
 export {
   getCasesDeepLinks,

x-pack/plugins/cases/public/methods/get_cases_context.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiLoadingSpinner } from '@elastic/eui';
+import React, { lazy, ReactNode, Suspense } from 'react';
+import { CasesContextProps } from '../components/cases_context';
+
+export type GetCasesContextProps = CasesContextProps;
+
+const CasesProviderLazy: React.FC<{ value: GetCasesContextProps }> = lazy(
+  () => import('../components/cases_context')
+);
+
+const CasesProviderLazyWrapper = ({
+  owner,
+  userCanCrud,
+  features,
+  children,
+}: GetCasesContextProps & { children: ReactNode }) => {
+  return (
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <CasesProviderLazy value={{ owner, userCanCrud, features }}>{children}</CasesProviderLazy>
+    </Suspense>
+  );
+};
+CasesProviderLazyWrapper.displayName = 'CasesProviderLazyWrapper';
+
+export const getCasesContextLazy = () => {
+  return CasesProviderLazyWrapper;
+};

x-pack/plugins/cases/public/methods/get_create_case_flyout.tsx

@@ -12,7 +12,7 @@ import { CasesProvider, CasesContextProps } from '../components/cases_context';
 
 export type GetCreateCaseFlyoutProps = CreateCaseFlyoutProps & CasesContextProps;
 
-const CreateCaseFlyoutLazy: React.FC<CreateCaseFlyoutProps> = lazy(
+export const CreateCaseFlyoutLazy: React.FC<CreateCaseFlyoutProps> = lazy(
   () => import('../components/create/flyout')
 );
 export const getCreateCaseFlyoutLazy = ({
@@ -35,3 +35,9 @@ export const getCreateCaseFlyoutLazy = ({
     </Suspense>
   </CasesProvider>
 );
+
+export const getCreateCaseFlyoutLazyNoProvider = (props: CreateCaseFlyoutProps) => (
+  <Suspense fallback={<EuiLoadingSpinner />}>
+    <CreateCaseFlyoutLazy {...props} />
+  </Suspense>
+);

x-pack/plugins/cases/public/mocks.ts

@@ -10,9 +10,14 @@ import { CasesUiStart } from './types';
 const createStartContract = (): jest.Mocked<CasesUiStart> => ({
   canUseCases: jest.fn(),
   getCases: jest.fn(),
+  getCasesContext: jest.fn(),
   getAllCasesSelectorModal: jest.fn(),
   getCreateCaseFlyout: jest.fn(),
   getRecentCases: jest.fn(),
+  getCreateCaseFlyoutNoProvider: jest.fn(),
+  hooks: {
+    getUseCasesAddToNewCasesFlyout: jest.fn(),
+  },
 });
 
 export const casesPluginMock = {

x-pack/plugins/cases/public/plugin.ts

@@ -14,8 +14,11 @@ import {
   getAllCasesSelectorModalLazy,
   getCreateCaseFlyoutLazy,
   canUseCases,
+  getCreateCaseFlyoutLazyNoProvider,
 } from './methods';
 import { CasesUiConfigType } from '../common/ui/types';
+import { getCasesContextLazy } from './methods/get_cases_context';
+import { useCasesAddToNewCasesFlyout } from './components/create/flyout/use_cases_add_to_new_case_flyout';
 
 /**
  * @public
@@ -35,9 +38,14 @@ export class CasesUiPlugin implements Plugin<void, CasesUiStart, SetupPlugins, S
     return {
       canUseCases: canUseCases(core.application.capabilities),
       getCases: getCasesLazy,
+      getCasesContext: getCasesContextLazy,
       getRecentCases: getRecentCasesLazy,
       getCreateCaseFlyout: getCreateCaseFlyoutLazy,
       getAllCasesSelectorModal: getAllCasesSelectorModalLazy,
+      getCreateCaseFlyoutNoProvider: getCreateCaseFlyoutLazyNoProvider,
+      hooks: {
+        getUseCasesAddToNewCasesFlyout: useCasesAddToNewCasesFlyout,
+      },
     };
   }