Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test with Semantic UI React 3.0.0-beta. #7457

Closed
wants to merge 1 commit into from
Closed

Test with Semantic UI React 3.0.0-beta. #7457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11,366 changes: 7,711 additions & 3,655 deletions components/frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion components/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"react-is": "^18.3.1",
"react-timeago": "^7.2.0",
"react-toastify": "^10.0.5",
"semantic-ui-react": "^2.1.5",
"semantic-ui-react": "^3.0.0-beta.2",
"use-local-storage-state": "^19.2.0",
"victory": "^37.0.2"
},
Expand Down
4 changes: 2 additions & 2 deletions components/frontend/src/measurement/MeasurementTarget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ 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}>
<Popup hoverable on={["hover", "focus"]} trigger={<span>{label}</span>}>
{popupText(metric, debtEndDateInThePast, allIssuesDone, dataModel)}
</Popup>
)
Expand Down
4 changes: 2 additions & 2 deletions components/frontend/src/measurement/MeasurementValue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export function MeasurementValue({ metric, reportDate }) {
const end = new Date(metric.latest_measurement.end)
const now = reportDate ?? new Date()
const staleMeasurementValue = now - end > MILLISECONDS_PER_HOUR // No new measurement for more than one hour means something is wrong
const trigger = staleMeasurementValue ? <Label color="red">{value}</Label> : <span>{value}</span>
const trigger = staleMeasurementValue ? <Label color="red">{value}</Label> : value
return (
<Popup trigger={trigger} flowing hoverable>
<Popup trigger={<span>{trigger}</span>} flowing hoverable>
{staleMeasurementValue && (
<Message
negative
Expand Down
6 changes: 5 additions & 1 deletion components/frontend/src/measurement/SourceStatus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ export function SourceStatus({ metric, measurement_source }) {
flowing
header={header}
hoverable
trigger={<Label color="red">{source_label(true)}</Label>}
trigger={
<span>
<Label color="red">{source_label(true)}</Label>
</span>
}
/>
)
} else {
Expand Down
10 changes: 3 additions & 7 deletions components/frontend/src/measurement/TimeLeft.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,11 @@ export function TimeLeft({ metric, report }) {
}
const timeLeft = getMetricResponseTimeLeft(metric, report)
const daysLeft = days(Math.max(0, timeLeft))
const deadlineLabel = timeLeft >= 0 ? "Time left to address this metric is" : "Deadline to address this metric was"
const triggerText = `${daysLeft} ${pluralize("day", daysLeft)}`
let deadlineLabel = "Deadline to address this metric was"
let trigger = <Label color="red">{triggerText}</Label>
if (timeLeft >= 0) {
deadlineLabel = "Time left to address this metric is"
trigger = <span>{triggerText}</span>
}
const trigger = timeLeft >= 0 ? triggerText : <Label color="red">{triggerText}</Label>
return (
<Popup flowing hoverable trigger={trigger}>
<Popup flowing hoverable trigger={<span>{trigger}</span>}>
<TimeAgoWithDate date={deadline}>{deadlineLabel}</TimeAgoWithDate>.
</Popup>
)
Expand Down
16 changes: 9 additions & 7 deletions components/frontend/src/source/SourceEntities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,15 @@ export function SourceEntities({ metric, metric_uuid, reload, report, source })
<Table.HeaderCell collapsing textAlign="center">
<Popup
trigger={
<Button
basic
compact
icon={hideIgnoredEntities ? "unhide" : "hide"}
onClick={() => setHideIgnoredEntities(!hideIgnoredEntities)}
primary
/>
<span>
<Button
basic
compact
icon={hideIgnoredEntities ? "unhide" : "hide"}
onClick={() => setHideIgnoredEntities(!hideIgnoredEntities)}
primary
/>
</span>
}
content={
hideIgnoredEntities
Expand Down
178 changes: 90 additions & 88 deletions components/frontend/src/widgets/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,107 +49,109 @@ export function AddDropdownButton({ itemSubtypes, itemType, onClick, allItemSubt
onClose={() => setPopupTriggered(false)}
open={!menuOpen && popupTriggered}
trigger={
<Dropdown
basic
className="button icon primary"
floating
onBlur={() => setQuery("")}
onClose={() => setMenuOpen(false)}
onKeyDown={(event) => {
if (!menuOpen) {
return
}
if (event.key === "Escape") {
setQuery("")
}
if (inputRef.current?.inputRef?.current !== document.activeElement) {
// Allow for editing the query without the input having focus
if (event.key === "Backspace") {
setQuery(query.slice(0, query.length - 1))
} else if (event.key.length === 1) {
setQuery(query + event.key)
<div style={{ "display": "inline-block" }}>
<Dropdown
basic
className="button icon primary"
floating
onBlur={() => setQuery("")}
onClose={() => setMenuOpen(false)}
onKeyDown={(event) => {
if (!menuOpen) {
return
}
}
if (options.length === 0) {
return
}
if (event.key === "ArrowUp" || event.key === "ArrowDown") {
let newIndex
if (event.key === "ArrowUp") {
newIndex = Math.max(selectedItem - 1, 0)
} else {
newIndex = Math.min(selectedItem + 1, options.length - 1)
if (event.key === "Escape") {
setQuery("")
}
if (inputRef.current?.inputRef?.current !== document.activeElement) {
// Allow for editing the query without the input having focus
if (event.key === "Backspace") {
setQuery(query.slice(0, query.length - 1))
} else if (event.key.length === 1) {
setQuery(query + event.key)
}
}
setSelectedItem(newIndex)
event.target
.querySelectorAll("[role='option']")
if (options.length === 0) {
return
}
if (event.key === "ArrowUp" || event.key === "ArrowDown") {
let newIndex
if (event.key === "ArrowUp") {
newIndex = Math.max(selectedItem - 1, 0)
} else {
newIndex = Math.min(selectedItem + 1, options.length - 1)
}
setSelectedItem(newIndex)
event.target
.querySelectorAll("[role='option']")
[newIndex]?.scrollIntoView({ block: "nearest" })
}
if (event.key === "Enter") {
onClick(options[selectedItem].value)
}
}}
onOpen={() => setMenuOpen(true)}
selectOnBlur={false}
selectOnNavigation={false}
trigger={
<>
<Icon name="add" /> {`Add ${itemType} `}
</>
}
if (event.key === "Enter") {
onClick(options[selectedItem].value)
}
}}
onOpen={() => setMenuOpen(true)}
selectOnBlur={false}
selectOnNavigation={false}
trigger={
<>
<Icon name="add" /> {`Add ${itemType} `}
</>
}
value={null} // Without this, a selected item becomes active (shown bold in the menu) and can't be selected again
>
<Dropdown.Menu>
<Dropdown.Header>{`Available ${itemType} types`}</Dropdown.Header>
<Dropdown.Divider />
<Input
className="search"
focus
icon="search"
iconPosition="left"
onBlur={(event) => {
if (allItemSubtypes) {
event.stopPropagation()
} // Prevent tabbing to the checkbox from clearing the input
}}
onChange={(_event, { value }) => setQuery(value)}
onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => {
if (event.key === " ") {
event.stopPropagation() // Prevent space from closing menu
}
}}
ref={inputRef}
placeholder={`Filter ${itemType} types`}
value={query}
/>
{allItemSubtypes && (
<Checkbox
label={`Select from all ${itemType} types`}
onChange={() => setShowAllItems(!showAllItems)}
value={null} // Without this, a selected item becomes active (shown bold in the menu) and can't be selected again
>
<Dropdown.Menu>
<Dropdown.Header>{`Available ${itemType} types`}</Dropdown.Header>
<Dropdown.Divider />
<Input
className="search"
focus
icon="search"
iconPosition="left"
onBlur={(event) => {
if (allItemSubtypes) {
event.stopPropagation()
} // Prevent tabbing to the checkbox from clearing the input
}}
onChange={(_event, { value }) => setQuery(value)}
onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => {
if (event.key === " ") {
event.stopPropagation() // Prevent space from closing menu
}
}}
style={{ paddingLeft: "10pt", paddingBottom: "10pt" }}
tabIndex={0}
value={showAllItems ? 1 : 0}
ref={inputRef}
placeholder={`Filter ${itemType} types`}
value={query}
/>
)}
<Dropdown.Menu scrolling>
{options.map((option, index) => (
<Dropdown.Item
key={option.key}
onClick={(_event, { value }) => onClick(value)}
selected={selectedItem === index}
{...option}
{allItemSubtypes && (
<Checkbox
label={`Select from all ${itemType} types`}
onChange={() => setShowAllItems(!showAllItems)}
onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => {
if (event.key === " ") {
event.stopPropagation() // Prevent space from closing menu
}
}}
style={{ paddingLeft: "10pt", paddingBottom: "10pt" }}
tabIndex={0}
value={showAllItems ? 1 : 0}
/>
))}
)}
<Dropdown.Menu scrolling>
{options.map((option, index) => (
<Dropdown.Item
key={option.key}
onClick={(_event, { value }) => onClick(value)}
selected={selectedItem === index}
{...option}
/>
))}
</Dropdown.Menu>
</Dropdown.Menu>
</Dropdown.Menu>
</Dropdown>
</Dropdown>
</div>
}
/>
)
Expand Down
Loading