From 41081b9eee13dba7f4e20804760ab4873f0b261b Mon Sep 17 00:00:00 2001 From: M-ZubairAhmed Date: Mon, 12 Feb 2024 14:54:27 +0000 Subject: [PATCH] [MM-56572] Preview doesn't work when editing a channel header (#26158) --- .../edit_channel_header_modal.test.tsx.snap | 45 ++++++++++---- .../edit_channel_header_modal.test.tsx | 25 +++++--- .../edit_channel_header_modal.tsx | 58 +++++++------------ .../edit_channel_header_modal/index.ts | 5 ++ .../src/components/textbox/textbox_links.tsx | 10 +--- webapp/channels/src/i18n/en.json | 4 +- .../channels/src/sass/components/_modal.scss | 10 ++++ 7 files changed, 93 insertions(+), 64 deletions(-) diff --git a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap index c5b1470a59..a60f353a39 100644 --- a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap +++ b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap @@ -65,7 +65,7 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = ` + } showPreview={false} updatePreview={[Function]} /> @@ -191,7 +196,7 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = ` + } showPreview={false} updatePreview={[Function]} /> @@ -335,7 +345,7 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = ` + } showPreview={false} updatePreview={[Function]} /> @@ -471,7 +486,7 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = ` + } showPreview={false} updatePreview={[Function]} /> @@ -597,7 +617,7 @@ exports[`components/EditChannelHeaderModal submitted 1`] = ` + } showPreview={false} updatePreview={[Function]} /> diff --git a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.test.tsx b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.test.tsx index 790c441761..2a3148406a 100644 --- a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.test.tsx +++ b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.test.tsx @@ -6,9 +6,11 @@ import React from 'react'; import type {Channel, ChannelType} from '@mattermost/types/channels'; -import EditChannelHeaderModal from 'components/edit_channel_header_modal/edit_channel_header_modal'; +import {EditChannelHeaderModal} from 'components/edit_channel_header_modal/edit_channel_header_modal'; +import type {EditChannelHeaderModal as EditChannelHeaderModalClass} from 'components/edit_channel_header_modal/edit_channel_header_modal'; import Textbox from 'components/textbox'; +import {type MockIntl} from 'tests/helpers/intl-test-helper'; import {testComponentForLineBreak} from 'tests/helpers/line_break_helpers'; import Constants from 'utils/constants'; import * as Utils from 'utils/utils'; @@ -51,6 +53,9 @@ describe('components/EditChannelHeaderModal', () => { setShowPreview: jest.fn(), patchChannel: jest.fn().mockResolvedValue({}), }, + intl: { + formatMessage: ({defaultMessage}) => defaultMessage, + } as MockIntl, }; test('should match snapshot, init', () => { @@ -105,11 +110,13 @@ describe('components/EditChannelHeaderModal', () => { describe('handleSave', () => { test('on no change, should hide the modal without trying to patch a channel', async () => { - const wrapper = shallow( + const wrapper = shallow( , ); - await wrapper.instance().handleSave(); + const instance = wrapper.instance() as EditChannelHeaderModalClass; + + await instance.handleSave(); expect(wrapper.state('show')).toBe(false); @@ -119,13 +126,15 @@ describe('components/EditChannelHeaderModal', () => { test('on error, should not close modal and set server error state', async () => { baseProps.actions.patchChannel.mockResolvedValueOnce({error: serverError}); - const wrapper = shallow( + const wrapper = shallow( , ); + const instance = wrapper.instance() as EditChannelHeaderModalClass; + wrapper.setState({header: 'New header'}); - await wrapper.instance().handleSave(); + await instance.handleSave(); expect(wrapper.state('show')).toBe(true); expect(wrapper.state('serverError')).toBe(serverError); @@ -134,13 +143,15 @@ describe('components/EditChannelHeaderModal', () => { }); test('on success, should close modal', async () => { - const wrapper = shallow( + const wrapper = shallow( , ); + const instance = wrapper.instance() as EditChannelHeaderModalClass; + wrapper.setState({header: 'New header'}); - await wrapper.instance().handleSave(); + await instance.handleSave(); expect(wrapper.state('show')).toBe(false); diff --git a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx index 859b7c827d..0157a90a8f 100644 --- a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx +++ b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx @@ -3,13 +3,12 @@ import React from 'react'; import {Modal} from 'react-bootstrap'; -import {FormattedMessage} from 'react-intl'; +import type {WrappedComponentProps} from 'react-intl'; +import {FormattedMessage, injectIntl} from 'react-intl'; import type {Channel} from '@mattermost/types/channels'; import type {ServerError} from '@mattermost/types/errors'; -import type {ActionResult} from 'mattermost-redux/types/actions'; - import Textbox, {TextboxLinks} from 'components/textbox'; import type {TextboxElement} from 'components/textbox'; import type TextboxClass from 'components/textbox/textbox'; @@ -17,30 +16,15 @@ import type TextboxClass from 'components/textbox/textbox'; import Constants from 'utils/constants'; import {isKeyPressed} from 'utils/keyboard'; import {isMobile} from 'utils/user_agent'; -import {insertLineBreakFromKeyEvent, isUnhandledLineBreakKeyCombo, localizeMessage} from 'utils/utils'; +import {insertLineBreakFromKeyEvent, isUnhandledLineBreakKeyCombo} from 'utils/utils'; + +import type {PropsFromRedux} from './index'; const KeyCodes = Constants.KeyCodes; const headerMaxLength = 1024; -type Props = { - - /* - * Object with info about current channel , - */ - channel: Channel; - - /* - * boolean should be `ctrl` button pressed to send - */ - ctrlSend: boolean; - - /* - * Should preview be showed - */ - shouldShowPreview: boolean; - - markdownPreviewFeatureIsEnabled: boolean; +type OwnProps = { /** * Called when the modal has been hidden and should be removed. @@ -48,21 +32,12 @@ type Props = { onExited: () => void; /* - * Collection of redux actions + * Object with info about current channel , */ - actions: { + channel: Channel; +}; - /* - * patch channel redux-action - */ - patchChannel: (channelId: string, patch: Partial) => Promise; - - /* - * Set show preview for textbox - */ - setShowPreview: (showPreview: boolean) => void; - }; -} +type Props = OwnProps & PropsFromRedux & WrappedComponentProps; type State = { header?: string; @@ -72,7 +47,7 @@ type State = { postError?: React.ReactNode; } -export default class EditChannelHeaderModal extends React.PureComponent { +export class EditChannelHeaderModal extends React.PureComponent { private editChannelHeaderTextboxRef: React.RefObject; constructor(props: Props) { @@ -266,7 +241,7 @@ export default class EditChannelHeaderModal extends React.PureComponent 0 : false} hasExceededCharacterLimit={this.state.header ? this.state.header.length > headerMaxLength : false} - previewMessageLink={localizeMessage('edit_channel_header.previewHeader', 'Edit Header')} + previewMessageLink={ + + } /> {this.renderError()} @@ -316,3 +296,5 @@ export default class EditChannelHeaderModal extends React.PureComponent; + export default connect(mapStateToProps, mapDispatchToProps)(EditChannelHeaderModal); diff --git a/webapp/channels/src/components/textbox/textbox_links.tsx b/webapp/channels/src/components/textbox/textbox_links.tsx index aeb5cafa70..03b6de0f22 100644 --- a/webapp/channels/src/components/textbox/textbox_links.tsx +++ b/webapp/channels/src/components/textbox/textbox_links.tsx @@ -2,14 +2,14 @@ // See LICENSE.txt for license information. import React from 'react'; -import type {MouseEvent} from 'react'; +import type {MouseEvent, ReactNode} from 'react'; import {FormattedMessage} from 'react-intl'; import ExternalLink from 'components/external_link'; type Props = { showPreview?: boolean; - previewMessageLink?: string; + previewMessageLink?: ReactNode; hasText?: boolean; hasExceededCharacterLimit?: boolean; isMarkdownPreviewEnabled: boolean; @@ -38,11 +38,7 @@ function TextboxLinks({ } if (previewMessageLink) { - editHeader = ( - - {previewMessageLink} - - ); + editHeader = previewMessageLink; } else { editHeader = (