[ResponseOps][Cases] Add tech preview badge to create case page templ…

…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)
elastic · Jul 16, 2024 · 9c6d8ed · 9c6d8ed
1 parent 6e852ce
commit 9c6d8ed
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/x-pack/plugins/cases/public/components/create/templates.tsx b/x-pack/plugins/cases/public/components/create/templates.tsx
@@ -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';
@@ -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,
@@ -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

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
@@ -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',