Remove buggy tooltip on room intro & homepage (#29406)

* Remove buggy tooltip on room intro & homepage

Signed-off-by: Michael Telatynski <[email protected]>

* Add knip ignore

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

knip.ts

@@ -19,6 +19,7 @@ export default {
     ignore: [
         // Keep for now
         "src/hooks/useLocalStorageState.ts",
+        "src/hooks/useTimeout.ts",
         "src/components/views/elements/InfoTooltip.tsx",
         "src/components/views/elements/StyledCheckbox.tsx",
     ],

src/components/views/elements/MiniAvatarUploader.tsx

@@ -9,10 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import classNames from "classnames";
 import { EventType } from "matrix-js-sdk/src/matrix";
 import React, { useContext, useRef, useState, type MouseEvent, type ReactNode } from "react";
-import { Tooltip } from "@vector-im/compound-web";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { useTimeout } from "../../../hooks/useTimeout";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 import AccessibleButton from "./AccessibleButton";
 import Spinner from "./Spinner";
@@ -42,15 +40,6 @@ const MiniAvatarUploader: React.FC<IProps> = ({
 }) => {
     const cli = useContext(MatrixClientContext);
     const [busy, setBusy] = useState(false);
-    const [hover, setHover] = useState(false);
-    const [show, setShow] = useState(false);
-
-    useTimeout(() => {
-        setShow(true);
-    }, 3000); // show after 3 seconds
-    useTimeout(() => {
-        setShow(false);
-    }, 13000); // hide after being shown for 10 seconds
 
     const uploadRef = useRef<HTMLInputElement>(null);
 
@@ -61,7 +50,6 @@ const MiniAvatarUploader: React.FC<IProps> = ({
         isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getSafeUserId());
     if (!canSetAvatar) return <React.Fragment>{children}</React.Fragment>;
 
-    const visible = !!label && (hover || show);
     return (
         <React.Fragment>
             <input
@@ -84,24 +72,23 @@ const MiniAvatarUploader: React.FC<IProps> = ({
                 accept="image/*"
             />
 
-            <Tooltip label={label!} open={visible} onOpenChange={setHover}>
-                <AccessibleButton
-                    className={classNames("mx_MiniAvatarUploader", {
-                        mx_MiniAvatarUploader_busy: busy,
-                        mx_MiniAvatarUploader_hasAvatar: hasAvatar,
-                    })}
-                    disabled={busy}
-                    onClick={() => {
-                        uploadRef.current?.click();
-                    }}
-                >
-                    {children}
+            <AccessibleButton
+                className={classNames("mx_MiniAvatarUploader", {
+                    mx_MiniAvatarUploader_busy: busy,
+                    mx_MiniAvatarUploader_hasAvatar: hasAvatar,
+                })}
+                disabled={busy}
+                onClick={() => {
+                    uploadRef.current?.click();
+                }}
+                aria-label={label}
+            >
+                {children}
 
-                    <div className="mx_MiniAvatarUploader_indicator">
-                        {busy ? <Spinner w={20} h={20} /> : <div className="mx_MiniAvatarUploader_cameraIcon" />}
-                    </div>
-                </AccessibleButton>
-            </Tooltip>
+                <div className="mx_MiniAvatarUploader_indicator">
+                    {busy ? <Spinner w={20} h={20} /> : <div className="mx_MiniAvatarUploader_cameraIcon" />}
+                </div>
+            </AccessibleButton>
         </React.Fragment>
     );
 };

test/unit-tests/components/views/elements/MiniAvatarUploader-test.tsx

@@ -26,12 +26,12 @@ describe("<MiniAvatarUploader />", () => {
         const setAvatarUrl = jest.fn();
         const user = userEvent.setup();
 
-        const { container, findByText } = render(
+        const { container, findByLabelText } = render(
             <MiniAvatarUploader hasAvatar={false} noAvatarLabel="Upload" setAvatarUrl={setAvatarUrl} isUserAvatar />,
             withClientContextRenderOptions(cli),
         );
 
-        await findByText("Upload");
+        await findByLabelText("Upload");
         await user.upload(container.querySelector("input")!, AVATAR_FILE);
 
         expect(cli.uploadContent).toHaveBeenCalledWith(AVATAR_FILE);