From 04f296cc734cd99707e9cb0060dbc9a4dee5e8c5 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Thu, 19 Dec 2024 16:59:26 -0500
Subject: [PATCH] fix(ui): show last.fm api-key missing in a `FormHelperText`

Signed-off-by: Deluan <deluan@navidrome.org>
---
 ui/src/personal/LastfmScrobbleToggle.jsx | 44 ++++++++++--------------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/ui/src/personal/LastfmScrobbleToggle.jsx b/ui/src/personal/LastfmScrobbleToggle.jsx
index a3c6793ea..67018d2bb 100644
--- a/ui/src/personal/LastfmScrobbleToggle.jsx
+++ b/ui/src/personal/LastfmScrobbleToggle.jsx
@@ -3,6 +3,7 @@ import { useNotify, useTranslate } from 'react-admin'
 import {
   FormControl,
   FormControlLabel,
+  FormHelperText,
   LinearProgress,
   Switch,
   Tooltip,
@@ -102,32 +103,20 @@ export const LastfmScrobbleToggle = (props) => {
 
   return (
     <FormControl>
-      {apiKey ? (
-        <FormControlLabel
-          control={
-            <Switch
-              id={'lastfm'}
-              color="primary"
-              checked={linked || checkingLink}
-              disabled={linked === null || checkingLink}
-              onChange={toggleScrobble}
-            />
-          }
-          label={
-            <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
-          }
-        />
-      ) : (
-        <Tooltip title={translate('menu.personal.options.lastfmNotConfigured')}>
-          <FormControlLabel
-            disabled={true}
-            control={<Switch id={'lastfm'} color="primary" />}
-            label={
-              <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
-            }
+      <FormControlLabel
+        control={
+          <Switch
+            id={'lastfm'}
+            color="primary"
+            checked={linked || checkingLink}
+            disabled={!apiKey || linked === null || checkingLink}
+            onChange={toggleScrobble}
           />
-        </Tooltip>
-      )}
+        }
+        label={
+          <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
+        }
+      />
       {checkingLink && (
         <Progress
           setLinked={setLinked}
@@ -135,6 +124,11 @@ export const LastfmScrobbleToggle = (props) => {
           apiKey={apiKey}
         />
       )}
+      {!apiKey && (
+        <FormHelperText id="scrobble-lastfm-disabled-helper-text">
+          {translate('menu.personal.options.lastfmNotConfigured')}
+        </FormHelperText>
+      )}
     </FormControl>
   )
 }