SetupDoctorScreen non-modal option

Summary:
The Setup Doctor screen was hard-set into a modal window. Instead, make this an optional that defaults to yes.

This will allow the usage of the screen in non-modal container.

Reviewed By: antonk52

Differential Revision: D47629528

fbshipit-source-id: c5248df1358f1b14775b90c9bf12fd63b8885caf

desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx

@@ -9,7 +9,15 @@
 
 import React, {useEffect, useCallback, useMemo, useState} from 'react';
 import {useDispatch, useStore} from '../utils/useStore';
-import {Typography, Collapse, Button, Modal, Checkbox, Alert} from 'antd';
+import {
+  Typography,
+  Collapse,
+  Button,
+  Modal,
+  Checkbox,
+  Alert,
+  Space,
+} from 'antd';
 import {
   CheckCircleFilled,
   CloseCircleFilled,
@@ -167,6 +175,7 @@ const FooterContainer = styled(Layout.Horizontal)({
 });
 
 function SetupDoctorFooter(props: {
+  closable: boolean;
   onClose: () => void;
   onRerunDoctor: () => Promise<void>;
   showAcknowledgeCheckbox: boolean;
@@ -190,7 +199,7 @@ function SetupDoctorFooter(props: {
         <Layout.Container />
       )}
       <Layout.Horizontal>
-        <Button onClick={props.onClose}>Close</Button>
+        {props.closable && <Button onClick={props.onClose}>Close</Button>}
         <Button
           type="primary"
           onClick={() => props.onRerunDoctor()}
@@ -202,10 +211,17 @@ function SetupDoctorFooter(props: {
   );
 }
 
-export default function SetupDoctorScreen(props: {
+type Props = {
   visible: boolean;
+  modal?: boolean;
   onClose: () => void;
-}) {
+};
+
+export default function SetupDoctorScreen({
+  visible,
+  modal = true,
+  onClose,
+}: Props) {
   const healthcheckReport = useStore(
     (state) => state.healthchecks.healthcheckReport,
   );
@@ -234,8 +250,8 @@ export default function SetupDoctorScreen(props: {
       reportUsage('doctor:report:closed:notAcknowledged');
       dispatch(resetAcknowledgedProblems());
     }
-    props.onClose();
+    onClose();
-  }, [healthcheckReport.result, acknowlodgeProblem, props, dispatch]);
+  }, [healthcheckReport.result, acknowlodgeProblem, onClose, dispatch]);
   const runDoctor = useCallback(async () => {
     await runHealthchecks({
       settings,
@@ -255,15 +271,16 @@ export default function SetupDoctorScreen(props: {
     runDoctor();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return (
+  return modal ? (
     <Modal
       centered
       width={570}
       title="Setup Doctor"
-      visible={props.visible}
+      visible={visible}
       destroyOnClose
       footer={
         <SetupDoctorFooter
+          closable
           onClose={onCloseModal}
           onRerunDoctor={runDoctor}
           showAcknowledgeCheckbox={hasProblem}
@@ -275,5 +292,19 @@ export default function SetupDoctorScreen(props: {
       onCancel={onCloseModal}>
       <HealthCheckList report={healthcheckReport} />
     </Modal>
+  ) : (
+    <Layout.Container pad grow>
+      <HealthCheckList report={healthcheckReport} />
+      <Space direction="vertical" size="middle" />
+      <SetupDoctorFooter
+        closable={false}
+        onClose={onCloseModal}
+        onRerunDoctor={runDoctor}
+        showAcknowledgeCheckbox={hasProblem}
+        acknowledgeCheck={acknowlodgeProblem}
+        onAcknowledgeCheck={(checked) => setAcknowlodgeProblem(checked)}
+        disableRerun={healthcheckReport.result.status === 'IN_PROGRESS'}
+      />
+    </Layout.Container>
   );
 }