Test with Semantic UI React 3.0.0-beta.

ICTU · Jan 12, 2024 · ed48766 · ed48766
1 parent d9f996c
commit ed48766
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 164 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.2.0",
     "react-timeago": "^7.2.0",
     "react-toastify": "^9.1.3",
-    "semantic-ui-react": "^2.1.5",
+    "semantic-ui-react": "^3.0.0-beta.2",
     "use-local-storage-state": "^19.1.0",
     "victory": "^36.8.1"
   },

diff --git a/components/frontend/src/measurement/MeasurementTarget.js b/components/frontend/src/measurement/MeasurementTarget.js
@@ -41,10 +41,10 @@ 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
     if (metric.accept_debt) {
         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
@@ -11,9 +11,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

diff --git a/components/frontend/src/measurement/SourceStatus.js b/components/frontend/src/measurement/SourceStatus.js
@@ -28,7 +28,7 @@ export function SourceStatus({ metric, measurement_source }) {
             header = 'Parse error'
         }
         return (
-            <Popup content={content} flowing header={header} hoverable trigger={<Label color='red'>{source_label(true)}</Label>} />
+            <Popup content={content} flowing header={header} hoverable trigger={<span><Label color='red'>{source_label(true)}</Label></span>} />
         )
     } else {
         return source_label()

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

diff --git a/components/frontend/src/source/SourceEntities.js b/components/frontend/src/source/SourceEntities.js
@@ -50,13 +50,15 @@ export function SourceEntities({ metric, metric_uuid, reload, report, source })
         <Table.Row>
             <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 ? `Show resolved ${entity_name_plural}` : `Hide resolved ${entity_name_plural}`} />
             </Table.HeaderCell>
             <Table.HeaderCell sorted={sorted("entity_status")} onClick={() => sort("entity_status")}>
@@ -83,7 +85,7 @@ export function SourceEntities({ metric, metric_uuid, reload, report, source })
                     <span>{entity_attribute.name}</span>
                     {
                         entity_attribute.help ?
-                        <Popup on={['hover', 'focus']} trigger={<span>&nbsp;<Icon role="tooltip" aria-label="help" tabIndex="0" name="help circle" /></span>} content={entity_attribute.help}/> : null
+                            <Popup on={['hover', 'focus']} trigger={<span>&nbsp;<Icon role="tooltip" aria-label="help" tabIndex="0" name="help circle" /></span>} content={entity_attribute.help} /> : null
                     }
                 </Table.HeaderCell>)
             }