[Rule Details] - Update rule details data view id text (#164494)

**Resolves: https://github.com/elastic/kibana/issues/164828**
**Related UX writing issue:
https://github.com/elastic/ux-writing/issues/46**

## Summary

In rule details page, when a rule has a data view selected, two labels
show up as "Data View". This appears to be a bug, as one of those labels
should be "Data view ID" and another should be "Data view index
pattern".

Thanks to @MadameSheema @nikitaindik for finding this. 

### Before 

![image](8ac8b6d4-1005-4c03-a71a-31216a1287c5)

### After
<img width="808" alt="Screenshot 2023-08-26 at 19 30 54"
src="b511bf92-0e90-4455-834c-36b8e75b2a58">


### 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)

---------

Co-authored-by: Nikita Indik <nikita.indik@elastic.co>

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_definition_section.tsx

@@ -42,6 +42,7 @@ import { DataSourceType } from '../../../../detections/pages/detection_engine/ru
 import { convertHistoryStartToSize } from '../../../../detections/pages/detection_engine/rules/helpers';
 import { MlJobLink } from '../../../../detections/components/rules/ml_job_link/ml_job_link';
 import { useSecurityJobs } from '../../../../common/components/ml_popover/hooks/use_security_jobs';
+import { useKibana } from '../../../../common/lib/kibana/kibana_react';
 import { BadgeList } from './badge_list';
 import * as i18n from './translations';
 
@@ -107,11 +108,42 @@ interface IndexProps {
 
 const Index = ({ index }: IndexProps) => <BadgeList badges={index} />;
 
-interface DataViewProps {
+interface DataViewIdProps {
   dataViewId: string;
 }
 
-const DataView = ({ dataViewId }: DataViewProps) => <EuiText size="s">{dataViewId}</EuiText>;
+const DataViewId = ({ dataViewId }: DataViewIdProps) => <EuiText size="s">{dataViewId}</EuiText>;
+
+interface DataViewIndexPatternProps {
+  dataViewId: string;
+}
+
+const DataViewIndexPattern = ({ dataViewId }: DataViewIndexPatternProps) => {
+  const { data } = useKibana().services;
+  const [indexPattern, setIndexPattern] = React.useState('');
+  const [hasError, setHasError] = React.useState(false);
+
+  React.useEffect(() => {
+    data.dataViews
+      .get(dataViewId)
+      .then((dataView) => {
+        setIndexPattern(dataView.getIndexPattern());
+      })
+      .catch(() => {
+        setHasError(true);
+      });
+  }, [data, dataViewId]);
+
+  if (hasError) {
+    return <EuiText size="s">{i18n.DATA_VIEW_INDEX_PATTERN_FETCH_ERROR_MESSAGE}</EuiText>;
+  }
+
+  if (!indexPattern) {
+    return <EuiLoadingSpinner size="m" />;
+  }
+
+  return <EuiText size="s">{indexPattern}</EuiText>;
+};
 
 interface ThresholdProps {
   threshold: ThresholdType;
@@ -299,10 +331,16 @@ const prepareDefinitionSectionListItems = (
   }
 
   if ('data_view_id' in rule && rule.data_view_id) {
-    definitionSectionListItems.push({
-      title: i18n.DATA_VIEW_FIELD_LABEL,
-      description: <DataView dataViewId={rule.data_view_id} />,
-    });
+    definitionSectionListItems.push(
+      {
+        title: i18n.DATA_VIEW_ID_FIELD_LABEL,
+        description: <DataViewId dataViewId={rule.data_view_id} />,
+      },
+      {
+        title: i18n.DATA_VIEW_INDEX_PATTERN_FIELD_LABEL,
+        description: <DataViewIndexPattern dataViewId={rule.data_view_id} />,
+      }
+    );
   }
 
   if (savedQuery) {

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/translations.ts

@@ -182,10 +182,24 @@ export const INDEX_FIELD_LABEL = i18n.translate(
   }
 );
 
-export const DATA_VIEW_FIELD_LABEL = i18n.translate(
-  'xpack.securitySolution.detectionEngine.ruleDetails.dataViewFieldLabel',
+export const DATA_VIEW_ID_FIELD_LABEL = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.dataViewIdFieldLabel',
   {
-    defaultMessage: 'Data View',
+    defaultMessage: 'Data view',
+  }
+);
+
+export const DATA_VIEW_INDEX_PATTERN_FIELD_LABEL = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.dataViewIndexPatternFieldLabel',
+  {
+    defaultMessage: 'Data view index pattern',
+  }
+);
+
+export const DATA_VIEW_INDEX_PATTERN_FETCH_ERROR_MESSAGE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.dataViewIndexPatternFetchErrorMessage',
+  {
+    defaultMessage: 'Could not load data view index pattern',
   }
 );
 

x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/schema.tsx

@@ -78,21 +78,11 @@ export const schema: FormSchema<DefineStepRule> = {
       },
     ],
   },
-  dataViewTitle: {
-    label: i18n.translate(
-      'xpack.securitySolution.detectionEngine.createRule.stepAboutRule.dataViewSelector',
-      {
-        defaultMessage: 'Data View',
-      }
-    ),
-    validations: [],
-  },
-  // TODO: populate the dataViewTitle in a better way
   dataViewId: {
     label: i18n.translate(
       'xpack.securitySolution.detectionEngine.createRule.stepAboutRule.dataViewSelector',
       {
-        defaultMessage: 'Data View',
+        defaultMessage: 'Data view',
       }
     ),
     fieldsToValidateOnChange: ['dataViewId'],
@@ -128,6 +118,15 @@ export const schema: FormSchema<DefineStepRule> = {
       },
     ],
   },
+  dataViewTitle: {
+    label: i18n.translate(
+      'xpack.securitySolution.detectionEngine.createRule.stepAboutRule.dataViewTitleSelector',
+      {
+        defaultMessage: 'Data view index pattern',
+      }
+    ),
+    validations: [],
+  },
   eqlOptions: {},
   queryBar: {
     validations: [

x-pack/plugins/translations/translations/fr-FR.json

@@ -31003,7 +31003,6 @@
     "xpack.securitySolution.detectionEngine.createRule.savedQueryFiltersLabel": "Filtres de requête enregistrés",
     "xpack.securitySolution.detectionEngine.createRule.savedQueryLabel": "Requête enregistrée",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.authorFieldEmptyError": "L'auteur doit être renseigné",
-    "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.dataViewSelector": "Vue de données",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.descriptionFieldRequiredError": "Une description est requise.",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.fiedIndexPatternsLabel": "Modèles d'indexation",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.fieldAssociatedToEndpointListLabel": "Ajouter des exceptions de point de terminaison existantes à la règle",

x-pack/plugins/translations/translations/ja-JP.json

@@ -31002,7 +31002,6 @@
     "xpack.securitySolution.detectionEngine.createRule.savedQueryFiltersLabel": "保存されたクエリフィルター",
     "xpack.securitySolution.detectionEngine.createRule.savedQueryLabel": "保存されたクエリ",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.authorFieldEmptyError": "作成者は空にする必要があります",
-    "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.dataViewSelector": "データビュー",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.descriptionFieldRequiredError": "説明が必要です。",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.fiedIndexPatternsLabel": "インデックスパターン",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.fieldAssociatedToEndpointListLabel": "既存のエンドポイント例外をルールに追加",

x-pack/plugins/translations/translations/zh-CN.json

@@ -30998,7 +30998,6 @@
     "xpack.securitySolution.detectionEngine.createRule.savedQueryFiltersLabel": "已保存查询筛选",
     "xpack.securitySolution.detectionEngine.createRule.savedQueryLabel": "已保存查询",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.authorFieldEmptyError": "作者不得为空",
-    "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.dataViewSelector": "数据视图",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.descriptionFieldRequiredError": "描述必填。",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.fiedIndexPatternsLabel": "索引模式",
     "xpack.securitySolution.detectionEngine.createRule.stepAboutRule.fieldAssociatedToEndpointListLabel": "将现有的终端例外添加到规则",

x-pack/test/security_solution_cypress/cypress/screens/rule_details.ts

@@ -29,7 +29,7 @@ export const SAVED_QUERY_DETAILS = /^Saved query$/;
 
 export const SAVED_QUERY_FILTERS_DETAILS = 'Saved query filters';
 
-export const DATA_VIEW_DETAILS = 'Data View';
+export const DATA_VIEW_DETAILS = 'Data view';
 
 export const DEFINITION_DETAILS =
   '[data-test-subj=definitionRule] [data-test-subj="listItemColumnStepRuleDescription"]';