Skip to content

Commit

Permalink
[ResponseOps][Cases] Add tech preview badge to create case page templ…
Browse files Browse the repository at this point in the history
…ate section (#188081)

## Summary

Adds a `Technical Preview` badge to the template section of the create
case page.

### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

---------

Co-authored-by: Antonio <[email protected]>
(cherry picked from commit 890958e)
  • Loading branch information
umbopepato committed Jul 16, 2024
1 parent 6e852ce commit 9c6d8ed
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 6 deletions.
34 changes: 31 additions & 3 deletions x-pack/plugins/cases/public/components/create/templates.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,17 @@
* 2.0.
*/

import type { EuiSelectOption } from '@elastic/eui';
import { EuiFormRow, EuiSelect } from '@elastic/eui';
import React, { useCallback, useState } from 'react';
import type { EuiSelectOption } from '@elastic/eui';
import {
EuiFlexItem,
EuiFormRow,
EuiSelect,
EuiFlexGroup,
useIsWithinMaxBreakpoint,
} from '@elastic/eui';
import { css } from '@emotion/react';
import { ExperimentalBadge } from '../experimental_badge/experimental_badge';
import type { CasesConfigurationUI, CasesConfigurationUITemplate } from '../../containers/types';
import { OptionalFieldLabel } from '../optional_field_label';
import { TEMPLATE_HELP_TEXT, TEMPLATE_LABEL } from './translations';
Expand All @@ -24,6 +32,7 @@ export const TemplateSelectorComponent: React.FC<Props> = ({
onTemplateChange,
}) => {
const [selectedTemplate, onSelectTemplate] = useState<string>();
const isSmallScreen = useIsWithinMaxBreakpoint('s');

const options: EuiSelectOption[] = templates.map((template) => ({
text: template.name,
Expand All @@ -47,7 +56,26 @@ export const TemplateSelectorComponent: React.FC<Props> = ({
id="createCaseTemplate"
fullWidth
label={TEMPLATE_LABEL}
labelAppend={OptionalFieldLabel}
labelAppend={
<EuiFlexGroup
alignItems="center"
gutterSize="s"
css={css`
flex-grow: 0;
`}
responsive={false}
>
<EuiFlexItem
grow={false}
css={css`
line-height: 0;
`}
>
<ExperimentalBadge compact={isSmallScreen} />
</EuiFlexItem>
<EuiFlexItem grow={false}>{OptionalFieldLabel}</EuiFlexItem>
</EuiFlexGroup>
}
helpText={TEMPLATE_HELP_TEXT}
>
<EuiSelect
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,18 @@ import { EXPERIMENTAL_LABEL, EXPERIMENTAL_DESC } from '../../common/translations
interface Props {
icon?: boolean;
size?: EuiBetaBadgeProps['size'];
compact?: boolean;
}

const ExperimentalBadgeComponent: React.FC<Props> = ({ icon = false, size = 's' }) => {
const ExperimentalBadgeComponent: React.FC<Props> = ({
icon = false,
size = 's',
compact = false,
}) => {
const props: EuiBetaBadgeProps = {
label: EXPERIMENTAL_LABEL,
label: compact ? null : EXPERIMENTAL_LABEL,
size,
...(icon && { iconType: 'beaker' }),
...((icon || compact) && { iconType: 'beaker' }),
tooltipContent: EXPERIMENTAL_DESC,
tooltipPosition: 'bottom' as const,
'data-test-subj': 'case-experimental-badge',
Expand Down

0 comments on commit 9c6d8ed

Please sign in to comment.