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

datahub-project · Jun 3, 2021 · 47554d2 · 47554d2
1 parent 6b9d0d0
commit 47554d2
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 12 deletions.
diff --git a/datahub-web-react/src/app/entity/EntityPage.tsx b/datahub-web-react/src/app/entity/EntityPage.tsx
@@ -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();

diff --git a/datahub-web-react/src/app/entity/EntityRegistry.tsx b/datahub-web-react/src/app/entity/EntityRegistry.tsx
@@ -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);
     }

diff --git a/datahub-web-react/src/app/entity/chart/preview/ChartPreview.tsx b/datahub-web-react/src/app/entity/chart/preview/ChartPreview.tsx
@@ -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"

diff --git a/datahub-web-react/src/app/entity/dashboard/preview/DashboardPreview.tsx b/datahub-web-react/src/app/entity/dashboard/preview/DashboardPreview.tsx
@@ -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"

diff --git a/datahub-web-react/src/app/entity/dataFlow/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataFlow/preview/Preview.tsx
@@ -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"

diff --git a/datahub-web-react/src/app/entity/dataJob/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataJob/preview/Preview.tsx
@@ -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"

diff --git a/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataset/preview/Preview.tsx
@@ -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"

diff --git a/datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx b/datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx
@@ -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}

diff --git a/datahub-web-react/src/app/entity/shared/utils.ts b/datahub-web-react/src/app/entity/shared/utils.ts
@@ -0,0 +1,3 @@
+export function urlEncodeUrn(urn: string) {
+    return urn && urn.replace(/%/g, '%25').replace(/\//g, '%2F').replace(/\?/g, '%3F').replace(/#/g, '%23');
+}
diff --git a/datahub-web-react/src/app/entity/tag/TagProfile.tsx b/datahub-web-react/src/app/entity/tag/TagProfile.tsx
@@ -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,
                                                     })

diff --git a/datahub-web-react/src/app/entity/user/preview/Preview.tsx b/datahub-web-react/src/app/entity/user/preview/Preview.tsx
@@ -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}>

diff --git a/datahub-web-react/src/app/entity/userGroup/preview/Preview.tsx b/datahub-web-react/src/app/entity/userGroup/preview/Preview.tsx
@@ -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}>

diff --git a/datahub-web-react/src/app/lineage/LineageExplorer.tsx b/datahub-web-react/src/app/lineage/LineageExplorer.tsx
@@ -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>