Skip to content

Commit

Permalink
Test with Semantic UI React 3.0.0-beta.
Browse files Browse the repository at this point in the history
  • Loading branch information
@fniessink
fniessink committed Apr 27, 2024
1 parent da55978 commit 23d643e
Show file tree
Hide file tree
Showing 8 changed files with 8,076 additions and 9,111 deletions.
16,915 changes: 7,936 additions & 8,979 deletions components/frontend/package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion components/frontend/package.json
View file
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
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
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
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
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
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
230 changes: 118 additions & 112 deletions components/frontend/src/widgets/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,93 +47,95 @@ export function AddDropdownButton({ itemSubtypes, itemType, onClick }) {
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("")
}
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} `}
</>
}
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>
{itemSubtypes.length > 5 && (
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)
}
}
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={
<>
<Dropdown.Divider />
<Input
className="search"
focus
icon="search"
iconPosition="left"
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 available ${itemType} types`}
value={query}
/>
<Icon name="add" /> {`Add ${itemType} `}
</>
)}
<Dropdown.Menu scrolling>
{options.map((option, index) => (
<Dropdown.Item
key={option.key}
onClick={(_event, { value }) => onClick(value)}
selected={selectedItem === index}
{...option}
/>
))}
}
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>
{itemSubtypes.length > 5 && (
<>
<Dropdown.Divider />
<Input
className="search"
focus
icon="search"
iconPosition="left"
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 available ${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}
/>
))}
</Dropdown.Menu>
</Dropdown.Menu>
</Dropdown.Menu>
</Dropdown>
</Dropdown>
</div>
}
/>
)
Expand Down Expand Up @@ -187,14 +189,16 @@ function ReorderButton(props) {
<Popup
content={label}
trigger={
<Button
aria-label={label}
basic
disabled={disabled}
icon={`angle ${icon}`}
onClick={() => props.onClick(props.direction)}
primary
/>
<span>
<Button
aria-label={label}
basic
disabled={disabled}
icon={`angle ${icon}`}
onClick={() => props.onClick(props.direction)}
primary
/>
</span>
}
/>
)
Expand Down Expand Up @@ -236,28 +240,30 @@ function ActionAndItemPickerButton({ action, itemType, onChange, get_options, ic
<Popup
content={`${action} an existing ${itemType} here`}
trigger={
<Dropdown
basic
className="button icon primary"
floating
header={
<Dropdown.Header>
<ItemBreadcrumb size="tiny" {...breadcrumbProps} />
</Dropdown.Header>
}
options={options}
onChange={(_event, { value }) => onChange(value)}
onOpen={() => setOptions(get_options())}
scrolling
selectOnBlur={false}
selectOnNavigation={false}
trigger={
<>
<Icon name={icon} /> {`${action} ${itemType} `}
</>
}
value={null} // Without this, a selected item becomes active (shown bold in the menu) and can't be selected again
/>
<div style={{ display: "inline-block" }}>
<Dropdown
basic
className="button icon primary"
floating
header={
<Dropdown.Header>
<ItemBreadcrumb size="tiny" {...breadcrumbProps} />
</Dropdown.Header>
}
options={options}
onChange={(_event, { value }) => onChange(value)}
onOpen={() => setOptions(get_options())}
scrolling
selectOnBlur={false}
selectOnNavigation={false}
trigger={
<>
<Icon name={icon} /> {`${action} ${itemType} `}
</>
}
value={null} // Without this, a selected item becomes active (shown bold in the menu) and can't be selected again
/>
</div>
}
/>
)
Expand Down

0 comments on commit 23d643e

Please sign in to comment.