[UX] Show tab and message when Cloud Saves are not supported (#4280)

Author: arielj

public/locales/en/translation.json

@@ -827,6 +827,8 @@
         "open-config-file": "Open Config File",
         "reset-heroic": "Reset Heroic",
         "saves": {
+            "gog_linux_native_warning": "Linux native games do not support GOG's Cloud Saves feature. Use the Windows version instead.",
+            "not_supported": "This game does not support Cloud Saves.",
             "warning": "Cloud Saves feature is in Beta, please backup your saves before syncing (in case something goes wrong)"
         },
         "systemInformation": {

src/frontend/screens/Settings/sections/GamesSettings/index.tsx

@@ -78,8 +78,8 @@ export default function GamesSettings() {
   const isWin = platform === 'win32'
   const isMac = platform === 'darwin'
   const isCrossover = wineVersion?.type === 'crossover'
-  const hasCloudSaves =
-    gameInfo?.cloud_save_enabled && gameInfo.install.platform !== 'linux'
+  const showCloudSavesTab =
+    gameInfo?.runner === 'gog' || gameInfo?.runner === 'legendary'
   const isBrowserGame = gameInfo?.install.platform === 'Browser'
   const isSideloaded = gameInfo?.runner === 'sideload'
 
@@ -157,7 +157,7 @@ export default function GamesSettings() {
           value="advanced"
         />
 
-        {hasCloudSaves && (
+        {showCloudSavesTab && (
           <Tab
             label={t('settings.navbar.sync', 'Cloud Saves Sync')}
             value="saves"

src/frontend/screens/Settings/sections/SyncSaves/gog.tsx

@@ -21,14 +21,18 @@ interface Props {
   autoSyncSaves: boolean
   setAutoSyncSaves: (value: boolean) => void
   syncCommands: { name: string; value: string }[]
+  featureSupported: boolean
+  isLinuxNative: boolean
 }
 
 export default function GOGSyncSaves({
   gogSaves,
   setGogSaves,
   autoSyncSaves,
   setAutoSyncSaves,
-  syncCommands
+  syncCommands,
+  featureSupported,
+  isLinuxNative
 }: Props) {
   const [isLoading, setIsLoading] = useState(true)
   const [isSyncing, setIsSyncing] = useState(false)
@@ -67,7 +71,7 @@ export default function GOGSyncSaves({
       setIsSyncing(false)
       setIsLoading(false)
     }
-    getLocations()
+    if (featureSupported && !isLinuxNative) getLocations()
   }, [retry])
 
   const handleRetry = () => {
@@ -88,6 +92,24 @@ export default function GOGSyncSaves({
     setIsSyncing(false)
   }
 
+  if (isLinuxNative || !featureSupported) {
+    return (
+      <div style={{ color: 'red' }}>
+        {isLinuxNative &&
+          t(
+            'settings.saves.gog_linux_native_warning',
+            "Linux native games do not support GOG's Cloud Saves feature. Use the Windows version instead."
+          )}
+        <br />
+        {!featureSupported &&
+          t(
+            'settings.saves.not_supported',
+            'Cloud Saves are not supported by this game.'
+          )}
+      </div>
+    )
+  }
+
   return (
     <>
       {manuallyOutputShow && (

src/frontend/screens/Settings/sections/SyncSaves/index.tsx

@@ -9,7 +9,7 @@ import LegendarySyncSaves from './legendary'
 
 const SyncSaves = () => {
   const { t } = useTranslation()
-  const { runner } = useContext(SettingsContext)
+  const { runner, gameInfo } = useContext(SettingsContext)
   const { platform } = useContext(ContextProvider)
   const isWin = platform === 'win32'
 
@@ -32,6 +32,7 @@ const SyncSaves = () => {
   if (runner === 'legendary') {
     return (
       <LegendarySyncSaves
+        featureSupported={!!gameInfo?.cloud_save_enabled}
         savesPath={savesPath}
         setSavesPath={setSavesPath}
         autoSyncSaves={autoSyncSaves}
@@ -46,6 +47,8 @@ const SyncSaves = () => {
   if (runner === 'gog') {
     return (
       <GOGSyncSaves
+        featureSupported={!!gameInfo?.cloud_save_enabled}
+        isLinuxNative={gameInfo?.install.platform === 'linux'}
         gogSaves={gogSavesLocations}
         setGogSaves={setGogSavesLocations}
         autoSyncSaves={autoSyncSaves}

src/frontend/screens/Settings/sections/SyncSaves/legendary.tsx

@@ -23,6 +23,7 @@ interface Props {
   setSavesPath: (value: string) => void
   winePrefix?: string
   syncCommands: { name: string; value: string }[]
+  featureSupported: boolean
 }
 
 export default function LegendarySyncSaves({
@@ -32,7 +33,8 @@ export default function LegendarySyncSaves({
   setAutoSyncSaves,
   isProton,
   winePrefix,
-  syncCommands
+  syncCommands,
+  featureSupported
 }: Props) {
   const [isSyncing, setIsSyncing] = useState(false)
   const [isLoading, setLoading] = useState(false)
@@ -60,7 +62,7 @@ export default function LegendarySyncSaves({
       setLoading(false)
       setRetry(false)
     }
-    setDefaultSaveFolder()
+    if (featureSupported) setDefaultSaveFolder()
   }, [winePrefix, isProton, retry])
 
   async function handleSync() {
@@ -75,6 +77,17 @@ export default function LegendarySyncSaves({
     setIsSyncing(false)
   }
 
+  if (!featureSupported) {
+    return (
+      <div style={{ color: 'red' }}>
+        {t(
+          'settings.saves.not_supported',
+          'This game does not support Cloud Saves.'
+        )}
+      </div>
+    )
+  }
+
   return (
     <>
       {manuallyOutputShow && (