showModalBody()

in source/web-ui/src/views/machines/MachineStatusCard.tsx [280:406]
125 lines of code
4 McCabe index (conditional complexity)

    showModalBody() {
        if (this.state.isLoadingConfig) {
            return (
                <Modal.Body>
                    <div>{`${I18n.get('modal.configureMachine.loading')}`}</div>
                    <Spinner animation="border" variant="info" />
                </Modal.Body>
            );
        }

        const renderTooltip = (props: any) => (
            <Tooltip id="map-status-value-tooltip" {...props}>
                {`${I18n.get('modal.configureMachine.mapStatusValueHeaderTooltipText')}`}
            </Tooltip>
        );

        return (
            <Form noValidate onSubmit={this.onClickConfigModalSaveBtn}>
                <Modal.Body>
                    <Form.Row>
                        <Col>
                            <Form.Group controlId="machineProductionCountTagName">
                                <Form.Label><strong>{`${I18n.get('modal.configureMachine.prodCountLabel')}`}</strong></Form.Label>
                                <Form.Control
                                    type="text"
                                    disabled={this.state.isMutating}
                                    placeholder={`${I18n.get('modal.configureMachine.tagNamePlaceholder')}`}
                                    value={this.state.machineProductionCountTagName} onChange={this.handleChange}
                                />
                            </Form.Group>
                        </Col>
                    </Form.Row>
                    <Form.Row>
                        <Col>
                            <Form.Group controlId="machineStatusTagName">
                                <Form.Label><strong>{`${I18n.get('modal.configureMachine.statusLabel')}`}</strong></Form.Label>
                                <Form.Control
                                    type="text"
                                    disabled={this.state.isMutating}
                                    placeholder={`${I18n.get('modal.configureMachine.tagNamePlaceholder')}`}
                                    value={this.state.machineStatusTagName} onChange={this.handleChange}
                                />
                            </Form.Group>
                        </Col>
                    </Form.Row>
                    <Form.Row>
                        <Col>
                            <div><strong>{`${I18n.get('modal.configureMachine.mapStatusLabel')}`}</strong></div>
                            <Table bordered size="sm" className="map-status-value-table">
                                <thead>
                                    <tr>
                                        <td>{`${I18n.get('modal.configureMachine.mapStatusLabelHeader')}`}</td>
                                        <td>
                                            {`${I18n.get('modal.configureMachine.mapStatusValueHeader')}`}
                                            <OverlayTrigger placement="top-start" overlay={renderTooltip}>
                                                <span className="map-status-value-header-tooltip">
                                                    <i className="map-status-value-info-icon bi-info-circle-fill"></i>
                                                </span>
                                            </OverlayTrigger>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><Form.Label>{`${I18n.get('modal.configureMachine.upValueLabel')}`}</Form.Label></td>
                                        <td>
                                            <Form.Group controlId="machineStatusUpValue">
                                                <Form.Control
                                                    type="text"
                                                    disabled={this.state.isMutating}
                                                    placeholder={`${I18n.get('modal.configureMachine.upValuePlaceholder')}`}
                                                    value={this.state.machineStatusUpValue} onChange={this.handleChange}
                                                />
                                            </Form.Group>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><Form.Label>{`${I18n.get('modal.configureMachine.downValueLabel')}`}</Form.Label></td>
                                        <td>
                                            <Form.Group controlId="machineStatusDownValue">
                                                <Form.Control
                                                    type="text"
                                                    disabled={this.state.isMutating}
                                                    placeholder={`${I18n.get('modal.configureMachine.downValuePlaceholder')}`}
                                                    value={this.state.machineStatusDownValue} onChange={this.handleChange}
                                                />
                                            </Form.Group>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><Form.Label>{`${I18n.get('modal.configureMachine.idleValueLabel')}`}</Form.Label></td>
                                        <td>
                                            <Form.Group controlId="machineStatusIdleValue">
                                                <Form.Control
                                                    type="text"
                                                    disabled={this.state.isMutating}
                                                    placeholder={`${I18n.get('modal.configureMachine.idleValuePlaceholder')}`}
                                                    value={this.state.machineStatusIdleValue} onChange={this.handleChange}
                                                />
                                            </Form.Group>
                                        </td>
                                    </tr>
                                </tbody>
                            </Table>
                        </Col>
                    </Form.Row>
                    <Form.Row>
                        <Col>
                            <Form.Group controlId="newMachineName">
                                <Form.Label><strong>{`${I18n.get('modal.configureMachine.machineNameLabel')}`}</strong></Form.Label>
                                <Form.Control
                                    type="text"
                                    disabled={this.state.isMutating}
                                    placeholder={`${I18n.get('modal.configureMachine.machineNamePlaceholder')}`}
                                    value={this.state.newMachineName} onChange={this.handleChange}
                                />
                            </Form.Group>
                        </Col>
                    </Form.Row>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" disabled={this.state.isMutating} onClick={this.onCloseConfigModal}>{this.state.isMutating ? `${I18n.get('button.updating')}` : `${I18n.get('button.cancel')}`}</Button>
                    <Button variant="success" disabled={this.state.isMutating} type="submit">{this.state.isMutating ? `${I18n.get('button.updating')}` : `${I18n.get('button.save')}`}</Button>
                </Modal.Footer>
            </Form>
        );
    }