mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Add loading state to OS updates target form (#16610)
Follow up to #16604
This commit is contained in:
parent
b3e28f1522
commit
95035af767
@ -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}
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user