[Security Solution] [Cases] Move configure cases component

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

@@ -50,11 +50,11 @@ const FormWrapper = styled.div`
   `}
 `;
 
-interface ConfigureCasesComponentProps {
+export interface ConfigureCasesProps {
   userCanCrud: boolean;
 }
 
-const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userCanCrud }) => {
+const ConfigureCasesComponent: React.FC<ConfigureCasesProps> = ({ userCanCrud }) => {
   const { triggersActionsUi } = useKibana().services;
 
   const [connectorIsValid, setConnectorIsValid] = useState(true);
@@ -222,3 +222,5 @@ const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userC
 };
 
 export const ConfigureCases = React.memo(ConfigureCasesComponent);
+// eslint-disable-next-line import/no-default-export
+export default ConfigureCases;

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

@@ -0,0 +1,19 @@
+/*
+ * 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, Suspense } from 'react';
+import { AllCasesProps } from '../components/all_cases';
+
+export const getAllCasesLazy = (props: AllCasesProps) => {
+  const AllCasesLazy = lazy(() => import('../components/all_cases'));
+  return (
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <AllCasesLazy {...props} />
+    </Suspense>
+  );
+};

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

@@ -0,0 +1,19 @@
+/*
+ * 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, Suspense } from 'react';
+import { ConfigureCasesProps } from '../components/configure_cases';
+
+export const getConfigureCasesLazy = (props: ConfigureCasesProps) => {
+  const ConfigureCasesLazy = lazy(() => import('../components/configure_cases'));
+  return (
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <ConfigureCasesLazy {...props} />
+    </Suspense>
+  );
+};

x-pack/plugins/cases/public/get_create_case.tsx → x-pack/plugins/cases/public/methods/get_create_case.tsx

@@ -7,10 +7,10 @@
 
 import React, { lazy, Suspense } from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
-import { CreateCaseProps } from './components/create';
+import { CreateCaseProps } from '../components/create';
 
 export const getCreateCaseLazy = (props: CreateCaseProps) => {
-  const CreateCaseLazy = lazy(() => import('./components/create'));
+  const CreateCaseLazy = lazy(() => import('../components/create'));
   return (
     <Suspense fallback={<EuiLoadingSpinner />}>
       <CreateCaseLazy {...props} />

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

@@ -7,8 +7,9 @@
 
 import { CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
 import { CasesUiStart, SetupPlugins, StartPlugins } from './types';
-import { getCreateCaseLazy } from './get_create_case';
-import { getAllCasesLazy } from './get_all_cases';
+import { getCreateCaseLazy } from './methods/get_create_case';
+import { getAllCasesLazy } from './methods/get_all_cases';
+import { getConfigureCasesLazy } from './methods/get_configure_cases';
 import { KibanaServices } from './common/lib/kibana';
 
 export class CasesUiPlugin implements Plugin<void, CasesUiStart, SetupPlugins, StartPlugins> {
@@ -22,11 +23,14 @@ export class CasesUiPlugin implements Plugin<void, CasesUiStart, SetupPlugins, S
   public start(core: CoreStart, plugins: StartPlugins): CasesUiStart {
     KibanaServices.init({ ...core, ...plugins, kibanaVersion: this.kibanaVersion });
     return {
+      getAllCases: (props) => {
+        return getAllCasesLazy(props);
+      },
       getCreateCase: (props) => {
         return getCreateCaseLazy(props);
       },
-      getAllCases: (props) => {
-        return getAllCasesLazy(props);
+      getConfigureCases: (props) => {
+        return getConfigureCasesLazy(props);
       },
     };
   }

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

@@ -14,6 +14,7 @@ import {
 } from '../../triggers_actions_ui/public';
 import { AllCasesProps } from './components/all_cases';
 import { CreateCaseProps } from './components/create';
+import { ConfigureCasesProps } from './components/configure_cases';
 
 export interface SetupPlugins {
   security: SecurityPluginSetup;
@@ -38,4 +39,5 @@ export type StartServices = CoreStart &
 export interface CasesUiStart {
   getAllCases: (props: AllCasesProps) => ReactElement<AllCasesProps>;
   getCreateCase: (props: CreateCaseProps) => ReactElement<CreateCaseProps>;
+  getConfigureCases: (props: ConfigureCasesProps) => ReactElement<ConfigureCasesProps>;
 }

x-pack/plugins/security_solution/public/cases/pages/configure_cases.tsx

@@ -13,15 +13,17 @@ import { SecurityPageName } from '../../app/types';
 import { getCaseUrl } from '../../common/components/link_to';
 import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
 import { WrapperPage } from '../../common/components/wrapper_page';
-import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
+import { useGetUserSavedObjectPermissions, useKibana } from '../../common/lib/kibana';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { navTabs } from '../../app/home/home_navigations';
 import { CaseHeaderPage } from '../components/case_header_page';
 import { ConfigureCases } from '../components/configure_cases';
 import { WhitePageWrapper, SectionWrapper } from '../components/wrappers';
 import * as i18n from './translations';
+import { USE_RAC_CASES_UI } from '../../../common/constants';
 
 const ConfigureCasesPageComponent: React.FC = () => {
+  const { cases } = useKibana().services;
   const history = useHistory();
   const userPermissions = useGetUserSavedObjectPermissions();
   const search = useGetUrlSearch(navTabs.case);
@@ -53,7 +55,13 @@ const ConfigureCasesPageComponent: React.FC = () => {
           </HeaderWrapper>
         </SectionWrapper>
         <WhitePageWrapper>
-          <ConfigureCases userCanCrud={userPermissions?.crud ?? false} />
+          {USE_RAC_CASES_UI ? (
+            cases.getConfigureCases({
+              userCanCrud: userPermissions?.crud ?? false,
+            })
+          ) : (
+            <ConfigureCases userCanCrud={userPermissions?.crud ?? false} />
+          )}
         </WhitePageWrapper>
       </WrapperPage>
       <SpyRoute pageName={SecurityPageName.case} />