function Run()

in sapp/ui/frontend/src/Runs.js [24:123]
84 lines of code
6 McCabe index (conditional complexity)

function Run(props: $ReadOnly<{run: RunDescription}>): React$Node {
  const gutter = [8, 8];
  const [showRun, setShowRun] = useState(true);

  const Label = (props: $ReadOnly<{children: React$Node}>): React$Node => {
    return (
      <Col span={8} style={{textAlign: 'right'}}>
        <Text type="secondary">{props.children}</Text>
      </Col>
    );
  };
  const Item = (props: $ReadOnly<{children: React$Node}>): React$Node => {
    return (
      <Col span={16}>
        <Text type="secondary">{props.children}</Text>
      </Col>
    );
  };

  const deleteRunMutation = gql`
    mutation DeleteRun($id: ID!) {
      delete_run(input: {id: $id}) {
        clientMutationId
      }
    }
  `;

  const [deleteRun, {error: deleteError}] = useMutation(
    deleteRunMutation,
    {
      onCompleted() {
        setShowRun(false)
      }
    }
  );

  const onDelete = (): void => {
    deleteRun({variables: {id: props.run.run_id}});
  };

  if(deleteError) {
    Modal.error({title: 'Unable to delete run ', content: deleteError.toString()});
  }

  const contents = (
    <Col span={8}>
      <Card
        size="small"
        title={
          <>
            <SyncOutlined style={{marginRight: '.5em'}} />
            Run {props.run.run_id}
          </>
        }
        extra={
          <Link
            onClick={() => clearFilter()}
            href={`/run/${props.run.run_id}`}>
            Issues
          </Link>
        }
        actions={[
          <DeleteOutlined onClick={onDelete}/>
        ]}>
        <Row gutter={gutter}>
          <Label>Date</Label>
          <Item>
            <Text code>{props.run.date}</Text>
          </Item>
        </Row>
        <Row gutter={gutter}>
          <Label>Total issues</Label>
          <Item>
            <Text code>{props.run.num_issues || 0}</Text>
          </Item>
        </Row>
        <Row gutter={gutter}>
          <Label>Triaged issues</Label>
          <Item>
            <Text code>{props.run.triaged_issues || 0}</Text>
          </Item>
        </Row>
        <Row gutter={gutter}>
          <Label>Commit hash</Label>
          <Item>
            <Text code>{props.run.commit_hash || "None"}</Text>
          </Item>
        </Row>

      </Card>
      <br />
    </Col>
  )

  return (
    <>
      { showRun ? contents : null }
    </>
  );
}