12456166531

Committed 22 Dec 2024 05:11PM UTC coverage: 91.758% (-0.002%) from 91.76%

Build # 12456166531

Build Type

push

github

Committed by

web-flow

Commit Message

Refactor file viewer components (#7270)

* Return extra file information for submission files
* Remove get_file route
* Move HEIC/HEIF file handling to the image viewer
* Refactor text viewer to fetch content from URL
* Cancel promises and state updates after component unmount
* Add `max_content_size` param to `/download_file`
* Handle (413 Content Too Large) when fetching file content
* Add binary file extensions

Run Details

623 of 1357 branches covered (45.91%)

Branch coverage included in aggregate %.

115 of 149 new or added lines in 9 files covered. (77.18%)

2 existing lines in 2 files now uncovered.

41180 of 44201 relevant lines covered (93.17%)

120.51 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

85.71

/app/javascript/Components/Result/binary_viewer.jsx

import React from "react";

export class BinaryViewer extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      content: null,
      getAnyway: false,
    };
    this.abortController = null;
  }

  componentDidMount() {
    // Notify the parent component that the file content is loading.
    this.props.setLoadingCallback(true);
    // The URL has updated, so the content needs to be fetched using the new URL.
    this.fetchContent(this.props.url)
      .then(content =>
        this.setState({content: content}, () => this.props.setLoadingCallback(false))
      )
      .catch(error => {
        this.props.setLoadingCallback(false);
        if (error instanceof DOMException) return;
        console.error(error);
      });
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.url && this.props.url !== prevProps.url) {
      this.setState({getAnyway: false});
      this.props.setLoadingCallback(true);
      this.fetchContent(this.props.url)
        .then(content =>
          this.setState({content: content}, () => this.props.setLoadingCallback(false))
        )
        .catch(error => {
          this.props.setLoadingCallback(false);
          if (error instanceof DOMException) return;
          console.error(error);
        });
    }
  }

  fetchContent(url) {
    if (this.abortController) {
      // Stops ongoing fetch requests. It's ok to call .abort() after the fetch has already completed,
      // fetch simply ignores it.
      this.abortController.abort();
    }
    // Reinitialize the controller, because the signal can't be reused after the request has been aborted.
    this.abortController = new AbortController();

    return fetch(url, {signal: this.abortController.signal})
      .then(response => {
        if (response.status === 413) {
          const errorMessage = I18n.t("submissions.oversize_submission_file");
          this.props.setErrorMessageCallback(errorMessage);
          throw new Error(errorMessage);
        } else {
          return response.text();
        }
      })
      .then(content => content.replace(/\r?\n/gm, "\n"));
  }

  componentWillUnmount() {
    if (this.abortController) {
      this.abortController.abort();
    }
  }

  render() {
    return (
      <div>
        {!this.state.getAnyway && (
          <a onClick={() => this.setState({getAnyway: true})}>{I18n.t("submissions.get_anyway")}</a>
        )}
        {this.state.getAnyway && <p>{this.state.content}</p>}
      </div>
    );
  }
}

1	import React from "react";
2
3	export class BinaryViewer extends React.PureComponent {
4	constructor(props) {
5	super(props);	6✔
6	this.state = {	6✔
7	content: null,
8	getAnyway: false,
9	};
10	this.abortController = null;	6✔
11	}
12
13	componentDidMount() {
14	// Notify the parent component that the file content is loading.
15	this.props.setLoadingCallback(true);	6✔
16	// The URL has updated, so the content needs to be fetched using the new URL.
17	this.fetchContent(this.props.url)	6✔
18	.then(content =>
19	this.setState({content: content}, () => this.props.setLoadingCallback(false))	4✔
20	)
21	.catch(error => {
22	this.props.setLoadingCallback(false);	2✔
23	if (error instanceof DOMException) return;	2!
24	console.error(error);	2✔
25	});
26	}
27
28	componentDidUpdate(prevProps, prevState) {
29	if (this.props.url && this.props.url !== prevProps.url) {	11✔
30	this.setState({getAnyway: false});	1✔
31	this.props.setLoadingCallback(true);	1✔
32	this.fetchContent(this.props.url)	1✔
33	.then(content =>
34	this.setState({content: content}, () => this.props.setLoadingCallback(false))	1✔
35	)
36	.catch(error => {
NEW 37	this.props.setLoadingCallback(false);	×
NEW 38	if (error instanceof DOMException) return;	×
NEW 39	console.error(error);	×
40	});
41	}
42	}
43
44	fetchContent(url) {
45	if (this.abortController) {	7✔
46	// Stops ongoing fetch requests. It's ok to call .abort() after the fetch has already completed,
47	// fetch simply ignores it.
48	this.abortController.abort();	1✔
49	}
50	// Reinitialize the controller, because the signal can't be reused after the request has been aborted.
51	this.abortController = new AbortController();	7✔
52
53	return fetch(url, {signal: this.abortController.signal})	7✔
54	.then(response => {
55	if (response.status === 413) {	6✔
56	const errorMessage = I18n.t("submissions.oversize_submission_file");	1✔
57	this.props.setErrorMessageCallback(errorMessage);	1✔
58	throw new Error(errorMessage);	1✔
59	} else {
60	return response.text();	5✔
61	}
62	})
63	.then(content => content.replace(/\r?\n/gm, "\n"));	5✔
64	}
65
66	componentWillUnmount() {
67	if (this.abortController) {	6!
68	this.abortController.abort();	6✔
69	}
70	}
71
72	render() {
73	return (	17✔
74	<div>
75	{!this.state.getAnyway && (	28✔
76	<a onClick={() => this.setState({getAnyway: true})}>{I18n.t("submissions.get_anyway")}</a>	3✔
77	)}
78	{this.state.getAnyway && <p>{this.state.content}</p>}	23✔
79	</div>
80	);
81	}
82	}

MarkUsProject / Markus / 12456166531

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous