[Cases] Adds the experimental badge to custom fields

x-pack/plugins/cases/public/common/translations.ts

@@ -380,3 +380,12 @@ export const ADD_TAG_CUSTOM_OPTION_LABEL_COMBO_BOX = ADD_TAG_CUSTOM_OPTION_LABEL
 
 export const ADD_CATEGORY_CUSTOM_OPTION_LABEL_COMBO_BOX =
   ADD_CATEGORY_CUSTOM_OPTION_LABEL('{searchValue}');
+
+export const EXPERIMENTAL_LABEL = i18n.translate('xpack.cases.badge.experimentalLabel', {
+  defaultMessage: 'Technical preview',
+});
+
+export const EXPERIMENTAL_DESC = i18n.translate('xpack.cases.badge.experimentalDesc', {
+  defaultMessage:
+    'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
+});

x-pack/plugins/cases/public/components/configure_cases/translations.ts

@@ -150,7 +150,7 @@ export const DEPRECATED_TOOLTIP_CONTENT = i18n.translate(
 );
 
 export const CONFIGURE_CASES_PAGE_TITLE = i18n.translate('xpack.cases.configureCases.headerTitle', {
-  defaultMessage: 'Configure cases',
+  defaultMessage: 'Settings',
 });
 
 export const CASES_WEBHOOK_MAPPINGS = i18n.translate(

x-pack/plugins/cases/public/components/custom_fields/index.test.tsx

@@ -77,4 +77,10 @@ describe('CustomFields', () => {
 
     expect(props.handleAddCustomField).toBeCalled();
   });
+
+  it('shows the experimental badge', () => {
+    appMockRender.render(<CustomFields {...props} />);
+
+    expect(screen.getByTestId('case-experimental-badge')).toBeInTheDocument();
+  });
 });

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

@@ -6,13 +6,21 @@
  */
 
 import React from 'react';
-import { EuiEmptyPrompt, EuiButtonEmpty, EuiDescribedFormGroup, EuiSpacer } from '@elastic/eui';
+import {
+  EuiEmptyPrompt,
+  EuiButtonEmpty,
+  EuiDescribedFormGroup,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import * as i18n from './translations';
 import { useCasesContext } from '../cases_context/use_cases_context';
 import type { CustomFieldsConfiguration } from '../../../common/types/domain';
 import { CustomFieldsList } from './custom_fields_list';
+import { ExperimentalBadge } from '../experimental_badge/experimental_badge';
 
 export interface Props {
   customFields: CustomFieldsConfiguration;
@@ -41,7 +49,14 @@ const CustomFieldsComponent: React.FC<Props> = ({
   return canAddCustomFields ? (
     <EuiDescribedFormGroup
       fullWidth
-      title={<h3>{i18n.TITLE}</h3>}
+      title={
+        <EuiFlexGroup alignItems="center" gutterSize="none">
+          <EuiFlexItem grow={false}>{i18n.TITLE}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ExperimentalBadge />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
       description={
         <>
           <p>{i18n.DESCRIPTION}</p>

x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.test.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 React from 'react';
+import { screen } from '@testing-library/dom';
+
+import type { AppMockRenderer } from '../../common/mock';
+import { createAppMockRenderer } from '../../common/mock';
+import { ExperimentalBadge } from './experimental_badge';
+
+describe('ExperimentalBadge', () => {
+  let appMockRenderer: AppMockRenderer;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    appMockRenderer = createAppMockRenderer();
+  });
+
+  it('renders the experimental badge', () => {
+    appMockRenderer.render(<ExperimentalBadge />);
+
+    expect(screen.getByTestId('case-experimental-badge')).toBeInTheDocument();
+  });
+
+  it('renders the title correctly', () => {
+    appMockRenderer.render(<ExperimentalBadge />);
+
+    expect(screen.getByText('Technical preview')).toBeInTheDocument();
+  });
+});

x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 type { EuiBetaBadgeProps } from '@elastic/eui';
+import { EuiBetaBadge } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { EXPERIMENTAL_LABEL, EXPERIMENTAL_DESC } from '../../common/translations';
+
+interface Props {
+  icon?: boolean;
+  size?: EuiBetaBadgeProps['size'];
+}
+
+const ExperimentalBadgeComponent: React.FC<Props> = ({ icon = false, size = 's' }) => {
+  const props: EuiBetaBadgeProps = {
+    label: EXPERIMENTAL_LABEL,
+    size,
+    ...(icon && { iconType: 'beaker' }),
+    tooltipContent: EXPERIMENTAL_DESC,
+    tooltipPosition: 'bottom' as const,
+    'data-test-subj': 'case-experimental-badge',
+  };
+
+  return (
+    <EuiBetaBadge
+      css={css`
+        margin-left: 5px;
+      `}
+      {...props}
+    />
+  );
+};
+
+ExperimentalBadgeComponent.displayName = 'ExperimentalBadge';
+
+export const ExperimentalBadge = React.memo(ExperimentalBadgeComponent);

x-pack/plugins/cases/public/components/header_page/translations.ts

@@ -23,15 +23,6 @@ export const EDIT_TITLE_ARIA = (title: string) =>
     defaultMessage: 'You can edit {title} by clicking',
   });
 
-export const EXPERIMENTAL_LABEL = i18n.translate('xpack.cases.header.badge.experimentalLabel', {
-  defaultMessage: 'Technical preview',
-});
-
-export const EXPERIMENTAL_DESC = i18n.translate('xpack.cases.header.badge.experimentalDesc', {
-  defaultMessage:
-    'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
-});
-
 export const BETA_LABEL = i18n.translate('xpack.cases.header.badge.betaLabel', {
   defaultMessage: 'Beta',
 });