Wrap all screens with ControlsProvider and ignore config warnings on Authentication screens

src/Panel.tsx

@@ -80,11 +80,13 @@ export const Panel = ({ active, api }: PanelProps) => {
           addonUninstalled={addonUninstalled}
           setAddonUninstalled={setAddonUninstalled}
         >
-          <RunBuildProvider watchState={{ isRunning, startBuild, stopBuild }}>
-            <div hidden={!active} style={{ containerType: "size", height: "100%" }}>
-              {children}
-            </div>
-          </RunBuildProvider>
+          <ControlsProvider>
+            <RunBuildProvider watchState={{ isRunning, startBuild, stopBuild }}>
+              <div hidden={!active} style={{ containerType: "size", height: "100%" }}>
+                {children}
+              </div>
+            </RunBuildProvider>
+          </ControlsProvider>
         </UninstallProvider>
       </AuthProvider>
     </Provider>
@@ -151,17 +153,15 @@ export const Panel = ({ active, api }: PanelProps) => {
 
   const localBuildIsRightBranch = gitInfo.branch === localBuildProgress?.branch;
   return withProviders(
-    <ControlsProvider>
-      <VisualTests
-        dismissBuildError={() => setLocalBuildProgress(undefined)}
-        isOutdated={!!isOutdated}
-        localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
-        setOutdated={setOutdated}
-        updateBuildStatus={updateBuildStatus}
-        projectId={projectId}
-        gitInfo={gitInfo}
-        storyId={storyId}
-      />
-    </ControlsProvider>
+    <VisualTests
+      dismissBuildError={() => setLocalBuildProgress(undefined)}
+      isOutdated={!!isOutdated}
+      localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
+      setOutdated={setOutdated}
+      updateBuildStatus={updateBuildStatus}
+      projectId={projectId}
+      gitInfo={gitInfo}
+      storyId={storyId}
+    />
   );
 };

src/components/Screen.tsx

@@ -27,10 +27,17 @@ const InfoSection = styled(Section)(({ theme }) => ({
 
 interface ConfigSectionProps {
   hidden?: boolean;
+  ignoreConfig?: boolean;
+  ignoreSuggestions?: boolean;
   onOpen: (scrollTo?: keyof ConfigInfoPayload["configuration"]) => void;
 }
 
-export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
+export const ConfigSection = ({
+  hidden,
+  ignoreConfig,
+  ignoreSuggestions,
+  onOpen,
+}: ConfigSectionProps) => {
   const [configInfo] = useSharedState<ConfigInfoPayload>(CONFIG_INFO);
   const problems = Object.keys(configInfo?.problems || {});
   const suggestions = Object.keys(configInfo?.suggestions || {});
@@ -48,7 +55,7 @@ export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
     </Link>
   );
 
-  if (problems.length > 0)
+  if (problems.length > 0 && !ignoreConfig)
     return (
       <WarningSection hidden={hidden}>
         <Bar>
@@ -62,7 +69,7 @@ export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
       </WarningSection>
     );
 
-  if (suggestions.length > 0 && !dismissed)
+  if (suggestions.length > 0 && !dismissed && !ignoreConfig && !ignoreSuggestions)
     return (
       <InfoSection hidden={hidden}>
         <Bar>
@@ -84,6 +91,8 @@ export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
 interface ScreenProps {
   children: ReactNode;
   footer?: ReactNode;
+  ignoreConfig?: boolean;
+  ignoreSuggestions?: boolean;
 }
 
 const Container = styled.div({
@@ -122,6 +131,8 @@ export const Screen = ({
       </Col>
     </Footer>
   ),
+  ignoreConfig = false,
+  ignoreSuggestions = !footer,
 }: ScreenProps) => {
   const { configVisible } = useControlsState();
   const { toggleConfig } = useControlsDispatch();
@@ -140,7 +151,12 @@ export const Screen = ({
 
   return (
     <Container>
-      <ConfigSection onOpen={openConfig} hidden={configVisible} />
+      <ConfigSection
+        onOpen={openConfig}
+        hidden={configVisible}
+        ignoreConfig={ignoreConfig}
+        ignoreSuggestions={!footer}
+      />
       <Content hidden={configVisible}>{children}</Content>
       <Content hidden={!configVisible}>
         <Configuration onClose={() => toggleConfig(false)} />

src/screens/Authentication/SetSubdomain.tsx

@@ -56,7 +56,7 @@ export const SetSubdomain = ({ onBack, onSignIn }: SetSubdomainProps) => {
   );
 
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         <BackButton onClick={onBack}>
           <ChevronLeftIcon color={theme.base === "light" ? "currentColor" : theme.color.medium} />

src/screens/Authentication/SignIn.tsx

@@ -26,7 +26,7 @@ const Label = styled.span(({ theme }) => ({
 export const SignIn = ({ onBack, onSignIn, onSignInWithSSO }: SignInProps) => {
   const theme = useTheme();
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         {onBack && (
           <BackButton onClick={onBack}>

src/screens/Authentication/Verify.tsx

@@ -139,7 +139,7 @@ export const Verify = ({
   closeDialogRef.current = closeDialog;
 
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         <BackButton onClick={onBack}>
           <ChevronLeftIcon color={theme.base === "light" ? "currentColor" : theme.color.medium} />

src/screens/Authentication/Welcome.tsx

@@ -16,7 +16,7 @@ interface WelcomeProps {
 
 export const Welcome = ({ onNext, onUninstall }: WelcomeProps) => {
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         <Stack>
           <div>