Upgrade to Semantic UI React v3.

Closes #8764.
ICTU · May 24, 2024 · a9e1fa3 · a9e1fa3
1 parent f1006bc
commit a9e1fa3
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 136 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
@@ -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"
     },

diff --git a/components/frontend/src/measurement/MeasurementTarget.js b/components/frontend/src/measurement/MeasurementTarget.js
@@ -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>
     )

diff --git a/components/frontend/src/measurement/MeasurementValue.js b/components/frontend/src/measurement/MeasurementValue.js
@@ -18,7 +18,7 @@ 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
-        let trigger
+        let trigger = value
         if (staleMeasurementValue) {
             trigger = <Label color="red">{value}</Label>
         } else if (metric.latest_measurement.outdated) {
@@ -27,11 +27,9 @@ export function MeasurementValue({ metric, reportDate }) {
                     <Icon loading name="hourglass" /> {value}
                 </Label>
             )
-        } else {
-            trigger = <span>{value}</span>
         }
         return (
-            <Popup trigger={trigger} flowing hoverable>
+            <Popup trigger={<span>{trigger}</span>} flowing hoverable>
                 {staleMeasurementValue && (
                     <Message
                         negative

diff --git a/components/frontend/src/measurement/SourceStatus.js b/components/frontend/src/measurement/SourceStatus.js
@@ -43,7 +43,7 @@ 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 {

diff --git a/components/frontend/src/measurement/TimeLeft.js b/components/frontend/src/measurement/TimeLeft.js
@@ -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>
     )

diff --git a/components/frontend/src/source/SourceEntities.js b/components/frontend/src/source/SourceEntities.js
@@ -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

diff --git a/components/frontend/src/widgets/Button.js b/components/frontend/src/widgets/Button.js
@@ -82,107 +82,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 (!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" }}>
+                    <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 (!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)
+                                }
                             }
-                            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) => {
-                                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}
-                        />
-                        {allItemSubtypes?.length > 0 && (
-                            <FilterCheckbox
-                                label={`Select from all ${itemType} types`}
-                                filter={showUnsupportedItems}
-                                setFilter={setShowUnsupportedItems}
+                        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) => {
+                                    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}
                             />
-                        )}
-                        {usedItemSubtypeKeys?.length > 0 && (
-                            <FilterCheckbox
-                                label={`Hide ${itemType} types already used`}
-                                filter={hideUsedItems}
-                                setFilter={setHideUsedItems}
-                            />
-                        )}
-                        <Dropdown.Menu scrolling>
-                            {options.map((option, index) => (
-                                <Dropdown.Item
-                                    content={option.content}
-                                    key={option.key}
-                                    onClick={(_event, { value }) => onClick(value)}
-                                    selected={selectedItem === index}
-                                    text={option.text}
-                                    value={option.value}
+                            {allItemSubtypes?.length > 0 && (
+                                <FilterCheckbox
+                                    label={`Select from all ${itemType} types`}
+                                    filter={showUnsupportedItems}
+                                    setFilter={setShowUnsupportedItems}
+                                />
+                            )}
+                            {usedItemSubtypeKeys?.length > 0 && (
+                                <FilterCheckbox
+                                    label={`Hide ${itemType} types already used`}
+                                    filter={hideUsedItems}
+                                    setFilter={setHideUsedItems}
                                 />
-                            ))}
+                            )}
+                            <Dropdown.Menu scrolling>
+                                {options.map((option, index) => (
+                                    <Dropdown.Item
+                                        content={option.content}
+                                        key={option.key}
+                                        onClick={(_event, { value }) => onClick(value)}
+                                        selected={selectedItem === index}
+                                        text={option.text}
+                                        value={option.value}
+                                    />
+                                ))}
+                            </Dropdown.Menu>
                         </Dropdown.Menu>
-                    </Dropdown.Menu>
-                </Dropdown>
+                    </Dropdown>
+                </div>
             }
         />
     )