[Security solution] Guided onboarding, alerts & cases design updates

x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.test.tsx

@@ -66,6 +66,7 @@ describe('use cases add to existing case modal hook', () => {
           externalReferenceAttachmentTypeRegistry,
           persistableStateAttachmentTypeRegistry,
           owner: ['test'],
+          isSubmit: false,
           permissions: allCasesPermissions(),
           appId: 'test',
           appTitle: 'jest',

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

@@ -13,6 +13,7 @@ export const getInitialCasesContextState = (): CasesContextState => {
   return {
     createCaseFlyout: {
       isFlyoutOpen: false,
+      isSubmit: false,
     },
     selectCaseModal: {
       isModalOpen: false,
@@ -23,6 +24,7 @@ export const getInitialCasesContextState = (): CasesContextState => {
 export interface CasesContextState {
   createCaseFlyout: {
     isFlyoutOpen: boolean;
+    isSubmit: boolean;
     props?: CreateCaseFlyoutProps;
   };
   selectCaseModal: {
@@ -36,6 +38,7 @@ export enum CasesContextStoreActionsList {
   CLOSE_CREATE_CASE_FLYOUT,
   OPEN_ADD_TO_CASE_MODAL,
   CLOSE_ADD_TO_CASE_MODAL,
+  SUBMIT_CASE_FROM_FLYOUT,
 }
 export type CasesContextStoreAction =
   | {
@@ -47,25 +50,32 @@ export type CasesContextStoreAction =
       type: CasesContextStoreActionsList.OPEN_ADD_TO_CASE_MODAL;
       payload: AllCasesSelectorModalProps;
     }
-  | { type: CasesContextStoreActionsList.CLOSE_ADD_TO_CASE_MODAL };
+  | { type: CasesContextStoreActionsList.CLOSE_ADD_TO_CASE_MODAL }
+  | { type: CasesContextStoreActionsList.SUBMIT_CASE_FROM_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 } };
+      return {
+        ...state,
+        createCaseFlyout: { ...state.createCaseFlyout, isFlyoutOpen: true, props: action.payload },
+      };
     }
     case CasesContextStoreActionsList.CLOSE_CREATE_CASE_FLYOUT: {
-      return { ...state, createCaseFlyout: { isFlyoutOpen: false } };
+      return { ...state, createCaseFlyout: { ...state.createCaseFlyout, isFlyoutOpen: false } };
     }
     case CasesContextStoreActionsList.OPEN_ADD_TO_CASE_MODAL: {
       return { ...state, selectCaseModal: { isModalOpen: true, props: action.payload } };
     }
     case CasesContextStoreActionsList.CLOSE_ADD_TO_CASE_MODAL: {
       return { ...state, selectCaseModal: { isModalOpen: false } };
     }
+    case CasesContextStoreActionsList.SUBMIT_CASE_FROM_FLYOUT: {
+      return { ...state, createCaseFlyout: { ...state.createCaseFlyout, isSubmit: true } };
+    }
     default:
       assertNever(action);
   }

x-pack/plugins/cases/public/components/cases_context/cases_global_components.test.tsx

@@ -34,6 +34,7 @@ describe('Cases context UI', () => {
         ...getInitialCasesContextState(),
         createCaseFlyout: {
           isFlyoutOpen: true,
+          isSubmit: false,
           props: {
             attachments: [],
           },
@@ -48,6 +49,7 @@ describe('Cases context UI', () => {
         ...getInitialCasesContextState(),
         createCaseFlyout: {
           isFlyoutOpen: false,
+          isSubmit: false,
         },
       };
       appMock.render(<CasesGlobalComponents state={state} />);

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

@@ -37,6 +37,7 @@ export interface CasesContextValue {
   features: CasesFeaturesAllRequired;
   releasePhase: ReleasePhase;
   dispatch: CasesContextValueDispatch;
+  isSubmit: boolean;
 }
 
 export interface CasesContextProps
@@ -90,6 +91,7 @@ export const CasesProvider: React.FC<{ value: CasesContextProps }> = ({
     ),
     releasePhase,
     dispatch,
+    isSubmit: false,
   }));
 
   /**
@@ -114,6 +116,15 @@ export const CasesProvider: React.FC<{ value: CasesContextProps }> = ({
     }
   }, [appTitle, appId]);
 
+  useEffect(() => {
+    if (state.createCaseFlyout.isSubmit) {
+      setValue((prev) => ({
+        ...prev,
+        isSubmit: true,
+      }));
+    }
+  }, [state.createCaseFlyout.isSubmit]);
+
   return isCasesContextValue(value) ? (
     <CasesContext.Provider value={value}>
       <CasesGlobalComponents state={state} />

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

@@ -26,6 +26,7 @@ export interface CreateCaseFlyoutProps {
   onSuccess?: (theCase: Case) => Promise<void>;
   attachments?: CaseAttachmentsWithoutOwner;
   headerContent?: React.ReactNode;
+  initialValue?: Partial<Case>;
 }
 
 const StyledFlyout = styled(EuiFlyout)`
@@ -72,7 +73,7 @@ const FormWrapper = styled.div`
 `;
 
 export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
-  ({ afterCaseCreated, onClose, onSuccess, attachments, headerContent }) => {
+  ({ afterCaseCreated, onClose, onSuccess, attachments, headerContent, initialValue }) => {
     const handleCancel = onClose || function () {};
     const handleOnSuccess = onSuccess || async function () {};
 
@@ -99,6 +100,7 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
                 onCancel={handleCancel}
                 onSuccess={handleOnSuccess}
                 withSteps={false}
+                initialValue={initialValue}
               />
             </FormWrapper>
           </StyledEuiFlyoutBody>

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

@@ -34,6 +34,7 @@ describe('use cases add to new case flyout hook', () => {
             externalReferenceAttachmentTypeRegistry,
             persistableStateAttachmentTypeRegistry,
             owner: ['test'],
+            isSubmit: false,
             permissions: allCasesPermissions(),
             appId: 'test',
             appTitle: 'jest',

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

@@ -23,6 +23,12 @@ export const useCasesAddToNewCaseFlyout = (props: AddToNewCaseFlyoutProps = {})
   const { dispatch } = useCasesContext();
   const casesToasts = useCasesToast();
 
+  const submitFromFlyout = useCallback(() => {
+    dispatch({
+      type: CasesContextStoreActionsList.SUBMIT_CASE_FROM_FLYOUT,
+    });
+  }, [dispatch]);
+
   const closeFlyout = useCallback(() => {
     dispatch({
       type: CasesContextStoreActionsList.CLOSE_CREATE_CASE_FLYOUT,
@@ -73,6 +79,7 @@ export const useCasesAddToNewCaseFlyout = (props: AddToNewCaseFlyoutProps = {})
   return {
     open: openFlyout,
     close: closeFlyout,
+    submit: submitFromFlyout,
   };
 };
 

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import {
   EuiButtonEmpty,
   EuiFlexGroup,
@@ -70,15 +70,22 @@ export interface CreateCaseFormProps extends Pick<Partial<CreateCaseFormFieldsPr
   ) => Promise<void>;
   timelineIntegration?: CasesTimelineIntegration;
   attachments?: CaseAttachmentsWithoutOwner;
+  initialValue?: Partial<Case>;
 }
 
 const empty: ActionConnector[] = [];
 export const CreateCaseFormFields: React.FC<CreateCaseFormFieldsProps> = React.memo(
   ({ connectors, isLoadingConnectors, withSteps }) => {
-    const { isSubmitting } = useFormContext();
+    const { isSubmitting, submit } = useFormContext();
     const { isSyncAlertsEnabled, caseAssignmentAuthorized } = useCasesFeatures();
 
-    const { owner } = useCasesContext();
+    const { owner, isSubmit } = useCasesContext();
+
+    useEffect(() => {
+      console.log('useEffect', isSubmit);
+      if (isSubmit) submit();
+    }, [isSubmit, submit]);
+
     const availableOwners = useAvailableCasesOwners();
     const canShowCaseSolutionSelection = !owner.length && availableOwners.length;
 
@@ -181,12 +188,14 @@ export const CreateCaseForm: React.FC<CreateCaseFormProps> = React.memo(
     onSuccess,
     timelineIntegration,
     attachments,
+    initialValue,
   }) => (
     <CasesTimelineIntegrationProvider timelineIntegration={timelineIntegration}>
       <FormContext
         afterCaseCreated={afterCaseCreated}
         onSuccess={onSuccess}
         attachments={attachments}
+        initialValue={initialValue}
       >
         <CreateCaseFormFields
           connectors={empty}

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

@@ -44,13 +44,15 @@ interface Props {
   children?: JSX.Element | JSX.Element[];
   onSuccess?: (theCase: Case) => Promise<void>;
   attachments?: CaseAttachmentsWithoutOwner;
+  initialValue?: Partial<Case>;
 }
 
 export const FormContext: React.FC<Props> = ({
   afterCaseCreated,
   children,
   onSuccess,
   attachments,
+  initialValue,
 }) => {
   const { data: connectors = [], isLoading: isLoadingConnectors } = useGetConnectors();
   const { owner, appId } = useCasesContext();
@@ -128,7 +130,7 @@ export const FormContext: React.FC<Props> = ({
   );
 
   const { form } = useForm<FormProps>({
-    defaultValue: initialCaseValue,
+    defaultValue: { ...initialCaseValue, ...initialValue },
     options: { stripEmptyFields: false },
     schema,
     onSubmit: submitCase,

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/README.md

@@ -90,11 +90,10 @@ It was important that the `EuiTourStep` **anchor** is in the DOM when the tour s
       anchor: `[data-test-subj="create-case-flyout"]`,
       anchorPosition: 'leftUp',
       dataTestSubj: getTourAnchor(5, SecurityStepId.alertsCases),
-      hideNextButton: true,
     }
     ```
 
-   Notice that the **anchor prop is defined** as `[data-test-subj="create-case-flyout"]` in the step 5 config. There is also a `hideNextButton` boolean utilized here.
+   Notice that the **anchor prop is defined** as `[data-test-subj="create-case-flyout"]` in the step 5 config.
    As you can see pictured below, the tour step anchor is the create case flyout and the next button is hidden.
 
      <img width="1336" alt="5" src="https://user-images.githubusercontent.com/6935300/197848670-09a6fa58-7417-4c9b-9be0-fb58224c2dc8.png">

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts

@@ -25,11 +25,10 @@ export const enum AlertsCasesTourSteps {
 
 export type StepConfig = Pick<
   EuiTourStepProps,
-  'step' | 'content' | 'anchorPosition' | 'title' | 'initialFocus' | 'anchor'
+  'step' | 'content' | 'anchorPosition' | 'title' | 'initialFocus' | 'anchor' | 'offset'
 > & {
   anchor?: ElementTarget;
   dataTestSubj: string;
-  hideNextButton?: boolean;
   imageConfig?: {
     altText: string;
     src: string;
@@ -79,7 +78,6 @@ const alertsCasesConfig: StepConfig[] = [
     ),
     anchorPosition: 'rightUp',
     dataTestSubj: getTourAnchor(AlertsCasesTourSteps.expandEvent, SecurityStepId.alertsCases),
-    hideNextButton: true,
   },
   {
     ...defaultConfig,
@@ -119,7 +117,6 @@ const alertsCasesConfig: StepConfig[] = [
     }),
     anchorPosition: 'upRight',
     dataTestSubj: getTourAnchor(AlertsCasesTourSteps.addAlertToCase, SecurityStepId.alertsCases),
-    hideNextButton: true,
   },
   {
     ...defaultConfig,
@@ -133,13 +130,25 @@ const alertsCasesConfig: StepConfig[] = [
         defaultMessage: `In addition to the alert, you can add any relevant information you need to the case.`,
       }
     ),
-    anchor: `[data-test-subj="create-case-flyout"]`,
+    anchor: `[data-test-subj="create-case-flyout"] [data-test-subj="caseTitle"] label`,
     anchorPosition: 'leftUp',
     dataTestSubj: getTourAnchor(AlertsCasesTourSteps.createCase, SecurityStepId.alertsCases),
-    hideNextButton: true,
+    offset: 20,
   },
 ];
 
+export const sampleCase = {
+  title: i18n.translate('xpack.securitySolution.guided_onboarding.tour.createCase.title', {
+    defaultMessage: `Demo signal detected`,
+  }),
+  description: i18n.translate(
+    'xpack.securitySolution.guided_onboarding.tour.createCase.description',
+    {
+      defaultMessage: `This is where you'd document a malicious signal. You can include whatever information is relevant to the case and would be helpful for anyone else that needs to read up on it.`,
+    }
+  ),
+};
+
 interface SecurityTourConfig {
   [SecurityStepId.rules]: StepConfig[];
   [SecurityStepId.alertsCases]: StepConfig[];