fix: [AH-2866]: Deletion statements updated at all 3 registry,package and version level

web/src/ar/common/utils.ts

@@ -47,3 +47,5 @@ export function getPackageTypesForApiQueryParams(packageTypes: RepositoryPackage
 export const encodeFileName = (fileName: string): string => {
   return fileName.replace(INVALID_FILENAME_CHARS, '_')
 }
+
+export { decodeHtmlEntities } from './utils/decodeHtmlEntities'

web/src/ar/common/utils/decodeHtmlEntities.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2024 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Safely decodes HTML entities in a string without XSS vulnerability.
+ * Uses DOMParser which is safer than innerHTML as it doesn't execute scripts.
+ *
+ * @param text - The text containing HTML entities to decode
+ * @returns The decoded text with HTML entities converted to their character equivalents
+ *
+ * @example
+ * decodeHtmlEntities('github.com/rs/xid') // returns 'github.com/rs/xid'
+ * decodeHtmlEntities('&lt;script&gt;alert(1)&lt;/script&gt;') // returns '<script>alert(1)</script>' (safe, no execution)
+ */
+export const decodeHtmlEntities = (text: string): string => {
+  if (!text || typeof text !== 'string') {
+    return text
+  }
+
+  // Use DOMParser which is safer than innerHTML
+  // It parses the content as text/html but doesn't execute scripts
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(text, 'text/html')
+
+  // Extract the text content which automatically decodes entities
+  return doc.documentElement.textContent || text
+}

web/src/ar/components/Form/DeleteModalContent.tsx

@@ -30,6 +30,7 @@ interface DeleteModalContentProps {
   content: string
   placeholder: string
   inputLabel: string
+  inputLabelValue?: string
   deleteBtnText?: string
 }
 
@@ -41,9 +42,14 @@ function DeleteModalContent({
   content,
   placeholder,
   inputLabel,
+  inputLabelValue,
   deleteBtnText
 }: DeleteModalContentProps) {
   const { getString } = useStrings()
+
+  // Construct the label with the value appended if provided
+  const finalLabel = inputLabelValue ? `${inputLabel} (${inputLabelValue})` : inputLabel
+
   return (
     <Formik
       initialValues={{ value: '' }}
@@ -61,7 +67,7 @@ function DeleteModalContent({
         <Container>
           <Layout.Vertical spacing="medium">
             <Text>{content}</Text>
-            <FormInput.Text label={inputLabel} name="value" placeholder={placeholder} intent={Intent.PRIMARY} />
+            <FormInput.Text label={finalLabel} name="value" placeholder={placeholder} intent={Intent.PRIMARY} />
           </Layout.Vertical>
           <Layout.Horizontal spacing="medium" margin={{ top: 'large' }}>
             <Button

web/src/ar/pages/artifact-details/hooks/useDeleteArtifactModal/useDeleteArtifactModal.tsx

@@ -23,6 +23,7 @@ import { useGetSpaceRef, useParentHooks } from '@ar/hooks'
 import { useStrings } from '@ar/frameworks/strings'
 import { encodeRef } from '@ar/hooks/useGetSpaceRef'
 import DeleteModalContent from '@ar/components/Form/DeleteModalContent'
+import { decodeHtmlEntities } from '@ar/common/utils'
 
 interface useDeleteArtifactModalProps {
   repoKey: string
@@ -39,6 +40,9 @@ export default function useDeleteArtifactModal(props: useDeleteArtifactModalProp
 
   const { mutateAsync: deleteArtifact } = useDeleteArtifactMutation()
 
+  // Decode HTML entities to display properly
+  const decodedArtifactKey = decodeHtmlEntities(artifactKey)
+
   const handleDeleteArtifact = async (): Promise<void> => {
     try {
       const response = await deleteArtifact({
@@ -67,12 +71,13 @@ export default function useDeleteArtifactModal(props: useDeleteArtifactModalProp
     contentText: (
       <DeleteModalContent
         entity="package"
-        value={artifactKey}
+        value={decodedArtifactKey}
         onSubmit={handleDeleteArtifact}
         onClose={handleCloseDialog}
         content={getString('artifactDetails.deleteModal.contentText')}
         placeholder={getString('artifactDetails.deleteModal.inputPlaceholder')}
         inputLabel={getString('artifactDetails.deleteModal.inputLabel')}
+        inputLabelValue={decodedArtifactKey}
       />
     ),
     customButtons: <></>,

web/src/ar/pages/repository-details/hooks/useDeleteRepositoryModal/useDeleteRepositoryModal.tsx

@@ -22,6 +22,7 @@ import { useDeleteRegistryMutation } from '@harnessio/react-har-service-client'
 import { useStrings } from '@ar/frameworks/strings'
 import { useGetSpaceRef, useParentHooks } from '@ar/hooks'
 import DeleteModalContent from '@ar/components/Form/DeleteModalContent'
+import { decodeHtmlEntities } from '@ar/common/utils'
 
 interface useDeleteRepositoryModalProps {
   repoKey: string
@@ -36,6 +37,9 @@ export default function useDeleteRepositoryModal(props: useDeleteRepositoryModal
 
   const { mutateAsync: deleteRepository } = useDeleteRegistryMutation()
 
+  // Decode HTML entities to display properly
+  const decodedRepoKey = decodeHtmlEntities(repoKey)
+
   const handleDeleteRepository = async (): Promise<void> => {
     try {
       const response = await deleteRepository({
@@ -60,12 +64,13 @@ export default function useDeleteRepositoryModal(props: useDeleteRepositoryModal
     contentText: (
       <DeleteModalContent
         entity="repository"
-        value={repoKey}
+        value={decodedRepoKey}
         onSubmit={handleDeleteRepository}
         onClose={handleCloseDialog}
         content={getString('repositoryList.deleteModal.contentText')}
         placeholder={getString('repositoryList.deleteModal.inputPlaceholder')}
         inputLabel={getString('repositoryList.deleteModal.inputLabel')}
+        inputLabelValue={decodedRepoKey}
       />
     ),
     customButtons: <></>,

web/src/ar/pages/repository-list/strings/strings.en.yaml

@@ -22,8 +22,8 @@ compact: Compact View
 deleteModal:
   title: '{{ $.artifactList.table.actions.deleteRepository }}'
   contentText: This action will delete registry and all it's images and versions. Are you absolutely sure you want to proceed?
-  inputLabel: Type the registry name or ID to confirm
-  inputPlaceholder: Registry Name or ID
+  inputLabel: Type the registry name to confirm
+  inputPlaceholder: Registry Name
 softDeleteModal:
   title: Archive Registry
   contentText: This action will archive registry and all it's artifacts and versions. You can still restore it from the archived list.

web/src/ar/pages/version-details/components/VersionActions/DeleteVersionMenuItem.tsx

@@ -19,13 +19,14 @@ import React from 'react'
 import { useStrings } from '@ar/frameworks/strings'
 import { useParentComponents } from '@ar/hooks'
 import { PermissionIdentifier, ResourceType } from '@ar/common/permissionTypes'
+import type { RepositoryPackageType } from '@ar/common/types'
 
 import type { VersionActionProps } from './types'
 import useDeleteVersionModal from '../../hooks/useDeleteVersionModal'
 import { useUtilsForDeleteVersion } from '../../hooks/useUtilsForDeleteVersion'
 
 export default function DeleteVersionMenuItem(props: VersionActionProps): JSX.Element {
-  const { artifactKey, repoKey, readonly, onClose, versionKey, pageType, data } = props
+  const { artifactKey, repoKey, readonly, onClose, versionKey, pageType, data, digest } = props
   const { getString } = useStrings()
   const { RbacMenuItem } = useParentComponents()
 
@@ -41,6 +42,8 @@ export default function DeleteVersionMenuItem(props: VersionActionProps): JSX.El
     repoKey,
     versionKey,
     artifactType: data?.artifactType,
+    packageType: data?.packageType as RepositoryPackageType,
+    digest,
     onSuccess: handleAfterDeleteVersion
   })
 

web/src/ar/pages/version-details/hooks/useDeleteVersionModal.tsx

@@ -23,22 +23,38 @@ import { useConfirmationDialog, useGetSpaceRef } from '@ar/hooks'
 import { useStrings } from '@ar/frameworks/strings'
 import { encodeRef } from '@ar/hooks/useGetSpaceRef'
 import DeleteModalContent from '@ar/components/Form/DeleteModalContent'
+import { RepositoryPackageType } from '@ar/common/types'
+import { decodeHtmlEntities } from '@ar/common/utils'
 
 interface useDeleteVersionModalProps {
   repoKey: string
   artifactKey: string
   versionKey: string
   artifactType?: ArtifactType
+  packageType?: RepositoryPackageType
+  digest?: string
   onSuccess: () => void
 }
 export default function useDeleteVersionModal(props: useDeleteVersionModalProps) {
-  const { repoKey, onSuccess, artifactKey, versionKey, artifactType } = props
+  const { repoKey, onSuccess, artifactKey, versionKey, artifactType, packageType, digest } = props
   const { getString } = useStrings()
   const { showSuccess, showError, clear } = useToaster()
   const spaceRef = useGetSpaceRef(repoKey)
 
   const { mutateAsync: deleteVersion } = useDeleteArtifactVersionMutation()
 
+  // For OCI packages (Docker/Helm), use digest; for non-OCI packages, use version
+  const isDockerPackage = packageType === RepositoryPackageType.DOCKER
+  const isHelmPackage = packageType === RepositoryPackageType.HELM
+  const isOCIPackage = isDockerPackage || isHelmPackage
+
+  // Determine which value to use for confirmation
+  const shouldUseDigest = isOCIPackage && digest
+  const confirmationValue = shouldUseDigest ? digest : versionKey
+
+  // Decode HTML entities to display properly
+  const decodedConfirmationValue = decodeHtmlEntities(confirmationValue)
+
   const handleDeleteVersion = async (): Promise<void> => {
     try {
       const response = await deleteVersion({
@@ -69,12 +85,13 @@ export default function useDeleteVersionModal(props: useDeleteVersionModalProps)
     contentText: (
       <DeleteModalContent
         entity="version"
-        value={versionKey}
+        value={decodedConfirmationValue}
         onSubmit={handleDeleteVersion}
         onClose={handleCloseDialog}
         content={getString('versionDetails.deleteVersionModal.contentText')}
         placeholder={getString('versionDetails.deleteVersionModal.inputPlaceholder')}
         inputLabel={getString('versionDetails.deleteVersionModal.inputLabel')}
+        inputLabelValue={decodedConfirmationValue}
       />
     ),
     customButtons: <></>,