From 43c38e6da2f70978f16696618f40cb03d52de605 Mon Sep 17 00:00:00 2001 From: Ariel Juodziukynas Date: Sat, 22 Jul 2023 00:41:17 -0300 Subject: [PATCH 1/2] Add ExperimentalFeatures feature with dummy feature example --- public/locales/en/translation.json | 6 +++ src/common/types.ts | 5 ++ src/frontend/components/UI/Sidebar/index.tsx | 7 ++- .../components/ExperimentalFeatures.tsx | 54 +++++++++++++++++++ .../screens/Settings/components/index.ts | 1 + .../sections/AdvancedSettings/index.tsx | 5 +- src/frontend/state/ContextProvider.tsx | 4 +- src/frontend/state/GlobalState.tsx | 14 ++++- src/frontend/types.ts | 5 +- 9 files changed, 95 insertions(+), 6 deletions(-) create mode 100644 src/frontend/screens/Settings/components/ExperimentalFeatures.tsx diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index aea3e2e14a..58e7bfd56e 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -516,6 +516,9 @@ }, "esync": "Enable Esync", "exit-to-tray": "Exit to System Tray", + "experimental_features": { + "enableNewShinyFeature": "New shiny feature" + }, "fsync": "Enable Fsync", "gamemode": "Use GameMode (Feral Game Mode needs to be installed)", "hideChangelogsOnStartup": "Don't show changelogs on Startup", @@ -595,6 +598,9 @@ "installing": "Installing EAC Runtime...", "name": "EasyAntiCheat Runtime" }, + "experimental_features": { + "title": "Experimental Features" + }, "gameMode": { "eacRuntimeEnabled": { "message": "The EAC runtime is enabled, which won't function correctly without GameMode. Do you want to disable the EAC Runtime and GameMode?", diff --git a/src/common/types.ts b/src/common/types.ts index a3b8a67a2e..f5e66611b6 100644 --- a/src/common/types.ts +++ b/src/common/types.ts @@ -43,6 +43,10 @@ export type Release = { body?: string } +export type ExperimentalFeatures = { + enableNewShinyFeature: boolean +} + export interface AppSettings extends GameSettings { addDesktopShortcuts: boolean addStartMenuShortcuts: boolean @@ -66,6 +70,7 @@ export interface AppSettings extends GameSettings { egsLinkedPath: string enableUpdates: boolean exitToTray: boolean + experimentalFeatures: ExperimentalFeatures hideChangelogsOnStartup: boolean libraryTopSection: LibraryTopSectionOptions maxRecentGames: number diff --git a/src/frontend/components/UI/Sidebar/index.tsx b/src/frontend/components/UI/Sidebar/index.tsx index f86c098532..eaa7b6e158 100644 --- a/src/frontend/components/UI/Sidebar/index.tsx +++ b/src/frontend/components/UI/Sidebar/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react' +import React, { useContext, useEffect, useRef, useState } from 'react' import CurrentDownload from './components/CurrentDownload' import SidebarLinks from './components/SidebarLinks' @@ -8,6 +8,7 @@ import { DMQueueElement } from 'common/types' import { ReactComponent as HeroicIcon } from 'frontend/assets/heroic-icon.svg' import { useNavigate } from 'react-router-dom' +import ContextProvider from 'frontend/state/ContextProvider' let sidebarSize = localStorage.getItem('sidebar-width') || 240 const minWidth = 60 @@ -17,6 +18,7 @@ const collapsedWidth = 120 export default React.memo(function Sidebar() { const sidebarEl = useRef(null) const [currentDMElement, setCurrentDMElement] = useState() + const { experimentalFeatures } = useContext(ContextProvider) const navigate = useNavigate() @@ -144,6 +146,9 @@ export default React.memo(function Sidebar() { )} + {experimentalFeatures.enableNewShinyFeature && ( +

New Shiny Feature enabled

+ )}
) diff --git a/src/frontend/screens/Settings/components/ExperimentalFeatures.tsx b/src/frontend/screens/Settings/components/ExperimentalFeatures.tsx new file mode 100644 index 0000000000..d8278a0d5b --- /dev/null +++ b/src/frontend/screens/Settings/components/ExperimentalFeatures.tsx @@ -0,0 +1,54 @@ +import React, { useContext, useEffect } from 'react' +import { useTranslation } from 'react-i18next' +import useSetting from 'frontend/hooks/useSetting' +import { ToggleSwitch } from 'frontend/components/UI' +import ContextProvider from 'frontend/state/ContextProvider' + +const FEATURES = ['enableNewShinyFeature'] + +const ExperimentalFeatures = () => { + const { t } = useTranslation() + const [experimentalFeatures, setExprimentalFeatures] = useSetting( + 'experimentalFeatures', + { enableNewShinyFeature: false } + ) + const { handleExperimentalFeatures } = useContext(ContextProvider) + + const toggleFeature = (feature: string) => { + setExprimentalFeatures({ + ...experimentalFeatures, + [feature]: !experimentalFeatures[feature] + }) + } + + useEffect(() => { + handleExperimentalFeatures(experimentalFeatures) + }, [experimentalFeatures]) + + /* + Translations: + t('setting.experimental_features.enableNewShinyFeature', 'New shiny feature') + */ + + return ( + <> +

+ {t('settings.experimental_features.title', 'Experimental Features')} +

+ {FEATURES.map((feature) => { + return ( +
+ toggleFeature(feature)} + title={t(`setting.experimental_features.${feature}`, feature)} + /> +
+ ) + })} + + ) +} + +export default ExperimentalFeatures diff --git a/src/frontend/screens/Settings/components/index.ts b/src/frontend/screens/Settings/components/index.ts index 7cf1e9a166..cedfa57c6a 100644 --- a/src/frontend/screens/Settings/components/index.ts +++ b/src/frontend/screens/Settings/components/index.ts @@ -20,6 +20,7 @@ export { default as EgsSettings } from './EgsSettings' export { default as EnableEsync } from './EnableEsync' export { default as EnableFsync } from './EnableFsync' export { default as EnvVariablesTable } from './EnvVariablesTable' +export { default as ExperimentalFeatures } from './ExperimentalFeatures' export { default as GameMode } from './GameMode' export { default as IgnoreGameUpdates } from './IgnoreGameUpdates' export { default as HideChangelogOnStartup } from './HideChangelogOnStartup' diff --git a/src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx b/src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx index a362fe5172..0ff843276f 100644 --- a/src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx +++ b/src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx @@ -20,7 +20,8 @@ import { AltLegendaryBin, AltNileBin, DisableLogs, - DownloadNoHTTPS + DownloadNoHTTPS, + ExperimentalFeatures } from '../../components' export default function AdvancedSettings() { @@ -296,6 +297,8 @@ export default function AdvancedSettings() {

+ +
+ {/* remove this when adding a real experimental feature */} {experimentalFeatures.enableNewShinyFeature && (

New Shiny Feature enabled

)} + {/* remove */}
) diff --git a/src/frontend/screens/Settings/components/ExperimentalFeatures.tsx b/src/frontend/screens/Settings/components/ExperimentalFeatures.tsx index d8278a0d5b..b6142f8519 100644 --- a/src/frontend/screens/Settings/components/ExperimentalFeatures.tsx +++ b/src/frontend/screens/Settings/components/ExperimentalFeatures.tsx @@ -4,13 +4,14 @@ import useSetting from 'frontend/hooks/useSetting' import { ToggleSwitch } from 'frontend/components/UI' import ContextProvider from 'frontend/state/ContextProvider' +// remove shiny when adding a real experimental feature const FEATURES = ['enableNewShinyFeature'] const ExperimentalFeatures = () => { const { t } = useTranslation() const [experimentalFeatures, setExprimentalFeatures] = useSetting( 'experimentalFeatures', - { enableNewShinyFeature: false } + { enableNewShinyFeature: false } // remove this when adding a real experimental feature ) const { handleExperimentalFeatures } = useContext(ContextProvider) @@ -27,7 +28,7 @@ const ExperimentalFeatures = () => { /* Translations: - t('setting.experimental_features.enableNewShinyFeature', 'New shiny feature') + t('setting.experimental_features.enableNewShinyFeature', 'New shiny feature') // remove this when adding a real experimental feature */ return ( diff --git a/src/frontend/state/ContextProvider.tsx b/src/frontend/state/ContextProvider.tsx index 90893dcf2d..5024597ba7 100644 --- a/src/frontend/state/ContextProvider.tsx +++ b/src/frontend/state/ContextProvider.tsx @@ -87,7 +87,7 @@ const initialContext: ContextType = { setLastChangelogShown: () => null, isSettingsModalOpen: { value: false, type: 'settings' }, setIsSettingsModalOpen: () => null, - experimentalFeatures: { enableNewShinyFeature: false }, + experimentalFeatures: { enableNewShinyFeature: false }, // remove this when adding a real experimental feature handleExperimentalFeatures: () => null } diff --git a/src/frontend/state/GlobalState.tsx b/src/frontend/state/GlobalState.tsx index dfb0cc2ffb..d3f9dccb90 100644 --- a/src/frontend/state/GlobalState.tsx +++ b/src/frontend/state/GlobalState.tsx @@ -201,7 +201,7 @@ class GlobalState extends PureComponent { lastChangelogShown: JSON.parse(storage.getItem('last_changelog') || 'null'), settingsModalOpen: { value: false, type: 'settings', gameInfo: undefined }, experimentalFeatures: globalSettings?.experimentalFeatures || { - enableNewShinyFeature: false + enableNewShinyFeature: false // remove this when adding a real experimental feature } }