[Fleet] Add beta badge to host name format agent policy setting (#150855

) Add a beta badge to the host name format agent policy setting. As asked here #149059 (comment) I have changed ther deprecated badge to be rounded too as it looked really odd having two different types of badge next to each other. I have used accent color on the beta badge too to differentiate it from the deprecated badge. ### Before <img width="850" alt="Screenshot 2023-02-10 at 11 05 36" src="https://user-images.githubusercontent.com/3315046/218077728-f5ea600b-d0ae-4284-bc90-4e323646f44d.png"> ### After <img width="942" alt="Screenshot 2023-02-10 at 11 05 13" src="https://user-images.githubusercontent.com/3315046/218077762-f90b7a76-b5f7-483f-8118-751c345bbc67.png"> --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Feb 10, 2023 · a237aa4 · a237aa4
1 parent af7bb8d
commit a237aa4
Showing 1 changed file with 11 additions and 13 deletions.
diff --git a/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx b/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
@@ -19,17 +19,15 @@ import {
   EuiFieldText,
   EuiSuperSelect,
   EuiToolTip,
-  EuiBadge,
   EuiRadioGroup,
   EuiText,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiBetaBadge,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 
-import styled from 'styled-components';
-
 import { dataTypes } from '../../../../../../../common/constants';
 import type { NewAgentPolicy, AgentPolicy } from '../../../../types';
 import { useStartServices } from '../../../../hooks';
@@ -48,10 +46,6 @@ import {
   useFleetServerHostsOptions,
 } from './hooks';
 
-const LeftPaddedEUIBadge = styled(EuiBadge)`
-  margin-left: 5px;
-`;
-
 interface Props {
   agentPolicy: Partial<NewAgentPolicy | AgentPolicy>;
   updateAgentPolicy: (u: Partial<NewAgentPolicy | AgentPolicy>) => void;
@@ -476,18 +470,20 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
               id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutLabel"
               defaultMessage="Unenrollment timeout"
             />
+            &nbsp;
             <EuiToolTip
               content={i18n.translate('xpack.fleet.agentPolicyForm.unenrollmentTimeoutTooltip', {
                 defaultMessage:
                   'This setting is deprecated and will be removed in a future release. Consider using inactivity timeout instead',
               })}
             >
-              <LeftPaddedEUIBadge color="hollow">
-                <FormattedMessage
-                  id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutDeprecatedLabel"
-                  defaultMessage="Deprecated"
-                />
-              </LeftPaddedEUIBadge>
+              <EuiBetaBadge
+                label={i18n.translate(
+                  'xpack.fleet.agentPolicyForm.unenrollmentTimeoutDeprecatedLabel',
+                  { defaultMessage: 'Deprecated' }
+                )}
+                size="s"
+              />
             </EuiToolTip>
           </h4>
         }
@@ -530,6 +526,8 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
                 id="xpack.fleet.agentPolicyForm.hostnameFormatLabel"
                 defaultMessage="Host name format"
               />
+              &nbsp;
+              <EuiBetaBadge label="beta" size="s" color="accent" />
             </h4>
           }
           description={