From 2a4390c320edbcb9cbe71a58cffebdf33848845b Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Fri, 26 Jul 2024 17:33:14 +0200 Subject: [PATCH 1/4] Migrate createpost for v10 version --- webapp/src/components/rhs/rhs_new_tab.tsx | 39 ++++------------------- 1 file changed, 6 insertions(+), 33 deletions(-) diff --git a/webapp/src/components/rhs/rhs_new_tab.tsx b/webapp/src/components/rhs/rhs_new_tab.tsx index 19f1f636..28f8eacf 100644 --- a/webapp/src/components/rhs/rhs_new_tab.tsx +++ b/webapp/src/components/rhs/rhs_new_tab.tsx @@ -74,9 +74,7 @@ const setEditorText = (text: string) => { }; const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => { - const dispatch = useDispatch(); const intl = useIntl(); - const [draft, updateDraft] = useState(null); const addBrainstormingIdeas = useCallback(() => { setEditorText(intl.formatMessage({defaultMessage: 'Brainstorm ideas about '})); }, []); @@ -120,37 +118,12 @@ const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => { data-testid='rhs-new-tab-create-post' channelId={botChannelId} placeholder={intl.formatMessage({defaultMessage: 'Ask Copilot anything...'})} - rootId={'ai_copilot'} - onSubmit={async (p: any) => { - const post = {...p}; - post.channel_id = botChannelId || ''; - post.props = {}; - post.uploadsInProgress = []; - post.file_ids = p.fileInfos.map((f: any) => f.id); - const created = await createPost(post); - selectPost(created.id); - setCurrentTab('thread'); - dispatch({ - type: 'SET_GLOBAL_ITEM', - data: { - name: 'comment_draft_ai_copilot', - value: {message: '', fileInfos: [], uploadsInProgress: []}, - }, - }); - }} - draft={draft} - onUpdateCommentDraft={(newDraft: any) => { - updateDraft(newDraft); - const timestamp = new Date().getTime(); - newDraft.updateAt = timestamp; - newDraft.createAt = newDraft.createAt || timestamp; - dispatch({ - type: 'SET_GLOBAL_ITEM', - data: { - name: 'comment_draft_ai_copilot', - value: newDraft, - }, - }); + isThreadView={true} + afterSubmit={(result: {created?: {id: string}}) => { + if (result.created?.id) { + selectPost(result.created?.id); + setCurrentTab('thread'); + } }} /> From 3c152692861f34d11117e427aa80a1e4a228aef5 Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Mon, 29 Jul 2024 19:42:05 +0200 Subject: [PATCH 2/4] compatibiliy with older versions --- webapp/src/components/rhs/rhs_new_tab.tsx | 83 +++++++++++++++++++---- 1 file changed, 71 insertions(+), 12 deletions(-) diff --git a/webapp/src/components/rhs/rhs_new_tab.tsx b/webapp/src/components/rhs/rhs_new_tab.tsx index 28f8eacf..038f557c 100644 --- a/webapp/src/components/rhs/rhs_new_tab.tsx +++ b/webapp/src/components/rhs/rhs_new_tab.tsx @@ -16,6 +16,9 @@ import {createPost} from '@/client'; import {Button, RHSPaddingContainer, RHSText, RHSTitle} from './common'; +const AdvanceTextEditor = (window as any).Components.AdvanceTextEditor; + +// Compatibility with pre v10 create post export const CreatePost = (window as any).Components.CreatePost; const CreatePostContainer = styled.div` @@ -75,6 +78,13 @@ const setEditorText = (text: string) => { const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => { const intl = useIntl(); + + // Compatibility with pre v10 create post export + const dispatch = useDispatch(); + + // Compatibility with pre v10 create post export + const [draft, updateDraft] = useState(null); + const addBrainstormingIdeas = useCallback(() => { setEditorText(intl.formatMessage({defaultMessage: 'Brainstorm ideas about '})); }, []); @@ -90,6 +100,66 @@ const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => { const addProsAndCons = useCallback(() => { setEditorText(intl.formatMessage({defaultMessage: 'Write a pros and cons list about '})); }, []); + + // Compatibility with pre v10 create post export + let editorComponent; + if (AdvanceTextEditor) { + editorComponent = ( + { + if (result.created?.id) { + selectPost(result.created?.id); + setCurrentTab('thread'); + } + }} + /> + ); + } else { + editorComponent = ( + { + const post = {...p}; + post.channel_id = botChannelId || ''; + post.props = {}; + post.uploadsInProgress = []; + post.file_ids = p.fileInfos.map((f: any) => f.id); + const created = await createPost(post); + selectPost(created.id); + setCurrentTab('thread'); + dispatch({ + type: 'SET_GLOBAL_ITEM', + data: { + name: 'comment_draft_ai_copilot', + value: {message: '', fileInfos: [], uploadsInProgress: []}, + }, + }); + }} + draft={draft} + onUpdateCommentDraft={(newDraft: any) => { + updateDraft(newDraft); + const timestamp = new Date().getTime(); + newDraft.updateAt = timestamp; + newDraft.createAt = newDraft.createAt || timestamp; + dispatch({ + type: 'SET_GLOBAL_ITEM', + data: { + name: 'comment_draft_ai_copilot', + value: newDraft, + }, + }); + }} + /> + ); + } + return ( @@ -114,18 +184,7 @@ const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => { - { - if (result.created?.id) { - selectPost(result.created?.id); - setCurrentTab('thread'); - } - }} - /> + {editorComponent} ); From 1bb282dcf2774d4f18b17f1ea08f60b02e6bc825 Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Tue, 6 Aug 2024 14:37:06 +0200 Subject: [PATCH 3/4] Update to fixed typo --- webapp/src/components/rhs/rhs_new_tab.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webapp/src/components/rhs/rhs_new_tab.tsx b/webapp/src/components/rhs/rhs_new_tab.tsx index 038f557c..32c67abb 100644 --- a/webapp/src/components/rhs/rhs_new_tab.tsx +++ b/webapp/src/components/rhs/rhs_new_tab.tsx @@ -16,7 +16,7 @@ import {createPost} from '@/client'; import {Button, RHSPaddingContainer, RHSText, RHSTitle} from './common'; -const AdvanceTextEditor = (window as any).Components.AdvanceTextEditor; +const AdvancedTextEditor = (window as any).Components.AdvancedTextEditor; // Compatibility with pre v10 create post export const CreatePost = (window as any).Components.CreatePost; @@ -103,9 +103,9 @@ const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => { // Compatibility with pre v10 create post export let editorComponent; - if (AdvanceTextEditor) { + if (AdvancedTextEditor) { editorComponent = ( - Date: Tue, 6 Aug 2024 15:39:19 +0200 Subject: [PATCH 4/4] Fix old detection of CreatePost --- webapp/src/components/llmbot_post.tsx | 4 ++-- webapp/src/components/rhs/rhs.tsx | 4 +++- webapp/src/components/rhs/rhs_new_tab.tsx | 7 ++----- webapp/src/components/rhs/thread_item.tsx | 4 ++-- webapp/src/hooks.tsx | 6 ++++-- webapp/src/index.tsx | 3 ++- webapp/src/mm_webapp.ts | 15 +++++++++++++++ 7 files changed, 30 insertions(+), 13 deletions(-) create mode 100644 webapp/src/mm_webapp.ts diff --git a/webapp/src/components/llmbot_post.tsx b/webapp/src/components/llmbot_post.tsx index d518aeb6..5b80064a 100644 --- a/webapp/src/components/llmbot_post.tsx +++ b/webapp/src/components/llmbot_post.tsx @@ -12,12 +12,12 @@ import {doPostbackSummary, doRegenerate, doStopGenerating} from '@/client'; import {useSelectNotAIPost, useSelectPost} from '@/hooks'; +import {PostMessagePreview} from '@/mm_webapp'; + import PostText from './post_text'; import IconRegenerate from './assets/icon_regenerate'; import IconCancel from './assets/icon_cancel'; -const PostMessagePreview = (window as any).Components.PostMessagePreview; - const FixPostHover = createGlobalStyle<{disableHover?: string}>` ${(props) => props.disableHover && css` &&&& { diff --git a/webapp/src/components/rhs/rhs.tsx b/webapp/src/components/rhs/rhs.tsx index 7747633e..b0a068e5 100644 --- a/webapp/src/components/rhs/rhs.tsx +++ b/webapp/src/components/rhs/rhs.tsx @@ -13,12 +13,14 @@ import {useBotlist} from '@/bots'; import RHSImage from '../assets/rhs_image'; +import {ThreadViewer as UnstyledThreadViewer} from '@/mm_webapp'; + import ThreadItem from './thread_item'; import RHSHeader from './rhs_header'; import RHSNewTab from './rhs_new_tab'; import {RHSPaddingContainer, RHSText, RHSTitle} from './common'; -const ThreadViewer = (window as any).Components.ThreadViewer && styled((window as any).Components.ThreadViewer)` +const ThreadViewer = UnstyledThreadViewer && styled(UnstyledThreadViewer)` height: 100%; `; diff --git a/webapp/src/components/rhs/rhs_new_tab.tsx b/webapp/src/components/rhs/rhs_new_tab.tsx index 32c67abb..173abc8d 100644 --- a/webapp/src/components/rhs/rhs_new_tab.tsx +++ b/webapp/src/components/rhs/rhs_new_tab.tsx @@ -14,12 +14,9 @@ import RHSImage from '../assets/rhs_image'; import {createPost} from '@/client'; -import {Button, RHSPaddingContainer, RHSText, RHSTitle} from './common'; - -const AdvancedTextEditor = (window as any).Components.AdvancedTextEditor; +import {AdvancedTextEditor, CreatePost} from '@/mm_webapp'; -// Compatibility with pre v10 create post export -const CreatePost = (window as any).Components.CreatePost; +import {Button, RHSPaddingContainer, RHSText, RHSTitle} from './common'; const CreatePostContainer = styled.div` .custom-textarea { diff --git a/webapp/src/components/rhs/thread_item.tsx b/webapp/src/components/rhs/thread_item.tsx index 8ae59b00..9baadecb 100644 --- a/webapp/src/components/rhs/thread_item.tsx +++ b/webapp/src/components/rhs/thread_item.tsx @@ -1,6 +1,8 @@ import React from 'react'; import styled from 'styled-components'; +import {Timestamp} from '@/mm_webapp'; + import {GrayPill} from '../pill'; const ThreadItemContainer = styled.div` @@ -9,8 +11,6 @@ const ThreadItemContainer = styled.div` border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12) `; -const Timestamp = (window as any).Components.Timestamp; - const Title = styled.div` color: var(--center-channel-color); display: flex; diff --git a/webapp/src/hooks.tsx b/webapp/src/hooks.tsx index 82b2909f..5204df46 100644 --- a/webapp/src/hooks.tsx +++ b/webapp/src/hooks.tsx @@ -4,6 +4,8 @@ import {selectPost, openRHS, selectRegularPost} from 'src/redux_actions'; import {viewMyChannel} from 'src/client'; +import {isRHSCompatable} from './mm_webapp'; + const selectPostLegacy = (postid: string, channelid: string) => { return { type: 'SELECT_POST', @@ -14,8 +16,8 @@ const selectPostLegacy = (postid: string, channelid: string) => { }; export const doSelectPost = (postId: string, channelId: string, dispatch: any) => { - // This if is for legacy mode where the AdvancedCreatecomment is not exported - if ((window as any).Components.CreatePost) { + // This if is for legacy mode where the neither createpost or advancedtexteditor is loaded + if (isRHSCompatable()) { dispatch(selectPost(postId)); dispatch(openRHS()); } else { diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx index 7e42dccc..fdfcb54c 100644 --- a/webapp/src/index.tsx +++ b/webapp/src/index.tsx @@ -23,6 +23,7 @@ import PostEventListener from './websocket'; import {BotsHandler, setupRedux} from './redux'; import UnreadsSummarize from './components/unreads_summarize'; import {PostbackPost} from './components/postback_post'; +import {isRHSCompatable} from './mm_webapp'; type WebappStore = Store>> @@ -81,7 +82,7 @@ export default class Plugin { }); let rhs: any = null; - if ((window as any).Components.CreatePost) { + if (isRHSCompatable()) { rhs = registry.registerRightHandSidebarComponent(RHS, RHSTitle); setOpenRHSAction(rhs.showRHSPlugin); } diff --git a/webapp/src/mm_webapp.ts b/webapp/src/mm_webapp.ts new file mode 100644 index 00000000..4ef70753 --- /dev/null +++ b/webapp/src/mm_webapp.ts @@ -0,0 +1,15 @@ + +export const AdvancedTextEditor = (window as any).Components.AdvancedTextEditor; + +// Compatibility with pre v10 create post export +export const CreatePost = (window as any).Components.CreatePost; + +export function isRHSCompatable(): boolean { + return AdvancedTextEditor || CreatePost; +} + +export const PostMessagePreview = (window as any).Components.PostMessagePreview; + +export const Timestamp = (window as any).Components.Timestamp; + +export const ThreadViewer = (window as any).Components.ThreadViewer;