Refactoring: give JavaSCript files with JSX the extension .jsx to pre…

…pate for ejection of Create React App.

components/frontend/package.json

@@ -38,7 +38,7 @@
         "resetMocks": false,
         "coveragePathIgnorePatterns": [
             "<rootDir>/node_modules/",
-            "<rootDir>/src/index.js"
+            "<rootDir>/src/index.jsx"
         ]
     },
     "browserslist": [

components/frontend/src/api/metric.js

@@ -1,4 +1,3 @@
-import { showMessage } from "../widgets/toast"
 import { fetch_server_api } from "./fetch_server_api"
 
 export function add_metric(subject_uuid, metricType, reload) {
@@ -27,14 +26,14 @@ export function set_metric_debt(metric_uuid, value, reload) {
     return fetch_server_api("post", `metric/${metric_uuid}/debt`, { accept_debt: value }).then(reload)
 }
 
-export function add_metric_issue(metric_uuid, reload) {
+export function add_metric_issue(metric_uuid, reload, showMessage) {
     const payload = { metric_url: `${window.location}#${metric_uuid}` }
     return fetch_server_api("post", `metric/${metric_uuid}/issue/new`, payload)
         .then((json) => {
             if (json.ok) {
                 window.open(json.issue_url)
             } else {
-                showMessage("error", "Could not create issue", json.error)
+                showMessage(json.error)
             }
             return null
         })

components/frontend/src/changelog/ChangeLog.test.js → components/frontend/src/changelog/ChangeLog.test.jsx

@@ -6,7 +6,7 @@ import * as toast from "../widgets/toast"
 import { ChangeLog } from "./ChangeLog"
 
 jest.mock("../api/changelog.js")
-jest.mock("../widgets/toast.js")
+jest.mock("../widgets/toast.jsx")
 
 beforeEach(() => {
     jest.resetAllMocks()

components/frontend/src/dashboard/StatusBarChart.js → components/frontend/src/dashboard/StatusBarChart.jsx

@@ -1,7 +1,7 @@
 import { arrayOf, number, object } from "prop-types"
 import { VictoryBar, VictoryStack } from "victory"
 
-import { STATUS_COLORS, STATUS_NAME, STATUSES } from "../metric/status"
+import { STATUS_COLORS, STATUS_SHORT_NAME, STATUSES } from "../metric/status"
 import { labelPropType, stringsPropType } from "../sharedPropTypes"
 import { pluralize, sum } from "../utils"
 
@@ -28,7 +28,7 @@ export function StatusBarChart({ animate, colors, events, height, label, maxY, s
             data.push({
                 x: date,
                 y: y,
-                label: [dateString, STATUS_NAME[status], nrMetricsLabel(y)],
+                label: [dateString, STATUS_SHORT_NAME[status], nrMetricsLabel(y)],
             })
         })
         return (
@@ -37,7 +37,6 @@ export function StatusBarChart({ animate, colors, events, height, label, maxY, s
                 barRatio={barRatio}
                 key={status}
                 style={style}
-                labels={() => null}
                 labelComponent={tooltip}
                 data={data}
                 animate={animate}

components/frontend/src/dashboard/StatusPieChart.js → components/frontend/src/dashboard/StatusPieChart.jsx

@@ -1,7 +1,7 @@
 import { arrayOf, element, number, object } from "prop-types"
 import { VictoryPie } from "victory"
 
-import { STATUS_COLORS, STATUS_NAME, STATUSES } from "../metric/status"
+import { STATUS_COLORS, STATUS_SHORT_NAME, STATUSES } from "../metric/status"
 import { labelPropType, stringsPropType } from "../sharedPropTypes"
 import { pluralize, sum } from "../utils"
 
@@ -21,7 +21,7 @@ export function StatusPieChart({ animate, colors, events, height, label, maxY, s
     const data = STATUSES.map((status) => {
         const y = summary[STATUS_COLORS[status]]
         const yPercentage = Math.round((y / nrMetrics) * 100)
-        return { y: y, label: `${STATUS_NAME[status]}\n${nrMetricsLabel(y)} (${yPercentage}%)` }
+        return { y: y, label: `${STATUS_SHORT_NAME[status]}\n${nrMetricsLabel(y)} (${yPercentage}%)` }
     })
     return (
         <>
@@ -35,7 +35,6 @@ export function StatusPieChart({ animate, colors, events, height, label, maxY, s
                     innerRadius={innerRadius}
                     standalone={false}
                     style={style}
-                    labels={() => null}
                     labelComponent={tooltip}
                     data={data}
                     width={width}

components/frontend/src/header_footer/buttons/DownloadAsPDFButton.test.js → components/frontend/src/header_footer/buttons/DownloadAsPDFButton.test.jsx

@@ -6,7 +6,7 @@ import * as toast from "../../widgets/toast"
 import { DownloadAsPDFButton } from "./DownloadAsPDFButton"
 
 jest.mock("../../api/report")
-jest.mock("../../widgets/toast.js")
+jest.mock("../../widgets/toast.jsx")
 
 beforeEach(() => {
     jest.resetAllMocks()

components/frontend/src/issue/IssuesRows.js → components/frontend/src/issue/IssuesRows.jsx

@@ -22,7 +22,9 @@ function CreateIssueButton({ issueTrackerConfigured, issueTrackerInstruction, me
             disabled={disabled || !issueTrackerConfigured}
             icon={<AddItemIcon />}
             itemType="issue"
-            onClick={() => add_metric_issue(metric_uuid, reload)}
+            onClick={() =>
+                add_metric_issue(metric_uuid, reload, (error) => showMessage("error", "Could not create issue", error))
+            }
             popup={
                 <>
                     Create a new issue for this {target} in the configured issue tracker and add its identifier to the

components/frontend/src/issue/IssuesRows.test.js → components/frontend/src/issue/IssuesRows.test.jsx

@@ -5,8 +5,14 @@ import * as fetch_server_api from "../api/fetch_server_api"
 import { EDIT_REPORT_PERMISSION, Permissions } from "../context/Permissions"
 import { expectNoAccessibilityViolations } from "../testUtils"
 import { IssuesRows } from "./IssuesRows"
+import * as toast from "../widgets/toast"
 
 jest.mock("../api/fetch_server_api.js")
+jest.mock("../widgets/toast.jsx")
+
+beforeEach(() => {
+    jest.resetAllMocks()
+})
 
 const reportWithIssueTracker = {
     issue_tracker: {
@@ -138,6 +144,21 @@ it("shows issue id suggestions", async () => {
     await expectNoAccessibilityViolations(container)
 })
 
+it("shows an error message if fetching suggestions fails", async () => {
+    fetch_server_api.fetch_server_api = jest.fn().mockRejectedValue(new Error("fetching suggestions failed"))
+    const { container } = renderIssuesRow({
+        report: { issue_tracker: { type: "Jira", parameters: { url: "https://jira" } } },
+    })
+    await userEvent.type(screen.getByLabelText(/Issue identifiers/), "u")
+    expect(toast.showMessage).toHaveBeenCalledTimes(1)
+    expect(toast.showMessage).toHaveBeenCalledWith(
+        "error",
+        "Could not fetch issue identifiers",
+        "Error: fetching suggestions failed",
+    )
+    await expectNoAccessibilityViolations(container)
+})
+
 it("shows no issue id suggestions without a query", async () => {
     fetch_server_api.fetch_server_api = jest
         .fn()

components/frontend/src/metric/TrendGraph.js → components/frontend/src/metric/TrendGraph.jsx

@@ -48,19 +48,11 @@ export function TrendGraph({ metric, measurements, loading }) {
     )
     let max_y = niceNumber(Math.max(...measurementValues))
     let measurementPoints = [] // The measurement values as (x, y) coordinates
-    let previousX2 = new Date("2000-01-01")
     measurements.forEach((measurement, index) => {
-        const x1 = new Date(measurement.start)
-        const x2 = new Date(measurement.end)
-        // Make sure each measurement has a positive width, or VictoryChart won't draw the area
-        if (x1.getTime() <= previousX2.getTime()) {
-            x1.setSeconds(x1.getSeconds() + (previousX2.getSeconds() - x1.getSeconds()) + 1)
-        }
-        if (x2.getTime() <= x1.getTime()) {
-            x2.setSeconds(x2.getSeconds() + (x1.getSeconds() - x2.getSeconds()) + 1)
-        }
-        previousX2 = x2
-        measurementPoints.push({ y: measurementValues[index], x: x1 }, { y: measurementValues[index], x: x2 })
+        measurementPoints.push(
+            { y: measurementValues[index], x: new Date(measurement.start) },
+            { y: measurementValues[index], x: new Date(measurement.end) },
+        )
     })
     const axisStyle = {
         axisLabel: { padding: 30, fontSize: 11, fill: color, fontFamily: fontFamily },

components/frontend/src/source/SourceEntities.js → components/frontend/src/source/SourceEntities.jsx

@@ -80,15 +80,6 @@ alignment.propTypes = {
     attributeAlignment: alignmentPropType,
 }
 
-function sorted(column, sortColumn, sortDirection) {
-    return column === sortColumn ? sortDirection : null
-}
-sorted.propTypes = {
-    column: string,
-    sortColumn: string,
-    sortDirection: sortDirectionPropType,
-}
-
 function EntityAttributeHeaderCell({ entityAttribute, ...sortProps }) {
     function handleSort(column) {
         sortProps.setColumnType(entityAttribute.type || "text")

components/frontend/src/source/Sources.test.js → components/frontend/src/source/Sources.test.jsx

@@ -9,7 +9,7 @@ import * as toast from "../widgets/toast"
 import { Sources } from "./Sources"
 
 jest.mock("../api/fetch_server_api.js")
-jest.mock("../widgets/toast.js")
+jest.mock("../widgets/toast.jsx")
 
 const dataModel = {
     metrics: { metric_type: { sources: ["source_type1", "source_type2"] } },

components/frontend/src/subject/SubjectTitle.js → components/frontend/src/subject/SubjectTitle.jsx

@@ -57,7 +57,7 @@ export function SubjectTitle({
     settings,
 }) {
     const dataModel = useContext(DataModel)
-    const subjectType = getSubjectType(subject.type, dataModel.subjects) || { name: "Unknown subject type" }
+    const subjectType = getSubjectType(subject.type, dataModel.subjects)
     const subjectName = subject.name || subjectType.name
     const subjectTitle = (atReportsOverview ? report.title + " ❯ " : "") + subjectName
     const subjectUrl = `${window.location}#${subject_uuid}`

components/frontend/src/utils.js → components/frontend/src/utils.jsx

@@ -77,10 +77,11 @@ export function getSubjectType(subjectTypeKey, subjects) {
     }
     for (const childSubject of childSubjects(subjects)) {
         const result = getSubjectType(subjectTypeKey, childSubject.subjects)
-        if (result) {
+        if (result.name !== "Unknown subject type") {
             return result
         }
     }
+    return { name: "Unknown subject type" }
 }
 getSubjectType.propTypes = {
     subjectTypeKey: string,

components/frontend/src/utils.test.js → components/frontend/src/utils.test.jsx

@@ -158,6 +158,12 @@ it("gets the subject type recursively from the second subject type", () => {
     ).toStrictEqual(subject)
 })
 
+it("gets an unknown subject type", () => {
+    expect(getSubjectType("other subject", { subject: { name: "Subject" } })).toStrictEqual({
+        name: "Unknown subject type",
+    })
+})
+
 it("gets the subject type metrics", () => {
     expect(getSubjectTypeMetrics("subject", { subject: { metrics: ["metric"] } })).toStrictEqual(["metric"])
 })

components/frontend/src/widgets/icons.js → components/frontend/src/widgets/icons.jsx

@@ -1,7 +1,6 @@
 import AddIcon from "@mui/icons-material/Add"
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
 import ArrowRightIcon from "@mui/icons-material/ArrowRight"
-import CalendarMonthIcon from "@mui/icons-material/CalendarMonth"
 import ContentCopyIcon from "@mui/icons-material/ContentCopy"
 import DeleteIcon from "@mui/icons-material/Delete"
 import LoopIcon from "@mui/icons-material/Loop"
@@ -15,10 +14,6 @@ export function AddItemIcon() {
     return <AddIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
 }
 
-export function CalendarIcon() {
-    return <CalendarMonthIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
-}
-
 export function CaretDown({ size }) {
     return <ArrowDropDownIcon title="expand" sx={{ verticalAlign: "middle", fontSize: size || "2.5em" }} />
 }

sonar-project.properties

@@ -11,7 +11,7 @@ sonar.python.version=3.13
 
 # Exclude third party software and generated code from analysis
 sonar.exclusions=**/coverage/**/*,**/build/**/*,**/node_modules/**/*
-sonar.coverage.exclusions=components/frontend/coverage/**/*,**/*.test.js,**/src/index.js,**/setupTests.js,**/ci/**/*,**/build/**/*,docs/**/*,**/setup.py,**/tests/*.py
+sonar.coverage.exclusions=components/frontend/coverage/**/*,**/*.test.js?,**/src/index.jsx,**/setupTests.js,**/ci/**/*,**/build/**/*,docs/**/*,**/setup.py,**/tests/*.py
 
 # Unit tests
 sonar.python.xunit.reportPath=components/**/build/unittests.xml