From 7d288bd970cc1834ae2104f05f69d47cdd5653bf Mon Sep 17 00:00:00 2001
From: Shevijacobson <139786296+Shevijacobson@users.noreply.github.com>
Date: Fri, 4 Oct 2024 18:43:17 +0300
Subject: [PATCH] :sparkles: Add edit icon with ActionColumns property in the
 Archetypes table (#2098)

**Changes Made:**

- Removed the edit action from the ActionsColumn.

- Added a dedicated edit icon outside the ActionsColumn, providing a
clearer and more focused user interface.

Part of #1318

Before the change:

![Screenshot from 2024-09-29
10-24-26](https://github.com/user-attachments/assets/b0c23db6-a913-4361-9435-6c4ecc296643)

After the change:

![Screenshot from 2024-09-29
10-28-03](https://github.com/user-attachments/assets/175e9d03-f1cd-48b9-b523-bb23b95d71be)

---------

Signed-off-by: Shevijacobson <shevijacob@gmail.com>
Co-authored-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
Co-authored-by: Scott Dickerson <sdickers@redhat.com>
---
 .../app/pages/archetypes/archetypes-page.tsx  | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
index a6fe66f0d..895b39023 100644
--- a/client/src/app/pages/archetypes/archetypes-page.tsx
+++ b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -17,6 +17,7 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
+  Tooltip,
 } from "@patternfly/react-core";
 import {
   Table,
@@ -27,8 +28,7 @@ import {
   Td,
   ActionsColumn,
 } from "@patternfly/react-table";
-import { CubesIcon } from "@patternfly/react-icons";
-
+import { CubesIcon, PencilAltIcon } from "@patternfly/react-icons";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
@@ -473,6 +473,17 @@ const Archetypes: React.FC = () => {
                             }
                           />
                         </Td>
+                        {archetypeWriteAccess && (
+                          <Td isActionCell id="pencil-action">
+                            <Tooltip content={t("actions.edit")}>
+                              <Button
+                                variant="plain"
+                                icon={<PencilAltIcon />}
+                                onClick={() => setArchetypeToEdit(archetype)}
+                              />
+                            </Tooltip>
+                          </Td>
+                        )}
                         <Td isActionCell>
                           {(archetypeWriteAccess ||
                             assessmentWriteAccess ||
@@ -509,15 +520,6 @@ const Archetypes: React.FC = () => {
                                       },
                                     ]
                                   : []),
-                                ...(archetypeWriteAccess
-                                  ? [
-                                      {
-                                        title: t("actions.edit"),
-                                        onClick: () =>
-                                          setArchetypeToEdit(archetype),
-                                      },
-                                    ]
-                                  : []),
                                 ...(archetype?.assessments?.length &&
                                 assessmentWriteAccess
                                   ? [