render()

in desktop/plugins/public/network/RequestDetails.tsx [63:160]
93 lines of code
12 McCabe index (conditional complexity)

  render() {
    const {request, bodyFormat, onSelectFormat, onCopyText} = this.props;
    const url = new URL(request.url);

    const formattedText = bodyFormat == 'formatted';

    return (
      <>
        <Panel key="request" title={'Request'}>
          <KeyValueTable items={this.urlColumns(url)} />
        </Panel>

        {url.search ? (
          <Panel title={'Request Query Parameters'}>
            <QueryInspector queryParams={url.searchParams} />
          </Panel>
        ) : null}

        {request.requestHeaders.length > 0 ? (
          <Panel key="headers" title={'Request Headers'}>
            <HeaderInspector headers={request.requestHeaders} />
          </Panel>
        ) : null}

        {request.requestData != null ? (
          <Panel
            key="requestData"
            title={'Request Body'}
            extraActions={
              typeof request.requestData === 'string' ? (
                <CopyOutlined
                  title="Copy request body"
                  onClick={(e) => {
                    e.stopPropagation();
                    onCopyText(request.requestData as string);
                  }}
                />
              ) : null
            }
            pad>
            <RequestBodyInspector
              formattedText={formattedText}
              request={request}
            />
          </Panel>
        ) : null}
        {request.status ? (
          <>
            {request.responseHeaders?.length ? (
              <Panel
                key={'responseheaders'}
                title={`Response Headers${
                  request.responseIsMock ? ' (Mocked)' : ''
                }`}>
                <HeaderInspector headers={request.responseHeaders} />
              </Panel>
            ) : null}
            <Panel
              key={'responsebody'}
              title={`Response Body${
                request.responseIsMock ? ' (Mocked)' : ''
              }`}
              extraActions={
                typeof request.responseData === 'string' &&
                request.responseData ? (
                  <CopyOutlined
                    title="Copy response body"
                    onClick={(e) => {
                      e.stopPropagation();
                      onCopyText(request.responseData as string);
                    }}
                  />
                ) : null
              }
              pad>
              <ResponseBodyInspector
                formattedText={formattedText}
                request={request}
              />
            </Panel>
          </>
        ) : null}
        <Panel key="options" title={'Options'} collapsed pad>
          <Text>Body formatting:</Text>
          <Select
            value={bodyFormat}
            onChange={onSelectFormat}
            options={BodyOptions}
          />
        </Panel>
        {request.insights ? (
          <Panel key="insights" title={'Insights'} collapsed>
            <InsightsInspector insights={request.insights} />
          </Panel>
        ) : null}
      </>
    );
  }