Skip to content

Commit

Permalink
Migrate SUIR compoenents to MUI.
Browse files Browse the repository at this point in the history
  • Loading branch information
@fniessink
fniessink committed Dec 24, 2024
1 parent 7f52974 commit 6030f59
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 65 deletions.
36 changes: 28 additions & 8 deletions components/frontend/src/issue/IssueStatus.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
import { Tooltip } from "@mui/material"
import { bool, string } from "prop-types"
import TimeAgo from "react-timeago"

import { Label, Popup } from "../semantic_ui_react_wrappers"
import { Label } from "../semantic_ui_react_wrappers"
import { issueStatusPropType, metricPropType, settingsPropType, stringsPropType } from "../sharedPropTypes"
import { getMetricIssueIds, ISSUE_STATUS_COLORS } from "../utils"
import { HyperLink } from "../widgets/HyperLink"
import { TimeAgoWithDate } from "../widgets/TimeAgoWithDate"

function IssueWithoutTracker({ issueId }) {
return (
<Popup
content={
"Please configure an issue tracker by expanding the report title, selecting the 'Issue tracker' tab, and configuring an issue tracker."
<Tooltip
title={
<>
<h4>No issue tracker configured</h4>
<p>
Please configure an issue tracker by expanding the report title, selecting the &lsquo;Issue
tracker&rsquo; tab, and configuring an issue tracker.
</p>
</>
}
header={"No issue tracker configured"}
trigger={<Label color="red">{issueId}</Label>}
/>
>
<span>
<Label color="red">{issueId}</Label>
</span>
</Tooltip>
)
}
IssueWithoutTracker.propTypes = {
Expand Down Expand Up @@ -160,7 +169,18 @@ function IssueWithTracker({ issueStatus, settings }) {
popupContent = issuePopupContent(issueStatus)
}
if (popupContent) {
label = <Popup header={popupHeader} content={popupContent} flowing hoverable trigger={label} />
label = (
<Tooltip
title={
<>
<h4>{popupHeader}</h4>
<p>{popupContent}</p>
</>
}
>
{label}
</Tooltip>
)
}
return label
}
Expand Down
11 changes: 6 additions & 5 deletions components/frontend/src/measurement/MeasurementTarget.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Tooltip } from "@mui/material"
import { useContext } from "react"

import { DataModel } from "../context/DataModel"
import { Label, Popup } from "../semantic_ui_react_wrappers"
import { Label } from "../semantic_ui_react_wrappers"
import { metricPropType } from "../sharedPropTypes"
import {
formatMetricDirection,
Expand Down Expand Up @@ -59,11 +60,11 @@ export function MeasurementTarget({ metric }) {
const today = new Date()
debtEndDateInThePast = endDate.toISOString().split("T")[0] < today.toISOString().split("T")[0]
}
const label = allIssuesDone || debtEndDateInThePast ? <Label color="grey">{target}</Label> : <span>{target}</span>
const label = allIssuesDone || debtEndDateInThePast ? <Label color="grey">{target}</Label> : target
return (
<Popup hoverable on={["hover", "focus"]} trigger={label}>
{popupText(metric, debtEndDateInThePast, allIssuesDone, dataModel)}
</Popup>
<Tooltip title={<span>{popupText(metric, debtEndDateInThePast, allIssuesDone, dataModel)}</span>}>
<span>{label}</span>
</Tooltip>
)
}
MeasurementTarget.propTypes = {
Expand Down
115 changes: 63 additions & 52 deletions components/frontend/src/measurement/Overrun.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Tooltip,
Typography,
} from "@mui/material"
import { string } from "prop-types"
import { useContext } from "react"

import { DataModel } from "../context/DataModel"
import { Header, Popup, Table } from "../semantic_ui_react_wrappers"
import { datesPropType, measurementsPropType, metricPropType, reportPropType } from "../sharedPropTypes"
import { getMetricResponseOverrun, pluralize } from "../utils"
import { StatusIcon } from "./StatusIcon"
Expand All @@ -23,59 +33,60 @@ export function Overrun({ metric_uuid, metric, report, measurements, dates }) {
const period = `${sortedDates.at(0).toLocaleDateString()} - ${sortedDates.at(-1).toLocaleDateString()}`
const content = (
<>
<Header>
<Header.Content>
Metric reaction time overruns
<Header.Subheader>In the period {period}</Header.Subheader>
</Header.Content>
</Header>
<Table compact size="small">
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign="center" colSpan="3">
When did the metric need action?
</Table.HeaderCell>
<Table.HeaderCell textAlign="center" colSpan="3">
How long did it take to react?
</Table.HeaderCell>
</Table.Row>
<Table.Row>
<Table.HeaderCell textAlign="center">Status</Table.HeaderCell>
<Table.HeaderCell textAlign="center">Start</Table.HeaderCell>
<Table.HeaderCell textAlign="center">End</Table.HeaderCell>
<Table.HeaderCell textAlign="right">Actual</Table.HeaderCell>
<Table.HeaderCell textAlign="right">Desired</Table.HeaderCell>
<Table.HeaderCell textAlign="right">Overrun</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{overruns.map((overrun) => (
<Table.Row key={overrun.start}>
<Table.Cell textAlign="center">
<StatusIcon size="small" status={overrun.status} />
</Table.Cell>
<Table.Cell>{overrun.start.split("T")[0]}</Table.Cell>
<Table.Cell>{overrun.end.split("T")[0]}</Table.Cell>
<Table.Cell textAlign="right">{formatDays(overrun.actual_response_time)}</Table.Cell>
<Table.Cell textAlign="right">{formatDays(overrun.desired_response_time)}</Table.Cell>
<Table.Cell textAlign="right">{formatDays(overrun.overrun)}</Table.Cell>
</Table.Row>
))}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan="5">
<b>Total</b>
</Table.HeaderCell>
<Table.HeaderCell textAlign="right">
<b>{triggerText}</b>
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
<Typography>Metric reaction time overruns in the period {period}</Typography>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell textAlign="center" colSpan="3">
When did the metric need action?
</TableCell>
<TableCell textAlign="center" colSpan="3">
How long did it take to react?
</TableCell>
</TableRow>
<TableRow>
<TableCell textAlign="center">Status</TableCell>
<TableCell textAlign="center">Start</TableCell>
<TableCell textAlign="center">End</TableCell>
<TableCell textAlign="right">Actual</TableCell>
<TableCell textAlign="right">Desired</TableCell>
<TableCell textAlign="right">Overrun</TableCell>
</TableRow>
</TableHead>
<TableBody>
{overruns.map((overrun) => (
<TableRow key={overrun.start}>
<TableCell textAlign="center">
<StatusIcon size="small" status={overrun.status} />
</TableCell>
<TableCell>{overrun.start.split("T")[0]}</TableCell>
<TableCell>{overrun.end.split("T")[0]}</TableCell>
<TableCell textAlign="right">{formatDays(overrun.actual_response_time)}</TableCell>
<TableCell textAlign="right">{formatDays(overrun.desired_response_time)}</TableCell>
<TableCell textAlign="right">{formatDays(overrun.overrun)}</TableCell>
</TableRow>
))}
</TableBody>
<TableHead>
<TableRow>
<TableCell colSpan="5">
<b>Total</b>
</TableCell>
<TableCell textAlign="right">
<b>{triggerText}</b>
</TableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
</>
)
return <Popup content={content} flowing hoverable trigger={trigger} />
return (
<Tooltip slotProps={{ tooltip: { sx: { maxWidth: "32em" } } }} title={content}>
{trigger}
</Tooltip>
)
}
Overrun.propTypes = {
dates: datesPropType,
Expand Down

0 comments on commit 6030f59

Please sign in to comment.