diff --git a/src/frontend/lib/types/Settings.tsx b/src/frontend/lib/types/Settings.tsx index 46e1b10abe..0c89b19883 100644 --- a/src/frontend/lib/types/Settings.tsx +++ b/src/frontend/lib/types/Settings.tsx @@ -57,4 +57,5 @@ export interface SettingsStateProps { pathParams?: PathParams; getSetting: (key: string, default_value?: string) => string; // Return a raw setting value isSet: (key: string, default_value?: boolean) => boolean; // Check a "boolean" setting + getSettingLength: () => number; } diff --git a/src/frontend/src/components/settings/SettingList.tsx b/src/frontend/src/components/settings/SettingList.tsx index a0eb5ebd18..177f1b60c7 100644 --- a/src/frontend/src/components/settings/SettingList.tsx +++ b/src/frontend/src/components/settings/SettingList.tsx @@ -28,21 +28,34 @@ export function SettingList({ settingsState, keys, onChange, - onLoaded + onLoaded, + doGet }: Readonly<{ heading?: string; settingsState: SettingsStateProps; keys?: string[]; onChange?: () => void; onLoaded?: (settings: SettingsStateProps) => void; + doGet?: boolean; }>) { useEffect(() => { - if (settingsState.loaded) { + if (settingsState.loaded === true) { // Call the onLoaded callback if provided onLoaded?.(settingsState); } }, [settingsState.loaded, settingsState.settings]); + // get data if doGet is true to break memos leading to hidden group panels + useMemo(() => { + if (doGet && !settingsState.loaded) { + settingsState.fetchSettings().then((success) => { + if (success) { + onLoaded?.(settingsState); + } + }); + } + }, [doGet, settingsState]); + const api = useApi(); const allKeys = useMemo( @@ -226,9 +239,11 @@ export function GlobalSettingList({ export function PluginSettingList({ pluginKey, + doGet, onLoaded }: Readonly<{ pluginKey: string; + doGet?: boolean; onLoaded?: (settings: SettingsStateProps) => void; }>) { const store = useMemo( @@ -246,14 +261,22 @@ export function PluginSettingList({ pluginSettings.fetchSettings(); }, [pluginSettings.fetchSettings]); - return ; + return ( + + ); } export function PluginUserSettingList({ pluginKey, + doGet, onLoaded }: Readonly<{ pluginKey: string; + doGet?: boolean; onLoaded?: (settings: SettingsStateProps) => void; }>) { const store = useMemo( @@ -271,7 +294,13 @@ export function PluginUserSettingList({ pluginUserSettings.fetchSettings(); }, [pluginUserSettings.fetchSettings]); - return ; + return ( + + ); } export function MachineSettingList({ diff --git a/src/frontend/src/pages/Index/Settings/PluginSettingsGroup.tsx b/src/frontend/src/pages/Index/Settings/PluginSettingsGroup.tsx index 567ef7d025..c74e1d2192 100644 --- a/src/frontend/src/pages/Index/Settings/PluginSettingsGroup.tsx +++ b/src/frontend/src/pages/Index/Settings/PluginSettingsGroup.tsx @@ -26,12 +26,14 @@ function PluginSettingGroupItem({ // Hide the accordion item if there are no settings for this plugin const [count, setCount] = useState(0); const [wasLoaded, setWasLoaded] = useState(false); + const [doGet, setDoGet] = useState(true); // Callback once the plugin settings have been loaded const onLoaded = useCallback( (settings: SettingsStateProps) => { - setCount(settings.settings?.length || 0); + setCount(settings.getSettingLength()); setWasLoaded(true); + setDoGet(false); }, [pluginKey] ); @@ -55,9 +57,17 @@ function PluginSettingGroupItem({ {global ? ( - + ) : ( - + )} diff --git a/src/frontend/src/states/SettingsStates.tsx b/src/frontend/src/states/SettingsStates.tsx index 4eeecb3053..9ef99611ac 100644 --- a/src/frontend/src/states/SettingsStates.tsx +++ b/src/frontend/src/states/SettingsStates.tsx @@ -65,6 +65,9 @@ export const useGlobalSettingsState = create( isSet: (key: string, default_value?: boolean) => { const value = get().lookup[key] ?? default_value ?? 'false'; return isTrue(value); + }, + getSettingLength: () => { + return Object.keys(get().lookup).length; } }) ); @@ -114,6 +117,9 @@ export const useUserSettingsState = create((set, get) => ({ isSet: (key: string, default_value?: boolean) => { const value = get().lookup[key] ?? default_value ?? 'false'; return isTrue(value); + }, + getSettingLength: () => { + return Object.keys(get().lookup).length; } })); @@ -185,6 +191,9 @@ export const createPluginSettingsState = ({ isSet: (key: string, default_value?: boolean) => { const value = get().lookup[key] ?? default_value ?? 'false'; return isTrue(value); + }, + getSettingLength: () => { + return Object.keys(get().lookup).length; } })); }; @@ -246,6 +255,9 @@ export const createMachineSettingsState = ({ isSet: (key: string, default_value?: boolean) => { const value = get().lookup[key] ?? default_value ?? 'false'; return isTrue(value); + }, + getSettingLength: () => { + return Object.keys(get().lookup).length; } })); };