[Security Solution] Expandable flyout - update risk classification ui…

… in entities overview (elastic#165022)

## Summary

This PR updates the right section of Expandable flyout -> Overview tab
-> Insights -> Entities overview

- In cases when risk classification is not available, an empty tag is
shown instead of `Unknown` as previously presented
- Added back tech preview tooltip icon to stay consistent with tech
preview badge in the old flyout

![image](https://github.com/elastic/kibana/assets/18648970/a18b02d7-42ac-46fc-b58e-39fb94bb3c50)

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit e574281)

x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx

@@ -96,7 +96,7 @@ describe('<HostEntityContent />', () => {
         </TestProviders>
       );
       expect(getByTestId(ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID)).toHaveTextContent('—');
-      expect(getByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Unknown');
+      expect(getByTestId(ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('—');
     });
   });
 

x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx

@@ -13,6 +13,7 @@ import {
   EuiIcon,
   useEuiTheme,
   useEuiFontSize,
+  EuiIconTip,
 } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { getOr } from 'lodash/fp';
@@ -23,11 +24,8 @@ import {
   FirstLastSeen,
   FirstLastSeenType,
 } from '../../../common/components/first_last_seen/first_last_seen';
-import {
-  buildHostNamesFilter,
-  RiskScoreEntity,
-  RiskSeverity,
-} from '../../../../common/search_strategy';
+import { buildHostNamesFilter, RiskScoreEntity } from '../../../../common/search_strategy';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
 import { DefaultFieldRenderer } from '../../../timelines/components/field_renderers/field_renderers';
 import { DescriptionListStyled } from '../../../common/components/page';
 import { OverviewDescriptionList } from '../../../common/components/overview_description_list';
@@ -44,7 +42,9 @@ import {
   ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID,
   ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID,
   ENTITIES_HOST_OVERVIEW_LINK_TEST_ID,
+  TECHNICAL_PREVIEW_ICON_TEST_ID,
 } from './test_ids';
+import { TECHNICAL_PREVIEW_TITLE, TECHNICAL_PREVIEW_MESSAGE } from './translations';
 import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
 
 const HOST_ICON = 'storage';
@@ -146,13 +146,28 @@ export const HostEntityOverview: React.FC<HostEntityOverviewProps> = ({ hostName
     const hostRiskData = hostRisk && hostRisk.length > 0 ? hostRisk[0] : undefined;
     return [
       {
-        title: i18n.HOST_RISK_CLASSIFICATION,
+        title: (
+          <>
+            {i18n.HOST_RISK_CLASSIFICATION}
+            <EuiIconTip
+              title={TECHNICAL_PREVIEW_TITLE}
+              size="m"
+              type="iInCircle"
+              content={TECHNICAL_PREVIEW_MESSAGE}
+              position="bottom"
+              iconProps={{
+                className: 'eui-alignTop',
+              }}
+              data-test-subj={TECHNICAL_PREVIEW_ICON_TEST_ID}
+            />
+          </>
+        ),
         description: (
           <>
             {hostRiskData ? (
               <RiskScore severity={hostRiskData.host.risk.calculated_level} />
             ) : (
-              <RiskScore severity={RiskSeverity.unknown} />
+              getEmptyTagValue()
             )}
           </>
         ),

x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts

@@ -95,6 +95,8 @@ export const ENTITIES_HOST_OVERVIEW_LINK_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TES
 export const ENTITIES_HOST_OVERVIEW_OS_FAMILY_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TEST_ID}OsFamily`;
 export const ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TEST_ID}LastSeen`;
 export const ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID = `${ENTITIES_HOST_OVERVIEW_TEST_ID}RiskLevel`;
+export const TECHNICAL_PREVIEW_ICON_TEST_ID =
+  'securitySolutionDocumentDetailsFlyoutTechnicalPreviewIcon';
 
 /* Insights Threat Intelligence */
 

x-pack/plugins/security_solution/public/flyout/right/components/translations.ts

@@ -300,6 +300,11 @@ export const RESPONSE_EMPTY = i18n.translate('xpack.securitySolution.flyout.resp
   defaultMessage: 'There are no response actions defined for this event.',
 });
 
+export const TECHNICAL_PREVIEW_TITLE = i18n.translate(
+  'xpack.securitySolution.flyout.documentDetails.technicalPreviewTitle',
+  { defaultMessage: 'Technical preview' }
+);
+
 export const TECHNICAL_PREVIEW_MESSAGE = i18n.translate(
   'xpack.securitySolution.flyout.documentDetails.technicalPreviewMessage',
   {

x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx

@@ -96,7 +96,7 @@ describe('<UserEntityOverview />', () => {
         </TestProviders>
       );
       expect(getByTestId(ENTITIES_USER_OVERVIEW_DOMAIN_TEST_ID)).toHaveTextContent('—');
-      expect(getByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('Unknown');
+      expect(getByTestId(ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID)).toHaveTextContent('—');
     });
   });
 

x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx

@@ -13,6 +13,7 @@ import {
   EuiLink,
   useEuiTheme,
   useEuiFontSize,
+  EuiIconTip,
 } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { getOr } from 'lodash/fp';
@@ -25,11 +26,8 @@ import {
   FirstLastSeen,
   FirstLastSeenType,
 } from '../../../common/components/first_last_seen/first_last_seen';
-import {
-  buildUserNamesFilter,
-  RiskScoreEntity,
-  RiskSeverity,
-} from '../../../../common/search_strategy';
+import { buildUserNamesFilter, RiskScoreEntity } from '../../../../common/search_strategy';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
 import { DefaultFieldRenderer } from '../../../timelines/components/field_renderers/field_renderers';
 import { DescriptionListStyled } from '../../../common/components/page';
 import { OverviewDescriptionList } from '../../../common/components/overview_description_list';
@@ -44,7 +42,9 @@ import {
   ENTITIES_USER_OVERVIEW_LAST_SEEN_TEST_ID,
   ENTITIES_USER_OVERVIEW_RISK_LEVEL_TEST_ID,
   ENTITIES_USER_OVERVIEW_LINK_TEST_ID,
+  TECHNICAL_PREVIEW_ICON_TEST_ID,
 } from './test_ids';
+import { TECHNICAL_PREVIEW_TITLE, TECHNICAL_PREVIEW_MESSAGE } from './translations';
 import { useObservedUserDetails } from '../../../explore/users/containers/users/observed_details';
 
 const USER_ICON = 'user';
@@ -145,13 +145,28 @@ export const UserEntityOverview: React.FC<UserEntityOverviewProps> = ({ userName
 
     return [
       {
-        title: i18n.USER_RISK_CLASSIFICATION,
+        title: (
+          <>
+            {i18n.USER_RISK_CLASSIFICATION}
+            <EuiIconTip
+              title={TECHNICAL_PREVIEW_TITLE}
+              size="m"
+              type="iInCircle"
+              content={TECHNICAL_PREVIEW_MESSAGE}
+              position="bottom"
+              iconProps={{
+                className: 'eui-alignTop',
+              }}
+              data-test-subj={TECHNICAL_PREVIEW_ICON_TEST_ID}
+            />
+          </>
+        ),
         description: (
           <>
             {userRiskData ? (
               <RiskScore severity={userRiskData.user.risk.calculated_level} />
             ) : (
-              <RiskScore severity={RiskSeverity.unknown} />
+              getEmptyTagValue()
             )}
           </>
         ),