[SIEM][CASE] Add default options to header page

x-pack/legacy/plugins/siem/public/pages/case/case.tsx

@@ -7,29 +7,23 @@
 import React from 'react';
 
 import { EuiButton, EuiFlexGroup } from '@elastic/eui';
-import { HeaderPage } from '../../components/header_page';
+import { CaseHeaderPage } from './components/case_header_page';
 import { WrapperPage } from '../../components/wrapper_page';
 import { AllCases } from './components/all_cases';
 import { SpyRoute } from '../../utils/route/spy_routes';
 import * as i18n from './translations';
 import { getCreateCaseUrl } from '../../components/link_to';
 
-const badgeOptions = {
-  beta: true,
-  text: i18n.PAGE_BADGE_LABEL,
-  tooltip: i18n.PAGE_BADGE_TOOLTIP,
-};
-
 export const CasesPage = React.memo(() => (
   <>
     <WrapperPage>
-      <HeaderPage badgeOptions={badgeOptions} subtitle={i18n.PAGE_SUBTITLE} title={i18n.PAGE_TITLE}>
+      <CaseHeaderPage subtitle={i18n.PAGE_SUBTITLE} title={i18n.PAGE_TITLE}>
         <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
           <EuiButton fill href={getCreateCaseUrl()} iconType="plusInCircle">
             {i18n.CREATE_TITLE}
           </EuiButton>
         </EuiFlexGroup>
-      </HeaderPage>
+      </CaseHeaderPage>
       <AllCases />
     </WrapperPage>
     <SpyRoute />

x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/index.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { HeaderPage, HeaderPageProps } from '../../../../components/header_page';
+import * as i18n from './translations';
+
+const CaseHeaderPageComponent: React.FC<HeaderPageProps> = props => <HeaderPage {...props} />;
+
+CaseHeaderPageComponent.defaultProps = {
+  badgeOptions: {
+    beta: true,
+    text: i18n.PAGE_BADGE_LABEL,
+    tooltip: i18n.PAGE_BADGE_TOOLTIP,
+  },
+};
+
+export const CaseHeaderPage = React.memo(CaseHeaderPageComponent);

x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/translations.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const PAGE_BADGE_LABEL = i18n.translate('xpack.siem.case.caseView.pageBadgeLabel', {
+  defaultMessage: 'Beta',
+});
+
+export const PAGE_BADGE_TOOLTIP = i18n.translate('xpack.siem.case.caseView.pageBadgeTooltip', {
+  defaultMessage:
+    'Case Workflow is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo.',
+});

x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { WrapperPage } from '../../components/wrapper_page';
-import { HeaderPage } from '../../components/header_page';
+import { CaseHeaderPage } from './components/case_header_page';
 import { SpyRoute } from '../../utils/route/spy_routes';
 import { getCaseUrl } from '../../components/link_to';
 import * as i18n from './translations';
@@ -19,7 +19,7 @@ const backOptions = {
 const ConfigureCasesPageComponent: React.FC = () => (
   <>
     <WrapperPage>
-      <HeaderPage title={i18n.CONFIGURE_CASES} backOptions={backOptions} />
+      <CaseHeaderPage title={i18n.CONFIGURE_CASES} backOptions={backOptions} />
     </WrapperPage>
     <SpyRoute />
   </>

x-pack/legacy/plugins/siem/public/pages/case/create_case.tsx

@@ -9,23 +9,19 @@ import React from 'react';
 import { WrapperPage } from '../../components/wrapper_page';
 import { Create } from './components/create';
 import { SpyRoute } from '../../utils/route/spy_routes';
-import { HeaderPage } from '../../components/header_page';
+import { CaseHeaderPage } from './components/case_header_page';
 import * as i18n from './translations';
 import { getCaseUrl } from '../../components/link_to';
 
 const backOptions = {
   href: getCaseUrl(),
   text: i18n.BACK_TO_ALL,
 };
-const badgeOptions = {
-  beta: true,
-  text: i18n.PAGE_BADGE_LABEL,
-  tooltip: i18n.PAGE_BADGE_TOOLTIP,
-};
+
 export const CreateCasePage = React.memo(() => (
   <>
     <WrapperPage>
-      <HeaderPage backOptions={backOptions} badgeOptions={badgeOptions} title={i18n.CREATE_TITLE} />
+      <CaseHeaderPage backOptions={backOptions} title={i18n.CREATE_TITLE} />
       <Create />
     </WrapperPage>
     <SpyRoute />

x-pack/legacy/plugins/siem/public/pages/case/translations.ts

@@ -57,15 +57,6 @@ export const LAST_UPDATED = i18n.translate('xpack.siem.case.caseView.updatedAt',
   defaultMessage: 'Last updated',
 });
 
-export const PAGE_BADGE_LABEL = i18n.translate('xpack.siem.case.caseView.pageBadgeLabel', {
-  defaultMessage: 'Beta',
-});
-
-export const PAGE_BADGE_TOOLTIP = i18n.translate('xpack.siem.case.caseView.pageBadgeTooltip', {
-  defaultMessage:
-    'Case Workflow is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo.',
-});
-
 export const PAGE_SUBTITLE = i18n.translate('xpack.siem.case.caseView.pageSubtitle', {
   defaultMessage: 'Case Workflow Management within the Elastic SIEM',
 });