From a9e1fa3f89483706f995e57968baad9cd48f6cd3 Mon Sep 17 00:00:00 2001
From: Frank Niessink <frank@niessink.com>
Date: Fri, 24 May 2024 12:13:35 +0200
Subject: [PATCH] Upgrade to Semantic UI React v3.

Closes #8764.
---
 components/frontend/package-lock.json         |  31 +--
 components/frontend/package.json              |   2 +-
 .../src/measurement/MeasurementTarget.js      |   4 +-
 .../src/measurement/MeasurementValue.js       |   6 +-
 .../frontend/src/measurement/SourceStatus.js  |   2 +-
 .../frontend/src/measurement/TimeLeft.js      |   4 +-
 .../frontend/src/source/SourceEntities.js     |  16 +-
 components/frontend/src/widgets/Button.js     | 190 +++++++++---------
 8 files changed, 119 insertions(+), 136 deletions(-)

diff --git a/components/frontend/package-lock.json b/components/frontend/package-lock.json
index 049fbccc42..f5205979ec 100644
--- a/components/frontend/package-lock.json
+++ b/components/frontend/package-lock.json
@@ -21,7 +21,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"
             },
@@ -2404,24 +2404,6 @@
                 "react-dom": "^16.8.0 || ^17 || ^18"
             }
         },
-        "node_modules/@fluentui/react-component-ref": {
-            "version": "0.63.1",
-            "resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.63.1.tgz",
-            "integrity": "sha512-8MkXX4+R3i80msdbD4rFpEB4WWq2UDvGwG386g3ckIWbekdvN9z2kWAd9OXhRGqB7QeOsoAGWocp6gAMCivRlw==",
-            "dependencies": {
-                "@babel/runtime": "^7.10.4",
-                "react-is": "^16.6.3"
-            },
-            "peerDependencies": {
-                "react": "^16.8.0 || ^17 || ^18",
-                "react-dom": "^16.8.0 || ^17 || ^18"
-            }
-        },
-        "node_modules/@fluentui/react-component-ref/node_modules/react-is": {
-            "version": "16.13.1",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "dev": true,
@@ -21194,14 +21176,13 @@
             }
         },
         "node_modules/semantic-ui-react": {
-            "version": "2.1.5",
-            "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-2.1.5.tgz",
-            "integrity": "sha512-nIqmmUNpFHfovEb+RI2w3E2/maZQutd8UIWyRjf1SLse+XF51hI559xbz/sLN3O6RpLjr/echLOOXwKCirPy3Q==",
+            "version": "3.0.0-beta.2",
+            "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-3.0.0-beta.2.tgz",
+            "integrity": "sha512-BFqd7dGPgXPbIkWkIzkPrPRBElf/iB4NKOSFl5tZwMEaIyGQXbvtVWHyOW0sMD2A/qZPgY2Wl/19GDc9JOg3ng==",
             "dependencies": {
-                "@babel/runtime": "^7.10.5",
+                "@babel/runtime": "^7.23.7",
                 "@fluentui/react-component-event-listener": "~0.63.0",
-                "@fluentui/react-component-ref": "~0.63.0",
-                "@popperjs/core": "^2.6.0",
+                "@popperjs/core": "^2.11.8",
                 "@semantic-ui-react/event-stack": "^3.1.3",
                 "clsx": "^1.1.1",
                 "keyboard-key": "^1.1.0",
diff --git a/components/frontend/package.json b/components/frontend/package.json
index 902a61d4f0..3316f18bd3 100644
--- 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
index d82b27cafd..730f3cd3c2 100644
--- 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
index f25e19cfe8..11fa98fb65 100644
--- 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
index df0606e542..b6dbd3dcd7 100644
--- 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
index d89e8ae5d4..8b9008c926 100644
--- 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
index b5bc2f094b..36789757b0 100644
--- 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
index db462b7c0c..f6048c038c 100644
--- 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>
             }
         />
     )