doctor result can display copiable CLI commands

Reviewed By: lblasa, ivanmisuno

Differential Revision: D50383150

fbshipit-source-id: 201f239cc7d69bd03011ec817156163f9f6ed653

desktop/flipper-common/src/doctor.tsx

@@ -64,9 +64,18 @@ export namespace FlipperDoctor {
     ) => Promise<HealthcheckRunResult>;
   };
 
+  export type CliCommand = {
+    title: string;
+    command: string;
+  };
+
   export type HealthcheckRunResult = {
     hasProblem: boolean;
     message: string;
+    /**
+     * Commands to show to mitigate a problem or hint for more information
+     */
+    commands?: CliCommand[];
   };
 
   export type SubprocessHealtcheckRunResult =
@@ -104,6 +113,7 @@ export namespace FlipperDoctor {
     status: HealthcheckStatus;
     isAcknowledged?: boolean;
     message?: string;
+    commands?: CliCommand[];
   };
 
   export type HealthcheckReportItem = {

desktop/flipper-server-core/src/utils/runHealthchecks.tsx

@@ -71,11 +71,13 @@ export async function runHealthcheck(
     ? {
         status: 'FAILED',
         message: checkResult.message,
+        commands: checkResult.commands,
       }
     : checkResult.hasProblem && !check.isRequired
     ? {
         status: 'WARNING',
         message: checkResult.message,
+        commands: checkResult.commands,
       }
     : {status: 'SUCCESS', message: checkResult.message};
 }

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

@@ -13,6 +13,7 @@ import {
   Typography,
   Collapse,
   Button,
+  List,
   Modal,
   Checkbox,
   Alert,
@@ -133,6 +134,25 @@ function CollapsableCategory(props: {
           header={check.label}
           extra={<CheckIcon status={check.result.status} />}>
           <Paragraph>{check.result.message}</Paragraph>
+          {check.result.commands && (
+            <List>
+              {check.result.commands.map(({title, command}, i) => (
+                <List.Item key={i}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      marginBottom: 8,
+                    }}>
+                    <Typography.Text type="secondary">{title}</Typography.Text>
+                    <Typography.Text code copyable>
+                      {command}
+                    </Typography.Text>
+                  </div>
+                </List.Item>
+              ))}
+            </List>
+          )}
         </Collapse.Panel>
       ))}
     </Collapse>
@@ -274,7 +294,7 @@ export default function SetupDoctorScreen({
   return modal ? (
     <Modal
       centered
-      width={570}
+      width={620}
       title="Setup Doctor"
       open={visible}
       destroyOnClose