Switch to using stable values for threads (matrix-org#8019)

Author: Germain

src/ContentMessages.tsx

@@ -19,12 +19,13 @@ limitations under the License.
 import React from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { IUploadOpts } from "matrix-js-sdk/src/@types/requests";
-import { MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
+import { MsgType } from "matrix-js-sdk/src/@types/event";
 import encrypt from "browser-encrypt-attachment";
 import extractPngChunks from "png-chunks-extract";
 import { IAbortablePromise, IImageInfo } from "matrix-js-sdk/src/@types/partials";
 import { logger } from "matrix-js-sdk/src/logger";
 import { IEventRelation, ISendEventResponse } from "matrix-js-sdk/src/matrix";
+import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 
 import { IEncryptedFile, IMediaEventInfo } from "./customisations/models/IMediaEventContent";
 import dis from './dispatcher/dispatcher';
@@ -658,7 +659,7 @@ export default class ContentMessages {
  return promBefore;
  }).then(function() {
  if (upload.canceled) throw new UploadCanceledError();
- const threadId = relation?.rel_type === RelationType.Thread
+ const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name
  ? relation.event_id
  : null;
  const prom = matrixClient.sendMessage(roomId, threadId, content);

src/components/structures/ThreadPanel.tsx

@@ -17,15 +17,18 @@ limitations under the License.
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
 import { Room } from 'matrix-js-sdk/src/models/room';
-import { RelationType } from 'matrix-js-sdk/src/@types/event';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import {
  Filter,
  IFilterDefinition,
- UNSTABLE_FILTER_RELATED_BY_SENDERS,
- UNSTABLE_FILTER_RELATED_BY_REL_TYPES,
 } from 'matrix-js-sdk/src/filter';
-import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
+import {
+ FILTER_RELATED_BY_REL_TYPES,
+ FILTER_RELATED_BY_SENDERS,
+ Thread,
+ ThreadEvent,
+ THREAD_RELATION_TYPE,
+} from 'matrix-js-sdk/src/models/thread';
 import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 
 import BaseCard from "../views/right_panel/BaseCard";
@@ -54,13 +57,13 @@ export async function getThreadTimelineSet(
  const definition: IFilterDefinition = {
  "room": {
  "timeline": {
- [UNSTABLE_FILTER_RELATED_BY_REL_TYPES.name]: [RelationType.Thread],
+ [FILTER_RELATED_BY_REL_TYPES.name]: [THREAD_RELATION_TYPE.name],
  },
  },
  };
 
  if (filterType === ThreadFilterType.My) {
- definition.room.timeline[UNSTABLE_FILTER_RELATED_BY_SENDERS.name] = [myUserId];
+ definition.room.timeline[FILTER_RELATED_BY_SENDERS.name] = [myUserId];
  }
 
  filter.setDefinition(definition);

src/components/structures/ThreadView.tsx

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React, { createRef, KeyboardEvent } from 'react';
-import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
-import { RelationType } from 'matrix-js-sdk/src/@types/event';
+import { Thread, ThreadEvent, THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
@@ -181,7 +180,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
  this.setState({
  thread,
  lastThreadReply: thread.lastReply((ev: MatrixEvent) => {
- return ev.isRelation(RelationType.Thread) && !ev.status;
+ return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
  }),
  }, async () => {
  thread.emit(ThreadEvent.ViewThread);
@@ -201,7 +200,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
  if (this.state.thread) {
  this.setState({
  lastThreadReply: this.state.thread.lastReply((ev: MatrixEvent) => {
- return ev.isRelation(RelationType.Thread) && !ev.status;
+ return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
  }),
  });
  }
@@ -288,7 +287,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
  private get threadRelation(): IEventRelation {
  return {
- "rel_type": RelationType.Thread,
+ "rel_type": THREAD_RELATION_TYPE.name,
  "event_id": this.state.thread?.id,
  "m.in_reply_to": {
  "event_id": this.state.lastThreadReply?.getId() ?? this.state.thread?.id,

src/components/views/location/shareLocation.ts

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { RelationType } from "matrix-js-sdk/src/@types/event";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
 import { logger } from "matrix-js-sdk/src/logger";
 import { IEventRelation } from "matrix-js-sdk/src/models/event";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
+import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -41,7 +41,7 @@ export const shareLocation = (
 ) => async (uri: string, ts: number) => {
  if (!uri) return false;
  try {
- const threadId = relation?.rel_type === RelationType.Thread ? relation.event_id : null;
+ const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name ? relation.event_id : null;
  const assetType = shareType === LocationShareType.Pin ? LocationAssetType.Pin : LocationAssetType.Self;
  await client.sendMessage(roomId, threadId, makeLocationContent(undefined, uri, ts, undefined, assetType));
  } catch (e) {

src/components/views/rooms/MessageComposer.tsx

@@ -19,8 +19,9 @@ import classNames from 'classnames';
 import { IEventRelation, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
 import { Optional } from "matrix-events-sdk";
+import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -258,7 +259,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
  private renderPlaceholderText = () => {
  if (this.props.replyToEvent) {
- const replyingToThread = this.props.relation?.rel_type === RelationType.Thread;
+ const replyingToThread = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name;
  if (replyingToThread && this.props.e2eStatus) {
  return _t('Reply to encrypted thread…');
  } else if (replyingToThread) {
@@ -426,7 +427,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
  />;
  }
 
- const threadId = this.props.relation?.rel_type === RelationType.Thread
+ const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name
  ? this.props.relation.event_id
  : null;
 

src/components/views/rooms/MessageComposerButtons.tsx

@@ -20,7 +20,7 @@ import { M_POLL_START } from "matrix-events-sdk";
 import React, { createContext, ReactElement, useContext, useRef } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { RelationType } from 'matrix-js-sdk/src/@types/event';
+import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
 
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
@@ -318,7 +318,7 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
  },
  );
  } else {
- const threadId = this.props.relation?.rel_type === RelationType.Thread
+ const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name
  ? this.props.relation.event_id
  : null;
 
@@ -339,7 +339,7 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
 
  public render() {
  // do not allow sending polls within threads at this time
- if (this.props.relation?.rel_type === RelationType.Thread) return null;
+ if (this.props.relation?.rel_type === THREAD_RELATION_TYPE.name) return null;
 
  return (
  <CollapsibleButton

src/components/views/rooms/SendMessageComposer.tsx

@@ -22,6 +22,7 @@ import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { Composer as ComposerEvent } from "matrix-analytics-events/types/typescript/Composer";
+import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
 
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
@@ -132,7 +133,7 @@ export function createMessageContent(
  addReplyToMessageContent(content, replyToEvent, {
  permalinkCreator,
  includeLegacyFallback: includeReplyLegacyFallback,
- inThread: relation?.rel_type === RelationType.Thread,
+ inThread: relation?.rel_type === THREAD_RELATION_TYPE.name,
  });
  }
 
@@ -204,7 +205,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  }
 
  public componentDidUpdate(prevProps: ISendMessageComposerProps): void {
- const replyingToThread = this.props.relation?.key === RelationType.Thread;
+ const replyingToThread = this.props.relation?.key === THREAD_RELATION_TYPE.name;
  const differentEventTarget = this.props.relation?.event_id !== prevProps.relation?.event_id;
 
  const threadChanged = replyingToThread && (differentEventTarget);
@@ -221,7 +222,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  if (this.editorRef.current?.isComposing(event)) {
  return;
  }
- const replyingToThread = this.props.relation?.key === RelationType.Thread;
+ const replyingToThread = this.props.relation?.key === THREAD_RELATION_TYPE.name;
  const action = getKeyBindingsManager().getMessageComposerAction(event);
  switch (action) {
  case KeyBindingAction.SendMessage:
@@ -358,7 +359,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  eventName: "Composer",
  isEditing: false,
  isReply: !!this.props.replyToEvent,
- inThread: this.props.relation?.rel_type === RelationType.Thread,
+ inThread: this.props.relation?.rel_type === THREAD_RELATION_TYPE.name,
  };
  if (posthogEvent.inThread) {
  const threadRoot = this.props.room.findEventById(this.props.relation.event_id);
@@ -383,7 +384,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  if (!containsEmote(model) && isSlashCommand(this.model)) {
  const [cmd, args, commandText] = getSlashCommand(this.model);
  if (cmd) {
- const threadId = this.props.relation?.rel_type === RelationType.Thread
+ const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name
  ? this.props.relation?.event_id
  : null;
 
@@ -398,7 +399,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  addReplyToMessageContent(content, replyToEvent, {
  permalinkCreator: this.props.permalinkCreator,
  includeLegacyFallback: true,
- inThread: this.props.relation?.rel_type === RelationType.Thread,
+ inThread: this.props.relation?.rel_type === THREAD_RELATION_TYPE.name,
  });
  }
  } else {
@@ -434,7 +435,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  decorateStartSendingTime(content);
  }
 
- const threadId = this.props.relation?.rel_type === RelationType.Thread
+ const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name
  ? this.props.relation.event_id
  : null;
 
@@ -453,7 +454,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  if (containsEmoji(content, effect.emojis)) {
  // For initial threads launch, chat effects are disabled
  // see #19731
- const isNotThread = this.props.relation?.rel_type !== RelationType.Thread;
+ const isNotThread = this.props.relation?.rel_type !== THREAD_RELATION_TYPE.name;
  if (!SettingsStore.getValue("feature_thread") || isNotThread) {
  dis.dispatch({ action: `effects.${effect.command}` });
  }
@@ -497,7 +498,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
 
  private get editorStateKey() {
  let key = `mx_cider_state_${this.props.room.roomId}`;
- if (this.props.relation?.rel_type === RelationType.Thread) {
+ if (this.props.relation?.rel_type === THREAD_RELATION_TYPE.name) {
  key += `_${this.props.relation.event_id}`;
  }
  return key;
@@ -508,7 +509,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  }
 
  private restoreStoredEditorState(partCreator: PartCreator): Part[] {
- const replyingToThread = this.props.relation?.key === RelationType.Thread;
+ const replyingToThread = this.props.relation?.key === THREAD_RELATION_TYPE.name;
  if (replyingToThread) {
  return null;
  }
@@ -600,7 +601,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
  };
 
  render() {
- const threadId = this.props.relation?.rel_type === RelationType.Thread
+ const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name
  ? this.props.relation.event_id
  : null;
  return (

src/stores/widgets/StopGapWidgetDriver.ts

@@ -29,10 +29,11 @@ import {
  WidgetEventCapability,
  WidgetKind,
 } from "matrix-widget-api";
-import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 import { IContent, IEvent, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
+import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 
 import { iterableDiff, iterableIntersection } from "../../utils/iterables";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -169,7 +170,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
  if (containsEmoji(content, effect.emojis)) {
  // For initial threads launch, chat effects are disabled
  // see #19731
- const isNotThread = content["m.relates_to"].rel_type !== RelationType.Thread;
+ const isNotThread = content["m.relates_to"].rel_type !== THREAD_RELATION_TYPE.name;
  if (!SettingsStore.getValue("feature_thread") || isNotThread) {
  dis.dispatch({ action: `effects.${effect.command}` });
  }

src/utils/Reply.ts

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { RelationType } from "matrix-js-sdk/src/@types/event";
 import sanitizeHtml from "sanitize-html";
 import escapeHtml from "escape-html";
+import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 
 import { PERMITTED_URL_SCHEMES } from "../HtmlUtils";
 import { makeUserPermalink, RoomPermalinkCreator } from "./permalinks/Permalinks";
@@ -163,7 +163,7 @@ export function makeReplyMixIn(ev?: MatrixEvent, inThread = false): RecursivePar
  if (ev.isThreadRelation) {
  mixin['m.relates_to'] = {
  ...mixin['m.relates_to'],
- rel_type: RelationType.Thread,
+ rel_type: THREAD_RELATION_TYPE.name,
  event_id: ev.threadRootId,
  };
  }

test/components/structures/ThreadPanel-test.tsx

@@ -18,10 +18,7 @@ import React from 'react';
 import { shallow, mount } from "enzyme";
 import {
  MatrixClient,
- RelationType,
  Room,
- UNSTABLE_FILTER_RELATED_BY_REL_TYPES,
- UNSTABLE_FILTER_RELATED_BY_SENDERS,
 } from 'matrix-js-sdk/src/matrix';
 import { mocked } from 'jest-mock';
 import '../../skinned-sdk';
@@ -179,7 +176,7 @@ describe('ThreadPanel', () => {
  const [filterKey, filter] = mocked(client).getOrCreateFilter.mock.calls[0];
  expect(filterKey).toEqual(`THREAD_PANEL_${room.roomId}_${ThreadFilterType.All}`);
  expect(filter.getDefinition().room.timeline).toEqual({
- [UNSTABLE_FILTER_RELATED_BY_REL_TYPES.name]: [RelationType.Thread],
+ related_by_rel_types: ["m.thread"],
  });
  });
 
@@ -189,8 +186,8 @@ describe('ThreadPanel', () => {
  const [filterKey, filter] = mocked(client).getOrCreateFilter.mock.calls[0];
  expect(filterKey).toEqual(`THREAD_PANEL_${room.roomId}_${ThreadFilterType.My}`);
  expect(filter.getDefinition().room.timeline).toEqual({
- [UNSTABLE_FILTER_RELATED_BY_REL_TYPES.name]: [RelationType.Thread],
- [UNSTABLE_FILTER_RELATED_BY_SENDERS.name]: [aliceId],
+ related_by_rel_types: ["m.thread"],
+ related_by_senders: [aliceId],
  });
  });
  });