export function MockResponseDetails()

in desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx [121:219]
84 lines of code
3 McCabe index (conditional complexity)

export function MockResponseDetails({id, route, isDuplicated}: Props) {
  const networkRouteManager = useContext(NetworkRouteContext);
  const [nextHeaderId, setNextHeaderId] = useState(0);

  const {requestUrl, requestMethod, responseData, responseStatus} = route;

  let formattedResponse = '';
  try {
    formattedResponse = JSON.stringify(JSON.parse(responseData), null, 2);
  } catch (e) {
    formattedResponse = responseData;
  }

  return (
    <Layout.Container gap>
      <Layout.Horizontal gap>
        <Select
          value={requestMethod}
          options={httpMethods}
          onChange={(text) =>
            networkRouteManager.modifyRoute(id, {requestMethod: text})
          }
        />
        <Input
          type="text"
          placeholder="URL"
          value={requestUrl}
          onChange={(event) =>
            networkRouteManager.modifyRoute(id, {
              requestUrl: event.target.value,
            })
          }
          style={{flex: 1}}
        />
        <Input
          type="text"
          placeholder="STATUS"
          value={responseStatus}
          onChange={(event) =>
            networkRouteManager.modifyRoute(id, {
              responseStatus: event.target.value,
            })
          }
          style={{width: 100}}
        />
      </Layout.Horizontal>
      {isDuplicated && (
        <Layout.Horizontal gap>
          <WarningOutlined />
          Route is duplicated (Same URL and Method)
        </Layout.Horizontal>
      )}
      <Layout.Container height={500}>
        <Tabs grow>
          <Tab tab={'Data'}>
            <Input.TextArea
              wrap="soft"
              autoComplete="off"
              spellCheck={false}
              value={formattedResponse}
              onChange={(event) =>
                networkRouteManager.modifyRoute(id, {
                  responseData: event.target.value,
                })
              }
              style={{flex: 1}}
            />
          </Tab>
          <Tab tab={'Headers'}>
            <Layout.Top gap>
              <Layout.Horizontal>
                <Button
                  onClick={() => {
                    const newHeaders = {
                      ...route.responseHeaders,
                      [nextHeaderId.toString()]: {key: '', value: ''},
                    };
                    setNextHeaderId(nextHeaderId + 1);
                    networkRouteManager.modifyRoute(id, {
                      responseHeaders: newHeaders,
                    });
                  }}>
                  Add Header
                </Button>
              </Layout.Horizontal>
              <Layout.ScrollContainer>
                <ResponseHeaders
                  routeId={id}
                  route={route}
                  networkRouteManager={networkRouteManager}
                />
              </Layout.ScrollContainer>
            </Layout.Top>
          </Tab>
        </Tabs>
      </Layout.Container>
    </Layout.Container>
  );
}