[SECURITY_SOLUTION][ENDPOINT] Add info about trusted apps to the page…

… subtitle + create flyout (#79558)

* Add info about trusted apps to the page subtitle + create flyout

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_flyout.tsx

@@ -13,6 +13,8 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import React, { memo, useCallback, useEffect, useState } from 'react';
@@ -29,6 +31,7 @@ import { useTrustedAppsSelector } from '../hooks';
 import { getApiCreateErrors, isCreatePending, wasCreateSuccessful } from '../../store/selectors';
 import { AppAction } from '../../../../../common/store/actions';
 import { useToasts } from '../../../../../common/lib/kibana';
+import { ABOUT_TRUSTED_APPS } from '../translations';
 
 type CreateTrustedAppFlyoutProps = Omit<EuiFlyoutProps, 'hideCloseButton'>;
 export const CreateTrustedAppFlyout = memo<CreateTrustedAppFlyoutProps>(
@@ -105,6 +108,10 @@ export const CreateTrustedAppFlyout = memo<CreateTrustedAppFlyoutProps>(
         </EuiFlyoutHeader>
 
         <EuiFlyoutBody>
+          <EuiText color="subdued" size="xs">
+            <p data-test-subj={getTestId('about')}>{ABOUT_TRUSTED_APPS}</p>
+            <EuiSpacer size="m" />
+          </EuiText>
           <CreateTrustedAppForm
             fullWidth
             onChange={handleFormOnChange}

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/translations.ts

@@ -11,6 +11,11 @@ import {
   WindowsConditionEntry,
 } from '../../../../../common/endpoint/types';
 
+export const ABOUT_TRUSTED_APPS = i18n.translate('xpack.securitySolution.trustedapps.aboutInfo', {
+  defaultMessage:
+    'Add a trusted application to improve performance or alleviate conflicts with other applications running on your hosts. Trusted applications will be applied to hosts running Endpoint Security.',
+});
+
 export const OS_TITLES: Readonly<{ [K in TrustedApp['os']]: string }> = {
   windows: i18n.translate('xpack.securitySolution.trustedapps.os.windows', {
     defaultMessage: 'Windows',

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx

@@ -17,6 +17,9 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
 }));
 
 describe('When on the Trusted Apps Page', () => {
+  const expectedAboutInfo =
+    'Add a trusted application to improve performance or alleviate conflicts with other applications running on your hosts. Trusted applications will be applied to hosts running Endpoint Security.';
+
   let history: AppContextTestRender['history'];
   let coreStart: AppContextTestRender['coreStart'];
   let waitForAction: MiddlewareActionSpyHelper['waitForAction'];
@@ -52,6 +55,11 @@ describe('When on the Trusted Apps Page', () => {
     expect(tableColumns).toEqual(['Name', 'OS', 'Date Created', 'Created By', 'Actions']);
   });
 
+  it('should display subtitle info about trusted apps', async () => {
+    const { getByTestId } = render();
+    expect(getByTestId('header-panel-subtitle').textContent).toEqual(expectedAboutInfo);
+  });
+
   it('should display a Add Trusted App button', async () => {
     const { getByTestId } = render();
     const addButton = await getByTestId('trustedAppsListAddButton');
@@ -188,6 +196,12 @@ describe('When on the Trusted Apps Page', () => {
 
         afterEach(() => resolveHttpPost());
 
+        it('should display info about Trusted Apps', async () => {
+          expect(renderResult.getByTestId('addTrustedAppFlyout-about').textContent).toEqual(
+            expectedAboutInfo
+          );
+        });
+
         it('should disable the Cancel button', async () => {
           expect(
             (renderResult.getByTestId('addTrustedAppFlyout-cancelButton') as HTMLButtonElement)

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx

@@ -18,6 +18,7 @@ import { useTrustedAppsSelector } from './hooks';
 import { getCurrentLocation } from '../store/selectors';
 import { TrustedAppsListPageRouteState } from '../../../../../common/endpoint/types';
 import { useNavigateToAppEventHandler } from '../../../../common/hooks/endpoint/use_navigate_to_app_event_handler';
+import { ABOUT_TRUSTED_APPS } from './translations';
 
 export const TrustedAppsPage = memo(() => {
   const history = useHistory();
@@ -71,12 +72,7 @@ export const TrustedAppsPage = memo(() => {
         />
       }
       headerBackComponent={backButton}
-      subtitle={
-        <FormattedMessage
-          id="xpack.securitySolution.trustedapps.list.pageSubTitle"
-          defaultMessage="View and configure trusted applications"
-        />
-      }
+      subtitle={ABOUT_TRUSTED_APPS}
       actions={addButton}
     >
       <TrustedAppsNotifications />