Frontend refactoring: round 2

src/e2etests/test_api.py

@@ -261,9 +261,7 @@ def request_query(log, i, taints=[]):
 
     for j in range(15):
         res = requests.get(
-            "http://web:5000/api/matches/{}?offset=0&limit=50".format(
-                query_hash
-            )
+            f"http://web:5000/api/matches/{query_hash}?offset=0&limit=50"
         )
         log.info("API response: %s", res.json())
         if res.json()["job"]["status"] == "done":

src/mqueryfront/src/components/FilteringTableHeader.js

@@ -1,11 +1,10 @@
 import React from "react";
 import FilteringThead from "./FilteringThead";
-import PropTypes from "prop-types";
 
 const FilteringTableHeader = (props) => {
     const head = props.head.map((el, index) => {
         const filterData = {
-            attrubuteName: el.attrubuteName,
+            attributeName: el.attributeName,
             valueList: el.valueList,
             onClick: props.onClick,
         };
@@ -27,21 +26,4 @@ const FilteringTableHeader = (props) => {
     );
 };
 
-FilteringTableHeader.propTypes = {
-    head: PropTypes.arrayOf(
-        PropTypes.shape({
-            title: PropTypes.string.isRequired,
-            attrubuteName: PropTypes.string,
-            valueList: PropTypes.arrayOf(
-                PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-            ),
-        })
-    ).isRequired,
-    currentFilter: PropTypes.shape({
-        name: PropTypes.string,
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    }),
-    onClick: PropTypes.func,
-};
-
 export default FilteringTableHeader;

src/mqueryfront/src/components/FilteringThead.js

@@ -1,14 +1,13 @@
 import React from "react";
 import FilterIcon from "./FilterIcon";
-import PropTypes from "prop-types";
 
 const FilteringThead = (props) => {
     let activeColumn = false;
     let icon = null;
 
     if (
         props.currentFilter &&
-        props.currentFilter.name === props.filterData.attrubuteName
+        props.currentFilter.name === props.filterData.attributeName
     ) {
         activeColumn = true;
         icon = (
@@ -32,7 +31,7 @@ const FilteringThead = (props) => {
                     className="dropdown-item"
                     onClick={() =>
                         props.filterData.onClick(
-                            props.filterData.attrubuteName,
+                            props.filterData.attributeName,
                             el,
                             index
                         )
@@ -64,19 +63,4 @@ const FilteringThead = (props) => {
     );
 };
 
-FilteringThead.propTypes = {
-    title: PropTypes.string.isRequired,
-    filterData: PropTypes.shape({
-        attrubuteName: PropTypes.string,
-        valueList: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-        ),
-        onClick: PropTypes.func,
-    }).isRequired,
-    currentFilter: PropTypes.shape({
-        name: PropTypes.string,
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    }),
-};
-
 export default FilteringThead;

src/mqueryfront/src/components/FilteringTitle.js

@@ -1,6 +1,5 @@
 import React from "react";
 import FilterIcon from "./FilterIcon";
-import PropTypes from "prop-types";
 
 const FilteringTitle = (props) => {
     const { title, filterValue } = props;
@@ -47,9 +46,4 @@ const FilteringTitle = (props) => {
     else return <h1 className="text-center mq-bottom">{title}</h1>;
 };
 
-FilteringTitle.propTypes = {
-    title: PropTypes.string.isRequired,
-    filterValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
 export default FilteringTitle;

src/mqueryfront/src/components/LoadingPage.js

@@ -2,20 +2,13 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 
-const LoadingPage = () => {
-    return (
-        <div>
-            <h2>
-                <FontAwesomeIcon
-                    icon={faSpinner}
-                    spin
-                    size="lg"
-                    className="mr-2"
-                />
-                Loading...
-            </h2>
-        </div>
-    );
-};
+const LoadingPage = () => (
+    <div>
+        <h2>
+            <FontAwesomeIcon icon={faSpinner} spin size="lg" className="mr-2" />
+            Loading...
+        </h2>
+    </div>
+);
 
 export default LoadingPage;

src/mqueryfront/src/components/PriorityIcon.js

@@ -5,7 +5,6 @@ import {
     faAngleUp,
     faAngleDoubleUp,
 } from "@fortawesome/free-solid-svg-icons";
-import PropTypes from "prop-types";
 
 const PriorityIcon = (props) => {
     let icon;
@@ -29,12 +28,4 @@ const PriorityIcon = (props) => {
     );
 };
 
-PriorityIcon.defaultProps = {
-    size: "1x",
-};
-
-PriorityIcon.propTypes = {
-    priority: PropTypes.oneOf(["low", "medium", "high"]).isRequired,
-};
-
 export default PriorityIcon;

src/mqueryfront/src/query/QueryEditParseNav.js

@@ -5,7 +5,6 @@ import PropTypes from "prop-types";
 
 const QueryEditParseNav = (props) => {
     const { onEditQuery, onParseQuery, isEditActive } = props;
-
     let label, onClick, icon, name;
 
     if (isEditActive) {

src/mqueryfront/src/query/QueryField.js

@@ -1,44 +1,28 @@
 import React from "react";
 import QueryNavigation from "./QueryNavigation";
 import QueryMonaco from "./QueryMonaco";
-import PropTypes from "prop-types";
 
-const QueryField = (props) => {
-    return (
-        <div>
-            <QueryNavigation
-                isEditActive={props.readOnly}
+const QueryField = (props) => (
+    <div>
+        <QueryNavigation
+            isEditActive={props.readOnly}
+            onSubmitQuery={props.onSubmitQuery}
+            onEditQuery={props.onEditQuery}
+            onParseQuery={props.onParseQuery}
+            onTaintSelect={props.onTaintSelect}
+            availableTaints={props.availableTaints}
+            selectedTaints={props.selectedTaints}
+        />
+        <div className="mt-2 monaco-container">
+            <QueryMonaco
+                readOnly={props.readOnly}
+                rawYara={props.rawYara}
+                onValueChanged={props.onYaraUpdate}
+                error={props.parsedError}
                 onSubmitQuery={props.onSubmitQuery}
-                onEditQuery={props.onEditQuery}
-                onParseQuery={props.onParseQuery}
-                onTaintSelect={props.onTaintSelect}
-                availableTaints={props.availableTaints}
-                selectedTaints={props.selectedTaints}
             />
-            <div className="mt-2 monaco-container">
-                <QueryMonaco
-                    readOnly={props.readOnly}
-                    rawYara={props.rawYara}
-                    onValueChanged={props.onYaraUpdate}
-                    error={props.parsedError}
-                    onSubmitQuery={props.onSubmitQuery}
-                />
-            </div>
         </div>
-    );
-};
-
-QueryField.propTypes = {
-    rawYara: PropTypes.string.isRequired,
-    parsedError: PropTypes.arrayOf(PropTypes.string).isRequired,
-    readOnly: PropTypes.bool.isRequired,
-    availableTaints: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onYaraUpdate: PropTypes.func.isRequired,
-    onSubmitQuery: PropTypes.func.isRequired,
-    onEditQuery: PropTypes.func.isRequired,
-    onParseQuery: PropTypes.func.isRequired,
-    onTaintSelect: PropTypes.func.isRequired,
-    selectedTaints: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
+    </div>
+);
 
 export default QueryField;

src/mqueryfront/src/query/QueryLayoutManager.js

@@ -2,7 +2,6 @@ import React from "react";
 import QueryField from "./QueryField";
 import QueryResultsStatus from "./QueryResultsStatus";
 import QueryParseStatus from "./QueryParseStatus";
-// import ToggleLayoutButton from "../components/ToggleLayoutButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAlignLeft } from "@fortawesome/free-solid-svg-icons";
 import ErrorPage from "../components/ErrorPage";

src/mqueryfront/src/query/QueryMatches.js

@@ -3,8 +3,6 @@ import { API_URL } from "../config";
 import Pagination from "react-js-pagination";
 import FilterIcon from "../components/FilterIcon";
 import QueryMatchesItem from "./QueryMatchesItem";
-import PropTypes from "prop-types";
-import { PT_MATCHES, PT_PAGINATION } from "../queryUtils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import axios from "axios";
 import {
@@ -81,6 +79,7 @@ const QueryMatches = (props) => {
             } else {
                 return match;
             }
+            return null;
         })
         .map((match, index) => {
             const downloadUrl =
@@ -151,10 +150,4 @@ const QueryMatches = (props) => {
     );
 };
 
-QueryMatches.propTypes = {
-    matches: PT_MATCHES.isRequired,
-    qhash: PropTypes.string.isRequired,
-    pagination: PT_PAGINATION.isRequired,
-};
-
 export default QueryMatches;