Fix #4718 UI: Link in the @mention of user refreshes the whole page (#4992)

This commit is contained in:
Sachin Chaurasiya 2022-05-17 11:16:19 +05:30 committed by GitHub
parent fef5f7bf67
commit 4b71ba4965
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 9 deletions

View File

@ -15,8 +15,10 @@ import classNames from 'classnames';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
// Markdown Parser and plugin imports // Markdown Parser and plugin imports
import MarkdownParser from 'react-markdown'; import MarkdownParser from 'react-markdown';
import { Link } from 'react-router-dom';
import rehypeRaw from 'rehype-raw'; import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import { isExternalUrl } from '../../../utils/StringsUtils';
import { BlurLayout } from './BlurLayout'; import { BlurLayout } from './BlurLayout';
import { PreviewerProp } from './RichTextEditor.interface'; import { PreviewerProp } from './RichTextEditor.interface';
@ -96,6 +98,14 @@ const RichTextEditorPreviewer = ({
</code> </code>
); );
}, },
a: ({ children, ...props }) => {
const href = props.href;
if (isExternalUrl(href)) {
return <a {...props}>{children}</a>;
} else {
return <Link to={props.href || ''}>{children}</Link>;
}
},
}} }}
rehypePlugins={[rehypeRaw]} rehypePlugins={[rehypeRaw]}
remarkPlugins={[remarkGfm]}> remarkPlugins={[remarkGfm]}>

View File

@ -22,7 +22,7 @@ export const entityLinkRegEx = /<#E::([^<>]+?)::([^<>]+?)>/g;
export const entityRegex = /<#E::([^<>]+?)::([^<>]+?)\|(\[(.+?)?\]\((.+?)?\))>/; export const entityRegex = /<#E::([^<>]+?)::([^<>]+?)\|(\[(.+?)?\]\((.+?)?\))>/;
export const entityUrlMap = { export const entityUrlMap = {
team: 'teams', team: 'teams-and-users',
user: 'users', user: 'users',
}; };

View File

@ -41,6 +41,7 @@ import {
} from '../constants/feed.constants'; } from '../constants/feed.constants';
import { getEntityPlaceHolder } from './CommonUtils'; import { getEntityPlaceHolder } from './CommonUtils';
import { ENTITY_LINK_SEPARATOR } from './EntityUtils'; import { ENTITY_LINK_SEPARATOR } from './EntityUtils';
import { getEncodedFqn } from './StringsUtils';
import { getRelativeDateByTimeStamp } from './TimeUtils'; import { getRelativeDateByTimeStamp } from './TimeUtils';
export const getEntityType = (entityLink: string) => { export const getEntityType = (entityLink: string) => {
@ -158,9 +159,9 @@ export async function suggestions(searchTerm: string, mentionChar: string) {
`@${hit._source.name ?? hit._source.display_name}`, `@${hit._source.name ?? hit._source.display_name}`,
hit._source.deleted hit._source.deleted
), ),
link: `${document.location.protocol}//${document.location.host}/${ link: `/${entityUrlMap[entityType as keyof typeof entityUrlMap]}/${
entityUrlMap[entityType as keyof typeof entityUrlMap] hit._source.name
}/${hit._source.name}`, }`,
}; };
}); });
} else { } else {
@ -176,9 +177,9 @@ export async function suggestions(searchTerm: string, mentionChar: string) {
`@${hit._source.name ?? hit._source.display_name}`, `@${hit._source.name ?? hit._source.display_name}`,
hit._source.deleted hit._source.deleted
), ),
link: `${document.location.protocol}//${document.location.host}/${ link: `/${entityUrlMap[entityType as keyof typeof entityUrlMap]}/${
entityUrlMap[entityType as keyof typeof entityUrlMap] hit._source.name
}/${hit._source.name}`, }`,
}; };
}); });
} }
@ -196,7 +197,7 @@ export async function suggestions(searchTerm: string, mentionChar: string) {
return { return {
id: hit._id, id: hit._id,
value: `#${entityType}/${hit._source.name}`, value: `#${entityType}/${hit._source.name}`,
link: `${document.location.protocol}//${document.location.host}/${entityType}/${hit._source.fqdn}`, link: `/${entityType}/${getEncodedFqn(hit._source.fqdn)}`,
}; };
}); });
} else { } else {
@ -209,7 +210,7 @@ export async function suggestions(searchTerm: string, mentionChar: string) {
return { return {
id: hit._id, id: hit._id,
value: `#${entityType}/${hit._source.name}`, value: `#${entityType}/${hit._source.name}`,
link: `${document.location.protocol}//${document.location.host}/${entityType}/${hit._source.fqdn}`, link: `/${entityType}/${getEncodedFqn(hit._source.fqdn)}`,
}; };
}); });
} }

View File

@ -131,3 +131,12 @@ export const getErrorText = (
export const getEncodedFqn = (fqn: string) => { export const getEncodedFqn = (fqn: string) => {
return encodeURIComponent(fqn); return encodeURIComponent(fqn);
}; };
/**
*
* @param url - Url to be check
* @returns - True if url is external otherwise false
*/
export const isExternalUrl = (url = '') => {
return /^https?:\/\//.test(url);
};