grafana/ui: Move panel-container styles to component (#49566)

* Chore: transfer styling to Explore.tsx and convert to Emotion

* feat: create a component and export it

* Chore: replace by new component

* Chore: replace by new component

* Feat: create a story

* Chore: clean up

* Chore: clean up

packages/grafana-ui/src/components/PanelContainer/PanelContainer.mdx

@@ -0,0 +1,8 @@
+import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
+import { PanelContainer } from './PanelContainer';
+
+<Meta title="MDX|PanelContainer" component={PanelContainer} />
+
+# PanelContainer
+
+The PanelContainer is used as a simple background for storing other components.

packages/grafana-ui/src/components/PanelContainer/PanelContainer.story.tsx

@@ -0,0 +1,26 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+import { PanelContainer } from './PanelContainer';
+import mdx from './PanelContainer.mdx';
+
+export default {
+  title: 'General/PanelContainer',
+  component: PanelContainer,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta;
+
+export const Basic: Story = () => {
+  return (
+    <PanelContainer>
+      <h1>Here could be your component</h1>
+    </PanelContainer>
+  );
+};

packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx

@@ -0,0 +1,24 @@
+import { css, cx } from '@emotion/css';
+import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
+
+type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export const PanelContainer = ({ children, className, ...props }: Props) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <div className={cx(styles, className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) =>
+  css`
+    background-color: ${theme.components.panel.background};
+    border: 1px solid ${theme.components.panel.borderColor};
+    border-radius: 3px;
+  `;

packages/grafana-ui/src/components/index.ts

@@ -270,3 +270,4 @@ export { GraphNGLegendEvent } from './GraphNG/types';
 export * from './PanelChrome/types';
 export { EmotionPerfTest } from './ThemeDemos/EmotionPerfTest';
 export { Label as BrowserLabel } from './BrowserLabel/Label';
+export { PanelContainer } from './PanelContainer/PanelContainer';

public/app/features/explore/Explore.tsx

@@ -8,7 +8,7 @@ import { Unsubscribable } from 'rxjs';
 
 import { AbsoluteTimeRange, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2 } from '@grafana/ui';
+import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2, PanelContainer } from '@grafana/ui';
 import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, FilterItem } from '@grafana/ui/src/components/Table/types';
 import appEvents from 'app/core/app_events';
 import { getNodeGraphDataFrames } from 'app/plugins/panel/nodeGraph/utils';
@@ -368,7 +368,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
         {datasourceMissing ? this.renderEmptyState(styles.exploreContainer) : null}
         {datasourceInstance && (
           <div className={cx(styles.exploreContainer)}>
-            <div className={cx('panel-container', styles.queryContainer)}>
+            <PanelContainer className={styles.queryContainer}>
               <QueryRows exploreId={exploreId} />
               <SecondaryActions
                 addQueryRowButtonDisabled={isLive}
@@ -382,7 +382,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
                 onClickQueryInspectorButton={this.toggleShowQueryInspector}
               />
               <ResponseErrorContainer exploreId={exploreId} />
-            </div>
+            </PanelContainer>
             <AutoSizer onResize={this.onResize} disableHeight>
               {({ width }) => {
                 if (width === 0) {

public/app/features/explore/NoData.tsx

@@ -1,16 +1,16 @@
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, PanelContainer } from '@grafana/ui';
 
 export const NoData = () => {
   const css = useStyles2(getStyles);
   return (
     <>
-      <div data-testid="explore-no-data" className={cx([css.wrapper, 'panel-container'])}>
-        <span className={cx([css.message])}>{'No data'}</span>
-      </div>
+      <PanelContainer data-testid="explore-no-data" className={css.wrapper}>
+        <span className={css.message}>{'No data'}</span>
+      </PanelContainer>
     </>
   );
 };