From 285cb1b9badfc93cddd4859fe83dbdb1537c1c6a Mon Sep 17 00:00:00 2001
From: Shivanand Sonnad <shivanand.sonnad@harness.io>
Date: Tue, 4 Mar 2025 12:07:03 +0000
Subject: [PATCH] feat: [AH-1020]: support delete artifact action on registry
 artifact list and artifact details page (#3497)

* feat: [AH-1020]: fix failing unit tests
* feat: [AH-1020]: enode artifact key before calling api
* feat: [AH-1020]: add unit test for registry artifact list tables
* feat: [AH-1020]: support delete artifact action on registry artifact list and artifact details page
---
 .../Version/ArtifactActionsWidget.tsx         |  40 +++
 web/src/ar/frameworks/Version/Version.tsx     |  19 +-
 .../ar/gitness/utils/getARRouteDefinitions.ts |   2 +-
 .../ArtifactActions.module.scss               |  19 -
 .../ArtifactActions.module.scss.d.ts          |  19 -
 .../ArtifactActions/ArtifactActions.tsx       |  73 ++--
 ...ository.tsx => DeleteArtifactMenuItem.tsx} |  26 +-
 .../ArtifactActions/EditRepository.tsx        |  58 ----
 ...etupClient.tsx => SetupClientMenuItem.tsx} |   5 +-
 .../components/ArtifactActions/types.ts       |   9 +-
 .../ArtifactDetailsHeaderContent.tsx          |  10 +-
 .../useDeleteArtifactModal.tsx                |  67 ++++
 .../artifact-details/strings/strings.en.yaml  |   4 +
 .../RegistryArtifactListTable.module.scss     |   2 +-
 .../RegistryArtifactListTable.tsx             |   7 +
 .../RegistryArtifactListTableCell.tsx         |  16 +-
 .../artifact-list/strings/strings.en.yaml     |   1 +
 .../__tests__/__mockData__.ts                 |   2 +-
 .../__tests__/__mockData__.ts                 |   2 +-
 .../HelmRepository/__tests__/__mockData__.ts  |   2 +-
 .../MavenRepository/__tests__/__mockData__.ts |   2 +-
 .../DockerVersion/DockerVersionType.tsx       |  12 +-
 .../__tests__/DockerArtifactListPage.test.tsx | 325 ++++++++++++++++++
 .../GenericVersion/GenericVersionType.tsx     |   6 +
 .../GenericArtifactListPage.test.tsx          | 325 ++++++++++++++++++
 .../HelmVersion/HelmVersionType.tsx           |  12 +-
 .../__tests__/HelmArtifactListPage.test.tsx   | 325 ++++++++++++++++++
 .../MavenVersion/MavenVersion.tsx             |   8 +-
 .../__tests__/MavenArtifactListPage.test.tsx  | 325 ++++++++++++++++++
 .../NpmVersion/NpmVersionType.tsx             |   8 +-
 web/src/ar/strings/types.ts                   |   4 +
 31 files changed, 1574 insertions(+), 161 deletions(-)
 create mode 100644 web/src/ar/frameworks/Version/ArtifactActionsWidget.tsx
 delete mode 100644 web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss
 delete mode 100644 web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss.d.ts
 rename web/src/ar/pages/artifact-details/components/ArtifactActions/{DeleteRepository.tsx => DeleteArtifactMenuItem.tsx} (62%)
 delete mode 100644 web/src/ar/pages/artifact-details/components/ArtifactActions/EditRepository.tsx
 rename web/src/ar/pages/artifact-details/components/ArtifactActions/{SetupClient.tsx => SetupClientMenuItem.tsx} (90%)
 create mode 100644 web/src/ar/pages/artifact-details/hooks/useDeleteArtifactModal/useDeleteArtifactModal.tsx
 create mode 100644 web/src/ar/pages/version-details/DockerVersion/__tests__/DockerArtifactListPage.test.tsx
 create mode 100644 web/src/ar/pages/version-details/GenericVersion/__tests__/GenericArtifactListPage.test.tsx
 create mode 100644 web/src/ar/pages/version-details/HelmVersion/__tests__/HelmArtifactListPage.test.tsx
 create mode 100644 web/src/ar/pages/version-details/MavenVersion/__tests__/MavenArtifactListPage.test.tsx

diff --git a/web/src/ar/frameworks/Version/ArtifactActionsWidget.tsx b/web/src/ar/frameworks/Version/ArtifactActionsWidget.tsx
new file mode 100644
index 000000000..ab90920f9
--- /dev/null
+++ b/web/src/ar/frameworks/Version/ArtifactActionsWidget.tsx
@@ -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.
+ */
+
+import React from 'react'
+import { Text } from '@harnessio/uicore'
+
+import { useStrings } from '@ar/frameworks/strings'
+import type { RepositoryPackageType } from '@ar/common/types'
+
+import versionFactory from './VersionFactory'
+import type { ArtifactActionProps } from './Version'
+import type { VersionAbstractFactory } from './VersionAbstractFactory'
+
+interface ArtifactActionsWidgetProps extends ArtifactActionProps {
+  factory?: VersionAbstractFactory
+  packageType: RepositoryPackageType
+}
+
+export default function ArtifactActionsWidget(props: ArtifactActionsWidgetProps): JSX.Element {
+  const { factory = versionFactory, packageType, ...rest } = props
+  const { getString } = useStrings()
+  const repositoryType = factory?.getVersionType(packageType)
+  if (!repositoryType) {
+    return <Text intent="warning">{getString('stepNotFound')}</Text>
+  }
+  return repositoryType.renderArtifactActions({ ...rest })
+}
diff --git a/web/src/ar/frameworks/Version/Version.tsx b/web/src/ar/frameworks/Version/Version.tsx
index 7b3f818bb..be8743e30 100644
--- a/web/src/ar/frameworks/Version/Version.tsx
+++ b/web/src/ar/frameworks/Version/Version.tsx
@@ -15,9 +15,13 @@
  */
 
 import type { PaginationProps } from '@harnessio/uicore'
-import type { ListArtifactVersion } from '@harnessio/react-har-service-client'
+import type {
+  ArtifactSummary,
+  ListArtifactVersion,
+  RegistryArtifactMetadata
+} from '@harnessio/react-har-service-client'
 import type { VersionDetailsTab } from '@ar/pages/version-details/components/VersionDetailsTabs/constants'
-import type { Parent, RepositoryPackageType } from '@ar/common/types'
+import type { PageType, Parent, RepositoryPackageType } from '@ar/common/types'
 
 export interface VersionDetailsHeaderProps<T> {
   data: T
@@ -39,6 +43,15 @@ export interface VersionListTableProps {
   parent: Parent
 }
 
+export interface ArtifactActionProps {
+  data: RegistryArtifactMetadata | ArtifactSummary
+  pageType: PageType
+  repoKey: string
+  artifactKey: string
+  readonly?: boolean
+  onClose?: () => void
+}
+
 export abstract class VersionStep<T> {
   protected abstract packageType: RepositoryPackageType
   protected abstract allowedVersionDetailsTabs: VersionDetailsTab[]
@@ -56,4 +69,6 @@ export abstract class VersionStep<T> {
   abstract renderVersionDetailsHeader(props: VersionDetailsHeaderProps<T>): JSX.Element
 
   abstract renderVersionDetailsTab(props: VersionDetailsTabProps): JSX.Element
+
+  abstract renderArtifactActions(props: ArtifactActionProps): JSX.Element
 }
diff --git a/web/src/ar/gitness/utils/getARRouteDefinitions.ts b/web/src/ar/gitness/utils/getARRouteDefinitions.ts
index 8e8149911..7b82253de 100644
--- a/web/src/ar/gitness/utils/getARRouteDefinitions.ts
+++ b/web/src/ar/gitness/utils/getARRouteDefinitions.ts
@@ -38,7 +38,7 @@ export default function getARRouteDefinitions(routeParams: Record<string, string
     toARRepositoryDetails: params => `/${params?.repositoryIdentifier}`,
     toARRepositoryDetailsTab: params => `/${params?.repositoryIdentifier}/${params?.tab}`,
     toARRepositoryWebhookDetails: params => `/${params?.repositoryIdentifier}/webhooks/${params?.webhookIdentifier}`,
-    toARArtifacts: () => `/${routeParams?.repositoryIdentifier}?tab=packages`,
+    toARArtifacts: () => `/${routeParams?.repositoryIdentifier}/packages`,
     toARArtifactDetails: params => `/${params?.repositoryIdentifier}/artifacts/${params?.artifactIdentifier}`,
     toARVersionDetails: params =>
       `/${params?.repositoryIdentifier}/artifacts/${params?.artifactIdentifier}/versions/${params?.versionIdentifier}`,
diff --git a/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss b/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss
deleted file mode 100644
index 8f3fe057c..000000000
--- a/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * 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.
- */
-
-.optionsMenu {
-  min-width: unset;
-}
diff --git a/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss.d.ts b/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss.d.ts
deleted file mode 100644
index 851246897..000000000
--- a/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.module.scss.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright 2023 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.
- */
-
-/* eslint-disable */
-// This is an auto-generated file
-export declare const optionsMenu: string
diff --git a/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.tsx b/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.tsx
index 257ace431..846c5059b 100644
--- a/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.tsx
+++ b/web/src/ar/pages/artifact-details/components/ArtifactActions/ArtifactActions.tsx
@@ -15,45 +15,46 @@
  */
 
 import React, { useState } from 'react'
-import { Menu, Position } from '@blueprintjs/core'
-import { Button, ButtonVariation } from '@harnessio/uicore'
 
-import DeleteRepositoryMenuItem from './DeleteRepository'
-import EditRepositoryMenuItem from './EditRepository'
-import SetupClientMenuItem from './SetupClient'
+import { PageType } from '@ar/common/types'
+import ActionButton from '@ar/components/ActionButton/ActionButton'
+
+import SetupClientMenuItem from './SetupClientMenuItem'
 import type { ArtifactActionProps } from './types'
+import DeleteArtifactMenuItem from './DeleteArtifactMenuItem'
 
-import css from './ArtifactActions.module.scss'
-
-export default function ArtifactActions({ data, repoKey }: ArtifactActionProps): JSX.Element {
-  const [menuOpen, setMenuOpen] = useState(false)
+export default function ArtifactActions({
+  data,
+  repoKey,
+  artifactKey,
+  pageType,
+  readonly,
+  onClose
+}: ArtifactActionProps): JSX.Element {
+  const [open, setOpen] = useState(false)
   return (
-    <Button
-      variation={ButtonVariation.ICON}
-      icon="Options"
-      tooltip={
-        <Menu
-          className={css.optionsMenu}
-          onClick={e => {
-            e.stopPropagation()
-          }}>
-          <DeleteRepositoryMenuItem data={data} repoKey={repoKey} />
-          <EditRepositoryMenuItem data={data} repoKey={repoKey} />
-          <SetupClientMenuItem data={data} repoKey={repoKey} />
-        </Menu>
-      }
-      tooltipProps={{
-        interactionKind: 'click',
-        onInteraction: nextOpenState => {
-          setMenuOpen(nextOpenState)
-        },
-        isOpen: menuOpen,
-        position: Position.BOTTOM
-      }}
-      onClick={e => {
-        e.stopPropagation()
-        setMenuOpen(true)
-      }}
-    />
+    <ActionButton isOpen={open} setOpen={setOpen}>
+      <DeleteArtifactMenuItem
+        artifactKey={artifactKey}
+        repoKey={repoKey}
+        data={data}
+        pageType={pageType}
+        readonly={readonly}
+        onClose={() => {
+          setOpen(false)
+          onClose?.()
+        }}
+      />
+      {pageType === PageType.Table && (
+        <SetupClientMenuItem
+          data={data}
+          pageType={pageType}
+          readonly={readonly}
+          onClose={() => setOpen(false)}
+          artifactKey={artifactKey}
+          repoKey={repoKey}
+        />
+      )}
+    </ActionButton>
   )
 }
diff --git a/web/src/ar/pages/artifact-details/components/ArtifactActions/DeleteRepository.tsx b/web/src/ar/pages/artifact-details/components/ArtifactActions/DeleteArtifactMenuItem.tsx
similarity index 62%
rename from web/src/ar/pages/artifact-details/components/ArtifactActions/DeleteRepository.tsx
rename to web/src/ar/pages/artifact-details/components/ArtifactActions/DeleteArtifactMenuItem.tsx
index 938dba603..a3f11a2b1 100644
--- a/web/src/ar/pages/artifact-details/components/ArtifactActions/DeleteRepository.tsx
+++ b/web/src/ar/pages/artifact-details/components/ArtifactActions/DeleteArtifactMenuItem.tsx
@@ -18,23 +18,34 @@ import React from 'react'
 import { useHistory } from 'react-router-dom'
 
 import { useStrings } from '@ar/frameworks/strings'
+import { queryClient } from '@ar/utils/queryClient'
 import { useParentComponents, useRoutes } from '@ar/hooks'
+import { RepositoryDetailsTab } from '@ar/pages/repository-details/constants'
 import { PermissionIdentifier, ResourceType } from '@ar/common/permissionTypes'
-import useDeleteRepositoryModal from '@ar/pages/repository-details/hooks/useDeleteRepositoryModal/useDeleteRepositoryModal'
 
 import type { ArtifactActionProps } from './types'
+import useDeleteArtifactModal from '../../hooks/useDeleteArtifactModal/useDeleteArtifactModal'
 
-export default function DeleteRepositoryMenuItem({ repoKey }: ArtifactActionProps): JSX.Element {
+export default function DeleteArtifactMenuItem(props: ArtifactActionProps): JSX.Element {
+  const { artifactKey, repoKey, readonly, onClose } = props
   const { getString } = useStrings()
   const { RbacMenuItem } = useParentComponents()
   const history = useHistory()
   const routes = useRoutes()
 
   const handleAfterDeleteRepository = (): void => {
-    history.push(routes.toARArtifacts())
+    onClose?.()
+    queryClient.invalidateQueries(['GetAllArtifactsByRegistry'])
+    history.push(
+      routes.toARRepositoryDetailsTab({
+        repositoryIdentifier: repoKey,
+        tab: RepositoryDetailsTab.PACKAGES
+      })
+    )
   }
 
-  const { triggerDelete } = useDeleteRepositoryModal({
+  const { triggerDelete } = useDeleteArtifactModal({
+    artifactKey,
     repoKey,
     onSuccess: handleAfterDeleteRepository
   })
@@ -46,14 +57,15 @@ export default function DeleteRepositoryMenuItem({ repoKey }: ArtifactActionProp
   return (
     <RbacMenuItem
       icon="code-delete"
-      text={getString('artifactList.table.actions.deleteRepository')}
+      text={getString('artifactList.table.actions.deleteArtifact')}
       onClick={handleDeleteService}
+      disabled={readonly}
       permission={{
         resource: {
           resourceType: ResourceType.ARTIFACT_REGISTRY,
-          resourceIdentifier: repoKey
+          resourceIdentifier: artifactKey
         },
-        permission: PermissionIdentifier.DELETE_ARTIFACT_REGISTRY
+        permission: PermissionIdentifier.DELETE_ARTIFACT
       }}
     />
   )
diff --git a/web/src/ar/pages/artifact-details/components/ArtifactActions/EditRepository.tsx b/web/src/ar/pages/artifact-details/components/ArtifactActions/EditRepository.tsx
deleted file mode 100644
index cbd9bc73e..000000000
--- a/web/src/ar/pages/artifact-details/components/ArtifactActions/EditRepository.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react'
-import { useHistory } from 'react-router-dom'
-
-import { useStrings } from '@ar/frameworks/strings'
-import { useParentComponents, useRoutes } from '@ar/hooks'
-import { RepositoryDetailsTab } from '@ar/pages/repository-details/constants'
-import { PermissionIdentifier, ResourceType } from '@ar/common/permissionTypes'
-
-import type { ArtifactActionProps } from './types'
-
-export default function EditRepositoryMenuItem({ repoKey }: ArtifactActionProps): JSX.Element {
-  const { getString } = useStrings()
-  const { RbacMenuItem } = useParentComponents()
-  const history = useHistory()
-  const routes = useRoutes()
-
-  const handleOpenRepository = (): void => {
-    history.push(
-      routes.toARRepositoryDetailsTab({
-        repositoryIdentifier: repoKey,
-        tab: RepositoryDetailsTab.CONFIGURATION
-      })
-    )
-  }
-
-  return (
-    <>
-      <RbacMenuItem
-        icon="edit"
-        text={getString('artifactList.table.actions.editRepository')}
-        onClick={handleOpenRepository}
-        permission={{
-          resource: {
-            resourceType: ResourceType.ARTIFACT_REGISTRY,
-            resourceIdentifier: repoKey
-          },
-          permission: PermissionIdentifier.EDIT_ARTIFACT_REGISTRY
-        }}
-      />
-    </>
-  )
-}
diff --git a/web/src/ar/pages/artifact-details/components/ArtifactActions/SetupClient.tsx b/web/src/ar/pages/artifact-details/components/ArtifactActions/SetupClientMenuItem.tsx
similarity index 90%
rename from web/src/ar/pages/artifact-details/components/ArtifactActions/SetupClient.tsx
rename to web/src/ar/pages/artifact-details/components/ArtifactActions/SetupClientMenuItem.tsx
index ec9ec53c2..f5969360f 100644
--- a/web/src/ar/pages/artifact-details/components/ArtifactActions/SetupClient.tsx
+++ b/web/src/ar/pages/artifact-details/components/ArtifactActions/SetupClientMenuItem.tsx
@@ -25,10 +25,10 @@ import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetup
 
 import type { ArtifactActionProps } from './types'
 
-export default function SetupClientMenuItem({ data, repoKey }: ArtifactActionProps): JSX.Element {
+export default function SetupClientMenuItem(props: ArtifactActionProps): JSX.Element {
+  const { artifactKey, repoKey, data, readonly } = props
   const { getString } = useStrings()
   const { RbacMenuItem } = useParentComponents()
-  const artifactKey = data.imageName || ''
 
   const [showSetupClientModal] = useSetupClientModal({
     repoKey,
@@ -41,6 +41,7 @@ export default function SetupClientMenuItem({ data, repoKey }: ArtifactActionPro
         icon="setup-client"
         text={getString('actions.setupClient')}
         onClick={showSetupClientModal}
+        disabled={readonly}
         permission={{
           resource: {
             resourceType: ResourceType.ARTIFACT_REGISTRY,
diff --git a/web/src/ar/pages/artifact-details/components/ArtifactActions/types.ts b/web/src/ar/pages/artifact-details/components/ArtifactActions/types.ts
index 9aeaf7854..a70b6d65c 100644
--- a/web/src/ar/pages/artifact-details/components/ArtifactActions/types.ts
+++ b/web/src/ar/pages/artifact-details/components/ArtifactActions/types.ts
@@ -14,9 +14,14 @@
  * limitations under the License.
  */
 
-import type { ArtifactSummary } from '@harnessio/react-har-service-client'
+import type { ArtifactSummary, RegistryArtifactMetadata } from '@harnessio/react-har-service-client'
+import type { PageType } from '@ar/common/types'
 
 export interface ArtifactActionProps {
-  data: ArtifactSummary
+  data: ArtifactSummary | RegistryArtifactMetadata
+  artifactKey: string
   repoKey: string
+  pageType: PageType
+  readonly?: boolean
+  onClose?: () => void
 }
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 b93c6fde1..b094ef3fd 100644
--- a/web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx
+++ b/web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx
@@ -21,11 +21,12 @@ import type { ArtifactSummary } from '@harnessio/react-har-service-client'
 
 import { useDecodedParams } from '@ar/hooks'
 import { useStrings } from '@ar/frameworks/strings/String'
-import type { RepositoryPackageType } from '@ar/common/types'
+import { PageType, type RepositoryPackageType } from '@ar/common/types'
 import type { ArtifactDetailsPathParams } from '@ar/routes/types'
 import WeeklyDownloads from '@ar/components/PageTitle/WeeklyDownloads'
 import CreatedAndModifiedAt from '@ar/components/PageTitle/CreatedAndModifiedAt'
 import NameAndDescription from '@ar/components/PageTitle/NameAndDescription'
+import ArtifactActionsWidget from '@ar/frameworks/Version/ArtifactActionsWidget'
 import SetupClientButton from '@ar/components/SetupClientButton/SetupClientButton'
 
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
@@ -69,6 +70,13 @@ function ArtifactDetailsHeaderContent(props: ArtifactDetailsHeaderContentProps):
               artifactIdentifier={artifactIdentifier}
               packageType={packageType as RepositoryPackageType}
             />
+            <ArtifactActionsWidget
+              packageType={packageType as RepositoryPackageType}
+              data={data as ArtifactSummary}
+              repoKey={repositoryIdentifier}
+              artifactKey={artifactIdentifier}
+              pageType={PageType.Details}
+            />
           </Layout.Horizontal>
         </Layout.Vertical>
       </Layout.Horizontal>
diff --git a/web/src/ar/pages/artifact-details/hooks/useDeleteArtifactModal/useDeleteArtifactModal.tsx b/web/src/ar/pages/artifact-details/hooks/useDeleteArtifactModal/useDeleteArtifactModal.tsx
new file mode 100644
index 000000000..33bd6e8a6
--- /dev/null
+++ b/web/src/ar/pages/artifact-details/hooks/useDeleteArtifactModal/useDeleteArtifactModal.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+import { Intent } from '@blueprintjs/core'
+import { getErrorInfoFromErrorObject, useToaster } from '@harnessio/uicore'
+import { useDeleteArtifactMutation } from '@harnessio/react-har-service-client'
+
+import { useGetSpaceRef, useParentHooks } from '@ar/hooks'
+import { useStrings } from '@ar/frameworks/strings'
+import { encodeRef } from '@ar/hooks/useGetSpaceRef'
+
+interface useDeleteArtifactModalProps {
+  repoKey: string
+  artifactKey: string
+  onSuccess: () => void
+}
+export default function useDeleteArtifactModal(props: useDeleteArtifactModalProps) {
+  const { repoKey, onSuccess, artifactKey } = props
+  const { getString } = useStrings()
+  const { showSuccess, showError, clear } = useToaster()
+  const { useConfirmationDialog } = useParentHooks()
+  const spaceRef = useGetSpaceRef(repoKey)
+
+  const { mutateAsync: deleteArtifact } = useDeleteArtifactMutation()
+
+  const handleDeleteArtifact = async (isConfirmed: boolean): Promise<void> => {
+    if (isConfirmed) {
+      try {
+        const response = await deleteArtifact({
+          registry_ref: spaceRef,
+          artifact: encodeRef(artifactKey)
+        })
+        if (response.content.status === 'SUCCESS') {
+          clear()
+          showSuccess(getString('artifactDetails.artifactDeleted'))
+          onSuccess()
+        }
+      } catch (e: any) {
+        showError(getErrorInfoFromErrorObject(e, true))
+      }
+    }
+  }
+
+  const { openDialog } = useConfirmationDialog({
+    titleText: getString('artifactDetails.deleteArtifactModal.title'),
+    contentText: getString('artifactDetails.deleteArtifactModal.contentText'),
+    confirmButtonText: getString('delete'),
+    cancelButtonText: getString('cancel'),
+    intent: Intent.DANGER,
+    onCloseDialog: handleDeleteArtifact
+  })
+
+  return { triggerDelete: openDialog }
+}
diff --git a/web/src/ar/pages/artifact-details/strings/strings.en.yaml b/web/src/ar/pages/artifact-details/strings/strings.en.yaml
index 2e78c68f5..d4b79cb10 100644
--- a/web/src/ar/pages/artifact-details/strings/strings.en.yaml
+++ b/web/src/ar/pages/artifact-details/strings/strings.en.yaml
@@ -3,3 +3,7 @@ downloadsThisWeek: Downloads This Week
 artifactLabelInputPlaceholder: Type input and hit enter
 labelsUpdated: Artifact labels updated successfully!
 totalDownloads: Total Downloads
+artifactDeleted: Artifact deleted successfully!
+deleteArtifactModal:
+  title: Delete Artifact
+  contentText: Are you sure you want to delete the artifact?
diff --git a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.module.scss b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.module.scss
index 336a7f818..fa6510b38 100644
--- a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.module.scss
+++ b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.module.scss
@@ -34,7 +34,7 @@
   div[class*='TableV2--cells'],
   div[class*='TableV2--header'] {
     display: grid !important;
-    grid-template-columns: minmax(var(--har-table-name-column-min-width), 1fr) 15rem 20rem 15rem;
+    grid-template-columns: minmax(var(--har-table-name-column-min-width), 1fr) 15rem 20rem 15rem 50px;
   }
 }
 
diff --git a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.tsx b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.tsx
index a4cc2babd..b5e1587a7 100644
--- a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.tsx
+++ b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTable.tsx
@@ -23,6 +23,7 @@ import type { ListRegistryArtifact, RegistryArtifactMetadata } from '@harnessio/
 import { useStrings } from '@ar/frameworks/strings'
 import { useParentHooks } from '@ar/hooks'
 import {
+  RegistryArtifactActionsCell,
   RegistryArtifactDownloadsCell,
   RegistryArtifactLatestUpdatedCell,
   RegistryArtifactNameCell,
@@ -95,6 +96,12 @@ export default function RegistryArtifactListTable(props: RegistryArtifactListTab
         accessor: 'latestVersion',
         Cell: RegistryArtifactLatestUpdatedCell,
         serverSortProps: getServerSortProps('latestVersion')
+      },
+      {
+        Header: '',
+        accessor: 'actions',
+        Cell: RegistryArtifactActionsCell,
+        disableSortBy: true
       }
     ].filter(Boolean) as unknown as Column<RegistryArtifactMetadata>[]
   }, [currentOrder, currentSort, getString, onClickLabel])
diff --git a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx
index 92f29bbb1..a92f32fdb 100644
--- a/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx
+++ b/web/src/ar/pages/artifact-list/components/RegistryArtifactListTable/RegistryArtifactListTableCell.tsx
@@ -28,8 +28,9 @@ import { useStrings } from '@ar/frameworks/strings'
 import TableCells from '@ar/components/TableCells/TableCells'
 import LabelsPopover from '@ar/components/LabelsPopover/LabelsPopover'
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
-import type { RepositoryPackageType } from '@ar/common/types'
+import { PageType, type RepositoryPackageType } from '@ar/common/types'
 import { RepositoryDetailsTab } from '@ar/pages/repository-details/constants'
+import ArtifactActionsWidget from '@ar/frameworks/Version/ArtifactActionsWidget'
 import { VersionDetailsTab } from '@ar/pages/version-details/components/VersionDetailsTabs/constants'
 
 type CellTypeWithActions<D extends Record<string, any>, V = any> = TableInstance<D> & {
@@ -143,3 +144,16 @@ export const RegistryArtifactLatestUpdatedCell: CellType = ({ row }) => {
     </Layout.Vertical>
   )
 }
+
+export const RegistryArtifactActionsCell: CellType = ({ row }) => {
+  const { original } = row
+  return (
+    <ArtifactActionsWidget
+      packageType={original.packageType as RepositoryPackageType}
+      pageType={PageType.Table}
+      data={original}
+      repoKey={original.registryIdentifier}
+      artifactKey={original.name}
+    />
+  )
+}
diff --git a/web/src/ar/pages/artifact-list/strings/strings.en.yaml b/web/src/ar/pages/artifact-list/strings/strings.en.yaml
index 76e6040cb..7114caf9f 100644
--- a/web/src/ar/pages/artifact-list/strings/strings.en.yaml
+++ b/web/src/ar/pages/artifact-list/strings/strings.en.yaml
@@ -21,6 +21,7 @@ table:
   actions:
     editRepository: Edit Registry
     deleteRepository: Delete Registry
+    deleteArtifact: Delete Artifact
     VulnerabilityStatus:
       scanned: Scanned
       nonScanned: Not Scanned
diff --git a/web/src/ar/pages/repository-details/DockerRepository/__tests__/__mockData__.ts b/web/src/ar/pages/repository-details/DockerRepository/__tests__/__mockData__.ts
index ed2f57855..246214c08 100644
--- a/web/src/ar/pages/repository-details/DockerRepository/__tests__/__mockData__.ts
+++ b/web/src/ar/pages/repository-details/DockerRepository/__tests__/__mockData__.ts
@@ -52,7 +52,7 @@ export const MockGetArtifactsByRegistryResponse: GetAllArtifactsByRegistryOkResp
         }
       ],
       itemCount: 1,
-      pageCount: 1,
+      pageCount: 3,
       pageIndex: 0,
       pageSize: 50
     },
diff --git a/web/src/ar/pages/repository-details/GenericRepository/__tests__/__mockData__.ts b/web/src/ar/pages/repository-details/GenericRepository/__tests__/__mockData__.ts
index d1e6de5f8..96bf56c53 100644
--- a/web/src/ar/pages/repository-details/GenericRepository/__tests__/__mockData__.ts
+++ b/web/src/ar/pages/repository-details/GenericRepository/__tests__/__mockData__.ts
@@ -52,7 +52,7 @@ export const MockGetGenericArtifactsByRegistryResponse: GetAllArtifactsByRegistr
         }
       ],
       itemCount: 0,
-      pageCount: 0,
+      pageCount: 2,
       pageIndex: 0,
       pageSize: 50
     },
diff --git a/web/src/ar/pages/repository-details/HelmRepository/__tests__/__mockData__.ts b/web/src/ar/pages/repository-details/HelmRepository/__tests__/__mockData__.ts
index 079694365..4690960d0 100644
--- a/web/src/ar/pages/repository-details/HelmRepository/__tests__/__mockData__.ts
+++ b/web/src/ar/pages/repository-details/HelmRepository/__tests__/__mockData__.ts
@@ -52,7 +52,7 @@ export const MockGetHelmArtifactsByRegistryResponse: GetAllArtifactsByRegistryOk
         }
       ],
       itemCount: 1,
-      pageCount: 1,
+      pageCount: 2,
       pageIndex: 0,
       pageSize: 50
     },
diff --git a/web/src/ar/pages/repository-details/MavenRepository/__tests__/__mockData__.ts b/web/src/ar/pages/repository-details/MavenRepository/__tests__/__mockData__.ts
index 61e6f85b1..1537d5da1 100644
--- a/web/src/ar/pages/repository-details/MavenRepository/__tests__/__mockData__.ts
+++ b/web/src/ar/pages/repository-details/MavenRepository/__tests__/__mockData__.ts
@@ -52,7 +52,7 @@ export const MockGetMavenArtifactsByRegistryResponse: GetAllArtifactsByRegistryO
         }
       ],
       itemCount: 0,
-      pageCount: 0,
+      pageCount: 2,
       pageIndex: 0,
       pageSize: 50
     },
diff --git a/web/src/ar/pages/version-details/DockerVersion/DockerVersionType.tsx b/web/src/ar/pages/version-details/DockerVersion/DockerVersionType.tsx
index a8b4709cc..d92b116f9 100644
--- a/web/src/ar/pages/version-details/DockerVersion/DockerVersionType.tsx
+++ b/web/src/ar/pages/version-details/DockerVersion/DockerVersionType.tsx
@@ -19,11 +19,13 @@ import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client
 
 import { String } from '@ar/frameworks/strings'
 import { RepositoryPackageType } from '@ar/common/types'
+import ArtifactActions from '@ar/pages/artifact-details/components/ArtifactActions/ArtifactActions'
 import DockerVersionListTable from '@ar/pages/version-list/DockerVersion/VersionListTable/DockerVersionListTable'
 import {
-  VersionDetailsHeaderProps,
-  VersionDetailsTabProps,
-  VersionListTableProps,
+  type ArtifactActionProps,
+  type VersionDetailsHeaderProps,
+  type VersionDetailsTabProps,
+  type VersionListTableProps,
   VersionStep
 } from '@ar/frameworks/Version/Version'
 
@@ -72,4 +74,8 @@ export class DockerVersionType extends VersionStep<ArtifactVersionSummary> {
         return <String stringID="tabNotFound" />
     }
   }
+
+  renderArtifactActions(props: ArtifactActionProps): JSX.Element {
+    return <ArtifactActions {...props} />
+  }
 }
diff --git a/web/src/ar/pages/version-details/DockerVersion/__tests__/DockerArtifactListPage.test.tsx b/web/src/ar/pages/version-details/DockerVersion/__tests__/DockerArtifactListPage.test.tsx
new file mode 100644
index 000000000..2a235562e
--- /dev/null
+++ b/web/src/ar/pages/version-details/DockerVersion/__tests__/DockerArtifactListPage.test.tsx
@@ -0,0 +1,325 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { useGetAllArtifactsByRegistryQuery as _useGetAllArtifactsByRegistryQuery } from '@harnessio/react-har-service-client'
+import { fireEvent, getByText as globalGetByText, render, waitFor } from '@testing-library/react'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+import { RepositoryDetailsTab } from '@ar/pages/repository-details/constants'
+import RepositoryDetailsPage from '@ar/pages/repository-details/RepositoryDetailsPage'
+import {
+  MockGetArtifactsByRegistryResponse,
+  MockGetDockerRegistryResponseWithAllData
+} from '@ar/pages/repository-details/DockerRepository/__tests__/__mockData__'
+import { getTableColumn } from '@ar/utils/testUtils/utils'
+
+const useGetAllArtifactsByRegistryQuery = _useGetAllArtifactsByRegistryQuery as jest.Mock
+
+const deleteArtifact = jest.fn().mockImplementation(() => Promise.resolve({}))
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetAllArtifactsByRegistryQuery: jest.fn(),
+  useGetRegistryQuery: jest.fn().mockImplementation(() => ({
+    isFetching: false,
+    refetch: jest.fn(),
+    error: false,
+    data: MockGetDockerRegistryResponseWithAllData
+  })),
+  useDeleteArtifactMutation: jest.fn().mockImplementation(() => ({
+    isLoading: false,
+    mutateAsync: deleteArtifact
+  }))
+}))
+
+describe('Test Registry Artifact List Page', () => {
+  beforeEach(() => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: MockGetArtifactsByRegistryResponse,
+      error: false,
+      refetch: jest.fn()
+    }))
+  })
+
+  test('Should render empty list if artifacts response is empty', () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const noResultsText = getByText('artifactList.table.noArtifactsTitle')
+    expect(noResultsText).toBeInTheDocument()
+  })
+
+  test('Should render artifacts list', async () => {
+    const { container } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const table = container.querySelector('[class*="TableV2--table"]')
+    expect(table).toBeInTheDocument()
+
+    const tableRows = container.querySelectorAll('[class*="TableV2--row"]')
+    expect(tableRows).toHaveLength(1)
+
+    const tableData = MockGetArtifactsByRegistryResponse.content.data.artifacts
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+    expect(globalGetByText(getFirstRowColumn(1), tableData[0].name)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(2), tableData[0].registryIdentifier)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(3), tableData[0].downloadsCount?.toString() as string)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(4), tableData[0].latestVersion)).toBeInTheDocument()
+
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+    const dialogs = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const selectPopover = dialogs[0] as HTMLElement
+
+    const items = selectPopover.getElementsByClassName('bp3-menu-item')
+    expect(items).toHaveLength(2)
+
+    expect(items[0]).toHaveTextContent('artifactList.table.actions.deleteArtifact')
+    expect(items[1]).toHaveTextContent('actions.setupClient')
+  })
+
+  test('Should show error message if listing api fails', async () => {
+    const mockRefetchFn = jest.fn().mockImplementation()
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: null,
+      error: {
+        message: 'error message'
+      },
+      refetch: mockRefetchFn
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const errorText = getByText('error message')
+    expect(errorText).toBeInTheDocument()
+
+    const retryBtn = getByText('Retry')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn)
+    expect(mockRefetchFn).toHaveBeenCalled()
+  })
+
+  test('Should be able to search', async () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText, getByPlaceholderText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const searchInput = getByPlaceholderText('search')
+    expect(searchInput).toBeInTheDocument()
+
+    fireEvent.change(searchInput, { target: { value: 'pod' } })
+    await waitFor(() =>
+      expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+        registry_ref: 'undefined/abcd/+',
+        queryParams: {
+          page: 0,
+          size: 50,
+          search_term: 'pod',
+          sort_field: 'updatedAt',
+          sort_order: 'DESC'
+        },
+        stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+      })
+    )
+
+    const clearAllFiltersBtn = getByText('clearFilters')
+    await userEvent.click(clearAllFiltersBtn)
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Sorting should work', async () => {
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const artifactNameSortIcon = getByText('artifactList.table.columns.name').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(artifactNameSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'name',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const repositorySortIcon = getByText('artifactList.table.columns.repository').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(repositorySortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'registryIdentifier',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const downloadsSortIcon = getByText('artifactList.table.columns.downloads').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(downloadsSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'downloadsCount',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const lastUpdatedSortIcon = getByText('artifactList.table.columns.latestVersion').nextSibling
+      ?.firstChild as HTMLElement
+    await userEvent.click(lastUpdatedSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'latestVersion',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Pagination should work', async () => {
+    const { getByText, getByTestId } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const nextPageBtn = getByText('Next')
+    await userEvent.click(nextPageBtn)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 1,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const pageSizeSelect = getByTestId('dropdown-button')
+    await userEvent.click(pageSizeSelect)
+    const pageSize20option = getByText('20')
+    await userEvent.click(pageSize20option)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 20,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Should list actions', async () => {
+    render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+
+    // click on 3 dots action btn
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+
+    const popovers = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(popovers).toHaveLength(1))
+    const selectPopover = popovers[0] as HTMLElement
+    const deleteItem = globalGetByText(selectPopover, 'artifactList.table.actions.deleteArtifact')
+
+    // click on delete action item
+    await userEvent.click(deleteItem)
+    const dialogs = document.getElementsByClassName('bp3-dialog')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const deleteDialog = dialogs[0] as HTMLElement
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.title')).toBeInTheDocument()
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.contentText')).toBeInTheDocument()
+
+    const deleteBtn = deleteDialog.querySelector('button[aria-label=delete]')
+    const cancelBtn = deleteDialog.querySelector('button[aria-label=cancel]')
+    expect(deleteBtn).toBeInTheDocument()
+    expect(cancelBtn).toBeInTheDocument()
+
+    // click on delete button on modal
+    await userEvent.click(deleteBtn!)
+
+    await waitFor(() => {
+      expect(deleteArtifact).toHaveBeenCalledWith({
+        artifact: 'podinfo-artifact/+',
+        registry_ref: 'undefined/docker-repo/+'
+      })
+    })
+  })
+})
diff --git a/web/src/ar/pages/version-details/GenericVersion/GenericVersionType.tsx b/web/src/ar/pages/version-details/GenericVersion/GenericVersionType.tsx
index 48720eadd..728d8b0a4 100644
--- a/web/src/ar/pages/version-details/GenericVersion/GenericVersionType.tsx
+++ b/web/src/ar/pages/version-details/GenericVersion/GenericVersionType.tsx
@@ -17,6 +17,7 @@
 import React from 'react'
 import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client'
 import {
+  type ArtifactActionProps,
   type VersionDetailsHeaderProps,
   type VersionDetailsTabProps,
   type VersionListTableProps,
@@ -28,6 +29,7 @@ import VersionListTable, {
   type CommonVersionListTableProps
 } from '@ar/pages/version-list/components/VersionListTable/VersionListTable'
 import { VersionListColumnEnum } from '@ar/pages/version-list/components/VersionListTable/types'
+import ArtifactActions from '@ar/pages/artifact-details/components/ArtifactActions/ArtifactActions'
 import { VersionDetailsTab } from '../components/VersionDetailsTabs/constants'
 import GenericOverviewPage from './pages/overview/OverviewPage'
 import OSSContentPage from './pages/oss-details/OSSContentPage'
@@ -69,4 +71,8 @@ export class GenericVersionType extends VersionStep<ArtifactVersionSummary> {
         return <String stringID="tabNotFound" />
     }
   }
+
+  renderArtifactActions(props: ArtifactActionProps): JSX.Element {
+    return <ArtifactActions {...props} />
+  }
 }
diff --git a/web/src/ar/pages/version-details/GenericVersion/__tests__/GenericArtifactListPage.test.tsx b/web/src/ar/pages/version-details/GenericVersion/__tests__/GenericArtifactListPage.test.tsx
new file mode 100644
index 000000000..2794c39c7
--- /dev/null
+++ b/web/src/ar/pages/version-details/GenericVersion/__tests__/GenericArtifactListPage.test.tsx
@@ -0,0 +1,325 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { useGetAllArtifactsByRegistryQuery as _useGetAllArtifactsByRegistryQuery } from '@harnessio/react-har-service-client'
+import { fireEvent, getByText as globalGetByText, render, waitFor } from '@testing-library/react'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+import { RepositoryDetailsTab } from '@ar/pages/repository-details/constants'
+import RepositoryDetailsPage from '@ar/pages/repository-details/RepositoryDetailsPage'
+import {
+  MockGetGenericArtifactsByRegistryResponse,
+  MockGetGenericRegistryResponseWithAllData
+} from '@ar/pages/repository-details/GenericRepository/__tests__/__mockData__'
+import { getTableColumn } from '@ar/utils/testUtils/utils'
+
+const useGetAllArtifactsByRegistryQuery = _useGetAllArtifactsByRegistryQuery as jest.Mock
+
+const deleteArtifact = jest.fn().mockImplementation(() => Promise.resolve({}))
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetAllArtifactsByRegistryQuery: jest.fn(),
+  useGetRegistryQuery: jest.fn().mockImplementation(() => ({
+    isFetching: false,
+    refetch: jest.fn(),
+    error: false,
+    data: MockGetGenericRegistryResponseWithAllData
+  })),
+  useDeleteArtifactMutation: jest.fn().mockImplementation(() => ({
+    isLoading: false,
+    mutateAsync: deleteArtifact
+  }))
+}))
+
+describe('Test Registry Artifact List Page', () => {
+  beforeEach(() => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: MockGetGenericArtifactsByRegistryResponse,
+      error: false,
+      refetch: jest.fn()
+    }))
+  })
+
+  test('Should render empty list if artifacts response is empty', () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const noResultsText = getByText('artifactList.table.noArtifactsTitle')
+    expect(noResultsText).toBeInTheDocument()
+  })
+
+  test('Should render artifacts list', async () => {
+    const { container } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const table = container.querySelector('[class*="TableV2--table"]')
+    expect(table).toBeInTheDocument()
+
+    const tableRows = container.querySelectorAll('[class*="TableV2--row"]')
+    expect(tableRows).toHaveLength(1)
+
+    const tableData = MockGetGenericArtifactsByRegistryResponse.content.data.artifacts
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+    expect(globalGetByText(getFirstRowColumn(1), tableData[0].name)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(2), tableData[0].registryIdentifier)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(3), tableData[0].downloadsCount?.toString() as string)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(4), tableData[0].latestVersion)).toBeInTheDocument()
+
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+    const dialogs = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const selectPopover = dialogs[0] as HTMLElement
+
+    const items = selectPopover.getElementsByClassName('bp3-menu-item')
+    expect(items).toHaveLength(2)
+
+    expect(items[0]).toHaveTextContent('artifactList.table.actions.deleteArtifact')
+    expect(items[1]).toHaveTextContent('actions.setupClient')
+  })
+
+  test('Should show error message if listing api fails', async () => {
+    const mockRefetchFn = jest.fn().mockImplementation()
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: null,
+      error: {
+        message: 'error message'
+      },
+      refetch: mockRefetchFn
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const errorText = getByText('error message')
+    expect(errorText).toBeInTheDocument()
+
+    const retryBtn = getByText('Retry')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn)
+    expect(mockRefetchFn).toHaveBeenCalled()
+  })
+
+  test('Should be able to search', async () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText, getByPlaceholderText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const searchInput = getByPlaceholderText('search')
+    expect(searchInput).toBeInTheDocument()
+
+    fireEvent.change(searchInput, { target: { value: 'pod' } })
+    await waitFor(() =>
+      expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+        registry_ref: 'undefined/abcd/+',
+        queryParams: {
+          page: 0,
+          size: 50,
+          search_term: 'pod',
+          sort_field: 'updatedAt',
+          sort_order: 'DESC'
+        },
+        stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+      })
+    )
+
+    const clearAllFiltersBtn = getByText('clearFilters')
+    await userEvent.click(clearAllFiltersBtn)
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Sorting should work', async () => {
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const artifactNameSortIcon = getByText('artifactList.table.columns.name').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(artifactNameSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'name',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const repositorySortIcon = getByText('artifactList.table.columns.repository').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(repositorySortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'registryIdentifier',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const downloadsSortIcon = getByText('artifactList.table.columns.downloads').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(downloadsSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'downloadsCount',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const lastUpdatedSortIcon = getByText('artifactList.table.columns.latestVersion').nextSibling
+      ?.firstChild as HTMLElement
+    await userEvent.click(lastUpdatedSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'latestVersion',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Pagination should work', async () => {
+    const { getByText, getByTestId } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const nextPageBtn = getByText('Next')
+    await userEvent.click(nextPageBtn)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 1,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const pageSizeSelect = getByTestId('dropdown-button')
+    await userEvent.click(pageSizeSelect)
+    const pageSize20option = getByText('20')
+    await userEvent.click(pageSize20option)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 20,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Should list actions', async () => {
+    render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+
+    // click on 3 dots action btn
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+
+    const popovers = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(popovers).toHaveLength(1))
+    const selectPopover = popovers[0] as HTMLElement
+    const deleteItem = globalGetByText(selectPopover, 'artifactList.table.actions.deleteArtifact')
+
+    // click on delete action item
+    await userEvent.click(deleteItem)
+    const dialogs = document.getElementsByClassName('bp3-dialog')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const deleteDialog = dialogs[0] as HTMLElement
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.title')).toBeInTheDocument()
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.contentText')).toBeInTheDocument()
+
+    const deleteBtn = deleteDialog.querySelector('button[aria-label=delete]')
+    const cancelBtn = deleteDialog.querySelector('button[aria-label=cancel]')
+    expect(deleteBtn).toBeInTheDocument()
+    expect(cancelBtn).toBeInTheDocument()
+
+    // click on delete button on modal
+    await userEvent.click(deleteBtn!)
+
+    await waitFor(() => {
+      expect(deleteArtifact).toHaveBeenCalledWith({
+        artifact: 'artifact/+',
+        registry_ref: 'undefined/generic-repo/+'
+      })
+    })
+  })
+})
diff --git a/web/src/ar/pages/version-details/HelmVersion/HelmVersionType.tsx b/web/src/ar/pages/version-details/HelmVersion/HelmVersionType.tsx
index 76fbb3037..07ba9f233 100644
--- a/web/src/ar/pages/version-details/HelmVersion/HelmVersionType.tsx
+++ b/web/src/ar/pages/version-details/HelmVersion/HelmVersionType.tsx
@@ -23,10 +23,12 @@ import { VersionListColumnEnum } from '@ar/pages/version-list/components/Version
 import VersionListTable, {
   CommonVersionListTableProps
 } from '@ar/pages/version-list/components/VersionListTable/VersionListTable'
+import ArtifactActions from '@ar/pages/artifact-details/components/ArtifactActions/ArtifactActions'
 import {
-  VersionDetailsHeaderProps,
-  VersionDetailsTabProps,
-  VersionListTableProps,
+  type ArtifactActionProps,
+  type VersionDetailsHeaderProps,
+  type VersionDetailsTabProps,
+  type VersionListTableProps,
   VersionStep
 } from '@ar/frameworks/Version/Version'
 import { VersionDetailsTab } from '../components/VersionDetailsTabs/constants'
@@ -70,4 +72,8 @@ export class HelmVersionType extends VersionStep<ArtifactVersionSummary> {
         return <String stringID="tabNotFound" />
     }
   }
+
+  renderArtifactActions(props: ArtifactActionProps): JSX.Element {
+    return <ArtifactActions {...props} />
+  }
 }
diff --git a/web/src/ar/pages/version-details/HelmVersion/__tests__/HelmArtifactListPage.test.tsx b/web/src/ar/pages/version-details/HelmVersion/__tests__/HelmArtifactListPage.test.tsx
new file mode 100644
index 000000000..200a5a8c3
--- /dev/null
+++ b/web/src/ar/pages/version-details/HelmVersion/__tests__/HelmArtifactListPage.test.tsx
@@ -0,0 +1,325 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { useGetAllArtifactsByRegistryQuery as _useGetAllArtifactsByRegistryQuery } from '@harnessio/react-har-service-client'
+import { fireEvent, getByText as globalGetByText, render, waitFor } from '@testing-library/react'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+import { RepositoryDetailsTab } from '@ar/pages/repository-details/constants'
+import RepositoryDetailsPage from '@ar/pages/repository-details/RepositoryDetailsPage'
+import {
+  MockGetHelmArtifactsByRegistryResponse,
+  MockGetHelmRegistryResponseWithAllData
+} from '@ar/pages/repository-details/HelmRepository/__tests__/__mockData__'
+import { getTableColumn } from '@ar/utils/testUtils/utils'
+
+const useGetAllArtifactsByRegistryQuery = _useGetAllArtifactsByRegistryQuery as jest.Mock
+
+const deleteArtifact = jest.fn().mockImplementation(() => Promise.resolve({}))
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetAllArtifactsByRegistryQuery: jest.fn(),
+  useGetRegistryQuery: jest.fn().mockImplementation(() => ({
+    isFetching: false,
+    refetch: jest.fn(),
+    error: false,
+    data: MockGetHelmRegistryResponseWithAllData
+  })),
+  useDeleteArtifactMutation: jest.fn().mockImplementation(() => ({
+    isLoading: false,
+    mutateAsync: deleteArtifact
+  }))
+}))
+
+describe('Test Registry Artifact List Page', () => {
+  beforeEach(() => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: MockGetHelmArtifactsByRegistryResponse,
+      error: false,
+      refetch: jest.fn()
+    }))
+  })
+
+  test('Should render empty list if artifacts response is empty', () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const noResultsText = getByText('artifactList.table.noArtifactsTitle')
+    expect(noResultsText).toBeInTheDocument()
+  })
+
+  test('Should render artifacts list', async () => {
+    const { container } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const table = container.querySelector('[class*="TableV2--table"]')
+    expect(table).toBeInTheDocument()
+
+    const tableRows = container.querySelectorAll('[class*="TableV2--row"]')
+    expect(tableRows).toHaveLength(1)
+
+    const tableData = MockGetHelmArtifactsByRegistryResponse.content.data.artifacts
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+    expect(globalGetByText(getFirstRowColumn(1), tableData[0].name)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(2), tableData[0].registryIdentifier)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(3), tableData[0].downloadsCount?.toString() as string)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(4), tableData[0].latestVersion)).toBeInTheDocument()
+
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+    const dialogs = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const selectPopover = dialogs[0] as HTMLElement
+
+    const items = selectPopover.getElementsByClassName('bp3-menu-item')
+    expect(items).toHaveLength(2)
+
+    expect(items[0]).toHaveTextContent('artifactList.table.actions.deleteArtifact')
+    expect(items[1]).toHaveTextContent('actions.setupClient')
+  })
+
+  test('Should show error message if listing api fails', async () => {
+    const mockRefetchFn = jest.fn().mockImplementation()
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: null,
+      error: {
+        message: 'error message'
+      },
+      refetch: mockRefetchFn
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const errorText = getByText('error message')
+    expect(errorText).toBeInTheDocument()
+
+    const retryBtn = getByText('Retry')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn)
+    expect(mockRefetchFn).toHaveBeenCalled()
+  })
+
+  test('Should be able to search', async () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText, getByPlaceholderText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const searchInput = getByPlaceholderText('search')
+    expect(searchInput).toBeInTheDocument()
+
+    fireEvent.change(searchInput, { target: { value: 'pod' } })
+    await waitFor(() =>
+      expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+        registry_ref: 'undefined/abcd/+',
+        queryParams: {
+          page: 0,
+          size: 50,
+          search_term: 'pod',
+          sort_field: 'updatedAt',
+          sort_order: 'DESC'
+        },
+        stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+      })
+    )
+
+    const clearAllFiltersBtn = getByText('clearFilters')
+    await userEvent.click(clearAllFiltersBtn)
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Sorting should work', async () => {
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const artifactNameSortIcon = getByText('artifactList.table.columns.name').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(artifactNameSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'name',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const repositorySortIcon = getByText('artifactList.table.columns.repository').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(repositorySortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'registryIdentifier',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const downloadsSortIcon = getByText('artifactList.table.columns.downloads').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(downloadsSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'downloadsCount',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const lastUpdatedSortIcon = getByText('artifactList.table.columns.latestVersion').nextSibling
+      ?.firstChild as HTMLElement
+    await userEvent.click(lastUpdatedSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'latestVersion',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Pagination should work', async () => {
+    const { getByText, getByTestId } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const nextPageBtn = getByText('Next')
+    await userEvent.click(nextPageBtn)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 1,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const pageSizeSelect = getByTestId('dropdown-button')
+    await userEvent.click(pageSizeSelect)
+    const pageSize20option = getByText('20')
+    await userEvent.click(pageSize20option)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 20,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Should list actions', async () => {
+    render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+
+    // click on 3 dots action btn
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+
+    const popovers = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(popovers).toHaveLength(1))
+    const selectPopover = popovers[0] as HTMLElement
+    const deleteItem = globalGetByText(selectPopover, 'artifactList.table.actions.deleteArtifact')
+
+    // click on delete action item
+    await userEvent.click(deleteItem)
+    const dialogs = document.getElementsByClassName('bp3-dialog')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const deleteDialog = dialogs[0] as HTMLElement
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.title')).toBeInTheDocument()
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.contentText')).toBeInTheDocument()
+
+    const deleteBtn = deleteDialog.querySelector('button[aria-label=delete]')
+    const cancelBtn = deleteDialog.querySelector('button[aria-label=cancel]')
+    expect(deleteBtn).toBeInTheDocument()
+    expect(cancelBtn).toBeInTheDocument()
+
+    // click on delete button on modal
+    await userEvent.click(deleteBtn!)
+
+    await waitFor(() => {
+      expect(deleteArtifact).toHaveBeenCalledWith({
+        artifact: 'podinfo-artifact/+',
+        registry_ref: 'undefined/helm-repo/+'
+      })
+    })
+  })
+})
diff --git a/web/src/ar/pages/version-details/MavenVersion/MavenVersion.tsx b/web/src/ar/pages/version-details/MavenVersion/MavenVersion.tsx
index 369544c17..531761230 100644
--- a/web/src/ar/pages/version-details/MavenVersion/MavenVersion.tsx
+++ b/web/src/ar/pages/version-details/MavenVersion/MavenVersion.tsx
@@ -20,12 +20,14 @@ import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client
 import { String } from '@ar/frameworks/strings'
 import { RepositoryPackageType } from '@ar/common/types'
 import { VersionListColumnEnum } from '@ar/pages/version-list/components/VersionListTable/types'
+import ArtifactActions from '@ar/pages/artifact-details/components/ArtifactActions/ArtifactActions'
 import VersionListTable, {
   type CommonVersionListTableProps
 } from '@ar/pages/version-list/components/VersionListTable/VersionListTable'
 import {
+  type ArtifactActionProps,
   type VersionDetailsHeaderProps,
-  VersionDetailsTabProps,
+  type VersionDetailsTabProps,
   type VersionListTableProps,
   VersionStep
 } from '@ar/frameworks/Version/Version'
@@ -71,4 +73,8 @@ export class MavenVersionType extends VersionStep<ArtifactVersionSummary> {
         return <String stringID="tabNotFound" />
     }
   }
+
+  renderArtifactActions(props: ArtifactActionProps): JSX.Element {
+    return <ArtifactActions {...props} />
+  }
 }
diff --git a/web/src/ar/pages/version-details/MavenVersion/__tests__/MavenArtifactListPage.test.tsx b/web/src/ar/pages/version-details/MavenVersion/__tests__/MavenArtifactListPage.test.tsx
new file mode 100644
index 000000000..db8ea36f9
--- /dev/null
+++ b/web/src/ar/pages/version-details/MavenVersion/__tests__/MavenArtifactListPage.test.tsx
@@ -0,0 +1,325 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { useGetAllArtifactsByRegistryQuery as _useGetAllArtifactsByRegistryQuery } from '@harnessio/react-har-service-client'
+import { fireEvent, getByText as globalGetByText, render, waitFor } from '@testing-library/react'
+
+import '@ar/pages/version-details/VersionFactory'
+import '@ar/pages/repository-details/RepositoryFactory'
+
+import ArTestWrapper from '@ar/utils/testUtils/ArTestWrapper'
+import { RepositoryDetailsTab } from '@ar/pages/repository-details/constants'
+import RepositoryDetailsPage from '@ar/pages/repository-details/RepositoryDetailsPage'
+import {
+  MockGetMavenArtifactsByRegistryResponse,
+  MockGetMavenRegistryResponseWithAllData
+} from '@ar/pages/repository-details/MavenRepository/__tests__/__mockData__'
+import { getTableColumn } from '@ar/utils/testUtils/utils'
+
+const useGetAllArtifactsByRegistryQuery = _useGetAllArtifactsByRegistryQuery as jest.Mock
+
+const deleteArtifact = jest.fn().mockImplementation(() => Promise.resolve({ content: { status: 'SUCCESS' } }))
+
+jest.mock('@harnessio/react-har-service-client', () => ({
+  useGetAllArtifactsByRegistryQuery: jest.fn(),
+  useGetRegistryQuery: jest.fn().mockImplementation(() => ({
+    isFetching: false,
+    refetch: jest.fn(),
+    error: false,
+    data: MockGetMavenRegistryResponseWithAllData
+  })),
+  useDeleteArtifactMutation: jest.fn().mockImplementation(() => ({
+    isLoading: false,
+    mutateAsync: deleteArtifact
+  }))
+}))
+
+describe('Test Registry Artifact List Page', () => {
+  beforeEach(() => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: MockGetMavenArtifactsByRegistryResponse,
+      error: false,
+      refetch: jest.fn()
+    }))
+  })
+
+  test('Should render empty list if artifacts response is empty', () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const noResultsText = getByText('artifactList.table.noArtifactsTitle')
+    expect(noResultsText).toBeInTheDocument()
+  })
+
+  test('Should render artifacts list', async () => {
+    const { container } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+    const table = container.querySelector('[class*="TableV2--table"]')
+    expect(table).toBeInTheDocument()
+
+    const tableRows = container.querySelectorAll('[class*="TableV2--row"]')
+    expect(tableRows).toHaveLength(1)
+
+    const tableData = MockGetMavenArtifactsByRegistryResponse.content.data.artifacts
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+    expect(globalGetByText(getFirstRowColumn(1), tableData[0].name)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(2), tableData[0].registryIdentifier)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(3), tableData[0].downloadsCount?.toString() as string)).toBeInTheDocument()
+    expect(globalGetByText(getFirstRowColumn(4), tableData[0].latestVersion)).toBeInTheDocument()
+
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+    const dialogs = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const selectPopover = dialogs[0] as HTMLElement
+
+    const items = selectPopover.getElementsByClassName('bp3-menu-item')
+    expect(items).toHaveLength(2)
+
+    expect(items[0]).toHaveTextContent('artifactList.table.actions.deleteArtifact')
+    expect(items[1]).toHaveTextContent('actions.setupClient')
+  })
+
+  test('Should show error message if listing api fails', async () => {
+    const mockRefetchFn = jest.fn().mockImplementation()
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: null,
+      error: {
+        message: 'error message'
+      },
+      refetch: mockRefetchFn
+    }))
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const errorText = getByText('error message')
+    expect(errorText).toBeInTheDocument()
+
+    const retryBtn = getByText('Retry')
+    expect(retryBtn).toBeInTheDocument()
+    await userEvent.click(retryBtn)
+    expect(mockRefetchFn).toHaveBeenCalled()
+  })
+
+  test('Should be able to search', async () => {
+    useGetAllArtifactsByRegistryQuery.mockImplementation(() => ({
+      isFetching: false,
+      data: { content: { data: { artifacts: [] } } },
+      error: false,
+      refetch: []
+    }))
+    const { getByText, getByPlaceholderText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const searchInput = getByPlaceholderText('search')
+    expect(searchInput).toBeInTheDocument()
+
+    fireEvent.change(searchInput, { target: { value: 'pod' } })
+    await waitFor(() =>
+      expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+        registry_ref: 'undefined/abcd/+',
+        queryParams: {
+          page: 0,
+          size: 50,
+          search_term: 'pod',
+          sort_field: 'updatedAt',
+          sort_order: 'DESC'
+        },
+        stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+      })
+    )
+
+    const clearAllFiltersBtn = getByText('clearFilters')
+    await userEvent.click(clearAllFiltersBtn)
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Sorting should work', async () => {
+    const { getByText } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const artifactNameSortIcon = getByText('artifactList.table.columns.name').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(artifactNameSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'name',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const repositorySortIcon = getByText('artifactList.table.columns.repository').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(repositorySortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'registryIdentifier',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const downloadsSortIcon = getByText('artifactList.table.columns.downloads').nextSibling?.firstChild as HTMLElement
+    await userEvent.click(downloadsSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'downloadsCount',
+        sort_order: 'ASC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const lastUpdatedSortIcon = getByText('artifactList.table.columns.latestVersion').nextSibling
+      ?.firstChild as HTMLElement
+    await userEvent.click(lastUpdatedSortIcon)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 50,
+        sort_field: 'latestVersion',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Pagination should work', async () => {
+    const { getByText, getByTestId } = render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const nextPageBtn = getByText('Next')
+    await userEvent.click(nextPageBtn)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 1,
+        size: 50,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+
+    const pageSizeSelect = getByTestId('dropdown-button')
+    await userEvent.click(pageSizeSelect)
+    const pageSize20option = getByText('20')
+    await userEvent.click(pageSize20option)
+
+    expect(useGetAllArtifactsByRegistryQuery).toHaveBeenLastCalledWith({
+      registry_ref: 'undefined/abcd/+',
+      queryParams: {
+        page: 0,
+        size: 20,
+        sort_field: 'updatedAt',
+        sort_order: 'DESC'
+      },
+      stringifyQueryParamsOptions: { arrayFormat: 'repeat' }
+    })
+  })
+
+  test('Should list actions', async () => {
+    render(
+      <ArTestWrapper path="/registries/abcd/:tab" pathParams={{ tab: RepositoryDetailsTab.PACKAGES }}>
+        <RepositoryDetailsPage />
+      </ArTestWrapper>
+    )
+
+    const getFirstRowColumn = (col: number) => getTableColumn(1, col) as HTMLElement
+
+    // click on 3 dots action btn
+    const actionBtn = getFirstRowColumn(5).querySelector('span[data-icon=Options')
+    await userEvent.click(actionBtn as HTMLElement)
+
+    const popovers = document.getElementsByClassName('bp3-popover')
+    await waitFor(() => expect(popovers).toHaveLength(1))
+    const selectPopover = popovers[0] as HTMLElement
+    const deleteItem = globalGetByText(selectPopover, 'artifactList.table.actions.deleteArtifact')
+
+    // click on delete action item
+    await userEvent.click(deleteItem)
+    const dialogs = document.getElementsByClassName('bp3-dialog')
+    await waitFor(() => expect(dialogs).toHaveLength(1))
+    const deleteDialog = dialogs[0] as HTMLElement
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.title')).toBeInTheDocument()
+    expect(globalGetByText(deleteDialog, 'artifactDetails.deleteArtifactModal.contentText')).toBeInTheDocument()
+
+    const deleteBtn = deleteDialog.querySelector('button[aria-label=delete]')
+    const cancelBtn = deleteDialog.querySelector('button[aria-label=cancel]')
+    expect(deleteBtn).toBeInTheDocument()
+    expect(cancelBtn).toBeInTheDocument()
+
+    // click on delete button on modal
+    await userEvent.click(deleteBtn!)
+
+    await waitFor(() => {
+      expect(deleteArtifact).toHaveBeenCalledWith({
+        artifact: 'artifact/+',
+        registry_ref: 'undefined/maven-repo/+'
+      })
+    })
+  })
+})
diff --git a/web/src/ar/pages/version-details/NpmVersion/NpmVersionType.tsx b/web/src/ar/pages/version-details/NpmVersion/NpmVersionType.tsx
index 7d967c60d..7890fd315 100644
--- a/web/src/ar/pages/version-details/NpmVersion/NpmVersionType.tsx
+++ b/web/src/ar/pages/version-details/NpmVersion/NpmVersionType.tsx
@@ -21,12 +21,14 @@ import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client
 import { String } from '@ar/frameworks/strings'
 import { RepositoryPackageType } from '@ar/common/types'
 import { VersionListColumnEnum } from '@ar/pages/version-list/components/VersionListTable/types'
+import ArtifactActions from '@ar/pages/artifact-details/components/ArtifactActions/ArtifactActions'
 import VersionListTable, {
   type CommonVersionListTableProps
 } from '@ar/pages/version-list/components/VersionListTable/VersionListTable'
 import {
+  type ArtifactActionProps,
   type VersionDetailsHeaderProps,
-  VersionDetailsTabProps,
+  type VersionDetailsTabProps,
   type VersionListTableProps,
   VersionStep
 } from '@ar/frameworks/Version/Version'
@@ -77,4 +79,8 @@ export class NpmVersionType extends VersionStep<ArtifactVersionSummary> {
         return <String stringID="tabNotFound" />
     }
   }
+
+  renderArtifactActions(props: ArtifactActionProps): JSX.Element {
+    return <ArtifactActions {...props} />
+  }
 }
diff --git a/web/src/ar/strings/types.ts b/web/src/ar/strings/types.ts
index aa0ef8146..d7ea88906 100644
--- a/web/src/ar/strings/types.ts
+++ b/web/src/ar/strings/types.ts
@@ -10,7 +10,10 @@
  * Use the command `yarn strings` to regenerate this file.
  */
 export interface StringsMap {
+  'artifactDetails.artifactDeleted': string
   'artifactDetails.artifactLabelInputPlaceholder': string
+  'artifactDetails.deleteArtifactModal.contentText': string
+  'artifactDetails.deleteArtifactModal.title': string
   'artifactDetails.downloadsThisWeek': string
   'artifactDetails.labelsUpdated': string
   'artifactDetails.page': string
@@ -23,6 +26,7 @@ export interface StringsMap {
   'artifactList.table.actions.VulnerabilityStatus.partiallyScanned': string
   'artifactList.table.actions.VulnerabilityStatus.scanStatus': string
   'artifactList.table.actions.VulnerabilityStatus.scanned': string
+  'artifactList.table.actions.deleteArtifact': string
   'artifactList.table.actions.deleteRepository': string
   'artifactList.table.actions.editRepository': string
   'artifactList.table.allRepositories': string