Merge branch 'develop' into valere/fix_reset_backup_after_verif

matrix-org · Jan 9, 2024 · 5c9494e · 5c9494e
2 parents 2ae60bc + 3bfb33f
commit 5c9494e
Show file tree

Hide file tree

Showing 20 changed files with 137 additions and 223 deletions.
diff --git a/res/css/views/rooms/_NotificationBadge.pcss b/res/css/views/rooms/_NotificationBadge.pcss
@@ -75,10 +75,3 @@ limitations under the License.
         }
     }
 }
-
-.mx_NotificationBadge_tooltip {
-    display: inline-block;
-    position: relative;
-    top: -25px;
-    left: 6px;
-}
diff --git a/src/components/structures/auth/forgot-password/CheckEmail.tsx b/src/components/structures/auth/forgot-password/CheckEmail.tsx
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode, useRef } from "react";
+import React, { ReactNode } from "react";
+import { Tooltip } from "@vector-im/compound-web";
 
 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
 import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { _t } from "../../../../languageHandler";
-import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
 
@@ -42,7 +42,6 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
     onSubmitForm,
     onResendClick,
 }) => {
-    const tooltipId = useRef(`mx_CheckEmail_${Math.random()}`).current;
     const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
 
     const onResendClickFn = async (): Promise<void> => {
@@ -67,21 +66,12 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
             <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <AccessibleButton
-                    className="mx_AuthBody_resend-button"
-                    kind="link"
-                    onClick={onResendClickFn}
-                    aria-describedby={tooltipVisible ? tooltipId : undefined}
-                >
-                    <RetryIcon className="mx_Icon mx_Icon_16" />
-                    {_t("action|resend")}
-                    <Tooltip
-                        id={tooltipId}
-                        label={_t("auth|check_email_resend_tooltip")}
-                        alignment={Alignment.Top}
-                        visible={tooltipVisible}
-                    />
-                </AccessibleButton>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
+                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        {_t("action|resend")}
+                    </AccessibleButton>
+                </Tooltip>
             </div>
         </>
     );

diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode, useRef } from "react";
+import React, { ReactNode } from "react";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
-import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
 
@@ -40,7 +40,6 @@ export const VerifyEmailModal: React.FC<Props> = ({
     onReEnterEmailClick,
     onResendClick,
 }) => {
-    const tooltipId = useRef(`mx_VerifyEmailModal_${Math.random()}`).current;
     const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
 
     const onResendClickFn = async (): Promise<void> => {
@@ -66,21 +65,12 @@ export const VerifyEmailModal: React.FC<Props> = ({
 
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <AccessibleButton
-                    className="mx_AuthBody_resend-button"
-                    kind="link"
-                    onClick={onResendClickFn}
-                    aria-describedby={tooltipVisible ? tooltipId : undefined}
-                >
-                    <RetryIcon className="mx_Icon mx_Icon_16" />
-                    {_t("action|resend")}
-                    <Tooltip
-                        id={tooltipId}
-                        label={_t("auth|check_email_resend_tooltip")}
-                        alignment={Alignment.Top}
-                        visible={tooltipVisible}
-                    />
-                </AccessibleButton>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
+                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        {_t("action|resend")}
+                    </AccessibleButton>
+                </Tooltip>
                 {errorText && <ErrorMessage message={errorText} />}
             </div>
 

diff --git a/src/components/views/beacon/ShareLatestLocation.tsx b/src/components/views/beacon/ShareLatestLocation.tsx
@@ -16,12 +16,12 @@ limitations under the License.
 
 import React, { useEffect, useState } from "react";
 import { ContentHelpers } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { Icon as ExternalLinkIcon } from "../../../../res/img/external-link.svg";
 import { _t } from "../../../languageHandler";
 import { makeMapSiteLink, parseGeoUri } from "../../../utils/location";
 import CopyableText from "../elements/CopyableText";
-import TooltipTarget from "../elements/TooltipTarget";
 
 interface Props {
     latestLocationState?: ContentHelpers.BeaconLocationState;
@@ -46,11 +46,11 @@ const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {
 
     return (
         <>
-            <TooltipTarget label={_t("timeline|context_menu|open_in_osm")}>
+            <Tooltip label={_t("timeline|context_menu|open_in_osm")}>
                 <a data-testid="open-location-in-osm" href={mapLink} target="_blank" rel="noreferrer noopener">
                     <ExternalLinkIcon className="mx_ShareLatestLocation_icon" />
                 </a>
-            </TooltipTarget>
+            </Tooltip>
             <CopyableText className="mx_ShareLatestLocation_copy" border={false} getTextToCopy={() => latLonString} />
         </>
     );

diff --git a/src/components/views/polls/pollHistory/PollListItem.tsx b/src/components/views/polls/pollHistory/PollListItem.tsx
@@ -17,12 +17,11 @@ limitations under the License.
 import React from "react";
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
 import { formatLocalDateShort } from "../../../../DateUtils";
 import { _t } from "../../../../languageHandler";
-import TooltipTarget from "../../elements/TooltipTarget";
-import { Alignment } from "../../elements/Tooltip";
 
 interface Props {
     event: MatrixEvent;
@@ -37,13 +36,13 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
     const formattedDate = formatLocalDateShort(event.getTs());
     return (
         <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
-            <TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
                 <div className="mx_PollListItem_content">
                     <span>{formattedDate}</span>
                     <PollIcon className="mx_PollListItem_icon" />
                     <span className="mx_PollListItem_question">{pollEvent.question.text}</span>
                 </div>
-            </TooltipTarget>
+            </Tooltip>
         </li>
     );
 };
diff --git a/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx
@@ -17,15 +17,14 @@ limitations under the License.
 import React, { useEffect, useState } from "react";
 import { PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { MatrixEvent, Poll, PollEvent, Relations } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
 import { _t } from "../../../../languageHandler";
 import { formatLocalDateShort } from "../../../../DateUtils";
 import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody";
 import { PollOption } from "../../polls/PollOption";
 import { Caption } from "../../typography/Caption";
-import TooltipTarget from "../../elements/TooltipTarget";
-import { Alignment } from "../../elements/Tooltip";
 
 interface Props {
     event: MatrixEvent;
@@ -100,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
 
     return (
         <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
-            <TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
                 <div className="mx_PollListItemEnded_content">
                     <div className="mx_PollListItemEnded_title">
                         <PollIcon className="mx_PollListItemEnded_icon" />
@@ -127,7 +126,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
                         <Caption>{_t("right_panel|poll|final_result", { count: totalVoteCount })}</Caption>
                     </div>
                 </div>
-            </TooltipTarget>
+            </Tooltip>
         </li>
     );
 };
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MouseEvent, ReactNode } from "react";
+import React, { ReactNode } from "react";
+import { Tooltip } from "@vector-im/compound-web";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { XOR } from "../../../@types/common";
 import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
-import Tooltip from "../elements/Tooltip";
 import { _t } from "../../../languageHandler";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { StatelessNotificationBadge } from "./NotificationBadge/StatelessNotificationBadge";
@@ -48,8 +48,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
 }
 
 interface IState {
-    showCounts: boolean; // whether or not to show counts. Independent of props.forceCount
-    showTooltip: boolean;
+    showCounts: boolean; // whether to show counts. Independent of props.forceCount
 }
 
 export default class NotificationBadge extends React.PureComponent<XOR<IProps, IClickableProps>, IState> {
@@ -61,7 +60,6 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
         this.state = {
             showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId),
-            showTooltip: false,
         };
 
         this.countWatcherRef = SettingsStore.watchSetting(
@@ -97,19 +95,6 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
         this.forceUpdate(); // notification state changed - update
     };
 
-    private onMouseOver = (e: MouseEvent): void => {
-        e.stopPropagation();
-        this.setState({
-            showTooltip: true,
-        });
-    };
-
-    private onMouseLeave = (): void => {
-        this.setState({
-            showTooltip: false,
-        });
-    };
-
     public render(): ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const { notification, showUnsentTooltip, forceCount, onClick, tabIndex } = this.props;
@@ -119,31 +104,28 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
             if (!notification.hasUnreadCount) return null; // Can't render a badge
         }
 
-        let label: string | undefined;
-        let tooltip: JSX.Element | undefined;
-        if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
-            label = _t("notifications|message_didnt_send");
-            tooltip = <Tooltip className="mx_NotificationBadge_tooltip" label={label} />;
-        }
-
         const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {
-            label,
             symbol: notification.symbol,
             count: notification.count,
             color: notification.color,
             knocked: notification.knocked,
-            onMouseOver: this.onMouseOver,
-            onMouseLeave: this.onMouseLeave,
         };
 
+        let badge: JSX.Element;
         if (onClick) {
+            badge = <StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex} />;
+        } else {
+            badge = <StatelessNotificationBadge {...commonProps} />;
+        }
+
+        if (showUnsentTooltip && notification.color === NotificationColor.Unsent) {
             return (
-                <StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex}>
-                    {tooltip}
-                </StatelessNotificationBadge>
+                <Tooltip label={_t("notifications|message_didnt_send")} side="right">
+                    {badge}
+                </Tooltip>
             );
         }
 
-        return <StatelessNotificationBadge {...commonProps}>{tooltip}</StatelessNotificationBadge>;
+        return badge;
     }
 }