diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index 5ab4d71a..f53fd737 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/ui/frontend/build_src/src/api/index.ts @@ -31,6 +31,7 @@ export const getSaveDirectory = async () => { return data[0]; }; +export const KEY_CONFIG = "config"; export const getConfig = async () => { const response = await fetch(`${API_URL}/app_config`); console.log("getConfig response", response); @@ -38,6 +39,22 @@ export const getConfig = async () => { return data; }; +export const KEY_TOGGLE_CONFIG = "toggle_config"; +export const toggleBetaConfig = async (branch: string) => { + const response = await fetch(`${API_URL}/app_config`, { + method: "POST", + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + 'update_branch': branch + }) + + }); + const data = await response.json(); + return data; +}; + /** * post a new request for an image */ diff --git a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx new file mode 100644 index 00000000..477a0f4f --- /dev/null +++ b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx @@ -0,0 +1,76 @@ +import React, { useState, useEffect } from 'react'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; + +import { + KEY_CONFIG, getConfig, + KEY_TOGGLE_CONFIG, toggleBetaConfig +} from '../../../api'; + + + + + +export default function BetaMode() { + + // gate for the toggle + const [shouldSetCofig, setShouldSetConfig] = useState(false); + // next branch to get + const [branchToGetNext, setBranchToGetNext] = useState("beta"); + + // our basic config + const { status: configStatus, data: configData } = useQuery([KEY_CONFIG], getConfig); + const queryClient = useQueryClient() + + // the toggle config + const { status: toggleStatus, data: toggleData } = useQuery([KEY_TOGGLE_CONFIG], () => toggleBetaConfig(branchToGetNext), { + enabled: shouldSetCofig, + }); + + + // this is also in the Header Display + // TODO: make this a custom hook + useEffect(() => { + + if (configStatus === 'success') { + + const { update_branch } = configData; + + if (update_branch === 'main') { + setBranchToGetNext('beta'); + } else { + // setIsBeta(true); + setBranchToGetNext('main'); + } + + } + }, [configStatus, configData]); + + + useEffect(() => { + if (toggleStatus === 'success') { + + if (toggleData[0] == 'OK') { + // force a refetch of the config + queryClient.invalidateQueries([KEY_CONFIG]) + } + setShouldSetConfig(false); + + } + }, [toggleStatus, toggleData, setShouldSetConfig]); + + + + return ( + + ); +} + diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx index 7c18ceec..6a4ce5e8 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx @@ -11,6 +11,8 @@ import PropertySettings from "./propertySettings"; import WorkflowSettings from "./workflowSettings"; import GpuSettings from "./gpuSettings"; +import BetaMode from "../../../molecules/betaMode"; + function SettingsList() { return (