render()

in src/web/src/views/workspace/WSEditor.tsx [965:1086]
120 lines of code
8 McCabe index (conditional complexity)

  render() {
    const { invalidText, selectedResources, updating, resourceOptions } = this.state;

    return (
      <Dialog disableEscapeKeyDown open={this.props.open} fullWidth={true} maxWidth="xl">
        <DialogTitle>
          Reload {this.props.source.toLowerCase() === "typespec" ? "TypeSpec" : "Swagger"} Resources
        </DialogTitle>
        <DialogContent>
          {invalidText && (
            <Alert variant="filled" severity="error">
              {" "}
              {invalidText}{" "}
            </Alert>
          )}
          <List
            sx={{ flexGrow: 1 }}
            subheader={
              <ListSubheader>
                <Box
                  sx={{
                    mt: 1,
                    mb: 1,
                    flexDirection: "column",
                    display: "flex",
                    alignItems: "stretch",
                    justifyContent: "flex-start",
                  }}
                  color="inherit"
                >
                  {/* <Typography component='h6'>Resource Url</Typography> */}

                  <Paper
                    sx={{
                      display: "flex",
                      flexDirection: "row",
                      alignItems: "center",
                      mt: 1,
                    }}
                    variant="outlined"
                    square
                  >
                    <ListItemButton dense onClick={this.onSelectedAllClick} disabled={resourceOptions.length === 0}>
                      <ListItemIcon>
                        <Checkbox
                          edge="start"
                          checked={selectedResources.size > 0 && selectedResources.size === resourceOptions.length}
                          indeterminate={selectedResources.size > 0 && selectedResources.size < resourceOptions.length}
                          tabIndex={-1}
                          disableRipple
                          inputProps={{ "aria-labelledby": "SelectAll" }}
                        />
                      </ListItemIcon>
                      <ListItemText
                        id="SelectAll"
                        primary={`All (${resourceOptions.length})`}
                        primaryTypographyProps={{
                          variant: "h6",
                        }}
                      />
                    </ListItemButton>
                  </Paper>
                </Box>
              </ListSubheader>
            }
          >
            {resourceOptions.length > 0 && (
              <Paper sx={{ ml: 2, mr: 2 }} variant="outlined" square>
                {resourceOptions.map((option) => {
                  const labelId = `resource-${option.id}`;
                  const selected = selectedResources.has(option.id);
                  return (
                    <ListItem
                      key={option.id}
                      sx={{
                        display: "flex",
                        flexDirection: "row",
                        alignItems: "center",
                      }}
                      disablePadding
                    >
                      <ListItemButton dense onClick={this.onResourceItemClick(option.id)}>
                        <ListItemIcon>
                          <Checkbox
                            edge="start"
                            checked={selected}
                            tabIndex={-1}
                            disableRipple
                            inputProps={{ "aria-labelledby": labelId }}
                          />
                        </ListItemIcon>
                        <ListItemText
                          id={labelId}
                          primary={`${option.version} ${option.id}`}
                          primaryTypographyProps={{
                            variant: "h6",
                          }}
                        />
                      </ListItemButton>
                    </ListItem>
                  );
                })}
              </Paper>
            )}
          </List>
        </DialogContent>
        <DialogActions>
          {updating && (
            <Box sx={{ width: "100%" }}>
              <LinearProgress color="secondary" />
            </Box>
          )}
          {!updating && (
            <React.Fragment>
              <Button onClick={this.handleClose}>Cancel</Button>
              <Button onClick={this.handleReload}>Reload</Button>
            </React.Fragment>
          )}
        </DialogActions>
      </Dialog>
    );
  }