[Lens] Hide disabled toolbar entries (#129994)

* hide toolbar entries

* remove unused stuff

* remove unnecessary test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: flash1293

x-pack/plugins/lens/public/pie_visualization/toolbar.tsx

@@ -183,7 +183,7 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
           </EuiFormRow>
         ) : null}
 
-        {numberOptions.length ? (
+        {numberOptions.length && layer.categoryDisplay !== 'hide' ? (
           <EuiFormRow
             label={i18n.translate('xpack.lens.pieChart.numberLabels', {
               defaultMessage: 'Values',
@@ -193,8 +193,7 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
           >
             <EuiSuperSelect
               compressed
-              disabled={layer.categoryDisplay === 'hide'}
-              valueOfSelected={layer.categoryDisplay === 'hide' ? 'hidden' : layer.numberDisplay}
+              valueOfSelected={layer.numberDisplay}
               options={numberOptions}
               onChange={onNumberDisplayChange}
             />

x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
 import { useDebouncedValue } from './debounced_value';
-import { TooltipWrapper } from './tooltip_wrapper';
 
 export const DEFAULT_FLOATING_COLUMNS = 1;
 
@@ -22,10 +21,6 @@ interface ColumnsNumberSettingProps {
    * Callback on horizontal alignment option change
    */
   onFloatingColumnsChange?: (value: number) => void;
-  /**
-   * Flag to disable the location settings
-   */
-  isDisabled: boolean;
   /**
    * Indicates if legend is located outside
    */
@@ -35,14 +30,15 @@ interface ColumnsNumberSettingProps {
 export const ColumnsNumberSetting = ({
   floatingColumns,
   onFloatingColumnsChange = () => {},
-  isDisabled,
   isLegendOutside,
 }: ColumnsNumberSettingProps) => {
   const { inputValue, handleInputChange } = useDebouncedValue({
     value: floatingColumns ?? DEFAULT_FLOATING_COLUMNS,
     onChange: onFloatingColumnsChange,
   });
 
+  if (isLegendOutside) return null;
+
   return (
     <EuiFormRow
       label={i18n.translate('xpack.lens.shared.legendInsideColumnsLabel', {
@@ -51,34 +47,17 @@ export const ColumnsNumberSetting = ({
       fullWidth
       display="columnCompressed"
     >
-      <TooltipWrapper
-        tooltipContent={
-          isDisabled
-            ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-                defaultMessage: 'Requires legend to be shown',
-              })
-            : i18n.translate('xpack.lens.shared.legendInsideTooltip', {
-                defaultMessage: 'Requires legend to be located inside visualization',
-              })
-        }
-        condition={isDisabled || isLegendOutside}
-        position="top"
-        delay="regular"
-        display="block"
-      >
-        <EuiFieldNumber
-          data-test-subj="lens-legend-location-columns-input"
-          value={inputValue}
-          min={1}
-          max={5}
-          compressed
-          disabled={isDisabled || isLegendOutside}
-          onChange={(e) => {
-            handleInputChange(Number(e.target.value));
-          }}
-          step={1}
-        />
-      </TooltipWrapper>
+      <EuiFieldNumber
+        data-test-subj="lens-legend-location-columns-input"
+        value={inputValue}
+        min={1}
+        max={5}
+        compressed
+        onChange={(e) => {
+          handleInputChange(Number(e.target.value));
+        }}
+        step={1}
+      />
     </EuiFormRow>
   );
 };

x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx

@@ -32,11 +32,9 @@ describe('Legend Location Settings', () => {
     expect(props.onPositionChange).toHaveBeenCalled();
   });
 
-  it('should disable the position group if isDisabled prop is true', () => {
+  it('should hide the position group if isDisabled prop is true', () => {
     const component = shallow(<LegendLocationSettings {...props} isDisabled />);
-    expect(
-      component.find('[data-test-subj="lens-legend-position-btn"]').prop('isDisabled')
-    ).toEqual(true);
+    expect(component.exists('[data-test-subj="lens-legend-position-btn"]')).toEqual(false);
   });
 
   it('should hide the position button group if location inside is given', () => {
@@ -104,18 +102,14 @@ describe('Legend Location Settings', () => {
     expect(newProps.onAlignmentChange).toHaveBeenCalled();
   });
 
-  it('should disable the components when is Disabled is true', () => {
+  it('should hide the components when is Disabled is true', () => {
     const newProps = {
       ...props,
       location: 'inside',
       isDisabled: true,
     } as LegendLocationSettingsProps;
     const component = shallow(<LegendLocationSettings {...newProps} />);
-    expect(
-      component.find('[data-test-subj="lens-legend-location-btn"]').prop('isDisabled')
-    ).toEqual(true);
-    expect(
-      component.find('[data-test-subj="lens-legend-inside-alignment-btn"]').prop('isDisabled')
-    ).toEqual(true);
+    expect(component.exists('[data-test-subj="lens-legend-location-btn"]')).toEqual(false);
+    expect(component.exists('[data-test-subj="lens-legend-inside-alignment-btn"]')).toEqual(false);
   });
 });

x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
 import { VerticalAlignment, HorizontalAlignment, Position } from '@elastic/charts';
-import { TooltipWrapper } from './tooltip_wrapper';
 
 export interface LegendLocationSettingsProps {
   /**
@@ -151,6 +150,7 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
   const alignment = `${verticalAlignment || VerticalAlignment.Top}_${
     horizontalAlignment || HorizontalAlignment.Right
   }`;
+  if (isDisabled) return null;
   return (
     <>
       {location && (
@@ -160,32 +160,22 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
             defaultMessage: 'Location',
           })}
         >
-          <TooltipWrapper
-            tooltipContent={i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-              defaultMessage: 'Requires legend to be shown',
+          <EuiButtonGroup
+            isFullWidth
+            legend={i18n.translate('xpack.lens.shared.legendLocationLabel', {
+              defaultMessage: 'Location',
             })}
-            condition={isDisabled}
-            position="top"
-            delay="regular"
-            display="block"
-          >
-            <EuiButtonGroup
-              isFullWidth
-              legend={i18n.translate('xpack.lens.shared.legendLocationLabel', {
-                defaultMessage: 'Location',
-              })}
-              data-test-subj="lens-legend-location-btn"
-              name="legendLocation"
-              buttonSize="compressed"
-              options={locationOptions}
-              isDisabled={isDisabled}
-              idSelected={locationOptions.find(({ value }) => value === location)!.id}
-              onChange={(optionId) => {
-                const newLocation = locationOptions.find(({ id }) => id === optionId)!.value;
-                onLocationChange(newLocation);
-              }}
-            />
-          </TooltipWrapper>
+            data-test-subj="lens-legend-location-btn"
+            name="legendLocation"
+            buttonSize="compressed"
+            options={locationOptions}
+            isDisabled={isDisabled}
+            idSelected={locationOptions.find(({ value }) => value === location)!.id}
+            onChange={(optionId) => {
+              const newLocation = locationOptions.find(({ id }) => id === optionId)!.value;
+              onLocationChange(newLocation);
+            }}
+          />
         </EuiFormRow>
       )}
       <EuiFormRow
@@ -196,62 +186,42 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
       >
         <>
           {(!location || location === 'outside') && (
-            <TooltipWrapper
-              tooltipContent={i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-                defaultMessage: 'Requires legend to be shown',
+            <EuiButtonGroup
+              legend={i18n.translate('xpack.lens.shared.legendAlignmentLabel', {
+                defaultMessage: 'Alignment',
               })}
-              condition={isDisabled}
-              position="top"
-              delay="regular"
-              display="block"
-            >
-              <EuiButtonGroup
-                legend={i18n.translate('xpack.lens.shared.legendAlignmentLabel', {
-                  defaultMessage: 'Alignment',
-                })}
-                isDisabled={isDisabled}
-                data-test-subj="lens-legend-position-btn"
-                name="legendPosition"
-                buttonSize="compressed"
-                options={toggleButtonsIcons}
-                idSelected={position || Position.Right}
-                onChange={onPositionChange}
-                isIconOnly
-              />
-            </TooltipWrapper>
+              isDisabled={isDisabled}
+              data-test-subj="lens-legend-position-btn"
+              name="legendPosition"
+              buttonSize="compressed"
+              options={toggleButtonsIcons}
+              idSelected={position || Position.Right}
+              onChange={onPositionChange}
+              isIconOnly
+            />
           )}
           {location === 'inside' && (
-            <TooltipWrapper
-              tooltipContent={i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-                defaultMessage: 'Requires legend to be shown',
+            <EuiButtonGroup
+              legend={i18n.translate('xpack.lens.shared.legendInsideLocationAlignmentLabel', {
+                defaultMessage: 'Alignment',
               })}
-              condition={isDisabled}
-              position="top"
-              delay="regular"
-              display="block"
-            >
-              <EuiButtonGroup
-                legend={i18n.translate('xpack.lens.shared.legendInsideLocationAlignmentLabel', {
-                  defaultMessage: 'Alignment',
-                })}
-                type="single"
-                data-test-subj="lens-legend-inside-alignment-btn"
-                name="legendInsideAlignment"
-                buttonSize="compressed"
-                isDisabled={isDisabled}
-                options={locationAlignmentButtonsIcons}
-                idSelected={
-                  locationAlignmentButtonsIcons.find(({ value }) => value === alignment)!.id
-                }
-                onChange={(optionId) => {
-                  const newAlignment = locationAlignmentButtonsIcons.find(
-                    ({ id }) => id === optionId
-                  )!.value;
-                  onAlignmentChange(newAlignment);
-                }}
-                isIconOnly
-              />
-            </TooltipWrapper>
+              type="single"
+              data-test-subj="lens-legend-inside-alignment-btn"
+              name="legendInsideAlignment"
+              buttonSize="compressed"
+              isDisabled={isDisabled}
+              options={locationAlignmentButtonsIcons}
+              idSelected={
+                locationAlignmentButtonsIcons.find(({ value }) => value === alignment)!.id
+              }
+              onChange={(optionId) => {
+                const newAlignment = locationAlignmentButtonsIcons.find(
+                  ({ id }) => id === optionId
+                )!.value;
+                onAlignmentChange(newAlignment);
+              }}
+              isIconOnly
+            />
           )}
         </>
       </EuiFormRow>

x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx

@@ -56,7 +56,7 @@ describe('Legend Settings', () => {
   });
 
   it('should have default the max lines input to 1 when no value is given', () => {
-    const component = shallow(<LegendSettingsPopover {...props} />);
+    const component = shallow(<LegendSettingsPopover {...props} shouldTruncate />);
     expect(component.find(MaxLinesInput).prop('value')).toEqual(1);
   });
 
@@ -74,9 +74,9 @@ describe('Legend Settings', () => {
     ).toEqual(false);
   });
 
-  it('should have disabled the max lines input when truncate is set to false', () => {
+  it('should hide the max lines input when truncate is set to false', () => {
     const component = shallow(<LegendSettingsPopover {...props} shouldTruncate={false} />);
-    expect(component.find(MaxLinesInput).prop('isDisabled')).toEqual(true);
+    expect(component.exists(MaxLinesInput)).toEqual(false);
   });
 
   it('should have called the onTruncateLegendChange function on truncate switch change', () => {
@@ -115,12 +115,10 @@ describe('Legend Settings', () => {
     expect(nestedProps.onNestedLegendChange).toHaveBeenCalled();
   });
 
-  it('should disable switch group on hide mode', () => {
+  it('should hide switch group on hide mode', () => {
     const component = shallow(
       <LegendSettingsPopover {...props} mode="hide" renderNestedLegendSwitch />
     );
-    expect(component.find('[data-test-subj="lens-legend-nested-switch"]').prop('disabled')).toEqual(
-      true
-    );
+    expect(component.exists('[data-test-subj="lens-legend-nested-switch"]')).toEqual(false);
   });
 });