fix(react): url encoding urns and tag profile fix (#2623)

This commit is contained in:
Gabe Lyons 2021-06-03 11:08:43 -07:00 committed by GitHub
parent 6b9d0d0129
commit 47554d2d4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 21 additions and 12 deletions

View File

@ -20,7 +20,8 @@ interface Props {
* Responsible for rendering an Entity Profile
*/
export const EntityPage = ({ entityType }: Props) => {
const { urn } = useParams<RouteParams>();
const { urn: encodedUrn } = useParams<RouteParams>();
const urn = decodeURIComponent(encodedUrn);
const entityRegistry = useEntityRegistry();
const isBrowsable = entityRegistry.getEntity(entityType).isBrowseEnabled();
const isLineageSupported = entityRegistry.getEntity(entityType).isLineageEnabled();

View File

@ -1,6 +1,7 @@
import { EntityType, SearchResult } from '../../types.generated';
import { FetchedEntity } from '../lineage/types';
import { Entity, IconStyleType, PreviewType } from './Entity';
import { urlEncodeUrn } from './shared/utils';
function validatedGet<K, V>(key: K, map: Map<K, V>): V {
if (map.has(key)) {
@ -71,6 +72,10 @@ export default class EntityRegistry {
return entity.getPathName();
}
getEntityUrl(type: EntityType, urn: string): string {
return `/${this.getPathName(type)}/${urlEncodeUrn(urn)}`;
}
getTypeFromPathName(pathName: string): EntityType {
return validatedGet(pathName, this.pathNameToEntityType);
}

View File

@ -27,7 +27,7 @@ export const ChartPreview = ({
return (
<DefaultPreviewCard
url={`/${entityRegistry.getPathName(EntityType.Chart)}/${urn}`}
url={entityRegistry.getEntityUrl(EntityType.Chart, urn)}
name={name || ''}
description={description || ''}
type="Chart"

View File

@ -27,7 +27,7 @@ export const DashboardPreview = ({
return (
<DefaultPreviewCard
url={`/${entityRegistry.getPathName(EntityType.Dashboard)}/${urn}`}
url={entityRegistry.getEntityUrl(EntityType.Dashboard, urn)}
name={name || ''}
description={description || ''}
type="Dashboard"

View File

@ -27,7 +27,7 @@ export const Preview = ({
const capitalizedPlatform = capitalizeFirstLetter(platformName);
return (
<DefaultPreviewCard
url={`/${entityRegistry.getPathName(EntityType.DataFlow)}/${urn}`}
url={entityRegistry.getEntityUrl(EntityType.DataFlow, urn)}
name={name}
description={description || ''}
type="Data Pipeline"

View File

@ -27,7 +27,7 @@ export const Preview = ({
const capitalizedPlatform = capitalizeFirstLetter(platformName);
return (
<DefaultPreviewCard
url={`/${entityRegistry.getPathName(EntityType.DataJob)}/${urn}`}
url={entityRegistry.getEntityUrl(EntityType.DataJob, urn)}
name={name}
description={description || ''}
type="Data Task"

View File

@ -31,7 +31,7 @@ export const Preview = ({
const capitalPlatformName = capitalizeFirstLetter(platformName);
return (
<DefaultPreviewCard
url={`/${entityRegistry.getPathName(EntityType.Dataset)}/${urn}`}
url={entityRegistry.getEntityUrl(EntityType.Dataset, urn)}
name={name || ''}
description={description || ''}
type="Dataset"

View File

@ -18,7 +18,7 @@ export const Preview = ({
const entityRegistry = useEntityRegistry();
return (
<DefaultPreviewCard
url={`/${entityRegistry.getPathName(EntityType.GlossaryTerm)}/${urn}`}
url={entityRegistry.getEntityUrl(EntityType.GlossaryTerm, urn)}
name={name || ''}
description={definition || ''}
owners={owners}

View File

@ -0,0 +1,3 @@
export function urlEncodeUrn(urn: string) {
return urn && urn.replace(/%/g, '%25').replace(/\//g, '%2F').replace(/\?/g, '%3F').replace(/#/g, '%23');
}

View File

@ -152,7 +152,7 @@ export default function TagProfile() {
onClick={() =>
navigateToSearchUrl({
type: type as EntityType,
query: `tags:${data?.tag?.name}`,
query: `tags:"${data?.tag?.name}"`,
history,
entityRegistry,
})

View File

@ -24,7 +24,7 @@ export const Preview = ({
const entityRegistry = useEntityRegistry();
return (
<Link to={`/${entityRegistry.getPathName(EntityType.CorpUser)}/${urn}`}>
<Link to={entityRegistry.getEntityUrl(EntityType.CorpUser, urn)}>
<Space size={28}>
<CustomAvatar size={60} photoUrl={photoUrl} name={name} />
<Space direction="vertical" size={4}>

View File

@ -29,7 +29,7 @@ export const Preview = ({
const entityRegistry = useEntityRegistry();
return (
<Link to={`/${entityRegistry.getPathName(EntityType.CorpGroup)}/${urn}`}>
<Link to={entityRegistry.getEntityUrl(EntityType.CorpGroup, urn)}>
<Space size={28}>
<CustomAvatar size={60} photoUrl={photoUrl} name={name} isGroup />
<Space direction="vertical" size={4}>

View File

@ -95,7 +95,7 @@ export default function LineageExplorer({ urn, type }: Props) {
}}
onEntityCenter={(params: EntitySelectParams) => {
history.push(
`/${entityRegistry.getPathName(params.type)}/${params.urn}/?is_lineage_mode=true`,
`${entityRegistry.getEntityUrl(params.type, params.urn)}/?is_lineage_mode=true`,
);
}}
onLineageExpand={(params: LineageExpandParams) => {
@ -121,7 +121,7 @@ export default function LineageExplorer({ urn, type }: Props) {
<Col span={8} offset={8}>
<Button
type="primary"
href={`/${entityRegistry.getPathName(selectedEntity.type)}/${selectedEntity.urn}/`}
href={entityRegistry.getEntityUrl(selectedEntity.type, selectedEntity.urn)}
>
View Profile
</Button>