Emotion: Upgrades emotion from 10 to 11 and updates all import paths (#32541)

* Babel: Updates babel dependencies to latest version

* Emotion: Upgrade form 10 to 11

* Fixing tests

* Updated to use emotion/css instead in test

public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { FunctionComponent } from 'react';
 import { IconButton } from './IconButton';
 

public/app/plugins/datasource/elasticsearch/components/IconButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@grafana/ui';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import React, { FunctionComponent, ComponentProps, ButtonHTMLAttributes } from 'react';
 
 const SROnly = css`

public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
 import { Segment } from '@grafana/ui';
 import { describeMetric } from '../utils';

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx

@@ -1,5 +1,5 @@
 import { InlineField, Input, QueryField } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { FunctionComponent, useEffect } from 'react';
 import { AddRemove } from '../../../../AddRemove';
 import { useDispatch, useStatelessReducer } from '../../../../../hooks/useStatelessReducer';

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx

@@ -1,6 +1,6 @@
 import { MetricFindValue, SelectableValue } from '@grafana/data';
 import { InlineSegmentGroup, Segment, SegmentAsync, useTheme } from '@grafana/ui';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import React, { FunctionComponent } from 'react';
 import { useDatasource, useQuery } from '../ElasticsearchQueryContext';
 import { useDispatch } from '../../../hooks/useStatelessReducer';

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent, useEffect } from 'react';
 import { Input, InlineLabel } from '@grafana/ui';
 import { MetricAggregationAction } from '../../state/types';
 import { changeMetricAttribute } from '../../state/actions';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { AddRemove } from '../../../../AddRemove';
 import { useStatelessReducer, useDispatch } from '../../../../../hooks/useStatelessReducer';
 import { MetricPicker } from '../../../../MetricPicker';

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts

@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => ({
   color:

public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx

@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { noop } from 'lodash';
 import React, { FunctionComponent } from 'react';
 

public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx

@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { FunctionComponent, useState } from 'react';
 import { segmentStyles } from './styles';
 

public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const segmentStyles = css`
   min-width: 150px;

public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { VariableSuggestion } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui';

public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
 import { DataLinkConfig } from '../types';