Prevent thread creation on events with existing relation (matrix-org#8037)

Author: Germain

res/css/views/messages/_MessageActionBar.scss

@@ -65,6 +65,12 @@ limitations under the License.
 .mx_MessageActionBar_maskButton {
  width: 28px;
  height: 28px;
+
+ &:disabled,
+ &[disabled] {
+ cursor: not-allowed;
+ opacity: .75;
+ }
 }
 
 .mx_MessageActionBar_maskButton::after {

src/components/views/messages/MessageActionBar.tsx

@@ -19,7 +19,7 @@ limitations under the License.
 import React, { ReactElement, useEffect } from 'react';
 import { EventStatus, MatrixEvent, MatrixEventEvent } from 'matrix-js-sdk/src/models/event';
 import classNames from 'classnames';
-import { MsgType } from 'matrix-js-sdk/src/@types/event';
+import { MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
 
 import type { Relations } from 'matrix-js-sdk/src/models/relations';
 import { _t } from '../../../languageHandler';
@@ -166,7 +166,7 @@ interface IMessageActionBarProps {
  isQuoteExpanded?: boolean;
  getRelationsForEvent?: (
  eventId: string,
- relationType: string,
+ relationType: RelationType | string,
  eventType: string
  ) => Relations;
 }
@@ -303,11 +303,19 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
  key="cancel"
  />;
 
+ const hasARelation = !!this.props.mxEvent?.getRelation()?.rel_type;
+
  const threadTooltipButton = <CardContext.Consumer key="thread">
  { context =>
  <RovingAccessibleTooltipButton
  className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
- title={_t("Reply in thread")}
+
+ disabled={hasARelation}
+ title={!hasARelation
+ ? _t("Reply in thread")
+ : _t("Can't create a thread from an event with an existing relation")
+ }
+
  onClick={this.onThreadClick.bind(null, context.isCard)}
  />
  }

src/i18n/strings/en_EN.json

@@ -2103,6 +2103,7 @@
  "React": "React",
  "Edit": "Edit",
  "Reply in thread": "Reply in thread",
+ "Can't create a thread from an event with an existing relation": "Can't create a thread from an event with an existing relation",
  "Reply": "Reply",
  "Collapse quotes": "Collapse quotes",
  "Expand quotes": "Expand quotes",