yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-23 00:18:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
View File

@ -15,8 +15,10 @@ import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
// Markdown Parser and plugin imports
import MarkdownParser from 'react-markdown';
import { Link } from 'react-router-dom';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
import { isExternalUrl } from '../../../utils/StringsUtils';
import { BlurLayout } from './BlurLayout';
import { PreviewerProp } from './RichTextEditor.interface';
@ -96,6 +98,14 @@ const RichTextEditorPreviewer = ({
</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]}
remarkPlugins={[remarkGfm]}>

2
openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts
View File

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

17
openmetadata-ui/src/main/resources/ui/src/utils/FeedUtils.tsx
View File

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

9
openmetadata-ui/src/main/resources/ui/src/utils/StringsUtils.ts
View File

@ -131,3 +131,12 @@ export const getErrorText = (
export const getEncodedFqn = (fqn: string) => {
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);
};