Skip to content

Commit

Permalink
Upgrade to Semantic UI React v3.
Browse files Browse the repository at this point in the history 
Closes #8764.
  • Loading branch information
@fniessink
fniessink committed Jul 5, 2024
1 parent 550ab3f commit c53f5f3
Show file tree
Hide file tree
Showing 7 changed files with 11,545 additions and 12,940 deletions.
24,251 changes: 11,424 additions & 12,827 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.3.1",
"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 @@ -59,9 +59,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
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
4 changes: 2 additions & 2 deletions components/frontend/src/measurement/TimeLeft.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ export function TimeLeft({ metric, report }) {
let trigger = <Label color="red">{triggerText}</Label>
if (timeLeft >= 0) {
deadlineLabel = "Time left to address this metric is"
trigger = <span>{triggerText}</span>
trigger = triggerText
}
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
202 changes: 102 additions & 100 deletions components/frontend/src/widgets/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,110 +116,112 @@ export function AddDropdownButton({ itemSubtypes, itemType, onClick, allItemSubt
}
const options = items.filter((itemSubtype) => itemSubtype.text.toLowerCase().includes(query.toLowerCase()))
return (
<Popup
content={`Add a new ${itemType} here`}
on={["focus", "hover"]}
onOpen={() => setPopupTriggered(true)}
onClose={() => setPopupTriggered(false)}
open={!menuOpen && popupTriggered}
trigger={
<Dropdown
basic
className="button icon primary"
floating
onClose={() => setMenuOpen(false)}
onKeyDown={(event) => {
if (!menuOpen) {
return
}
if (event.key === "Escape") {
setQuery("")
}
if (!inputHasFocus) {
// 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" }}>
<Popup
content={`Add a new ${itemType} here`}
on={["focus", "hover"]}
onOpen={() => setPopupTriggered(true)}
onClose={() => setPopupTriggered(false)}
open={!menuOpen && popupTriggered}
trigger={
<Dropdown
basic
className="button icon primary"
floating
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)
const activeMenuItem = event.target.querySelectorAll("[role='option']")[newIndex]
activeMenuItem?.scrollIntoView({ block: "nearest" })
}
if (event.key === "Enter") {
onClick(options[selectedItem].value)
if (!inputHasFocus) {
// 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)
const activeMenuItem = event.target.querySelectorAll("[role='option']")[newIndex]
activeMenuItem?.scrollIntoView({ block: "nearest" })
}
if (event.key === "Enter") {
onClick(options[selectedItem].value)
}
}}
onOpen={() => setMenuOpen(true)}
selectOnBlur={false}
selectOnNavigation={false}
trigger={
<>
<Icon name="add" /> {`Add ${itemType} `}
</>
}
}}
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 style={{ minWidth: "50em" }}>
<Dropdown.Header>{`Available ${itemType} types`}</Dropdown.Header>
<Dropdown.Divider />
<Input
className="search"
focus
icon="search"
iconPosition="left"
onBlur={(event) => {
setInputHasFocus(false)
if (allItemSubtypes) {
event.stopPropagation()
} // Prevent tabbing to the checkbox from clearing the input
}}
onChange={(_event, { value }) => setQuery(value)}
onClick={stopEventPropagation}
onFocus={() => {
setInputHasFocus(true)
}}
onKeyDown={stopEventPropagationOnSpace}
placeholder={`Filter ${itemType} types`}
value={query}
/>
<FilterCheckboxes
itemType={itemType}
allowHidingUnsupportedItems={allItemSubtypes?.length > 0}
showUnsupportedItems={showUnsupportedItems}
setShowUnsupportedItems={setShowUnsupportedItems}
allowHidingUsedItems={usedItemSubtypeKeys?.length > 0}
hideUsedItems={hideUsedItems}
setHideUsedItems={setHideUsedItems}
/>
<Dropdown.Menu scrolling>
{options.map((option, index) => (
<Dropdown.Item
content={option.content}
key={option.key}
onClick={(_event, { value }) => onClick(value)}
selected={selectedItem === index}
style={{ whiteSpace: "wrap" }}
text={option.text}
value={option.value}
/>
))}
value={null} // Without this, a selected item becomes active (shown bold in the menu) and can't be selected again
>
<Dropdown.Menu style={{ minWidth: "50em" }}>
<Dropdown.Header>{`Available ${itemType} types`}</Dropdown.Header>
<Dropdown.Divider />
<Input
className="search"
focus
icon="search"
iconPosition="left"
onBlur={(event) => {
setInputHasFocus(false)
if (allItemSubtypes) {
event.stopPropagation()
} // Prevent tabbing to the checkbox from clearing the input
}}
onChange={(_event, { value }) => setQuery(value)}
onClick={stopEventPropagation}
onFocus={() => {
setInputHasFocus(true)
}}
onKeyDown={stopEventPropagationOnSpace}
placeholder={`Filter ${itemType} types`}
value={query}
/>
<FilterCheckboxes
itemType={itemType}
allowHidingUnsupportedItems={allItemSubtypes?.length > 0}
showUnsupportedItems={showUnsupportedItems}
setShowUnsupportedItems={setShowUnsupportedItems}
allowHidingUsedItems={usedItemSubtypeKeys?.length > 0}
hideUsedItems={hideUsedItems}
setHideUsedItems={setHideUsedItems}
/>
<Dropdown.Menu scrolling>
{options.map((option, index) => (
<Dropdown.Item
content={option.content}
key={option.key}
onClick={(_event, { value }) => onClick(value)}
selected={selectedItem === index}
style={{ whiteSpace: "wrap" }}
text={option.text}
value={option.value}
/>
))}
</Dropdown.Menu>
</Dropdown.Menu>
</Dropdown.Menu>
</Dropdown>
}
/>
</Dropdown>
}
/>
</div>
)
}
AddDropdownButton.propTypes = {
Expand Down

0 comments on commit c53f5f3

Please sign in to comment.