AXON-1333: Add mentions provider for BB AKE (#1168)

* AXON-1333: Add mentions provider for BB AKE

* AXON-1333: Fix mentions for DC

Author: om-ukr

src/react/atlascode/common/CommentForm.tsx

@@ -11,6 +11,7 @@ type CommentFormProps = {
     onSave: (content: string) => Promise<void>;
     onCancel?: () => void;
     fetchUsers?: (input: string) => Promise<User[]>;
+    mentionsProvider: AtlascodeMentionProvider | undefined;
 };
 
 const CommentForm: React.FC<CommentFormProps> = (props: CommentFormProps) => {
@@ -27,9 +28,9 @@ const CommentForm: React.FC<CommentFormProps> = (props: CommentFormProps) => {
                                 defaultValue={props.initialContent}
                                 onSave={props.onSave}
                                 onCancel={props.onCancel}
-                                mentionProvider={Promise.resolve({
-                                    unsubscribe: () => {},
-                                } as any as AtlascodeMentionProvider)}
+                                mentionProvider={
+                                    props.mentionsProvider ? Promise.resolve(props.mentionsProvider) : undefined
+                                }
                                 isBitbucket={true}
                             />
                         </div>

src/react/atlascode/pullrequest/InlineRenderedTextEditor.tsx

@@ -37,6 +37,7 @@ type InlineTextEditorProps = {
     htmlContent: string;
     onSave?: (value: string) => void;
     fetchUsers?: (input: string) => Promise<User[]>;
+    mentionsProvider?: AtlascodeMentionProvider;
 };
 
 const InlineRenderedTextEditor: React.FC<InlineTextEditorProps> = (props: InlineTextEditorProps) => {
@@ -64,7 +65,7 @@ const InlineRenderedTextEditor: React.FC<InlineTextEditorProps> = (props: Inline
                 defaultValue={props.htmlContent}
                 onSave={handleSave}
                 onCancel={exitEditMode}
-                mentionProvider={Promise.resolve({ unsubscribe: () => {} } as any as AtlascodeMentionProvider)}
+                mentionProvider={props.mentionsProvider ? Promise.resolve(props.mentionsProvider) : undefined}
                 isBitbucket={true}
             />
         </div>

src/react/atlascode/pullrequest/NestedComment.tsx

@@ -2,6 +2,7 @@ import { Avatar, Box, Button, CircularProgress, Grid, Tooltip, Typography } from
 import { makeStyles } from '@mui/styles';
 import { format, parseISO } from 'date-fns';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { AtlascodeMentionProvider } from 'src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider';
 
 import { Comment, PullRequestState, User } from '../../../bitbucket/model';
 import CommentForm from '../common/CommentForm';
@@ -55,6 +56,7 @@ type NestedCommentProps = {
     fetchUsers: (input: string) => Promise<User[]>;
     onDelete: (comment: Comment) => Promise<void>;
     pullRequestState: PullRequestState;
+    mentionsProvider?: AtlascodeMentionProvider;
 };
 
 export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
@@ -63,6 +65,7 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
     fetchUsers,
     onDelete,
     pullRequestState,
+    mentionsProvider,
 }) => {
     const classes = useStyles();
     const [isReplying, setIsReplying] = useState(false);
@@ -215,6 +218,7 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
                                             onSave={handleSave}
                                             onCancel={handleCancel}
                                             fetchUsers={fetchUsers}
+                                            mentionsProvider={mentionsProvider}
                                         />
                                     </Box>
                                 )}
@@ -227,6 +231,7 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
                                         onDelete={onDelete}
                                         fetchUsers={fetchUsers}
                                         pullRequestState={pullRequestState}
+                                        mentionsProvider={mentionsProvider}
                                     />
                                 </Box>
                             </Grid>
@@ -243,6 +248,7 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
                         onSave={handleEdit}
                         onCancel={handleCancelEdit}
                         fetchUsers={fetchUsers}
+                        mentionsProvider={mentionsProvider}
                     />
                 </Box>
             )}

src/react/atlascode/pullrequest/NestedCommentList.tsx

@@ -1,6 +1,7 @@
 import { Grid } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import React from 'react';
+import { AtlascodeMentionProvider } from 'src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider';
 
 import { Comment, PullRequestState, User } from '../../../bitbucket/model';
 import { NestedComment } from './NestedComment';
@@ -11,6 +12,7 @@ type NestedCommentListProps = {
     fetchUsers: (input: string) => Promise<User[]>;
     onDelete: (comment: Comment) => Promise<void>;
     pullRequestState: PullRequestState;
+    mentionsProvider?: AtlascodeMentionProvider;
 };
 
 const useStyles = makeStyles({
@@ -25,6 +27,7 @@ export const NestedCommentList: React.FunctionComponent<NestedCommentListProps>
     fetchUsers,
     onDelete,
     pullRequestState,
+    mentionsProvider,
 }) => {
     const classes = useStyles();
     return (
@@ -37,6 +40,7 @@ export const NestedCommentList: React.FunctionComponent<NestedCommentListProps>
                         fetchUsers={fetchUsers}
                         onDelete={onDelete}
                         pullRequestState={pullRequestState}
+                        mentionsProvider={mentionsProvider}
                     />
                 </Grid>
             ))}

src/react/atlascode/pullrequest/PullRequestDetailsPage.tsx

@@ -1,3 +1,4 @@
+import { MentionNameStatus } from '@atlaskit/mention';
 import { setGlobalTheme } from '@atlaskit/tokens';
 import { InlineTextEditor } from '@atlassianlabs/guipi-core-components';
 import {
@@ -14,8 +15,9 @@ import {
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { AnalyticsView } from 'src/analyticsTypes';
+import { AtlascodeMentionProvider } from 'src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider';
 
 import { User } from '../../../bitbucket/model';
 import { AtlascodeErrorBoundary } from '../common/ErrorBoundary';
@@ -171,6 +173,49 @@ function PullRequestDetailsPageContent({ state, controller }: PullRequestDetails
         300,
         { leading: false },
     );
+
+    const mentionsProvider = useMemo(() => {
+        if (!state?.pr?.site?.details?.baseApiUrl) {
+            return;
+        }
+        return AtlascodeMentionProvider.init(
+            {
+                url: '',
+                mentionNameResolver: {
+                    lookupName: async (id: string) => {
+                        const accountId = id.split('accountid:')[1];
+                        if (!accountId) {
+                            return {
+                                id,
+                                name: 'Unknown User',
+                                status: MentionNameStatus.UNKNOWN,
+                            };
+                        }
+                        const users = await handleFetchUsers(accountId);
+                        if (users.length === 0) {
+                            return {
+                                id,
+                                name: 'Unknown User',
+                                status: MentionNameStatus.UNKNOWN,
+                            };
+                        }
+                        const resolvedMention = {
+                            id,
+                            name: users[0].displayName,
+                            status: MentionNameStatus.OK,
+                        };
+                        return resolvedMention;
+                    },
+                    cacheName: (_id: string, _name: string) => {
+                        // currently this method is never called by Atlaskit. So it is implemented only to satisfy the interface
+                    },
+                },
+                isBitbucketCloud: state.pr.site.details.isCloud,
+            },
+            handleFetchUsers,
+        );
+    }, [state?.pr?.site.details, handleFetchUsers]);
+
     return (
         <>
             <PullRequestHeader state={state} controller={controller} />
@@ -184,6 +229,7 @@ function PullRequestDetailsPageContent({ state, controller }: PullRequestDetails
                             state={state}
                             controller={controller}
                             handleFetchUsers={handleFetchUsers}
+                            mentionsProvider={mentionsProvider}
                         />
                     </Paper>
                 </Grid>

src/react/atlascode/pullrequest/PullRequestMainContent.tsx

@@ -1,5 +1,6 @@
 import { Box, Grid } from '@mui/material';
 import React from 'react';
+import { AtlascodeMentionProvider } from 'src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider';
 
 import { User } from '../../../bitbucket/model';
 import { BasicPanel } from '../common/BasicPanel';
@@ -16,12 +17,14 @@ interface PullRequestMainContentProps {
     state: PullRequestDetailsState;
     controller: PullRequestDetailsControllerApi;
     handleFetchUsers: (input: string, abortSignal?: AbortSignal) => Promise<User[]>;
+    mentionsProvider?: AtlascodeMentionProvider;
 }
 
 export const PullRequestMainContent: React.FC<PullRequestMainContentProps> = ({
     state,
     controller,
     handleFetchUsers,
+    mentionsProvider,
 }) => {
     return (
         <Box margin={2}>
@@ -35,6 +38,7 @@ export const PullRequestMainContent: React.FC<PullRequestMainContentProps> = ({
                         fetchUsers={handleFetchUsers}
                         isLoading={state.loadState.basicData}
                         summaryChange={controller.updateSummary}
+                        mentionsProvider={mentionsProvider}
                     />
                 </Grid>
                 {state.relatedJiraIssues.length > 0 && (
@@ -86,13 +90,15 @@ export const PullRequestMainContent: React.FC<PullRequestMainContentProps> = ({
                                     fetchUsers={handleFetchUsers}
                                     onDelete={controller.deleteComment}
                                     pullRequestState={state.pr.data.state}
+                                    mentionsProvider={mentionsProvider}
                                 />
                             </Grid>
                             <Grid item>
                                 <CommentForm
                                     currentUser={state.currentUser}
                                     fetchUsers={handleFetchUsers}
                                     onSave={controller.postComment}
+                                    mentionsProvider={mentionsProvider}
                                 />
                             </Grid>
                         </Grid>

src/react/atlascode/pullrequest/SummaryPanel.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useCallback } from 'react';
+import { AtlascodeMentionProvider } from 'src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider';
 
 import { User } from '../../../bitbucket/model';
 import { BasicPanel } from '../common/BasicPanel';
@@ -11,10 +12,11 @@ interface SummaryPanelProps {
     summaryChange: (text: string) => void;
     isLoading: boolean;
     isDefaultExpanded?: boolean;
+    mentionsProvider?: AtlascodeMentionProvider;
 }
 
 export const SummaryPanel: React.FC<SummaryPanelProps> = memo(
-    ({ rawSummary, htmlSummary, fetchUsers, summaryChange, isLoading, isDefaultExpanded }) => {
+    ({ rawSummary, htmlSummary, fetchUsers, summaryChange, isLoading, isDefaultExpanded, mentionsProvider }) => {
         const handleFetchUsers = useCallback(
             async (input: string) => {
                 return await fetchUsers(input);
@@ -41,6 +43,7 @@ export const SummaryPanel: React.FC<SummaryPanelProps> = memo(
                     htmlContent={htmlSummary}
                     onSave={handleSummaryChange}
                     fetchUsers={handleFetchUsers}
+                    mentionsProvider={mentionsProvider}
                 />
             </BasicPanel>
         );

src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider.ts

@@ -5,14 +5,21 @@ import {
     MentionResourceConfig,
     ResolvingMentionProvider,
 } from '@atlaskit/mention';
+import { User } from 'src/bitbucket/model';
 
 import { MentionInfo } from '../../AbstractIssueEditorPage';
+type FetchJiraUsersFunc = (input: string, accountId?: string) => Promise<MentionInfo[]>;
+type FetchBBUsersFunc = (input: string, abortSignal?: AbortSignal) => Promise<User[]>;
+
+type ExtendedMentionResourceConfig = MentionResourceConfig & {
+    isBitbucketCloud?: boolean;
+};
 
 export class AtlascodeMentionProvider extends AbstractMentionResource implements ResolvingMentionProvider {
     static #instance: AtlascodeMentionProvider;
 
-    private config: MentionResourceConfig;
-    private fetchUsers: (input: string, accountId?: string) => Promise<MentionInfo[]>;
+    private config: ExtendedMentionResourceConfig;
+    private fetchUsers: FetchJiraUsersFunc | FetchBBUsersFunc;
     private mentionRequests: Map<
         string,
         {
@@ -23,8 +30,8 @@ export class AtlascodeMentionProvider extends AbstractMentionResource implements
     private cacheDuration = 300000; // 5 minutes
 
     public static init(
-        config: MentionResourceConfig,
-        fetchUsers: (input: string, accountId?: string) => Promise<MentionInfo[]>,
+        config: ExtendedMentionResourceConfig,
+        fetchUsers: FetchJiraUsersFunc | FetchBBUsersFunc,
     ): AtlascodeMentionProvider {
         if (!AtlascodeMentionProvider.#instance) {
             AtlascodeMentionProvider.#instance = new AtlascodeMentionProvider(config, fetchUsers);
@@ -34,24 +41,25 @@ export class AtlascodeMentionProvider extends AbstractMentionResource implements
     }
 
     // Making the constructor private to enforce singleton pattern
-    private constructor(
-        _config: MentionResourceConfig,
-        _fetchUsers: (input: string, accountId?: string) => Promise<MentionInfo[]>,
-    ) {
+    private constructor(_config: ExtendedMentionResourceConfig, _fetchUsers: FetchJiraUsersFunc | FetchBBUsersFunc) {
         super();
         this.config = _config;
         this.fetchUsers = _fetchUsers;
     }
 
     override filter(query?: string): void {
+        const isBitbucketCloud = this.config.isBitbucketCloud;
         setTimeout(async () => {
             const users = await this.fetchUsers(query || '');
-            const mentions = users.map((user) => ({
-                id: `${user.accountId}`,
-                name: user.displayName,
-                mentionName: user.mention,
-                avatarUrl: user.avatarUrl,
-            }));
+            const mentions = users.map((user) => {
+                const mention = {
+                    id: isBitbucketCloud ? `{${user.accountId}}` : `${user.accountId}`,
+                    name: user.displayName,
+                    mentionName: user.mention,
+                    avatarUrl: user.avatarUrl,
+                };
+                return mention;
+            });
             this._notifyListeners({ mentions, query: query || '' }, {});
             this._notifyAllResultsListeners({ mentions, query: query || '' });
         }, 30 + 1);