[Lens] Extract legend settings content from the toolbar popover (elastic#237863)

## Summary

Extract the legend settings content from the toolbar popover.

## Issues

Closes elastic#238790

## Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: mariairiartef

x-pack/platform/plugins/shared/lens/public/shared_components/legend/legend_settings_popover.tsx

@@ -209,7 +209,27 @@ export function shouldDisplayTable(legendValues: LegendValue[]) {
   return legendValues.some((v) => v !== LegendValue.CurrentAndLastValue);
 }
 
-export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegendValue>({
+export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegendValue>(
+  props: LegendSettingsPopoverProps<LegendStats>
+) {
+  const { groupPosition = 'none' } = props;
+
+  return (
+    <ToolbarPopover
+      title={i18n.translate('xpack.lens.shared.legendLabel', {
+        defaultMessage: 'Legend',
+      })}
+      type="legend"
+      groupPosition={groupPosition}
+      buttonDataTestSubj="lnsLegendButton"
+      panelStyle={PANEL_STYLE}
+    >
+      <LegendSettings {...props} />
+    </ToolbarPopover>
+  );
+}
+
+function LegendSettings<LegendStats extends LegendValue = XYLegendValue>({
   allowedLegendStats = [],
   legendOptions,
   mode,
@@ -231,7 +251,6 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
   onNestedLegendChange = noop,
   legendStats = [],
   onLegendStatsChange = noop,
-  groupPosition = 'none',
   maxLines,
   onMaxLinesChange = noop,
   shouldTruncate,
@@ -254,15 +273,7 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
   const showsLegendTitleSetting = shouldDisplayTable(legendStats) && !!onLegendTitleChange;
 
   return (
-    <ToolbarPopover
-      title={i18n.translate('xpack.lens.shared.legendLabel', {
-        defaultMessage: 'Legend',
-      })}
-      type="legend"
-      groupPosition={groupPosition}
-      buttonDataTestSubj="lnsLegendButton"
-      panelStyle={PANEL_STYLE}
-    >
+    <>
       <EuiFormRow
         display="columnCompressed"
         label={i18n.translate('xpack.lens.shared.legendVisibilityLabel', {
@@ -434,6 +445,6 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
           />
         </EuiFormRow>
       )}
-    </ToolbarPopover>
+    </>
   );
 }