Add missing data-test-subj tags for data plugin (opensearch-project#9051

) * Add missing data-test-subj tags for data plugin * Update Snapshots * Fix as per the comments --------- Signed-off-by: Suchit Sahoo <[email protected]> Co-authored-by: Anan Zhuang <[email protected]>
LDrago27 · Dec 16, 2024 · 16115ba · 16115ba
1 parent 442e11e
commit 16115ba
Show file tree

Hide file tree

Showing 25 changed files with 143 additions and 35 deletions.
diff --git a/...a/public/query/query_string/language_service/lib/__snapshots__/query_result.test.tsx.snap b/...a/public/query/query_string/language_service/lib/__snapshots__/query_result.test.tsx.snap
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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="osdQueryBarWrapper"
+    >
       {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
@@ -117,6 +117,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
         <EuiContextMenuItem
           key={language.label}
           className="languageSelector__menuItem"
+          data-test-subj="languageSelectorMenuItem"
           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
@@ -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
@@ -357,6 +357,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 +370,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
@@ -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
@@ -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