Drawer: Include divider and close button when passing a custom title element (#106896)

* make drawer title behaviour more consistent

* fix linting errors

packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.tsx

@@ -72,13 +72,13 @@ export function AlertingSettingsOverhaul<T extends AlertingConfig>({
             <InlineField
               labelWidth={30}
               label={t(
-                'configuration.alerting-settings-overhaul.label-allow-as-recording-rules-target',
+                'grafana-prometheus.configuration.alerting-settings-overhaul.label-allow-as-recording-rules-target',
                 'Allow as recording rules target'
               )}
               disabled={options.readOnly}
               tooltip={
                 <>
-                  <Trans i18nKey="configuration.alerting-settings-overhaul.tooltip-allow-as-recording-rules-target">
+                  <Trans i18nKey="grafana-prometheus.configuration.alerting-settings-overhaul.tooltip-allow-as-recording-rules-target">
                     Allow this data source to be selected as a target for writing recording rules.
                   </Trans>{' '}
                   {docsTip()}

packages/grafana-prometheus/src/locales/en-US/grafana-prometheus.json

@@ -110,11 +110,11 @@
     },
     "configuration": {
       "alerting-settings-overhaul": {
-        "label-manage-alerts-via-alerting-ui": "Manage alerts via Alerting UI",
         "label-allow-as-recording-rules-target": "Allow as recording rules target",
+        "label-manage-alerts-via-alerting-ui": "Manage alerts via Alerting UI",
         "title-alerting": "Alerting",
-        "tooltip-manage-alerts-via-alerting-ui": "Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager data source.",
-        "tooltip-allow-as-recording-rules-target": "Allow this data source to be selected as a target for writing recording rules."
+        "tooltip-allow-as-recording-rules-target": "Allow this data source to be selected as a target for writing recording rules.",
+        "tooltip-manage-alerts-via-alerting-ui": "Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager data source."
       },
       "config-editor": {
         "browser-access-mode-error": "Browser access mode in the Prometheus data source is no longer available. Switch to server access mode.",

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

@@ -143,17 +143,17 @@ export function Drawer({
             onMouseDown={onMouseDown}
             onTouchStart={onTouchStart}
           />
-          {typeof title === 'string' && (
-            <div className={cx(styles.header, Boolean(tabs) && styles.headerWithTabs)}>
-              <div className={styles.actions}>
-                <IconButton
-                  name="times"
-                  variant="secondary"
-                  onClick={onClose}
-                  data-testid={selectors.components.Drawer.General.close}
-                  tooltip={t(`grafana-ui.drawer.close`, 'Close')}
-                />
-              </div>
+          <div className={cx(styles.header, Boolean(tabs) && styles.headerWithTabs)}>
+            <div className={styles.actions}>
+              <IconButton
+                name="times"
+                variant="secondary"
+                onClick={onClose}
+                data-testid={selectors.components.Drawer.General.close}
+                tooltip={t(`grafana-ui.drawer.close`, 'Close')}
+              />
+            </div>
+            {typeof title === 'string' ? (
               <div className={styles.titleWrapper}>
                 <Text element="h3" {...titleProps}>
                   {title}
@@ -163,11 +163,12 @@ export function Drawer({
                     {subtitle}
                   </div>
                 )}
-                {tabs && <div className={styles.tabsWrapper}>{tabs}</div>}
               </div>
-            </div>
-          )}
-          {typeof title !== 'string' && title}
+            ) : (
+              title
+            )}
+            {tabs && <div className={styles.tabsWrapper}>{tabs}</div>}
+          </div>
           {!scrollableContent ? content : <ScrollContainer showScrollIndicators>{content}</ScrollContainer>}
         </div>
       </FocusScope>

public/app/core/components/AppChrome/News/NewsDrawer.tsx

@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
-import { IconButton, Drawer, useStyles2, Text } from '@grafana/ui';
+import { Drawer, useStyles2, Text } from '@grafana/ui';
 import { DEFAULT_FEED_URL } from 'app/plugins/panel/news/constants';
 import grotNewsSvg from 'img/grot-news.svg';
 
@@ -31,15 +30,6 @@ export function NewsContainer({ onClose }: NewsContainerProps) {
           >
             <img src={grotNewsSvg} alt="Grot reading news" />
           </a>
-          <div className={styles.actions}>
-            <IconButton
-              name="times"
-              variant="secondary"
-              onClick={onClose}
-              data-testid={selectors.components.Drawer.General.close}
-              tooltip={t(`news.drawer.close`, 'Close drawer')}
-            />
-          </div>
         </div>
       }
       onClose={onClose}
@@ -57,7 +47,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       alignItems: `center`,
       justifyContent: `center`,
       gap: theme.spacing(2),
-      borderBottom: `1px solid ${theme.colors.border.weak}`,
     }),
     grot: css({
       display: `flex`,
@@ -70,10 +59,5 @@ const getStyles = (theme: GrafanaTheme2) => {
         height: `75px`,
       },
     }),
-    actions: css({
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(2),
-    }),
   };
 };

public/locales/en-US/grafana.json

@@ -8505,9 +8505,6 @@
     "rss-button": "Latest from the blog"
   },
   "news": {
-    "drawer": {
-      "close": "Close drawer"
-    },
     "link-title": "Go to Grafana labs blog",
     "news-panel": {
       "body-error-loading-rss-feed": "Make sure that the feed URL is correct and that CORS is configured correctly on the server. See <2>News panel documentation.</2>",