Add loading state to OS updates target form (#16610)

Follow up to #16604
This commit is contained in:
Sarah Gillespie 2024-02-05 16:20:59 -06:00 committed by GitHub
parent b3e28f1522
commit 95035af767
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 7 deletions

View File

@ -53,8 +53,9 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
// whenever the pathname changes. We should find a way to avoid this.
const {
data: config,
isLoading: isLoadingConfig,
isError: isErrorConfig,
isFetching: isFetchingConfig,
isLoading: isLoadingConfig,
refetch: refetchAppConfig,
} = useQuery<IConfig, Error>(["config"], () => configAPI.loadAll(), {
refetchOnWindowFocus: false,
@ -63,8 +64,9 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
const {
data: teamConfig,
isLoading: isLoadingTeam,
isError: isErrorTeamConfig,
isFetching: isFetchingTeamConfig,
isLoading: isLoadingTeam,
refetch: refetchTeamConfig,
} = useQuery<ILoadTeamResponse, Error, ITeamConfig>(
["team-config", teamIdForApi],
@ -88,10 +90,6 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
// FIXME: Are these checks still necessary?
if (config === null || teamIdForApi === undefined) return null;
// FIXME: We ought to display a spinner or some disabled state whenever refetching these queries
// too because a slow network can cause a disconnect between the form data and the actual data and
// we don't want the user to be editing the form data while fresh data is being fetched. We don't
// have a specified UX for this yet.
if (isLoadingConfig || isLoadingTeam) return <Spinner />;
// FIXME: Handle error states for app config and team config (need specifications for this).
@ -127,6 +125,7 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
})} // FIXME: Find a better way to trigger re-rendering if these change (see FIXME above regarding refetching)
appConfig={config}
currentTeamId={teamIdForApi}
isFetching={isFetchingConfig || isFetchingTeamConfig}
selectedPlatform={selectedPlatform}
teamConfig={teamConfig}
onSelectPlatform={setSelectedPlatformTab}

View File

@ -4,6 +4,7 @@ import { API_NO_TEAM_ID, ITeamConfig } from "interfaces/team";
import { IConfig } from "interfaces/config";
import SectionHeader from "components/SectionHeader";
import Spinner from "components/Spinner";
import MacOSTargetForm from "../MacOSTargetForm";
import WindowsTargetForm from "../WindowsTargetForm";
@ -71,8 +72,9 @@ export const generateKey = (args: GetDefaultFnParams) => {
interface ITargetSectionProps {
appConfig: IConfig;
currentTeamId: number;
teamConfig?: ITeamConfig;
isFetching: boolean;
selectedPlatform: OSUpdatesSupportedPlatform;
teamConfig?: ITeamConfig;
onSelectPlatform: (platform: OSUpdatesSupportedPlatform) => void;
refetchAppConfig: () => void;
refetchTeamConfig: () => void;
@ -81,12 +83,17 @@ interface ITargetSectionProps {
const TargetSection = ({
appConfig,
currentTeamId,
isFetching,
selectedPlatform,
teamConfig,
onSelectPlatform,
refetchAppConfig,
refetchTeamConfig,
}: ITargetSectionProps) => {
if (isFetching) {
return <Spinner />;
}
const isMacMdmEnabled = appConfig.mdm.enabled_and_configured;
const isWindowsMdmEnabled = appConfig.mdm.windows_enabled_and_configured;