[Security Solution] Change alerts page data view and add help text (elastic#231374)

## Summary

**Security changes**

Security users have been able to add run time fields to the security
default data view. While implementing the managed data view feature
elastic#223451, the conflict arise where
we want the default data view to be kibana managed, but we do not want
to take away user's ability to add run time fields.

As a result, it was decided to exclude security default data view as
`managed`, and the data view in alerts page is changed to security
default. With these changes, users can see run time fields created
before they upgrade to `9.2`, and they will be able to continue adding
run time fields.

<img width="488" height="306" alt="image"
src="https://github.com/user-attachments/assets/9026ef05-3adb-4b23-9abf-b5e12d6d95d9"
/>

**Discover / Data view picker changes**

Even though we can't have the default data view as `managed`, we want to
bring awareness of the security advanced setting to users. Currently,
indices in advanced settings always override user changes in editor
flyout. To minimize confusion, this PR added an optional prop
`getDataViewHelpText` in the data view picker component. This will allow
a help text to be shown when user is editing the security default data
view.

<img width="987" height="470" alt="image"
src="https://github.com/user-attachments/assets/f2cfb169-c0f6-4e32-8081-f186b010d0ee"
/>

### 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/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: christineweng

src/platform/plugins/shared/data_view_editor/public/components/data_view_editor.tsx

@@ -25,6 +25,7 @@ export const DataViewEditor = ({
   requireTimestampField = false,
   editData,
   allowAdHocDataView,
+  getDataViewHelpText,
 }: DataViewEditorPropsWithServices) => {
   const { Provider: KibanaReactContextProvider } =
     createKibanaReactContext<DataViewEditorContext>(services);
@@ -44,6 +45,7 @@ export const DataViewEditor = ({
           requireTimestampField={requireTimestampField}
           editData={editData}
           allowAdHocDataView={allowAdHocDataView}
+          getDataViewHelpText={getDataViewHelpText}
         />
       </EuiFlyout>
     </KibanaReactContextProvider>

src/platform/plugins/shared/data_view_editor/public/components/data_view_editor_flyout_content.tsx

@@ -7,7 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useEffect, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import React, { useEffect, useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
 import {
   EuiTitle,
@@ -70,6 +71,7 @@ export interface Props {
   showManagementLink?: boolean;
   allowAdHoc: boolean;
   dataViewEditorService: DataViewEditorService;
+  getDataViewHelpText?: (dataView: DataView) => ReactNode | string | undefined;
 }
 
 const editorTitle = i18n.translate('indexPatternEditor.title', {
@@ -87,6 +89,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
   editData,
   allowAdHoc,
   showManagementLink,
+  getDataViewHelpText,
   dataViewEditorService,
 }: Props) => {
   const styles = useMemoCss(componentStyles);
@@ -195,6 +198,10 @@ const IndexPatternEditorFlyoutContentComponent = ({
   }, [dataViewEditorService, type]);
 
   const getRollupIndices = (rollupCapsRes: RollupIndicesCapsResponse) => Object.keys(rollupCapsRes);
+  const titleHelpText = useMemo(
+    () => editData && getDataViewHelpText && getDataViewHelpText(editData),
+    [editData, getDataViewHelpText]
+  );
 
   const onTypeChange = useCallback(
     (newType: INDEX_PATTERN_TYPE) => {
@@ -298,6 +305,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
                   indexPatternValidationProvider={
                     dataViewEditorService.indexPatternValidationProvider
                   }
+                  titleHelpText={titleHelpText}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>

src/platform/plugins/shared/data_view_editor/public/components/data_view_flyout_content_container.tsx

@@ -25,6 +25,7 @@ const DataViewFlyoutContentContainer = ({
   editData,
   allowAdHocDataView,
   showManagementLink,
+  getDataViewHelpText,
 }: DataViewEditorProps) => {
   const {
     services: { dataViews, notifications, http },
@@ -100,6 +101,7 @@ const DataViewFlyoutContentContainer = ({
       showManagementLink={showManagementLink}
       allowAdHoc={allowAdHocDataView || false}
       dataViewEditorService={dataViewEditorService}
+      getDataViewHelpText={getDataViewHelpText}
     />
   );
 };

src/platform/plugins/shared/data_view_editor/public/components/form_fields/title_field.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 import React, { useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
@@ -30,6 +30,7 @@ interface TitleFieldProps {
     matchedIndices: MatchedIndicesSet;
     rollupIndex: string | null | undefined;
   }>;
+  titleHelpText?: ReactNode | string;
 }
 
 const rollupIndexPatternNoMatchError = {
@@ -114,11 +115,13 @@ interface GetTitleConfigArgs {
   isRollup: boolean;
   matchedIndices: MatchedItem[];
   rollupIndicesCapabilities: RollupIndicesCapsResponse;
+  titleHelpText?: ReactNode | string;
 }
 
 const getTitleConfig = ({
   isRollup,
   rollupIndicesCapabilities,
+  titleHelpText,
 }: GetTitleConfigArgs): FieldConfig<string> => {
   const titleFieldConfig = schema.title;
 
@@ -134,6 +137,7 @@ const getTitleConfig = ({
   return {
     ...titleFieldConfig!,
     validations,
+    helpText: titleHelpText,
   };
 };
 
@@ -142,6 +146,7 @@ export const TitleField = ({
   matchedIndices$,
   rollupIndicesCapabilities,
   indexPatternValidationProvider,
+  titleHelpText,
 }: TitleFieldProps) => {
   const [appendedWildcard, setAppendedWildcard] = useState<boolean>(false);
   const matchedIndices = useObservable(matchedIndices$, matchedIndiciesDefault).exactMatchedIndices;
@@ -152,8 +157,9 @@ export const TitleField = ({
         isRollup,
         matchedIndices,
         rollupIndicesCapabilities,
+        titleHelpText,
       }),
-    [isRollup, matchedIndices, rollupIndicesCapabilities]
+    [isRollup, matchedIndices, rollupIndicesCapabilities, titleHelpText]
   );
 
   return (

src/platform/plugins/shared/data_view_editor/public/open_editor.tsx

@@ -50,6 +50,7 @@ export const getEditorOpener =
       requireTimestampField = false,
       allowAdHocDataView = false,
       editData,
+      getDataViewHelpText,
     }: DataViewEditorProps): CloseEditor => {
       const closeEditor = () => {
         if (overlayRef) {
@@ -80,6 +81,7 @@ export const getEditorOpener =
               requireTimestampField={requireTimestampField}
               allowAdHocDataView={allowAdHocDataView}
               showManagementLink={Boolean(editData && editData.isPersisted())}
+              getDataViewHelpText={getDataViewHelpText}
             />
           </KibanaReactContextProvider>,
           core

src/platform/plugins/shared/data_view_editor/public/types.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import type {
   ApplicationStart,
   IUiSettingsClient,
@@ -71,6 +71,10 @@ export interface DataViewEditorProps {
    * if set to true a link to the management page is shown
    */
   showManagementLink?: boolean;
+  /**
+   * Optional callback to get help text based on the active data view
+   */
+  getDataViewHelpText?: (dataView: DataView) => ReactNode | string | undefined;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx

@@ -70,6 +70,7 @@ export function ChangeDataView({
   onEditDataView,
   onCreateDefaultAdHocDataView,
   onClosePopover,
+  getDataViewHelpText,
 }: DataViewPickerProps) {
   const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setPopoverIsOpen] = useState(false);
@@ -178,6 +179,7 @@ export function ChangeDataView({
                   onSave: (updatedDataView) => {
                     onEditDataView(updatedDataView);
                   },
+                  getDataViewHelpText,
                 });
               } else {
                 application.navigateToApp('management', {
@@ -272,6 +274,7 @@ export function ChangeDataView({
     onEditDataView,
     searchListInputId,
     selectableProps,
+    getDataViewHelpText,
   ]);
 
   return (

src/platform/plugins/shared/unified_search/public/dataview_picker/data_view_picker.tsx

@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { EuiButtonProps, EuiSelectableProps } from '@elastic/eui';
 import type { DataView, DataViewListItem, DataViewSpec } from '@kbn/data-views-plugin/public';
@@ -76,6 +77,10 @@ export interface DataViewPickerProps {
    * Optional callback when data view picker is closed
    */
   onClosePopover?: () => void;
+  /**
+   * Optional callback to get help text based on the active data view
+   */
+  getDataViewHelpText?: (dataView: DataView) => ReactNode | string | undefined;
 }
 
 export const DataViewPicker = ({
@@ -93,6 +98,7 @@ export const DataViewPicker = ({
   selectableProps,
   onCreateDefaultAdHocDataView,
   isDisabled,
+  getDataViewHelpText,
 }: DataViewPickerProps) => {
   return (
     <ChangeDataView
@@ -110,6 +116,7 @@ export const DataViewPicker = ({
       savedDataViews={savedDataViews}
       selectableProps={selectableProps}
       isDisabled={isDisabled}
+      getDataViewHelpText={getDataViewHelpText}
     />
   );
 };

x-pack/solutions/security/plugins/security_solution/public/data_view_manager/components/data_view_picker/index.tsx

@@ -8,8 +8,9 @@
 import { DataViewPicker as UnifiedDataViewPicker } from '@kbn/unified-search-plugin/public';
 import React, { useCallback, useRef, useMemo, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
 import { DataView } from '@kbn/data-views-plugin/public';
+import { EuiCode } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { EXPLORE_DATA_VIEW_PREFIX } from '../../../../common/constants';
 import type { SourcererUrlState } from '../../../sourcerer/store/model';
 import { useUpdateUrlParam } from '../../../common/utils/global_query_string';
@@ -21,7 +22,7 @@ import { useSelectDataView } from '../../hooks/use_select_data_view';
 import { DataViewManagerScopeName } from '../../constants';
 import { useManagedDataViews } from '../../hooks/use_managed_data_views';
 import { useSavedDataViews } from '../../hooks/use_saved_data_views';
-import { DEFAULT_SECURITY_DATA_VIEW, LOADING } from './translations';
+import { LOADING } from './translations';
 import { DATA_VIEW_PICKER_TEST_ID } from './constants';
 import { useDataView } from '../../hooks/use_data_view';
 import { browserFieldsManager } from '../../utils/security_browser_fields_manager';
@@ -137,6 +138,20 @@ export const DataViewPicker = memo(({ scope, onClosePopover, disabled }: DataVie
     [dataViewId, data.dataViews, scope, dataViewFieldEditor, handleChangeDataView]
   );
 
+  const getDataViewHelpText = useCallback(
+    (dv: DataView) =>
+      dv.id === defaultDataViewId ? (
+        <FormattedMessage
+          id="xpack.securitySolution.dataViewManager.getDataViewHelpText"
+          defaultMessage="Changes made here won't be saved permanently. To update the default Security indices, edit {code} in Advanced Settings."
+          values={{
+            code: <EuiCode>{'securitySolution:defaultIndex'}</EuiCode>,
+          }}
+        />
+      ) : undefined,
+    [defaultDataViewId]
+  );
+
   /**
    * Selects data view again. After changes are made to the data view, this results in cache invalidation and will force the reload everywhere.
    */
@@ -162,16 +177,10 @@ export const DataViewPicker = memo(({ scope, onClosePopover, disabled }: DataVie
       return { label: LOADING };
     }
 
-    if (dataView?.id === defaultDataViewId) {
-      return {
-        label: DEFAULT_SECURITY_DATA_VIEW,
-      };
-    }
-
     return {
       label: dataView?.name || dataView?.id || 'Data view',
     };
-  }, [dataView?.id, dataView?.name, defaultDataViewId, status]);
+  }, [dataView?.id, dataView?.name, status]);
 
   return (
     <div data-test-subj={DATA_VIEW_PICKER_TEST_ID}>
@@ -187,6 +196,7 @@ export const DataViewPicker = memo(({ scope, onClosePopover, disabled }: DataVie
         savedDataViews={savedDataViews}
         managedDataViews={managedDataViews}
         onClosePopover={onClosePopover}
+        getDataViewHelpText={getDataViewHelpText}
       />
     </div>
   );

x-pack/solutions/security/plugins/security_solution/public/data_view_manager/components/data_view_picker/translations.ts

@@ -14,13 +14,20 @@ export const LOADING = i18n.translate('xpack.securitySolution.dataViewManager.lo
 export const DEFAULT_SECURITY_DATA_VIEW = i18n.translate(
   'xpack.securitySolution.dataViewManager.defaultSecurityDataView',
   {
-    defaultMessage: 'Default security data view',
+    defaultMessage: 'Security solution default',
   }
 );
 
 export const DEFAULT_SECURITY_ALERT_DATA_VIEW = i18n.translate(
   'xpack.securitySolution.dataViewManager.defaultSecurityAlertDataView',
   {
-    defaultMessage: 'Security alert data view',
+    defaultMessage: 'Security solution alerts',
+  }
+);
+
+export const SECURITY_SOLUTION_EXPLORE_DATA_VIEW = i18n.translate(
+  'xpack.securitySolution.dataViewManager.securitySolutionExploreDataView',
+  {
+    defaultMessage: 'Security solution explore',
   }
 );