From 72b5f5fdff3498fc175d8e110d09d097bec4b5ad Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 14 Jun 2021 10:58:36 -0400
Subject: [PATCH] PanelEdit: Always have bottom border to make sections easier
 to see when expanded (#35565) (#35626)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 7599ab82177fd8763de742f72b441552754571c7)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../PanelEditor/OptionsPaneCategory.tsx       |  9 +-----
 .../PanelEditor/getFieldOverrideElements.tsx  | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index 3aeeff070bb..232b2d6f2ed 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -54,7 +54,6 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
     const boxStyles = cx(
       {
         [styles.box]: true,
-        [styles.boxExpanded]: isExpanded,
         [styles.boxNestedExpanded]: isNested && isExpanded,
       },
       className,
@@ -93,13 +92,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     box: css`
-      border-bottom: 1px solid ${theme.colors.border.weak};
-      &:last-child {
-        border-bottom: none;
-      }
-    `,
-    boxExpanded: css`
-      border-bottom: 0;
+      border-top: 1px solid ${theme.colors.border.weak};
     `,
     boxNestedExpanded: css`
       margin-bottom: ${theme.spacing(2)};
diff --git a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
index efa8f1399db..2c6e6a969ac 100644
--- a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
@@ -7,14 +7,16 @@ import {
   VariableSuggestionsScope,
   DynamicConfigValue,
   ConfigOverrideRule,
+  GrafanaTheme2,
 } from '@grafana/data';
-import { Container, fieldMatchersUI, ValuePicker } from '@grafana/ui';
+import { fieldMatchersUI, useStyles2, ValuePicker } from '@grafana/ui';
 import { OptionPaneRenderProps } from './types';
 import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
 import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
 import { DynamicConfigValueEditor } from './DynamicConfigValueEditor';
 import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
 import { OverrideCategoryTitle } from './OverrideCategoryTitle';
+import { css } from '@emotion/css';
 
 export function getFieldOverrideCategories(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor[] {
   const categories: OptionsPaneCategoryDescriptor[] = [];
@@ -208,7 +210,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
       id: 'add button',
       customRender: function renderAddButton() {
         return (
-          <Container padding="md" key="Add override">
+          <AddOverrideButtonContainer key="Add override">
             <ValuePicker
               icon="plus"
               label="Add field override"
@@ -222,22 +224,12 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
                 .map<SelectableValue<string>>((i) => ({ label: i.name, value: i.id, description: i.description }))}
               onChange={(value) => onOverrideAdd(value)}
             />
-          </Container>
+          </AddOverrideButtonContainer>
         );
       },
     })
   );
 
-  //   <FeatureInfoBox
-  //   title="Overrides"
-  //   url={getDocsLink(DocsId.FieldConfigOverrides)}
-  //   className={css`
-  //     margin: ${theme.spacing.md};
-  //   `}
-  // >
-  //   Field override rules give you fine-grained control over how your data is displayed.
-  // </FeatureInfoBox>
-
   return categories;
 }
 
@@ -257,3 +249,15 @@ function getOverrideProperties(registry: FieldConfigOptionsRegistry) {
       };
     });
 }
+
+function AddOverrideButtonContainer({ children }: { children: React.ReactNode }) {
+  const styles = useStyles2(getBorderTopStyles);
+  return <div className={styles}>{children}</div>;
+}
+
+function getBorderTopStyles(theme: GrafanaTheme2) {
+  return css({
+    borderTop: `1px solid ${theme.colors.border.weak}`,
+    padding: `${theme.spacing(2)}`,
+  });
+}