ditch resize-detector so tests can work

TeamCodeStream · May 9, 2024 · d056151 · d056151
1 parent 4033099
commit d056151
Show file tree

Hide file tree

Showing 3 changed files with 292 additions and 256 deletions.
diff --git a/shared/ui/Stream/EntityAssociator.tsx b/shared/ui/Stream/EntityAssociator.tsx
@@ -3,7 +3,7 @@ import {
 	GetObservabilityEntitiesRequestType,
 	WarningOrError,
 } from "@codestream/protocols/agent";
-import React, { PropsWithChildren, useState } from "react";
+import React, { useRef, PropsWithChildren, useEffect, useState } from "react";
 import { components, OptionProps } from "react-select";
 import styled from "styled-components";
 
@@ -16,7 +16,6 @@ import { useAppDispatch } from "../utilities/hooks";
 import { WarningBox } from "./WarningBox";
 import { isEmpty as _isEmpty } from "lodash";
 import { DropdownWithSearch } from "./DropdownWithSearch";
-import { useResizeDetector } from "react-resize-detector";
 
 interface EntityAssociatorProps {
 	title?: string;
@@ -66,7 +65,8 @@ export const EntityAssociator = React.memo((props: PropsWithChildren<EntityAssoc
 	const [selected, setSelected] = useState<SelectOptionType | null>(null);
 	const [isLoading, setIsLoading] = useState(false);
 	const [warningOrErrors, setWarningOrErrors] = useState<WarningOrError[] | undefined>(undefined);
-	const { width: entitySearchWidth, ref: entitySearchRef } = useResizeDetector();
+	const elementRef = useRef(null);
+	const [width, setWidth] = useState(0);
 
 	async function loadEntities(search: string, _loadedOptions, additional?: AdditionalType) {
 		const { servicesToExcludeFromSearch } = props;
@@ -168,20 +168,36 @@ export const EntityAssociator = React.memo((props: PropsWithChildren<EntityAssoc
 			}
 		}
 	};
+
+	useEffect(() => {
+		const handleResize = () => {
+			if (elementRef.current) {
+				//@ts-ignore
+				const elementWidth = elementRef.current?.offsetWidth;
+				setWidth(elementWidth);
+			}
+		};
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [elementRef]);
+
 	return (
 		<NoContent style={{ marginLeft: props.isServiceSearch ? "30px" : "20px" }}>
 			{props.title && <h3>{props.title}</h3>}
 			{props.label && <p style={{ marginTop: 0 }}>{props.label}</p>}
 			{warningOrErrors && <WarningBox items={warningOrErrors} />}
-			<div ref={entitySearchRef} style={{ marginBottom: "10px" }}>
+			<div ref={elementRef} style={{ marginBottom: "10px" }}>
 				<DropdownWithSearch
 					id="input-entity-autocomplete"
 					name="entity-autocomplete"
 					loadOptions={loadEntities}
 					selectedOption={selected || undefined}
 					handleChangeCallback={setSelected}
 					customOption={Option}
-					customWidth={entitySearchWidth?.toString()}
+					customWidth={width?.toString()}
 					valuePlaceholder={`Select an entity...`}
 				/>
 			</div>

diff --git a/shared/ui/Stream/RepositoryAssociatorServiceSearch.tsx b/shared/ui/Stream/RepositoryAssociatorServiceSearch.tsx
@@ -5,7 +5,7 @@ import {
 	DidChangeDataNotificationType,
 	ChangeDataType,
 } from "@codestream/protocols/agent";
-import React, { PropsWithChildren, useState } from "react";
+import React, { useEffect, useRef, PropsWithChildren, useState } from "react";
 import { components, OptionProps } from "react-select";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
@@ -16,7 +16,6 @@ import { Button } from "../src/components/Button";
 import { NoContent } from "../src/components/Pane";
 import { useAppDispatch } from "../utilities/hooks";
 import { DropdownWithSearch } from "./DropdownWithSearch";
-import { useResizeDetector } from "react-resize-detector";
 import { CodeStreamState } from "../store";
 import { useDidMount } from "@codestream/webview/utilities/hooks";
 
@@ -61,7 +60,8 @@ export const RepositoryAssociatorServiceSearch = React.memo(
 		const dispatch = useAppDispatch();
 		const [selected, setSelected] = useState<SelectOptionType | null>(null);
 		const [isLoading, setIsLoading] = useState(false);
-		const { width: repoSearchWidth, ref: repoSearchRef } = useResizeDetector();
+		const elementRef = useRef(null);
+		const [width, setWidth] = useState(0);
 
 		const derivedState = useSelector((state: CodeStreamState) => {
 			return {
@@ -175,6 +175,21 @@ export const RepositoryAssociatorServiceSearch = React.memo(
 				});
 		};
 
+		useEffect(() => {
+			const handleResize = () => {
+				if (elementRef.current) {
+					//@ts-ignore
+					const elementWidth = elementRef.current?.offsetWidth;
+					setWidth(elementWidth);
+				}
+			};
+			handleResize();
+			window.addEventListener("resize", handleResize);
+			return () => {
+				window.removeEventListener("resize", handleResize);
+			};
+		}, [elementRef]);
+
 		return (
 			<NoContent style={{ margin: "0px 20px -6px 32px" }}>
 				<div style={{ margin: "2px 0px 8px 0px", color: "var(--text-color)" }}>
@@ -184,7 +199,7 @@ export const RepositoryAssociatorServiceSearch = React.memo(
 				</div>
 				<div style={{ display: "flex", justifyContent: "space-between" }}>
 					<div style={{ width: "100%", marginRight: "10px" }}>
-						<div ref={repoSearchRef} style={{ marginBottom: "10px" }}>
+						<div ref={elementRef} style={{ marginBottom: "10px" }}>
 							<DropdownWithSearch
 								id="input-repo-associator-service-search"
 								name="input-repo-associator-service-search"
@@ -209,7 +224,7 @@ export const RepositoryAssociatorServiceSearch = React.memo(
 								selectedOption={selected || undefined}
 								handleChangeCallback={setSelected}
 								customOption={Option}
-								customWidth={repoSearchWidth?.toString()}
+								customWidth={width?.toString()}
 								valuePlaceholder={`Select an repository...`}
 							/>
 						</div>