make sure stats are added horizontally and not vertically (#30106)

public/app/plugins/datasource/cloudwatch/components/Stats.test.tsx

@@ -8,12 +8,14 @@ describe('Stats', () => {
   it('should render component', () => {
     render(
       <Stats
+        data-testid="stats"
         values={['Average', 'Minimum']}
         variableOptionGroup={{ label: 'templateVar', value: 'templateVar' }}
         onChange={() => {}}
         stats={['Average', 'Maximum', 'Minimum', 'Sum', 'SampleCount'].map(toOption)}
       />
     );
-    expect(screen.getByTestId('stats')).toBeInTheDocument();
+    expect(screen.getByText('Average')).toBeInTheDocument();
+    expect(screen.getByText('Minimum')).toBeInTheDocument();
   });
 });

public/app/plugins/datasource/cloudwatch/components/Stats.tsx

@@ -14,7 +14,7 @@ const removeText = '-- remove stat --';
 const removeOption: SelectableValue<string> = { label: removeText, value: removeText };
 
 export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, variableOptionGroup }) => (
-  <div data-testid="stats">
+  <>
     {values &&
       values.map((value, index) => (
         <Segment
@@ -41,5 +41,5 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
       onChange={({ value }) => onChange([...values, value!])}
       options={[...stats.filter(({ value }) => !values.includes(value!)), variableOptionGroup]}
     />
-  </div>
+  </>
 );