From 6d35fb72f453d08422c6e27b43236816d91ba0ee Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Fri, 4 Jun 2021 19:44:17 +0200
Subject: [PATCH] add css class for append, conditional flex group

---
 .../workspace_panel/chart_switch.scss         |  4 +
 .../workspace_panel/chart_switch.tsx          | 79 ++++++++++---------
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
index 33448c8de818c..3fafa8b37a42f 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
@@ -11,6 +11,10 @@
   color: $euiTextSubduedColor;
 }
 
+.lnsChartSwitch__append {
+  display: inline-flex;
+}
+
 // Targeting img as this won't target normal EuiIcon's only the custom svgs's
 img.lnsChartSwitch__chartIcon { // stylelint-disable-line selector-no-qualifying-type
   // The large icons aren't square so max out the width to fill the height
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
index 2ba0729b7679d..ba0e09bdd894c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@@ -296,46 +296,47 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
                     prepend: (
                       <EuiIcon className="lnsChartSwitch__chartIcon" type={v.icon || 'empty'} />
                     ),
-                    append: (
-                      <EuiFlexGroup
-                        gutterSize="xs"
-                        responsive={false}
-                        style={{ display: 'inline-flex' }}
-                      >
-                        {v.selection.dataLoss !== 'nothing' ? (
-                          <EuiFlexItem grow={false}>
-                            <EuiIconTip
-                              aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
-                                defaultMessage: 'Warning',
-                              })}
-                              type="alert"
-                              color="warning"
-                              content={i18n.translate(
-                                'xpack.lens.chartSwitch.dataLossDescription',
-                                {
-                                  defaultMessage:
-                                    'Selecting this chart type will result in a partial loss of currently applied configuration selections.',
-                                }
-                              )}
-                              iconProps={{
-                                className: 'lnsChartSwitch__chartIcon',
-                                'data-test-subj': `lnsChartSwitchPopoverAlert_${v.id}`,
-                              }}
-                            />
-                          </EuiFlexItem>
-                        ) : null}
-                        {v.showBetaBadge ? (
-                          <EuiFlexItem grow={false}>
-                            <EuiBadge color="hollow">
-                              <FormattedMessage
-                                id="xpack.lens.chartSwitch.betaLabel"
-                                defaultMessage="Beta"
+                    append:
+                      v.selection.dataLoss !== 'nothing' || v.showBetaBadge ? (
+                        <EuiFlexGroup
+                          gutterSize="xs"
+                          responsive={false}
+                          className="lnsChartSwitch__append"
+                        >
+                          {v.selection.dataLoss !== 'nothing' ? (
+                            <EuiFlexItem grow={false}>
+                              <EuiIconTip
+                                aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
+                                  defaultMessage: 'Warning',
+                                })}
+                                type="alert"
+                                color="warning"
+                                content={i18n.translate(
+                                  'xpack.lens.chartSwitch.dataLossDescription',
+                                  {
+                                    defaultMessage:
+                                      'Selecting this chart type will result in a partial loss of currently applied configuration selections.',
+                                  }
+                                )}
+                                iconProps={{
+                                  className: 'lnsChartSwitch__chartIcon',
+                                  'data-test-subj': `lnsChartSwitchPopoverAlert_${v.id}`,
+                                }}
                               />
-                            </EuiBadge>
-                          </EuiFlexItem>
-                        ) : null}
-                      </EuiFlexGroup>
-                    ),
+                            </EuiFlexItem>
+                          ) : null}
+                          {v.showBetaBadge ? (
+                            <EuiFlexItem grow={false}>
+                              <EuiBadge color="hollow">
+                                <FormattedMessage
+                                  id="xpack.lens.chartSwitch.betaLabel"
+                                  defaultMessage="Beta"
+                                />
+                              </EuiBadge>
+                            </EuiFlexItem>
+                          ) : null}
+                        </EuiFlexGroup>
+                      ) : null,
                     // Apparently checked: null is not valid for TS
                     ...(subVisualizationId === v.id && { checked: 'on' }),
                   })