From df0df68f30e75ac8a917430f16aa245f1453ad60 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 12 Mar 2025 11:42:07 +0000
Subject: [PATCH] Theme drawer tweaks (#102013)

tweaks for theme drawer
---
 .../SharedPreferences/SharedPreferences.tsx   |  2 +-
 .../ThemeSelector/ThemeSelectorDrawer.tsx     | 27 +++++++++++++++----
 public/locales/en-US/grafana.json             |  2 +-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index fcac1bdeefb..a7dcaf1e293 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -178,7 +178,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
             description={
               config.featureToggles.grafanaconThemes && config.feedbackLinksEnabled ? (
                 <Trans i18nKey="shared-preferences.fields.theme-description">
-                  Enjoying the limited edition themes? Tell us what you'd like to see{' '}
+                  Enjoying the experimental themes? Tell us what you'd like to see{' '}
                   <TextLink
                     variant="bodySmall"
                     external
diff --git a/public/app/core/components/ThemeSelector/ThemeSelectorDrawer.tsx b/public/app/core/components/ThemeSelector/ThemeSelectorDrawer.tsx
index bc3de6ce4d7..a633bdb3f53 100644
--- a/public/app/core/components/ThemeSelector/ThemeSelectorDrawer.tsx
+++ b/public/app/core/components/ThemeSelector/ThemeSelectorDrawer.tsx
@@ -1,7 +1,8 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme2, ThemeRegistryItem } from '@grafana/data';
-import { Drawer, RadioButtonDot, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
+import { FeatureState, GrafanaTheme2, ThemeRegistryItem } from '@grafana/data';
+import { config, reportInteraction } from '@grafana/runtime';
+import { Drawer, FeatureBadge, RadioButtonDot, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { changeTheme } from 'app/core/services/theme';
 
@@ -19,12 +20,16 @@ export function ThemeSelectorDrawer({ onClose }: Props) {
   const currentTheme = useTheme2();
 
   const onChange = (theme: ThemeRegistryItem) => {
+    reportInteraction('grafana_preferences_theme_changed', {
+      toTheme: theme.id,
+      preferenceType: 'user',
+    });
     changeTheme(theme.id, false);
   };
 
   const subTitle = (
     <Trans i18nKey="shared-preferences.fields.theme-description">
-      Enjoying the limited edition themes? Tell us what you'd like to see{' '}
+      Enjoying the experimental themes? Tell us what you'd like to see{' '}
       <TextLink
         variant="bodySmall"
         external
@@ -36,11 +41,17 @@ export function ThemeSelectorDrawer({ onClose }: Props) {
   );
 
   return (
-    <Drawer title={t('profile.change-theme', 'Change theme')} onClose={onClose} size="md" subtitle={subTitle}>
+    <Drawer
+      title={t('profile.change-theme', 'Change theme')}
+      onClose={onClose}
+      size="md"
+      subtitle={config.feedbackLinksEnabled ? subTitle : undefined}
+    >
       <div className={styles.grid} role="radiogroup">
         {themes.map((themeOption) => (
           <ThemeCard
             themeOption={themeOption}
+            isExperimental={themeOption.isExtra}
             key={themeOption.id}
             onSelect={() => onChange(themeOption)}
             isSelected={currentTheme.name === themeOption.name}
@@ -53,11 +64,12 @@ export function ThemeSelectorDrawer({ onClose }: Props) {
 
 interface ThemeCardProps {
   themeOption: ThemeRegistryItem;
+  isExperimental?: boolean;
   isSelected?: boolean;
   onSelect: () => void;
 }
 
-function ThemeCard({ themeOption, isSelected, onSelect }: ThemeCardProps) {
+function ThemeCard({ themeOption, isExperimental, isSelected, onSelect }: ThemeCardProps) {
   const theme = themeOption.build();
   const label = getTranslatedThemeName(themeOption);
   const styles = useStyles2(getStyles);
@@ -72,6 +84,7 @@ function ThemeCard({ themeOption, isSelected, onSelect }: ThemeCardProps) {
           onChange={onSelect}
           checked={isSelected}
         />
+        {isExperimental && <FeatureBadge featureState={FeatureState.experimental} />}
       </div>
       <ThemePreview theme={theme} />
     </div>
@@ -91,13 +104,17 @@ const getStyles = (theme: GrafanaTheme2) => {
       borderRadius: theme.shape.radius.default,
       display: 'flex',
       flexDirection: 'column',
+      overflow: 'hidden',
       cursor: 'pointer',
       '&:hover': {
         border: `1px solid ${theme.colors.border.medium}`,
       },
     }),
     header: css({
+      alignItems: 'center',
       borderBottom: `1px solid ${theme.colors.border.weak}`,
+      display: 'flex',
+      justifyContent: 'space-between',
       padding: theme.spacing(1),
       // The RadioButtonDot is not correctly implemented at the moment, missing cursor (And click ability for the label and input)
       '> label': {
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index a8bbffba1da..95e6fe9744d 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -3714,7 +3714,7 @@
       "home-dashboard-placeholder": "Default dashboard",
       "locale-label": "Language",
       "locale-placeholder": "Choose language",
-      "theme-description": "Enjoying the limited edition themes? Tell us what you'd like to see <2>here.</2>",
+      "theme-description": "Enjoying the experimental themes? Tell us what you'd like to see <2>here.</2>",
       "theme-label": "Interface theme",
       "week-start-label": "Week start"
     },