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;
}
}));
};