render()

in desktop/flipper-ui-core/src/chrome/DoctorSheet.tsx [316:404]


  render() {
    return (
      <Container>
        <Title>Doctor</Title>
        <FlexRow>
          <HealthcheckListContainer>
            {Object.values(this.props.healthcheckReport.categories).map(
              (category: FlipperDoctor.HealthcheckReportCategory) => {
                return (
                  <CategoryContainer key={category.key}>
                    <HealthcheckDisplay
                      label={category.label}
                      result={category.result}
                    />
                    {category.result.status !== 'SKIPPED' && (
                      <CategoryContainer>
                        {Object.values(category.checks).map((check) => (
                          <HealthcheckDisplay
                            key={check.key}
                            selected={check.key === this.state.selectedCheckKey}
                            label={check.label}
                            result={check.result}
                            onClick={() =>
                              this.setState({
                                ...this.state,
                                selectedCheckKey:
                                  this.state.selectedCheckKey === check.key
                                    ? undefined
                                    : check.key,
                              })
                            }
                          />
                        ))}
                      </CategoryContainer>
                    )}
                    {category.result.status === 'SKIPPED' && (
                      <CategoryContainer>
                        <SkipReasonLabel>
                          {category.result.message}
                        </SkipReasonLabel>
                      </CategoryContainer>
                    )}
                  </CategoryContainer>
                );
              },
            )}
          </HealthcheckListContainer>
          <Spacer />
          <SideContainer shrink>
            <SideMessageDisplay>
              <SideContainerText selectable>
                {this.state.selectedCheckKey && (
                  <p>{this.getCheckMessage(this.state.selectedCheckKey)}</p>
                )}
                {!this.state.selectedCheckKey && (
                  <ResultMessage result={this.props.healthcheckReport.result} />
                )}
              </SideContainerText>
            </SideMessageDisplay>
          </SideContainer>
        </FlexRow>
        <FlexRow>
          <Spacer />
          {this.state.acknowledgeCheckboxVisible && (
            <CenteredCheckbox
              checked={!!this.state.acknowledgeOnClose}
              onChange={this.onAcknowledgeOnCloseChanged.bind(this)}
              text={
                'Do not show warning about these problems on Flipper startup'
              }
            />
          )}
          <Button compact padded onClick={this.props.onHide}>
            Close
          </Button>
          <Button
            disabled={
              this.props.healthcheckReport.result.status === 'IN_PROGRESS'
            }
            type="primary"
            compact
            padded
            onClick={() => this.runHealthchecks()}>
            Re-run
          </Button>
        </FlexRow>
      </Container>
    );
  }