From 40a9472d4dad26514fb3e66277e0a8bca3d0b5d3 Mon Sep 17 00:00:00 2001
From: Shivanand Sonnad <shivanand.sonnad@harness.io>
Date: Wed, 2 Oct 2024 02:38:46 +0000
Subject: [PATCH] fix: [AH-421]: fix issue with double encoding in UI for
 artifact name in url params (#2757)

* fix: [AH-421]: fix issue with double encoding in UI for artifact name in url params
---
 .../ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx   | 5 ++---
 .../DockerVersion/DockerDeploymentsContent.tsx               | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx b/web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx
index 88f92aabb..4e30ec83d 100644
--- a/web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx
+++ b/web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx
@@ -16,12 +16,11 @@
 
 import React, { useContext } from 'react'
 import { defaultTo } from 'lodash-es'
-import { useParams } from 'react-router-dom'
 import { Expander } from '@blueprintjs/core'
 import { Button, ButtonVariation, Layout, getErrorInfoFromErrorObject, useToaster } from '@harnessio/uicore'
 import { useUpdateArtifactLabelsMutation, type ArtifactSummary } from '@harnessio/react-har-service-client'
 
-import { useGetSpaceRef } from '@ar/hooks'
+import { useDecodedParams, useGetSpaceRef } from '@ar/hooks'
 import { encodeRef } from '@ar/hooks/useGetSpaceRef'
 import { useStrings } from '@ar/frameworks/strings/String'
 import type { RepositoryPackageType } from '@ar/common/types'
@@ -48,7 +47,7 @@ function ArtifactDetailsHeaderContent(props: ArtifactDetailsHeaderContentProps):
   const spaceRef = useGetSpaceRef()
   const { getString } = useStrings()
   const { showSuccess, showError, clear } = useToaster()
-  const pathParams = useParams<ArtifactDetailsPathParams>()
+  const pathParams = useDecodedParams<ArtifactDetailsPathParams>()
 
   const { repositoryIdentifier, artifactIdentifier } = pathParams
   const { packageType, imageName, modifiedAt, createdAt, downloadsCount, labels } = data as ArtifactSummary
diff --git a/web/src/ar/pages/version-details/DockerVersion/DockerDeploymentsContent.tsx b/web/src/ar/pages/version-details/DockerVersion/DockerDeploymentsContent.tsx
index ac77dd259..c284ac2b9 100644
--- a/web/src/ar/pages/version-details/DockerVersion/DockerDeploymentsContent.tsx
+++ b/web/src/ar/pages/version-details/DockerVersion/DockerDeploymentsContent.tsx
@@ -18,7 +18,6 @@ import React, { useMemo, useRef } from 'react'
 import { Expander } from '@blueprintjs/core'
 import { defaultTo } from 'lodash-es'
 import { flushSync } from 'react-dom'
-import { useParams } from 'react-router-dom'
 import { useGetArtifactDeploymentsQuery, useGetDockerArtifactManifestsQuery } from '@harnessio/react-har-service-client'
 import {
   Button,
@@ -29,7 +28,7 @@ import {
   Page
 } from '@harnessio/uicore'
 
-import { useGetSpaceRef, useParentHooks } from '@ar/hooks'
+import { useDecodedParams, useGetSpaceRef, useParentHooks } from '@ar/hooks'
 import { DEFAULT_PAGE_INDEX, PreferenceScope } from '@ar/constants'
 import { useStrings } from '@ar/frameworks/strings'
 import { encodeRef } from '@ar/hooks/useGetSpaceRef'
@@ -54,7 +53,7 @@ export default function DockerDeploymentsContent() {
   const searchRef = useRef({} as ExpandingSearchInputHandle)
   const { getString } = useStrings()
   const registryRef = useGetSpaceRef()
-  const params = useParams<VersionDetailsPathParams>()
+  const params = useDecodedParams<VersionDetailsPathParams>()
 
   const { preference: sortingPreference, setPreference: setSortingPreference } = usePreferenceStore<string | undefined>(
     PreferenceScope.USER,