♻️ Refactor to let trigger have its own test id

elastic · Apr 13, 2023 · 6b04133 · 6b04133
1 parent 0db73aa
commit 6b04133
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 48 deletions.
diff --git a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.tsx
@@ -45,15 +45,19 @@ export function LayerPanel({
   const extraIconLabelProps =
     samplingValue !== 1
       ? {
-          icon: <RandomSamplingIcon color={euiTheme.colors.disabledText} fill="currentColor" />,
-          iconValue: `${samplingValue * 100}%`,
-          iconTooltipValue: i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', {
-            defaultMessage: '{value}% sampling',
-            values: {
-              value: samplingValue * 100,
-            },
-          }),
-          'data-test-subj': 'lnsChangeIndexPatternSamplingInfo',
+          icon: {
+            component: (
+              <RandomSamplingIcon color={euiTheme.colors.disabledText} fill="currentColor" />
+            ),
+            value: `${samplingValue * 100}%`,
+            tooltipValue: i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', {
+              defaultMessage: '{value}% sampling',
+              values: {
+                value: samplingValue * 100,
+              },
+            }),
+            'data-test-subj': 'lnsChangeIndexPatternSamplingInfo',
+          },
         }
       : {};
 

diff --git a/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx b/x-pack/plugins/lens/public/shared_components/dataview_picker/trigger.tsx
@@ -12,10 +12,12 @@ import { ToolbarButton, ToolbarButtonProps } from './toolbar_button';
 
 interface TriggerLabelProps {
   label: string;
-  icon?: React.ReactElement;
-  iconValue?: string;
-  iconTooltipValue?: string;
-  'data-test-subj'?: string;
+  icon?: {
+    component: React.ReactElement;
+    value?: string;
+    tooltipValue?: string;
+    'data-test-subj': string;
+  };
 }
 
 export type ChangeIndexPatternTriggerProps = ToolbarButtonProps &
@@ -25,13 +27,7 @@ export type ChangeIndexPatternTriggerProps = ToolbarButtonProps &
     isDisabled?: boolean;
   };
 
-function TriggerLabel({
-  label,
-  icon,
-  iconValue,
-  iconTooltipValue,
-  'data-test-subj': dataTestSubj,
-}: TriggerLabelProps) {
+function TriggerLabel({ label, icon }: TriggerLabelProps) {
   const { euiTheme } = useEuiTheme();
   if (!icon) {
     return <>{label}</>;
@@ -49,7 +45,7 @@ function TriggerLabel({
       </EuiFlexItem>
       <EuiFlexItem
         grow={false}
-        data-test-subj={dataTestSubj}
+        data-test-subj={icon['data-test-subj']}
         css={css`
           display: block;
           *:hover &,
@@ -58,12 +54,12 @@ function TriggerLabel({
           }
         `}
       >
-        <EuiToolTip content={iconTooltipValue} position="top">
+        <EuiToolTip content={icon.tooltipValue} position="top">
           <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
-            <EuiFlexItem grow={false}>{icon}</EuiFlexItem>
-            {iconValue ? (
+            <EuiFlexItem grow={false}>{icon.component}</EuiFlexItem>
+            {icon.value ? (
               <EuiFlexItem grow={false}>
-                <EuiTextColor color={euiTheme.colors.disabledText}>{iconValue}</EuiTextColor>
+                <EuiTextColor color={euiTheme.colors.disabledText}>{icon.value}</EuiTextColor>
               </EuiFlexItem>
             ) : null}
           </EuiFlexGroup>
@@ -79,9 +75,6 @@ export function TriggerButton({
   togglePopover,
   isMissingCurrent,
   icon,
-  iconValue,
-  iconTooltipValue,
-  'data-test-subj': dataTestSubj,
   ...rest
 }: ChangeIndexPatternTriggerProps & {
   togglePopover: () => void;
@@ -102,13 +95,7 @@ export function TriggerButton({
       {...rest}
       textProps={{ style: { width: '100%' } }}
     >
-      <TriggerLabel
-        label={label}
-        icon={icon}
-        iconValue={iconValue}
-        iconTooltipValue={iconTooltipValue}
-        data-test-subj={dataTestSubj}
-      />
+      <TriggerLabel label={label} icon={icon} />
     </ToolbarButton>
   );
 }
diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx
@@ -90,19 +90,21 @@ function AnnotationLayerHeaderContent({
   const extraIconLabelProps = !layer.ignoreGlobalFilters
     ? {}
     : {
-        icon: (
-          <EuiIcon
-            type={'filterIgnore'}
-            color={euiTheme.colors.disabledText}
-            css={css`
-              margin-top: 15px;
-            `}
-          />
-        ),
-        iconTooltipValue: i18n.translate('xpack.lens.layerPanel.ignoreGlobalFilters', {
-          defaultMessage: 'Ignore global filters',
-        }),
-        'data-test-subj': 'lnsChangeIndexPatternIgnoringFilters',
+        icon: {
+          component: (
+            <EuiIcon
+              type={'filterIgnore'}
+              color={euiTheme.colors.disabledText}
+              css={css`
+                margin-top: 15px;
+              `}
+            />
+          ),
+          tooltipValue: i18n.translate('xpack.lens.layerPanel.ignoreGlobalFilters', {
+            defaultMessage: 'Ignore global filters',
+          }),
+          'data-test-subj': 'lnsChangeIndexPatternIgnoringFilters',
+        },
       };
   return (
     <ChangeIndexPattern