johnnys pr feedback

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

@@ -44,4 +44,24 @@ describe('CreateCaseFlyout', () => {
     });
     expect(onClose).toBeCalled();
   });
+
+  it('renders headerContent when passed', async () => {
+    const headerContent = <p data-test-subj="testing123" />;
+    const { getByTestId } = mockedContext.render(
+      <CreateCaseFlyout {...defaultProps} headerContent={headerContent} />
+    );
+
+    await act(async () => {
+      expect(getByTestId('testing123')).toBeTruthy();
+      expect(getByTestId('create-case-flyout-header').children.length).toEqual(2);
+    });
+  });
+
+  it('does not render headerContent when undefined', async () => {
+    const { getByTestId } = mockedContext.render(<CreateCaseFlyout {...defaultProps} />);
+
+    await act(async () => {
+      expect(getByTestId('create-case-flyout-header').children.length).toEqual(1);
+    });
+  });
 });

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

@@ -25,7 +25,7 @@ export interface CreateCaseFlyoutProps {
   onClose?: () => void;
   onSuccess?: (theCase: Case) => Promise<void>;
   attachments?: CaseAttachmentsWithoutOwner;
-  optionalContent?: React.ReactNode;
+  headerContent?: React.ReactNode;
 }
 
 const StyledFlyout = styled(EuiFlyout)`
@@ -72,7 +72,7 @@ const FormWrapper = styled.div`
 `;
 
 export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
-  ({ afterCaseCreated, onClose, onSuccess, attachments, optionalContent }) => {
+  ({ afterCaseCreated, onClose, onSuccess, attachments, headerContent }) => {
     const handleCancel = onClose || function () {};
     const handleOnSuccess = onSuccess || async function () {};
 
@@ -85,11 +85,11 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
           // maskProps is needed in order to apply the z-index to the parent overlay element, not to the flyout only
           maskProps={{ className: maskOverlayClassName }}
         >
-          <EuiFlyoutHeader hasBorder>
+          <EuiFlyoutHeader data-test-subj="create-case-flyout-header" hasBorder>
             <EuiTitle size="m">
               <h2>{i18n.CREATE_CASE_TITLE}</h2>
             </EuiTitle>
-            {optionalContent && optionalContent}
+            {headerContent && headerContent}
           </EuiFlyoutHeader>
           <StyledEuiFlyoutBody>
             <FormWrapper>

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

@@ -32,14 +32,14 @@ export const useCasesAddToNewCaseFlyout = (props: AddToNewCaseFlyoutProps = {})
   const openFlyout = useCallback(
     ({
       attachments,
-      optionalContent,
-    }: { attachments?: CaseAttachmentsWithoutOwner; optionalContent?: React.ReactNode } = {}) => {
+      headerContent,
+    }: { attachments?: CaseAttachmentsWithoutOwner; headerContent?: React.ReactNode } = {}) => {
       dispatch({
         type: CasesContextStoreActionsList.OPEN_CREATE_CASE_FLYOUT,
         payload: {
           ...props,
           attachments,
-          optionalContent,
+          headerContent,
           onClose: () => {
             closeFlyout();
             if (props.onClose) {

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

@@ -100,14 +100,14 @@ It was important that the `EuiTourStep` **anchor** is in the DOM when the tour s
      <img width="1336" alt="5" src="https://user-images.githubusercontent.com/6935300/197848670-09a6fa58-7417-4c9b-9be0-fb58224c2dc8.png">
 
 
-     Since cases is its own plugin and we are using a method to generate the flyout, we cannot wrap the flyout as children of the `GuidedOnboardingTourStep`. We do however need the `EuiTourStep` component to mount in the same location as the anchor. Therefore, I had to pass a new optional property to the case component called `optionalContent` that simply accepts and renders ` React.ReactNode` at the top of the flyout.  In the code, this looks something like:
+     Since cases is its own plugin and we are using a method to generate the flyout, we cannot wrap the flyout as children of the `GuidedOnboardingTourStep`. We do however need the `EuiTourStep` component to mount in the same location as the anchor. Therefore, I had to pass a new optional property to the case component called `headerContent` that simply accepts and renders ` React.ReactNode` at the top of the flyout.  In the code, this looks something like:
 
       ```
       createCaseFlyout.open({
         attachments: caseAttachments,
         ...(isTourShown(SecurityStepId.alertsCases) && activeStep === 4
           ? {
-              optionalContent: (
+              headerContent: (
                 // isTourAnchor=true no matter what in order to
                 // force active guide step outside of security solution (cases)
                 <GuidedOnboardingTourStep isTourAnchor step={5} stepId={SecurityStepId.alertsCases} />

x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_add_to_case_actions.tsx

@@ -82,7 +82,7 @@ export const useAddToCaseActions = ({
       attachments: caseAttachments,
       ...(isTourShown(SecurityStepId.alertsCases) && activeStep === 4
         ? {
-            optionalContent: (
+            headerContent: (
               // isTourAnchor=true no matter what in order to
               // force active guide step outside of security solution (cases)
               <GuidedOnboardingTourStep isTourAnchor step={5} stepId={SecurityStepId.alertsCases} />