From 82d27a463cdad31c7dcedec1c4afcf7a907c08db Mon Sep 17 00:00:00 2001
From: barreiro <lbbbarreiro@gmail.com>
Date: Tue, 31 Dec 2024 07:25:36 +0000
Subject: [PATCH] Remove usage of deprecated Dropdown component

---
 horreum-web/src/About.tsx                     | 53 ++++++++--------
 .../src/components/HttpActionUrlSelector.tsx  | 52 ++++------------
 .../src/domain/runs/JsonPathSearchToolbar.tsx | 62 +++++++------------
 3 files changed, 59 insertions(+), 108 deletions(-)

diff --git a/horreum-web/src/About.tsx b/horreum-web/src/About.tsx
index d92570cad..70631ffb1 100644
--- a/horreum-web/src/About.tsx
+++ b/horreum-web/src/About.tsx
@@ -1,20 +1,19 @@
-import { useState, useEffect } from "react"
+import {useState, useEffect, Ref} from "react"
 import {
-	Bullseye,
-	Button,
+    Bullseye,
+    Button,
     DescriptionList,
     DescriptionListDescription,
     DescriptionListGroup,
     DescriptionListTerm,
-	MenuToggle,
-	Modal,
-	Spinner
+    Dropdown,
+    DropdownItem,
+    DropdownList,
+    MenuToggle,
+    MenuToggleElement,
+    Modal,
+    Spinner
 } from '@patternfly/react-core';
-import {
-	Dropdown,
-	DropdownItem,
-	DropdownToggle
-} from '@patternfly/react-core/deprecated';
 import { QuestionCircleIcon } from "@patternfly/react-icons"
 
 import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
@@ -60,18 +59,20 @@ export default function About() {
                 { isDarkTheme ? <SunIcon style={{ color: '#FC0' }} /> : <MoonIcon style={{ color: '#FEC' }} /> }
             </MenuToggle>
             <Dropdown
-                style={{ marginLeft: "16px" }}
-                position="right"
-                menuAppendTo="parent"
-                onSelect={() => setDropdownOpen(false)}
-                toggle={
-                    <DropdownToggle toggleIndicator={null} onToggle={(_event, val) => setDropdownOpen(val)} id="toggle-icon-only">
-                        <QuestionCircleIcon style={{ fill: "#ffffff" }} />
-                    </DropdownToggle>
-                }
                 isOpen={isDropdownOpen}
-                isPlain
-                dropdownItems={[
+                onSelect={() => setDropdownOpen(false)}
+                popperProps={{preventOverflow: true, position: "end"}}
+                toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                        id="toggle-icon-only"
+                        ref={toggleRef}
+                        variant="plain"
+                        onClick={() => setDropdownOpen(!isDropdownOpen)}>
+                        <QuestionCircleIcon color="white"/>
+                    </MenuToggle>
+                )}
+            >
+                <DropdownList>
                     <DropdownItem
                         key="docs"
                         onClick={() => {
@@ -80,12 +81,12 @@ export default function About() {
                         }}
                     >
                         Project documentation
-                    </DropdownItem>,
+                    </DropdownItem>
                     <DropdownItem key="version info" onClick={() => setModalOpen(true)}>
                         Version info
-                    </DropdownItem>,
-                ]}
-            />
+                    </DropdownItem>
+                </DropdownList>
+            </Dropdown>
             <Modal
                 variant="small"
                 title="About Horreum"
diff --git a/horreum-web/src/components/HttpActionUrlSelector.tsx b/horreum-web/src/components/HttpActionUrlSelector.tsx
index 5f7c425d8..8e7cdd6f0 100644
--- a/horreum-web/src/components/HttpActionUrlSelector.tsx
+++ b/horreum-web/src/components/HttpActionUrlSelector.tsx
@@ -1,18 +1,14 @@
-import {useContext, useEffect, useRef, useState} from "react"
+import {useContext, useEffect, useState} from "react"
 import {
 	FormGroup,
+    FormHelperText,
 	InputGroup,
-	TextInput, InputGroupItem,
+    InputGroupItem,
     HelperText,
     HelperTextItem,
-    FormHelperText,
-
+    TextInput,
 } from '@patternfly/react-core';
-import {
-	Dropdown,
-	DropdownItem,
-	DropdownToggle
-} from '@patternfly/react-core/deprecated';
+import {SimpleSelect} from "@patternfly/react-templates";
 
 import { AllowedSite, getAllowedSites} from "../api"
 import {AppContext} from "../context/appContext";
@@ -50,11 +46,6 @@ export default function HttpActionUrlSelector({ active, value, setValue, isDisab
     const isUrlValid = isValidUrl(value)
     const isUrlAllowed = prefixes.some(p => value.startsWith(p.prefix))
     const extraCheckResult = extraCheck ? extraCheck(value) : true
-
-    const [dropdownOpen, setDropdownOpen] = useState(false)
-
-    const ref = useRef<any>()
-
     return (
         <FormGroup
             label="HTTP Action URL"
@@ -62,35 +53,14 @@ export default function HttpActionUrlSelector({ active, value, setValue, isDisab
             fieldId="url"
         >
             <InputGroup>
-                {!isReadOnly && (
-                    <Dropdown
-                        onSelect={event => {
-                            if (event && event.currentTarget) {
-                                if (setValid) {
-                                    setValid(true)
-                                }
-                                setValue(event.currentTarget.innerText)
-                            }
-                            setDropdownOpen(false)
-                            if (ref.current) {
-                                ref.current.focus()
-                            }
-                        }}
-                        toggle={
-                            <DropdownToggle onToggle={(_event, val) => setDropdownOpen(val)} isDisabled={isDisabled}>
-                                Pick URL prefix
-                            </DropdownToggle>
-                        }
-                        isOpen={dropdownOpen}
-                        dropdownItems={prefixes.map((p, i) => (
-                            <DropdownItem key={i} value={p.prefix} component="button">
-                                {p.prefix}
-                            </DropdownItem>
-                        ))}
+                {!isReadOnly &&
+                    <SimpleSelect
+                        placeholder="Pick URL prefix"
+                        initialOptions={prefixes.map(p => ({value: p.prefix, content: p.prefix, selected: false}))}
+                        onSelect={(_, item) => setValue(item as string)}
                     />
-                )}
+                }
                 <InputGroupItem isFill ><TextInput
-                    ref={ref}
                     value={value}
                     isRequired
                     type="text"
diff --git a/horreum-web/src/domain/runs/JsonPathSearchToolbar.tsx b/horreum-web/src/domain/runs/JsonPathSearchToolbar.tsx
index e7aaa423f..14ff88868 100644
--- a/horreum-web/src/domain/runs/JsonPathSearchToolbar.tsx
+++ b/horreum-web/src/domain/runs/JsonPathSearchToolbar.tsx
@@ -6,16 +6,13 @@ import {
 	Button,
 	ButtonVariant,
 	InputGroup,
+    InputGroupItem,
 	Popover,
 	Toolbar,
 	ToolbarContent,
-	ToolbarItem, InputGroupItem
+	ToolbarItem,
 } from '@patternfly/react-core';
-import {
-	Dropdown,
-	DropdownToggle,
-	DropdownItem
-} from '@patternfly/react-core/deprecated';
+import {SimpleSelect} from "@patternfly/react-templates";
 import { HelpIcon } from "@patternfly/react-icons"
 import { toString } from "../../components/Editor"
 import Autosuggest, { InputProps, ChangeEvent, SuggestionsFetchRequestedParams } from "react-autosuggest"
@@ -29,12 +26,15 @@ type ToolbarProps = {
     onDataUpdate(newData: string): void
 }
 
+const JS_QUERY_FIRST = "jsonb_path_query_first"
+const JS_QUERY_ARRAY = "jsonb_path_query_array"
+const JS_QUERY_LOCAL = "js"
+
 export default function JsonPathSearchToolbar(props: ToolbarProps) {
     const { alerting } = useContext(AppContext) as AppContextType;
     const [pathQuery, setPathQuery] = useState("")
     const [pathInvalid, setPathInvalid] = useState(false)
-    const [pathType, setPathType] = useState("jsonb_path_query_first")
-    const [pathTypeOpen, setPathTypeOpen] = useState(false)
+    const [pathType, setPathType] = useState(JS_QUERY_FIRST)
     const [pathSuggestions, setPathSuggestions] = useState<string[]>([])
 
     function runPathQuery(type?: string, query?: string) {
@@ -118,36 +118,16 @@ export default function JsonPathSearchToolbar(props: ToolbarProps) {
             <ToolbarContent style={{ width: "100%" }}>
                 <ToolbarItem aria-label="search" style={{ marginTop: 0 }}>
                     <InputGroup>
-                        <InputGroupItem><Dropdown
-                            isOpen={pathTypeOpen}
-                            onSelect={(e?: React.SyntheticEvent<HTMLDivElement>) => {
-                                if (e) {
-                                    setPathType(e.currentTarget.id)
-                                    onQueryUpdate(e.currentTarget.id, pathQuery)
-                                }
-                                setPathTypeOpen(false)
-                            }}
-                            toggle={
-                                <DropdownToggle
-                                    onToggle={(_event, e) => {
-                                        setPathTypeOpen(e)
-                                    }}
-                                >
-                                    {pathType}
-                                </DropdownToggle>
-                            }
-                            dropdownItems={[
-                                <DropdownItem id="jsonb_path_query_first" key="jsonb_path_query_first">
-                                    jsonb_path_query_first
-                                </DropdownItem>,
-                                <DropdownItem id="jsonb_path_query_array" key="jsonb_path_query_array">
-                                    jsonb_path_query_array
-                                </DropdownItem>,
-                                <DropdownItem id="js" key="query">
-                                    js
-                                </DropdownItem>
-                            ]}
-                        ></Dropdown></InputGroupItem>
+                        <InputGroupItem>
+                            <SimpleSelect
+                                initialOptions={[JS_QUERY_FIRST, JS_QUERY_ARRAY, JS_QUERY_LOCAL].map(
+                                    t => ({value: t, content: t, selected: pathType === t})
+                                )}
+                                selected={pathType}
+                                onSelect={(_, item) => setPathType(item as string)}
+                                toggleWidth="225px"
+                            />
+                        </InputGroupItem>
                         <InputGroupItem><SearchQueryHelp pathType={pathType} /></InputGroupItem>
                         <InputGroupItem><Autosuggest
                             inputProps={inputProps}
@@ -207,9 +187,9 @@ function execQuery(
     switch (type) {
         case "js":
             return Promise.resolve(execQueryLocal(data, query))
-        case "jsonb_path_query_first":
+        case JS_QUERY_FIRST:
             break
-        case "jsonb_path_query_array":
+        case JS_QUERY_ARRAY:
             array = true
             break
         default:
@@ -392,7 +372,7 @@ function SearchQueryHelp({ pathType }: SearchQueryHelpProps) {
             hasAutoWidth={true}
             bodyContent={
                 <div style={{ width: "450px" }}>
-                    {pathType == "js" ? (
+                    {pathType == JS_QUERY_LOCAL ? (
                         <>
                             <p>
                                 Variant <code>js</code> executes the search expression inside your browser using{" "}