[Dataset quality] Introducing dataTestSubject to selectable (elastic#…

…194008) Relates to elastic/observability-dev#3873. This PR aims to enable filter type to be easily targeted from FullStory.
gbamparop · Sep 26, 2024 · 85e7ae9 · 85e7ae9
1 parent 1cd3740
commit 85e7ae9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/...ervability_solution/dataset_quality/public/components/dataset_quality/filters/filters.tsx b/...ervability_solution/dataset_quality/public/components/dataset_quality/filters/filters.tsx
@@ -89,6 +89,7 @@ export default function Filters() {
           onIntegrationsChange={onIntegrationsChange}
         />
         <Selector
+          dataTestSubj="datasetQualityFilterType"
           label={typesLabel}
           searchPlaceholder={typesSearchPlaceholder}
           noneMatchingMessage={typesNoneMatching}

diff --git a/...rvability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx b/...rvability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
@@ -15,6 +15,7 @@ const selectorLoading = i18n.translate('xpack.datasetQuality.selector.loading',
 });
 
 interface SelectorProps {
+  dataTestSubj?: string;
   isLoading?: boolean;
   options: Item[];
   loadingMessage?: string;
@@ -31,6 +32,7 @@ export interface Item {
 }
 
 export function Selector({
+  dataTestSubj = 'datasetQualitySelectable',
   isLoading,
   options,
   loadingMessage,
@@ -50,11 +52,15 @@ export function Selector({
     setIsPopoverOpen(false);
   };
 
-  const renderOption = (option: Item) => <EuiText size="s">{option.label}</EuiText>;
+  const renderOption = (option: Item) => (
+    <EuiText size="s" data-test-subj={`${dataTestSubj}Option-${option.label}`}>
+      {option.label}
+    </EuiText>
+  );
 
   const button = (
     <EuiFilterButton
-      data-test-subj="datasetQualitySelectableButton"
+      data-test-subj={`${dataTestSubj}Button`}
       iconType="arrowDown"
       badgeColor="success"
       onClick={onButtonClick}
@@ -75,7 +81,7 @@ export function Selector({
       panelPaddingSize="none"
     >
       <EuiSelectable
-        data-test-subj="datasetQualitySelectableOptions"
+        data-test-subj={`${dataTestSubj}Options`}
         searchable
         searchProps={{
           placeholder: searchPlaceholder,