From ae99ace22bc2f82df38dabb47b7afe8a738b876d Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 22 Aug 2023 15:09:59 +0530
Subject: [PATCH] fix(ui): encoding issue in entity pages (#12955)

* fix encoding issue in entity pages

* fix double encoding while redirecting from task page
---
 .../DashboardDetails.component.tsx              | 17 +++++++----------
 .../MlModelDetail/MlModelDetail.component.tsx   | 11 +++++------
 .../PipelineDetails.component.tsx               |  9 +++------
 .../TopicDetails/TopicDetails.component.tsx     |  8 ++++----
 .../src/pages/ContainerPage/ContainerPage.tsx   |  3 +--
 .../RequestDescriptionPage.tsx                  |  5 ++++-
 .../TasksPage/RequestTagPage/RequestTagPage.tsx |  5 ++++-
 .../UpdateDescriptionPage.tsx                   |  5 ++++-
 .../TasksPage/UpdateTagPage/UpdateTagPage.tsx   |  5 ++++-
 9 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
index 7ff887ab805..2d500b56d76 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@@ -111,16 +111,14 @@ const DashboardDetails = ({
     deleted,
     dashboardTags,
     tier,
-    entityFqn,
   } = useMemo(() => {
-    const { tags = [], fullyQualifiedName } = dashboardDetails;
+    const { tags = [] } = dashboardDetails;
 
     return {
       ...dashboardDetails,
       tier: getTierTags(tags),
       dashboardTags: getTagsWithoutTier(tags),
       entityName: getEntityName(dashboardDetails),
-      entityFqn: fullyQualifiedName ?? '',
     };
   }, [dashboardDetails]);
 
@@ -459,7 +457,7 @@ const DashboardDetails = ({
                 fqn: record.fullyQualifiedName ?? '',
                 field: record.description,
               }}
-              entityFqn={entityFqn}
+              entityFqn={dashboardFQN}
               entityType={EntityType.DASHBOARD}
               hasEditPermission={editDescriptionPermissions}
               index={index}
@@ -479,7 +477,7 @@ const DashboardDetails = ({
         render: (tags: TagLabel[], record: ChartType, index: number) => {
           return (
             <TableTags<ChartType>
-              entityFqn={entityFqn}
+              entityFqn={dashboardFQN}
               entityType={EntityType.DASHBOARD}
               handleTagSelection={handleChartTagSelection}
               hasTagEditAccess={hasEditTagAccess(record)}
@@ -501,7 +499,7 @@ const DashboardDetails = ({
         width: 300,
         render: (tags: TagLabel[], record: ChartType, index: number) => (
           <TableTags<ChartType>
-            entityFqn={entityFqn}
+            entityFqn={dashboardFQN}
             entityType={EntityType.DASHBOARD}
             handleTagSelection={handleChartTagSelection}
             hasTagEditAccess={hasEditTagAccess(record)}
@@ -517,7 +515,6 @@ const DashboardDetails = ({
     ],
     [
       deleted,
-      entityFqn,
       chartsPermissionsArray,
       onThreadLinkSelect,
       hasEditTagAccess,
@@ -540,7 +537,7 @@ const DashboardDetails = ({
               <div className="d-flex flex-col gap-4">
                 <DescriptionV1
                   description={dashboardDetails.description}
-                  entityFqn={dashboardDetails.fullyQualifiedName}
+                  entityFqn={dashboardFQN}
                   entityName={entityName}
                   entityType={EntityType.DASHBOARD}
                   hasEditAccess={
@@ -579,7 +576,7 @@ const DashboardDetails = ({
               <Space className="w-full" direction="vertical" size="large">
                 <TagsContainerV2
                   displayType={DisplayType.READ_MORE}
-                  entityFqn={dashboardDetails.fullyQualifiedName}
+                  entityFqn={dashboardFQN}
                   entityType={EntityType.DASHBOARD}
                   permission={
                     (dashboardPermissions.EditAll ||
@@ -594,7 +591,7 @@ const DashboardDetails = ({
 
                 <TagsContainerV2
                   displayType={DisplayType.READ_MORE}
-                  entityFqn={dashboardDetails.fullyQualifiedName}
+                  entityFqn={dashboardFQN}
                   entityType={EntityType.DASHBOARD}
                   permission={
                     (dashboardPermissions.EditAll ||
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
index 2c8f63dd7ad..01790dacf38 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
@@ -121,7 +121,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
     [AppState.nonSecureUserDetails, AppState.userDetails]
   );
 
-  const { mlModelTags, isFollowing, tier, entityFqn } = useMemo(() => {
+  const { mlModelTags, isFollowing, tier } = useMemo(() => {
     return {
       ...mlModelDetail,
       tier: getTierTags(mlModelDetail.tags ?? []),
@@ -130,7 +130,6 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
       isFollowing: mlModelDetail.followers?.some(
         ({ id }: { id: string }) => id === currentUser?.id
       ),
-      entityFqn: mlModelDetail.fullyQualifiedName ?? '',
     };
   }, [mlModelDetail]);
 
@@ -378,7 +377,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
               <div className="d-flex flex-col gap-4">
                 <DescriptionV1
                   description={mlModelDetail.description}
-                  entityFqn={mlModelDetail.fullyQualifiedName}
+                  entityFqn={mlModelFqn}
                   entityName={mlModelDetail.name}
                   entityType={EntityType.MLMODEL}
                   hasEditAccess={
@@ -394,7 +393,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
                   onThreadLinkSelect={handleThreadLinkSelect}
                 />
                 <MlModelFeaturesList
-                  entityFqn={entityFqn}
+                  entityFqn={mlModelFqn}
                   handleFeaturesUpdate={onFeaturesUpdate}
                   isDeleted={mlModelDetail.deleted}
                   mlFeatures={mlModelDetail.mlFeatures}
@@ -410,7 +409,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
               <Space className="w-full" direction="vertical" size="large">
                 <TagsContainerV2
                   displayType={DisplayType.READ_MORE}
-                  entityFqn={mlModelDetail.fullyQualifiedName}
+                  entityFqn={mlModelFqn}
                   entityType={EntityType.MLMODEL}
                   permission={
                     (mlModelPermissions.EditAll ||
@@ -425,7 +424,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
 
                 <TagsContainerV2
                   displayType={DisplayType.READ_MORE}
-                  entityFqn={mlModelDetail.fullyQualifiedName}
+                  entityFqn={mlModelFqn}
                   entityType={EntityType.MLMODEL}
                   permission={
                     (mlModelPermissions.EditAll ||
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
index 67637e9fd73..ca0b5ad9a66 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -101,7 +101,6 @@ const PipelineDetails = ({
     entityName,
     tier,
     tags,
-    entityFqn,
     followers,
   } = useMemo(() => {
     return {
@@ -114,7 +113,6 @@ const PipelineDetails = ({
       tier: getTierTags(pipelineDetails.tags ?? []),
       tags: getTagsWithoutTier(pipelineDetails.tags ?? []),
       entityName: getEntityName(pipelineDetails),
-      entityFqn: pipelineDetails.fullyQualifiedName ?? '',
       followers: pipelineDetails.followers ?? [],
     };
   }, [pipelineDetails]);
@@ -390,7 +388,7 @@ const PipelineDetails = ({
               fqn: record.fullyQualifiedName ?? '',
               field: record.description,
             }}
-            entityFqn={entityFqn}
+            entityFqn={pipelineFQN}
             entityType={EntityType.PIPELINE}
             hasEditPermission={
               pipelinePermissions.EditDescription || pipelinePermissions.EditAll
@@ -410,7 +408,7 @@ const PipelineDetails = ({
         width: 300,
         render: (tags, record, index) => (
           <TableTags<Task>
-            entityFqn={entityFqn}
+            entityFqn={pipelineFQN}
             entityType={EntityType.PIPELINE}
             handleTagSelection={handleTableTagSelection}
             hasTagEditAccess={hasTagEditAccess}
@@ -431,7 +429,7 @@ const PipelineDetails = ({
         width: 300,
         render: (tags, record, index) => (
           <TableTags<Task>
-            entityFqn={entityFqn}
+            entityFqn={pipelineFQN}
             entityType={EntityType.PIPELINE}
             handleTagSelection={handleTableTagSelection}
             hasTagEditAccess={hasTagEditAccess}
@@ -448,7 +446,6 @@ const PipelineDetails = ({
     [
       deleted,
       editTask,
-      entityFqn,
       hasTagEditAccess,
       pipelinePermissions,
       getEntityName,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
index 4136bb8d6d6..6d0004ab141 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
@@ -263,7 +263,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
               <div className="d-flex flex-col gap-4">
                 <DescriptionV1
                   description={topicDetails.description}
-                  entityFqn={topicDetails.fullyQualifiedName}
+                  entityFqn={topicFQN}
                   entityName={entityName}
                   entityType={EntityType.TOPIC}
                   hasEditAccess={
@@ -278,7 +278,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                   onThreadLinkSelect={onThreadLinkSelect}
                 />
                 <TopicSchemaFields
-                  entityFqn={topicDetails.fullyQualifiedName ?? ''}
+                  entityFqn={topicFQN}
                   hasDescriptionEditAccess={
                     topicPermissions.EditAll || topicPermissions.EditDescription
                   }
@@ -299,7 +299,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
               <Space className="w-full" direction="vertical" size="large">
                 <TagsContainerV2
                   displayType={DisplayType.READ_MORE}
-                  entityFqn={topicDetails.fullyQualifiedName}
+                  entityFqn={topicFQN}
                   entityType={EntityType.TOPIC}
                   permission={
                     (topicPermissions.EditAll || topicPermissions.EditTags) &&
@@ -313,7 +313,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
 
                 <TagsContainerV2
                   displayType={DisplayType.READ_MORE}
-                  entityFqn={topicDetails.fullyQualifiedName}
+                  entityFqn={topicFQN}
                   entityType={EntityType.TOPIC}
                   permission={
                     (topicPermissions.EditAll || topicPermissions.EditTags) &&
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx
index 79ddfed1b9e..a05725501de 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx
@@ -191,7 +191,6 @@ const ContainerPage = () => {
     isUserFollowing,
     tags,
     tier,
-    entityFqn,
   } = useMemo(() => {
     return {
       deleted: containerData?.deleted,
@@ -492,7 +491,7 @@ const ContainerPage = () => {
 
                 <ContainerDataModel
                   dataModel={containerData?.dataModel}
-                  entityFqn={entityFqn}
+                  entityFqn={containerName}
                   hasDescriptionEditAccess={hasEditDescriptionPermission}
                   hasTagEditAccess={hasEditTagsPermission}
                   isReadOnly={Boolean(deleted)}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
index bd436f1ddf8..af0eab39f87 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
@@ -27,6 +27,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { postThread } from 'rest/feedsAPI';
 import { getEntityDetailLink } from 'utils/CommonUtils';
+import { getDecodedFqn } from 'utils/StringsUtils';
 import AppState from '../../../AppState';
 import { EntityField } from '../../../constants/Feeds.constants';
 import { EntityTabs, EntityType } from '../../../enums/entity.enum';
@@ -125,7 +126,9 @@ const RequestDescription = () => {
           history.push(
             getEntityDetailLink(
               entityType as EntityType,
-              entityFQN,
+              entityType === EntityType.TABLE
+                ? entityFQN
+                : getDecodedFqn(entityFQN),
               EntityTabs.ACTIVITY_FEED,
               ActivityFeedTabs.TASKS
             )
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
index a313ecf343b..48771ac0572 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
@@ -25,6 +25,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { postThread } from 'rest/feedsAPI';
 import { getEntityDetailLink } from 'utils/CommonUtils';
+import { getDecodedFqn } from 'utils/StringsUtils';
 import AppState from '../../../AppState';
 import { EntityField } from '../../../constants/Feeds.constants';
 import { EntityTabs, EntityType } from '../../../enums/entity.enum';
@@ -118,7 +119,9 @@ const RequestTag = () => {
         history.push(
           getEntityDetailLink(
             entityType as EntityType,
-            entityFQN,
+            entityType === EntityType.TABLE
+              ? entityFQN
+              : getDecodedFqn(entityFQN),
             EntityTabs.ACTIVITY_FEED,
             ActivityFeedTabs.TASKS
           )
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
index ff9af6a2c3a..7a6309a585d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
@@ -25,6 +25,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { postThread } from 'rest/feedsAPI';
 import { getEntityDetailLink } from 'utils/CommonUtils';
+import { getDecodedFqn } from 'utils/StringsUtils';
 import AppState from '../../../AppState';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { EntityField } from '../../../constants/Feeds.constants';
@@ -139,7 +140,9 @@ const UpdateDescription = () => {
         history.push(
           getEntityDetailLink(
             entityType as EntityType,
-            entityFQN,
+            entityType === EntityType.TABLE
+              ? entityFQN
+              : getDecodedFqn(entityFQN),
             EntityTabs.ACTIVITY_FEED,
             ActivityFeedTabs.TASKS
           )
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
index eb4bd1957f2..989bf3e59ea 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
@@ -27,6 +27,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { postThread } from 'rest/feedsAPI';
 import { getEntityDetailLink } from 'utils/CommonUtils';
+import { getDecodedFqn } from 'utils/StringsUtils';
 import AppState from '../../../AppState';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { EntityField } from '../../../constants/Feeds.constants';
@@ -146,7 +147,9 @@ const UpdateTag = () => {
         history.push(
           getEntityDetailLink(
             entityType as EntityType,
-            entityFQN,
+            entityType === EntityType.TABLE
+              ? entityFQN
+              : getDecodedFqn(entityFQN),
             EntityTabs.ACTIVITY_FEED,
             ActivityFeedTabs.TASKS
           )