Skip to content

Commit

Permalink
Remove usage of deprecated Dropdown component
Browse files Browse the repository at this point in the history
  • Loading branch information
@barreiro
barreiro committed Dec 31, 2024
1 parent a7fd18c commit 82d27a4
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 108 deletions.
53 changes: 27 additions & 26 deletions horreum-web/src/About.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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={() => {
Expand All @@ -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"
Expand Down
52 changes: 11 additions & 41 deletions horreum-web/src/components/HttpActionUrlSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -50,47 +46,21 @@ 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"
isRequired={true}
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"
Expand Down
62 changes: 21 additions & 41 deletions horreum-web/src/domain/runs/JsonPathSearchToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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) {
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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{" "}
Expand Down

0 comments on commit 82d27a4

Please sign in to comment.