Migrate Createpost to v10 version (#225)

* Migrate createpost for v10 version * compatibiliy with older versions * Update to fixed typo * Fix old detection of CreatePost
mattermost · Aug 8, 2024 · f450d96 · f450d96
1 parent aabcab0
commit f450d96
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 48 deletions.
diff --git 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
@@ -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
@@ -14,9 +14,9 @@ import RHSImage from '../assets/rhs_image';
 
 import {createPost} from '@/client';
 
-import {Button, RHSPaddingContainer, RHSText, RHSTitle} from './common';
+import {AdvancedTextEditor, CreatePost} from '@/mm_webapp';
 
-const CreatePost = (window as any).Components.CreatePost;
+import {Button, RHSPaddingContainer, RHSText, RHSTitle} from './common';
 
 const CreatePostContainer = styled.div`
 	.custom-textarea {
@@ -74,9 +74,14 @@ const setEditorText = (text: string) => {
 };
 
 const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => {
-    const dispatch = useDispatch();
     const intl = useIntl();
+
+    // Compatibility with pre v10 create post export
+    const dispatch = useDispatch();
+
+    // Compatibility with pre v10 create post export
     const [draft, updateDraft] = useState<any>(null);
+
     const addBrainstormingIdeas = useCallback(() => {
         setEditorText(intl.formatMessage({defaultMessage: 'Brainstorm ideas about '}));
     }, []);
@@ -92,6 +97,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 (AdvancedTextEditor) {
+        editorComponent = (
+            <AdvancedTextEditor
+                data-testid='rhs-new-tab-create-post'
+                channelId={botChannelId}
+                placeholder={intl.formatMessage({defaultMessage: 'Ask Copilot anything...'})}
+                isThreadView={true}
+                afterSubmit={(result: {created?: {id: string}}) => {
+                    if (result.created?.id) {
+                        selectPost(result.created?.id);
+                        setCurrentTab('thread');
+                    }
+                }}
+            />
+        );
+    } else {
+        editorComponent = (
+            <CreatePost
+                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,
+                        },
+                    });
+                }}
+            />
+        );
+    }
+
     return (
         <RHSPaddingContainer>
             <RHSImage/>
@@ -116,43 +181,7 @@ const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => {
                 </OptionButton>
             </QuestionOptions>
             <CreatePostContainer>
-                <CreatePost
-                    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,
-                            },
-                        });
-                    }}
-                />
+                {editorComponent}
             </CreatePostContainer>
         </RHSPaddingContainer>
     );

diff --git 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
@@ -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
@@ -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<GlobalState, Action<Record<string, unknown>>>
 
@@ -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
@@ -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;