From 0aae3f2e8d1800bbc5d20a9a38ff0ec49a32f7a7 Mon Sep 17 00:00:00 2001 From: Jones Ogolo <47540149+Jay-Topher@users.noreply.github.com> Date: Tue, 9 Apr 2024 13:59:33 +0100 Subject: [PATCH] chore: replace react-portal with react-use-portal (#5383) Co-authored-by: Peter Makowski --- package.json | 2 -- .../NodeConfigurationFields.tsx | 12 ++++++------ .../base/components/TagSelector/TagSelector.tsx | 8 ++++---- .../TagForm/TagFormFields/TagFormFields.tsx | 2 +- yarn.lock | 16 +--------------- 5 files changed, 12 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 2e845dc15c..67c4aeca6d 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "react-dom": "18.2.0", "react-dropzone": "14.2.3", "react-ga4": "2.1.0", - "react-portal": "4.2.2", "react-redux": "8.0.5", "react-router-dom": "6.22.3", "react-storage-hooks": "4.0.1", @@ -111,7 +110,6 @@ "@types/pluralize": "0.0.33", "@types/react": "18.2.75", "@types/react-dom": "18.2.24", - "@types/react-portal": "4.0.7", "@types/react-redux": "7.1.33", "@types/react-router": "5.1.20", "@types/react-router-dom": "5.3.3", diff --git a/src/app/base/components/NodeConfigurationFields/NodeConfigurationFields.tsx b/src/app/base/components/NodeConfigurationFields/NodeConfigurationFields.tsx index 819d4f9206..1bffc46ed2 100644 --- a/src/app/base/components/NodeConfigurationFields/NodeConfigurationFields.tsx +++ b/src/app/base/components/NodeConfigurationFields/NodeConfigurationFields.tsx @@ -2,8 +2,8 @@ import { useState } from "react"; import { Col, Modal, Row, Textarea } from "@canonical/react-components"; import { useFormikContext } from "formik"; -import { Portal } from "react-portal"; import { useSelector } from "react-redux"; +import usePortal from "react-useportal"; import * as Yup from "yup"; import type { SchemaOf } from "yup"; @@ -31,11 +31,11 @@ export const NodeConfigurationSchema: SchemaOf = .defined(); const NodeConfigurationFields = (): JSX.Element => { + const { openPortal, closePortal, isOpen, Portal } = usePortal(); const { setFieldValue, values } = useFormikContext(); const selectedTags = useSelector((state: RootState) => tagSelectors.getByIDs(state, values.tags) ); - const [isOpen, setIsOpen] = useState(false); const [newTagName, setNewTagName] = useState(null); const manualTags = useSelector(tagSelectors.getManual); @@ -55,9 +55,9 @@ const NodeConfigurationFields = (): JSX.Element => { )} externalSelectedTags={selectedTags} name="tags" - onAddNewTag={(name) => { + onAddNewTag={(name) => (event) => { setNewTagName(name); - setIsOpen(true); + openPortal(event); }} placeholder="Create or remove tags" tagList={manualTags} @@ -68,7 +68,7 @@ const NodeConfigurationFields = (): JSX.Element => { setIsOpen(false)} + close={() => closePortal()} title={Label.AddTag} > { onTagCreated={(tag) => { setFieldValue("tags", values.tags.concat([tag.id])); setNewTagName(null); - setIsOpen(false); + closePortal(); }} /> diff --git a/src/app/base/components/TagSelector/TagSelector.tsx b/src/app/base/components/TagSelector/TagSelector.tsx index 0d7cffac7a..d07d6c1dd6 100644 --- a/src/app/base/components/TagSelector/TagSelector.tsx +++ b/src/app/base/components/TagSelector/TagSelector.tsx @@ -20,7 +20,7 @@ export type Props = { help?: string; initialSelected?: Tag[]; label?: string | null; - onAddNewTag?: (name: string) => void; + onAddNewTag?: (name: string) => (event: React.SyntheticEvent) => void; onTagsUpdate?: (tags: Tag[]) => void; placeholder?: string; required?: boolean; @@ -91,10 +91,10 @@ const generateDropdownItems = ({ appearance="base" className="tag-selector__dropdown-button u-break-word" data-testid="new-tag" - onClick={() => { + onClick={(e) => { const cleanedFilter = sanitiseFilter(filter); if (onAddNewTag) { - onAddNewTag(cleanedFilter.name); + onAddNewTag(cleanedFilter.name)?.(e); setFilter(""); } else { updateTags([...selectedTags, cleanedFilter]); @@ -272,7 +272,7 @@ export const TagSelector = ({ if (allowNewTags) { const cleanedFilter = sanitiseFilter(filter); if (onAddNewTag) { - onAddNewTag(cleanedFilter.name); + onAddNewTag(cleanedFilter.name)?.(e); setFilter(""); } else { updateTags([...selectedTags, cleanedFilter]); diff --git a/src/app/machines/components/MachineForms/MachineActionFormWrapper/TagForm/TagFormFields/TagFormFields.tsx b/src/app/machines/components/MachineForms/MachineActionFormWrapper/TagForm/TagFormFields/TagFormFields.tsx index 16ae56a1a3..01d21d9252 100644 --- a/src/app/machines/components/MachineForms/MachineActionFormWrapper/TagForm/TagFormFields/TagFormFields.tsx +++ b/src/app/machines/components/MachineForms/MachineActionFormWrapper/TagForm/TagFormFields/TagFormFields.tsx @@ -117,7 +117,7 @@ export const TagFormFields = ({ } label={Label.TagInput} name="added" - onAddNewTag={(name) => { + onAddNewTag={(name) => (_) => { setNewTagName(name); setSecondaryContent("addTag"); }} diff --git a/yarn.lock b/yarn.lock index 7ae3c371c7..cf2722c3ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4626,13 +4626,6 @@ dependencies: "@types/react" "*" -"@types/react-portal@4.0.7": - version "4.0.7" - resolved "https://registry.yarnpkg.com/@types/react-portal/-/react-portal-4.0.7.tgz#c7436c5039e74ec80d488fbe5c98dbcc6469bf44" - integrity sha512-3zQJL6Pqcq7d73+cakVkZDqAYGFBo37XXPfahjhdScr9EdYPlf9evYilL38Fpzs1YGWz7F2SkPtN6+ygTO7ymg== - dependencies: - "@types/react" "*" - "@types/react-redux@7.1.33": version "7.1.33" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.33.tgz#53c5564f03f1ded90904e3c90f77e4bd4dc20b15" @@ -11002,7 +10995,7 @@ prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@15.8.1, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -11264,13 +11257,6 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-portal@4.2.2: - version "4.2.2" - resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.2.tgz#bff1e024147d6041ba8c530ffc99d4c8248f49fa" - integrity sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q== - dependencies: - prop-types "^15.5.8" - react-redux@8.0.5: version "8.0.5" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"