From c26e3678a645671ef0344c06ce53cd6d7dba874d Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sun, 24 Sep 2023 14:25:10 +0300 Subject: [PATCH] Adds the experimental badge to custom fields --- .../cases/public/common/translations.ts | 9 ++++ .../configure_cases/translations.ts | 2 +- .../components/custom_fields/index.test.tsx | 6 +++ .../public/components/custom_fields/index.tsx | 19 ++++++++- .../experimental_badge.test.tsx | 34 +++++++++++++++ .../experimental_badge/experimental_badge.tsx | 41 +++++++++++++++++++ .../components/header_page/translations.ts | 9 ---- 7 files changed, 108 insertions(+), 12 deletions(-) create mode 100644 x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.test.tsx create mode 100644 x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.tsx diff --git a/x-pack/plugins/cases/public/common/translations.ts b/x-pack/plugins/cases/public/common/translations.ts index 668eabb796e15..ef2844e87b9f2 100644 --- a/x-pack/plugins/cases/public/common/translations.ts +++ b/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.', +}); diff --git a/x-pack/plugins/cases/public/components/configure_cases/translations.ts b/x-pack/plugins/cases/public/components/configure_cases/translations.ts index ada2690ab7b03..e10f6fcad2fb9 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/translations.ts +++ b/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( diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx index 7b15b33a33728..83498a203ca11 100644 --- a/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx +++ b/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(); + + expect(screen.getByTestId('case-experimental-badge')).toBeInTheDocument(); + }); }); diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.tsx index 86ce6be8a07b0..88a7e056f489c 100644 --- a/x-pack/plugins/cases/public/components/custom_fields/index.tsx +++ b/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 = ({ return canAddCustomFields ? ( {i18n.TITLE}} + title={ + + {i18n.TITLE} + + + + + } description={ <>

{i18n.DESCRIPTION}

diff --git a/x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.test.tsx b/x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.test.tsx new file mode 100644 index 0000000000000..a13aea90e8e6e --- /dev/null +++ b/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(); + + expect(screen.getByTestId('case-experimental-badge')).toBeInTheDocument(); + }); + + it('renders the title correctly', () => { + appMockRenderer.render(); + + expect(screen.getByText('Technical preview')).toBeInTheDocument(); + }); +}); diff --git a/x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.tsx b/x-pack/plugins/cases/public/components/experimental_badge/experimental_badge.tsx new file mode 100644 index 0000000000000..f20d821b95844 --- /dev/null +++ b/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 = ({ 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 ( + + ); +}; + +ExperimentalBadgeComponent.displayName = 'ExperimentalBadge'; + +export const ExperimentalBadge = React.memo(ExperimentalBadgeComponent); diff --git a/x-pack/plugins/cases/public/components/header_page/translations.ts b/x-pack/plugins/cases/public/components/header_page/translations.ts index 358f667bba367..b50db9b092ada 100644 --- a/x-pack/plugins/cases/public/components/header_page/translations.ts +++ b/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', });