From a51f51f7a86e4bacba71f3ad80880546d59ddffa Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 1 Jun 2022 02:29:13 -0400
Subject: [PATCH] grafana/ui: Move panel-container styles to component (#49566)
 (#49915)

* 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

(cherry picked from commit 94375592c88632f0976d52203a89f90d10dc5c9f)

Co-authored-by: Laura <48948963+L-M-K-B@users.noreply.github.com>
---
 .../PanelContainer/PanelContainer.mdx         |  8 ++++++
 .../PanelContainer/PanelContainer.story.tsx   | 26 +++++++++++++++++++
 .../PanelContainer/PanelContainer.tsx         | 24 +++++++++++++++++
 packages/grafana-ui/src/components/index.ts   |  1 +
 public/app/features/explore/Explore.tsx       |  6 ++---
 public/app/features/explore/NoData.tsx        | 10 +++----
 6 files changed, 67 insertions(+), 8 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/PanelContainer/PanelContainer.mdx
 create mode 100644 packages/grafana-ui/src/components/PanelContainer/PanelContainer.story.tsx
 create mode 100644 packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx

diff --git a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.mdx b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.mdx
new file mode 100644
index 00000000000..29c6eeca90e
--- /dev/null
+++ b/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.
diff --git a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.story.tsx b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.story.tsx
new file mode 100644
index 00000000000..4ace28bd6b0
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
new file mode 100644
index 00000000000..d39725ec91a
--- /dev/null
+++ b/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;
+  `;
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 4c32405d854..6545f93dbee 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -269,3 +269,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';
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 0a25babfd79..3dbe10a8c19 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/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) {
diff --git a/public/app/features/explore/NoData.tsx b/public/app/features/explore/NoData.tsx
index 791505c6a57..a8c73dd2c2c 100644
--- a/public/app/features/explore/NoData.tsx
+++ b/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>
     </>
   );
 };