render()

in src/web/src/views/workspace/WSEditorCommandContent.tsx [993:1101]
108 lines of code
4 McCabe index (conditional complexity)

  render() {
    const { name, shortHelp, longHelp, invalidText, updating, stage, confirmation } = this.state;
    return (
      <Dialog disableEscapeKeyDown open={this.props.open} sx={{ "& .MuiDialog-paper": { width: "80%" } }}>
        <DialogTitle>Command</DialogTitle>
        <DialogContent dividers={true}>
          {invalidText && (
            <Alert variant="filled" severity="error">
              {" "}
              {invalidText}{" "}
            </Alert>
          )}
          <InputLabel required shrink sx={{ font: "inherit" }}>
            Stage
          </InputLabel>
          <RadioGroup
            row
            value={stage}
            name="stage"
            onChange={(event: any) => {
              this.setState({
                stage: event.target.value,
              });
            }}
          >
            <FormControlLabel value="Stable" control={<Radio />} label="Stable" sx={{ ml: 4 }} />
            <FormControlLabel value="Preview" control={<Radio />} label="Preview" sx={{ ml: 4 }} />
            <FormControlLabel value="Experimental" control={<Radio />} label="Experimental" sx={{ ml: 4 }} />
          </RadioGroup>

          <TextField
            id="name"
            label="Name"
            type="text"
            fullWidth
            variant="standard"
            value={name}
            onChange={(event: any) => {
              this.setState({
                name: event.target.value,
              });
            }}
            margin="normal"
            required
          />
          <TextField
            id="shortSummary"
            label="Short Summary"
            type="text"
            fullWidth
            variant="standard"
            value={shortHelp}
            onChange={(event: any) => {
              this.setState({
                shortHelp: event.target.value,
              });
            }}
            margin="normal"
            required
          />
          <TextField
            id="longSummary"
            label="Long Summary"
            helperText="Please add long summer in lines."
            type="text"
            fullWidth
            multiline
            variant="standard"
            value={longHelp}
            onChange={(event: any) => {
              this.setState({
                longHelp: event.target.value,
              });
            }}
            margin="normal"
          />
          <TextField
            id="confirmation"
            label="Command confirmation"
            helperText="Modify or clear confirmation message as needed."
            type="text"
            fullWidth
            multiline
            variant="standard"
            value={confirmation}
            onChange={(event: any) => {
              this.setState({
                confirmation: event.target.value,
              });
            }}
            margin="normal"
          />
        </DialogContent>
        <DialogActions>
          {updating && (
            <Box sx={{ width: "100%" }}>
              <LinearProgress color="secondary" />
            </Box>
          )}
          {!updating && (
            <React.Fragment>
              <Button onClick={this.handleClose}>Cancel</Button>
              <Button onClick={this.handleModify}>Save</Button>
            </React.Fragment>
          )}
        </DialogActions>
      </Dialog>
    );
  }