Fix prop-type warnings in the frontend.

ICTU · Jun 24, 2024 · bbc0643 · bbc0643
1 parent c91f202
commit bbc0643
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 68 deletions.
diff --git a/components/frontend/package-lock.json b/components/frontend/package-lock.json
diff --git a/components/frontend/package.json b/components/frontend/package.json
@@ -59,6 +59,7 @@
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-promise": "^6.2.0",
         "eslint-plugin-react": "^7.34.3",
+        "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-simple-import-sort": "^12.1.0",
         "globals": "^15.5.0",
         "prettier": "^3.3.2",

diff --git a/components/frontend/src/dashboard/CardDashboard.js b/components/frontend/src/dashboard/CardDashboard.js
@@ -1,9 +1,8 @@
-import { array, arrayOf, bool, func } from "prop-types"
+import { array, arrayOf, bool, element, func } from "prop-types"
 import { useEffect, useState } from "react"
 import RGL, { WidthProvider } from "react-grid-layout"
 
 import { accessGranted, EDIT_REPORT_PERMISSION, Permissions } from "../context/Permissions"
-import { Card } from "../semantic_ui_react_wrappers"
 
 const ReactGridLayout = WidthProvider(RGL)
 
@@ -23,7 +22,7 @@ function cardDivs(cards, dragging, isDragging) {
     ))
 }
 cardDivs.propTypes = {
-    cards: arrayOf(Card),
+    cards: arrayOf(element),
     dragging: bool,
     isDragging: func,
 }
@@ -106,7 +105,7 @@ export function CardDashboard({ cards, initialLayout, saveLayout }) {
     )
 }
 CardDashboard.propTypes = {
-    cards: arrayOf(Card),
+    cards: arrayOf(element),
     initialLayout: array,
     saveLayout: func,
 }
diff --git a/components/frontend/src/dashboard/CardDashboard.test.js b/components/frontend/src/dashboard/CardDashboard.test.js
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react"
 
+import { DarkMode } from "../context/DarkMode"
 import { EDIT_REPORT_PERMISSION, Permissions } from "../context/Permissions"
 import { CardDashboard } from "./CardDashboard"
 import { MetricSummaryCard } from "./MetricSummaryCard"
@@ -9,56 +10,53 @@ beforeEach(() => mockGetAnimations())
 
 afterEach(() => jest.restoreAllMocks())
 
-it("returns null without cards", () => {
-    const { container } = render(
-        <div id="dashboard">
-            <CardDashboard cards={[]} />
-        </div>,
+function renderCardDashboard({ cards = [], initialLayout = [], saveLayout = jest.fn } = {}) {
+    return render(
+        <DarkMode.Provider value={false}>
+            <Permissions.Provider value={[EDIT_REPORT_PERMISSION]}>
+                <div id="dashboard">
+                    <CardDashboard cards={cards} initialLayout={initialLayout} saveLayout={saveLayout} />
+                </div>
+            </Permissions.Provider>
+        </DarkMode.Provider>,
     )
+}
+
+it("returns null without cards", () => {
+    const { container } = renderCardDashboard()
     expect(container.children[0].children.length).toBe(0)
 })
 
 it("adds the card to the dashboard", () => {
-    const { container } = render(
-        <div id="dashboard">
-            <CardDashboard
-                cards={[
-                    <MetricSummaryCard
-                        key="card"
-                        header="Card"
-                        summary={{
-                            date: { blue: 0, red: 1, green: 2, yellow: 1, white: 0, grey: 0 },
-                        }}
-                    />,
-                ]}
-                initialLayout={[]}
-            />
-        </div>,
-    )
+    const { container } = renderCardDashboard({
+        cards: [
+            <MetricSummaryCard
+                header="Card"
+                key="card"
+                summary={{
+                    date: { blue: 0, red: 1, green: 2, yellow: 1, white: 0, grey: 0 },
+                }}
+            />,
+        ],
+    })
     expect(container.children.length).toBe(1)
 })
 
 it("does not save the layout after click", async () => {
     const mockCallback = jest.fn()
-    render(
-        <div id="dashboard">
-            <Permissions.Provider value={[EDIT_REPORT_PERMISSION]}>
-                <CardDashboard
-                    cards={[
-                        <MetricSummaryCard
-                            key="card"
-                            header="Card"
-                            summary={{
-                                date: { blue: 0, red: 1, green: 2, yellow: 1, white: 0, grey: 0 },
-                            }}
-                        />,
-                    ]}
-                    initialLayout={[{ h: 6, w: 4, x: 0, y: 0 }]}
-                    saveLayout={mockCallback}
-                />
-            </Permissions.Provider>
-        </div>,
-    )
+    renderCardDashboard({
+        cards: [
+            <MetricSummaryCard
+                header="Card"
+                key="card"
+                summary={{
+                    date: { blue: 0, red: 1, green: 2, yellow: 1, white: 0, grey: 0 },
+                }}
+            />,
+        ],
+        initialLayout: [{ h: 6, w: 4, x: 0, y: 0 }],
+        saveLayout: mockCallback,
+    })
     fireEvent.click(screen.getByText("Card"))
     expect(mockCallback).not.toHaveBeenCalled()
 })
diff --git a/components/frontend/src/dashboard/MetricSummaryCard.js b/components/frontend/src/dashboard/MetricSummaryCard.js
@@ -49,10 +49,10 @@ function ariaChartLabel(summary) {
 
 export function MetricSummaryCard({ header, onClick, selected, summary, maxY }) {
     const [boundingBox, ref] = useBoundingBox()
-    const animate = { duration: 0, onLoad: { duration: 0 } }
-    const colors = STATUSES.map((status) => STATUS_COLORS_RGB[status])
     const labelColor = useContext(DarkMode) ? "darkgrey" : "rgba(120, 120, 120)"
     const flyoutBgColor = useContext(DarkMode) ? "rgba(60, 65, 70)" : "white"
+    const animate = { duration: 0, onLoad: { duration: 0 } }
+    const colors = STATUSES.map((status) => STATUS_COLORS_RGB[status])
     const style = {
         labels: { fontFamily: "Arial", fontSize: 12, fill: labelColor },
     }

diff --git a/components/frontend/src/measurement/TrendSparkline.test.js b/components/frontend/src/measurement/TrendSparkline.test.js
@@ -15,7 +15,7 @@ it("renders an empty sparkline if there are no measurements", () => {
 
 it("renders an empty sparkline if there are no measurements in dark mode", () => {
     render(
-        <DarkMode.Provider value="true">
+        <DarkMode.Provider value={true}>
             <TrendSparkline measurements={[]} />
         </DarkMode.Provider>,
     )

diff --git a/components/frontend/src/metric/MetricDetails.js b/components/frontend/src/metric/MetricDetails.js
@@ -206,7 +206,11 @@ export function MetricDetails({
             panes.push({
                 menuItem: (
                     <Menu.Item key="trend_graph">
-                        <Icon name="linegraph" />
+                        <Icon
+                            className="linegraph"
+                            /* Using name="linegraph" results in "Invalid prop `name` of value `linegraph` supplied to `Icon`."
+                               Using name="line graph" does not show the icon. Using className works around this. */
+                        />
                         <FocusableTab>{"Trend graph"}</FocusableTab>
                     </Menu.Item>
                 ),

diff --git a/components/frontend/src/metric/MetricDetails.test.js b/components/frontend/src/metric/MetricDetails.test.js
@@ -148,7 +148,9 @@ it("removes the existing hashtag from the URL to share", async () => {
         clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
     })
     await renderMetricDetails()
-    fireEvent.click(screen.getByText(/Share/))
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Share/))
+    })
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith("http://localhost/#metric_uuid")
 })
 

diff --git a/components/frontend/src/report/Report.js b/components/frontend/src/report/Report.js
@@ -4,7 +4,7 @@ import { ExportCard } from "../dashboard/ExportCard"
 import {
     datePropType,
     datesPropType,
-    measurementPropType,
+    measurementsPropType,
     optionalDatePropType,
     reportPropType,
     reportsPropType,
@@ -97,7 +97,7 @@ Report.propTypes = {
     dates: datesPropType,
     handleSort: func,
     lastUpdate: datePropType,
-    measurements: measurementPropType,
+    measurements: measurementsPropType,
     openReportsOverview: func,
     reload: func,
     report: reportPropType,

diff --git a/components/frontend/src/report/ReportDashboard.js b/components/frontend/src/report/ReportDashboard.js
@@ -9,7 +9,7 @@ import { LegendCard } from "../dashboard/LegendCard"
 import { MetricsRequiringActionCard } from "../dashboard/MetricsRequiringActionCard"
 import { MetricSummaryCard } from "../dashboard/MetricSummaryCard"
 import { STATUS_COLORS } from "../metric/status"
-import { datesPropType, measurementPropType, reportPropType, settingsPropType } from "../sharedPropTypes"
+import { datesPropType, measurementsPropType, reportPropType, settingsPropType } from "../sharedPropTypes"
 import { getMetricTags, getReportTags, getSubjectName, nrMetricsInReport, visibleMetrics } from "../utils"
 import { Tag } from "../widgets/Tag"
 import { metricStatusOnDate } from "./report_utils"
@@ -120,7 +120,7 @@ export function ReportDashboard({ dates, measurements, onClick, onClickTag, relo
 }
 ReportDashboard.propTypes = {
     dates: datesPropType,
-    measurements: measurementPropType,
+    measurements: measurementsPropType,
     onClick: func,
     onClickTag: func,
     reload: func,

diff --git a/components/frontend/src/report/ReportsOverview.js b/components/frontend/src/report/ReportsOverview.js
@@ -7,7 +7,7 @@ import { Segment } from "../semantic_ui_react_wrappers"
 import {
     datePropType,
     datesPropType,
-    measurementPropType,
+    measurementsPropType,
     optionalDatePropType,
     reportsOverviewPropType,
     reportsPropType,
@@ -112,7 +112,7 @@ ReportsOverview.propTypes = {
     dates: datesPropType,
     handleSort: func,
     lastUpdate: datePropType,
-    measurements: measurementPropType,
+    measurements: measurementsPropType,
     reports: reportsPropType,
     openReport: func,
     reload: func,

diff --git a/components/frontend/src/report/ReportsOverviewDashboard.js b/components/frontend/src/report/ReportsOverviewDashboard.js
@@ -8,7 +8,7 @@ import { LegendCard } from "../dashboard/LegendCard"
 import { MetricsRequiringActionCard } from "../dashboard/MetricsRequiringActionCard"
 import { MetricSummaryCard } from "../dashboard/MetricSummaryCard"
 import { STATUS_COLORS } from "../metric/status"
-import { datesPropType, measurementPropType, reportsPropType, settingsPropType } from "../sharedPropTypes"
+import { datesPropType, measurementsPropType, reportsPropType, settingsPropType } from "../sharedPropTypes"
 import { getMetricTags, getReportsTags, nrMetricsInReport, sum, visibleMetrics } from "../utils"
 import { Tag } from "../widgets/Tag"
 import { metricStatusOnDate } from "./report_utils"
@@ -141,7 +141,7 @@ export function ReportsOverviewDashboard({
 ReportsOverviewDashboard.propTypes = {
     dates: datesPropType,
     layout: array,
-    measurements: measurementPropType,
+    measurements: measurementsPropType,
     onClickTag: func,
     openReport: func,
     reload: func,

diff --git a/components/frontend/src/semantic_ui_react_wrappers/Card.js b/components/frontend/src/semantic_ui_react_wrappers/Card.js
@@ -10,9 +10,8 @@ export function Card(props) {
     return <SemanticUICard {...addInvertedClassNameWhenInDarkMode(props, useContext(DarkMode))} />
 }
 
-function Header(props) {
-    return <SemanticUICard.Header {...addInvertedClassNameWhenInDarkMode(props, useContext(DarkMode))} />
-}
-
 Card.Content = SemanticUICard.Content
-Card.Header = Header
+Card.Description = SemanticUICard.Description
+Card.Group = SemanticUICard.Group
+Card.Header = SemanticUICard.Header
+Card.Meta = SemanticUICard.Meta
diff --git a/components/frontend/src/sharedPropTypes.js b/components/frontend/src/sharedPropTypes.js
@@ -105,7 +105,7 @@ export const entityPropType = shape({
     key: string,
 })
 
-const entityAttributePropType = shape({
+export const entityAttributePropType = shape({
     key: string,
 })
 

diff --git a/components/frontend/src/source/SourceEntityAttribute.js b/components/frontend/src/source/SourceEntityAttribute.js
@@ -1,7 +1,5 @@
-import { string } from "prop-types"
-
 import { StatusIcon } from "../measurement/StatusIcon"
-import { entityPropType } from "../sharedPropTypes"
+import { entityAttributePropType, entityPropType } from "../sharedPropTypes"
 import { formatMetricValue } from "../utils"
 import { HyperLink } from "../widgets/HyperLink"
 import { TimeAgoWithDate } from "../widgets/TimeAgoWithDate"
@@ -45,5 +43,5 @@ export function SourceEntityAttribute({ entity, entityAttribute }) {
 }
 SourceEntityAttribute.propTypes = {
     entity: entityPropType,
-    entityAttribute: string,
+    entityAttribute: entityAttributePropType,
 }
diff --git a/components/frontend/src/widgets/Button.test.js b/components/frontend/src/widgets/Button.test.js
@@ -327,7 +327,6 @@ test("PermLinkButton copies URL to clipboard", async () => {
         clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
     })
     render(<PermLinkButton itemType="metric" url="https://example.org" />)
-    screen.debug()
     await act(async () => {
         fireEvent.click(screen.getByText(/Share/))
     })