Fix click handling for stories

2022-09-27 13:24:21 -07:00 · 2022-09-27 13:24:21 -07:00 · 698c7a7739
commit 698c7a7739
parent c0082adc56
78 changed files with 274 additions and 46 deletions
--- a/ts/components/conversation/AudioCapture.tsx
+++ b/ts/components/conversation/AudioCapture.tsx
@ -168,6 +168,7 @@ export const AudioCapture = ({

    confirmationDialog = (
      <ConfirmationDialog
+        dialogName="AudioCapture.sendAnyway"
        i18n={i18n}
        onCancel={clickCancel}
        onClose={noop}
@ -188,6 +189,7 @@ export const AudioCapture = ({
  ) {
    confirmationDialog = (
      <ConfirmationDialog
+        dialogName="AudioCapture.error"
        i18n={i18n}
        onCancel={clickCancel}
        onClose={noop}
--- a/ts/components/conversation/ChatSessionRefreshedDialog.tsx
+++ b/ts/components/conversation/ChatSessionRefreshedDialog.tsx
@ -25,7 +25,12 @@ export function ChatSessionRefreshedDialog(
  const [focusRef] = useRestoreFocus();

  return (
-    <Modal hasXButton={false} onClose={onClose} i18n={i18n}>
+    <Modal
+      modalName="ChatSessionRefreshedDialog"
+      hasXButton={false}
+      onClose={onClose}
+      i18n={i18n}
+    >
      <div className="module-chat-session-refreshed-dialog">
        <div className="module-chat-session-refreshed-dialog__image">
          <img
--- a/ts/components/conversation/ContactModal.tsx
+++ b/ts/components/conversation/ContactModal.tsx
@ -112,6 +112,7 @@ export const ContactModal = ({

      modalNode = (
        <ConfirmationDialog
+          dialogName="ContactModal.toggleAdmin"
          actions={[
            {
              action: () => toggleAdmin(conversation.id, contact.id),
@ -166,6 +167,7 @@ export const ContactModal = ({

      return (
        <Modal
+          modalName="ContactModal"
          moduleClassName="ContactModal__modal"
          hasXButton
          i18n={i18n}
--- a/ts/components/conversation/ContactSpoofingReviewDialog.tsx
+++ b/ts/components/conversation/ContactSpoofingReviewDialog.tsx
@ -349,6 +349,7 @@ export const ContactSpoofingReviewDialog: FunctionComponent<

  return (
    <Modal
+      modalName="ContactSpoofingReviewDialog"
      hasXButton
      i18n={i18n}
      moduleClassName="module-ContactSpoofingReviewDialog"
--- a/ts/components/conversation/ConversationHero.tsx
+++ b/ts/components/conversation/ConversationHero.tsx
@ -225,6 +225,7 @@ export const ConversationHero = ({
      </div>
      {isShowingMessageRequestWarning && (
        <ConfirmationDialog
+          dialogName="ConversationHere.messageRequestWarning"
          i18n={i18n}
          onClose={closeMessageRequestWarning}
          actions={[
--- a/ts/components/conversation/DeliveryIssueDialog.tsx
+++ b/ts/components/conversation/DeliveryIssueDialog.tsx
@ -32,7 +32,12 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
  const [focusRef] = useRestoreFocus();

  return (
-    <Modal hasXButton={false} onClose={onClose} i18n={i18n}>
+    <Modal
+      modalName="DeliveryIssueDialog"
+      hasXButton={false}
+      onClose={onClose}
+      i18n={i18n}
+    >
      <section>
        <div className="module-delivery-issue-dialog__image">
          <img
--- a/ts/components/conversation/GroupDescription.tsx
+++ b/ts/components/conversation/GroupDescription.tsx
@ -40,6 +40,7 @@ export const GroupDescription = ({
    <>
      {showFullDescription && (
        <Modal
+          modalName="GroupDescription"
          hasXButton
          i18n={i18n}
          onClose={() => setShowFullDescription(false)}
--- a/ts/components/conversation/GroupV2Change.tsx
+++ b/ts/components/conversation/GroupV2Change.tsx
@ -176,6 +176,7 @@ function GroupV2Detail({

      modalNode = (
        <Modal
+          modalName="GroupV2Change.ViewingGroupDescription"
          hasXButton
          i18n={i18n}
          title={groupName}
@ -200,6 +201,7 @@ function GroupV2Detail({

      modalNode = (
        <ConfirmationDialog
+          dialogName="GroupV2Change.confirmBlockLinkRequests"
          title={i18n('PendingRequests--block--title')}
          actions={[
            {
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@ -2422,7 +2422,10 @@ export class Message extends React.PureComponent<Props, State> {
            this.toggleReactionViewer(true);
            return true;
          },
-          { containerElements: [root, this.reactionsContainerRef] }
+          {
+            containerElements: [root, this.reactionsContainerRef],
+            name: 'Message.reactionViewer',
+          }
        );

        return {
@ -2458,7 +2461,7 @@ export class Message extends React.PureComponent<Props, State> {
            this.toggleReactionPicker(true);
            return true;
          },
-          { containerElements: [root] }
+          { containerElements: [root], name: 'Message.reactionPicker' }
        );

        return {
--- a/ts/components/conversation/MessageRequestActionsConfirmation.tsx
+++ b/ts/components/conversation/MessageRequestActionsConfirmation.tsx
@ -41,6 +41,7 @@ export const MessageRequestActionsConfirmation = ({
  if (state === MessageRequestState.blocking) {
    return (
      <ConfirmationDialog
+        dialogName="messageRequestActionsConfirmation.blocking"
        i18n={i18n}
        onClose={() => {
          onChangeState(MessageRequestState.default);
@ -77,6 +78,7 @@ export const MessageRequestActionsConfirmation = ({
  if (state === MessageRequestState.unblocking) {
    return (
      <ConfirmationDialog
+        dialogName="messageRequestActionsConfirmation.unblocking"
        i18n={i18n}
        onClose={() => {
          onChangeState(MessageRequestState.default);
@ -104,6 +106,7 @@ export const MessageRequestActionsConfirmation = ({
  if (state === MessageRequestState.deleting) {
    return (
      <ConfirmationDialog
+        dialogName="messageRequestActionsConfirmation.deleting"
        i18n={i18n}
        onClose={() => {
          onChangeState(MessageRequestState.default);
--- a/ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx
+++ b/ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx
@ -31,6 +31,7 @@ export const RemoveGroupMemberConfirmationDialog: FunctionComponent<

  return (
    <ConfirmationDialog
+      dialogName="RemoveGroupMemberConfirmationDialog"
      actions={[
        {
          action: onRemove,
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
@ -269,7 +269,10 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
  };

  return (
-    <ModalHost onClose={onClose}>
+    <ModalHost
+      modalName="AddGroupMembersModal.ChooseGroupMembersModal"
+      onClose={onClose}
+    >
      <div className="module-AddGroupMembersModal module-AddGroupMembersModal--choose-members">
        <button
          aria-label={i18n('close')}
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
@ -79,7 +79,10 @@ export const ConfirmAdditionsModal: FunctionComponent<PropsType> = ({
  }

  return (
-    <ModalHost onClose={onClose}>
+    <ModalHost
+      modalName="AddGroupMemberModal.ConfirmAdditionsModal"
+      onClose={onClose}
+    >
      <div className="module-AddGroupMembersModal module-AddGroupMembersModal--confirm-adds">
        <h1 className="module-AddGroupMembersModal__header">{headerText}</h1>
        {requestState === RequestState.InactiveWithError && (
--- a/ts/components/conversation/conversation-details/ConversationDetails.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetails.tsx
@ -290,6 +290,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
    case ModalState.UnmuteNotifications:
      modalNode = (
        <ConfirmationDialog
+          dialogName="ConversationDetails.unmuteNotifications"
          actions={[
            {
              action: () => setMuteExpiration(0),
--- a/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx
@ -167,6 +167,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
      </PanelSection>
      {confirmLeave && (
        <ConfirmationDialog
+          dialogName="ConversationDetailsAction.confirmLeave"
          actions={[
            {
              text: i18n(
@ -186,6 +187,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({

      {confirmGroupBlock && (
        <ConfirmationDialog
+          dialogName="ConversationDetailsAction.confirmBlock"
          actions={[
            {
              text: i18n(
@ -206,6 +208,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
      )}
      {confirmGroupUnblock && (
        <ConfirmationDialog
+          dialogName="ConversationDetailsAction.confirmUnblock"
          actions={[
            {
              text: i18n(
@ -227,6 +230,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({

      {confirmDirectBlock && (
        <ConfirmationDialog
+          dialogName="ConversationDetailsAction.confirmDirectBlock"
          actions={[
            {
              text: i18n('MessageRequests--block'),
@ -245,6 +249,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
      )}
      {confirmDirectUnblock && (
        <ConfirmationDialog
+          dialogName="ConversationDetailsAction.confirmDirectUnblock"
          actions={[
            {
              text: i18n('MessageRequests--unblock'),
--- a/ts/components/conversation/conversation-details/ConversationNotificationsModal.tsx
+++ b/ts/components/conversation/conversation-details/ConversationNotificationsModal.tsx
@ -46,6 +46,7 @@ export const ConversationNotificationsModal = ({

  return (
    <Modal
+      modalName="ConversationNotificationsModal"
      hasStickyButtons
      hasXButton
      onClose={onClose}
--- a/ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx
+++ b/ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx
@ -227,6 +227,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({

  return (
    <Modal
+      modalName="EditConversationAttributesModal"
      hasStickyButtons
      hasXButton
      i18n={i18n}
--- a/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
+++ b/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
@ -76,6 +76,7 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
    <>
      {hasGenerateNewLinkDialog && (
        <ConfirmationDialog
+          dialogName="GroupLinkManagement.resetLink"
          actions={[
            {
              action: () => {
--- a/ts/components/conversation/conversation-details/PendingInvites.tsx
+++ b/ts/components/conversation/conversation-details/PendingInvites.tsx
@ -215,6 +215,7 @@ function MembershipActionConfirmation({

  return (
    <ConfirmationDialog
+      dialogName="PendingInvites.actionConfirmation"
      actions={[
        {
          action: modalAction,