From 2eda3f86527fa9a4ddbd7e1316093c85c99f249b Mon Sep 17 00:00:00 2001
From: Suchit Sahoo <suchsah@amazon.com>
Date: Thu, 12 Dec 2024 22:31:22 +0000
Subject: [PATCH] Add missing data-test-subj tags for data plugin

Signed-off-by: Suchit Sahoo <suchsah@amazon.com>
---
 .../language_service/lib/query_result.tsx     |  8 ++++-
 .../language_service/lib/recent_query.tsx     |  1 +
 .../ui/dataset_selector/configurator.tsx      |  2 +-
 .../ui/dataset_selector/dataset_explorer.tsx  | 28 ++++++++++++---
 .../ui/dataset_selector/dataset_selector.tsx  | 13 +++++--
 .../ui/dataset_selector/dataset_table.tsx     |  4 +--
 .../data/public/ui/filter_bar/filter_bar.tsx  | 12 +++++--
 .../ui/filter_bar/filter_editor/index.tsx     |  2 +-
 .../editors/default_editor/index.tsx          |  7 ++--
 .../public/ui/query_editor/editors/shared.tsx |  7 ++--
 .../ui/query_editor/language_selector.tsx     |  1 +
 .../public/ui/query_editor/query_editor.tsx   | 35 +++++++++++++++----
 .../ui/query_editor/query_editor_top_row.tsx  |  8 ++++-
 .../query_string_input/query_bar_top_row.tsx  |  3 +-
 .../query_string_input/query_string_input.tsx |  1 +
 .../saved_query_flyouts/saved_query_card.tsx  |  8 +++--
 .../saved_query_list_item.tsx                 |  2 +-
 .../saved_query_management_component.tsx      | 16 +++++++--
 .../data/public/ui/search_bar/search_bar.tsx  |  1 +
 .../shard_failure_description.tsx             |  1 +
 .../shard_failure_description_header.tsx      |  6 +++-
 .../ui/typeahead/suggestion_component.tsx     |  6 ++--
 22 files changed, 137 insertions(+), 35 deletions(-)

diff --git a/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx b/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx
index dff7faea36e3..f761c896e851 100644
--- a/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx
+++ b/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx
@@ -129,7 +129,12 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
           className="editor__footerItem"
           color="danger"
         >
-          <EuiText size="xs" color="danger" className="editor__footerItem">
+          <EuiText
+            size="xs"
+            color="danger"
+            className="editor__footerItem"
+            data-test-subj="editorfooterItem"
+          >
             {i18n.translate('data.query.languageService.queryResults.error', {
               defaultMessage: `Error`,
             })}
@@ -146,6 +151,7 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
       <div
         style={{ width: '250px', maxHeight: '250px', overflowY: 'auto' }}
         className="eui-textBreakWord"
+        data-test-subj="textBreakWord"
       >
         <EuiText size="s">
           <p>
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/recent_query.tsx b/src/plugins/data/public/query/query_string/language_service/lib/recent_query.tsx
index 0b58f0413966..49f8b0647226 100644
--- a/src/plugins/data/public/query/query_string/language_service/lib/recent_query.tsx
+++ b/src/plugins/data/public/query/query_string/language_service/lib/recent_query.tsx
@@ -96,6 +96,7 @@ export function RecentQueriesTable({
       rowProps={getRowProps}
       cellProps={getCellProps}
       className="recentQuery__table"
+      data-test-subj="recentQueryTable"
       tableLayout="fixed"
       compressed
     />
diff --git a/src/plugins/data/public/ui/dataset_selector/configurator.tsx b/src/plugins/data/public/ui/dataset_selector/configurator.tsx
index 4906bec2ef84..56ec77efe784 100644
--- a/src/plugins/data/public/ui/dataset_selector/configurator.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/configurator.tsx
@@ -187,7 +187,7 @@ export const Configurator = ({
         </EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
-        <EuiForm className="datasetConfigurator">
+        <EuiForm className="datasetConfigurator" data-test-subj="datasetConfigurator">
           <EuiFormRow
             label={i18n.translate(
               'data.explorer.datasetSelector.advancedSelector.configurator.datasetLabel',
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
index ec8e118157b1..7387bed086aa 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
@@ -169,7 +169,11 @@ export const DatasetExplorer = ({
                   isFinal ? ' datasetExplorer__column--leaf' : ''
                 }`}
               >
-                <EuiTitle size="xxs" className="datasetExplorer__columnTitle">
+                <EuiTitle
+                  size="xxs"
+                  className="datasetExplorer__columnTitle"
+                  data-test-subj="datasetExplorerColumnTitle"
+                >
                   <h3>{current.columnHeader}</h3>
                 </EuiTitle>
                 {current.multiSelect ? (
@@ -210,6 +214,7 @@ export const DatasetExplorer = ({
                     })}
                     height="full"
                     className="datasetExplorer__selectable"
+                    data-test-subj="datasetExplorerSelectable"
                   >
                     {(list, search) => (
                       <>
@@ -252,16 +257,29 @@ export const DatasetExplorer = ({
 };
 
 const EmptyColumn = () => (
-  <div className="datasetExplorer__column datasetExplorer__column--empty" />
+  <div
+    className="datasetExplorer__column datasetExplorer__column--empty"
+    data-test-subj="datasetExplorerEmptyColumn"
+  />
 );
 
 const LoadingEmptyColumn = ({ isLoading }: { isLoading: boolean }) =>
   isLoading ? (
-    <div className="datasetExplorer__column">
-      <EuiTitle size="xxs" className="datasetExplorer__columnTitle">
+    <div className="datasetExplorer__column" data-test-subj="datasetExplorerLoadingColumn">
+      <EuiTitle
+        size="xxs"
+        className="datasetExplorer__columnTitle"
+        data-test-subj="datasetExplorerLoadingColumnTitle"
+      >
         <h3>...</h3>
       </EuiTitle>
-      <EuiSelectable options={[]} singleSelection className="datasetExplorer__selectable" isLoading>
+      <EuiSelectable
+        options={[]}
+        singleSelection
+        className="datasetExplorer__selectable"
+        isLoading
+        data-test-subj="datasetExplorerSelectable"
+      >
         {(list) => <>{list}</>}
       </EuiSelectable>
     </div>
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
index a88aea528e7e..02a65dbe3897 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -221,7 +221,11 @@ export const DatasetSelector = ({
             iconSide="right"
             onClick={togglePopover}
           >
-            <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
+            <EuiIcon
+              type={datasetIcon}
+              className="datasetSelector__icon"
+              data-test-subj="datasetSelectorIcon"
+            />
             {datasetTitle}
           </RootComponent>
         </EuiToolTip>
@@ -234,6 +238,7 @@ export const DatasetSelector = ({
     >
       <EuiSelectable
         className="datasetSelector__selectable"
+        data-test-subj="datasetSelectorSelectable"
         options={options}
         singleSelection="always"
         searchable={true}
@@ -252,7 +257,11 @@ export const DatasetSelector = ({
           </>
         )}
       </EuiSelectable>
-      <EuiPopoverFooter paddingSize="none" className="datasetSelector__footer">
+      <EuiPopoverFooter
+        paddingSize="none"
+        className="datasetSelector__footer"
+        data-test-subj="datasetSelectorFooter"
+      >
         <EuiButton
           className="datasetSelector__advancedButton"
           data-test-subj="datasetSelectorAdvancedButton"
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_table.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_table.tsx
index 36cea7ddf741..9735951205f2 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_table.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_table.tsx
@@ -76,7 +76,7 @@ export const DatasetTable: React.FC<DatasetTableProps> = (props) => {
   };
 
   return (
-    <div className="datasetTable">
+    <div className="datasetTable" data-test-subj="datasetTable">
       <EuiFieldSearch
         fullWidth
         inputRef={(node) => (searchRef.current = node)}
@@ -93,7 +93,7 @@ export const DatasetTable: React.FC<DatasetTableProps> = (props) => {
       />
 
       {paginationToken && (
-        <div className="datasetTable__loadMore">
+        <div className="datasetTable__loadMore" data-test-subj="datasetTableLoadMore">
           <EuiLink
             onClick={() => onTableChange({ paginationToken, search: searchRef.current?.value })}
           >
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
index 26fb97606001..a1004758858e 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -190,10 +190,15 @@ function FilterBarUI(props: Props) {
       gutterSize="none"
       alignItems="flexStart"
       responsive={false}
+      data-test-subj="globalFilterGroup"
     >
       <EuiFlexItem className="globalFilterGroup__branch" grow={false}>
         {useNewHeader ? (
-          <EuiText size="s" className="globalFilterGroup__filterPrefix">
+          <EuiText
+            size="s"
+            className="globalFilterGroup__filterPrefix"
+            data-test-subj="globalFilterGroupFilterPrefix"
+          >
             {filterBarPrefixText}:
           </EuiText>
         ) : (
@@ -205,7 +210,10 @@ function FilterBarUI(props: Props) {
           />
         )}
       </EuiFlexItem>
-      <EuiFlexItem className="globalFilterGroup__filterFlexItem">
+      <EuiFlexItem
+        className="globalFilterGroup__filterFlexItem"
+        data-test-subj="globalFilterGroupFilterFlexItem"
+      >
         <EuiFlexGroup
           className={classes}
           wrap={true}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
index c083b3be38c2..d126c6b4a70f 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
@@ -140,7 +140,7 @@ class FilterEditorUI extends Component<Props, State> {
           </EuiFlexGroup>
         </EuiPopoverTitle>
 
-        <div className="globalFilterItem__editorForm">
+        <div className="globalFilterItem__editorForm" data-test-subj="globalFilterItemEditor">
           <EuiForm>
             {this.renderIndexPatternInput()}
 
diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
index 1eaf373f2c8e..55b19894d41e 100644
--- a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
+++ b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
@@ -33,7 +33,7 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
 }) => {
   return (
     <div className="defaultEditor" data-test-subj="osdQueryEditor__multiLine">
-      <div ref={headerRef} className="defaultEditor__header" />
+      <div ref={headerRef} className="defaultEditor__header" data-test-subj="defaultEditorHeader" />
       <CodeEditor
         height={100}
         languageId={languageId}
@@ -69,19 +69,21 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
         }}
         triggerSuggestOnFocus={true}
       />
-      <div className="defaultEditor__footer">
+      <div className="defaultEditor__footer" data-test-subj="defaultEditorFooter">
         {footerItems && (
           <EuiFlexGroup
             direction="row"
             alignItems="center"
             gutterSize="none"
             className="defaultEditor__footerRow"
+            data-test-subj="defaultEditorFooterRow"
           >
             {footerItems.start?.map((item, idx) => (
               <EuiFlexItem
                 key={`defaultEditor__footerItem-start-${idx}`}
                 grow={false}
                 className="defaultEditor__footerItem"
+                data-test-subj="defaultEditorFooterStartItem"
               >
                 {item}
               </EuiFlexItem>
@@ -92,6 +94,7 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
                 key={`defaultEditor__footerItem-end-${idx}`}
                 grow={false}
                 className="defaultEditor__footerItem"
+                data-test-subj="defaultEditorFooterEndItem"
               >
                 {item}
               </EuiFlexItem>
diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
index fb5df10c65c9..a7caa780f631 100644
--- a/src/plugins/data/public/ui/query_editor/editors/shared.tsx
+++ b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
@@ -96,7 +96,10 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
   );
 
   return (
-    <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap">
+    <div
+      className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap"
+      data-test-subj="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap"
+    >
       {prepend}
       <div
         className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper"
@@ -150,7 +153,7 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
           triggerSuggestOnFocus={true}
         />
         {editorIsFocused && (
-          <div className="queryEditor__footer">
+          <div className="queryEditor__footer" data-test-subj="queryEditorFooter">
             {footerItems && (
               <Fragment>
                 {footerItems.start?.map((item) => (
diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx
index 0177ede6f7fb..e1168849b9fa 100644
--- a/src/plugins/data/public/ui/query_editor/language_selector.tsx
+++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx
@@ -117,6 +117,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
         <EuiContextMenuItem
           key={language.label}
           className="languageSelector__menuItem"
+          data-test-subj="languageSelector"
           icon={language.label === selectedLanguage.label ? 'check' : 'empty'}
           onClick={() => handleLanguageChange(language.value)}
         >
diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
index 20650cca6acc..af9d67ad62ae 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -309,7 +309,12 @@ export const QueryEditorUI: React.FC<Props> = (props) => {
     },
     footerItems: {
       start: [
-        <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
+        <EuiText
+          size="xs"
+          color="subdued"
+          className="queryEditor__footerItem"
+          data-test-subj="queryEditorFooterLineCount"
+        >
           {`${lineCount} ${lineCount === 1 ? 'line' : 'lines'}`}
         </EuiText>,
         <EuiText
@@ -329,6 +334,7 @@ export const QueryEditorUI: React.FC<Props> = (props) => {
           size="xs"
           onClick={toggleRecentQueries}
           className="queryEditor__footerItem"
+          data-test-subj="queryEditorFooterToggleRecentQueriesButton"
         >
           <EuiText size="xs" color="subdued">
             {'Recent queries'}
@@ -362,10 +368,20 @@ export const QueryEditorUI: React.FC<Props> = (props) => {
     prepend: props.prepend,
     footerItems: {
       start: [
-        <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
+        <EuiText
+          size="xs"
+          color="subdued"
+          className="queryEditor__footerItem"
+          data-test-subj="queryEditorFooterLineCount"
+        >
           {`${lineCount ?? 1} ${lineCount === 1 || !lineCount ? 'line' : 'lines'}`}
         </EuiText>,
-        <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
+        <EuiText
+          size="xs"
+          color="subdued"
+          className="queryEditor__footerItem"
+          data-test-subj="queryEditorFooterTimestamp"
+        >
           {query.dataset?.timeFieldName || ''}
         </EuiText>,
         <QueryResult queryStatus={props.queryStatus!} />,
@@ -378,6 +394,7 @@ export const QueryEditorUI: React.FC<Props> = (props) => {
           size="xs"
           onClick={toggleRecentQueries}
           className="queryEditor__footerItem"
+          data-test-subj="queryEditorFooterToggleRecentQueriesButton"
           flush="both"
         >
           <EuiText size="xs" color="subdued">
@@ -409,16 +426,20 @@ export const QueryEditorUI: React.FC<Props> = (props) => {
         ref={bannerRef}
         className={classNames('osdQueryEditor__banner', props.bannerClassName)}
       />
-      <div className="osdQueryEditor__topBar">
-        <div className="osdQueryEditor__input">
+      <div className="osdQueryEditor__topBar" data-test-subj="osdQueryEditorTopBar">
+        <div className="osdQueryEditor__input" data-test-subj="osdQueryEditorInput">
           {isCollapsed
             ? languageEditor.TopBar.Collapsed()
             : languageEditor.TopBar.Expanded && languageEditor.TopBar.Expanded()}
         </div>
         {languageSelector}
-        <div className="osdQueryEditor__querycontrols">
+        <div className="osdQueryEditor__querycontrols" data-test-subj="osdQueryEditorQuerycontrols">
           <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-            <div ref={queryControlsContainer} className="osdQueryEditor__extensionQueryControls" />
+            <div
+              ref={queryControlsContainer}
+              className="osdQueryEditor__extensionQueryControls"
+              data-test-subj="osdQueryEditorExtensionQueryControls"
+            />
             {renderQueryControls(languageEditor.TopBar.Controls)}
             {!languageEditor.TopBar.Expanded && renderToggleIcon()}
             {props.savedQueryManagement}
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
index ad22750207ed..24d79a277e75 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -199,6 +199,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
           onSubmit={onInputSubmit}
           persistedLog={persistedLog}
           className="osdQueryEditor"
+          data-test-subj="osdQueryEditor"
           dataTestSubj={props.dataTestSubj}
           filterBar={props.filterBar}
           savedQueryManagement={props.savedQueryManagement}
@@ -357,6 +358,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
           dateFormat={uiSettings!.get('dateFormat')}
           isAutoRefreshOnly={props.showAutoRefreshOnly}
           className="osdQueryEditor__datePicker"
+          data-test-subj="osdQueryEditorDatePicker"
           compressed={true}
         />
       </EuiFlexItem>
@@ -369,7 +371,11 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
 
   const datePicker = (
     <EuiFlexGroup justifyContent="flexEnd" gutterSize="none" responsive={false}>
-      <EuiFlexItem grow={false} className="osdQueryEditor--updateButtonWrapper">
+      <EuiFlexItem
+        grow={false}
+        className="osdQueryEditor--updateButtonWrapper"
+        data-test-subj="osdQueryEditorUpdateButton"
+      >
         {renderUpdateButton()}
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
index 45e718fd52ba..63cd290273bb 100644
--- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -321,6 +321,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
           dateFormat={uiSettings!.get('dateFormat')}
           isAutoRefreshOnly={props.showAutoRefreshOnly}
           className="osdQueryBar__datePicker"
+          data-test-subj="osdQueryBarDatePicker"
           compressed={true}
         />
       </EuiFlexItem>
@@ -402,7 +403,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
       >
         {renderQueryInput()}
         {renderSharingMetaFields()}
-        <EuiFlexItem grow={false} className="osdQueryBar--hideEmpty">
+        <EuiFlexItem grow={false} className="osdQueryBar--hideEmpty" data-test-subj="osdQueryBar">
           {shouldUseDatePickerRef
             ? createPortal(renderUpdateButton(), props.datePickerRef!.current!)
             : renderUpdateButton()}
diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
index b94c38d0f15e..0bfb22db75ba 100644
--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -638,6 +638,7 @@ export default class QueryStringInputUI extends Component<Props, State> {
             <div
               role="search"
               className="euiFormControlLayout__childrenWrapper osdQueryBar__textareaWrap"
+              data-test-subj="queryBarInputContainer"
               ref={this.queryBarInputDivRefInstance}
             >
               <EuiCompressedTextArea
diff --git a/src/plugins/data/public/ui/saved_query_flyouts/saved_query_card.tsx b/src/plugins/data/public/ui/saved_query_flyouts/saved_query_card.tsx
index 7107a8906004..a6e157b1222c 100644
--- a/src/plugins/data/public/ui/saved_query_flyouts/saved_query_card.tsx
+++ b/src/plugins/data/public/ui/saved_query_flyouts/saved_query_card.tsx
@@ -133,7 +133,7 @@ export function SavedQueryCard({
       >
         <EuiFlexGroup gutterSize="s" alignItems="flexStart">
           <EuiFlexItem>
-            <div className="editor-container">
+            <div className="editor-container" data-test-subj="editorContainer">
               <MonacoEditor
                 height={editorHeight}
                 language={savedQuery.attributes.query.language} // Change to the appropriate language
@@ -148,7 +148,11 @@ export function SavedQueryCard({
               />
               {shouldTruncate && (
                 <div className={isTruncated ? 'read-more-wrap' : ''}>
-                  <EuiLink className="read-more-btn" onClick={toggleView}>
+                  <EuiLink
+                    className="read-more-btn"
+                    onClick={toggleView}
+                    data-test-subj="readMoreButton"
+                  >
                     {i18n.translate('data.saved_query.view_more_label', {
                       defaultMessage: '{viewMoreLabel}',
                       values: {
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx
index 8e015adf1eb5..ccc801ce60e1 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx
@@ -76,7 +76,7 @@ export const SavedQueryListItem = ({
   });
 
   const label = (
-    <span className="osdSavedQueryListItem__label">
+    <span className="osdSavedQueryListItem__label" data-test-subj="osdSavedQueryListItemLabel">
       <span className="osdSavedQueryListItem__labelText">{savedQuery.attributes.title}</span>{' '}
       {savedQuery.attributes.description && (
         <EuiIconTip
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
index 94898bfe57a2..dadc2854712e 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -274,13 +274,19 @@ export function SavedQueryManagementComponent({
       </EuiPopoverTitle>
       {savedQueries.length > 0 ? (
         <Fragment>
-          <EuiText size="s" color="subdued" className="osdSavedQueryManagement__text">
+          <EuiText
+            size="s"
+            color="subdued"
+            className="osdSavedQueryManagement__text"
+            data-test-subj="osdSavedQueryManagementText"
+          >
             <p>{savedQueryDescriptionText}</p>
           </EuiText>
           <div className="osdSavedQueryManagement__listWrapper">
             <EuiListGroup
               flush={true}
               className="osdSavedQueryManagement__list"
+              data-test-subj="osdSavedQueryManagementList"
               aria-labelledby={'savedQueryManagementPopoverTitle'}
             >
               {savedQueryRows()}
@@ -288,6 +294,7 @@ export function SavedQueryManagementComponent({
           </div>
           <EuiPagination
             className="osdSavedQueryManagement__pagination"
+            data-test-subj="osdSavedQueryManagementPagination"
             pageCount={Math.ceil(count / perPage)}
             activePage={activePage}
             onPageClick={goToPage}
@@ -295,7 +302,12 @@ export function SavedQueryManagementComponent({
         </Fragment>
       ) : (
         <Fragment>
-          <EuiText size="s" color="subdued" className="osdSavedQueryManagement__text">
+          <EuiText
+            size="s"
+            color="subdued"
+            className="osdSavedQueryManagement__text"
+            data-test-subj="osdSavedQueryManagementNoSavedQueryText"
+          >
             <p>{noSavedQueriesDescriptionText}</p>
           </EuiText>
           <EuiSpacer size="s" />
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
index 251a0dc86fa0..325f475d1f57 100644
--- a/src/plugins/data/public/ui/search_bar/search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -489,6 +489,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           >
             <FilterBar
               className="globalFilterGroup__filterBar"
+              data-test-subj="globalFilterGroupFilterBar"
               filters={this.props.filters!}
               onFiltersUpdated={this.props.onFiltersUpdated}
               indexPatterns={this.props.indexPatterns!}
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.tsx b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.tsx
index 2499a66e346c..97cf6dc5ecfc 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.tsx
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.tsx
@@ -79,6 +79,7 @@ export function ShardFailureDescription(props: ShardFailure) {
         type="column"
         compressed
         className="shardFailureModal__desc"
+        data-test-subj="shardFailureModalDescription"
         titleProps={{ className: 'shardFailureModal__descTitle' }}
         descriptionProps={{ className: 'shardFailureModal__descValue' }}
       />
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description_header.tsx b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description_header.tsx
index 461571975b7c..5dd6bb9b64bc 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description_header.tsx
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description_header.tsx
@@ -62,7 +62,11 @@ export function getFailureSummaryDetailsText(failure: ShardFailure): string {
 
 export function ShardFailureDescriptionHeader(props: ShardFailure) {
   const failureDetails = getFailurePropsForSummary(props).map((kv) => (
-    <span className="shardFailureModal__keyValueTitle" key={kv.key}>
+    <span
+      className="shardFailureModal__keyValueTitle"
+      key={kv.key}
+      data-test-subj="shardFailureModalKeyValueTitle"
+    >
       <EuiCode>{kv.key}</EuiCode> {kv.value}
     </span>
   ));
diff --git a/src/plugins/data/public/ui/typeahead/suggestion_component.tsx b/src/plugins/data/public/ui/typeahead/suggestion_component.tsx
index 67243df6415a..b3e1f75dc2b4 100644
--- a/src/plugins/data/public/ui/typeahead/suggestion_component.tsx
+++ b/src/plugins/data/public/ui/typeahead/suggestion_component.tsx
@@ -87,14 +87,16 @@ export function SuggestionComponent(props: Props) {
       }-${props.suggestion.text.replace(/\s/g, '-')}`}
     >
       <div className={'osdSuggestionItem osdSuggestionItem--' + props.suggestion.type}>
-        <div className="osdSuggestionItem__type">
+        <div className="osdSuggestionItem__type" data-test-subj="osdSuggestionType">
           <EuiIcon type={getEuiIconType(props.suggestion.type)} />
         </div>
         <div className="osdSuggestionItem__text" data-test-subj="autoCompleteSuggestionText">
           {props.suggestion.text}
         </div>
         {props.shouldDisplayDescription && (
-          <div className="osdSuggestionItem__description">{props.suggestion.description}</div>
+          <div className="osdSuggestionItem__description" data-test-subj="osdSuggestionDescription">
+            {props.suggestion.description}
+          </div>
         )}
       </div>
     </div>