✨ 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 <[email protected]>
Co-authored-by: Radoslaw Szwajkowski <[email protected]>
Co-authored-by: Scott Dickerson <[email protected]>

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
                                   ? [